creating your first website(1)

8/21/2019 Creating Your First Website(1)

1/66

Creating your first website Part 2: Creating thepage 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 none+ from the 1ayout list 3these two options

should already be selected by default4, and clic Create.

Note:%n the Page #ype list below the none+ 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. 'elect &ile + 'ave As.

6. %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.htmlin 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.
http://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt1.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt1.html


2/66

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.


3/66

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 #hicness text box.

8nter )in the Cell Padding text box.

8nter )in the Cell 'pacing text box.


4/66

Fig!e *.8ntering the initial table properties

6. Clic @.

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 rows 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


5/66

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 tablesin the

*reamweaver /elp.7. Clic once to the right of the table to deselect it.

9. '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.






6/66





)). Clic @. A third table, with one row and one column, appears below your

second table 3see &igure


7/66

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 @.

2. Clic once inside the first row of the first table 3see &igure ))4.


8/66

Fig!e ''.Clicing 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 '&.Clicing inside the second row of the first table

7. %n the Property inspector, enter ',,in the Cell /eight text box and press 8nter

3?indows4 or >eturn 30acintosh4.

9. Clic once inside the third row of the first table.


9/66

. %n the Property inspector, enter "*in the Cell /eight text box and press 8nter


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 '+.Clicing once inside the first column of the second table


10/66

2. %n the Property inspector, enter '*)in the Cell ?idth 3?4 text box and press 8nter


5. Clic once inside the second column of the second table.

6. %n the Property inspector, enter "&)in the Cell ?idth text box and press8nter 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.


11/66

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


our layout should now loo lie &igure ).

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


12/66

because it allows you to position an image on a page before you actually create

the image.

). %n the *ocument window, clic once inside the first row of the first table.

2. 'elect %nsert + %mage @b(ects + %mage Placeholder.

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

#ype2anne!3g!a4hi5in 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 picer. 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 caseof 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 imgtag. 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 @.

#he image placeholder appears inside the first table 3see &igure )


13/66

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 page 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 thepage 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 bacground of the page.

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

2. Clic the tag 3cell tag4 in the tag selector to select the cell.


14/66

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

5. %n the Property inspector 3?indow + Properties4, clic once inside the

-acground Color text box. #he text box is located directly next to the

-acground Color 3-g4 color box.

Note:%f you cannot see the -acground Color text box, clic the expander arrow

in the lower=right corner of the Property inspector.

6. %n the -acground Color text box, enter the hexadecimal value 6&&))and press

8nter 3?indows4 or >eturn 30acintosh4.


15/66

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

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

7. Clic once inside the second cell of the three=columned table.

6. Clic the tag 3cell tag4 in the tag selector to select the cell.

. %n the Property inspector, clic once inside the -acground 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. After you have all three cell colors set, clic once outside the table to deselect

it.

ext you!ll change the bacground 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 lins,

page margins, and much more.

)B. 'elect 0odify + Page Properties.

)). %n the Appearance category of the Page Properties dialog box, clic the

-acground Color color box and select blac 3IBBBBBB4 from the color picer.


16/66

Fig!e "'.'etting the page bacground 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 picer. #he color

picer uses the 2)9=color web=safe palette selecting a color from this palette

displays the color!s hexadecimal value. #o use the color picer, clic on the color

box and use the eyedropper to select a color.

ou can also use the color picer to match colors. &or example, if an image on

your page contains a certain shade of blue and you want the bacground color of

a table cell to match it, you can select the table cell, clic on the color box to open

the color picer, move the eyedropper over the blue in the image, and clic the


17/66

mouse button. #he color picer fills the selected area with the closest match

possible to the color you cliced with the eyedropper. %f you select colors by this

method, however, the color that the color picer chooses for you may not be a

web=safe color.

)2. Clic @. our page bacground turns to blac 3see &igure 224.

Fig!e "".#he page bacground 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 contentto pages


18/66

#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 @.
http://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt2.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt2.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3_02.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3_02.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt2.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt2.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3_02.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3_02.html


19/66

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. Clic once outside the table to deselect the image.

