committed to shaping the next generation of it experts. 1 essentials for design dreamweaver level...

Post on 04-Jan-2016

212 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

1Committed to Shaping the Next Generation of IT Experts.

Essentials For DesignDreamweaver

Level OneJulian Rickards

Project 3

Applying Structure To Text

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Applying Structure To Text

Structure a document with headings

Insert line breaks format quotations with HTML tags

Horizontal rule Use ordered and

unordered lists Change bullet and

number styles with CSS

Create definition lists

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3

Visual Summary

Text Insert bar Access to HTML tags to

structure text

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4

Visual Summary (continued)

Other HTML characters Located at right end of “text

insert” bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5

Visual Summary (continued)

Property inspector Used very frequently

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6

Visual Summary (continued)

Code hint pop-up list

Copyright (c) 2004 Prentice-Hall. All rights reserved. 7

Inserting Headings

Deprecated In favor of CSS

Copyright (c) 2004 Prentice-Hall. All rights reserved. 8

Insert Headings Using The Insert Bar

Copyright (c) 2004 Prentice-Hall. All rights reserved. 9

Insert Headings Using The Insert Bar (Continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10

Inserting Line Breaks

Forces new line Addresses Other block text

Click in the empty paragraph space between the Heading 3 lines Mailing Address: and Phone Numbers:

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11

Inserting Line Breaks (continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12

Inserting Line Breaks – Alternate

Using Design view

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13

Formatting A Large Quotation On A Web Page

Blockquote <blockquote><p>…</p></blockquote>

Default indentation “Cite” tool for quotation source

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14

Formatting An InsertedBlock Quote

By using the Property inspector

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15

In The Design View

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16

Using The “Cite” Tool

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17

Using The “Cite” Tool (continued)

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18

Inserting A Short Quotation In A Paragraph

Quote tag <q>

Double quotes W3C

CSS

Christie Hovey
This page has bullets show line-by-line when running PPT. Others do not.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 19

Tag Chooser

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20

Tag Editor

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21

Browser Preview

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22

Separating Content Using A Horizontal Rule

Horizontal rule tag, <hr> Width Color Noshade Size

Block element

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23

Insert A Horizontal Rule

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24

Creating Ordered AndUnordered Lists

Ordered Numbered

Unordered Bulleted

1. One

2. Two

3. Three

Two

One

Three

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25

Ordered List

Two tags <ol>

Ordered list <li>

List item Pair needed for

each item

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26

Unordered List Two tags

<ul> unordered list

<li> List item Pair needed for

each item

Code view

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27

Styling Lists

Ordered Various numbered

Unordered Various bulleted

1. One

2. Two

3. Three

a) One

b) Two

c) Three

A. One

B. Two

C. Three

o Two

o One

o Three

Two

One

Three

Two

One

Three

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28

CSS Style Definition

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29

Creating Definition Lists

Needs three tag sets <Dl>…</dl> definition list <dt>…</dt> definition term <dd>…</dd> definition description

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30

Definition Lists – Code View

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31

Summary

Structure a document with headings

Insert line breaks format quotations with HTML tags

Horizontal rule

Use ordered and unordered lists

Change bullet and number styles with CSS

Create definition lists

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32

End-of-Project Exercises

Screen ID Multiple Choice Discussion Questions Skill drill

Create Heading Using the Property Inspector Create Unordered Lists Create and Modify the Style of an Ordered

List Create a Nested List Insert Special HTML Characters

Copyright (c) 2004 Prentice-Hall. All rights reserved. 33

End-of-Project Exercises (continued)

Challenge Format Heading in the Drummond Reid Web

Pages Insert a Horizontal Rule Divider above the Footer Covert a Paragraph Break to a Line Break Reformat Text as Unordered and Ordered Lists Change the Numbering Style of an Ordered List

Portfolio Builder Create an Online Resume

Copyright (c) 2004 Prentice-Hall. All rights reserved. 34

What Are Your Questions

top related