Creating your first website Part 2: Creating the page layout

CREATE AND SAVE A NEW PAGE

After you have set up a site and examined any comps, you are ready to begin building web pages. ou!ll start by creating a new page, and saving it in the cafe"townsend local root folder of your website. #he page eventually becomes the home page for Caf$ #ownsend. Note: %f you haven!t created the caf$ townsend local root folder, you must do so before you proceed. &or instructions, see 'etting up your site and pro(ect files.
). %n *reamweaver, select &ile + ,ew.

2.

%n the -lan. Page category of the ,ew *ocument dialog box, select /#01 from the Page #ype list, select 2none+ from the 1ayout list 3these two options should already be selected by default4, and clic. Create. Note: %n the Page #ype list below the 2none+ option you!ll see all of the C'' layouts that come with *reamweaver. 1ater you can return to this dialog box to explore the different .inds of C'' layouts available.

5. 6.

'elect &ile + 'ave As. %n the 'ave As dialog box, browse to and open the cafe"townsend folder that you defined as the site!s local root folder. 3%n Part ) of this tutorial series, you created this folder within a folder called local"sites.4

7.

8nter index.html in the &ile ,ame text box and clic. 'ave. #he file name now appears in the title bar at the top of the application window, as well as in the tab of your new document.

9.

%n the *ocument #itle text box at the top of your new document, type Cafe Townsend 3see &igure 24.

Fig !e ". Adding the page title

#his is the title of your page 3different from the file name4. our site visitors will see this title in the browser window title bar when they view the page in a web browser.
:. Clic. once on the page to move the insertion point out of the *ocument #itle text box. ou!ll see that an asteris. 3;4 appears next to the file name in the document!s tab. #his asteris. indicates that a file has changed and that you need to save the file if you want to .eep the changes. <. 'elect &ile + 'ave to save your page.

Creating your first website Part 2: Creating the page layout

#NSERT TA$%ES

,ext you!ll add a table that will hold text, graphics, and Adobe &lash assets.
). Clic. once on the page to ensure place the insertion point is in the upper=left corner of the page 3see &igure 54.

Fig !e &. Placing the insertion point in the upper=left corner of the page

2.

'elect %nsert + #able.

5.

%n the %nsert #able dialog box, do the following 3see &igure 64:
8nter & in the >ows text box. 8nter ' in the Columns text box. 8nter ()) in the #able ?idth text box. 'elect Pixels from the #able ?idth pop=up menu. 8nter ) in the -order #hic.ness text box. 8nter ) in the Cell Padding text box. 8nter ) in the Cell 'pacing text box.

Fig !e *. 8ntering the initial table properties

6.

Clic. @A. A table with three rows and one column appears in your document 3see &igure 74. #he table is :BB pixels wide with no border, cell padding, or cell spacing.

Fig !e +. A table with three rows and one column appears in your document

Note: #ables are a powerful tool for presenting tabular data and for laying out text and graphics on an /#01 page. A table consists of one or more rowsC each row consists of one or more cells. ?hen you create multiple rows with multiple cells, the cells form columns. #echnically, a cell is a division within a horiDontal row, and a column is the vertical accumulation of those cell divisions. *reamweaver displays the table width and the width for each table column in the #able selector 3indicated by green lines4 when the table is selected or when the insertion point is in the table 3see &igure 94.

Fig !e ,. #able width and column width in *reamweaver

,ext to the widths are arrows for the table header menu and the column header menus. ou can use the menus for Euic. access to common table=related commands. ou can also enable or disable the display of the widths and menus by selecting Fiew + Fisual Aids + #able ?idths. #ables can have borders, and the cells of a table can have padding, spacing, or both. Cell padding refers to the number of pixels between the cell!s content and the cell!s boundaries. Cell spacing refers to the number of pixels between ad(acent table cells. %f you don!t explicitly assign values for cell padding and cell spacing, most browsers display the table as if cell padding were set to ) and cell spacing were set

to 2. %f you want to ensure that browsers display the table with no padding or spacing, set cell padding and cell spacing to B. &or more information about tables, see Presenting content with tables in the *reamweaver /elp.
7. 9. Clic. once to the right of the table to deselect it. 'elect %nsert + #able to insert another table.

:.

%n the %nsert #able dialog box, do the following for the second table:
8nter ' in the >ows text box. 8nter & in the Columns text box. 8nter ()) in the #able ?idth text box. 'elect Pixels from the #able ?idth pop=up menu. 8nter ) in the -order #hic.ness text box. 8nter ) in the Cell Padding text box. 8nter ) in the Cell 'pacing text box.

<.

Clic. @A. A second table with one row and three columns appears below your first table 3see &igure :4.

Fig !e (. A second table with one row and three columns appears below your first table.

G. )B.

Clic. to the right of the table to deselect it. %nsert a third table by selecting %nsert + #able and entering the following values in the %nsert #able dialog box:

8nter ' in the >ows text box. 8nter ' in the Columns text box. 8nter ()) in the #able ?idth text box.

'elect Pixels from the #able ?idth pop=up menu. 8nter ) in the -order #hic.ness text box. 8nter ) in the Cell Padding text box. 8nter ) in the Cell 'pacing text box.

)).

Clic. @A. A third table, with one row and one column, appears below your second table 3see &igure <4.

Fig !e -. A third table, with one row and one column, appears below your second table.

)2.

Clic. to the right of the table to deselect it. our page should now loo. li.e &igure G.

Fig !e .. /ow the table loo.s after deselecting it

Note: ou may see the #able selector 3indicated by green lines4 after you insert a table. ou can always ma.e the #able selector disappear by clic.ing outside the table. ou can also disable the #able selector by de=selecting Fiew + Fisual Aids + #able ?idths.

Creating your first website Part 2: Creating the page layout

SET TA$%E PR/PERT#ES

,ow you!ll set precise table properties, using 8xpanded #ables mode, a feature that temporarily adds cell padding and spacing to tables and increases the borders of the tables to simplify editing. 'pecifically, it lets you position the

insertion point precisely without accidentally selecting the wrong table or other table content. Note: After you finish setting table properties in 8xpanded #ables mode, always return to 'tandard mode. 8xpanded #ables mode is not a ? '%? H 3what you see is what you get4 environment, so some operations, such as resiDing, do not display the expected results.
). 'elect Fiew + #able 0ode + 8xpanded #able 0ode 3see &igure )B4.

Fig !e '). 'witching to 8xpanded #ables mode

Note: %f you see the Hetting 'tarted with 8xpanded #ables 0ode dialog box, clic. @A. 2. Clic. once inside the first row of the first table 3see &igure ))4.

Fig !e ''. Clic.ing inside the first row of the first table

5.

