A tracing image is a JPEG, GIF, or PNG formatted image that appears in the background of the Document window.. In addition, a tracing image is visible only in Dreamweaver, not visible wh
Trang 1204 Chapter 8
You can use a tracing image as a guide to create a page design in Dreamweaver For example, you can use Adobe Photoshop to create an exact replica of what you want your Web page to look like (i.e head-ings, body text areas, navigation, etc), and then use that image as a tracing image to help design the actual Web page A tracing image is a JPEG, GIF, or PNG formatted image that appears in the background of the Document window In addition, a tracing image is visible only in Dreamweaver, not visible when you view the page in a browser When the tracing image is visible, the page's real background image and color are not visible in the Document window; however, the back-ground image and color is visible when the page is viewed in a browser
Using a Tracing
Image
Insert a Tracing Image
Open a Web page that you want to
insert the tracing image
Click the View menu, point to
Tracing Image, and then click
Load.
Navigate to the image you want to
use, select it, and then click OK.
Drag the Transparency slider to
adjust the transparency of the
tracing image
NOTE If the chosen graphic file
is not located in the current Site,
Dreamweaver prompts you to save
a copy within the active Site folder
(recommended)
Click OK.
The tracing image now appears in
the background of the current
Web document
5
4
3
2
1
3
5
4
Trang 2Modify a Tracing Image
Click the View menu, and then
point to Tracing Image.
Select from the following options:
◆ Show Select to show or hide
the tracing image
◆ Align With Selection Select an
element in the document
window, and then use this
option to align the upper-left
corner of the tracing image
with the upper left corner of the
selected element (i.e a table
cell)
◆ Adjust Position Select to open
a dialog box where you can
precisely specify the position of
the tracing image by entering
coordinate values in the X and
Y text boxes
◆ Reset Position Select to return
the tracing image to its default
position, the upper-left corner
of the Web document
2
1
1
2
Tracing image aligned to selection
Trang 3206 Chapter 8
A nested table is a table inside a cell of another table You can format a
nested table as you would any other table; however, its width is limited
by the width of the cell in which it appears The cells inside a nested table are isolated from changes made to the outer table; for example, when you change the size of a row or column in the outer table, the cells in the inner table don't change size The question arises as to why you might want to do something like this, and there are several answers to that You might want to use a table to add design elements
to a page, and at the same time use one of the cells for tabular data, or you have a picture and a related caption and you want them to remain stationary in relation to one another while text on the page flows according to the size of the browser window In older browsers (pre 5.0) creating nested tables can slow down the load of the page In Web design one of the things we have to do is balance page content to load speed Make sure you keep things in balance
Creating a Nested
Table
Nest a Table in Standard Mode
Open the Web page containing a
table, or create a new table
Click the Design button to display
the page in Design mode
Click the View menu, point to
Table Mode, and then click
Standard Mode.
Select the cell you want to insert
the nested table
Click the Insert menu, and then
click Table.
Choose the properties for the
nested table you want from the
Table dialog box
Click OK.
The nested table is inserted into
the selected cell
NOTE By default, the nested
table is left justified and centered
vertically within the cell If you
want to change the position of the
nested table, select the cell that
contains the table, and make your
changes using the Properties
panel
7
6
5
4
3
2
1
7
6
Nested table in Standard Mode
Trang 49
9 What You’ll Do
Introduce Cascading Style Sheets Create a Web Page with a CSS Layout Create CSS Styles
Apply Internal CSS Styles Apply and Modify External CSS Styles Remove Internal Styles
Use the CSS Styles Panel Edit CSS in the Properties Panel Set CSS Properties
Work with CSS Rules Disable or Enable CSS Rules Inspect CSS
Use the Relevant CSS Tab Work with ID Selectors Create and Apply an ID Selector Check for CSS Browser Compatibility Format CSS Code
Set CSS Styles Preferences Use Design-Time Style Sheets Optimize Web Pages
Working with Cascading
Style Sheets
Introduction
Cascading Style Sheets are one of the greatest things to
come along since the creation of the World Wide Web A hard
definition of CSS might go something like this: Cascading
Style Sheets (CSS) are a collection of formatting rules that
control the appearance of the content in a Web page
Using CSS styles to format a page separates content from
presentation This gives you greater flexibility and control
over the exact appearance of your Web pages With CSS you
can control text properties including specific fonts and font
sizes; bold, italics, underlining, and text shadows; text color
and background color, link color and underlining With CSS
controlling fonts, it ensures a more consistent treatment of
your page layout and appearance in multiple browsers
In this chapter you'll get an introduction to Cascading
Style Sheets: what they are, and how to use them efficiently
to create great Web content You'll also learn how CSS
func-tions, and how it's used to control multiple Web pages
With Dreamweaver and Cascading Style Sheets we're
get-ting closer and closer to the goal of What You See Is What You
Get, and I can't wait
Trang 5208 Chapter 9
Cascading Style Sheets (CSS) are a revolution
in the world of web design Some of the
ben-efits include:
◆ The layout of many documents from one
single style sheet
◆ Precise control of layouts
◆ Application of different layout to different
media-types (screen, print, etc.)
◆ Many advanced and sophisticated
techniques
Many of the CSS properties are similar to
those of HTML Therefore, if you are
comfort-able designing Web pages using HTML code,
you will most likely recognize many of the
codes
CSS Versus HTML
If you wanted to change the color of the
back-ground of a Web page, the HTML code would
look like this:
<body bgcolor="#0000FF">
To write the same thing using CSS, would
look like this:
body {background-color: #0000FF;}
Incidentally, the code, in both cases, is
instructing the browser to paint the
back-ground in pure blue
CSS Breakdown
Cascading Style Sheets are broken down into
three sections: a selector, a property, and a
value In our example, body is the selector,
background-color is the property, and
#0000FF is the value
Create CSS Styles
There are three ways you can apply CSS to an
HTML document: Attributes, Tags, and
External Style Sheets
Attribute Styles
One way to apply CSS to HTML is by using the HTML attribute style CSS used in this way is coded directly into the HTML docu-ment For example, you can create your own named tags, and use them throughout the active document Building on the above example, it can be applied like this:
<html>
<head>
<title>Attribute Style Example<title>
</head>
<body style="background-color: #0000FF;">
<p>This page has a blue background</p>
</body>
</html>
NOTE Attribute styles are a one-shot deal
That is, they are applied to single areas of an HTML document such as a background color, or
a specific portion of text
Tag Styles
A second way to include CSS into an HTML document is to use the Tag Style method In this method you control the formatting of standard HTML tags For example, you could redefine the <H1> heading tag to always use
a specific font, size and justification or, in this example, use the <body> tag to paint the background blue
<html>
<head>
<title>Tag Style Example<title>
<style type="text/css">
body {background-color: #0000FF;}
</style>
</head>
Introducing Cascading Style Sheets