Dreamweaver Create colorful text links

dreamweaver| link text links can be said to be the most common page elements of the page, the default text link style is an underlined effect, and this constant appearance may make many friends want to change it to fit the overall effect of the page, since the style sheet has been widely used, This wish is now very convenient to realize. Today I will introduce you to use style sheet to create colorful text link effect. I will be divided into introductory, advanced and high-level articles for you to introduce, all the link style effect we will be in the Dreamweaver style editor, the use of the style editor in Dreamweaver Please refer to the previous introduction. The link style browsing effect is as follows; specific page browsing look here, please .

First, preparatory work

We will first create a basic link style, and other styles will add a custom class class to the base.

1, shift+f11 Open the Style panel, click the New Style button, such as figure I;

2, in the Type option to choose Use CSS Selector, create a default link style, such as figure II;

3, as shown in figure three to set the default link style is no underline, the font for the song body 9pt, other colors, etc. are not set, we will be in the following for each class classes set separately.

4, define style class. Each of our following style styles defines a separate class and assigns it to the linked text. The steps are as follows: Click Add to open the new definition style panel and choose make custom Style (class) to define your own style class. As shown in Figure four;

5. Add style classes for linked text. In the Dreamweaver Select a link text, the window at the bottom of the Quick tab selection Bar Select the label, right click on this tab, select Set class will customize the style of the text can be given, as shown in Figure five;

6, the other link text style of practice and this is the same, later I will not be introduced. In this tutorial, you can create a link-style approach that defines the hover state. I also no longer introduce, just prompt the definition of direct input [. T1:hover] can be.

　　Second, the primary link style

This part of the link effect we will complete in the Style editor type category, how to create and set I no longer detail, only to complete the panel diagram for everyone to see, and a little introduction.

1. Common links. As shown in Figure six;

Common links are set in the first item type in the category category of the style editor, color defines the colors of the link font, decoration defines the style of the link, divided into the following categories:
Underline: Underline
Overline: Underline
Line-through: Delete Line
Blink: Flashing Line
None: No Dash

Several other link styles in this section are achieved by changing the combination of dashes.

2, no underline links, such as Figure seven;

3, double underline links, such as Figure eight;

4, delete line links, such as Figure nine;

Third, advanced link style

Next i introduce an alternative link style definition method, which is mainly to take advantage of the border attribute in the style sheet instead of the plain link, because border has more control parameters and styles, so it can achieve some special effects. Let's take a look at the panel below, as shown in Figure 10;

The border option includes width (underline width), color (underlined color), Style (dash type) three parts, and each part can set different parameters for different borders, which is an effect that the normal link dash cannot achieve.

You need to be reminded that using this method to define a link style is also a necessary condition: you must define the box property in the style, as shown in Figure 11;

This is because border is a block element in a style, and we have to define a block element before it can make border work. We just arbitrarily define the width or height of the box option, the specific values you can try to see the effect, I defined here is the height of 0. Let's see what we can do here.

1, alternative link style. Set as shown in Figure 12;

2, custom underline color, we can define the underline and the text of different colors, this is the ordinary link text is not possible to achieve the effect, as long as the color of the border and the color of the text to define the difference, as shown in Figure 13;

3, custom underline distance. The distance of the line we can set in the box category, just change the value of padding, in this case we set Padding-bottom 5pix, as shown in Figure 14;

4, the custom dash length and alignment method. Furthermore, we can define the length and alignment of the dash, and open the box category to set the width to 200, as shown in Figure 15, and set the block category's text align to center, that is, center alignment, figure 16;

5, custom double underline effect. Change the style in border to change the appearance of the underline, which sets the style to double, and sets the bottom to 3pix to achieve the effect of double dash. As shown in Figure 17;

　　Four, advanced link style

By combining the techniques described above, we can also create more complex text link styles, and here are three examples.

1, the definition of block links. First, add a background color to the link, as shown in Figure 18;

Then add four borders for text links to achieve flat block text links, such as Figure 19;

2, the definition of button-like text links. Change the style of the border and define Border-style as outset, as shown in Figure 20;

Define width and Height in the box option to define the width and height of the button, and define padding as 2pix to make the link text and the button have 2pix spacing around, as shown in Figure 21;

3, the definition of special effects text links. The CSS stylesheet also contains a set of special effects filters that we can then combine with the filter and the previous parameters to create a particular link style. In this example I created a text link that uses the Blur filter and has a border effect. As shown in Figure 22;

4, the definition of static background switch effect. This example is to achieve the effect of background switching by setting different background images for the common state and hover state of the linked text. See figure below:

5, the effect of dynamic background switch. This effect is essentially the same as the previous example, except that a animated GIF picture background is defined in the hover state. And this picture needs a bit of skill is to set the loop for once, and at the end add a frame, set the frame time for a large value, such as 10000. This allows the animation to stop after it has been executed. To improve the speed at which the effect is performed, we also need to add a preload/doc/webpage/images/images behavior to the Dreamweaver. This requires opening the behavior panel and adding preload/doc/webpage/images/images behavior, as shown in the figure:

We can put the last two link styles need to use the four pictures are preloaded, the following figure:

　　V. Summary

I will introduce so many links style, with the set link text hover state, can achieve very beautiful effect, specific page browsing please see here , hope friends according to the above ideas, combination to create more link text style. Remember, a style sheet is like an iceberg with a treasure in a Web page, and today we just opened up a little corner of the iceberg, and more treasures are waiting for you to dig.