Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to design colorful text links in Dreamweaver". In daily operation, I believe that many people have doubts about how to design colorful text links in Dreamweaver. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to design colorful text links in Dreamweaver". Next, please follow the editor to study!

Text links are the most common page elements in web pages. In the default state, text link styles are underlined. This constant appearance makes the page unable to highlight personality and meet the needs of layout. In order to make text links in line with the overall effect of the page, you can use CSS (style) to achieve a variety of text links.

Effect description

When you place the mouse over the text, the text style will change, such as no underlining, text flashing, and so on. Combined with other style attributes, you can also implement button text links, as shown in figure 22-1.

Creative conception

The Text-decoration attribute is used to control hyperlinks, and in combination with the Border-Style attribute, more complex styles can be implemented.

Operation steps

Step 1 Primary Link Styl

There are five types of decorations in the Type suboption in the CSS style definition Settings dialog box. By clicking on different modifiers, you can easily set different primary link styles, as shown in figure 22-2. Let's take the "none" underscore setting as an example, and the settings of other styles are similar to this example.

(1) create a CSS style sheet file. Press the Shift+F11 key to open the CSS style panel, click the [New style] button, click the [Advanced (ID, context selector, etc.)] option in the pop-up [New CSS style] dialog box, then select [a:link] in the selector drop-down menu, and click the [OK] button, as shown in figure 22-3.

(2) Editing styles. After you save the stylesheet file (named css.css), start editing the style. Set the default link style to no underscore, font to Song 12pt, other colors and other parameters are not set, as shown in figure 22-4.

(3) create and set the style ".t1". Click the [New style] button again, in the [New CSS style] dialog box, click [Class (can be applied to any label)] option, define your own style class, and then set the name to ".t1" ([name] text box is used to specify the class, the user can fill in as needed, its format is ". *"), and finally click [define in css.css], and click [OK] after everything is set. The next settings are the same as in the second step, and then click OK, as shown in figure 22-5.

(4) enter the word "no underscore" in the document window. Select the "ununderlined" paragraph, then open the property settings interface, and select "T1" in the style list, as shown in figure 22-6. This applies the style to the selected web page element, and the reader can save the web page file and preview it in the browser, where you will find that the text size is 12px and the underscore of the hyperlink is gone.

Step binary style Link

With the comprehensive application of the techniques described above, you can also create more complex text link styles.

(1) flat block text link. Double click ".t1" in the CSS stylesheet panel to open the T1 stylesheet, where you want to define its block link style. Click the [background] option, first add a background color to the link, and select "Red" here, as shown in figure 22-7. Select "Border" in the classification bar, and then select "solid Line" in the "above" list to add a border around the text link to achieve a flat block text link, as shown in figure 22-8.

Figure 22-7 sets the color figure 22-8 sets four borders

(2) three-dimensional four-frame text link. Select "Border" in the classification bar, and then set the width and height values to 1px, so that there is a 1px distance between the link text and the button, so that the four borders look three-dimensional, as shown in figure 22-9.

(3) define special effects text links. The CSS stylesheet also includes a set of special effects filters. Create a text link that uses the Blur filter, and the link also has a border effect. Select the [Blur (Add=?,Direction=?,Strength=?)] option in the filter drop-down menu, and then change the filter parameter to "Blur (Add=ture,Direction=45,Strength=1)", as shown in figure 22-10.

Tip: the Blur filter has three parameters, which are Add, Direction and Strength.

The Add parameter has two parameter values, True and False, which set whether or not to add blur to the picture. The Direction parameter is used to set the direction of the blur. The blur is done clockwise, where 0 °represents a vertical upward, one unit for every 45 °, and the default value is 270 °to the left. The corresponding relationship between angle and direction is shown in Table 22-1.

The Strength parameter value can only be specified as an integer, which represents how many pixels of width will be affected by blur. The default value is 5 pixels.

At this point, the operation of this example is complete, and users can change the CSS style as needed to achieve different text link features. CSS style is widely used. By skillfully mastering the use of CSS style, we can quickly format and control web page elements, so as to beautify the page and improve work efficiency.

At this point, the study on "how to design colorful text links in Dreamweaver" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.