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!