%n the Property inspector 3?indow + Properties4, enter .) in the Cell /eight 3/4 text box and press 8nter 3?indows4 or >eturn 30acintosh4.

Fig !e '". 'etting the height of the table cell

Note: %f you cannot see the Cell /eight text box, clic. the expander arrow in the lower=right corner of the Property inspector. 6. Clic. once inside the second row of the first table 3see &igure )54.

Fig !e '&. Clic.ing inside the second row of the first table

7. 9.

%n the Property inspector, enter ',, in the Cell /eight text box and press 8nter 3?indows4 or >eturn 30acintosh4. Clic. once inside the third row of the first table.

:.

%n the Property inspector, enter "* in the Cell /eight text box and press 8nter 3?indows4 or >eturn 30acintosh4.

ou should now have three rows of differing heights in the first table 3see &igure )64.

Fig !e '*. #hree rows of differing heights

,ext you!ll set properties for the second table 3the table that contains three columns4.
). Clic. once inside the first column of the second table 3see &igure )74.

Fig !e '+. Clic.ing once inside the first column of the second table

2. 5.

%n the Property inspector, enter '*) in the Cell ?idth 3?4 text box and press 8nter 3?indows4 or >eturn 30acintosh4. Clic. once inside the second column of the second table.

6.

%n the Property inspector, enter "&) in the Cell ?idth text box and press 8nter 3?indows4 or >eturn 30acintosh4.

Fig !e ',. 'etting the cell width in the Property inspector

7.

'et the width of the third column to &&) pixels. %f you have the #able selector enabled 3Fiew + Fisual Aids + #able ?idths4, you!ll see all three of the pixel values you (ust entered above the respective table columns.

ou won!t enter any height values for the cells in this table because the height of those cells will vary depending on the content you add later. 9. :. &inally, clic. once inside the last table 3the table with one row and one column4. %n the Property inspector, enter "* in the Cell /eight text box and press 8nter 3?indows4 or >eturn 30acintosh4. our layout should now loo. li.e &igure ):.

Fig !e '(. #he table layout after setting the table properties

<. G.

Clic. the 8xit 8xpanded #ables mode lin. at the top of the *ocument window to return to 'tandard mode. 'ave your page.

Creating your first website Part 2: Creating the page layout

#NSERT AN #0AGE P%ACE1/%DER

An image placeholder is a graphic that you use until final artwor. is ready to be added to a web page. An image placeholder is useful when you lay out web pages

because it allows you to position an image on a page before you actually create the image.
). 2. %n the *ocument window, clic. once inside the first row of the first table. 'elect %nsert + %mage @b(ects + %mage Placeholder.

5.

%n the %mage Placeholder dialog box, do the following:

#ype 2anne!3g!a4hi5 in the ,ame text box. 8nter ()) in the ?idth text box. 8nter .) in the /eight text box. Clic. the color box and select a color from the color pic.er. ou can also type a hexadecimal color value into the Color text box to select a color. &or this tutorial, select a reddish brown 3IGG55BB4.

1eave the Alternate #ext text box blan..

Note: Alternative text is a textual description of an image on a web page. %t is part of the /#01 code and does not appear on the page. %t!s important to provide alternative text for most of your images so that people who use screen readers or text=only browsers can receive the information provided by the image. %n the case of a banner graphic, which merely displays a logo for a website, it is not essential to provide alternative text. ?hen you leave the Alternate #ext text box blan. in the %mage Placeholder dialog box, *reamweaver adds an alt="" attribute to the img tag. 1ater, if you want to add alternative text to an image, you can select the image and enter the alternative text in the Property inspector. &or example, if you later change the logo to include a phone number or address, you would want to provide that information as alternative text. 6. Clic. @A. #he image placeholder appears inside the first table 3see &igure )<4. #he image placeholder displays a label and the siDe attributes of the image that you!ll eventually place there.

Fig !e '-. #he %mage placeholder

Note: ?hen viewed in a browser the label and siDe text for an image placeholder do not appear.
7. 'ave your page.

Note: An image placeholder is a graphic you use until final artwor. is ready to be added to a web pageC it is not a graphic image that displays in a browser. -efore you publish your site, replace any image placeholders you!ve added with web= friendly graphic files such as H%&s or JP8Hs.

Creating your first website Part 2: Creating the page layout

ADD C/%/R T/ T1E PAGE

,ext, you!ll add more color to the page by setting colors for some of the table cells and for the bac.ground of the page.
).
2.

Clic. once inside the first cell of the three=columned table.

Clic. the <td> tag 3cell tag4 in the tag selector to select the cell.

Fig !e '.. Ksing the tag selector to select the table cell

5.

%n the Property inspector 3?indow + Properties4, clic. once inside the -ac.ground Color text box. #he text box is located directly next to the -ac.ground Color 3-g4 color box. Note: %f you cannot see the -ac.ground Color text box, clic. the expander arrow in the lower=right corner of the Property inspector.

6.

%n the -ac.ground Color text box, enter the hexadecimal value 6..&&)) and press 8nter 3?indows4 or >eturn 30acintosh4.

Fig !e "). 'etting the color of the table cell

#he color of the table cell turns to reddish=brown.

7.
6.

Clic. once inside the second cell of the three=columned table. Clic. the <td> tag 3cell tag4 in the tag selector to select the cell.

:.

%n the Property inspector, clic. once inside the -ac.ground Color text box, enter the hexadecimal value 6F(EEDF, and press 8nter 3?indows4 or >eturn 30acintosh4. #he color of the table cell turns to light tan.

<.

>epeat steps 7 through : to change the color of the third table cell to light tan as well.

G. it.

After you have all three cell colors set, clic. once outside the table to deselect ,ext you!ll change the bac.ground color for the entire page by modifying page properties. #he Page Properties dialog box lets you set a number of page properties, including the siDe and color of page fonts, the colors of visited lin.s, page margins, and much more.

)B. )).

'elect 0odify + Page Properties. %n the Appearance category of the Page Properties dialog box, clic. the -ac.ground Color color box and select blac. 3IBBBBBB4 from the color pic.er.

Fig !e "'. 'etting the page bac.ground color

A note on 4i57ing 5olo!s: %n /#01, colors are expressed either as hexadecimal values 3for example, I&&BBBB4 or as color names 3red4. A web=safe color is one that appears the same in ,etscape ,avigator and 0icrosoft %nternet 8xplorer on both ?indows and 0acintosh systems when using 279=color mode. #here are 2)9 common colors, and any hexadecimal value that combines the pairs BB, 55, 99, GG, CC, or && 3>H- values B, 7), )B2, )75, 2B6, and 277, respectively4 represents a web=safe color. ou can select colors in *reamweaver by entering hexadecimal values in the appropriate text boxes, or by selecting a color from the color pic.er. #he color pic.er uses the 2)9=color web=safe paletteC selecting a color from this palette displays the color!s hexadecimal value. #o use the color pic.er, clic. on the color box and use the eyedropper to select a color. ou can also use the color pic.er to match colors. &or example, if an image on your page contains a certain shade of blue and you want the bac.ground color of a table cell to match it, you can select the table cell, clic. on the color box to open the color pic.er, move the eyedropper over the blue in the image, and clic. the

