Creating a simple site using CSS.
Right-click in the Module 2 folder and select new file. Name this new file "styles.css."
Next, right-click again...
Create a new file called "index.html."
Index is the universal home page name.
Double-click the index.html file to open it.
You'll see your blank home page in Design view.
Set the title to "Team Volunteer."
This title will be visible to browsers.
Now let's attach the style sheet and make a header.
Click the Attch Style Sheet icon at the bottom of the CSS Styles panel.
And then browse to the file you created, styles.css.
Click OK.
Now let's create a header. In Code view...
Click between the <body> tags...
And type <div id="header">.
Then close the <div> tag.
Put your cursor between the open and close <div> tags.
In the Properties panel at the bottom of the screen, make sure the CSS button is selected and click the Edit Rule button.
In the dialog box that opens the Selector Type will be ID and the Selector Name will be #header.
In the CSS Rule Definition box, select the category Box.
And make the Width 800 pixels and the Height 200 pixels.
Your margins will not all be the same.
Uncheck Same for All in the Margins, and make the right...
...and left margins Auto.
Click OK when you are completed. Close the dialog box.
When you select Design view...
You'll see an empty box where your header is.
Now let's add the header image. Place your cursor in the header box in Design view and select Insert > Image.
Browse to the images folder.
And find the header GIF file.
The alt tag's dialog box will appear.
Enter a brief description of the image for the alternate text.
And you should now see the image appear in the header. You'll now make a navigation bar just below the header.
In Code view...
Below the header...
Type <div id="navbar"></div>.
This will be your new navigation bar. Place your cursor inside this tag.
Go to the CSS Styles panel, right-click, and select New.
Choose Selector Type Compound, and you'll see that #navbar appears in the Selector Name area. Click OK.
And in the CSS Rule Definition dialog again, choose the Box category.
And make the Width 800 pixels.
But leave the Height blank.
The Height will snap to fit whatever content you enter.
In the Margin area, you will again...
Uncheck Same for All, and make Left and Right margins "Auto."
Change the Type in the Type category.
Select the text color.
Then select Category > Block to change the text alignment.
Click OK.
Now type Home, About Us, Contact, and Video inside the navbar tags in Code view. These will be the text links in your navigation bar.
Let's link the text "Contact" in the navigation bar for practice.
First create a Contact HTML file by right-clicking on the Module 2 folder in the Files panel, then create a new file called contact.html.
In Design view...
Select the text "Contact" in the navigation bar.
Then, select Insert > Hyperlink.
Browse to the Contact page you just created.
Click OK to close the Insert Hyperlink dialog. You have now linked the word "Contact" to a page.
When you create a link, you automatically assign the <a> tag to that content. Now make a main area for text on your home page. In Code view...
Type a new tag <div id="maincontent"></div> and put your cursor inside.
Make a new CSS rule for the maincontent style just like you did for the header and navbar ids.
Set the style to the following attributes: category Box, 800 pixels in Wdith, and Height as 400 pixels.
Uncheck Same for All in the Margin area, and set the Left and Right margins to "Auto."
As a twist, let's use an image as the background for this main content area.
Browse to the image in your images folder.
Select font characteristics in the Type category.
Select the text color.
And click OK.
In Design view, you can now see your main content area.
Between the
"Introduce your site here"
"Do you have time to volunteer? Register here."
"Do you have a task for a volunteer? Register here."
"Questions?"
Next we will create a footer. Make a new <div> tag.
<div id="footer"></div>. Click inside the tag, and create a new CSS rule.
Selector Name will be #footer. Click OK.
And in the Rule Definition box, choose the Box category.
The Width will again be 800 pixels, and as with the navigation bar, you won't need to specifiy a height, because it will snap to fit your content.
For the Margin, uncheck Same for All and set the Left and Right margins to "Auto."
For a unique look, in the Rule Definition box choose category Background, and select the color black.
In the Type category, we will select the color white.
This way the footer will display white text over a black background. Finally, to center the text, choose the Block category, select Text align > center.
Then select OK.
Finally, inside the <div> tags type "Copyright 2013".
Remember to save your work as you go. Select File > Save All.
And then preview your site using F12, or File > Preview in Browser.