Let's build a website with Dreamweaver - II

1,294 views

Published on

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

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

No Downloads
Views
Total views
1,294
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
65
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide




















































































  • Let's build a website with Dreamweaver - II

    1. 1. text in dreamweaver june 14, 2010, mumbai M E T A L S C H O O L
    2. 2. dw text: structuring let's import some text. place the cursor in the main content box in the design view. check in code view that the cursor is just to the right of <div id="mainContent">. M E T A L paste copy from about.txt in the metal school folder S C H O O L
    3. 3. dw text: structuring the text is unstructured. code view shows just paras. if this copy had been pasted from a word document (only pc, not mac), then the original formatting M E T A L details will all be there - different headings, italics, bold, etc. S C H O O L
    4. 4. all content in html must be tagged there are two types of structural elements in html: dw text: - block level structuring occupy their own line in normal flow h1, h2, h3, h4, h5, h6, p, ul, ol, div tags - inline level occur within block level strong tag, emphasis tag, image tag, span tag M E T A L S C H O O L
    5. 5. all content in html must be tagged there are two types of structural elements in html: dw text: - block level structuring occupy their own line in normal flow h1, h2, h3, h4, h5, h6, p, ul, ol, div tags - inline level occur within block level strong tag, emphasis tag, image tag, span tag M E T A L S C H O O L
    6. 6. all content in html must be tagged there are two types of structural elements in html: dw text: - block level structuring occupy their own line in normal flow h1, h2, h3, h4, h5, h6, p, ul, ol, div tags - inline level occur within block level strong tag, emphasis tag, image tag, span tag M E T A L S C H O O L
    7. 7. dw text: structuring let's tag h1. in design view place cursor in the headline 'alternative rockers kastadyne'. in the properties box below, with html button depressed, click M E T A L on the format dropdown menu. select 'heading 1' S C H O O L
    8. 8. dw text: structuring go to split view. look for the h1 line. see the tags have changed. it is no longer <p> </p> M E T A L S C H O O L
    9. 9. dw text: structuring tag the h2's. mark the headings 'who is kastadyne', 'the debut album', M E T A L and 'band members' using the properties box as h2 S C H O O L
    10. 10. dw text: structuring tag the h3's. these are under the first h2 - 'members' and 'a studio band' M E T A L S C H O O L
    11. 11. dw text: now for the lists. there are 3 kinds of lists: ordered, structuring unordered and definition M E T A L S C H O O L
    12. 12. unordered lists tags for an unordered list are like this dw text: <ul> structuring <li> </li> <li> </li> <li> </li> <li> </li> </ul> M E T A L S C H O O L
    13. 13. dw text: structuring choose the 4 names under 'band members'. click on 'bullets' button in the properties box below. with the cursor inside the list M E T A L somewhere, switch to code view and check out the code for this S C H O O L
    14. 14. ordered lists tags for an ordered list are like this dw text: <ol> structuring <li> </li> <li> </li> <li> </li> <li> </li> </ol> M E T A L S C H O O L
    15. 15. dw text: structuring open file '1 ordered list.html' in dreamweaver. in design view, choose all the songs under 'track list'. click on the 'number bullets' in the properties box M E T A L S C H O O L
    16. 16. dw text: structuring click somewhere in the songs list. in the properties box you will now see an activated button 'list items…' that was previously greyed out. look under the bullet items. click that button. you have a choice of numbered bullets. choose '1,2…' . check out M E T A L the code view to see how it changes the <ol> tag S C H O O L
    17. 17. in the code you will see: <ol type="1"> <li> </li> <li> </li> dw text: structuring <li> </li> </ol> the extended first line syntax space gives more info about the tag. we've seen it before when the div tags gave info about their ids - e.g. <div id="wrapper"> M E T A L S C H O O L
    18. 18. definition lists definition lists, not as commonly used, are used like this <dl> <dt> </dt> <dd></dd> dw text: structuring <dt> </dt> <dd></dd> <dt> </dt> <dd></dd> </dl> M E T A L S C H O O L
    19. 19. dw text: structuring open '2 definition list.html' in dreamweaver. the faq's are a good example of term and definition. select the question-answer pairs in the 'questions' section. choose format menu > list > definition list. M E T A L check the code in code view S C H O O L
    20. 20. styling in css M E T A L S C H O O L
    21. 21. what is css? now that we have some text on the page, we can think about css styling how to style it. css is basically a document that defines formatting attributes. a style sheet is a collection of these attributes which applies to a page or the whole web site M E T A L S C H O O L
    22. 22. css can be: - external - embedded (within a web page) css styling - inline by putting all the css info into one external file and linking all your web pages to that style sheet is the way sites are constructed today M E T A L S C H O O L
    23. 23. the css syntax selector and declaration, property and value within css styling h1 {font-family: Arial; font-size:1.4em; color: #F00:} dw does a great job of creating such code for you. but having a working knowledge of the syntax helps trouble-shoot M E T A L S C H O O L
    24. 24. css rules applied through 4 kinds of selectors: css styling - tag - class - id - compound M E T A L S C H O O L
    25. 25. tag selectors css styling basically html tags. all browsers understand them and have default values for most of them. css can style all html tags on a web site from one document, often named main.css M E T A L S C H O O L
    26. 26. css styling: general let's start css styling with the overarching <body> tag. double-click 'body' in the css pane. select georgia… font-family, 100% font size (setting browsers to their default size) and font-color: #333 (grey). M E T A L also reset browser default margins to zero S C H O O L
    27. 27. css styling: general in one swoop, the page's type goes grey and font becomes georgia M E T A L S C H O O L
    28. 28. css styling: general another reset requirement. create new css rule and choose compound selector. type in the html tags shown above separated by commas. click ok M E T A L S C H O O L
    29. 29. css styling: general make padding and margin all round zero M E T A L S C H O O L
    30. 30. css styling: general now for our main content region. double-click #mainContent in the css panel. reduce the width to 580 px. padding right and left each M E T A L 15px. click ok S C H O O L
    31. 31. css styling: general main content with left and right padding of 15px each M E T A L S C H O O L
    32. 32. css styling: text now to html tags. click on new css rule icon at the bottom of css properties panel. choose tag selector in the top menu. type in h1 in the second menu (or choose h1 from dropdown list). leave third menu in the default (this document only). click ok M E T A L S C H O O L
    33. 33. css styling: text we want the h1 to be non-serif. choose font-size and color as above. font-weight is explicitly set to normal because browsers use bold for M E T A L their h1 tags automatically and we don't want that for our h1 S C H O O L
    34. 34. css styling: text css rule for h2. font-size: 0.8em; line-height: 1.8; font-weight: bold; font- M E T A L variation: small-caps; color: #066; margin-top: 15px S C H O O L
    35. 35. css styling: text css rule for h2. a thin dotted border of color: #999 (grey) M E T A L S C H O O L
    36. 36. css styling: text css rule for h3. font-family: verdana...; font-size: 1em; font-weight: M E T A L normal; font-variant: small-caps; color: #030. margin-top: 15px; margin- S C H O O L bottom: -5px
    37. 37. css styling: text css rule for p tag. 'em' is a relative measure used prominently in web design. line-height measures the vertical height between the baselines of a word and a word in the line above it. in print this is about 1.4 times the font size. in web it tends to be 1.6 or above M E T A L S C H O O L
    38. 38. using class selectors css styling: very much like an html tag selector except these are not pre- text determined. instead you create your own. like id selectors - except id selectors can be used only once in a page. class selectors can be used multiple times M E T A L S C H O O L
    39. 39. css styling: text creating a class selector requires 2 steps. one, you click on the new css rule icon as before and choose class selector and give it M E T A L a name like .songName. click ok. choose the properties as above S C H O O L
    40. 40. css styling: text step two. you choose the the song name 'victim of my anger' in the copy and apply the class selector by choosing it from the class section of the M E T A L properties (html) panel below S C H O O L
    41. 41. css styling: text final values of h3, h3 and ul tags M E T A L S C H O O L
    42. 42. css styling: text the final view of the main content region in safari M E T A L S C H O O L

    ×