mouse button. #he color pic.er fills the selected area with the closest match possible to the color you clic.ed with the eyedropper. %f you select colors by this method, however, the color that the color pic.er chooses for you may not be a web=safe color. )2. Clic. @A. our page bac.ground turns to blac. 3see &igure 224.

Fig !e "". #he page bac.ground turned to blac.

)5.

'ave your wor..

our page layout is now complete. #he layout contains a number of tables that can hold assets such as images, text, and &lash Fideo 3&1F4 files. %n the next installment of this tutorial series, Part 5: Adding content to pages, you!ll learn how to add assets to the page using the various insertion features that *reamweaver provides.

Creating your first website Part 5: Adding content to pages

#NSERT #0AGES

After you create your page layout, you are ready to add assets to the page. 'tart by adding images. ou can use several methods to add images to a web page in *reamweaver. %n this section, you!ll add four different images to the index page for Caf$ #ownsend using various methods. Replace the image placeholder ). %n *reamweaver, open the index.html file that you created in Part 2: Creating the page layout.
Note: %f you did not complete Part 2, see the previous section, 1ocate your files and review your tas., for how to proceed. 2. *ouble=clic. the image placeholder, banner"graphic, at the top of the page 3see &igure 24.

Fig !e ". *ouble=clic. the banner image placeholder.

).

%n the 'elect %mage 'ource dialog box, navigate to the images folder inside the cafe"townsend folder that you defined as your site root folder.

2.

'elect the banner"graphic.(pg file 3see &igure 54 and clic. @A.

Fig !e &. 'elect the banner"graphic.(pg file.

*reamweaver replaces the image placeholder with the banner graphic for Caf$ #ownsend 3see &igure 64.

Fig !e *. -anner graphic for Caf$ #ownsend

5. 6.

Clic. once outside the table to deselect the image. 'ave the page 3&ile + 'ave4.

Insert an image by using the Insert menu ). Clic. once inside the third row of the first tableLtwo rows below the banner graphic you inserted, (ust above the colored table cells 3see &igure 74.

Fig !e +. Clic. inside the third row of the first table.

2. 5.

'elect %nsert + %mage. %n the 'elect %mage 'ource dialog box, navigate to the images folder inside the cafe"townsend folder, select the body"main"header.gif file, and clic. @A. Note: %f the %mage #ag Accessibility Attributes dialog box appears, clic. @A.

A long, colored graphic appears in the table row 3see &igure 94. #his might loo. more li.e bac.ground color for the table cell than a graphic but if you loo. closely, you!ll see that the graphic has rounded corners. #he rounded=corner effect gives the lower portion of your page an interesting appearance after you!ve finished adding all of the assets.

Fig !e ,. 1ong, colored graphic in the table row

Insert an image by dragging

). Clic. once inside the last row of the last table on the page 3(ust below the colored table cells4.

2.

%n the &iles panel 3?indow + &iles4, locate the body"main"footer.gif file 3it!s inside the images folder4 and drag it to the insertion point in the last table 3see &igure :4. %f you canMt see the full names of the files because of the width of the &iles panel, you can hover the mouse pointer over files to display their names. Note: %f the %mage #ag Accessibility Attributes dialog box appears, clic. @A.

Fig !e (. *rag the body"main"footer.gif to the insertion point in the last table.

5.

Clic. once outside the table to deselect the image.

6.

'ave the page by selecting &ile + 'ave.

Insert an image from the Assets panel

). 2. Clic. once inside the center column of the three=columned table 3the first table cell that is colored light tan4. %n the Property inspector 3?indow + Properties4, select Center from the /orD pop= up menu and select #op from the Fert pop=up menu 3see &igure <4. #his aligns the contents of the table cell in the middle of the cell and pushes the cell!s contents to the top of the cell.

Fig !e -. 'elect Center from the /orD pop=up menu and #op from the Fert pop=up menu.

Note: %f you cannot see the Fert or /orD pop=up menus, clic. the expander arrow in the lower right corner of the Property inspector. 5. Press 8nter 3?indows4 or >eturn 30acintosh4 once to create more space 3see &igure G4.

Fig !e .. Create more space

6.

Clic. the Assets tab in the &iles panel, or select ?indow + Assets to ma.e your site assets appear.

7.

Clic. the %mages button to view your image assets 3see &igure )B4.

Fig !e '). our image assets in the Assets tab

Note: At this point you!ll notice that your Assets panel contains many more assets than what is pictured in &igure )B. #hat!s because the Assets panel is displaying all of the assets for your site, including the assets in the completed"files folder, which contains duplicates of all the site assets you!re using right now. 3'orry, but there was no way to avoid this if % wanted to give you all of the completed versions of the files along with the starter files.4

%t is not necessary to do so, but if you want to get your Assets panel to match the screen shot, navigate to where you created the cafe"townsend site root folder on your hard drive, and drag the completed"files folder to another location on your computer. 3 ou must drag it out of the site root folder so that it is no longer part of the site.4 #hen return to the Assets panel and clic. the >efresh button 3the purple circular arrow at the bottom of the panel4. ?hen you refresh the panel, any assets that you removed from the site disappear from the list.
9. %n the Assets panel, select the street"sign.(pg file.

:.

*o one of the following to insert the street"sign.(pg file on the page 3see &igure ))4:
*rag street"sign.(pg to the insertion point in the center table cell. Clic. %nsert at the bottom of the Assets panel.

Note: %f the %mage #ag Accessibility Attributes dialog box appears, clic. @A.

Fig !e ''. %nsert the street"sign.(pg image.

<. G.

Clic. once outside the table to deselect the image. 'ave the page.

About the Assets panel ou can use the Assets panel to view and manage assets in your current site. #he Assets panel displays assets for the site associated with the active document in the *ocument window. ou must define a local site before you can view assets in the Assets panel. &or more information, see Part ): 'etting up your site and pro(ect files. #he Assets panel provides two views:

#he Site list shows all of the assets in your site, including colors and K>1s that are used in any document in your site. #he Fa8o!ites list shows only the assets you!ve explicitly chosen. #o add an asset to the &avorites list, select the asset in the 'ite list and then select Add to &avorites from the @ptions menu in the upper right corner of the &iles panel.

