Transcript head content

Chapter 2
Developing a Web Page
Creating Head Content and Setting
Page Properties
• A web page is composed of two distinct
sections:
– The head content
– The body
Creating Head Content and Setting
Page Properties
• The head content includes the page title that
appears in the title bar of the browser and
meta tags.
• Meta tags are HTML code that include
information about the page, such as keywords
and descriptions.
Creating Head Content and Setting
Page Properties
Meta icon
CSS icon
Head content section
Title icon
Viewing the head content
Title text box on
Document toolbar
Creating Head Content and Setting
Page Properties
• Keywords are words that relate to the content
of the website.
• A description is a short paragraph that
describes the content and features of the
website.
Creating Head Content and Setting
Page Properties
Keywords
Keywords dialog box
Creating Head Content and Setting
Page Properties
• The body is the part of the page that appears
in a browser window.
Creating Head Content and Setting
Page Properties
• The background color is the color that fills the
entire page and should complement the colors
used for text, links, and images on the page.
Creating Head Content and Setting
Page Properties
• A CSS layout block is a section of a web page
that is defined and formatted using a
Cascading Style Sheet, a set of formatting
characteristics you can apply to text, links, and
other page objects.
Creating Head Content and Setting
Page Properties
• The default font and default link colors are
the colors used by the browser to display text,
links, and visited links.
Creating Head Content and Setting
Page Properties
• The default color for unvisited links, or links
that the user has not clicked yet, is blue.
Unvisited links are usually simply called links.
• The default color for visited links, or links that
have been previously clicked, is purple.
Creating Head Content and Setting
Page Properties
• Dreamweaver has two web-safe color
palettes, Color Cubes and Continuous Tone,
each of which contains 216 web-safe colors.
Creating Head Content and Setting
Page Properties
Click list arrow to
choose a color
palette
Web-safe palettes
Available color palettes
Color picker showing color palettes
Creating, Importing, and Formatting
Text
• Most information in web pages is presented in
the form of text. You can type text directly on
a page in Dreamweaver, import, or copy and
paste it from another software program.
Creating, Importing, and Formatting
Text
• Dreamweaver will preserve formatting and
generate clean HTML code.
• Clean HTML code is code that does what it is
supposed to do without using unnecessary
instructions, which take up memory.
Creating, Importing, and Formatting
Text
• If text does not have a font specified, the
default font on the user’s computer will be
used to display the text.
• Keep in mind that some fonts might not
appear the same on both a Windows and a
Macintosh computer.
Creating, Importing, and Formatting
Text
• The way fonts are rendered (drawn) on the
screen differs because Windows and
Macintosh computers use different
technologies to render them.
Creating, Importing, and Formatting
Text
• Text in your website should be attractive and
easy to read.
• Cascading Style Sheets (CSS) are sets of
formatting attributes that you use to format
web pages to provide a consistent
presentation for content across the site.
Creating, Importing, and Formatting
Text
• A Font-combination is a set of font choices
that specify which fonts a browser should use
to display the text on your web page.
Creating, Importing, and Formatting
Text
• To change the size of text using the Property
inspector:
– Select a numerical value for the size from 9 to 36
pixels.
– Use a size expressed in words from xx-small to
larger.
Creating, Importing, and Formatting
Text
• To format a paragraph as a heading, click
anywhere in the paragraph, and then select
the heading size you want from the Format list
in the HTML Property inspector.
Adding Links to Web Pages
• When you create links on a web page, it is
important to avoid broken links, or links that
cannot find their intended destinations.
• You should provide a point of contact, or a
place on a web page that provides users with
a means of contacting the company.
Adding Links to Web Pages
• A common point of contact is a mailto: link,
which is an email address that users with
questions or problems can use to contact
someone at the company’s headquarters.
Adding Links to Web Pages
mailto: link
mailto: link on the Property inspector
Adding Links to Web Pages
• A menu bar, or navigation bar, is an area on a
web page that contains links to the main
pages of a website.
Using the History Panel and Editing
Code
• The History panel records each editing and
formatting task you perform and displays
them in a list in the order in which you
completed them.
Using the History Panel and Editing
Code
• Each task listed in the History panel is called a
step. You can drag the slider on the left side of
the History panel to undo or redo steps.
Using the History Panel and Editing
Code
Drag slider to
undo steps
Click in the bar next
to a step to undo to
that step
The History panel
Using the History Panel and Editing
Code
• You can view the code in Dreamweaver using
Code view, Code and Design views, or the
Code Inspector. The Code Inspector is a
separate window that displays the current
page in Code view.
Using the History Panel and Editing
Code
The Code Inspector
Code displayed
in the Code
Inspector
Page displayed in Design view
behind the Code Inspector
Selected text with corresponding code
Using the History Panel and Editing
Code
• A JavaScript function is a block of code that
adds dynamic content such as rollovers or
interactive forms to a web page.
• A rollover is a special effect that changes the
appearance of an object when the mouse
moves over it.
Modifying and Testing Web Pages
• As you add and modify pages, test each page
as part of the development process.
• Test a web page in Live view or in a browser
window to make sure that all text and image
elements appear the way you expect them to.
Modifying and Testing Web Pages
• Adobe BrowserLab is a tool that checks pages
by simulating multiple browsers and
platforms.
• You can use it to test your pages in browsers
that are not installed on your computer.
Modifying and Testing Web Pages
• The Multiscreen Preview button is located on
the document toolbar. With the Multiscreen
Preview, you can view a page in three device
sizes in one window.
Modifying and Testing Web Pages
Viewport
Sizes button
Phone preview
Tablet preview
The Desktop preview
Using the Multiscreen Preview