Website Deisgning Basics - HTML and CSS Style

HTML Basics and CSS style
Before we start
Dreamweaver (DW) may take several minutes to

start.
Click on Start ! "ro#ram $iles ! Develo%ment

&%%s ! We' ! Dreamweaver M( ! Dreamweaver
M( to start t)e %ro#ram.
&cce%t default c)oice for layout.
Minimi*in# t)e Dreamweaver. We will use it later.
Co%y +veryt)in# from my %u'lic folder (includin# t)is

%%t file) to your ",- drive.
.,-msu-user-n-a-nan*)an#-%u'lic
HTML $ile Structure
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
/%en a 0ote%ad window. Co%y t)e HTML ta#s to t)e 0ote%ad.
We' "a#e Develo%ment Cycle
EDIT and SAVE the file in your AFS
p:\web\index.html
TEST by B!"SI#$ to the pa%e
http:&&www.m'u.edu&(m'unetid/index.html
&ddin# Te1t to 2our HTML $ile
<HTML>
<HEAD>
<TITLE>My home page</TITLE>
</HEAD>
<BODY>
My name is your name.
My major is your major.
</BODY>
</HTML>
Makin# %ara#ra%)s
<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>
&ddin# 3nformation to We' "a#e
My name is your name
My ma4or is your major
3 am creatin# t)is %a#e for LBS 567 and will 'e
modifyin# t)is %a#e t)rou#)out t)e course.
"lease visit a#ain8
More HTML ta# %airs
9u! 9:u! ta# %air is for underline
9em! 9:em! ta# %air is for italic style.
9H5! 9:H5!
9H7! 9:H7! are )eadlines wit) different si*es.

$ormattin# 2our We' "a#e wit) more ta#s
3 am creatin# t)is %a#e for CS+ 5<5 and
will 'e modifyin# t)is %a#e t)rou#)out t)e
course.
"lease visit a#ain8
Underline & Italic
Italic
H1
H2
Separate
Paragraph
Separate
Paragraph
Underline
0ow it is time to use Dreamweaver M(
Creatin# a Link
3 am creatin# t)is %a#e for CS+ 5<5 and
will 'e modifyin# t)is %a#e t)rou#)out t)e
course.
"lease visit a#ain8
Make this a link
to the )BS
Home page
=uestion, w)at is t)e HTML ta# for Links>
More t)in#s to do
Make a 'ullet list for your four favorite t)in#s in

MS.. C)an#e t)e font of t)is list to ?Times
0ew @omanA
C)an#in# %a#e %ro%erties,
Set 'ack#round color for t)e %a#e.
W)at else can you c)an#e for t)e %a#e

%ro%erties>
Download a MS. lo#oB save to your we'

folder and insert to t)e to% of your %a#e.
=uestion, w)at is t)e HTML ta# for 3ma#es>
"ro'lems
T)e Ta#s only %rovided limited formattin#.
H5 is always t)at 'i#.
Links always )ave an underscore.
2ou can manually c)an#e t)e format for all t)e

H5 )eadlinesB 'ut w)at a'out your )ave 5<<
%a#es in your we' site>
Can we customi*e t)e HTML ta#s>

Cascadin# Style S)eets (CSS)
W)at is style>
Style is a list of formattin# instructions.
& Cascadin# Style S)eet is a file wit) a list of

formattin# instructions.
CSS style s)eets are t)e modern way to

control t)e a%%earance and layout of your we'
%a#es.
C.< and u% 0avi#ator and 3+ fully su%%ort CSS.

.n%ackin# Sam%le We' Site
/%en t)e file common.*i% you 4ust co%ied usin#

+nD3"
Click on +dit ! +1tract and e1tract t)e files to

your we' folder
T)e files will a%%ear in a new folder commons
Browse to t)e %ractice we' site
)tt%,::www.msu.edu:EMS.0et3D:commons:
W)y didnFt you #ive a file name in t)e .@L>
Giew all seven %a#es in t)e site.
W)at ta#s control t)e formattin# of t)e )eadin#s>

Cascadin# Style S)eet
+nter t)e followin# te1t into a new 0ote%ad

document
h2 {
fon!fami"y # Tahoma$
%o"or # &"'e$
e(!a"ign # %ener$
)
Save t)e document in t)e commons folder

