Professional Documents
Culture Documents
Before we start
Dreamweaver (DW) may take several minutes to
start.
Click on Start => Program Files => Development
Apps => Web => Dreamweaver MX =>
Dreamweaver MX to start the program.
Accept default choice for layout.
Minimizing the Dreamweaver. We will use it later.
Copy Everything from my public folder (including
this ppt file) to your P:\ drive.
U:\msu\user\n\a\nanzhang\public
HTML File Structure
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>My home page</TITLE>
</HEAD>
<BODY>
My name is your name.
My major is your major.
</BODY>
</HTML>
Making paragraphs
<HTML>
<HEAD>
<TITLE>My home page</TITLE>
</HEAD>
<BODY>
<p> My name is your name.</p>
<p> My major is your major. </p>
</BODY>
</HTML>
Adding Information to Web Page
<H1> </H1>
…
<H6> </H6> are headlines with different
sizes.
Formatting Your Web Page with more
tags
H1 Underline & Italic
My name is your name
Italic
H2 My major is your major
Make this a
My name is your name link to the
LBS Home
My major is your major page
body {
font-family : Courier New;
background-color : #FFEEDD;
color : #777733;
}
Separation of Content and
Presentation
Content
Usetags like <h1>, <h2>, <p>, <em> or
<li> to indicate the structure of your pages
Presentation
Use a CSS style sheet to determine how the
tags are formatted
Advantage of separation
Changing the formatting only requires editing
the style sheet
Edit styles in Dreamweaver
In the Design->CSS Styles
window you can edit the
styles you already have, or
create new styles.
Let’s create a new style for
the link HTML tag: <a>
</a>
High light the CSS file first
Click here
Change the style of HTML Link Tag
a:link – Customizes the style of a link that has not been
visited recently
a:visited -- Customizes the style of a link that has been
recently visited
a:hover -- Customizes the style of a link while the user’s
mouse is over it.
Extra material
Downloading the Macromedia
Dreamweaver tutorial file from the lecture
notes page.