Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 3: Link - Images

Link-Images


Understanding Links
Absolute Links:
– URL is an absolute link—it’s the complete,
unique address for a single page.
Ex:
/>– use absolute links when you want to link to a
page on another Web site.
Document-Relative Links: to create a link from
one Web page to another within the same Web
site.


Adding a Link
Browsing for a File:
– To create a link from one page to another on
your own Web site, use the Property inspector’s
“Browse for File” button


Adding a Link
– In the document window, select the text or
image you want to use for the link.
– In the Property inspector, click the folder icon—
that’s the “Browse for File” button, Or, choose
Modify ➝ Make Link, or press Ctrl+L
– Navigate to and select the file you want the link
to open.
– Make sure the correct type of link—Document

or Site Root—is selected from the “Relative to”
menu.


Adding a Link


Adding a Link
Using the Point-to-File Tool:
– You can also create links in Dreamweaver by
dragging from the Property inspector to the
Files panel


Adding a Link
Typing the URL or Path
– In the document window, select the text or
image you want to make into a link.
– In the Property inspector, type the URL or path
to the file into the Link field
Using the Hyperlink Object:
– The Hyperlink object on the
– Common category of the Insert panel lets you
insert a link with many optional properties


Adding a Link
– Choose Insert ➝ Hyperlink or click the chain
icon on the Insert bar

Adding an Email Link
– Under the Insert panel’s Common category, click
the Email link icon, which looks like an envelope


Linking Within a Web Page
Creating a Named Anchor:
– In the document window, click where you want
to insert the named anchor
– Choose Insert ➝ Named Anchor.
– Type the name of the anchor in the Insert
Named Anchor dialog box->OK


Linking Within a Web Page
Linking to an Anchor or ID:
– In the document window, select the text or
image you want to make into a link.
– In the Property inspector’s Link field, type #,
followed by the anchor or ID name.


Modifying a Link
Select the text link or picture link.
– In the Property inspector and locate a different
Web page in your site, or type a complete URL
to point to another page outside your site.
– The destination of the link changes to the new
URL, path, or anchor.

Removing a Link
Select the text link or picture link
– Modify ➝ Remove Link.
– Or delete the text in the Link field of the
Property inspector


Styling Links
– Each link can be in one of four different modes:
Link, visited, Hover, active.
– The Page Properties window lets you change
the color for each of these different link states.


Styling Links
CSS and Links
– Using the CSS Styles panel to create styles for
links gives you access to many more formatting
options besides font, color, and size.
– To format the general look of all links, create a
tag style for the <a> tag


Styling Links
To control how a link looks for the different states,
Dreamweaver lets you select one of four pseudoclasses, each of which refer to a different type of
link.
– In new Css Rule windows

– Select Compound from the Selector Type menu


Styling Links


Styling Links
Dreamweaver CS4 provides a powerful and easy
navigation building tool-> the Spry Menu Bar.
Each menu button can even support two levels of
pop-up submenus


Styling Links
Adding a Menu
– In the document window, click where you want
to insert the menu.
– Click the Insert Spry menu button on the Layout
category of the Insert panel


Creating a Navigation Menu
Adding a Menu
– In the document window, click where you want
to insert the menu.
– Click the Insert Spry menu button on the Layout
category of the Insert panel


Creating a Navigation Menu

– Depending on the type of menu you want,
choose either the Horizontal or Vertical button
and then click OK.
– You can change and add links using the
Property inspector


Adding, Editing, Removing Links
A Spry menu supports up to three levels of
menus.
– The main navigation buttons always appear on
the page.
– Each of those main buttons can have its own
pop-up menu which only appears when a visitor
mouse over the particular button. Each button
on the second level of menus, can have another
pop-up menu.


Adding, Editing, Removing Links
To edit one of the main navigation buttons:
– Select the button’s label in the left-hand column
of the Property inspector.
– In the Text box, change the label to the text you
want to appear on the navigation button
– Then add a link by using the “Browse for File”
button or typing the URL in the Link box You
can leave the Title and Target boxes empty

Adding, Editing, Removing Links
– To add a button to the main menu, click the +
button above the left-hand column.
– To delete a button on the main nav bar, click its
name in the left-hand column, and then click the
– (minus) button at the top of the column


Adding, Editing, Removing Links
– You can also rearrange the order of the buttons
by selecting a name from the list and clicking
the up or down arrow.
– When Dr. inserts a Spry menu, it also adds a
bunch of files to your site. These files are placed
in folder Spry Assets in site’s local root folder.
– These files control the look and functionality of
the menu: one CSS file, one JavaScript file, and
some image files for the arrows used to identify
buttons with submenus