This week, you will use Dreamweaver to create two web pages for the Sunholm Solar company introduced in the earlier You Decide assignments. The first will be a home page, and the second will be a content page. The layouts should be the same, but the home page might have more attention-getting features, such as callout items, and it might not show secondary navigation. Generally, you should choose either a two- or three-column layout to use throughout your site. You may want to create the About Us page, because this is a natural springboard from the memo you wrote in Week 1.

Deliverables

NOTE

Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions .

(See the Syllabus section "Due Dates for Assignments & Exams" for due dates.)

After completing the steps below, submit a compressed (zip) file named YourNameLab3.zip containing two HTML files, a CSS file, and an image.

Section	Deliverable	Points
Step 3	CSS style sheet file submitted	5
Step 4	Home page showing complete navigation and functional links	5
Step 5	Home page content complete and appropriate to business needs	5
Step 3	Logo placed on both pages	5
Step 5	Second HTML page showing complete navigation and functional links	5
Step 5	Second page content complete and appropriate to business needs	5
	Total	30

Required Software

Dreamweaver Creative Cloud

Access the software following the directions in "Accessing Dreamweaver," a document you will find in Course Resources page under Course Home. Steps: 2-5

Dreamweaver

Steps: 2-5

Use a personal copy or the free Adobe Creative Cloud subscription provided by DeVry.

Adobe Creative Cloud Subscription

Internet Explorer

Access the software at https://lab.devry.edu . Step: 5

Lab Steps

STEP 1: Preparing for the iLab

On a disk drive on your local computer, create a folder named BIS325_Website. You could create this in the My Documents folder on your local C: drive or on a removable drive. You will use this folder to store all files for the Sunholm Solar website you will be creating in this and subsequent iLabs.

Download the image SS_Logo.png and save this file to the BIS325_Website folder you just created.

Open your Week 2 You Decide assignment (site structure chart) showing your site map and list of files and page names. You'll need this for later in the lab.

STEP 2: Create a Dreamweaver Site

Start Dreamweaver. When the main screen appears, pull down the Site menu and select New Site. Using the New Site option allows Dreamweaver to help you manage files, images, and other assets.

Image Description

When the Site Setup dialog appears, enter a site name, such as BIS325_Website, and specify a new folder name in which to save the site. Dreamweaver will automatically create the new folder for you if it doesn't exist already. Because your folder does exist (you just created it), click the folder icon beside the Local Site Folder textbox to navigate to the location for the BIS325_Website folder you created in Step 1 of this iLab.

Image Description

Click the Save button in the Site Setup dialog to save the settings for your site.

Dreamweaver will show you the Files panel for your site at lower right and the main screen once again. If for some reason you cannot see the Files panel, you can always get it from the Window dropdown menu at the top of the screen. You may choose to collapse the Files panel to clear your workspace.

STEP 3: Create the Homepage

Now let's create the home page for your site. Pull down the File menu and select New, as you did in the Week 2 iLab.

Image Description

The New Document dialog opens, showing layout choices. Select HTML for Page Type, and then for Layout, choose an appropriate two- or three-column layout to use throughout your site. In the example below, a two-column fixed layout with a sidebar, header, and footer was chosen. Make sure that the DocType is set to XHTML 1.0 Transitional to ensure compatibility with current browsers. In the Layout CSS dropdown, select Create New File to generate a new CSS file. Click the Create button.

Image Description

Dreamweaver wants to know where to save the style sheet. Save it to your website folder. Leave the style sheet name and extension as is.

Image Description

Dreamweaver now creates a layout for you. There is a lot of sample text shown; this is provided to fill out the layout so that it does not appear to be too small. Switch to Design View to see the layout.

Image Description

Notice that there is a place to insert an image. Select this area, and then choose Insert Image from the Insert menu. Add in the Sunholm Solar logo SS_Logo.png. You have already downloaded this logo file as Step 1 in this lab. This step may not act as you might expect. The new logo file will appear under where the words Insert_logo appear. You then should click on those words and press delete. The next i\three images show the sequence.

Image Description

Navigate to the folder in which you have stored the logo file and select it. Click OK.

Image Description

The result should look like this, with both the words insert_logo and the image of the logo appearing.

Image Description

Click on the insert_logo words and press delete.

Image Description

A view of the page being created looks like this.

Image Description

You may receive a warning message about using document-relative paths. Click OK to acknowledge the message. (This issue will be fixed automatically as soon as you save the file.) You should be saving your files often.

STEP 4: Update Links

Switch to the Code view in Dreamweaver and scroll up to the <body> tag near the top of the code. You will see the code for the Navigation bar, consisting of a list of links. All of the links will have placeholders for both the href property and the link text.

Image Description

Replace the pound sign (#) placeholders with the file names that you specified should be linked to the home page when you created the site map for the Week 2 You Decide assignment (Site Plan), and add in the appropriate link text. If you have more than four pages linked to your home page, duplicate the last item to create as many additional links as needed. Simply copy the line and paste it below itself in the code. Your file names and link text will probably be different than that shown here, depending on your site map.

Test your navigation by switching to Design view and turning on Live view. The links will not be clickable, but you will be able to see the CSS rollovers in action. You will see several of the links working at the end of this lab, using Preview in Browser (F12).

Image Description

After viewing the rollovers, click the Live button again to exit Live view so that you will be able to edit the page.

STEP 5: Update Content and Create Second Page

Dreamweaver has generated a lot of placeholder content to fill the page. You'll need to replace it. Update the content with material relevant to Sunholm Solar. Remember to keep the audience in mind as well as the goals of the site. Make sure to include enough text to suggest completeness.

You may leave the headings and paragraphs in place and simply replace the text with appropriate content. If you want to create new headings, select the text and use the Properties dialog at the bottom of the screen to specify a Format (Heading, Paragraph, etc.).

Be sure to write your own headings and text for the home page; do not simply copy the headings and text that appear in the example above. When you are satisfied with your content, it's time to save your HTML file. Remember that the home page should be called index.html. Use the File menu and select Save As. When the dialog opens, verify that you're saving into your project folder; Dreamweaver does this for you automatically. Type ""index.html," including the quotes to force Dreamweaver to use the .html file extension.

STEP 6: Upload Your Files

Zip both HTML files, your CSS, and your image, and upload the zip file to the Week 3 iLab dropbox. Congratulations! Your site is off to a fine start.

Submit your lab to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions .

See the Syllabus section "Due Dates for Assignments & Exams" for due date information.