You are on page 1of 44

CONTENTPAGE

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.

These are called HTML elements.Eachelementhastags,whicharetheonesbeginningwith<


and ending with >. Each element can have an opening tag and a closing tag (the one withthe
/). 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 inthe
aboveexample).TheseattributessometimesdefinethestyleorbehaviorofthatHTMLelement.

In this workshop, we will learn some of the morecommonlyusedHTMLtags.Itisnotfeasible,


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

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>

You can set the widthandheightofthe imagebyusingthewidthandheightattributes.Note


that it is best if you just specify either the width and height of the image so that the image will
scalewhilemaintainingtheoriginalwidthheightratio.

<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!

You might also like