Dreamweaver is a visual web design program that allows users to create standards-compliant websites without extensive coding knowledge. It integrates with other design programs and web technologies. The document discusses setting up a basic page layout in Dreamweaver using CSS and HTML div tags to create sections for the header, main content, sidebar, and footer. Placeholder text is then added to each div to demonstrate the completed layout structure.
1. dw basics
dreamweaver
june 07, 2010, mumbai
M E T A L
2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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
12. dw layout:
div tags
lets’ create our first 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
13. dw layout:
div tags
from the top menu make sure the id selector type is chosen. fill in the selector
name as #wrapper if it isn't already showing. leave the rule definition box at the
bottom at its default setting of "(this document only)". click ok
M E T A L
14. dw layout:
div tags
click on the 'box' category in the left column. fill 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
15. dw layout:
div tags
in the background color box type "#000". click ok
M E T A L
16. 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 first
region (div tag) within the wrapper
M E T A L
17. 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
18. 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
19. 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
20. dw layout:
div tags
make the background color #300 and height of the box 150 px. click ok
M E T A L
21. dw layout:
div tags
click on the design view button on the top left. the deep brown box is the first
division on your page. it is 150 px high and 900 px wide and sits inside the
wrapper div)
M E T A L
22. 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
23. 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
24. 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
25. 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
26. dw layout:
div tags
make the final 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
27. 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
28. 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
29. 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
30. 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
31. 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
32. dw layout:
div tags
let’s float 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
float and in the next box choose 'right' from the options available
M E T A L
33. 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
34. 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
float the sidebar in the opposite direction - left - to make
sure it stays fixed to the left edge of the page
M E T A L
35. dw layout:
div tags
oops! now both main content and sidebar are floating. they are removed
from normal document flow. 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
36. dw layout:
div tags
the solution is to clear the floats 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 floats ahead of it and
makes it stay put
M E T A L
37. 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
38. 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
39. 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
41. dw layout:
div tags
the basic layout for our page is ready with place-holder text in place
M E T A L
42. 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
43. from a css point of view this is what we’ve done
dw layout:
div tags
M E T A L