Step 4 : Setting up basic page styles
Make sure that you are in split-screen view whereby you see both your code and your design view at the same time. You can check this by looking at the top left of your document window and making sure the “split” button is highlighted as shown in below.
Ensure you are in split screen mode.
The title of your page is an important detail. Each page should have a unique and descriptive name because it is searchable. The page title is displayed at the top of the browser window when you visit a web page. To add a title to this page, type it into the field at the top of the document window.
Add a title for the home page by entering it in the document window.
Let’s now add a series of CSS rules to the HTML “body” tag. Because the body tag encompasses everything that sits within your web site, adding styles to it will govern the default font and color selections of your page. In the CSS panel, click the “+” icon at the bottom to create a new style. In the window that appears, choose Tag from the drop down options.
Enter “body” as the name of your selector (if it is not already entered). Because you will ultimately have several pages that comprise your web site, it makes sense to create a single external CSS style sheet file that all of them can reference. That way, if y ou ever need to make changes, you just need to make them in the one file, and all HTML pages that reference it will instantly update.
To save your new rule into a new external style sheet, choose New Style Sheet from the drop down. Click OK. Name it “global.css” and save it inside your project CSS folder.
Create a new CSS style for your web page. Select “tag” and then enter “body” for the tag we will target. Save the style in a new external style sheet.
Once you save it, the New CSS rule window appears where you can apply styles. On the left of the window, there are different categories that you can set CSS rules for. Below shows the settings entered for the “Type,” “Background,” and “Box,” categories.
Apply the above settings as new rules for the body tag.
In the same way you set up a rule for the body tag, set up new rules for headlines and links—the h1, h2, a, a:hover tags specifically. h1 and h2 are two levels of headlines, h1 one being the larger one
that will be used above the main hero image. The h2 headlines will be used in the three column content area. The “a” tag is the link tag and a:hover is the link rollover effect. In the CSS panel, click the “+” icon to open the new rule window.
Save the new headline and link styles into your global.css file
As in above show, choose “tag” from the drop down, but enter “h1” as the selector name. Now that you have created and saved the “global.css” file in the previous step, choose this file from the bottom dropdown as the place where this new style will be saved.
Once you are in the New CSS Rule window, in the “Type” category, select a font list from the drop down options, or create your own new font list. Choose 24 px for the font size, and for color, enter the hexidecimal value: #fd6a51 to get a nice orange color.
To create your own font list, select “Edit font list” from the drop down. In the new window, scroll through the list of fonts, highlight one and click the arrow button to move it into the list. You can select several other fonts and move them into the list. This creates a cascade. If a user’s browser does not have access to the first font on the list, it tries the second, then third, and so on. Therefore, if all else fails, it’s a good idea to end your list with a generic “serif” or “san serif” option.
Keep in mind that fonts on your computer are not necessarily available on other people’s computers. If you are going to specify custom fonts, you need to be sure to use a type service such as TypeKit.com.
For your h1 headline, select a font list or create a new one. Set the size to 24 and the color to orange #fd6a51.
Once again, click the “+” icon in the CSS panel to set up new CSS rules for the h2 tag. Choose the same font family you did for h1, but set the size and color to18 px and #333333 (or just #333 for short). For your h2, let’s also add a negative margin so there is not a big gap between it and the body copy that will appear below it. There are many ways to control spacing in CSS, but this works as well as any others and illustrates how you can use negative numbers in CSS as well. In the “Box” settings, uncheck the “Same for all” in the Margin settings, and enter -10 for the bottom margin.
For your h2 headline, set a negative value for the bottom margin.
Lastly, set up the style for your links. Click the “+” icon to create a new rule, and in the Type settings, enter a color of #333 (a dark gray), and check the “none” box for text decoration. If you do not style your links, they appear underlined and blue by default.
For the link rollover state, we will define rules for the pseudo class “a:hover” by hand. Depending on the version of Dreamweaver you are using, you may not be able to define certain CSS classes and rules with the point and click windows. In such cases, Dreamweaver helps you out by giving you quick editing access to the global.css file. Here’s how.
At the top of the document window, you see that you’ve been working on the “source code” view of the web page. Notice that next to it is the “global.css.” Dreamweaver gives you quick access to all externally
linked files, so without leaving the design view of your page, you can switch to all the linked files and edit them as needed. Click on the global.css button to see the css code you’ve created thus far for your page.
Dreamweaver lets you quickly access and edit external files without leaving your design view.
In the css file, just after the closing bracket “}” of the “a” link tag, add a new rule for the link rollover by typing:
a:hover {Save the changes (File > Save) and click back on the “Source Code” button to see the HTML again.
Color: #fd6a51;
}
Click on the “+” icon in the CSS panel to add a new style. This time, instead of styling a tag such as a body or h1 tag, we will create a custom “class.” A CSS class is a set of properties that can be applied to any HTML element much like appending an adjective to noun. In this case, we will create a class called “.selected” (classes are preceded by a period). This class will turn an element orange when applied. For example, we can use this class later to override a link from its gray color to be orange instead. (Remember, we set up a rule that said all links are gray).
Set up a new class called “selected” using the CSS panel.
You can open the index.html in Dreamweaver and move on to Step 5
Next - Step 5 : Building the page containers
No comments:
Post a Comment