Dreamweaver Primeros Pasos. Instalación y ejecución de Dreamweaver.
Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level...
-
Upload
samantha-banks -
Category
Documents
-
view
213 -
download
0
Transcript of Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level...
![Page 1: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/1.jpg)
1Committed to Shaping the Next Generation of IT Experts.
Essentials For DesignDreamweaver
Level OneJulian Rickards
Project 3
Applying Structure To Text
![Page 2: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/2.jpg)
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
![Page 3: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/3.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 3
Visual Summary
Text Insert bar Access to HTML tags to
structure text
![Page 4: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/4.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 4
Visual Summary (continued)
Other HTML characters Located at right end of “text
insert” bar
![Page 5: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/5.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 5
Visual Summary (continued)
Property inspector Used very frequently
![Page 6: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/6.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 6
Visual Summary (continued)
Code hint pop-up list
![Page 7: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/7.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 7
Inserting Headings
Deprecated In favor of CSS
![Page 8: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/8.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 8
Insert Headings Using The Insert Bar
![Page 9: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/9.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 9
Insert Headings Using The Insert Bar (Continued)
![Page 10: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/10.jpg)
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:
![Page 11: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/11.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 11
Inserting Line Breaks (continued)
![Page 12: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/12.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 12
Inserting Line Breaks – Alternate
Using Design view
![Page 13: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/13.jpg)
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
![Page 14: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/14.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 14
Formatting An InsertedBlock Quote
By using the Property inspector
![Page 15: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/15.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 15
In The Design View
![Page 16: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/16.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 16
Using The “Cite” Tool
![Page 17: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/17.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 17
Using The “Cite” Tool (continued)
![Page 18: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/18.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 18
Inserting A Short Quotation In A Paragraph
Quote tag <q>
Double quotes W3C
CSS
![Page 19: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/19.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 19
Tag Chooser
![Page 20: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/20.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 20
Tag Editor
![Page 21: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/21.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 21
Browser Preview
![Page 22: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/22.jpg)
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
![Page 23: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/23.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 23
Insert A Horizontal Rule
![Page 24: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/24.jpg)
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
![Page 25: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/25.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 25
Ordered List
Two tags <ol>
Ordered list <li>
List item Pair needed for
each item
![Page 26: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/26.jpg)
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
![Page 27: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/27.jpg)
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
![Page 28: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/28.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 28
CSS Style Definition
![Page 29: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/29.jpg)
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
![Page 30: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/30.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 30
Definition Lists – Code View
![Page 31: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/31.jpg)
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
![Page 32: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/32.jpg)
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
![Page 33: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/33.jpg)
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
![Page 34: Committed to Shaping the Next Generation of IT Experts. 1 Essentials For Design Dreamweaver Level One Julian Rickards Project 3 Applying Structure To.](https://reader035.fdocuments.net/reader035/viewer/2022070400/56649f115503460f94c241b4/html5/thumbnails/34.jpg)
Copyright (c) 2004 Prentice-Hall. All rights reserved. 34
What Are Your Questions