Dreamweaver 8.0 Tutorial —- Properties of CSS Styles (I)

admin — Mon, 26 Oct 2009 13:00:00 +0000

When building a new website by dreamweaver8.0, we sometimes need to adjust a mass of texts in different web pages part. How can we make it quickly and easily? You have guessed it! We need CSS styles to help us. CSS is short for the Cascading Style Sheets. When to adjust the whole page elements, we just need to modify the CSS styles rules. It is a convenient way to modify and beautify the web pages, which can reduce our work force. Now let us learn properties of CSS styles.

Now open the class rule definition dialog box. In the category list, at the left of the dialog box, you can find eight list items. Let us introduce them one by one, and create a new CSS styles.

First, in the Type options, Font is used for setting the font of texts. In the same way you can set the size, style, weight and so on. It is very simple. As the following picture showing, we set Size as 12, and so on.

Second, in the Background options, we can set the background color and background image. The Repeat list is used for arranging the image’s array, extending in vertical or horizontal or not. The Attachment list is to set the image rolling or not to adapt to the motion of the objects. Horizontal and vertical positions are used to set the background image’s position. Here we set the Background Color as “#CCFFFF”, and choose an appropriate picture for the Background image.

Third, in the Block options, we can use the Word spacing list to reduce or increase the spaces between words. Also, the letter spacing list is used for adjusting the spaces between letters, Vertical alignment for aligning the elements, text indent for the first rows’ indention of paragraphs. In addition, Whitespace can decide how to deal with the whitespaces in the text.

OK. Now click OK, and a new CSS style named .ys is created. Let us apply it into the text. Select the text that you want to apply the CSS style.

Then, in the Styles list, select the .ys style. One of the impacts will like this: the background image is below the text. You can look other impacts by doing it yourself.

Now, you can see attracting CSS impact. Have you been interested in it? We will introduce more about CSS in the future.

Dreamweaver 8.0 Tutorial —- Some Special Link Styles

admin — Sat, 24 Oct 2009 13:00:00 +0000

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.

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.

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”.

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.

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.

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.

DoNotYet.com » Style

Dreamweaver 8.0 Tutorial —- Properties of CSS Styles (I)

Related Posts

Dreamweaver 8.0 Tutorial —- Some Special Link Styles

Related Posts