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:msuusernananzhangpublic
Css Founder.com

HTML File Structure
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Open a Notepad window. Copy the HTML tags to the Notepad.
Css Founder.com

Web Page Development Cycle
EDIT and SAVE the file in your AFS
p:webindex.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
I am creating this page for CSE 101
and will be modifying this page
throughout the course.
Please visit again!
Underline & Italic
Italic
H1
H2
Separate
Paragraph
Separate
ParagraphUnderlineCss Founder.com

Now it is time to use Dreamweaver MX
Css Founder.com

Creating a Link
I am creating this page for CSE 101
and will be modifying this page
throughout the course.
Please visit again!
Make this a
link to the
LBS Home
page
Question: what is the HTML tag for Links?Css Founder.com

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 didn’t 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
Changing the formatting only requires
editing the style sheetCss Founder.com

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
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 user’s
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

Recommended

More Related Content

What's hot (19)

Viewers also liked (14)

Similar to Css Founder.com | Cssfounder se (20)

More from Css Founder (20)

Recently uploaded (20)

Css Founder.com | Cssfounder se

Editor's Notes