as csense.css
Save as file ty%e Text Document

&ttac) a Style S)eet to HTML files
3n %ro%erties windowH
!Styles dro% 'o1B
c)oose ?Mana#e
styles;A
.se ?&ttac);A to attac)

t)e .css file you 4ust
created.
Do t)e same t)in# for

all t)e seven %a#es.
W)at )a%%ens>
Modifyin# CSS styles
h2 {
fon!fami"y # Tahoma$
%o"or# &"'e$
e(!a"ign# %ener$
e(!ransform # 'pper%ase$
)
&o*y {
fon!fami"y # +o'rier ,e-$
&a%.gro'n*!%o"or # /00EEDD$
%o"or # /111122$
)

Se%aration of Content and
"resentation
Content
.se ta#s like <h3>4 <h2>4 <p>4 <em> or

<"i> to indicate t)e structure of your %a#es
"resentation
.se a CSS style s)eet to determine )ow t)e

ta#s are formatted
&dvanta#e of se%aration
C)an#in# t)e formattin# only reIuires editin#

t)e style s)eet
+dit styles in Dreamweaver
3n t)e Desi#nH!CSS Styles

window you can edit t)e
styles you already )aveB or
create new styles.
LetFs create a new style for

t)e link HTML ta#, 9a! 9:a!
Hi#) li#)t t)e CSS file first
Click )ere
C)an#e t)e style of HTML Link
Ta#
a,link J Customi*es t)e style of a link t)at )as not 'een visited
recently
a,visited HH Customi*es t)e style of a link t)at )as 'een

recently visited
a,)over HH Customi*es t)e style of a link w)ile t)e userFs

mouse is over it.
+1tra material
Downloadin# t)e Macromedia Dreamweaver

tutorial file from t)e lecture notes %a#e.

Website Deisgning Basics - HTML and CSS Style

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Website Deisgning Basics - HTML and CSS Style

Загружено:

Авторское право:

Доступные форматы

HTML Basics and CSS style

Dreamweaver (DW) may take several minutes to

Click on Start ! "ro#ram $iles ! Develo%ment

&cce%t default c)oice for layout.

Minimi*in# t)e Dreamweaver. We will use it later.

Co%y +veryt)in# from my %u'lic folder (includin# t)is

9u! 9:u! ta# %air is for underline

9em! 9:em! ta# %air is for italic style.

9H7! 9:H7! are )eadlines wit) different si*es.

Make a 'ullet list for your four favorite t)in#s in

C)an#in# %a#e %ro%erties,

Set 'ack#round color for t)e %a#e.

W)at else can you c)an#e for t)e %a#e

Download a MS. lo#oB save to your we'

T)e Ta#s only %rovided limited formattin#.

H5 is always t)at 'i#.

Links always )ave an underscore.

2ou can manually c)an#e t)e format for all t)e

Can we customi*e t)e HTML ta#s>

Style is a list of formattin# instructions.

& Cascadin# Style S)eet is a file wit) a list of

CSS style s)eets are t)e modern way to

C.< and u% 0avi#ator and 3+ fully su%%ort CSS.

/%en t)e file common.*i% you 4ust co%ied usin#

Click on +dit ! +1tract and e1tract t)e files to

T)e files will a%%ear in a new folder commons

Browse to t)e %ractice we' site

W)y didnFt you #ive a file name in t)e .@L>

Giew all seven %a#es in t)e site.

W)at ta#s control t)e formattin# of t)e )eadin#s>

+nter t)e followin# te1t into a new 0ote%ad

Save t)e document in t)e commons folder

Save as file ty%e Text Document

.se ?&ttac);A to attac)

Do t)e same t)in# for

.se ta#s like <h3>4 <h2>4 <p>4 <em> or

.se a CSS style s)eet to determine )ow t)e

C)an#in# t)e formattin# only reIuires editin#

3n t)e Desi#nH!CSS Styles

LetFs create a new style for

Hi#) li#)t t)e CSS file first

a,visited HH Customi*es t)e style of a link t)at )as 'een

a,)over HH Customi*es t)e style of a link w)ile t)e userFs

Downloadin# t)e Macromedia Dreamweaver

Вам также может понравиться