website deisgning basics - html and css style

8/10/2019 Website Deisgning Basics - HTML and CSS Style

1/23

HTML Basics and CSS style


2/23

Before we start Dreamweaver ( DW) may take several minutes to

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

&%%s ! We' ! Dreamweaver M ! DreamweaverM 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


3/23

HTML $ile Structure

/%en a 0ote%ad window. Co%y t e HTML ta#s to t e 0ote%ad.


4/23

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%ehttp:&&www.m'u.edu&( m'unetid /index.html


5/23

&ddin# Te1t to 2our HTML $ile

My home pageMy name is your name.

My major is your major.


6/23

Makin# %ara#ra% s

My home page

My name is your name.

My major is your major.


7/23

&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 'emodifyin# t is %a#e t rou# out t e course.

"lease visit a#ain8


8/23

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.


9/23

$ormattin# 2our We' "a#e wit more ta#s



3 am creatin# t is %a#e for CS+ 5


10/23

0ow it is time to use Dreamweaver M


11/23

Creatin# a Link



3 am creatin# t is %a#e for CS+ 5


12/23

More t in#s to do

Make a 'ullet list for your four favorite t in#s inMS . C an#e t e font of t is list to ?Times0ew @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#o 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>


13/23

"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 eH5 eadlines 'ut w at a'out your ave 5


14/23

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.

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


15/23

n%ackin# Sam%le We' Site

/%en t e file common.*i% you 4ust co%ied usin#+n 3" 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>
http://www.msu.edu/~MSUNetID/commons/http://www.msu.edu/~MSUNetID/commons/


16/23

Cascadin# Style S eet

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

h2 { fon !fami"y # Tahoma$ %o"or # &"'e$ e( !a"ign # %en er$)

Save t e document in t e commons folderas csense.css

Save as file ty%e Text Document


17/23

&ttac a Style S eet to HTML files 3n %ro%erties window

!Styles dro% 'o1c oose ?Mana#estyles;A

se ?&ttac ;A to attact e .css file you 4ustcreated.

Do t e same t in# for

all t e seven %a#es. W at a%%ens>


18/23

Modifyin# CSS stylesh2 { fon !fami"y # Tahoma$ %o"or# &"'e$ e( !a"ign# %en er$ e( ! ransform # 'pper%ase$)

&o*y { fon !fami"y # +o'rier ,e-$ &a%.gro'n*!%o"or # 00EEDD$ %o"or # 1111 $)


19/23

Se%aration of Content and"resentation

Content se ta#s like 4 4

4 or


20/23

+dit styles in Dreamweaver 3n t e Desi#n !CSS Styles

window you can edit t estyles you already ave orcreate new styles.

LetFs create a new style fort e link HTML ta#, 9a! 9:a!

Hi# li# t t e CSS file first Click ere


21/23

C an#e t e style of HTML LinkTa#

a,link J Customi*es t e style of a link t at as not 'een visitedrecently

a,visited Customi*es t e style of a link t at as 'eenrecently visited

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

mouse is over it.


22/23

+1tra material

Downloadin# t e Macromedia Dreamweavertutorial file from t e lecture notes %a#e.


23/23

website deisgning basics - html and css style

Documents