This is Part 2 of a three-part tutorial series exploring the HTML5 and CSS3 features in Dreamweaver CS5 version 11.0.3 . Part 1 shows how to build a web page for a fictional restaurant, Citrus Café, using HTML5 structural elements, such as <header>, <footer>, <nav>, <section>, and <article>. In this part, you'll style the page using CSS3 properties—such as text and box shadows, rounded corners, and transitions—that are widely supported in modern browsers and in Dreamweaver CS5 Live view. Because CSS3 is still being developed, you need to use browser-specific properties in combination with the official properties. In this tutorial, you'll learn how to access the browser-specific properties in Dreamweaver CS5's code hints. You'll also learn how to persuade Internet Explorer to apply styles to the new HTML5 structural elements.

After styling the page for display on a desktop computer, you'll learn in Part 3 how to add CSS media queries to optimize the styles for a tablet device and mobile phone using the Multiscreen Preview panel.

This tutorial is divided into the following sections:

Review the task ahead
Applying the basic styles
Styling the menu
Completing the main styles

Review the task ahead

In Part 1 of this tutorial series, you built the web page for the Citrus Café site using HTML5 structural markup. If you didn't complete Part 1, you should do so before continuing with this part. Alternatively, you can use the download files for this part, citrus_pt2_start.zip if you haven't already . When unzipped, define a Dreamweaver site called Citrus Café with the citrus folder as the local site folder. Use index.html in the site root and desktop.css in the css folder as your work files. The completed files are in the completed folder.

The Citrus Café web page is currently completely unstyled, but the content follows a logical structure, which makes it accessible and search engine friendly see Figure 1 .

Figure 1. The Citrus Café page before applying any styles.

You now need to style the page with CSS, first for display in a desktop computer. These styles will form the basis for two other style sheets that optimize the page display for screens with smaller resolutions, such as tablet devices and mobile phones. The supplementary styles will be applied using CSS media queries to limit their application depending on the detected screen resolution. Not all browsers support CSS media queries, so it's important to have one style sheet that can be understood by all browsers. That's the style sheet you'll create in this part of the tutorial series, in preparation for using the Dreamweaver CS5 Multiscreen Preview panel see Figure 2 in Part 3 to optimize the layout for smaller screen resolutions.

Figure 2. The Multiscreen Preview panel shows the page as it will look at different screen resolutions.

Applying the basic styles

Although index.html uses HTML5 structural elements that hadn't even been thought of when Internet Explorer 6 was released in 2001, the unstyled page displays correctly in that ancient browser. However, once you start adding CSS to the page, not only Internet Explorer 6, but also Internet Explorer 7 and Internet Explorer 8 fail to apply style rules to the new elements. Fortunately, a little bit of JavaScript magic cajoles these miscreants into compliance. The script keeps Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 happy by creating dummy HTML5 structural elements in the page's Document Object Model DOM , persuading them to render the styles as expected. So, the first task is to add the script to the <head> of the page.

Persuading Internet Explorer to apply CSS to HTML5 tags

The JavaScript file can be served either from your site or from the Google Code content distribution network CDN . The following instructions describe both methods.

Open index.html in Code view, and select Source Code in the Related Files toolbar, if necessary, to view the HTML structure of the page.
Create a new line immediately before the closing </head> tag.
Click the Script button in the Common category of the Insert panel/bar, or select Insert > HTML > Script Objects > Script. This opens the Script dialog box.
Click the Browse for folder icon alongside the Source text box, and navigate to the javascript folder in the Citrus Café site. Select htm5.js and click OK or Choose on a Mac .
Click OK to close the Script dialog box. The following code is inserted into the <head> of the page:

<script type="text/javascript" src="javascript/html5.js"></script>

This applies the local version of the script.

If you want to use the Google Code CDN, amend the src attribute like this:

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"

Note: Using a local version of the script ensures that the file is always available. Serving the file from a CDN runs the risk admittedly a small one that the remote server might not be available, but it has the advantage that the file might already be in the user's browser cache as a result of visiting another site. Since the script is only 2 KB, downloading the file from either source is unlikely to affect the speed of your page.

The only browsers that need this script are Internet Explorer 8 and earlier, so wrap the <script> tag in the following Internet Explorer conditional comment:

        <!--[if lte IE 8]>
<script src="javascript/html5.js"></script>
<![endif]-->
    

This ensures that the script is downloaded only by Internet Explorer 8 or earlier. Other browsers ignore it although it doesn't do any harm if they download it, too .

If anyone visits your site with JavaScript disabled in Internet Explorer 8 or earlier, the HTML5 structural elements won't be styled, but the rest of the page will be. If a significant part of your target audience is likely to be using Internet Explorer with JavaScript turned off, you should replace the HTML5 structural elements with <div> elements or wrap them in <div> elements, and apply the CSS to the <div> elements.

