XHTML Manual

8/6/2019 XHTML Manual

1/28

HTML/XHTML, CSS, and

Dreamweaver Manual

A beginners guide to HTML/XHTML, CSS, and usingDreamweaver to create an XHTML page.


2/28

Table of Contents

Introduction ii

1. HTML/XHTML 11.1 HTML/XHTML tags 2

1.2 XHTML rules 8

1.3Deninglepaths 8

2. CSS 92.1 Class selectors 9

2.2 ID selectors 10

2.3 Specifying styles in XHTML 10

3. Dreamweaver 11 3.1Theinterface 11

3.2 Creating a new XHTML page 13

3.3 Basic XHTML example 14

3.4Deningasite 17

3.5 Creating a template 18

3.6 Creating an XHTML page from your template 19

thatincludesastylesheet

4. List of Resources 24


3/28

Introduction

ThisguidewillprovideyouwithabasicunderstandingofHTML,XHTML,andCSS.It

will also introduce you to Dreamweaver, an editing tool used to create Web pages. You

donotneedtohavepriorknowledgeofanyofthemarkuplanguagesorDreamweaverinordertousethisguide.However,ifyouhavehadsomeexposuretoHTML,you

alreadyhaveatremendousheadstartbecausethelanguageofXHTMListhesame

asHTML,withtheexceptionofafewrulesthatmustbefollowedtocreateavalid

XHTML document.

WhilethisguidedescribessomeoftheHTML/XHTMLtagsthatyouwillusemostoften,

itisnotmeanttobeareferenceguide.Attheendoftheguideisalistofresources,

someofwhicharemeanttoserveasreferencesforthemarkuplanguageswewillbe

exploring.Thegoalhereistogetyoustartedonthebasicsofhowusethesetoolsso

youcanextendyourknowledgeofthemasfarasyouwouldlike.

i


4/28


5/28

Section 1 - HTML/XHTML

XHTML(ExtensibleHypertextMarkupLanguage)isbasicallyanextensionofHTML

(HypertextMarkupLanguage).ItisabitstricterthanHTMLbecauseXHTMLwas

developedtobeatransitionfromHTMLtoXML(ExtensibleMarkupLanguage),

whichhasmuchmorerigidstandardsthanHTML.EverythingyouwilllearnaboutHTMLappliestoXHTMLexceptforthefewrulesthatarerequiredforavalidXHTML

document.FirstwewilldiscussthelanguageofHTML,andthenwewillexamine

howHTMLandXHTMLdiffer.

HTMLisamarkuplanguagecomprisedofasetoftagsthattellabrowserhowto

display content. HTML can be written in any text editor including a multitude of

HTMLeditorssuchasDreamweaver.Dreamweavercanbeusedtofollowalonginthe

examplesusedinthisguide,anditisadvisabletodososinceitwillhelpyoutolearn

thesyntaxofHTMLandXHTML.TolearnhowyoucanuseDreamweavertoentercode

andseehowitwilldisplayinabrowser,refertosection3.

HTML does not recognize traditional carriage returns in text. It will run text across

theentirewidthofthescreenunlessalinebreakisspeciedusingthelinebreaktag

orthewidthofatexttagisspeciedsothatthetextonlyextendstoacertainwidth

ofthescreen.Figure1showsthewordsone,two,three,fourlistedverticallyinan

HTMLdocument.Figure2showshowthethosewordswouldappearinabrowser.You

canseethatHTMLdoesnotretainthelinebreaksweplacedinthecode.

Figure 1 - code view Figure 2 - browser view

1


6/28

Body tag-

ThebodytagisrequiredinanHTMLdocument.ItisthemainsectionofanHTML

documentandcontainsallthecontentthatwillbedisplayedinthebrowser.

Division tag -

Thedivisiontagisusedtosetapartchunksofcontent,andistypicallyusedtoassignspecicformattingtotextorobjects,especiallyusingstylesheets.

Header tag-

TheheadertagisrequiredinanHTMLdocument.Itcontainsinformationaboutthe

HTMLdocument.Thistagappearsbeforethebodytaganditscontentisnotdisplayed

inthebrowser.

