website deisgning basics - html and css style
Post on 02-Jun-2018
231 Views
Preview:
TRANSCRIPT
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
1/23
HTML Basics and CSS style
-
8/10/2019 Website Deisgning Basics - HTML 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
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
3/23
HTML $ile Structure
/%en a 0ote%ad window. Co%y t e HTML ta#s to t e 0ote%ad.
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
5/23
&ddin# Te1t to 2our HTML $ile
My home pageMy name is your name.
My major is your major.
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
6/23
Makin# %ara#ra% s
My home page
My name is your name.
My major is your major.
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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/10/2019 Website Deisgning Basics - HTML and CSS Style
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.
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
9/23
$ormattin# 2our We' "a#e wit more ta#s
My name is your name
My ma4or is your major
3 am creatin# t is %a#e for CS+ 5
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
10/23
0ow it is time to use Dreamweaver M
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
11/23
Creatin# a Link
My name is your name
My ma4or is your major
3 am creatin# t is %a#e for CS+ 5
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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>
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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.
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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/ -
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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>
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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 $)
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
19/23
Se%aration of Content and"resentation
Content se ta#s like 4 4
4 or
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
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.
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
22/23
+1tra material
Downloadin# t e Macromedia Dreamweavertutorial file from t e lecture notes %a#e.
-
8/10/2019 Website Deisgning Basics - HTML and CSS Style
23/23
top related