Css Founder - Com - Cssfounder Se

Css Founder| Cssfounder Se
http://cssfounder.com
HTML Basics and CSS style
Css Founder.com
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
Css Founder.com
HTML File Structure

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Css
Founder.com
Open a Notepad window. Copy the HTML tags to the Notepad.
Web Page Development Cycle
EDIT and SAVE the file in your AFS

p:\web\index.html
TEST by BROWSING to the page

http://www.msu.edu/~msunetid/index.html
Css Founder.com
Adding Text to Your HTML File

<HTML>
<HEAD>
<TITLE>My home page</TITLE>
</HEAD>
<BODY>
My name is your name.
My major is your major.
</BODY>
</HTML>
Css Founder.com
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>
Css Founder.com
Adding Information to Web Page

My name is your name
My major is your major
I am creating this page for LBS 126 and will be
modifying this page throughout the course.
Please visit again!
Css Founder.com
More HTML tag pairs

<u> </u> tag pair is for underline
<em> </em> tag pair is for italic style.
<H1> </H1>
<H6> </H6> are headlines with different

sizes.
Css Founder.com
Formatting Your Web Page with more

tags
H1
Underline & Italic

Italic
H2

I am creating this page for CSE 101 and
will be modifying this page throughout
the course.
Separate
Paragraph
Please visit again!
Css Founder.com
Underline
Separate
Paragraph
Now it is time to use Dreamweaver MX
Css Founder.com
Creating a Link
Make this a
link to the
LBS Home
page
I am creating this page for CSE 101 and

will be modifying this page throughout
the course.
Please visit again!
CssQuestion:
Founder.com
what is the HTML tag for Links?
More things to do
Make a bullet list for your four favorite
things in MSU. Change the font of this list
to Times New Roman
Changing page properties:
Set background color for the page.
What else can you change for the page
properties?
Download a MSU logo, save to your web

folder and insert to the top of your page.
Question:
what is the HTML tag for Images?
Css
Founder.com
Problems
The Tags only provided limited formatting.
H1 is always that big.
Links always have an underscore.
You can manually change the format for

all the H1 headlines, but what about your
have 100 pages in your web site?
Can we customize the HTML tags?
Css Founder.com
Cascading Style Sheets (CSS)

What is style?
Style is a list of formatting instructions.
A Cascading Style Sheet is a file with a

list of formatting instructions.
CSS style sheets are the modern way to
control the appearance and layout of your
web pages.
4.0 and up Navigator and IE fully support
CSS.
Css Founder.com
Unpacking Sample Web Site

Open the file common.zip you just copied
using EnZIP
Click on Edit => Extract and extract the files
to your web folder
The files will appear in a new folder commons
Browse to the practice web site

http://www.msu.edu/~MSUNetID/commons/
Why didnt you give a file name in the URL?
View all seven pages in the site.
What tags control the formatting of the headings?
Css Founder.com
Cascading Style Sheet

Enter the following text into a new
Notepad document
h2 {
font-family : Tahoma;
color : blue;
text-align : center;
}
Save the document in the commons

folder as csense.css
Save as file type Text Document
Css Founder.com
Attach a Style Sheet to HTML files

In properties window>Styles drop box,
choose Manage
styles
Use Attach to
attach the .css file
you just created.
Do the same thing for
all the seven pages.
What happens?
Css Founder.com
Modifying CSS styles

h2 {
font-family : Tahoma;
color: blue;
text-align: center;
text-transform : uppercase;
}
body {
font-family : Courier New;
background-color : #FFEEDD;
color : #777733;
}
Css Founder.com
Separation of Content and

Presentation
Content
Use tags 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
Css
Changing the formatting only requires

editing the style sheet
Founder.com
Edit styles in Dreamweaver

In the Design->CSS Styles
window you can edit the
styles you already have, or
create new styles.
Lets create a new style for
the link HTML tag: <a>
</a>
High light the CSS file first
Click here
Css Founder.com
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 users
mouse is over it.
Css Founder.com
Extra material
Downloading the Macromedia
Dreamweaver tutorial file from the lecture
notes page.
Css Founder.com

Css Founder - Com - Cssfounder Se

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Founder - Com - Cssfounder Se

Uploaded by

Copyright:

Available Formats

Css Founder| Cssfounder Se

HTML Basics and CSS style

HTML File Structure

Web Page Development Cycle

EDIT and SAVE the file in your AFS

TEST by BROWSING to the page

Adding Text to Your HTML File

Adding Information to Web Page

More HTML tag pairs

<H6> </H6> are headlines with different

Formatting Your Web Page with more

My name is your name

Underline & Italic

My major is your major

Please visit again!

Now it is time to use Dreamweaver MX

I am creating this page for CSE 101 and

Download a MSU logo, save to your web

You can manually change the format for

Cascading Style Sheets (CSS)

A Cascading Style Sheet is a file with a

Unpacking Sample Web Site

Browse to the practice web site

Cascading Style Sheet

Save the document in the commons

Attach a Style Sheet to HTML files

Modifying CSS styles

Separation of Content and

Changing the formatting only requires

Edit styles in Dreamweaver

Change the style of HTML Link Tag

You might also like