The document provides instructions for structuring and styling unformatted text in Dreamweaver. It describes how to add HTML tags like <h1>, <p>, <ul>, and <ol> to structure the content. It then explains how to use CSS to style the tagged elements by creating rules for tags, classes, and IDs. Styles are applied for general page elements, text elements like headings and paragraphs, and lists. The final result is a styled web page with the main content region formatted.

1. text in dreamweaver
june 14, 2010, mumbai
M E T A L
S C H O O L

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. styling in css
M E T A L
S C H O O L

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. 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. 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. 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. 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. 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. 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. 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. css styling:
general
make padding and margin all round zero
M E T A L
S C H O O L

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. css styling:
text
final values of h3, h3 and ul tags
M E T A L
S C H O O L

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