1.1 HTML/XHTML Tags

Structure and Meta tags

Therearethreetypesoftags:starting,ending,andemptytags.Startingtagsinclude

onlythewordorabbreviationofthetagandendingtagshaveaforwardslashbefore

thewordorabbreviatione.g..Theactionorfunctionofatagwillbe

appliedtoanycontentbetweenthestartingandendingtags.

Emptytagsaretagsthatdonotneedanendtag.Anexampleisthelinebreaktag

,whichinsertsalinebreakintheowofthetext.

NotallHTMLtagsrequireanendingtag.Inadditiontoemptytags,HTMLdoesallow

sometagstobeusedwithoutanendingtag.Forexample,theparagraphtag(

)is

oftenusedwithoutaclosingtagtoinsertablanklineinaWebpage.Eventhoughthe

browserwilldisplaythesetypesofinstancescorrectly,itisgoodpracticetocloseall

tags,asyouwillseewhenwediscussXHTML.

AnHTMLtagconsistsofanopeningandclosinganglebracketcontainingthetag

name,whichisawordorabbreviationrepresentingthefunctionofthetag.For

example,theHTMLtagwhichbeginsandendsanHTMLdocumentis.Tags

cancontainoneormoreattributesthataffecthowthetagisappliedtothecontent

betweenthetags.Forexample,thesizeofanimagecanbeincreasedordecreased

usingtheheight and widthattributes.Anequalsignconnectstheattributevaluetotheattribute.Valuesaregenerallyenclosedinquotes,butthosethatconsistofone

wordornumbervaluedonotrequirequotes.

BelowisalistofsomeoftheHTML/XHTMLtagsyouwilllikelyusemostoften.

2


7/28

Title tag -

ThetitletagdenesthetitleofaWebpageandusuallyappearsinthebrowserstitlebar.ThistagisrequiredforvalidHTMLandmustbeintheheaderoftheHTMLcode.

HTML tag-

ThehtmltagistherstandlasttaginanHTMLdocument.Itletsthebrowserknow

thatwhatiscontainedbetweenthetagsiswritteninHTML.

Strong tag -

Thestrongtagappliestheboldstyletothetextbetweenitsstartingandendingtags.

Paragraph tag -

Contentenclosedinparagraphtagsisautomaticallyseparatedfromothercontent

withablankline.

Line break tag -

Thelinebreaktaginsertsalinebreakatthepointinthetextwherethetagisplaced.

Thistagisreferredtoasanemptytag-itdoesnotrequireanendtag.

Heading tags-,,,,,

Textcontainedbetweentwoheadingtagsisdisplayedwithavaryingfontsize

dependingontheheaderlevel-h1beingthehighestandh6beingthelowest.Thus,

textenclosedbetweenh1tagswillbedisplayedmuchlargerthantextenclosed

betweenh3tags.

Text tags

Emphasis tag -

Theemphasistagappliestheitalicstyletoanytextbetweenthestartingandending

tags.

3


8/28

Image tag -

TheimagetagallowsyoutoinsertimagesintoanHTMLdocument.Thisispossible

withthesrcattributethatrequiresthepathtotheimagele.Otherattributesthatarewidelyusedwithimagetagsarealt or title, height, and width.

Thealt and titleattributesletyouaddtexttoanimagethatusersseewhentheymouseovertheimage.UsingtheseattributeswillmakeyourWebpagesmore

accessibleforusersbecausethetextwilldisplayeveniftheimagedoesnot.Thiswill

helpuserstobetterunderstandhowyourWebpageshouldlookandwhatitisabout.

Thewidth and heightattributesspecifythedimensionsoftheimage.ThesevaluestellthebrowserthesizeoftheimagesoitcandisplaythecontentsoftheWebpage

accordingly.Thiswillhelptoincreasethespeedwithwhichanimageisdownloaded

ontotheWebpage.Figure3showsanexampleofcodeusedtoinsertanimageintoa

Web page.

Note:Twootherpopularattributesfortheimagetag,theborder and alignattributes,havebeendeprecated.Thismeansthatthetagmaystillbesupportedby

a browser, but it is recommended to discontinue using it because it will probably be