6. '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 bannergraphic you inserted, (ust above the colored table cells 3see &igure 74.


20/66

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

2. 'elect %nsert + %mage.

5. %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 @.

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

A long, colored graphic appears in the table row 3see &igure 94. #his might loo

more lie bacground 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!vefinished adding all of the assets.


21/66

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.


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


22/66

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

). Clic once inside the center column of the three=columned table 3the first table cellthat is colored light tan4.

2. %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


23/66

6. Clic the Assets tab in the &iles panel, or select ?indow + Assets to mae 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


24/66

%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. 3ou must drag it outof 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.



25/66

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

1s that are

used in any document in your site.

#heFa8o!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?oring with assetsin *reamweaver /elp.

Creating your first website Part 5: Adding content

to pages

#NSERT AND P%A9 A F%AS1 F#%E
http://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt1.htmlhttp://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda9110b1f693f21-7e67.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt1.htmlhttp://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda9110b1f693f21-7e67.html


26/66

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.


27/66

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 @ 3see &igure

)54. %f the @b(ect #ag Accessibility Attributes dialog box appears, clic @.

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 a2ot 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 woring on an animated logo for a

website, the file name of the &lash file might be animated"logo.fla.


28/66

?hen you!ve finished woring 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 clicing 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


29/66

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 @ 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.


#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.


30/66

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 fromthe Fideo type pop=up menu.

A note a2ot 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 Videodownloads the &lash video 3&1F4 file to the

site visitor!s hard dis and then plays it. Knlie 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 Videostreams 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 serverthat can stream &lash video content.

&or more information about using &lash video, seeAdding &lash video contentin

*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.
http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda9110b1f693f21-7c9f.htmlhttp://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda9110b1f693f21-7c9f.html


31/66

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 sin 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 sins for&lash Fideo components, see the&lash Fideo #opic Center.4

9. %n the ?idth and /eight text boxes 3see &igure )


32/66

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 inpixels 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 sinN value shows the width and height of the &1F file

combined with the width and height of the selected sin.

. 1eave the default selections for the remaining options:

Const!ainmaintains the same aspect ratio between the width and height ofthe &lash video component 3selected by default4.

Ato 4laspecifies whether to play the video when the web page is opened

3deselected by default4.

Ato !ewindspecifies 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.

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.


33/66

G. 'ave the page.


#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 woring 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.


34/66

2. Close the sample"text.txt file by clicing the 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 andthe &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 loos 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. 0ae 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.9. %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.


35/66

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 lie 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 Cisine3see &igure 224.

Fig!e "".#ype the word Cisine.

5. Press the spacebar and type Chef #4sm.

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.


36/66

*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 tdtag 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.


37/66

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.


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 oflin is a text lin.

ou can create lins at any stage of the site creation process. %n this section, you!ll

create lins 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 lins in

the navigation, even though you would have distinct pages for each of these lins

if you were building a real site.

). ?ith the index.html page open in the *ocument window, select the

word Cuisinethat 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.


38/66

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 24.

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 @ 3?indows4 or Choose 30acintosh4.

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

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 lins: 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 lins. #hisis only a set of dummy lins in a real site, you would lin each word in the

navigation to its own distinct page.

Note:1ins don!t wor when you clic them in the *ocument window in

*reamweaver lins wor only in a browser. #o mae sure your lins wor


39/66

correctly, preview your page in a browser. &or instructions about how to do this,

continue to the next section.

9. 'ave your page.


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

#he *esign view gives you a rough idea of what your page will loo lie on theweb, 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 loos as similar as possible from one browser to another 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.

). 0ae 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


40/66

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 thebrowser 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. 3@ptional4 'witch bac to *reamweaver to mae any necessary changes.

6. '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 thecontent to mae 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.


41/66

Creating your first website Part 6: &ormatting yourpage 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, mae sure the -lan Page category isselected, 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.


42/66