?hen you clic. an asset in the Assets panel, the preview area displays the asset you selected. #o change the siDe of the preview area, drag the line that separates the preview area from the asset column headings. &or more information, see ?or.ing with assets in *reamweaver /elp.

Creating your first website Part 5: Adding content to pages

#NSERT AND P%A9 A F%AS1 F#%E

,ext you!ll insert a &lash file that plays a photographic slide show of Caf$ #ownsend!s featured food items. #he &lash file you!ll insert is a flexible messaging area file, also called an &0A. #his is a common type of &lash application that displays an informational message to the audience. #he message can change based on the needs of the business. &or example, if Caf$ #ownsend is holding a special event, the &0A could easily change 3without affecting the rest of the web page4 to display information about the event, instead of the regularly featured food items. #o insert the &lash &0A file, you need to insert /#01 code that embeds the file in the *reamweaver page. #he easiest way to do this is to insert the '?& file 3the exported &lash content4 into the page. ?hen you insert a '?& file in *reamweaver, it writes all the necessary &lash /#01 code for you.
). ?ith the index.html page open in the *ocument window in *reamweaver, clic. once inside the second row of the first table. #his is the table row immediately below the banner graphic you inserted in the previous section. 2. %n the Property inspector 3?indow + Properties4, select Center from the /orD pop=up menu and select 0iddle from the Fert pop=up menu 3see &igure )24. #his places the contents of the table cell in the middle of the cell.

Fig !e '". Place the contents of the table cell in the middle of the cell.

Note: %f you cannot see the Fert or /orD pop=up menus, clic. the expander arrow in the lower right corner of the Property inspector.
5. 'elect %nsert + 0edia + &lash.

6.

%n the 'elect &ile dialog box, browse to the flash"fma.swf file 3it!s in the cafe"townsend root folder of your site4, select the file, and clic. @A 3see &igure )54. %f the @b(ect #ag Accessibility Attributes dialog box appears, clic. @A.

Fig !e '&. %nsert the &lash media file.

A &lash content placeholder, rather than a scene from the &0A itself, appears in the *ocument window. #his is because the /#01 code is pointing to the '?& file, flash"fma.swf. ?hen a user loads the index.html page, the browser plays the '?& file. A note a2o t Flash files: ?hen you build assets in Adobe &lash, you wor. in &1A files, the default file type for the &lash application. &1A files are designated by a .fla extension. &or example, if you are wor.ing on an animated logo for a website, the file name of the &lash file might be animated"logo.fla.

?hen you!ve finished wor.ing on a &1A file in &lash, you must export the file to a format that can be played on the web in &lash Player. ?hen you export &1A files in &lash, they are converted to '?& files and designated by a .swf extension. '?& files 3not &1A files4 play &lash content in a web browser and are the file type you must insert into a web page that you are building with *reamweaver. #he &lash content placeholder should remain selected after you insert the '?& file, as long as you don!t clic. anywhere else on the page. %f it!s not selected, select the &lash content placeholder by clic.ing it. 7. %n the Property inspector 3?indow + Properties4, clic. Play 3see &igure )64.

Fig !e '*. Clic. Play in the Property inspector.

Note: %f you cannot see the &lash Play button, clic. the expander arrow in the lower right corner of the Property inspector. *reamweaver plays the &lash file in the *ocument window, showing you what site visitors will see when they view the page in a browser 3see &igure )74.

Fig !e '+. *reamweaver playing the &lash file in the *ocument window

9. :.

%n the Property inspector, clic. 'top to stop playing the &lash file. 'ave the page.

?hen you save the page, *reamweaver displays the Copy *ependent &iles dialog box. #his dialog box informs you that *reamweaver has created a file called

AC">unActiveContent.(s, and that the file must be uploaded to a server when you publish your web page. #his file is necessary for &lash files to run correctly under certain browser conditions. Clic. @A to close the dialog box. %f you clic. the &iles tab in the &iles panel, youMll also notice that *reamweaver has added a 'cripts folder to your site root folder. #his 'cripts folder holds the AC">unActiveContent.(s file. 8ventually, when you publish your pages to a web server, it!s very important that you upload this file in addition to any other dependent files in your site. @therwise, your pages won!t display properly when site visitors view them in certain browsers.

Creating your first website Part 5: Adding content to pages

#NSERT A F%AS1 V#DE/ F#%E

,ext you!ll insert a &lash Fideo file using the asset provided:
). ?ith the index.html page open in the *ocument window, clic. once above the graphic that you placed in the center column of the three=columned table. %n the previous section, you added some space before you inserted the graphicL this is where you should clic. 3see &igure )94.

Fig !e ',. Clic. once above the graphic that you placed in the center column of the three= columned table.

2.

'elect %nsert + 0edia + &lash Fideo.

5.

%n the %nsert &lash Fideo dialog box, select Progressive *ownload Fideo from the Fideo type pop=up menu. A note a2o t Flash Video: #he %nsert &lash Fideo command in *reamweaver lets you insert &lash video content in your web pages without using the &lash authoring tool. #he command inserts a &lash component, which displays the &lash video content you selectLas well as a set of playbac. controlsLwhen viewed in a browser. #he %nsert &lash Fideo command gives you the following options for delivering video content to your website visitors:
P!og!essi8e Download Video downloads the &lash video 3&1F4 file to the site visitor!s hard dis. and then plays it. Knli.e traditional Ndownload and playN methods of video delivery, however, progressive download allows the video file to start playing before the download is complete.

St!eaming Video streams the &lash video content and plays it on a web page immediately. #o enable streaming video on your web pages, you must have access to Adobe &lash 0edia 'erver 3formerly &lash Communication 'erver4, the only server that can stream &lash video content.

&or more information about using &lash video, see Adding &lash video content in *reamweaver /elp. 6. %n the K>1 text box, specify a relative path to the cafe"townsend"home.flv file: Clic. -rowse, navigate to the cafe"townsend"home.flv file 3located in cafe"townsend root folder of your site4, and select the &1F file 3see &igure ):4.

Fig !e '(. 'pecify a relative path to the cafe"townsend"home.flv file.

7.

'elect /alo '.in 2 from the '.in pop=up menu. A preview of the selected s.in appears below the '.in pop=up menu. #he '.in option specifies the loo. and feel for the &lash video component that contains the &lash video content. 3&or more information on how to select different s.ins for &lash Fideo components, see the &lash Fideo #opic Center.4

9.