phasedoutinthenearfuture.Itispreferabletousetheseattributeswithinastyle

sheet.Theborderattributeisoftenusedtosettheborderaroundanimagetozero

sothatitdoesntappear(browsersautomaticallyputaborderaroundimages).The

align attribute is used to position an image on a Web page.

Note:Noticethatthebrowserwillunderlinethelinkandsetthelinkcolorasthefamiliardarkbluecommonlyusedforhyperlinks.Youcanchangethisformatwith

various attributes, preferably using CSS.

Anchor tag -

TheanchortagismostoftenusedwiththehrefattributetospecifyahyperlinktoanotherdocumentorWebpage.ThevalueofthehrefattributeistheURLtothe

hyperlinksdestination.TheURLmustenclosedindoublequotes.Thetextbetween

theopeningandclosinganchortagsisthetextthatappearsinthebrowser.Figure

4displaystheHTMLcodeforahyperlinktotheMuseumofModernArt,andFigure5

showshowthehyperlinkwouldbedisplayedinabrowser.

Link tags

Figure4-Exampleofcodeforahyperlink

Figure 5 - Example code as viewed in a browser

Figure 3 - Example of code used to insert an image into a Web page

4


9/28

Table tags

HTMLtableshavebeen,andare,usedasawaytoarrangecontentonHTMLpages.

However,thereisagrowingmovementtousetablesinthetraditionalsense,whichisto

displaydata,andnottousethemasamechanismtolayoutcontentonanHTMLpage.

HTMLtablesconsistofheaders,rows,andcells.Figure6showshowtableelementsare

denedusingHTMLvocabulary.Thetablehasthreerows(fourrowsifyouincludethe

headingrow)andthreecolumns.Eachcolumnhasaheading,andeachrowhasthreecells.

heading,cell1 heading,cell2 heading,cell3

row 1, cell 1 row 1, cell 2 row 1, cell 3



AtableinHTMLisdenedwithatag.Atablerowisdesignatedwiththe

tag,andatablecellisdesignatedwithatag.Tableheadingsusethetag.ThetableinFigure6wouldbeconstructedinHTMLusingthecodeshowninFigure7.

Figure8displayshowtheHTMLcodeforourtablewouldappearinabrowser.Thisis

actuallythedesignviewinDreamweaver,whichwewilllookatalittlelaterwhenwe

discuss Dreamweavers interface.

Figure 6 - Table elements

Figure8-AbrowsersrenderingofthecodeinFigure7

Figure7-HTMLcodeusedtocreatethetableinFigure6

5


10/28

Now,letslookatwhatweveaddedtoourtableinFigure9.Ifyoulookatthe

attributesofthetabletag,youwillseethatthetablehasaborderequaltoone

pixel,andthewidthofthetableissettoftypercentofthewidthofthescreen.

Thecellpaddingattributeisequalto10pixelsandcellspacingisequalto5pixels.

Cellpaddingaffectsthespacebetweenthecontentsofthecellanditsborder.

Ifcellpaddingisnotspecied,theamountofspaceissettoonepixel.Ifthecellpaddingissettozero,thenthecellcontentswilltouchthecellborders.

Cellspacingaffectsthespacearoundthecellsthemselves.Thisincludesthespace

betweencellsandthespacebetweenthecellsandthetableborder.

Noticetheattributesintherowtags.Thecellcontentsofrowonearealignedtothe

left,thecellcontentsofrowtwoarecentered,andthecellcontentsofrowthree

arealignedtotheright.

Figure9-ThecodeforthetableinFigure7withsomeformattingadded

Nowwecanaddsomeformattingtoourtableusingattributes.Someofthemore

widely-used attributes for tables include align, border, width, cellpadding, andcellspacing.

Thealignattributecanbeusedwiththerowandcelltagstocontrolwherethetextappearsinthecell.

Theborderattributeisusedwiththetabletagandplacesaborderaroundthe

outsideofthetableandbetweentherowsandcellswithinthetable.Ifyoudonotwishtohaveaborderinyourtable,youcansettheborderattributeequaltozero.