?hen you save the style sheet, mae 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. p{

6. 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 lie &igure 5.


43/66

Fig!e &.#he finished code

Ti4:&or more information about any C'' property, chec the @!>eilly referenceguide 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.


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

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. 3ou can clic its

tab if it!s already open.4


44/66

2. 'elect the text of the first paragraph that you pasted into the page in Part 5:

Adding content to pages3see &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 mae 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

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.
http://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3.html


45/66

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 @.

#he text in the *ocument window is formatted according to the C'' rule in the

external style sheet.


E;P%/RE T1E CSS ST9%ES PANE%


46/66

#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.

). 0ae 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

style+ tag category and a cafe"townsend.css category.

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

6. Clic the body rule 3see &igure 4.

#he bacground=color property with a value of IBBBBBB appears in the

Properties pane below.


47/66

Fig!e (.#he bacground=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 bacground color for the page in Part 2: Creating the page layoutby

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


48/66

. %n the *ocument window, clic once anywhere in either of the two paragraphs that

you (ust formatted.


49/66

Fig!e .Clicing 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 .2oldin the ame text box 3see &igure )B4.0ae sure that you type the period 3.4 before the word bold. All class styles must

start with a period.


50/66

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 @.

#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, enterVe!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


51/66

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


. Clic @.


52/66

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.



53/66

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 lined 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 .*oldclass

style:

(. .naigation {

)

#his is an empty rule.

#he code in the file should loo something lie &igure )6.


54/66

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

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, mae sure the All mode is selected. 'elect the new

.navigation rule and clic 8dit 'tyle in the lower=right corner of the panel.


55/66

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:

8nterVe!dana< sans?se!ifin 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.


56/66

'elect one from the *ecoration list.

'elect -old from the ?eight pop=up menu.

8nter 6FFFFFFin 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


6. Clic @.

ow you!ll use the C'' 'tyles panel to add a few more properties to the.navigation rule.

). %n the C'' 'tyles panel, mae sure the .navigation rule is selected and clic 'how 1ist

Fiew 3see &igure )4.


57/66

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 bacground=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.


58/66

5. 8nter 6&&))as the hexadecimal value 3see &igure )eturn 30acintosh4.

Fig!e '-.8nter 6&&))as the hexadecimal value for the bacground=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

mae 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 -4xas the

value, and press 8nter 3?indows4 or >eturn 30acintosh4.

9. 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.


59/66

. 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.


60/66

ou!ve now created a rule to format the navigation bar text. ext you!ll apply the

rule to the selected lins.

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 a+ tag 3see &igure 224.

#his action selects all of the text for the specified a+ tag, or lin.

Fig!e "".'elect all of the text for the specified a+ 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.


61/66

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

7. >epeat steps ) through 5 for each of the individual lins in the navigation bar.

ou must assign a navigation class style to each a+ 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 lins in the navigation bar

%f you!re having trouble formatting the lin text, mae sure that a space 3not a

return4 is between each lined word or words. Also mae sure that the space

between two lins is not itself lined. %f it is, carefully select the lined space,

clear the 1in text box in the Property inspector, and press 8nter 3?indows4 or

>eturn 30acintosh4.


62/66

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 lins to mae sure they wor.

Add a Rollover Effect

ext you!ll add a rollover effect so that the bacground color of the navigation bar

blocs change whenever the mouse pointer passes over one of the lins. #o add a

rollover effect, add a new rule that contains the :&oerpseudo=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 :&oerpseudo=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.naigationclass style 3.naigation:&oer4 to create a new

rule, all text elements that the .navigation rule formats change according to

the .naigation:&oerrule!s properties.

). @pen the cafe"townsend.css file.

2. 'elect the entire .naigationrule 3see &igure 274.

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

5. Copy the text 38dit + Copy4.


63/66

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 :&oerpseudo=class to the pasted .naigationselector as shown in

&igure 2.

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

7. %n the new .naigation:&oerrule, replace the current bacground=color3IGG55BB4 with 6D)&D)&.


64/66

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


65/66

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

Clicing the body+ tag selects everything between the open and close body+

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.


66/66

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

*reamweaver inserts C'' tags that center the body content of the page. %n

*esign view, a dotted line borders the area that the 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.
http://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt5.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt5.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt5.html

creating your first website(1)

Documents