Transcript Dreamweaver CS4 Skills

Dreamweaver CS4 Skills
You can create a Web Site in
Dreamweaver without ever having to
work directly with HTML at all. But
any person interested in learning Web
Design really needs a basic
understanding of HTML.
With HTML you add keywords to your
pages, which enables people searching
on the Web to find your site.
When you having a working knowledge
of HTML, you can confidently (and
carefully) work in the code to tweak
text, images, and other objects; you
can add special effects to elements on
your page, and do much more.
Understanding HTML gives you
flexibility as you create, modify, and
enhance the items on your page.
Dreamweaver CS4 Terms
• Attribute – A characteristic that is
applied to an HTML tag (for example,
align is one example of an attribute).
• Cascading Style Sheet (CSS) - A group of
formatting instructions that enable you
to easily apply formats to specific items
on your Web pages.
• Closing switch - The / character used in
a closing HTML tag (such as </strong>).
• Closing tag – An HTML tag used to
indicate the end of an element. For
example, </h1> is a closing tag placed
at the end of Heading 1.
• Code view – This is the view that
shows HTML code. Dreamweaver can
show an entire page of code or both
Code view and Design View on a split
page.
• Design view – This is the default
Document window view that shows
page content similar to the way it will
appear in the browser.
• Live view – A view that enables you to
see the immediate effect of code
changes you make while working on
the page.
• Element – The name of an HTML tag.
• HTML (HyperText Markup Language –
The code used to create all Web pages.
• Head – An important section of code
on your Web page that contains
information browsers need in order to
display the document, such as the
page title and the character set used
to create the page.
• HTML tag – Formal name for an HTML
markup element. HTML tags appear
inside angle brackets (<tag>).
• Insertion point – The blinking vertical
line that shows you where text will
appear when you begin typing or an
object will appear when you create or
insert one.
• Keywords – Words or phrases that
describe the site content. Keywords
are important because search engines
scan and index them, creating the
links that bring visitors to your site.
• Line break – A HTML tag, <br>, that
starts a new line but not a new
paragraph.
• Nest – To place one object inside
another. HTML tags are often nested.
• One-sided tag – A type of HTML tag
that does not require a closing tag.
The <br> line break tag is a one-sided
tag.
• Schema – The tags and instructions
used in an XML data file
• Opening tag – An HTML tag that
identifies the start of a new element.
The opening tag for a paragraph is
<p>.
• Styles – Saved formatting
specifications that you can apply to
items on your page.
• Syntax – Rules that govern the use of
HTML code and create a connected,
orderly system.
• Value – The precise instruction for the
way in which an attribute should
function. For example, the value for
the align attribute might be center.
• XML (Extensible Markup Language) –
A type of markup language, similar to
HTML, that enables designers to
create their own data tagging system
and structure.
• Wicket – The angle brackets (<>) that
surround the HTML tag.
• XHTML (Extensible Hypertext Markup
Language – The current version of
HTML that combines HTML structure
with XML power and flexibility.
 HTML (Hypertext Markup Language) is a scripting language—or code—you
use to create pages that can be viewed with a Web browser. Nearly every item
on a Web page—Including text, formatting, pictures, and other page
elements—is controlled by HTML coding.
 Dreamweaver CS4 supports XHTML (Extensible Hypertext Markup
Language). XHTML is a reformulation of the most current version of HTML
(HTML 4.0) that uses XML (Extensible Markup Language). XML is a
language that uses tags to structure information, similar to HTML. Unlike
HTML, however, XML allows you to create your own tags to fit your
information more specifically. XHTML was developed to answer a need for a
stricter version of HTML that could be used to deliver content across a wide
variety of devices: not merely computer browsers, but also mobile phones,
laptops, PDAs, and so on. XHTML combines the standard HTML structure
with the power and flexibility of XML.
12
Get Started with Dreamweaver: Lesson 1, Exercise 3
Copyright © 2010 Pearson Education, Inc.
Publishing as Prentice Hall
 To make sure others can find and visit your site, you can supply keywords on your pages
that search engines use to index a site in their databases.
 You add keywords to the Head section of a site using a <meta> tag.
 To add a <meta> tag containing keywords to your home page, use the Insert > HTML >
Head Tags > Keywords menu command to open the Keywords dialog box. Here you can
type the keywords that summarize your site’s subject.
13
Get Started with Dreamweaver: Lesson 1, Exercise 3
Copyright © 2010 Pearson Education, Inc.
Publishing as Prentice Hall
HTML heading levels
Type text at the insertion
point
Apply text formats
with the Property
inspector
 You can display rulers on the pages so you can easily position
content on the page. You add rulers to the work area by opening the
View menu, clicking Rulers, and choosing Show.
 A newly opened Dreamweaver document displays a blinking
insertion point at the top left of the Document window. To enter text
on a page, simply begin typing at the location of the insertion point.
1
4
Get Started with Dreamweaver: Lesson 1, Exercise 3
Copyright © 2010 Pearson Education,
Inc.
Publishing as Prentice Hall
The easiest way to insert Office text in a Dreamweaver page is to use the
File > Import > Word Document or File > Import > Excel Document menu
command. This command displays the Import Word Document or Import
Excel Document dialog box, where you can navigate to the location of the
Word or Excel document you want to insert.
•
•
1
5
Another method of inserting Office information
into a Dreamweaver page is to drag the file itself
from an application such as Windows Explorer
or the Dreamweaver Files panel onto the
Dreamweaver page.
After you drag file icon to the page and release
the mouse button, Dreamweaver displays the
Insert Document dialog box.
Working with Text Using CSS Styles and HTML: Lesson 2,
Exercise 8
Copyright © 2010 Pearson Education,
Inc.
Publishing as Prentice Hall
You can also insert Office document text
using the Copy and Paste commands.
Copy the Word text or Excel spreadsheet
data and then use one of the
following Paste options:
•Use Edit > Paste to convert the pasted
text to HTML format, the same as when
importing a Word or Excel file.
•Use Edit > Paste Special to open the
Paste Special dialog box.
16
Copyright © 2010 Pearson Education, Inc.
Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 8 Publishing as Prentice Hall