Thewidthattributecanbeusedwiththetableandrowtags.Usedwiththetabletag,thewidthattributecanbespeciedasapercentageofthescreenwidthoranumberofpixels.Usedwiththerowtag,thewidthcanbespeciedasapercentageofthe

tablewidthoranumberofpixels.

6


11/28

Figure10belowdisplayshowthecodefromFigure9wouldlookinabrowser.Notice

thespacebetweenthecells,andthespacebetweenthetextinthecellsandthecell

borders.

Figure10-ThetablefromFigure9asitwouldbedisplayedinabrowser

7


12/28

1.3DeningFilePathsTherearetwowaystospecifypathstoimageanddocumentles:relativepathsand

absolutepaths.

AnabsolutepathincludestheentireURLpathforalinkedobject.

ArelativepathisaURLpaththatisrelativetothehomedirectorycontainingyourpages.

IftheimageislocatedinthesamedirectoryastheWebpageinwhichitlinked,the

pathwouldjustbethelenameoftheimage.

IftheimageislocatedinadirectoryabovetheWebpage,thepathURLcontainstwo

dotsandaforwardslash(../)totellthebrowserthattheimageisuponedirectorylevel.

ThisimageislocatedtwodirectorylevelsupfromtheWebpagedirectory.

1.2 XHTML RulesNowwegettothedifferencesbetweenHTMLandXHTML.Everythingyouhave

learnedsofaraboutHTMLappliestoXHTML.TherearethreemainrulesXHTML

requiresforavaliddocument:

1)Alltagandattributenamesmustbeinlowercase.

2)Attributevaluesmustbeenclosedindoublequotes.

3)Everystartingtagmusthaveanendtag.

Sincealltagsmusthaveanendtag,whatdowedoabouttheemptytagssuchas

thetagswelearnedaboutabove(,
)?Emptytagswilluseaforwardslash

beforetheendinganglebracketwithaspacebeforetheslash.

So,thelinebreaktagwillbecome,andtheimagetagwillbecomeor

.

8


13/28

Section 2 - CSS

CSS(CascadingStyleSheets)areawaytocreateastyleforoneormoreXHTML

documentswithonestylesheet.Usingstylesheets,youcanapplyastyleorformatto

text,hyperlinks,images,basicallyanyofthecontentinyourWebpage.Theyarealso

awaytoseparatecontentfromstyleandlayout,whichisanincreasinglyimportant

goalincreatingWebpages.Thisisimportantnotonlyforaccessibilityforusers,but

alsoforeaseofcreatingandupdatingWebpages,sinceachangeinaparticularstyle

willonlyrequireeditingonepageinsteadofallofthepagesthatusethatstyle.

ThesyntaxforaCSSstyleis

Selector{Property:Value}

Forexample,astylethatappliesthesansseriffonttoallcontentwithinparagraph

tags is

p{font-family:sansserif}

Valueswithmorethanonewordrequiredoublequotes.Ifthereismorethanone

propertyspecied,theymustbeseparatedwithasemicolon.Multipleselectorsthat

areseparatedbycommascanbespeciedforthesameproperties:

p,div{text-align:center;color:black}

Therearetwotypesofselectors,classselectorsandIDselectors.

2.1 Class SelectorsTheclassselectorutilizestheperiodtospecifystyles.

Byusingtheclassselector,youcanspecifymultiplestylesforoneXHTMLelement.

Twotypesofparagraphscanbedesignatedwiththefollowingcode:

p.right{text-align:right}

p.center{text-align:center}

Therstparagraphstylewillalignthetextinthatparagraphtotherightofthe

screen,andthesecondparagraphstylewillcenterthetextinthatparagraph.TheclassattributeisrequiredintheparagraphtagintheXHTMLcode:

TheselectorcanbeomittedintheCSScode,leaving

.center{text-align:center}

ThisstylecanthenbeappliedtoanyXHTMLelement.

9


14/28

2.2 ID SelectorTheIDselectorusesthepoundsign.AnexampleofaCSSstyletitledtextwiththe

IDselectorwouldlooklikethis:

#text{max-width:600px}

Thisstylewillsetthewidthofthetextinaparagraphto600pixels.HereishowthestyleisinsertedintotheXHTMLcode:

IDselectorscanbeappliedonlyonceintheXHTMLcode.So,thestyletextcanbe

used in one distinct XHTML tag.

2.3 Specifying styles in XHTMLTherearethreewaystoaspecifyastyle:

1. Inside an XHTML tag as an attribute - Inline

2.InsideaspecicXHTMLdocument-Internal

3.InanexternallethatislinkedtooneormoreXHTMLdocuments-External

AninlinestyleshouldonlybeusedwhenaspecicXHTMLelementstylediffersfrom

anotherspeciedstyle.Inlinestylesaredenedwiththestyleattribute.

AninternalstylesheetshouldbeusedwhenanXHTMLdocumenthasauniquestyle

thatdiffersfromanexternalstylesheet.TheCSSstylesaredenedwithintheheaderoftheHTMLdocument.

p{text-align:center;color:red}

h1{color:blue}

Thetypeattributeinthestyletagtellsthebrowserthatwhatfollowsisastylesheet

thatistobeappliedtotheXHTML.

AnexternalstylesheetisdenedintheheadofanXHTMLdocument:

ThisdenitionusesthelinktagtolinktheXHTMLdocumenttothestylesheet.The

lenameofthestylesheetismystyle.css.

10


15/28

Section 3 - Dreamweaver

DreamweaverisoneofthemorepopularHTML/CSSeditors.Itisanapplication

designedforpeoplewithvariouslevelsofWebdesignskills.Youcanbeabeginning

user of HTML or you can be an advanced Web designer. Dreamweaver is convenient for

experiencedWebdesignersbecauseitcaninsertmuchoftheHTMLcodeforyou.

TheMenuandInsertBarsatthetopoftheDreamweaverwindow(Figure11)letyou

selectHTMLtagsandobjectssuchaslinksandimages.DreamweaverwillinserttheHTMLandwillpromptyoutoinsertthecontent.

ThemenusallowyoutoperformvariousoperationsinDreamweaver.Someofthese

willbefamiliartoyoufromyouruseofotherprograms.Forexample,theFilemenu

letsyoucreatenewles,openexistingles,andsaveles,tonameafewofthe

operations.TheEditmenuallowsyoutochoosefromvariousoperationsforediting

HTMLcode.TheInsertmenucontainsoptionstoinserttags,images,links,andother

objectsintoyourcode.TheTextmenuletsyouselectoperationsthataffecttext,

suchasparagraphformats,fonts,fontsizes,fontstyles,andevencolors.

Differentobject(icon)toolbarscanbeselectedwiththedrop-downselector(wherethewordCommonisdisplayedontheInsertbar).Forexample,theCommontoolbar

allowsyoutoinsertmanyofthesameobjectsfoundintheInsertmenu.TheForms

toolbarletsyouinsertHTMLformobjects,suchastextelds,checkboxes,andradio

buttons.TheDataandTexttoolbarscontainobjectsandstylesfordataandtext.

3.1TheInterface

Figure 11 - Menu bar and Insert bar

Note:TheinformationinthissectionpertainstoDreamweaver8.ThecurrentversionofDreamweaverisCS3.Thepreviousversionandthecurrentversionwillhave

thesamefunctions,butCS3mayhaveadifferentlooktosomeofitswindowsand

features.

TheDocumenttoolbar(Figure12)appearsabovethedocumentwindow.Thelename

ofthedocumentappearsinthetabontheleftside.Youcanhavemultiplelesopen

andswitchbetweenthemeasilybyclickingonthatlestab.Thethreebuttonsbelow

thattabwillbetheonesyouwillprobablyusemostoften.

1


16/28

OntherightsideoftheDreamweaver

windowistheFilespanel(Figure14)

thatwilldisplaythelestructureof

yourcomputerandletyouaccessthe

HTML,CSS,andimagelesyouare

using to create your Web pages.

Youcanalsousethispaneltouploadyourlestoaserverfromyourlocal

computer, or you can edit pages directly

ontheWebserver.

Figure 14 - Files panel

Figure13-Propertiesinspector

