Upload
hisyam-nursaid-indrakesuma
View
230
Download
0
Embed Size (px)
DESCRIPTION
Dreamweaver Manual
Citation preview
CONTENTPAGE
1. INTRODUCTION2. INITIALISINGDREAMWEAVER3. DESIGNVIEW
a. TextFormatting(Paragraphing,Styling,Listing)b. Insert(Table,Media,Hyperlinks)
4. HTML
a. Introductionb. PageStructurec. Tags
and and
5. CSS
6. STYLES.CSS
a. Globalb. Textc. Containerd. Misc
7. INDEX.HTML
1.INTRODUCTION1.1IntroductiontoWebDesigningandDreamweaverWebbrowsingusesawiderangeofprogramminglanguages.Oneofthemostusedishtml.Ahtmlfileisbasicallyafilecontaininghtmlcodeswhich,whenopenedbyabrowser(Chrome,IE,etc),willbeinterpretedbysaidbrowsertoshowthefinishedproductabeautifulwebsite.Youcanmakeahtmlfilebytypingcodesintoanytextprocessingtools,evenasimpleNotepad.Dreamweavermakescreatingwebsiteseasierasitfacilitatescodingprocessviamanyways.Mostsignificantly,itprovidesaSplitview,whereyourwindowissplittoshowbothCodeviewandDesignview.
Codeview:showsallhtmlcodesbeforeimplementedinabrowserDesignview:showsthecompletedwebpage,likeaninbuiltbrowser
AnychangesmadeinCodeviewwillbedirectlyreflectedinDesignview.Magnificently,DreamweaverallowsyoutoedityourwebpageinDesignviewusingvariousDreamweavertools,andanychangesmadeinDesignviewwillbereflectedintheCodeviewashtmlcodeswrittenbyDreamweaver.Inshort,youcanmakeawebsiteevenwithlimitedcodingknowledge!Thatsaid,constrictingourselvestoDesignviewisunwiseassometaskscanbeachievedmoreeasilyinCodeview.Infact,sometasksareonlyachievableinCodeview.Designviewismoreusefulwhentheframeworkofyoursiteisfinishedandyouwanttoaddmorecontentsinyoursite.Hence,inthistutorial,wewillteachboththeCodeandDesignwayofwebdesigning.Dreamweaveralsohasaveryconvenientwaytoloadyourwebsiteonline.Thiswillnotbeexplainedhereasthisworkshopismainlyforwebdesigning.Anyinformationonhowtouploadyourwebsitecanbefoundathttp://www.dummies.com/howto/content/howtopublishyouradobedreamweavercs6website.html
1.2EndResultHereistheendresultthatyouwillmakeattheendofthisworkshop:
Thissimpleyetsleekwebsiteincludes:positioning,textformatting,andinsertingimages,videos,andhyperlinks.Excited?Letsgetstartedthen.
2.INITIALISINGDREAMWEAVER2.1InitialisingBasicSetup:
1. GotoDesktop,oranylocationyouwishtokeepyourwebsite,createafolderandnameit
anythingyouwant
2. Atthesplashscreenofdreamweaver,whenyoufirstopenedit,lookforSiteoptionat
thetopmenubar.SelectNewSite...option.
3. Hereyouwillseethesitesetupscreenappearsandyoumaynameyourwebsiteand
chooseyourlocalsitefolder.
4. Atthelocalsitefolder,keyinyourrootfolderlocationorselecttherightmostlogoand
directittoyourrootfolder.
5. Rootfolderiswhereyoukeepallyourwebsiteresources.Thereforeinourcase,directit
tothefolderwecreatedonthedesktop.
6. Presssavebuttonafterdone.
NowweseetheLocalPanelhasbeenupdatedwithyouremptywebsitefolder.
#TIPS:Thepurposeofcreatingafolderistokeepeverythingorganized,evenforaverysimplewebsite.
7.Next,rightclickontheLocalPanel,orthesitefoldercreated,andselectNewFolder.Thiswillcreatesubfolderforyoutomanageandorganizenecessaryresources.Youmayalsorightclickthesubfolderandcreateanothersubfolderwithin.
Task:Create2foldersandrenamedthemas
images css
Thesearethebasicfoldersthatalmosteverywebsitedefinitelywillhave.
#TIPS:Alternatively,insteadofusingdreamweavertocreatefolders,youmayalsodirectlycreatethematthefolderwhichislocatedatthedesktop.
However,afteryoutravelbacktoDreamweaver,theLocalPanelstillremainedthesame.Thepanelisneededtobeupdatedmanuallybypressingthecirculararrowbuttonatthetopofthe
panel,thiswillrefreshthefolderlist.#IMPORTANT:Donotcreatenewfileormoveexistingfilearoundintherootfolder,justdont!CreateHTMLFiles(inrootfolder)
Tocreatehomepage,gotothemainfolderandcreateanewfile.Nameitspecificallytoindex.html.Fortheotherpagesyouwishtoincludeinyoursite,nameitwhateveryouwant.e.g.about.html,contact.html.
Task:create3htmlfilesandnamethemto: index.html about.html contact.html
CreateCSSFiles(incsssubfolder)Makeanewfileatthesubfolderandnameitstyles.css.Itsnotnecessarytonameisthisway,butthisiswhatmostofthewebsitenameitforitspurpose.
Task:Create1cssfileinthesubfolderandnameit: styles.css
#TIPS:Ifyouaccidentlycreatewrongfileatthefolder,youmaydraganddropthefileintoyourdesiredlocation.Finalnote:Forthepurposeoftodaysworkshop,wehavepreparedafoldercontainingeverythingyoullneedintheDrive.Downloadthecontentsintheimagesfolder(andputthemintherightfolder)Also.downloadthepracticefolderandputtheminyourrootfolder
2.2DreamweaverWorkplaceDreamweaverworkplacecanbecustomisedtoonespreference.Forthepurposeoftodaysworkspace,wewillbeusingthedefaultviewbyDreamweaver.Donotfeeloverwhelmedwhenyouseeunfamiliarterms.Fornow,focuson1,2,and7
1. Tabs:Showsallthefilesassociatedwiththecurrentwebpage(eg:styles.css)
2. Toolbar:Onlythe2belowarerelevantforourworkshop
a. Code|Split|Design:TogglebetweentheCode,Split,andDesignviewb. Title:ShowsTitle(undertag).TitlewillshowupasTabsname
3. PropertiesPanel:Showsthedifferentpropertiesofwhatthecursorison
4. StatusBar:Locatedbetweenthewebpageandpropertiespanel.Itshowsthe
i.Tagsassociatedwithwhatthecursorisonii.Webviewingdimensionsandzoomsiii.Statusofthewebpageasawhole
5. Insert:ConsistsofvariousinserttoolstoinsertthingsintothewebpageinDesignView6. CSSStyles:ShowsCSSpropertiesandrulesassociatedwithwhatthecursorison.This
panelisusedtoedit/stylethetagsshownintheStatusBar
7. FilesTab:ShowsallthefilesinthewebsitesRootFolder
3.DESIGNVIEW
1. DownloadPracticefolderintoyourrootsitefolder2. Openthefolderandopendesignview.html3. Attopleftcorner,intheToolbar,chooseDesignView4. AlsointheToolbar,changethetitletoDesignView
PARAGRAPHINGSimplyclickanywhereontheDesignViewtostarttyping.#TIPS:Shiftentertomakealinebreak.
Bydefault,wewilltypeinParagraphformatinDesignmode,asisshowninthePropertiesbarbelow.
Wecanchangetootherformatsbysimplyclickingonthedropdownmenu.Belowishowthedifferentformatswilllooklike.
Exercise1
TEXTSTYLINGANDALIGNING1. Select/highlightanyword(s)inthetext2. SimplyRightclick>Styling>Bold(orItalic,underline,etc.)3. Now,highlightthewholeparagraph4. Simply'Rightclick>Align>Center'(orRight,left,etc.)
Exercise2
LISTING
1. Select/highlightallthetext2. Rightclick>Listing>OrderedList(orUnorderedList)3. Tochangetheirindentation,rightclick>listing>Indent(orOutdent)4. Userightclick>listing>properties
#TIPS:Alternatively,wecanusethequickeditingfeaturesinthePropertiesbarasshownbelow
Exercise3
INSERTUndertheInsertPanelontheright,therearevariousinsertingtools.Letsgothroughsomeofthem.
FINALRESULT
.
InsertHyperlink1. Select/HighlightReadMore.2. ClicktheHyperlinkbuttonintheInsertPanel
3. Eithercopypastealink(externalhyperlink)orbrowseandselectother.htmlpagein
yourwebsite(internalhyperlink)4. Alternatively,wecanaddHyperlinkusingthePropertiesBar
InsertHorizontalRule1. PutyourcursorinbetweentheCatsFactsandCatsMyths2. ClicktheHorizontalRulebuttonintheInsertPanel3. ClickonthelineandeditthelookofthehorizontallineinthePropertiesPanel
#TIPS:Ifyouarestrugglingtoclickontheline,clickonthetagintheCodeViewInsertTable
1. ClicktheTablebuttonintheInsertPanel2. Modifythetablesspecstoyourpurpose
#NOTE:TextsintheHeadercellswillbestyledasTableHeader,.TypeinCUTECATSFTWandfullygrown,youngsters,kitteninsidethetablestoseethedifference
InsertDivTagThisisanimportantfeature,butitwillonlybeusedlateronwhenweareactuallydesigningthewebsite.Fornow,weonlyneedtoknowthatitexists.InsertImages
1. ClicktheImagebuttonintheInsertPanel2. Theimagecanbemovedaroundfreely.Trymovingitintothetablescell
#NOTE:UnderthedropdownmenuforImagesthereareotheroptionswhichwewillnotbecoveringinthisworkshop.
4.HTMLHTML (Hyper Text Markup Language) is the base language used for most, if not all, websites youseeonthewebtoday.Tostartoff,headtoanywebsiteandviewthepagesourceofthatwebsite.BelowishowyoudoitintheGoogleChromebrowser:
1. Openanywebpage,forexample,www.nus.edu.sg2. Rightclickonanyblankspace/areainthewebpageandclickViewPageSource:
3. Examinethecodethatyousee.HTMLIntroductionTo start learning HTML, you have to know what makes up an HTML file. You would see things likethisinanormalHTMLfile:
......,etc.
These are called HTML elements. Each element has tags, which are the ones beginning with . Each element can have an opening tag and a closing tag (the one with the /). Some elements might not have a closing tag. These elements are known as standalone or selfclosing elements. Some elements that you see might have attributes (like the img tag in the aboveexample).TheseattributessometimesdefinethestyleorbehaviorofthatHTMLelement.In this workshop, we will learn some of the more commonly used HTML tags. It is not feasible, in any workshop or course, to teach all HTML tags. You are free to explore commonly used HTMLtagsinthiswebsite:http://www.w3schools.com/html/default.asp
HTMLPageStructureAtypicalHTMLdocumentlookslikethis:
Thisisthepagestitle
This is a paragraph. Normally, everything that you see on a webpage is written after the openingbodytagandbeforetheclosingbodytag.
Each HTML document normally have an opening and closing tag in them. Everything between them is then rendered by the browser for you to see. is the header of the webpage. Normally, header contains information about the pages title and some styling information (you will learn this in the CSS section of the workshop later). The webpage that you seenormallyisallthecontentswritteninsidethetag.HTMLTagsIn this workshop, we will explore some commonly used HTML tags. We would not go to great details in covering HTML tags and you are expected to do some selfresearch on these HTML tags.Usually,peoplepickthemupastheygoafterlearningthebasicsofHTML.1. (Headings)InHTML,youcanuseheadingtagstodefineaheadingforyourpage.Itcanbeaheadingforasectioninyoursite,oraheadingforyourpageitself.HTMLhas6definedheadings,eachdifferinsize:
ThisisthelargestheadingGettingsmallerandsmallerUntilthesmallestheading
isthelargestheadingsizeandgetssmallerifyouincrementthenumber.islargerthan,whileisthesmallestheading.
2. (Paragraphs)ThetagrepresentsaparagraphinHTML.Everytextbetweentheopeningtagandtheclosingtagwillbedisplayedonthewebpageaccordingtothestyleyoudefineinthetag.Onewayofdoingsoistouseattributesintheopeningtag.
ThistextwillbedisplayedinthecenterThisisanormalparagraph
3. ,,stylingandtheirequivalents.YoumightwanttoknowhowtostyletextsinHTML.Thisishowyoudoit:HTMLTag
Description
Everythinginsidetheelementwillbedisplayinboldstyle.
Everythinginsidetheelementwillbedisplayedinitalicstyle.
Everythinginsidetheelementwillbeunderlined.
Sameasbutshowsimportance. Sameasbutshowsimportance.
#NOTE: no difference to the user, but it is common practice that and are used tosignifyimportanceofthetextstyledusingthesetwoelements.Youcancombinetwostylesatonce.
Iambothboldanditalic.
willdisplayIamboldanditalic.4. andrepresentsorderedlistwhilerepresentsunorderedlist.ThisishowyoudobulletsandnumberingsusingHTML.Ordered list by default uses Arabic numerals (1,2,3, etc.) as the numbering system. Unordered list by default uses black bullet points as the bullet point. Each item in the list should be kept insideand,denotinglistitem.
Firstitem.Seconditem.
willdisplaythisinthebrowser:1. Firstitem.2. Seconditem.
Firstitem.Seconditem.
willdisplaythisinthebrowser:
Firstitem. Seconditem.
Youcanchangethestyleofthebulletpointsbyaddingattributestotheortag.Thistablebelowsummarizesthecommonlyusedattributes:
type="1" Default.type="A" Uppercaseletterswillbeusedasthebulletpoints.type="a" Lowercaseletterswillbeusedasthebulletpoints.type="I" Uppercaseromannumeralswillbeusedasthebulletpoints.type="i" Lowercaseromannumeralswillbeusedasthebulletpoints.
type="circle" Default.type="square"
willbeusedasthebulletpoints.
type="disc" o willbeusedasthebulletpoints.Toputtheseattributesintouse,wewritethefollowingHTMLcode:
Firstitem.Seconditem.
whichwilldisplaythisinthebrowser:I. Firstitem.II. Seconditem.
5. (Links)You often click on a link in a webpage that takes you to a different section of that webpage or a completely new webpage. To do this, we use the tag and specify the target of that link using the href attribute. Everything between and is a link to the specified URL in the hrefattribute.
ClicktogotoFBThiswillbeshowninthebrowser:
ClicktogotoFBAndwhenyouclickonthatlink,youwillbetakentoFacebook.Youcanuseanythingasthelinksuchasimages,etc.otherthanplaintext.YoucanalsospecifywheredoyouwantFacebooktobeopenedusingthetargetattributesummarizedbelow:
willopenFacebookinanewtaborwindow.
willopenFacebookinthecurrentwindow.Thisisthedefaultbehavior.There are other target specifications that you can see in http://www.w3schools.com/html/html_links.asp. Note that the website uses CSS styling as examplesandwewillgothroughCSSinlaterpartsoftheworkshop.6. (Images)YoucanaddimagestoyourHTMLdocumentbyusingtheimgtag.
You can set the width and height of the image by using the width and height attributes. Note that it is best if you just specify either the width and height of the image so that the image will scalewhilemaintainingtheoriginalwidthheightratio.
Ifyouspecifythewidthas100pxitwilldisplaytheimagewithawidthofexactly100px.Ifyouspecifyitasapercentage,i.e.50%,itwilltakeup50%ofthedisplayofthewebpage.
7. (BreakLine)InHTML,textsadjusttheirlinebreaksautomaticallyaccordingtothepagewidth.Ifyouwanttospecifyanewline(justlikewhenyoupressenterinakeyboard),youusethetag.Notethatsimplytypingtextsinanewlinewouldnotdisplayitinanewlineifyoudontspecifythetag.
HelloWorld!WelcometoNUS!
willbedisplayedasHelloWorld!WelcometoNUS!Tostartanewline,youmustuse:
HelloWorld!WelcometoNUS!
Thiswilldisplaythetwolineoftextintwoseparatelines.8. andDiv and Span means nothing. These two attributes just specify that everything that is put between and or and are part of that div or span element. This is useful to apply a certain style to all the content in that div or span element and will be usefulafteryouhavelearnedCSSlater.9. TablesYou can create tables in HTML using . By default, tables are displayed without borders. Todisplayatablewithborder,useattributes.
willcreateatablewithaborderofthickness1.
To add rows to your table, use . To add columns in a row, use for a header and for a normal cell. Headers will automatically put the text or element in that cell in the center of the cellandboldfortextsaswell.
HTMLTableIamstudyingHTML
StartofsecondrowHelloWorld!
Willdisplayatablelikethis:HTMLTable Iamstudying
HTMLStartofsecondrow HelloWorld!YoucanmergerowsandcolumnsinHTMLusingrowspanandcolspan:
HTMLTable
Startofsecond(andthird)rowHelloWorld!
BottomRightCorner
willdisplaythistable:HTMLTableStartofsecondandthirdrow
HelloWorld!BottomRightCorner
Pauseandthink!HowtogeneratecolumnsinHTML?This will end our discussion about HTML. In HTML, you can change the font color, font face, set margins for paragraph and webpages, etc. using CSS. The next part of this workshop is to familiarizeyourselfwithCSS.
5.CSSCSSBasics
CSS(whichstandsforCascadingStyleSheets)isalanguageusedtodescribetheappearanceandformattingofyourHTML.AstylesheetisafilethatdescribeshowanHTMLfileshouldlook(ithastheextension.css).
Therearetwomainreasonsforseparatingyourform/formatting(CSS)fromyourfunctionalcontent/structure(HTML):
1. YoucanapplythesameformattingtoseveralHTMLelementswithoutrewritingcode(e.g.style="color:red":)overandover
2. YoucanapplysimilarappearanceandformattingtoseveralHTMLpagesfromasingleCSSfile
Inthelongrun,usingCSSwillsaveyoutimeandmakeyourcodelookalotcleaner!
UsingCSS
Beforewegetstartedwiththesyntax,letsfirstlearnhowtouseit.Therearetwodifferentways
1.WecansimplyputalltheCSScodebetweenandtagsinyourhead.
2.Oralternatively,youcanputitintoacompletelydifferentfile.WejustneedtomakesureourHTMLfilecanfindourCSSfileusingatag.
Werecommendusingthesecondmethod,asitfulfilsbothmainreasonswhyweuseCSSinthefirstplace.
CSSSyntax
ThegeneralformatforALLCSScodewilllooksomethinglikethis:
selectorisanyHTMLelement(,,,etc).ThisistheelementyouaretryingtochangewithyourCSS.
propertyisanaspectofaselector.Thisistheaspectthatyouaretryingtochange.Forexample,ifyouwantedtochangethesizeofthefont,youwouldusefontsize.Therearealotofthese,sowelljustteachyouthecommonlyusedonesasweproceedthroughtheworkshop.
valueisapossiblesettingforaproperty.Inthecaseoffontsize,itcouldbe32px.
Notethatyoucanhavemultipleproperty:valuepairsforasingleselector,tryoutthecodebelow:
Nowletsdoabitofpractice.OpenCSS_Practice_1.htmlandtrychangingthetexttothis:8
Wecandothisinthreesimplesteps:
1.Setthecoloroftheh1headingsred
2.Setthefontfamilyoftheparagraphstocourier
3.Setthebackgroundcolorofthetagtoyellow
Letspracticewithsomethingabitmoreusefulnow,letsmakeabuttonwithCSS.
1.FirstaddataginyourHTML,theninyourCSSaddadivselectorwiththefollowingproperty:valuepairs:
a.height:50pxb.width:120pxc.bordercolor:#6495EDd.backgroundcolor:#BCD2EEe.borderradius:5px
2.Nowletspositionitniceinthemiddle(wellgooverpositioningabitmorelateron),addthefollowingtoyourCSS:
a.margin:autob.textalign:center
3.Timetoaddsometexttoourbutton,addalinktogotobetweenourtags(useantagifyouveforgottenhow).
Andyouredone!CSSSelectors
We'veusedanumberofHTMLelementsasCSSselectorssofar:we'vestyledtheHTMLtagswiththeCSSselectorh1,withp,andsoon.
Youmayhaveguessedthis,butifnot,we'llsayitoutright:anyHTMLelementcanbeaCSSselector!Youcanmodify,,andeventheentirebyselectingul,table,andbody,respectively.
Asyou'veseen,it'spossibletonestHTMLelementsinsideoneanother,likeso:
Sowhatifyouwanttograbsthatareinsidetwos,andnotalls?YouselectthoseintheCSStablikethis:
Practicemakesperfect,openupCSS_Practice_3.htmlandtrytodosomethingtoONLYthelastthreelinks:
Itsassimpleasusingliainsteadofjustaasourselector!
ClassesandIDs
HTMLelementscanbeCSSselectors,butaswesawwiththeuniversalselector*,they'renottheonlyselectorsavailable.
TherearetwoimportantselectorsyoucanuseinadditiontotheuniversalselectorandHTMLelements:classesandIDs.
Classesareusefulwhenyouhaveabunchofelementsthatshouldallreceivethesamestyling.Ratherthanapplyingthesamerulestoseveralselectors,youcansimplyapplythesameclasstoallthoseHTMLelements,thendefinethestylingforthatclassintheCSStab.
ClassesareassignedtoHTMLelementswiththewordclassandanequalssign,likeso:
ClassesareidentifiedinCSSwithadot(.),likeso:
Thisallowsyoutotakeelementsofdifferenttypesandgivethemthesamestyling.
IDs,ontheotherhand,aregreatforwhenyouhaveexactlyoneelementthatshouldreceiveacertainkindofstyling.
IDsareassignedtoHTMLelementswiththewordidandanequalssign:
IDsareidentifiedinCSSwithapoundsign(#):
Thisallowsyoutoapplystyletoasingleinstanceofaselector,ratherthanallinstances.
NowletsgetsomepracticewithclassesandIDs.
1.Createacoupleoftagsandfillthemwithrandommovienames.
2.Givethemoviesyouliketheclasslikedandthemoviesyoudislikedtheclassdislike.
3.ChooseyourfavouritemovieandgiveittheIDfavourite
4.GivepropertiestoallclassesandIDstomakethemdistinguishablefromoneanother.(Youhavecompletefreedom,gonuts:D)
CSSPositioning
Beforewebegintalkingaboutpositioning,letstakeastepbackandlookatanindividualHTMLelement
.
Themarginisthespacearoundtheelement.Thelargerthemargin,themorespacebetweenourelementandtheelementsaroundit.WecanadjustthemargintomoveourHTMLelementsclosertoorfartherfromeachother.
Theborderistheedgeoftheelement.It'swhatwe'vebeenmakingvisibleeverytimewesettheborderproperty.
Thepaddingisthespacingbetweenthecontentandtheborder.WecanadjustthisvaluewithCSStomovetheborderclosertoorfartherfromthecontent.
Thecontentistheactual"stuff"inthebox.Ifwe'retalkingaboutaelement,the"stuff"isthetextoftheparagraph.
NowthatweunderstandhowanHTMLelementactuallyworkswhenitcomestopositioning,wecanusetheseusefulproperties:
display,thispropertydecideshowitinteractswithotherelements,ithasthefollowingvalues
oblock:Thismakestheelementablockbox.Itwon'tletanythingsitnexttoitonthepage!Ittakesupthefullwidth
oinlineblock:Thismakestheelementablockbox,butwillallowotherelementstositnexttoitonthesameline
oinline:Thismakestheelementsitonthesamelineasanotherelement,butwithoutformattingitlikeablock.Itonlytakesupasmuchwidthasitneeds(notthewholeline)
onone:Thismakestheelementanditscontentdisappearfromthepageentirely
float,specifieswhereanelementwillfloatto(eitherleftorright,nowherebydefault).Floatingbasicallymeansdriftingtotheintendedsidewithoutoverlappingwithotherfloatingelements
clear,willimmediatelymovetheelementbelowanyfloatingelementsonthespecifiedside(canbeleft,rightorboth).
#NOTE:Thereisawaytospecifythetopbottomrightleftmargininonecodeline!Herearetheformats:
margin:(top)px,(right)px,(bottom)px,(left)pxmargin:(top)px,(rightleft)px,(bottom)pxmargin:(topbottom)px,(rightleft)pxmargin:(all)px
6.STYLES.CSSNowthatwearefamiliarwiththeDreamweaverinterfaceandarewelltrainedinthehtmlandcss,letuskickstartdesigningourwebsite!
1. DownloadthecontentsoftheimageandcssfolderfromtheDrivetoyourRootSitesimagefolderandcssfolder
2. RefreshyourFilepanel3. Openstyles.css
Tosavetime,wearegivingyouahalffinishedstyles.cssfile,butfretnot,youwillgettocodesomeCSSaswell.ScrolldowntheCodeViewofstyles.css.Tokeepeverythingorganised,stylingisdividedinto4mainparts:Global,TextElements,Container,andMisc,asisseenwithinthe/*parts*/.
1. Global:containsstylingofandwhichaffectthewholewebpageLetsstylethetagtodisplayabackgroundcolor
1. Trytypingthecodebelowunderthe/*Global*/
body{backgroundcolor:#FFF}
2. DreamweaverassistsourcodingbyprovidingCodeHints!AlistofCSSStylingisprovidedforyou.Pressdownfromyourkeyboardandchoosebackgroundcolor#TIPS:Ctrl+SpacetoshowCodeHints
3. UndertheCodeHintsfeature,Dreamweaverprovidestoolstomakecodingeasier.OnesuchtoolistheColorPickertool.ChooseColor...:
4. Voila!Youdonotneedtotype#1234anymore.Youcanevenclickonthecolorwheel
icononthecornertogenerateothercolors.
Forourwebsite,thebackgroundcolorisactuallywhite(default),butyoubebolderthanusandchooseboldercolors!
2. TextElements:containsstylingofto,,,,,andBelowisthesummaryofsomecommontextstylingpropertiesandtheirfunctions
Properties Function
fontsize Definingfontsize(preferrablyinpx)
fontfamily Fontoftextelement.eg:fontfamily:TrebuchetMS,Arial,Helvetica
Thefontunderwillbethefontofyourtexti.e.Trebuchet.Butifthebrowserusedtoopenthewebsitedoesntsupportthatfont,Arialfontwillbeusedinstead.
fontstyle Italics,bold,underline,etc.
fontweight Rangefrom100900.Usedtospecifyhowthinyourfontis(orhowbold)
lineheight Definethespacingbetweenonelinetoanother
Letsstyletomimicourendresult
Fontsize:30px Color:#595959 Lineheight:15px Fontfamily:TrebuchetMS
AnothertoolDreamweaverprovideundertheCodeHintisaFontListwhichshowsthelistofDreamweaverspresetfontfamily.Tomimicourendresult,chooseTrebuchetMSfamily.
#NOTE:YoudontHAVEtochooseoneofthepreset.Youcanmakeyourownfontfamilybyusingthistemplate:FontIlike,alternativefont,alternativefont.Infact,youcanalsochoosetonotspecifyanyalternativefont:FontIlike
Now,let'sstyle Fontsize:22px Fontfamily:GeosansLight(Lookat#NOTEabove) Color:#BDC2BC Fontweight:100
Again,thesearethestylingtoachieveoursublimeendresult,butyoucanbeascreativeasyouwant.#NOTE:CSSStylingmadeherewillbeoverriddenbystylingmadeinrespectivecontainers.3. Containers:containsIDs.Containersareofutmostimportanceastheyformthe
skeletonofawebsite.DoreferbacktotheCSSnoteswherenecessary.
Firstly,letsdefine#header.
Width:960px Height:66px Padding:17px0px
>Thiswillmakecontentsof#headertostay17pxawayfromthetopandbottomborder
Position:Fixed Top:0px Backgroundcolor:#FFF
>#headerwillbeafixedwhiteboxontopofthebrowserevenwhenscrollingdown
Now,letsdefine#topnav
Width:660px Position:Absolute Top:22px Left:300px
>#topnavwillstayabsolutelyat22pxawayfromthetopofthepageand300pxawayfromtheleftofthepage.z
Wealsowanttostylesometexttagsunder#topnav
tag
Padding:10px0 Margin:10px0 Border(topandbottom):1px,#000000,solid
andDisplay:inline,andPadding:030px
Lastly,wewanttostyle#gallerytohaveabackgroundimage.Thestepissimilartobackgroundcolor.RememberCodeHints?AnothertoolunderCodeHintsistheURLBrowser!DreamweaverprovidestheoptionforustobrowsefortheimagefileratherthantypingtheURLlink.ChooseBrowse>openimagefolder>choosegallery.jpg
#NOTE:Whatifyouwanttouseafilethatisnotwithinyourrootfolder?Trydownloadingthebg.imgintotheDownloadsfolderandBrowsetothat.Dreamweaverwillpromptyoutocopyittoyourrootimagefolder!Convenient,huh.Thetags#outer,#banner,#transbox,and#contentarealreadydefinedforyou!
4. Misc:containsClasses
Letsdefine.textframe
Width:190px Height:180px Padding:25px Margin:12px Float:Left Textalign:center
Lastly,letsdefine.imageframe
Width:20% Float:Left Padding:10px Border:1px#cccsolid Margin:10px
Wealsowanttostylesometagsunder#topnavimgtag
Height:180pxptag
Textalign:center Color:#FFF Fontfamily:"Geosanslight" Fontweight:100
#TIPS:YoumaybewonderingwhatifImdesigningthisfromscratch?HowwouldIknowthepixelsdimensionsandwhatnot?Thatstheimportanceofpreplanning.Beforeevenstartingmakingyourwebsite,designhowitsgonnalooklike.Then,divideyourdesignintocontainersandcalculatethewidthandheightofyourcontainersorclasses.
CSSStylesPanelAllthecssstylingmadeinstyles.cssassociatedwiththeelementthecursorisonwillbereflectedintheCSSStylespanel.OnselectingthetextframeID,CSSStylespanelisasshown
YoucaneditonthepropertiesstraightfromtheCSSPanel
Youcanevendelete(pressBackspace)andaddonmoreproperties!Thiswillbemoreusefulafterourhtmlpageisfinishedandyouwanttoeditandaddontoit.Soletsgetstartedwithourhtmlpage.
6.INDEX.HTMLAfterfinishingourstyles.css,wewill(finally)startmakingourbeautifulhtmlpage!LetusstartbyinitialisingDreamweaver.
1. ClickFile>New2. UnderLayout(rightcolumn),choose3. ClickFile>Saveasandsaveasindex.html4. Attopleftcorner,intheToolbar,chooseSplitView5. AlsoattheToolbar,changetheTitletoCatFantasy
#NOTEWedonotuseDreamweavertemplatesintodaysworkshopastheCodeViewofthetemplatesisheavilycommentedwhichdisruptsourCodingpractices.YoumaywanttotrymakingawebpageusingDreamweavertemplatesatyourownleisure.STEP1:INITIALISINGHTMLDreamweaverautomaticallyinsertsthebasic,andtagsthatarenormallyrequiredforinitialisinghtml.Beforeeditinganycontentin,weneedtoattachourstyles.css.Thereare2waystoachievethis,inCodeorinDesignView.CodeView:Manuallytypethecodebelowintothesection
DesignView:
1. RightclickontheCSSStylespanel,andclickAttachStyleSheet2. ClickBrowseandselectourstyles.css
3. PressOK
STEP2:INSERTCONTAINERS(DIV)Now,wewanttoinsertthecontainers(header,sidebar,etc)thatwepainstakinglywroteinstyles.css.Again,thereare2waysofdoingthis,inCodeandDesignViewCodeView:Manuallytypethecodebelowintothesection
Contentforid"header"GoesHere
#NOTE:Noticetheclosingtagforidouterisaftertheclosingtagforidheader.Thismeanstheheadercontaineriswithintheoutercontainer.Thisisimportantbecausetheidouterisdefinedtocontainourwebpagescontentsandconstrictitsdimensions.Hence,allourcontentsshouldbewithintheoutercontainer.#TRY:TryinsertingtheidtopnavwithinheaderDesignView:
1. IntheInsertpanel,clickInsertDivTag2. Thedropdownmenuwillshowallthedivtagswecreatedinstyles.css!3. Fornow,letsinserttheidouter
DreamweaververyhelpfullyaddsdottedbordersintheDesignViewtodefineourcontainers.Now,wewanttoaddtheidcontentwithintheidouter.Wecaneither:
Clickinsidethedottedbordersofouterandrepeatthestepsabove
OR
1. ClickthedropdownInsertmenu2. ChooseBeforeEndofTagandchoose3. Choosetheidcontent
DowhichevermethodyouprefertoinsertALLtheid:outer,header,topnav,banner,content,andgallerybeforeproceeding.Makesure:
topnaviswithinheader transboxiswithinbanner
STEP3:INSERTCONTENTSTOTHEAPPROPRIATECONTAINERSheaderandtopnav
1. Insertlogo.pngadjustingitswidthto200px2. Makeanunnumberedlistconsisting:Home,Gallery,Profile,About,andContact
Usintopnav3. Inserthyperlinktoanotherwebpagetitledgallery.html,profile.html,and
about.htmlanddcontactus.htmlrespectivelybanner,transbox,contentMinimiseDreamweaverandopenindex.html.docfilefromtheDriveforeasycopypasting
1. Pastethetextsfrom.docfolder2. Assigntheappropriatewrappingandformattingforthesetexts
gallery
1. Typemeetourfamilyandformatitaccordingly2. InserttheappropriateIDandinsertimagesandtextintotheID
IfthingsdontlookrightintheDesignView,youcantrylookinginLiveView
InLiveView,youareseeingtheresultthewayitlookslikeinarealbrowser.ThereisalsoanothercoolfeatureinLiveViewwhichisInspectmodewhereyoucanseethepaddings,margins,etcofyourcontainers.Tryturningtothismode.
Lastly,clickFile>PreviewinBrowser>Chrome(oryourpreferredBrowser)toseetheresultofourhardwork.(Alternatively,pressF12)IntheBrowser,youcantryclickingthehyperlinksyouhaveassignedtomakesuretheywork.Ifalliswell,thencongratulations,youhadmadeyourveryfirstwebpage!