%n the ?idth and /eight text boxes 3see &igure )<4, do the following:
%n the ?idth text box, type '-). %n the /eight text box, type '&+ and and then clic. once inside the 0essage text box at the bottom of the dialog box. 3 ou wonMt be doing anything in the 0essage text box. ouMre (ust clic.ing there to remove the insertion point from the /eight text box.4

Fig !e '-. 'et the width and height of the video.

Ti4: ou can clic. *etect 'iDe to determine the exact width and height of the &1F file. 'ometimes, however, *reamweaver cannot determine the dimensions of the &1F file. %n such cases, you must manually enter the width and height values. #he value in the ?idth and /eight text boxes specifies the width and height in pixels of the &1F file. ou can ad(ust these values arbitrarily to change the siDe of the &lash video file on your web page. ?hen you increase the dimensions of a video, the picture Euality of the video usually decreases. Note: #he N#otal with s.inN value shows the width and height of the &1F file combined with the width and height of the selected s.in. :.

1eave the default selections for the remaining options:

Const!ain maintains the same aspect ratio between the width and height of the &lash video component 3selected by default4.

A to 4la: specifies whether to play the video when the web page is opened 3deselected by default4.

A to !ewind specifies whether the playbac. control returns to starting position after the video finishes playing 3deselected by default4.

P!om4t se!s to download FP if ne5essa!: specifies whether or not you want users to see a download prompt if they don!t have the necessary version of &lash Player reEuired to play the video 3selected by default4.

<.

Clic. @A to close the dialog box and add the &lash video content to your web page. #he %nsert &lash Fideo command generates a video player '?& file and a s.in '?& file that are used to display your &lash video content on a web page. 3 ou may need to clic. the >efresh button in the &iles panel to see the new files.4 #hese files are stored in the same folder as the /#01 file to which you!re adding &lash video content 3in this case, the cafe"townsend root folder4. ?hen you upload the /#01 page containing the &lash video content, *reamweaver uploads these files as dependent files 3as long as you clic. es in the Put *ependent &iles dialog box4.

G.

'ave the page.

Creating your first website Part 5: Adding content to pages

#NSERT TE;T

,ow you!ll add some text to the page. ou can type text directly in the *ocument window or you can copy and paste text from other sources 3such as 0icrosoft ?ord or plain text files4. 1ater, you!ll use cascading style sheets 3C''4 to format the text. Insert Body Text %n the &iles panel, locate the sample"text.txt file 3in the cafe"townsend root folder4 and double=clic. the file!s icon to open it in *reamweaver. ou!ll notice that this window is in Code view 3see &igure )G4 and cannot be switched to *esign view 3the view you!ve been wor.ing in until now4 because the file is not an /#01 file.

Fig !e '.. Code view of sample"text.txt

).

%n the sample"text.txt *ocument window, press ControlOA 3?indows4 or CommandOA 30acintosh4 to select all of the text, and then select 8dit + Copy to copy the text.

2.

Close the sample"text.txt file by clic.ing the P in the top=right corner of the document.

5.

%n the index.html *ocument window, clic. once inside the third table cell of the three=columned table 3the cell to the right of the column that contains the graphic and the &lash video4.

6.

'elect 8dit + Paste. #he text from the text file appears in the selected table cell 3see &igure 2B4.

Fig !e "). #ext appearing in the selected table cell

*epending on your monitor resolution, the three=columned table enlarges to accommodate the text. *on!t worry about how this loo.s right now. %n the next tutorial, you!ll learn how to use C'' to format the text so that everything fits in the table appropriately.
7. 9. 0a.e sure the insertion point is still inside the table cell where you (ust pasted the text. %f it isn!t, clic. inside the table cell. %n the Property inspector 3?indow + Properties4, select #op from the Fert pop=up menu 3see &igure 2)4. #his aligns the text you (ust pasted to the top of the table cell. %f you cannot see the Fert pop=up menu, clic. the expander arrow in the lower=right corner of the Property inspector.

Fig !e "'. 'elect #op from the Fert pop=up menu.

:.

'ave the page.

Insert Text for a Navigation Bar ,ext, you!ll insert text for a navigation bar. /owever, the text won!t loo. li.e a navigation bar until you format it in the next tutorial.
). Clic. once in the first column of the three=columned table 3the column that is colored reddish=brown4.

2.

#ype the word C isine 3see &igure 224.

Fig !e "". #ype the word C isine.

5.

Press the spacebar and type Chef #4s m.

4.

>epeat the previous step until you!ve entered the following words with a space between each one: A!ti5les< S4e5ial E8ents< %o5ation< 0en < Conta5t =s.

*o not press 8nter 3?indows4 or >eturn 30acintosh4 when you type. Kse only the spacebar to separate words and let the words wrap naturally 3see &igure 254. #he fixed width of the table cell determines how many words fit on a line.

Fig !e "&. Kse only the 'pacebar to separate words.

5.

?ith the insertion point still in the first cell of the three=columned table, clic. the td tag in the tag selector 3see &igure 264.

Fig !e "*. Clic. the td tag in the tag selector.

9.

%n the Property inspector 3?indow + Properties4, select #op from the Fert pop=up menu 3see &igure 274. #his aligns the text you (ust typed to the top of the table cell.

Fig !e "+. 'elect #op from the Fert pop=up menu.

Note: %f you cannot see the Fert pop=up menu, clic. the expander arrow in the lower=right corner of the Property inspector.
:. 'ave your page.

Creating your first website Part 5: Adding content to pages

CREATE %#N>S

A lin. is a reference, inserted in a web page, that points to another document. ou can turn almost any .ind of asset into a lin., but the most common .ind of lin. is a text lin.. ou can create lin.s at any stage of the site creation process. %n this section, you!ll create lin.s for the navigation bar, even though you haven!t formatted the text into the form of a navigation bar yet. #he cafe"townsend site root folder contains a finished /#01 page that you can lin. to 3a menu page for Caf$ #ownsend4. ou!ll use this page for all of the lin.s in the navigation, even though you would have distinct pages for each of these lin.s if you were building a real site.
). ?ith the index.html page open in the *ocument window, select the word Cuisine that you typed in the first cell of the three=columned table. -e careful to select the word Cuisineonly and not the space after it 3see &igure 294.

Fig !e ",. 'elect the word Cuisine.

2.

%n the Property inspector 3?indow + Properties4, clic. the folder icon next to the 1in. text box 3see &igure 2:4.

Fig !e "(. Clic. the folder icon.

5.

%n the 'elect &ile dialog box, browse to the menu.html file 3which is in the same folder as the index.html file4 and clic. @A 3?indows4 or Choose 30acintosh4.

Note: -e careful not to select the menu.css file by mista.e.

6. Clic. once on the page to deselect the word Cuisine. #he Cuisine text is underlined and blue, indicating that it!s now a lin..

7.