Note: This script must be included in the <head> of the page. It won't work if you add it before the closing </body> tag.

Styling the body and <hgroup> element

The <header> section contains an <hgroup> element with the main heading and subtitle. This is necessary for search engines and screen readers for the blind. For display in visual browsers, the <hgroup> will be replaced by an attractive logo with the text in an image.

Switch to Design view. Open the CSS Styles panel, and click the New CSS Rule icon at the bottom right of the panel to open the New CSS Rule dialog box.
Note: Dreamweaver has several ways of doing most things. You can also open the New CSS Rule by selecting Format > CSS Styles > New, or by selecting <New CSS Rule> from the Targeted Rule pop-up menu of the Property inspector in CSS mode. For brevity, I'll just tell you to open the New CSS Rule dialog box. Choose whichever method suits your workflow best.
In the New CSS Rule dialog box, use the following settings:
- Selector Type: Tag
- Selector Name: body
- Rule Definition: desktop.css
All basic rules will be defined in desktop.css, so use this setting all the time until you start creating the alternative rules for different resolutions in Part 3.
Click OK to open the CSS Rule Definition dialog box.
In the Type category, set Font-family to Trebuchet MS, Arial, Helvetica, sans-serif, and color to black #000 .

In the Background category, set Background-color to #66B034.

In the Box category, set Margin and Padding to 0, and leave the Same for all check boxes selected.

Click OK to create the style definition. The background turns a lime green, and the font is changed.
Create a new CSS rule for the container <div> . This uses an ID, so set Selector Type in the New CSS Rule dialog box to ID, and Selector Name to #container. Click OK.
In the Box category, set Width to 840px.
Set Margin Top and Bottom to 0, and Right and Left to auto.

Click OK. The page's content is centered in a fixed width.
Position your insertion point inside the Citrus Café heading, and click <header#logo> in the Tag selector at the bottom of the Document window.
Open the New CSS Rule dialog box. Dreamweaver should automatically select Compound as the Selector Type, and suggest #container #logo as the Selector Name. Click the Less Specific button once so the value in the Selector Name text box is just #logo, and click OK.
In the Background category of the CSS Rule Definition dialog box, browse to images/logo.jpg for Background-image, and set Background-repeat to no-repeat.
In the Box category, set Width to 100% and Height to 138px.

When you click OK, the Citrus Café logo is inserted as a background image at the top of the page, but the <hgroup> element sits on top of it.
Click inside one of the headings in the <hgroup> , and select <hgroup> in the Tag selector.
Open the New CSS Rule dialog box. Dreamweaver should automatically suggest #container #logo hgroup as the Selector Name. Click the Less Specific button once to leave just #logo hgroup, and click OK.
Select the Positioning category in the CSS Rule Definition dialog box, and set Position to absolute, and Top to –500px minus 500 .
When you click OK, the <hgroup> should disappear. If Design view fails to refresh, press F5 or toggle Live view on and off.
The text headings are no longer visible in a visual browser, but they will still be detected by search engines and screen readers for the blind.
Select File > Save All Related Files to save your changes to the style sheet.

The top section of index.html should now look like Figure 3.

Figure 3. The logo is now in position, but the rest of the page content has moved up.

Moving the <hgroup> out of the way has resulted in the rest of the page content moving up, with the menu sitting on top of the logo. You'll fix that next.

Styling the menu

Styling an unordered list for a menu is now widely accepted as one of the most accessible ways of adding site navigation. Thanks to new CSS3 properties being adopted by many browsers, it's possible to achieve effects that previously relied on images and JavaScript.

Creating the basic menu styles

The CSS Rule Definition dialog box doesn't yet support CSS3 properties, so let's begin by creating the basic menu before adding flourishes of CSS3 goodness.

The first task is to move the menu below the logo. Your first instinct might be to add a top margin to the <nav> element, and Design view seems to share the same opinion, but Figure 4 shows what happens if you do.

Figure 4. Adding a top margin to the <nav> element pushes the logo away from the top of the page.

This doesn't have anything to do with the use of HTML5. It's the old story of adjacent vertical margins merging in CSS. The <header> element has no top margin and the <hgroup> has been removed from the flow by absolute positioning, so adding a top margin to the <nav> element pushes the <header> from the top of the page, bringing the background images with it.

Backgrounds are displayed through padding, so the solution is to use padding.

In the New CSS Rule dialog box, set Selector Type to Tag, and select nav from the Selector Name pop-up menu all the HTML5 elements are listed . Click OK to open the CSS Rule Definition dialog box.

