Web Page Design Day 2. Agenda Questions Assignment 1 posted Due March 7 @ 2:05 Pm Today we begin building web pages Chap 1 of text

Web Page Design

Day 2

Agenda Questions Assignment 1 posted

Due March 7 @ 2:05 Pm Today we begin building web pages

Chap 1 of text

What we are going do Use xHTML & CSS

More currentMore useful for large sitesLearning xHTML means you've learnt HTML

too (same vocabulary, different syntax) In Dreamweaver “new document” dialog

Check “Make Document XHTML Compliant” Web Site

http://www.cookwood.com/html/

XHTML Elements Attributes and Values Markup

Formatting instructionsDetails between parts of Documents3 types

○ Elements – parts of the web page○ Attributes – optional properties of the elements ○ Values – values for the attributes

All in ASCII text!○ http://www.asciitable.com/ ○ Most commonly used in xhtml <, >, /, =, “”, & , a-

z,#,.

XHTML Elements Labels that identify and structure a document <element>stuff</element>

Stuff can be ○ Text○ Other elements

Empty (no “stuff”) <element … /> Examples

<h1>a header</h1> <em>emphasis</em> <img src=“picture.jpg” />

Only a limited number http://www.w3.org/TR/2005/WD-xhtml2-20050527/elemen

ts.html

Attributes and values

Information about the stuff in-between the opening and closing tags <element attribute=“value” > stuff

</element>

Attribute=“value”Values are allways in quotesValues are allways in lowercaseAttributes are specific to elementsCan use percentages instead of numbers

Block vs. Inline Some elements are block-level elements and the

other are inline Block-level are structural pieces of the document

○ Paragraph, headers etc.○ Allways on a new line○ Can contain

Block-level elements Inline elements text

Inline ○ On the same line○ Words○ Can contain

Inline elements Text

http://perleybrook.umfk.maine.edu/samples/blockvsinline.htm

Parents and children

<element1> <element2></element2> <element3></element3> </elememt1>

1 is a parent of 2 & 3 2 is a child of 1 3 is a child of 1 2 & 3 are siblings

Text Content All extra space, tabs or other white spaces

is collapsed to one character wide spaceI am Tony. I am Tony.

HTML Text limited to ASCII http://www.lookuptables.com/ &copy ©

xHTML uses UnicodeASCII + http://www1.tip.nl/~t876506/EntitiesXHTML1.htm

l

&amp &

URLs & Filenames Use lowercase in the names of files Extension should be .htm or .html for

xHTML pages Absolute URLs

Entire path to filehttp://perleybrook.umfk.maine.edu/default.htmMust use if your are referencing a file not on the

same server as your web page Relative URLs

File must be on the same server ../ to go up a directory /directory/file.ext to go down a directory ./ Means “this diretory”

Relative URL

In web page Index.html

To refer to star.gif “star.gif”

To refer to tony.htm “../ftp/tony.htm”

To refer to dog.gif “../stuff/dog.gif”

HTML vs. XHTML

XHTML must use<!DOCTYPE … ><html><head></head><body></body> </html>

XHTML must have closing tag XHTML is case sensitive (all

lowercase)

XHTML page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head>

<body>

</body>

</html>

Adding Style Style sheets (CSS)

Selector{property:”value”,…} Declaration -> property:”value” More in Chap 7

Cascade What happens when more than one rule applies? Inheritance

○ If no rule than inherit from parent element Specificity

○ If more than one rule applies use the more specific rule Location

○ If more than one rule applies and they are are equally specific, than the rule that appears later is used

Property values Each CSS property has rules about what values can be accepted Predefined values must NOT be in quotation marks Length values

Number and units○ 2em 2 * current font size○ 40px forty pixels○ 20cm twenty centimeters

Percentage○ 20% relative to parent unit

URLS url(path/file.ext)

Colors 16 predefined names

○ http://www.cookwood.com/html/colors/sixteencolors.html

rgb(%35,35%,35%)○ http://www.w3schools.com/html/html_colors.asp

#AAFF66○ http://www.cookwood.com/html/colors/websafecolors.html

Working with Web Page Files Design Site Layout

Audience CenteredDesign a naming

convention for pagesDefine site navigation

FAQ

Contact pages Parts Page

Order page

Info page

Home page

Microsoft Word

Can automatically create web pagesProblems

○ “bloat” code○ Proprietary code

Good for quick jobsBad for anything that has to be maintained

over time

Microsoft Word as a Web Page Design Tool Select “new” from file menu Select “blank web page” Type out web page Add graphics Save as “Web Page (*htm;*html)” If you use graphics, Word will create a

folder containing the graphic files http://www.hartnell.edu/library/word_web_design/

word_web_pages.htm

Ftp using Windows Explorer In address bar

ftp://perleybrook.umfk.maine.edu Login with the same info you used to login

in to lab computers Select COS 125 folder Select the folder with your first name Moving files

Drag and drop files Use menu edit copy/pasteClick on file and right mouse for context menu

COS 125 Web Site http://perleybrook.umfk.maine.edu/classes/cos125/

Some general Hints Web Servers

Most have a system for recognizing “home” pages○ Index.html or default.htm

Find out from WEB Server Administrator Organize your web projects into folders

Images Html pagesThis has already been done for this class

Check your pages in browser before uploading to server

Use the “inspiration of others”

Using Dreamweaver

Create a web page In dreamweaver

>File >newCheck make document

xhtml compliantCreate page in Code

or design mode>file>save as

○ Pick folder and name

Dreamweaver Tutorials

Dreamweaver Developer Center http://www.adobe.com/devnet/

dreamweaver/

Dreamweaver Feverhttp://www.dreamweaverfever.com/

Dreamweaver FAQ.comhttp://www.dwfaq.com/Tutorials/Basics/

default.asp

Paint Shop Pro

Paint Shop Pro tutorials

Web Graphics on a Budgethttp://mardiweb.com/web/

Sumrallworks.comhttp://www.sumrallworks.com/freebies/

buttonhole/psp/tutorials/link2g.htm

PSP Tips From 6th Dimensionhttp://psptips.com/6/

Assignment 1

Cos 125 assignment 1.doc Goals

Confirm students know MS wordMake sure students know how to use COS

125 technologies (FTP, backboard, etc)Have students demonstrate some creative

abilities