>epeat the previous steps to lin. each word or set of words that you typed for the navigation. ou want to create six more lin.s: one each for Chef Ipsum, Articles, Special Events, Location, Menu, and Contact Us. 1in. each word or set of words to the menu.html page, and be careful to avoid the space before and after the words or set of words when you create your lin.s. #his is only a set of dummy lin.sC in a real site, you would lin. each word in the navigation to its own distinct page. Note: 1in.s don!t wor. when you clic. them in the *ocument window in *reamweaverC lin.s wor. only in a browser. #o ma.e sure your lin.s wor.

correctly, preview your page in a browser. &or instructions about how to do this, continue to the next section.
9. 'ave your page.

Creating your first website Part 5: Adding content to pages

PREV#EW 9/=R PAGE #N A $R/WSER

#he *esign view gives you a rough idea of what your page will loo. li.e on the web, but you must preview the page in a browser to see the definitive end result. Although browsers produce the same results in general, each browser version can display /#01 pages somewhat differently. *reamweaver attempts to produce /#01 that loo.s as similar as possible from one browser to anotherC sometimes differences can!t be avoided, however. #hus, previewing your wor. in a browser is the only way for you to see what your site visitors will see after you publish your pages.
). 0a.e sure the index.html file is open in the *ocument window.

2.

Press the &)2 .ey 3?indows4 or @ptionO&)2 30acintosh4. our primary browser launches, if it!s not running already, and displays the index page 3see &igure 2<4.

Fig !e "-. Primary browser displaying the index page

Note: *reamweaver automatically detects your primary browser and uses it for previewing your pages. %f the preview doesn!t appear, or if it doesn!t appear in the browser you expect, switch bac. to *reamweaver 3if necessary4 and select &ile + Preview in -rowser + 8dit -rowser 1ist. ?hen the Preview in -rowser Preferences dialog box appears, add the correct browser to the list. &or more information, clic. the /elp button in the Preferences dialog box.
5. 6. 3@ptional4 'witch bac. to *reamweaver to ma.e any necessary changes. 'ave your wor. and press the &)2 .ey again to ensure your changes too. effect.

ou now have a web page full of content. #he next step is to format some of the content to ma.e it more appealing. %n Part 6: &ormatting your page with C'', you!ll learn how to use C'' to format the text that you added.

Creating your first website Part 6: &ormatting your page with C''
CREATE A NEW ST9%E S1EET

&irst, you!ll create an external style sheet that contains a C'' rule that defines a style for paragraph text. ?hen you create styles in an external style sheet, you can control the appearance of multiple web pages from a central location, instead of setting styles on each individual web page.
). 'elect &ile + ,ew.

2.

%n the ,ew *ocument dialog box, ma.e sure the -lan. Page category is selected, select C'' from the Page #ype column 3see &igure 24, and clic. Create.

Fig !e ". #he ,ew *ocument dialog box

A blan. style sheet appears in the *ocument window. #he *esign view and Code view buttons are disabled. C'' style sheets are text=only filesLtheir contents are not meant to be viewed in a browser. 5. 'ave the page 3&ile + 'ave4 as cafe"townsend.css.

?hen you save the style sheet, ma.e sure you save it in the cafe"townsend folder 3the root folder of your website4. 6. #ype the following code in the style sheet:

5. 6. !. %. '.

p{ font-family: Verdana, sans-serif; font-size: 11p ; "olor: #$$$$$$; line-&eig&t: 1%p ; padding: (p ;

As you type, *reamweaver uses code hints to suggest options for completing your entry. Press 8nter 3?indows4 or >eturn 30acintosh4 when you see the code you want to let *reamweaver finish the typing for you. *on!t forget to include a semicolon at the end of each line, after the property values. ?hen you!re finished, the code should loo. li.e &igure 5.

Fig !e &. #he finished code

Ti4: &or more information about any C'' property, chec. the @!>eilly reference guide included with *reamweaver. #o display the guide, select /elp + >eference and select @!>eilly C'' >eference from the pop=up menu in the >eference panel.
)B. 'ave the style sheet.

,ext you!ll attach the style sheet to the index.html page.

Creating your first website Part 6: &ormatting your page with C''
ATTAC1 A ST9%E S1EET

?hen you attach a style sheet to a web page, the rules defined in the style sheet are applied to the corresponding elements on the page. &or example, when you attach the cafe"townsend.css style sheet to the index.html page, all paragraph text 3text formatted with the <p> tag in the /#01 code4 is formatted according to the C'' rule you defined.
). %n the *ocument window, open the Cafe #ownsend index.html file. 3 ou can clic. its tab if it!s already open.4

2.

'elect the text of the first paragraph that you pasted into the page in Part 5: Adding content to pages 3see &igure 64.

Fig !e *. 'elect the text of the first paragraph that you pasted into the page in Adding Content to Pages.

5.

1oo. in the Property inspector and ma.e sure that the paragraph is formatted with the paragraph tag. %f the &ormat pop=up menu in the Property inspector says Paragraph, the paragraph is formatted with the paragraph 3<p>4 tag. %f the &ormat pop=up menu in the Property inspector says ,one, or something else, select Paragraph to format the paragraph 3see &igure 74.

Fig !e +. 'elect Paragraph to format the paragraph.

6.

>epeat step 5 for the second paragraph.

7.

%n the C'' 'tyles panel 3?indow + C'' 'tyles4, clic. the Attach 'tyle 'heet button in the lower=right corner of the panel 3see &igure 94.

Fig !e ,. Clic. the Attach 'tyle 'heet button in the C'' 'tyles panel.

9. :.

%n the Attach 8xternal 'tyle 'heet dialog box, clic. -rowse and browse to the cafe"townsend.css file that you created in the previous section. Clic. @A.

#he text in the *ocument window is formatted according to the C'' rule in the external style sheet.

Creating your first website Part 6: &ormatting your page with C''
E;P%/RE T1E CSS ST9%ES PANE%

#he C'' 'tyles panel lets you trac. the C'' rules and properties that affect a currently selected page element, or the rules and properties that affect an entire document. %t also lets you modify C'' properties without opening an external style sheet.
). 0a.e sure the index.html page is open in the *ocument window.

2.

%n the C'' 'tyles panel 3?indow + C'' 'tyles4, clic. All at the top of the panel and examine your C'' rules. %n All mode, the C'' 'tyles panel shows you all of the C'' rules that apply to the current document, whether those rules are in an external style sheet or in the document itself. ou should see two main categories in the All >ules pane: a 2style+ tag category and a cafe"townsend.css category.

5.

Clic. plus 3O4 to expand the 2style+ tag category if it isn!t already expanded.

6.

Clic. the body rule 3see &igure :4. #he bac.ground=color property with a value of IBBBBBB appears in the Properties pane below.

