Let's build a website with Dreamweaver I

dw basics
dreamweaver
june 07, 2010, mumbai

M E T A L

what is dreamweaver?

design, develop and deploy websites

a visual based workflow that allows designers to create
dw basics standards-compliant fully css driven web sites without
generating lot of code

integration with photoshop and fireworks and flash

integration with other web technologies - php, coldfusion,
javascript, etc.

M E T A L

learning web design

you have to start with 2 things:

dw basics - understand basic html
- understand css fundamentals

as we learn dreamweaver, take the time to learn the
syntax of html and css with the code it generates

M E T A L

a typical html page is basically head + body tags

<html>

<head> (distinct from 'header')

<title>your title tag goes here</title>

html basics </head>

<body>

<YOUR CONTENT GOES HERE>

</body>

</html>

M E T A L

iweb is about <body> </body> tags

<body>

html basics <YOUR CONTENT GOES HERE>

</body>

so you have no control over <head> </head> which not only
has title tags but also meta tags, javascripts and css

M E T A L

dreamweaver is about the whole thing

<html>

<head> (distinct from 'header')

<title>your title tag goes here</title>

</head>

html basics <body>

<YOUR CONTENT GOES HERE>

</body>

</html>

so total control over every aspect of web design
direct control over css, javascript and other technologies

M E T A L

dw for layout

click on 'split view' button on top left and even with nothing typed in, the
code box on the left already has preliminary code in it. and the cursor is
blinking between the <body></body> tags awaiting your instructions

M E T A L

dw layout:
div tags

from the layout point of view, what matters is the div tag
syntax: <div></div> choose from insert menu > layout objects > div tag. in the
box make sure 'at insertion point' is showing. ignore the class box and tab to
the id box. type in 'wrapper'. click ok

M E T A L

dw layout:
div tags

the div region is the long dotted-line enlosed box. in the code view, carefully
select the placeholder text and delete (not the tag)

M E T A L

dw layout:
div tags

lets’ create our ﬁrst css rule for the wrapper. click in the box. make sure in the
code view that the cursor is blinking within the <div> </div> tags. click on the
tiny paper with a plus sign at the bottom of the css panel
M E T A L

dw layout:
div tags

from the top menu make sure the id selector type is chosen. ﬁll in the selector
name as #wrapper if it isn't already showing. leave the rule deﬁnition box at the
bottom at its default setting of "(this document only)". click ok
M E T A L

dw layout:
div tags

click on the 'box' category in the left column. ﬁll in the width
as 900 pixels. uncheck the ‘same for all’ box in the margin
column and enter 'auto' in the right and left boxes. now click
on the background category in the left column
M E T A L

dw layout:
div tags

in the background color box type "#000". click ok

M E T A L

dw layout:
div tags

the piddly thin, long, black box in the design view is the wrapper that will contain
the whole page and all its content! make sure the cursor in the code view is
blinking between the <div id="wrapper"> and </div> tags. we will create our ﬁrst
region (div tag) within the wrapper
M E T A L

dw layout:
div tags

create div tag as before - from the insert menu > layout objects >
div tag. give the id name of the tag as 'header'. click ok
M E T A L

dw layout:
div tags

in the code view select the placeholder text within the <div id="header"> and
</div> tags and delele that text (not the tags!)
M E T A L

dw layout:
div tags

click the new css rule icon (paper with plus sign) as before. choose the id
tag selector in the top menu and type in '#header' in the second menu as
the selector name. click ok
M E T A L

dw layout:
div tags

make the background color #300 and height of the box 150 px. click ok

M E T A L

dw layout:
div tags

click on the design view button on the top left. the deep brown box is the ﬁrst
division on your page. it is 150 px high and 900 px wide and sits inside the
wrapper div)
M E T A L

dw layout:
div tags

the main content div comes after the header div not within it. so make sure the
cursor in code view is blinking at the end of the header div tags, not between
them - see pic. create a new div called mainContent as before