AtthebottomoftheDreamweaverwindowisthePropertiesinspectorthatletsyou

editpropertiesofobjectswithouthavingtoedittheHTMLcode.Figure13below

showsthePropertiesinspectorcontaininginformatonforasmileyfaceimage.You

canusetheinspectortoeditmanyofthepropertiesoftheimageincludingthewidth

andheightoftheimage,thesourceoftheimage,alternatetext,andanyborderwewouldliketoapplytotheimage.

Figure 12 - Document toolbar

ThecodebuttondisplaystheHTMLcodeofthedocument,andthedesignbutton

displaysthevisualeditorinthewindowwhichshowshowthepagewouldlookina

browser.Thesplitbuttondisplaysboththecodeanddesignviewatthesametime.

Theiconsontherightallowyoutoperformvariousoperationssuchaschangethe

viewoptionsorvalidateyourcodeagainstcurrentstandards,buttheiconthat

resemblestheearthisespeciallyusefulbecauseitwillletyoupreviewyourcodein

thebrowserofyourchoice.

12


17/28

3.2CreatingaNewXHTMLPage

TocreateablankXHTMLpage,gothetoFilemenuandselectNew.TheNewdocumentwindowwillappear(Figure15).SelecttheGeneral tab if it is not alreadyselected.UndertheCategoryheading,selectBasic page.UndertheBasicpage

category, select HTML.Oryoucanselectothertypesofpagesdependingonwhat

typeofdocumentyouwanttocreate.Fornow,wejustwanttocreatesomebasicXHTML code.

Figure 15 - New Document window

1


18/28

3.3 Basic XHTML ExampleFigure16showscodeforanexampleofabasicXHTMLpagewhichcontainssometext,

animage,hyperlinks,andasmalltable.Noticethevarioustagsusedtosurroundthe

text.Wehaveusedaleveltwoheading,aparagraphtag,andadivtag.MyWebsite

usestheleveltwoheadingbecauseitservesastheheadingfortheWebpageand

shouldstandout.Theuseofparagraphanddivtagswasarbitrary.Wecouldhave

exchangedtheparagraphanddivtags.

YoucaninsertthiscodeintoanewpageusingDreamweaverandthenpreviewitto

seehowitwouldlookinabrowser.

Figure 16 - Basic XHTML example

4


19/28

Figure17-Insertimageicon

Figure 18 - Select Image Source window

Ratherthantypingallofthecodeintoapage,youcanutilizesomeofDreamweavers

shortcutsbygoingtotheMenubarortheInsertbarmentionedintheinterface

sectiontoselecttheobjectyouwouldliketoinsertintoyourpage.

Forexample,ifyouclickontheInsertimageiconintheInsertbar(Figure17)and

select Image,theSelectImageSourcewindowappears(Figure18).Youcannow

browsetotheimageyouwanttoinsert.WhenyouclickOK,anotherwindowwillappearaskingyoutoinsertalternatetextandalongdescription.Longdescriptionwill

linktoanotherdocumentifyouhaveanespeciallylengthydescriptionforyourimage.


20/28

Figure20-Preview/Debuginbrowsericon

Figure19-TheXHTMLexampleasitwouldappearin

thedesignviewofDreamweaver

Figure19showshowthedesignviewof

Dreamweaver will display your code.

Visibledottedlinesrepresenttheoutline

ofthedivsectionandtherowsandcellsof

thetable.

Youcanalsoclickontheearthiconinthe

Documenttoolbar(Figure20)topreview

thecodeinabrowserwindow.Thiswayyouwillnotseethesectionoutlinesthat

Dreamweaver displays.

16


21/28

3.4DeningaSiteDeningasitewillallowyouseeyourlesinthelepaneltotherightofthescreen.

TodeneanewWebsiteinDreamweavertowhichyoucanaddWebpages,click

ontheSite menu and select New site.AwindowwillappearliketheoneinFigure21thatwillallowyoutodeneanewsite.EnteranameforthesiteandaURLfor

thesiteifyoursiteislocatedonaserver.Ifyouwillbecreatinglesonyourlocal

machine,thenleavetheURLsectionblank.