Fig !e (. #he bac.ground=color property in the Properties pane

Note: ou may need to collapse another panel, such as the &iles panel, to see the full length of the C'' 'tyles panel. ou can also alter the length of the C'' 'tyles panel by dragging the borders between the panes. ou set the bac.ground color for the page in Part 2: Creating the page layout by using the 0odify Page Properties dialog box. ?hen you set page properties in this manner, *reamweaver writes a C'' style that is internal to the document.
7. Clic. plus 3O4 to expand the cafe"townsend.css category.

9.

Clic. the p rule. All of the properties and values that you defined in the external style sheet for the p rule appear in the Properties pane below 3see &igure <4.

Fig !e -. All of the properties and values in the Properties pane

:. <.

%n the *ocument window, clic. once anywhere in either of the two paragraphs that you (ust formatted. %n the C'' 'tyles panel, clic. Current at the top of the panel and examine your C''. %n Current mode, the C'' panel shows you a summary of properties for the current selection. #he properties shown correspond to the properties for the p rule in the external style sheet.

%n the next section, you!ll use the C'' 'tyles panel to create a new rule. Ksing the C'' 'tyles panel to create a new rule is much easier than typing the rule, as you did when you initially created the external style sheet.

Creating your first website Part 6: &ormatting your page with C''
CREATE A NEW CSS R=%E

%n this section you!ll use the C'' 'tyles panel to create a custom C'' rule, or class style. Class styles let you set style attributes for any range or bloc. of text, and can be applied to any /#01 tag. &or more information on different types of C'' rules, see the 1earn about C'' section earlier in this tutorial.
). %n the C'' 'tyles panel, clic. ,ew C'' >ule in the lower=right corner of the panel 3see &igure G4.

Fig !e .. Clic.ing ,ew C'' >ule in the lower=right corner of the panel

2.

%n the ,ew C'' >ule dialog box, select Class from the 'elector #ype options. %t should be selected by default.

5.

8nter .2old in the ,ame text box 3see &igure )B4. 0a.e sure that you type the period 3.4 before the word bold. All class styles must start with a period.

Fig !e '). 'electing cafe"townsend.css from the *efine %n pop=up menu

6.

Ferify that cafe"townsend.css is selected from the *efine %n pop=up menu. 3%t should be selected by default.4

7.

Clic. @A. #he C'' >ule *efinition dialog box appears, indicating that you are creating a class style called .bold in the cafe"townsend.css file.

9.

%n the C'' >ule *efinition dialog box, do the following 3see &igure ))4:
%n the &ont text box, enter Ve!dana< sans?se!if. %n the 'iDe text box, enter '' and select pixels from the pop=up menu immediately to the right.

%n the 1ine /eight text box, enter '- and select pixels from the pop=up menu immediately to the right.

'elect bold from the ?eight pop=up menu. 8nter 6..)))) in the Color text box

Fig !e ''. 8nter values in the C'' >ule *efinition dialog box.

Ti4: &or more information on any C'' property, chec. the @!>eilly reference guide included with *reamweaver. #o display the guide, select /elp + >eference and select @!>eilly C'' >eference from the pop=up menu in the >eference panel.
:. <. G. Clic. @A. Clic. All at the top of the C'' 'tyles panel. Clic. the plus 3O4 button next to the cafe"townsend.css category, if the category isn!t already expanded.

ou!ll see that *reamweaver added the .bold class style to the list of rules defined in the external style sheet. %f you clic. the .bold rule in the All >ules pane, the rule!s properties appear in the Properties pane. #he new rule also appears in the 'tyle pop=up menu in the Property inspector.

Creating your first website Part 6: &ormatting your page with C''
APP%9 A C%ASS ST9%E T/ TE;T

,ow that you!ve created a class rule, you!ll apply it to some paragraph text.
). %n the *ocument window, select the first four words of text in the first paragraph: Cafe #ownsend!s visionary chef.

2.

%n the Property inspector 3?indow + Properties4, select bold from the 'tyles pop=up menu 3see &igure )24.

Fig !e '". 'elect bold from the 'tyles pop=up menu.

#he bold class style is applied to your text. 5. >epeat step 2 to apply the bold class style to the first four words of the second paragraph 3see &igure )54.

Fig !e '&. Apply the bold class style to the first four words of the second paragraph.

6.

'ave your page.

Creating your first website Part 6: &ormatting your page with C''

F/R0AT T1E NAV#GAT#/N $AR TE;T

,ext you!ll use C'' to apply styles to the lin. text for the navigation bar. 0any web pages use images of colored rectangles with text inside them to create a navigation bar, but with C'', all you need is lin.ed text and some formatting. -y using the display: *lo"+ property and setting a width to the bloc., you can effectively create the rectangles without the use of separate images. Create a New Rule for the Navigation
). @pen the cafe"townsend.css file if it isn!t already open, or clic. on its tab to see it.

2.

*efine a new rule by typing the following code in the file, after the .*old class style:

(.

.na,igation {

#his is an empty rule. #he code in the file should loo. something li.e &igure )6.

Fig !e '*. #his is what the code in the file should loo. li.e.

6.

'ave the cafe"townsend.css file.

,ext, you!ll use the C'' 'tyles panel to add properties to the rule.
). @pen the index.html file if it isn!t already open.

2.

%n the C'' 'tyles panel, ma.e sure the All mode is selected. 'elect the new .navigation rule and clic. 8dit 'tyle in the lower=right corner of the panel.

Fig !e '+. 'elect the new .navigation rule and clic. 8dit 'tyle in the lower=right corner of the panel.

5.

%n the C'' >ule *efinition dialog box, do the following 3see &igure )94:
8nter Ve!dana< sans?se!if in the &ont text box. 'elect )9 from the 'iDe pop=up menu, and select pixels from the pop=up menu immediately to the right of the 'iDe pop=up menu.

'elect ,ormal from the 'tyle pop=up menu.

'elect ,one from the *ecoration list. 'elect -old from the ?eight pop=up menu. 8nter 6FFFFFF in the Color text box

Fig !e ',. 8nter the values for the .navigation rule.

Ti4: &or more information about any C'' property, chec. the @!>eilly reference guide included with *reamweaver. #o display the guide, select /elp + >eference and select @!>eilly C'' >eference from the pop=up menu in the >eference panel.
6. Clic. @A.

,ow you!ll use the C'' 'tyles panel to add a few more properties to the .navigation rule.
). %n the C'' 'tyles panel, ma.e sure the .navigation rule is selected and clic. 'how 1ist Fiew 3see &igure ):4.

Fig !e '(. Clic. 'how 1ist Fiew.

