Download - 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 -
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
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.
'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.
-
8/21/2019 Creating Your First Website(1)
6/66
'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.
)). Clic @. A third table, with one row and one column, appears below your
second table 3see &igure
-
8/21/2019 Creating Your First Website(1)
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/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
9/66
. %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 '+.Clicing once inside the first column of the second table
-
8/21/2019 Creating Your First Website(1)
10/66
2. %n the Property inspector, enter '*)in the Cell ?idth 3?4 text box and press 8nter
3?indows4 or >eturn 30acintosh4.
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.
-
8/21/2019 Creating Your First Website(1)
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
3?indows4 or >eturn 30acintosh4.
our layout should now loo lie &igure ).
Fig!e '(.#he table layout after setting the table properties
-
8/21/2019 Creating Your First Website(1)
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 )
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
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
http://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt3.html -
8/21/2019 Creating Your First Website(1)
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 -
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
Note:%f the %mage #ag Accessibility Attributes dialog box appears, clic @.
Fig!e (.*rag the body"main"footer.gif to the insertion point in the last table.
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
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.
Note:%f the %mage #ag Accessibility Attributes dialog box appears, clic @.
-
8/21/2019 Creating Your First Website(1)
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 -
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
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.
Creating your first website Part 5: Adding contentto 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.
-
8/21/2019 Creating Your First Website(1)
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 -
8/21/2019 Creating Your First Website(1)
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 )
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
33/66
G. 'ave the page.
Creating your first website Part 5: Adding contentto 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 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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
Creating your first website Part 5: Adding contentto 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 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.
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
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.
Creating your first website Part 5: Adding contentto pages
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
-
8/21/2019 Creating Your First Website(1)
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.
http://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt4.htmlhttp://www.adobe.com/devnet-archive/archive/dreamweaver/cs3/first_website_pt4.html -
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
Creating your first website Part 6: &ormatting yourpage 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
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
-
8/21/2019 Creating Your First Website(1)
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 -
8/21/2019 Creating Your First Website(1)
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.
Creating your first website Part 6: &ormatting yourpage with C''
E;P%/RE T1E CSS ST9%ES PANE%
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
48/66
. %n the *ocument window, clic once anywhere in either of the two paragraphs that
you (ust formatted.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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
-
8/21/2019 Creating Your First Website(1)
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
and select @!>eilly C'' >eference from the pop=up menu in the >eference panel.
. Clic @.
-
8/21/2019 Creating Your First Website(1)
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.
Creating your first website Part 6: &ormatting yourpage with C''
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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
and select @!>eilly C'' >eference from the pop=up menu in the >eference panel.
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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)&.
-
8/21/2019 Creating Your First Website(1)
64/66
Fig!e "-.>eplace the bacground=color for the new .navigation:hover rule.
-
8/21/2019 Creating Your First Website(1)
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.
-
8/21/2019 Creating Your First Website(1)
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