M E T A L

dw layout:
div tags

for the main content give it a background color of #e2e2e2 (light grey) and
height of 800 px
M E T A L

dw layout:
div tags

the header div (dark brown) and the main content div (light grey) are now
both within the wrapper div
M E T A L

dw layout:
div tags

in similar fashion create another div after the main content div. give it the id
of sidebar and give the id selector the name of '#sidebar'. make the
background color #ff6 and height 800 px
M E T A L

dw layout:
div tags

make the ﬁnal div after the sidebar div. give it the id of footer and the id
selector name of #footer. make the background color #033 and height 50 px

M E T A L

dw layout:
div tags

all divs done but - doesn't look right! just bands of divs one below the other.
shouldn't a sidebar be on the side, for instance?

M E T A L

dw layout:
div tags

let’s make the main content region less wide. go to the css panel and select
#mainContent. in the properties panel below click on 'add property' and
enter 'width' in the box; tab to the next box and enter '600px'. enter
M E T A L

dw layout:
div tags

the main content box (grey box) is now less wide. and the wrapper's color is
showing through beside it (black)

M E T A L

dw layout:
div tags

let’s make the sidebar also less wide. go to the css panel and choose
#sidebar. add property as before and make the width of the sidebar 300px

M E T A L

dw layout:
div tags

even though both divs have been made thinner, they are still one below the
other, not side by side. more black of the wrapper is now showing through

M E T A L

dw layout:
div tags

let’s ﬂoat the main content box to the right. in the css panel choose
#mainContent once more. click on ‘add property’ in the panel below. type in
ﬂoat and in the next box choose 'right' from the options available
M E T A L

dw layout:
div tags

bingo! the float property takes the floated element out of the document flow.
which means the yellow box doesn't ‘see' the grey box any more and moves
in next to the brown box. but… we aren't done yet
M E T A L

dw layout:
div tags

using the css panel make the sidebar smaller to 280 px to
allow for a gutter between it and the main content box. also
ﬂoat the sidebar in the opposite direction - left - to make
sure it stays ﬁxed to the left edge of the page
M E T A L

dw layout:
div tags

oops! now both main content and sidebar are ﬂoating. they are removed
from normal document ﬂow. so the footer (teal color) doesn't 'see' them any
more and moves up next to the brown header box! not what we want…

M E T A L

dw layout:
div tags

the solution is to clear the ﬂoats for the footer. in the css panel, select
#footer and add property by typing in 'clear' and tabbing to 'both'. this
clears for the footer box both the left and right ﬂoats ahead of it and
makes it stay put
M E T A L

dw layout:
div tags

this is the correct layout. the black showing through is the wrapper div's
color marking the gutter, which is proper

M E T A L

dw layout:
div tags

...and at the bottom of the page, the footer's in place once again. the layout
for the page is ready!

M E T A L

dw layout:
div tags

place-holder text: in code view, put the cursor between the <div
id="header"> and </div> tags and type in 'this is the header region'

M E T A L

dw layout:
div tags

similarly for all the remaining regions

M E T A L

dw layout:
div tags

the basic layout for our page is ready with place-holder text in place
M E T A L

from an html point of view this is what we’ve done

<body>

<div id="wrapper">

<div id="header">this is the header region</div>
dw layout:
div tags <div id="mainContent">this is the main content region</div>

<div id="sidebar">this is the sidebar region</div>

<div id="footer">this is the footer region</div>

</div>

</body>

M E T A L

from a css point of view this is what we’ve done

dw layout:
div tags

M E T A L

Let's build a website with Dreamweaver I

Recommended

Recommended

More Related Content

Similar to Let's build a website with Dreamweaver I

Similar to Let's build a website with Dreamweaver I (20)

Recently uploaded

Recently uploaded (20)

Let's build a website with Dreamweaver I

Editor's Notes