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 desi...
learning web design

            you have to start with 2 things:

dw basics   - understand basic html
            - under...
a typical html page is basically head + body tags

               <html>

               	   <head> (distinct from 'header...
a typical html page is basically head + body tags

               <html>

               	   <head> (distinct from 'header...
a typical html page is basically head + body tags

               <html>

               	   <head> (distinct from 'header...
iweb is about <body> </body> tags


               	   <body>
               	   	
 html basics          <YOUR CONTENT GOE...
dreamweaver is about the whole thing

               <html>

               	    <head> (distinct from 'header')

        ...
dw for layout




                click on 'split view' button on top left and even with nothing typed in, the
           ...
dw layout:
div tags




             from the layout point of view, what matters is the div tag
             syntax: <div>...
dw layout:
div tags




             the div region is the long dotted-line enlosed box. in the code view, carefully
     ...
dw layout:
div tags




             lets’ create our first css rule for the wrapper. click in the box. make sure in the
  ...
dw layout:
div tags




             from the top menu make sure the id selector type is chosen. fill in the selector
     ...
dw layout:
div tags




             click on the 'box' category in the left column. fill in the width
             as 900 ...
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
...
dw layout:
div tags




             create div tag as before - from the insert menu > layout objects >
             div t...
dw layout:
div tags




             in the code view select the placeholder text within the <div id="header"> and
       ...
dw layout:
div tags




             click the new css rule icon (paper with plus sign) as before. choose the id
         ...
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 first
     ...
dw layout:
div tags




             the main content div comes after the header div not within it. so make sure the
     ...
dw layout:
div tags




             for the main content give it a background color of #e2e2e2 (light grey) and
         ...
dw layout:
div tags




             the header div (dark brown) and the main content div (light grey) are now
           ...
dw layout:
div tags




             in similar fashion create another div after the main content div. give it the id
    ...
dw layout:
div tags




             make the final div after the sidebar div. give it the id of footer and the id
        ...
dw layout:
div tags




             all divs done but - doesn't look right! just bands of divs one below the other.
     ...
dw layout:
div tags




             let’s make the main content region less wide. go to the css panel and select
        ...
dw layout:
div tags




             the main content box (grey box) is now less wide. and the wrapper's color is
        ...
dw layout:
div tags




             let’s make the sidebar also less wide. go to the css panel and choose
             #s...
dw layout:
div tags




             even though both divs have been made thinner, they are still one below the
          ...
dw layout:
div tags




             let’s float the main content box to the right. in the css panel choose
             #m...
dw layout:
div tags




             bingo! the float property takes the floated element out of the document flow.
          ...
dw layout:
div tags




             using the css panel make the sidebar smaller to 280 px to
             allow for a gu...
dw layout:
div tags




             oops! now both main content and sidebar are floating. they are removed
             fr...
dw layout:
div tags




             the solution is to clear the floats for the footer. in the css panel, select
         ...
dw layout:
div tags




             this is the correct layout. the black showing through is the wrapper div's
          ...
dw layout:
div tags




             ...and at the bottom of the page, the footer's in place once again. the layout
      ...
dw layout:
div tags




             place-holder text: in code view, put the cursor between the <div
             id="hea...
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">

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




dw layout:
div tags




M E T A L
Upcoming SlideShare
Loading in...5
×

Let's build a website with Dreamweaver I

859

Published on

Dreamweaver CS5 is used here to construct a fully working website over 5 sessions of a walk-through tutorial

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
859
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
62
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide






















































































  • Transcript of "Let's build a website with Dreamweaver I"

    1. 1. dw basics dreamweaver june 07, 2010, mumbai M E T A L
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. dw layout: div tags in the background color box type "#000". click ok M E T A L
    16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
    40. 40. dw layout: div tags similarly for all the remaining regions M E T A L
    41. 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. 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. 43. from a css point of view this is what we’ve done dw layout: div tags M E T A L
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×