View
234
Download
0
Category
Preview:
Citation preview
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.
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
4/28
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
row 2, cell 1 row 2, cell 2 row 2, cell 3
row 3, cell 1 row 3, cell 2 row 3, cell 3
AtableinHTMLisdenedwithatag.Atablerowisdesignatedwiththe
tag,andatablecellisdesignatedwithatag.Tableheadingsusethetag.ThetableinFigure6wouldbeconstructedinHTMLusingthecodeshowninFigure7.
Figure8displayshowtheHTMLcodeforourtablewouldappearinabrowser.Thisis
actuallythedesignviewinDreamweaver,whichwewilllookatalittlelaterwhenwe
discuss Dreamweavers interface.
Figure 6 - Table elements
Figure8-AbrowsersrenderingofthecodeinFigure7
Figure7-HTMLcodeusedtocreatethetableinFigure6
5
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
11/28
Figure10belowdisplayshowthecodefromFigure9wouldlookinabrowser.Notice
thespacebetweenthecells,andthespacebetweenthetextinthecellsandthecell
borders.
Figure10-ThetablefromFigure9asitwouldbedisplayedinabrowser
7
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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.
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
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
8/6/2019 XHTML Manual
26/28
Figure26showshowourWebpagelooksinthedesignviewofDreamweaver.Notice
thespaceinsertedatthetopandbottomoftheimage,theborderaroundthetable,
andthestyleofthehyperlinksthatwespeciedinourstylesheet.
Figure26-OurWebpageinthedesignviewofDreamweaver
Congratulations!YouhavesuccessfullycreatedaWebpageusingatemplateandastylesheet!Nowthatyouhavesomebasicknowledgeofthetoolsyouneedtocreate
Webpages,youcanexplorethesetoolsfurthertobuildmorecomplexWebpages.The
ListofResourcesonthenextpagewillpointyoutootheronlineandprintsmaterials
thatwillcontainmorein-depthinformationaboutthesetools.GoodLuck!
22
8/6/2019 XHTML Manual
27/28
8/6/2019 XHTML Manual
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/Recommended