In the Box category of the CSS Rule Definition dialog box, set Padding Top to 150px, and deselect the Same for all check box.
When you click OK, the menu moves below the logo in Design view.
However, if you turn on Live view, the content below the menu moves up to obscure it. Let's fix that by creating a rule for the maincontent <div> .

The <div> uses an ID, so set Selector Type to ID in the New CSS Rule dialog box. Set Selector Name to #maincontent.
In the Box category of the CSS Rule Definition dialog box, deselect both Same for all check boxes. Set Padding Top and Bottom to 10px, and Padding Right and Left to 0. Set Margin Top to 80px, and click OK.
There's still some overlap in Live view, but that will be eliminated when the menu items are floated.
You can continue using the New CSS Rule and CSS Rule Definition dialog boxes, or work directly in the style sheet. To save time, here are the basic style definitions that need to be added to desktop.css:

        ul {
    padding:0;
    margin:0;
}
nav ul {
    list-style: none;
    margin-bottom: 15px;
    font-weight: bold;
    font-size:20px;
}
nav ul li {
    float: left;
}
nav ul a {
    display: block;
    width:140px;
    padding: 10px;
    text-align:center;
    text-decoration: none;
    color: #fff;
    border: 1px solid #618A37;
    margin: 5px 0px;
}
    

Turn on Live view. The top of the page should now look like Figure 5.

Figure 5. The basic styles turn the unordered list into a series of buttons.

Save desktop.css.

Adding CSS3 flourishes to the menu

If possible, continue working with Live view activated. You need to work directly in desktop.css because the CSS3 properties are available only through code hints in Code view.

Select desktop.css in the Related Files toolbar, and resize Split view so you can see as much of Live view as possible while still being able to edit the style rules.
Position your insertion point to the right of the last semicolon in the nav ul a style definition, and press Enter/Return to insert a new line. The code hints for CSS properties should appear.
Type a hyphen. This brings up the mini-menu shown in Figure 6.

Figure 6. Code hints display a mini-menu for browser-specific properties.

CSS properties that begin with a hyphen are browser-specific. Because CSS3 is still being developed, you need to use the browser-specific versions followed by the standard property. Properties prefixed with –moz are implemented by Firefox, -o is for Opera, and –webkit is for Safari and Google Chrome.

Select moz-, and double-click or press Enter/Return to bring up a submenu of code hints for –moz properties. Continue typing or use the down arrow key until you find border-radius see Figure 7 , and double-click or press Enter/Return to add the property to the style rule.

Figure 7. The browser-specific properties are in a submenu.

Set the value of -moz-border-radius to 6px. Pressing F5 refreshes Live view, but you won't see any change, becSet the value of -moz-border-radius to 6px. Pressing F5 refreshes Live view, but you won't see any change, because Live view is powered by the WebKit browser engine.
Unfortunately, you need to add the same rule several times for each browser you want to target. The good news is that Opera supports many CSS3 properties without the need for the browser-specific prefix. If you access the -o submenu, you'll see it's quite short.
You should always finish with the official CSS3 property. Once browsers support the official property, they will ignore the browser-specific one.

With the -moz , -webkit and official versions added, the nav ul a style rule should look like this:

        nav ul a {
    display: block;
    width:140px;
    padding: 10px;
    text-align:center;
    text-decoration: none;
    color: #fff;
    border: 1px solid #618A37;
    margin: 5px 0px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}
    

Press F5 to refresh Live view. You should now see a subtle rounded edge to each corner of the menu buttons. The larger the value of border-radius, the more pronounced the rounding will be.
Add the following properties to the nav ul a style rule:

        -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;
    

The box-shadow property takes a color and three length values. The first length is the horizontal offset, the second length is the vertical offset, and the third one is the blur radius of the shadow. Positive values for the first two lengths put the shadow to the right and bottom of the element. Negative values put the shadow on the left and top. So, these property definitions add a shadow to the menu buttons offset one pixel to the right and bottom, with a 3 pixel blur.

The colors here are expressed using the rgba syntax, which is new to CSS3. The first three values represent red, blue, and green on a scale from 0 to 255 you can also use percentages . The final value represents opacity on a scale of 0 to 1, ranging from transparent 0 to fully opaque 1 .

Note: Dreamweaver doesn't support the conversion of hexadecimal color values to rgba . You can download a free Convert to RGBA Dreamweaver extension from my website at http://foundationphp.com/tools/.

Add one more property to the nav ul a style rule:

text-shadow: rgba(0,0,0,0.8) 1px 1px 1px;