1ist view reorganiDes the Properties pane to display an alphabetical list of all available properties 3in contrast to 'et Properties view, the previous view, which shows only those properties you!ve already set4. 2. 'croll down and clic. in the column to the right of the bac.ground=color property. #o see the full wording of a property, hold the mouse over the property. ou can also resiDe columns by dragging them from side to side.

5.

8nter 6..&&)) as the hexadecimal value 3see &igure )<4, and press 8nter 3?indows4 or >eturn 30acintosh4.

Fig !e '-. 8nter 6..&&)) as the hexadecimal value for the bac.ground=color.

Ti4: #o see how your wor. affects the external style sheet, .eep the cafe"townsend.css file open in the *ocument window while you wor.. ?hen you ma.e a selection in the C'' 'tyles panel, you!ll see that *reamweaver writes the C'' code in the style sheet at the same time. 6. 1ocate the display property 3you!ll need to scroll down more4, clic. once in the column to the right, and select bloc. from the pop=up menu 3see &igure )G4.

Fig !e '.. 'et the display to bloc..

5.

1ocate the padding property, clic. once in the column to the right, enter -4x as the value, and press 8nter 3?indows4 or >eturn 30acintosh4. 1ocate the width property, clic. once in the column to the right, enter '*) in the first text box, select pixels from the pop=up menu, and press 8nter 3?indows4 or >eturn 30acintosh4.

9.

:.

Clic. 'how @nly 'et Properties so that only your set properties appear in the Properties pane 3see &igure 2B4.

Fig !e "). Clic. 'how 'et Properties so that only your set properties appear in the Properties pane.

<. G.

Clic. the cafe"townsend.css file to display it. ou!ll see that *reamweaver has added all of the properties you specified to the file. 'ave the cafe"townsend.css file and close it.

ou!ve now created a rule to format the navigation bar text. ,ext you!ll apply the rule to the selected lin.s. Apply the Rule ). ?ith the index.html page open in the *ocument window, clic. the word Cuisine so that the insertion point is somewhere in the word.

Fig !e "'. Clic. the word Cuisine so that the insertion point is somewhere in the word.

2.

%n the tag selector, clic. the rightmost 2a+ tag 3see &igure 224. #his action selects all of the text for the specified 2a+ tag, or lin..

Fig !e "". 'elect all of the text for the specified 2a+ tag.

5.

%n the Property inspector 3?indow + Properties4, select navigation from the 'tyle pop=up menu.

6.

%n the *ocument window, the appearance of the Cuisine text changes entirely. #he text is now formatted as a navigation bar button, according to the properties of the .navigation rule that you defined in the previous section 3see &igure 254.

Fig !e "&. #he Cuisine text formatted as a navigation bar button

7.

>epeat steps ) through 5 for each of the individual lin.s in the navigation bar. ou must assign a navigation class style to each 2a+ tag or lin., so it!s important that you use the tag selector to select each lin. individually, and then assign the class styles one at a time.

Fig !e "*. >epeating the steps for each of the individual lin.s in the navigation bar

%f you!re having trouble formatting the lin. text, ma.e sure that a space 3not a return4 is between each lin.ed word or words. Also ma.e sure that the space between two lin.s is not itself lin.ed. %f it is, carefully select the lin.ed space, clear the 1in. text box in the Property inspector, and press 8nter 3?indows4 or >eturn 30acintosh4.

9.

?hen you!ve finished formatting all of the words for the navigation bar, save the page, and then preview your wor. in a browser 3&ile + Preview in -rowser4.

ou can clic. the lin.s to ma.e sure they wor.. Add a Rollover Effect ,ext you!ll add a rollover effect so that the bac.ground color of the navigation bar bloc.s change whenever the mouse pointer passes over one of the lin.s. #o add a rollover effect, add a new rule that contains the :&o,er pseudo=class. Note: A pseudo=class is a means of affecting certain elements in an /#01 document, based not on the /#01 code of the document itself, but on other external conditions applied by the web browser. Pseudo=classes can be dynamic, in the sense that an element on the page may acEuire or lose the pseudo=class while a user interacts with the document. #he :&o,er pseudo=class affects a change in a formatted page element when the user holds the mouse over the element. &or example, when the :hover pseudo= class is added to the.na,igation class style 3.na,igation:&o,er4 to create a new rule, all text elements that the .navigation rule formats change according to the .na,igation:&o,er rule!s properties.
). @pen the cafe"townsend.css file.

2.

'elect the entire .na,igation rule 3see &igure 274.

Fig !e "+. 'elect the entire .navigation rule in the cafe"townsend.css file.

5.

Copy the text 38dit + Copy4.

6.

Clic. once at the end of the rule and press 8nter 3?indows4 or >eturn 30acintosh4 a few times to create some space 3see &igure 294.

Fig !e ",. Create some space after the .navigation class.

7.

Paste 38dit + Paste4 the copied text in the space you (ust created.

6.

Add the :&o,er pseudo=class to the pasted .na,igation selector as shown in &igure 2:.

Fig !e "(. Add the :hover pseudo=class.

7.

%n the new .na,igation:&o,er rule, replace the current bac.ground=color 3IGG55BB4 with 6D)&D)&.

Fig !e "-. >eplace the bac.ground=color for the new .navigation:hover rule.

<. G.

'ave the file and close it. @pen the index.html file in the *ocument window and preview the page in a browser 3&ile + Preview in -rowser4.

?hen you hold the mouse over any of the lin.s, you can see the new rollover effect.

Creating your first website Part 6: &ormatting your page with C''
@/PT#/NA%A CENTER T1E C/NTENTS /F T1E PAGE

1astly, you!ll use the tag selector to select all of the /#01 in the document, and center the document!s contents. Note: 'ome browsers 3such as %nternet 8xplorer 94, center the page!s text within the context of the table cells when you use the method described in this section. %f you don!t li.e how this loo.s when you preview the page in the browser, you might want to s.ip this section, and leave the contents of your page left=aligned.
). ?ith the index.html page open in the *ocument window, clic. the 2body+ tag in the tag selector 3see &igure 2G4.

Fig !e ".. Clic. the 2body+ tag in the tag selector.

Clic.ing the 2body+ tag selects everything between the open and close 2body+ tags in the *ocument window. #o see the selection, clic. Code view at the top of the *ocument window. 2. %n the Property inspector 3?indow + Properties4, clic. the Align Center button 3see &igure 5B4.

Fig !e &). Center the body of the document.

*reamweaver inserts C'' <di,> tags that center the body content of the page. %n *esign view, a dotted line borders the area that the <di,> tags center.
5. 'ave the page.

#hat!s it. our page is finished. #he last tas. of building your website is to publish the page. &or this tas., you must define a folder on a remote site and upload your files to that folder. &or instructions, continue with the next installment in this tutorial series, Part 7: Publishing your site.