Except common link styles, there are some special link styles, by which we can enrich the link styles. Always we need some special styles to beautify the web pages. In these cases, it is very attracting that the objects change into another style when the mouse rollovers, passes-by, or click them. Compared with the common link styles, the special link styles may be difficult to learn. But follow the following steps, you can learn it easily. Now let us learn some of these special link styles, like the following two examples.

www.DoNotYet.com 20091019000 Dreamweaver 8.0 Tutorial ---- Some Special Link Styles

1. How to change the shape of hyperlink when mouse passes by

We can achieve this impact by using CSS styles.

Firstly, select Text-CSS styles-new command. Open the New CSS Rule dialog box. Select Class type. Put “.ys” in the Name textbox, and define in “this document only”. Click OK and open the CSS Rule definition for .ys dialog box.

www.DoNotYet.com 20091019001 Dreamweaver 8.0 Tutorial ---- Some Special Link Styles

www.DoNotYet.com 20091019002 Dreamweaver 8.0 Tutorial ---- Some Special Link Styles

Secondly, select extensions, and select help in the cursor list box. As the above pictures show. Click OK, building new CSS styles. Choose the objects that are needed to apply new CSS style, and right-click on the new CSS style, select “apply”.

www.DoNotYet.com 20091019003 Dreamweaver 8.0 Tutorial ---- Some Special Link Styles

Finally, save the html. Press F12 to preview the impact. When you put your mouse on the text, you will find your mouse changing into an interrogation.

www.DoNotYet.com 20091019004 Dreamweaver 8.0 Tutorial ---- Some Special Link Styles

2. How to open new pages in a new explore window.

After clicking a link, open the web page in new explore window. The steps are like this:

Firstly, select the text you want to create a link, setting a link to it (look up the article named “the Creation of hyperlink and Email Link” for more details).

Secondly, in the properties inspector, open the target textbox and select _blank.

www.DoNotYet.com 20091019005 Dreamweaver 8.0 Tutorial ---- Some Special Link Styles

Thirdly, save the document, and preview the impact. Left-click the linked image and you will see the new image opened in a new explore window.

Related Posts