You don't need browser-specific versions for this property. Although it's part of CSS3, it was originally part of CSS2, but was dropped from the specification through lack of browser support. Now, all current browsers—except one—support it. No prizes for guessing that the odd one out is Internet Explorer.

Press F5 to refresh Live view. The menu buttons now have subtle shadow effects that make them stand out from the background see Figure 8 .

Figure 8. The CSS3 properties make subtle, but elegant changes to the menu.

Add the following style definitions to desktop.css:

        nav ul a:link, nav ul a:visited {
    background: rgba(255,255,255,0.2);
}
nav ul a:hover, nav ul a:active, nav ul a:focus {
    background: rgba(255,255,255,0.4);
}
    

These two rules add a translucent white background to the menu buttons using the new rgba syntax. In their normal or visited state, the white background has an opacity of 20%. When in the hover, active, or focus states, the opacity increases to 40%, adding a highlight effect to the buttons.

Now for the final CSS3 flourish. Create the following style rule:

        nav ul li:hover {
    margin-top:-10px;
}
    

This moves each menu button 10 pixels up when you hover over it.

The movement is abrupt, but the CSS3 transition properties can smooth the movement. Amend the nav ul li rule like this:

        nav ul li {
    float: left;
    -webkit-transition-duration:.5s;
    -webkit-transition-property:margin-top;
    -webkit-transition-timing-function:ease-in-out;
    -o-transition-duration:.5s;
    -o-transition-property:margin-top;
    -o-transition-timing-function:ease-in-out;
    -moz-transition-duration:.5s;
    -moz-transition-property:margin-top;
    -moz-transition-timing-function:ease-in-out;
    transition-duration:.5s;
    transition-property:margin-top;
    transition-timing-function:ease-in-out;
}
    

It looks like a lot of typing, but there are three basic properties: transition-duration , transition-property , and transition-timing-function . At the moment, only WebKit browsers and Opera support these properties, but they're due to be supported in Firefox 4. You need to use the browser-specific properties, but they're all the same apart from the prefix, and they all take the same values.

This sets the duration of the transition at half a second, and applies it to margin-top, easing slowing down the transition at the start and finish.

Save desktop.css.

Completing the main styles

The remaining parts of the page use standard CSS2.1. The main points to notice concern the background to the restaurant's mission statement, and the smaller images in the pods.

The background image to the mission statement lrg_hero.jpg is 819 pixels wide and 297 pixels high. However, the text needs to be constrained to the left side by padding. Because padding is added outside the content of an element, you need to subtract the value of the padding from the width applied to the <div> element.

The other point is that there are three pods under the mission statement. That leaves only 273 pixels for each pod, including the gaps between them. However, the images in the first two pods are both 302 pixels wide. They have been made that size because med_hero.jpg, the background image that will be used in the design optimized for tablet devices is 669 pixels wide. In the tablet design, there will be just two pods under the mission statement, so the images need to be displayed at their full width. To make them fit the narrower pods in the desktop version, the overflow property of the pod's content needs to be set to hidden.

Styling the mission statement

The mission statement is in an <article> element that has an ID, so you can use an ID selector to style it.

In desktop.css, create the following style rule:

        #vision {
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:32px;
    font-weight:bold;
    background-image:url(../images/hero.jpg);
    background-repeat:no-repeat;
}
    

You now need to work out how much padding to put around the text, and deduct it from the width and height of the image. After experimenting, I decided to put 40px on the left and 370px on the right, a total of 410px. Deducting that from the 819px of the image leaves 409px for the width. I also put 60px of padding on the top, but none on the bottom. That leaves 237px for the height. So, although the background is 819 x 297, the height and width of the content is 409 x 237.
The background shows through the padding around the content. You need some space below the background image, so add a bottom margin of 20px. Also adjust the vertical spacing of the text by setting line-height to 1.2. The amended style rule should look like this:

HTML5 and CSS3 in Dreamweaver CS5 – Part 2: Styling the web page

by David Powers

Content

Created

ページツール

タグ

必要条件

ユーザーレベル

Review the task ahead

Applying the basic styles

Persuading Internet Explorer to apply CSS to HTML5 tags

Styling the body and <hgroup> element

Styling the menu

Creating the basic menu styles

Adding CSS3 flourishes to the menu

Completing the main styles

Styling the mission statement

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

HTML5 and CSS3 in Dreamweaver CS5 – Part 2: Styling the web page

by David Powers

Content

Created

ページ ツール

タグ

必要条件

ユーザーレベル

Review the task ahead

Applying the basic styles

Persuading Internet Explorer to apply CSS to HTML5 tags

Styling the body and <hgroup> element

Styling the menu

Creating the basic menu styles

Adding CSS3 flourishes to the menu

Completing the main styles

Styling the mission statement

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

ページツール