Thenextscreenwillaskyouifyouwouldliketouseaservertechnology.SelectNoandadvancetothenextscreen.Selectwhetheryouwillbeworkingonyourleson

theserveroronyourlocalnetwork.Browsetothedirectorywhereyourleswill

bestored.Onthenextscreen,selecthowyouwillconnecttotheserver.Ifyouare

editingonyourlocalmachine,selectNone.Thenalscreenwillsummarizeyour

selections. Select Done.Yoursitenameshouldappearinthelestructuretotherightofthescreen.

Youcannowcreatepagesandaddthemtoyoursite.

Figure21-SiteDenitionwindow

1


22/28

3.5 Creating a Template

Nowthatyouhavedenedasite,youcancreateatemplatethatyoucanuseto

createalloftheWebpagesinyourWebsite.Thetemplatecanincludeanytextor

objectsyouwouldliketoappearonthepagesofyoursite.

Tocreateatemplate,gotheFilemenuandselectNew.TheNewDocumentwindow

willopen.UnderCategory,selecttemplate pageandthenHTML template.

Youcannowaddwhateveryouwouldliketobepartofthetemplate.Intheexample

weareusingforthisexercise,wehaveaddedanimageofabluebannerthatwould

displayyourname(Figure22).Thebannerwillappearatthetopofourpage.

Onceyouhavenishedcreatingthecontentforthetemplate,youwillhavetodecide

whereyouwanttoinsertaneditableregion.Aneditableregionisasectionofthe

templatethatyouwillbeabletoaddandeditcontentinaWebpagethatusesyourtemplate.OnceyouusethetemplatetocreateanotherWebpage,youwillnotbe

abletoeditthetemplatecontentonthenewWebpage.Templatecontentcanonly

beeditedinthetemplatepage.Toinsertaneditableregion,gototheInsertmenu,

select Template ObjectsandthenEditable Region.

Whenyousavethetemplate,Dreamweavercreatesatemplatefolderandsaves

thetemplateleinthatfolder.Thetemplatelewillbeeasytolocatebecause

Dreamweaverassignsitaleextensionofdwt.Thus,yourtemplatelenamewill

looksomethinglikethis:my_template.dwt.

Figure 22 - Example template page

18


23/28

3.6CreatinganXHTMLPageFromYour

TemplateThatIncludesaStyleSheet

GototheFilemenuandselectNew.TheNewDocumentwindowwillappear.SelecttheTemplatestab.UndertheTemplatesforheading,selectthesitewhose

templateyouwanttousetocreateaWebpage.Thesiteyouhavechosenwillappearabovethesecondpanel,andanytemplatesyouhavecreatedforthatsitewillappear

undertheSiteheading.Inourcase,weonlyhaveonetemplateforMySite.Selectthe

templateyouwishtousetocreateyourpage.Apreviewofthetemplatewillappear

inthePreviewpanel.BesuretochecktheboxnexttoUpdatepagewhentemplate

changes.Thenanychangesyoumaketothetemplatewillbeappliedtoanypages

thatusethattemplate.ClickCreate.Youcannowaddcodetotheeditableregionsof

your page.

Figure 23 - New from Template window


24/28

Belowisthecodeforourexamplepage.Thecodeisthesameasintheprevious

example,exceptthetemplatewecreatedearlierisnowpartoftheWebpageand

astylesheethasbeenappliedtothepage.Noticethecodefromthetemplateis

grayedoutintheWebpagesinceitisnoteditable.Also,noticethelinktagthatlinksthestylesheettotheXHTMLdocument.TherelattributedescribestherelationshipofthelinkeddocumenttotheXHTMLdocument.Thetypeattributespeciesthe

contenttypeofthelinkedle.Inthiscase,theCSSdocumentisatextle,buthas

anextensionofcss.ThevalueofthehrefattributeistheURLofthestylesheet.

Inthiscase,theURLisjustthelenamesincetheleisinthesamedirectoryastheXHTML document.

Figure24-CodefortemplatepagethatincludesCSS

20


25/28

Figure25displaysthestylesheetforourexample.Therearetwostylesappliedtothe

