Top Banner
Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and test Web pages Unit Lessons
29

Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Dec 21, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Create head content and set page properties

Create, import, and format text

Add links to Web pages

Use the History panel and Code Inspector

Modify and test Web pages

Unit Lessons

Page 2: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Understanding Page Layout

Use White Space Effectively

Limit Multimedia Elements

Keep it Simple

Use an Intuitive Navigation Structure

Apply a Consistent Theme

Developing a Web page

Page 3: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Creating Head Content

Title - browser title bar

fig B-2

Keywords - search

Description - search resultsfig B-4

keywords description

title

Page 4: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Create Head Content…<html>

<head><title>…</title><meta name=“keywords” content=“…”><meta name=“description” content=“…”>

</head>

<body….>…..</body></html>

Page 5: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Web Page Properties

Background color

Font colorLink colors (unvisited, visited, active)

Page 6: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Web-Safe Colors

216 colors

RGB

Hexidecimalvalues

Page 7: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Background color

Page 8: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Create, Import and Format Text

Adding text to a Dreamweaver page…

Type in DreamweaverCopy/Paste [Ctrl+C] and [Ctrl+V]

Import Word HTML

Page 9: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Web fonts

Browsers use visitor’s fonts

Font combinations

Serif and Sans Serif

t TGraphic text for funky fonts

Page 10: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Text Property Inspector

Font, Size, Color, Style, Alignment

Page 11: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Font Size

“3” - Default browser size

“1” through “7”, or

“-7” through “+7”

Page 12: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Web filenames

• Do not use: • Spaces• Special characters• Punctuation• Capital letters

Page 13: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Add Links to Web Pages

Page 14: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Link properties

•Link names - informative

•Hyper text - topic

•Graphic

•Formatting properties - consistent

•Address or path - relative vs absolute

Page 15: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Broken Links

Typos

Pages move

Sites move

Sites expire

Page 16: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Add a Link

Browse or Point

Page 17: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

E-Mail Link(mailto:)

Fig B-20

Page 18: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Site Map

Home page

Linked pages

email

Page 19: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

History Panel…functions

Undo

Redo

Replay

Save As Command

Page 20: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

History Panel…properties

50 steps

Preferences adds more

Increasing steps uses memory

Page 21: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Code InspectorCode View in a floating window

Page 22: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Reference PanelOpen from Code Inspector or Reference Panel

Htmltag

example

info

Page 23: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Comments

Discerns code

Not visible in browser

Page 24: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Date Object

Page 25: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Comment and Date HTML

Comment tag used for date

Page 26: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Test Pages…in Preview

Proofreading

Window size

Links

Page 27: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Test window sizeswithin Dreamweaver

Page 28: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Test Pages…in field

Monitors size and resolution

Platforms unix, mac, pc

Browsers explorer, netscape, aol

Page 29: Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and Code Inspector Modify and.

Unit TasksCreate head content

Set page properties

Import and Format text

Add links

Use History Panel

Use Code Inspector

Test Web pages