Professional Documents
Culture Documents
1. INTRODUCTION
2. INITIALISINGDREAMWEAVER
3. DESIGNVIEW
a. TextFormatting(Paragraphing,Styling,Listing)
b. Insert(Table,Media,Hyperlinks)
4. HTML
a. Introduction
b. PageStructure
c. Tags
<h>
<p>
<b><i><u>
<ol>and<ul>
<a>
<img>
<br>
<div>and<span>
<table>
5. CSS
6. STYLES.CSS
a. Global
b. Text
c. Container
d. Misc
7. INDEX.HTML
1.INTRODUCTION
1.1IntroductiontoWebDesigningandDreamweaver
Webbrowsingusesawiderangeofprogramminglanguages.Oneofthemostusedis
html
.A
htmlfileisbasicallyafilecontaininghtmlcodeswhich,whenopenedbyabrowser(Chrome,IE,
etc),willbeinterpretedbysaidbrowsertoshowthefinishedproductabeautifulwebsite.You
canmakeahtmlfilebytypingcodesintoanytextprocessingtools,evenasimpleNotepad.
Dreamweaver
makescreatingwebsiteseasierasitfacilitatescodingprocessviamanyways.
Mostsignificantly,itprovidesa
Splitview
,whereyourwindowissplittoshowboth
Codeview
and
Designview
.
Codeview:
showsallhtmlcodesbeforeimplementedinabrowser
Designview:
showsthecompletedwebpage,likeaninbuiltbrowser
AnychangesmadeinCodeviewwillbedirectlyreflectedinDesignview.Magnificently,
DreamweaverallowsyoutoedityourwebpageinDesignviewusingvariousDreamweaver
tools,andanychangesmadeinDesignviewwillbereflectedintheCodeviewashtmlcodes
writtenbyDreamweaver.Inshort,
youcanmakeawebsiteevenwithlimitedcodingknowledge!
Thatsaid,constrictingourselvestoDesignviewisunwiseassometaskscanbeachievedmore
easilyinCodeview.Infact,sometasksareonlyachievableinCodeview.Designviewismore
usefulwhentheframeworkofyoursiteisfinishedandyouwanttoaddmorecontentsinyour
site.Hence,inthistutorial,wewillteachboththeCodeandDesignwayofwebdesigning.
Dreamweaveralsohasaveryconvenientwaytoloadyourwebsiteonline.Thiswillnotbe
explainedhereasthisworkshopismainlyforwebdesigning.Anyinformationonhowtoupload
yourwebsitecanbefoundat
http://www.dummies.com/howto/content/howtopublishyouradobedreamweavercs6website.html
1.2EndResult
Hereistheendresultthatyouwillmakeattheendofthisworkshop:
Thissimpleyetsleekwebsiteincludes:positioning,textformatting,andinsertingimages,
videos,andhyperlinks.Excited?Letsgetstartedthen.
2.INITIALISINGDREAMWEAVER
2.1Initialising
BasicSetup:
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,evenforaverysimple
website.
7.Next,rightclickontheLocalPanel,orthesitefoldercreated,andselectNewFolder.
Thiswillcreatesubfolderforyoutomanageandorganizenecessaryresources.Youmay
alsorightclickthesubfolderandcreateanothersubfolderwithin.
Task
:Create2foldersandrenamedthemas
images
css
Thesearethebasicfoldersthatalmosteverywebsitedefinitelywillhave.
#TIPS:
Alternatively,insteadofusingdreamweavertocreatefolders,youmayalsodirectly
createthematthefolderwhichislocatedatthedesktop.
However,afteryoutravelbacktoDreamweaver,theLocalPanelstillremainedthesame.The
panelisneededtobeupdatedmanuallybypressingthecirculararrowbuttonatthetopofthe
panel,thiswillrefreshthefolderlist.
#IMPORTANT:
Donotcreatenewfileormoveexistingfilearoundintherootfolder,just
dont!
CreateHTMLFiles(inrootfolder)
Tocreatehomepage,gotothemainfolderandcreateanewfile.Nameitspecificallyto
index.html.
Fortheotherpagesyouwishtoincludeinyoursite,nameitwhateveryouwant.e.g.
about.html,contact.html.
Task
:create3htmlfilesandnamethemto:
index.html
about.html
contact.html
CreateCSSFiles(incsssubfolder)
Makeanewfileatthesubfolderandnameitstyles.css.Itsnotnecessarytonameisthis
way,butthisiswhatmostofthewebsitenameitforitspurpose.
Task
:Create1cssfileinthesubfolderandnameit:
styles.css
#TIPS:
Ifyouaccidentlycreatewrongfileatthefolder,youmaydraganddropthefileintoyour
desiredlocation.
Finalnote:
Forthepurposeoftodaysworkshop,wehavepreparedafoldercontainingeverythingyoull
needintheDrive.
Downloadthecontentsinthe
images
folder(andputthemintherightfolder)
Also.downloadthe
practice
folderandputtheminyourrootfolder
2.2DreamweaverWorkplace
Dreamweaverworkplacecanbecustomisedtoonespreference.Forthepurposeoftodays
workspace,wewillbeusingthedefaultviewbyDreamweaver.Donotfeeloverwhelmedwhen
youseeunfamiliarterms.Fornow,
focuson1,2,and7
1. Tabs
:Showsallthefilesassociatedwiththecurrentwebpage(eg:styles.css)
2. Toolbar
:Onlythe2belowarerelevantforourworkshop
a. Code|Split|Design:
TogglebetweentheCode,Split,andDesignview
b. Title:
ShowsTitle(under<title>tag).TitlewillshowupasTabsname
3. PropertiesPanel
:Showsthedifferentpropertiesofwhatthecursorison
4. StatusBar
:Locatedbetweenthewebpageandpropertiespanel.Itshowsthe
i.Tagsassociatedwithwhatthecursorison
ii.Webviewingdimensionsandzooms
iii.Statusofthewebpageasawhole
5. Insert
:ConsistsofvariousinserttoolstoinsertthingsintothewebpageinDesignView
6. CSSStyles
:ShowsCSSpropertiesandrulesassociatedwithwhatthecursorison.This
panelisusedtoedit/stylethetagsshownintheStatusBar
7. FilesTab
:ShowsallthefilesinthewebsitesRootFolder
3.DESIGNVIEW
1.
2.
3.
4.
Download
Practice
folderintoyourrootsitefolder
Openthefolderandopen
designview.html
Attopleftcorner,intheToolbar,choose
DesignView
AlsointheToolbar,changethetitleto
DesignView
PARAGRAPHING
SimplyclickanywhereontheDesignViewtostarttyping.
#
TIPS
:Shiftentertomakealinebreak.
Bydefault,wewilltypeinParagraphformatinDesignmode,asisshowninthePropertiesbar
below.
Wecanchangetootherformatsbysimplyclickingonthedropdownmenu.Belowishowthe
differentformatswilllooklike.
Exercise1
TEXTSTYLINGANDALIGNING
1.
2.
3.
4.
Select/highlightanyword(s)inthetext
SimplyRightclick>Styling>Bold(orItalic,underline,etc.)
Now,highlightthewholeparagraph
Simply'Rightclick>Align>Center'(orRight,left,etc.)
Exercise2
LISTING
1.
2.
3.
4.
Select/highlightallthetext
Rightclick>Listing>OrderedList(orUnorderedList)
Tochangetheirindentation,rightclick>listing>Indent(orOutdent)
Userightclick>listing>properties
#TIPS:
Alternatively
,
wecanusethequickeditingfeaturesinthePropertiesbarasshownbelow
Exercise3
INSERT
UndertheInsertPanelontheright,therearevariousinsertingtools.Letsgothroughsomeof
them.
FINALRESULT
InsertHyperlink
1. Select/HighlightReadMore.
2. ClicktheHyperlinkbuttonintheInsertPanel
3. Eithercopypastealink(externalhyperlink)orbrowseandselectother.htmlpagein
yourwebsite(internalhyperlink)
4. Alternatively,wecanaddHyperlinkusingthePropertiesBar
InsertHorizontalRule
1. PutyourcursorinbetweentheCatsFactsandCatsMyths
2. ClicktheHorizontalRulebuttonintheInsertPanel
3. ClickonthelineandeditthelookofthehorizontallineinthePropertiesPanel
#TIPS:
Ifyouarestrugglingtoclickontheline,clickonthe<hr>tagintheCodeView
InsertTable
1. ClicktheTablebuttonintheInsertPanel
2. Modifythetablesspecstoyourpurpose
#NOTE:
TextsintheHeadercellswillbestyledasTableHeader,<th>.TypeinCUTECATS
FTWandfullygrown,youngsters,kitteninsidethetablestoseethedifference
InsertDivTag
Thisisanimportantfeature,butitwillonlybeusedlateronwhenweareactuallydesigningthe
website.Fornow,weonlyneedtoknowthatitexists.
InsertImages
1. ClicktheImagebuttonintheInsertPanel
2. Theimagecanbemovedaroundfreely.Trymovingitintothetablescell
#NOTE:
UnderthedropdownmenuforImagesthereareotheroptionswhichwewillnotbe
coveringinthisworkshop.
4.HTML
HTML (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.sg
2. Rightclickonanyblankspace/areainthewebpageandclickViewPageSource:
3. Examinethecodethatyousee.
HTMLIntroduction
To start learning HTML, you havetoknowwhatmakesupanHTMLfile.Youwouldseethings
likethisinanormalHTMLfile:
<p>...</p>
<div>...</div>
<imgsrc=photo.jpg>,etc.
HTMLPageStructure
AtypicalHTMLdocumentlookslikethis:
<!DOCTYPEHTML>
<html>
<head>
<title>Thisisthepagestitle</title>
</head>
<body>
<p>
Thisisa paragraph.Normally, everythingthatyouseeon awebpageiswrittenafterthe
openingbodytagandbeforetheclosingbodytag.
</p>
</body>
</html>
Each HTML document normally have an opening and closing <html> tag in them. Everything
between them is then rendered by the browser for you to see. <head> is the header of the
webpage. Normally, header contains information about the pages title and some styling
information (you will learn this intheCSSsectionofthe workshoplater).Thewebpagethatyou
seenormallyisallthecontentswritteninsidethe<body>tag.
HTMLTags
In this workshop, we will explore some commonly used HTML tags. We would not go togreat
details in covering HTML tags and you are expected to do some selfresearch on these HTML
tags.Usually,peoplepickthemupastheygoafterlearningthebasicsofHTML.
1.
<h>(Headings)
InHTML,youcanuseheadingtagstodefineaheadingforyourpage.Itcanbeaheadingfora
sectioninyoursite,oraheadingforyourpageitself.HTMLhas6definedheadings,eachdiffer
insize:
<h1>Thisisthelargestheading</h1>
<h2>Gettingsmaller</h2>
<h3>andsmaller</h3>
<h6>Untilthesmallestheading</h6>
<h1>isthelargestheadingsizeandgetssmallerifyouincrementthenumber.<h1>islarger
than<h2>,while<h6>isthesmallestheading.
2.
<p>(Paragraphs)
The<p>tagrepresentsaparagraphinHTML.Everytextbetweentheopening<p>tagandthe
closing</p>tagwillbedisplayedonthewebpageaccordingtothestyleyoudefineinthe<p>
tag.Onewayofdoingsoistouseattributesintheopening<p>tag.
<palign=center>Thistextwillbedisplayedinthecenter</p>
<p>Thisisanormalparagraph</p>
3.
<b>,<i>,<u>stylingandtheirequivalents.
YoumightwanttoknowhowtostyletextsinHTML.Thisishowyoudoit:
HTML
Description
Tag
<b>
Everythinginsidethe<b></b>elementwill
bedisplayin
bold
style.
<i>
Everythinginsidethe<i></i>elementwill
bedisplayedin
italic
style.
<u>
Everythinginsidethe<u></u>elementwill
be
underlined
.
<strong>
Sameas<b>butshowsimportance.
<em>
Sameas<i>butshowsimportance.
#NOTE:
no difference to the user, but it is common practicethat<strong>and<em>areused
tosignifyimportanceofthetextstyledusingthesetwoelements.
Youcancombinetwostylesatonce.
<b><i>Iambothboldanditalic.</b></i>
willdisplay
Iamboldanditalic.
4.
<ol>and<ul>
<ol>representsorderedlistwhile<ul>representsunorderedlist.Thisishowyoudobulletsand
numberingsusingHTML.
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
inside<li>and</li>,denotinglistitem.
<ol>
<li>Firstitem.</li>
<li>Seconditem.</li>
</ol>
willdisplaythisinthebrowser:
1. Firstitem.
2. Seconditem.
<ul>
<li>Firstitem.</li>
<li>Seconditem.</li>
</ul>
willdisplaythisinthebrowser:
Firstitem.
Seconditem.
Youcanchangethestyleofthebulletpointsbyaddingattributestothe<ol>or<ul>tag.This
tablebelowsummarizesthecommonlyusedattributes:
<ol>
type="1"
Default.
type="A"
Uppercaseletterswillbeusedasthebulletpoints.
type="a"
Lowercaseletterswillbeusedasthebulletpoints.
type="I"
Uppercaseromannumeralswillbeusedasthebulletpoints.
type="i"
Lowercaseromannumeralswillbeusedasthebulletpoints.
<ul>
type="circle"
Default.
type="square
willbeusedasthebulletpoints.
"
type="disc"
o willbeusedasthebulletpoints.
Toputtheseattributesintouse,wewritethefollowingHTMLcode:
<oltype=I>
<li>Firstitem.</li>
<li>Seconditem.</li>
</ol>
whichwilldisplaythisinthebrowser:
I.
Firstitem.
II.
Seconditem.
5.
<a>(Links)
You often click on a link in a webpage thattakesyoutoadifferentsectionofthatwebpageor
a completely new webpage. To do this, we use the <a> tag and specify the target of that link
using the href attribute. Everything between<a>and</a>isa linktothespecifiedURLinthe
hrefattribute.
<ahref=https://www.facebook.com>ClicktogotoFB</a>
Thiswillbeshowninthebrowser:
ClicktogotoFB
Andwhenyouclickonthatlink,youwillbetakentoFacebook.Youcanuseanythingasthe
linksuchasimages,etc.otherthanplaintext.
YoucanalsospecifywheredoyouwantFacebooktobeopenedusingthetargetattribute
summarizedbelow:
<ahref=https://www.facebook.comtarget=_blank></a>
willopenFacebookinanewtaborwindow.
<ahref=https://www.facebook.comtarget=_self></a>
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.
<img>(Images)
YoucanaddimagestoyourHTMLdocumentbyusingtheimgtag.
<imgsrc=imagelocation.jgp>
<imgsrc=imagelocation.jgpwidth=100px>
<imgsrc=imagelocation.jgpwidth=50%>
Ifyouspecifythewidthas100pxitwilldisplaytheimagewithawidthofexactly100px.If
youspecifyitasapercentage,i.e.50%,itwilltakeup50%ofthedisplayofthewebpage.
7.
<br>(BreakLine)
InHTML,textsadjusttheirlinebreaksautomaticallyaccordingtothepagewidth.Ifyouwantto
specifyanewline(justlikewhenyoupressenterinakeyboard),youusethe<br>tag.Notethat
simplytypingtextsinanewlinewouldnotdisplayitinanewlineifyoudontspecifythe<br>
tag.
<p>
HelloWorld!
WelcometoNUS!
</p>
willbedisplayedasHelloWorld!WelcometoNUS!Tostartanewline,youmustuse<br>:
<p>
HelloWorld!<br>
WelcometoNUS!
</p>
Thiswilldisplaythetwolineoftextintwoseparatelines.
8.
<div>and<span>
Div and Span means nothing. These two attributes just specify that everything that is put
between <div> and </div> or <span> and </span> are part ofthatdivorspanelement.This
is useful to apply a certain style to all the content in that div or span element and will be
usefulafteryouhavelearnedCSSlater.
9.
<table>Tables
You can create tables in HTML using <table>. By default, tables aredisplayedwithoutborders.
Todisplayatablewithborder,useattributes.
<tableborder=1></table>
willcreateatablewithaborderofthickness1.
To add rowstoyourtable,use<tr>.Toaddcolumnsinarow,use<th>foraheaderand<td>for
a normal cell. Headers will automatically put the text or element in that cell in the centerofthe
cellandboldfortextsaswell.
<tableborder=1>
<tr>
<td>HTMLTable</td>
<td>IamstudyingHTML</td>
</tr>
<tr>
<td>Startofsecondrow</td>
<td>HelloWorld!</td>
</tr>
</table>
Willdisplayatablelikethis:
HTMLTable
Iamstudying
HTML
Startofsecondrow HelloWorld!
YoucanmergerowsandcolumnsinHTMLusingrowspanandcolspan:
<tableborder=1>
<tr>
<tdcolspan=2>HTMLTable</td>
</tr>
<tr>
<tdrowspan=2>Startofsecond(andthird)row</td>
<td>HelloWorld!</td>
</tr>
<tr>
<td>BottomRightCorner</td>
</tr>
</table>
willdisplaythistable:
HTMLTable
Startofsecondand HelloWorld!
thirdrow
BottomRight
Corner
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.CSS
CSSBasics
CSS(whichstandsforCascadingStyleSheets)isalanguageusedtodescribetheappearanceand
formattingofyourHTML.AstylesheetisafilethatdescribeshowanHTMLfileshouldlook(ithasthe
extension.css).
Therearetwomainreasonsforseparatingyourform/formatting(CSS)fromyourfunctional
content/structure(HTML):
1. YoucanapplythesameformattingtoseveralHTMLelementswithoutrewritingcode(
e.g.
style="color:red":
)overandover
2. YoucanapplysimilarappearanceandformattingtoseveralHTMLpagesfromasingleCSSfile
Inthelongrun,usingCSSwillsaveyoutimeandmakeyourcodelookalotcleaner!
UsingCSS
Beforewegetstartedwiththesyntax,letsfirstlearnhowtouseit.Therearetwodifferentways
1.
WecansimplyputalltheCSScodebetween<style>and</style>tagsinyourhead.
2.
Oralternatively,youcanputitintoacompletelydifferentfile.Wejustneedtomakesureour
HTMLfilecanfindourCSSfileusinga<link>tag.
Werecommendusingthesecondmethod,asitfulfilsbothmainreasonswhyweuseCSSinthefirst
place.
CSSSyntax
ThegeneralformatforALLCSScodewilllooksomethinglikethis:
selector
isanyHTMLelement(<p>,<img>,<h1>,etc).Thisistheelementyouaretryingto
changewithyourCSS.
property
isanaspectofaselector.Thisistheaspectthatyouaretryingtochange.Forexample,
ifyouwantedtochangethesizeofthefont,youwouldusefontsize.Therearealotofthese,so
welljustteachyouthecommonlyusedonesasweproceedthroughtheworkshop.
value
isapossiblesettingforaproperty.Inthecaseoffontsize,itcouldbe32px.
Notethatyoucanhavemultipleproperty:valuepairsforasingleselector,tryoutthecodebelow:
Nowletsdoabitofpractice.OpenCSS_Practice_1.htmlandtrychangingthetexttothis:8
Wecandothisinthreesimplesteps:
1.
Setthecoloroftheh1headingsred
2.
Setthefontfamilyoftheparagraphstocourier
3.
Setthebackgroundcolorofthe<span>tagtoyellow
Letspracticewithsomethingabitmoreusefulnow,letsmakeabuttonwithCSS.
1.
Firstadda<div></div>taginyourHTML,theninyourCSSaddadivselectorwiththefollowing
property:valuepairs:
a.
height:50px
b.
width:120px
c.
bordercolor:#
6495ED
d.
backgroundcolor:#BCD2EE
e.
borderradius:5px
2.
Nowletspositionitniceinthemiddle(wellgooverpositioningabitmorelateron),addthe
followingtoyourCSS:
a.
margin:auto
b.
textalign:center
3.
Timetoaddsometexttoourbutton,addalinktogotobetweenour<div>tags(usean<ahref>
tagifyouveforgottenhow).
Andyouredone!
CSSSelectors
We'veusedanumberofHTMLelementsasCSSselectorssofar:we'vestyledtheHTMLtags
<h1></h1>
withtheCSSselectorh
1
,<
p></p>
with
p
,andsoon.
Youmayhaveguessedthis,butifnot,we'llsayitoutright:
any
HTMLelementcanbeaCSSselector!
Youcanmodify<
ul>
,<
table>
,andeventheentire
<body>
byselecting
ul
,t
able
,and
body
,respectively.
Asyou'veseen,it'spossibletonestHTMLelementsinsideoneanother,likeso:
Sowhatifyouwanttograb
<p>
sthatareinsidetwo
<div>
s,andnot
all
<p>
s?YouselectthoseintheCSS
tablikethis:
Practicemakesperfect,openupCSS_Practice_3.htmlandtrytodosomethingtoONLYthelastthree
links:
Itsassimpleasusingliainsteadofjustaasourselector!
ClassesandIDs
HTMLelementscanbeCSSselectors,butaswesawwiththeuniversalselector
*
,they'renotthe
only
selectorsavailable.
TherearetwoimportantselectorsyoucanuseinadditiontotheuniversalselectorandHTMLelements:
classesandIDs.
Classesareusefulwhenyouhaveabunchofelementsthatshouldallreceivethesamestyling.Rather
thanapplyingthesamerulestoseveralselectors,youcansimplyapplythesameclasstoallthoseHTML
elements,thendefinethestylingforthatclassintheCSStab.
ClassesareassignedtoHTMLelementswiththeword
class
andanequalssign,likeso:
ClassesareidentifiedinCSSwithadot(
.
),likeso:
Thisallowsyoutotakeelementsofdifferenttypesandgivethemthesamestyling.
IDs,ontheotherhand,aregreatforwhenyouhaveexactly
one
elementthatshouldreceiveacertainkind
ofstyling.
IDsareassignedtoHTMLelementswiththeword
id
andanequalssign:
IDsareidentifiedinCSSwithapoundsign(
#
):
Thisallowsyoutoapplystyletoasingleinstanceofaselector,ratherthan
alli
nstances.
NowletsgetsomepracticewithclassesandIDs.
1.
Createacoupleof<div></div>tagsandfillthemwithrandommovienames.
2.
Givethemoviesyouliketheclasslikedandthemoviesyoudislikedtheclassdislike.
3.
ChooseyourfavouritemovieandgiveittheIDfavourite
4.
GivepropertiestoallclassesandIDstomakethemdistinguishablefromoneanother.(Youhave
completefreedom,gonuts:D)
CSSPositioning
Beforewebegintalkingaboutpositioning,letstakeastepbackandlookatanindividualHTMLelement
.
The
margin
isthespacearoundtheelement.Thelargerthemargin,themorespacebetweenourelement
andtheelementsaroundit.WecanadjustthemargintomoveourHTMLelementsclosertoorfarther
fromeachother.
The
border
istheedgeoftheelement.It'swhatwe'vebeenmakingvisibleeverytimewesetthe
border
property.
The
padding
isthespacingbetweenthecontentandtheborder.WecanadjustthisvaluewithCSSto
movetheborderclosertoorfartherfromthecontent.
The
content
istheactual"stuff"inthebox.Ifwe'retalkingabouta
<p>
element,the"stuff"isthetextof
theparagraph.
NowthatweunderstandhowanHTMLelementactuallyworkswhenitcomestopositioning,wecanuse
theseusefulproperties:
display
,thispropertydecideshowitinteractswithotherelements,ithasthefollowingvalues
o
block
:Thismakestheelementablockbox.Itwon'tletanythingsitnexttoitonthepage!
Ittakesupthefullwidth
o
inlineblock
:Thismakestheelementablockbox,butwillallowotherelementstositnext
toitonthesameline
o
inline
:Thismakestheelementsitonthesamelineasanotherelement,butwithout
formattingitlikeablock.Itonlytakesupasmuchwidthasitneeds(notthewholeline)
o
none
:Thismakestheelementanditscontentdisappearfromthepageentirely
float
,specifieswhereanelementwillfloatto(eitherleftorright,nowherebydefault).Floating
basicallymeansdriftingtotheintendedsidewithoutoverlappingwithotherfloatingelements
clear
,willimmediatelymovetheelementbelowanyfloatingelementsonthespecifiedside(can
beleft,rightorboth).
#NOTE:
Thereisawaytospecifythetopbottomrightleftmargininonecodeline!Herearethe
formats:
margin:(top)px,(right)px,(bottom)px,(left)px
margin:(top)px,(rightleft)px,(bottom)px
margin:(topbottom)px,(rightleft)px
margin:(all)px
6.STYLES.CSS
NowthatwearefamiliarwiththeDreamweaverinterfaceandarewelltrainedinthehtmland
css,letuskickstartdesigningourwebsite!
1. Downloadthecontentsofthe
image
and
css
folderfromtheDrivetoyourRootSites
image
folderand
css
folder
2. RefreshyourFilepanel
3. Open
styles.css
Tosavetime,wearegivingyouahalffinishedstyles.cssfile,butfretnot,youwillgettocode
someCSSaswell.ScrolldowntheCodeViewofstyles.css.Tokeepeverythingorganised,
stylingisdividedinto4mainparts:
Global,TextElements,Container,
and
Misc
,asisseen
withinthe/*parts*/.
1. Global:containsstylingof<html>and<body>whichaffectthewholewebpage
Letsstylethe
<body>
tagtodisplayabackgroundcolor
1. Trytypingthecodebelowunderthe/*Global*/
body{backgroundcolor:#FFF}
2. Dreamweaverassistsourcodingbyproviding
CodeHints
!AlistofCSSStylingis
providedforyou.Pressdownfromyourkeyboardandchoose
backgroundcolor
#TIPS:
Ctrl+SpacetoshowCodeHints
3. Underthe
CodeHints
feature,Dreamweaverprovidestoolstomakecodingeasier.One
suchtoolistheColorPickertool.ChooseColor...:
4. Voila!Youdonotneedtotype#1234anymore.Youcanevenclickonthecolorwheel
icononthecornertogenerateothercolors.
Forourwebsite,thebackgroundcolorisactuallywhite(default),butyoubebolderthanusand
chooseboldercolors!
2. TextElements:containsstylingof<h1>to<h6>,<a>,<ul>,<ol>,<li>,and<p>
Belowisthesummaryofsomecommontextstylingpropertiesandtheirfunctions
Properties
Function
fontsize
Definingfontsize(preferrablyinpx)
fontfamily
Fontoftextelement.eg:
fontfamily:TrebuchetMS,Arial,Helvetica
Thefontunderwillbethefontofyourtexti.e.Trebuchet.Butifthe
browserusedtoopenthewebsitedoesntsupportthatfont,Arialfontwillbe
usedinstead.
fontstyle
Italics,bold,underline,etc.
fontweight
Rangefrom100900.Usedtospecifyhowthinyourfontis(orhowbold)
lineheight
Definethespacingbetweenonelinetoanother
Letsstyle
<h1>
tomimicourendresult
Fontsize:30px
Color:#595959
Lineheight:15px
Fontfamily:TrebuchetMS
AnothertoolDreamweaverprovideunderthe
CodeHint
isa
FontList
whichshowsthelistof
Dreamweaverspresetfontfamily.Tomimicourendresult,chooseTrebuchetMSfamily.
#NOTE:
YoudontHAVEtochooseoneofthepreset.Youcanmakeyourownfontfamilybyusing
thistemplate:
FontIlike,alternativefont,alternativefont.
Infact,youcanalsochoosetonot
specifyanyalternativefont:
FontIlike
Now,let'sstyle
<h2>
Fontsize:22px
Fontfamily:GeosansLight
(Lookat#NOTEabove)
Color:#BDC2BC
Fontweight:100
Again,thesearethestylingtoachieveoursublimeendresult,butyoucanbeascreativeasyou
want.
#NOTE:
CSSStylingmadeherewillbeoverriddenbystylingmadeinrespectivecontainers.
3. Containers:containsIDs.Containersareof
utmostimportance
astheyformthe
skeletonofawebsite.DoreferbacktotheCSSnoteswherenecessary.
Firstly,letsdefine
#header.
Width:960px
Height:66px
Padding:17px0px
>Thiswillmake
contents
of
#header
tostay17pxawayfromthetopandbottomborder
Position:Fixed
Top:0px
Backgroundcolor:#FFF
>
#header
willbeafixedwhiteboxontopofthebrowserevenwhenscrollingdown
Now,letsdefine
#topnav
Width:660px
Position:Absolute
Top:22px
Left:300px
>
#topnav
willstayabsolutelyat22pxawayfromthetopofthepageand300pxaway
fromtheleftofthepage.z
Wealsowanttostylesometexttagsunder
#topnav
<ul>tag
Padding:10px0
Margin:10px0
Border(topandbottom):1px,#000000,solid
<ul>and<li>
Display:inline
<ul>,<li>and<a>
Padding:030px
Lastly,wewanttostyle
#gallery
tohaveabackgroundimage.
Thestepissimilartobackgroundcolor.Remember
CodeHints
?Anothertoolunder
Code
Hints
isthe
URLBrowser
!Dreamweaverprovidestheoptionforustobrowsefortheimagefile
ratherthantypingtheURLlink.ChooseBrowse>openimagefolder>choosegallery.jpg
#NOTE:
Whatifyouwanttouseafilethatisnotwithinyourrootfolder?Trydownloadingthe
bg.imgintotheDownloadsfolderandBrowsetothat.Dreamweaverwillpromptyoutocopyit
toyourrootimagefolder!Convenient,huh.
Thetags
#outer
,
#banner,#transbox,and#content
arealreadydefinedforyou!
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
#topnav
imgtag
Height:180px
ptag
Textalign:center
Color:#FFF
Fontfamily:"Geosanslight"
Fontweight:100
#TIPS:
YoumaybewonderingwhatifImdesigningthisfromscratch?HowwouldIknowthe
pixelsdimensionsandwhatnot?Thatstheimportanceofpreplanning.Beforeevenstarting
makingyourwebsite,designhowitsgonnalooklike.Then,divideyourdesignintocontainers
andcalculatethewidthandheightofyourcontainersorclasses.
CSSStylesPanel
Allthecssstylingmadeinstyles.cssassociatedwiththeelementthecursorisonwillbe
reflectedintheCSSStylespanel.OnselectingthetextframeID,CSSStylespanelisasshown
YoucaneditonthepropertiesstraightfromtheCSSPanel
Youcanevendelete(pressBackspace)andaddonmoreproperties!Thiswillbemoreuseful
afterourhtmlpageisfinishedandyouwanttoeditandaddontoit.Soletsgetstartedwithour
htmlpage.
6.INDEX.HTML
Afterfinishingourstyles.css,wewill(finally)startmakingourbeautifulhtmlpage!Letusstart
byinitialisingDreamweaver.
1. Click
File>New
2. Under
Layout
(rightcolumn),choose
<none>
3. Click
File>Saveas
andsaveas
index.html
4. Attopleftcorner,intheToolbar,choose
SplitView
5. AlsoattheToolbar,changetheTitleto
CatFantasy
#NOTE
WedonotuseDreamweavertemplatesintodaysworkshopastheCodeViewofthe
templatesisheavilycommentedwhichdisruptsourCodingpractices.Youmaywanttotry
makingawebpageusingDreamweavertemplatesatyourownleisure.
STEP1:INITIALISINGHTML
Dreamweaverautomaticallyinsertsthebasic<html>,<head>and<body>tagsthatarenormally
requiredforinitialisinghtml.Beforeeditinganycontentin<body>,weneedto
attachour
styles.css
.Thereare2waystoachievethis,inCodeorinDesignView.
CodeView
:Manuallytypethecodebelowintothe<head>section
<linkhref="css/styles.css"rel="stylesheet"type="text/css"/>
DesignView:
1. RightclickontheCSSStylespanel,andclickAttachStyleSheet
2. ClickBrowseandselectourstyles.css
3. PressOK
STEP2:INSERTCONTAINERS(DIV)
Now,wewanttoinsertthecontainers(header,sidebar,etc)thatwepainstakinglywrotein
styles.css.Again,thereare2waysofdoingthis,inCodeandDesignView
CodeView
:Manuallytypethecodebelowintothe<body>section
<divid="outer">
<divid="header">Contentforid"header"GoesHere</div>
</div>
#NOTE:
Noticetheclosingtagforidouterisaftertheclosingtagforidheader.This
meanstheheadercontaineriswithintheoutercontainer.Thisisimportantbecausetheid
outerisdefinedtocontainourwebpagescontentsandconstrictitsdimensions.Hence,allour
contentsshouldbewithintheoutercontainer.
#TRY:
Tryinsertingtheidtopnavwithinheader
DesignView
:
1. IntheInsertpanel,click
InsertDivTag
2. Thedropdownmenuwillshow
allthedivtagswecreatedinstyles.css!
3. Fornow,letsinserttheidouter
DreamweaververyhelpfullyaddsdottedbordersintheDesignViewtodefineourcontainers.
Now,wewanttoaddtheidcontentwithintheidouter.
Wecaneither:
Clickinsidethedottedbordersofouterandrepeatthestepsabove
OR
1. ClickthedropdownInsertmenu
2. ChooseBeforeEndofTagandchoose<divid=outer>
3. Choosetheidcontent
DowhichevermethodyouprefertoinsertALLtheid:outer,header,topnav,banner,
content,andgallerybeforeproceeding.Makesure:
topnaviswithinheader
transboxiswithinbanner
STEP3:INSERTCONTENTSTOTHEAPPROPRIATECONTAINERS
headerandtopnav
1. Insertlogo.pngadjustingitswidthto200px
2. Makeanunnumberedlistconsisting:Home,Gallery,Profile,About,andContact
Usintopnav
3. Inserthyperlinktoanotherwebpagetitledgallery.html,profile.html,and
about.htmlanddcontactus.htmlrespectively
banner,transbox,content
MinimiseDreamweaverandopenindex.html.docfilefromtheDriveforeasycopypasting
1. Pastethetextsfrom.docfolder
2. Assigntheappropriatewrappingandformattingforthesetexts
gallery
1. Typemeetourfamilyandformatitaccordingly
2. InserttheappropriateIDandinsertimagesandtextintotheID
IfthingsdontlookrightintheDesignView,youcantrylookinginLiveView
InLiveView,youareseeingtheresultthewayitlookslikeinarealbrowser.Thereisalso
anothercoolfeatureinLiveViewwhichisInspectmodewhereyoucanseethepaddings,
margins,etcofyourcontainers.Tryturningtothismode.
Lastly,clickFile>PreviewinBrowser>Chrome(oryourpreferredBrowser)toseetheresult
ofourhardwork.(Alternatively,pressF12)IntheBrowser,youcantryclickingthehyperlinks
youhaveassignedtomakesuretheywork.
Ifalliswell,thencongratulations,youhadmadeyourveryfirstwebpage!