bodytag,whichwillaffectallthecontentbetweenthebodytags.Thefont-familypropertyappliesthefontsintheorderinwhichtheyarelisted.TheVerdanafontwill

beappliedtothetext,ifVerdanaisnotavailableonauserscomputer,thenArialis

applied,etc.Thewidthpropertylimitsthewidthofthecontentofthebodytagto

600 pixels.

Thetableonourexamplepageissettohalfthewidthofthescreenwidth.Italsohas

aborderthatis5pixelswide.

NextonthestylesheetisanIDselectornamedcenter,whichwillcenterthetext

withinanytextcontainerinwhichtheselectorisapplied,butrememberthatitcan

appliedonlyonceinthecode.

Theclassselectorpaddinginserts15pixelsofspacealongthetopandbottomof

whateverobjecttheclassapplies,inthiscasethesmileyfaceimageandthetableon

our page.

Thelasttwoselectorsinthestylesheetaffecttheappearanceofthehyperlinksonourpage.Thea:linkselectoraffectsthestyleoflinksbeforeauserhasclickedon

it.Thea:visitedselectoraffectsthestyleoflinksthathavebeenclicked.Thetext-decorationpropertywithavalueofnonereversestheunderliningthatbrowsersoftenapplytolinks.Thecolorpropertysetsthecolorofthelinks.Thecolorvalues

arethehexadecimalnotationusedforWebcolors.TheListofResourcesattheendof

themanualprovidesawebsitewithachartofcolorsforuseontheWeb.

Figure25-Stylesheetforthetemplatepage

2


26/28

Figure26showshowourWebpagelooksinthedesignviewofDreamweaver.Notice

thespaceinsertedatthetopandbottomoftheimage,theborderaroundthetable,

andthestyleofthehyperlinksthatwespeciedinourstylesheet.

Figure26-OurWebpageinthedesignviewofDreamweaver

Congratulations!YouhavesuccessfullycreatedaWebpageusingatemplateandastylesheet!Nowthatyouhavesomebasicknowledgeofthetoolsyouneedtocreate

Webpages,youcanexplorethesetoolsfurthertobuildmorecomplexWebpages.The

ListofResourcesonthenextpagewillpointyoutootheronlineandprintsmaterials

thatwillcontainmorein-depthinformationaboutthesetools.GoodLuck!

22


27/28


28/28

CSS:TheDenitiveGuide.EricMeyer.OReillyInc.

BeginningCSSWebDevelopment:FromNovicetoProfessional.SimonCollison

AcompletelistofCSSpropertiesandtheirpossiblevaluescanbefoundontheHTML

Dogwebsite:http://www.htmldog.com/reference/cssproperties/

W3Schoolstutorial:http://www.w3schools.com/css/default.asp

HTML,XHTML,andCSS(VisualQuickstartGuide)6thedition.ElizabethCastro.

HTML&XHTML:TheDenitiveGuide-6thedition.ChuckMuscianoandBillKennedy.

OReillyInc.

AcompleteofXHTMLtagscanbefoundontheHTMLDogwebsite:

http://www.htmldog.com/reference/htmltags/

TheW3SchoolsofferonlinetutorialsforHTMLandXHTMLat:

http://www.w3schools.com/xhtml/default.asp

Section 4 - List of Resources

XHTML

CSS

Dreamweaver

WebSafeColorChart

Dreamweaver8:TheMissingManual.DavidSawyerMcFarland.(Thereisalsoan

editionforCS3-thecurrentversionofDreamweaver)

DreamweaverCS3Bible.JosephW.Lowery.

Dreamweaver8forDummies.JanineC.Warner.(AlsoforDreamweaverCS3).

WebSourceColorChart:http://www.web-source.net/216_color_chart.htm
http://www.htmldog.com/reference/cssproperties/http://www.htmldog.com/reference/cssproperties/http://www.w3schools.com/css/default.asphttp://www.w3schools.com/css/default.asphttp://www.htmldog.com/reference/htmltags/http://www.htmldog.com/reference/htmltags/http://www.htmldog.com/reference/htmltags/http://www.w3schools.com/css/default.asphttp://www.htmldog.com/reference/cssproperties/

Documents

XHTML Manual