Home
》》》》》》》1
dreamweaver tutorial Application examples CSS stylesheet Thu Dec 05, 2013 4:37 am
Admin
Admin
To make beautiful pages must use the CSS. Cascading Style Sheets (CSS) is a set of formatting rules that control the appearance of web content . CSS style allows you to control many properties using only HTML control. The importance of CSS is not to say , say it clear CSS can be written a large book . The purpose of this paper is to think through an article , grasp the most fundamental and important application of CSS .
Objectives to be achieved : : The first part of the text into a web page nice 12 pixels (px) size.
Method: through the " Redefine HTML" tab , define td (td is the cell label ) font size of 12 pixels (px). Because the entire web content on the table , but also in the cell , it may redefine the cell style by changing all the content on the cell Gerry . Of course, the re-definition of the form tag table, you can also achieve the same effect.
Condensed steps: Open the Styles panel → select " Redefine HTML" tab → select redefine the label , such as td → to the selected label ( for example, td) is defined CSS → a defined tag pages on the well in types.
1 Open a Web document.
2 Open Styles panel.
3 Click "New CSS Style " button .
4 In the "Type" , select the "redefinition HTML" tab.
5 Select td tag . Td label that represents a cell .
6 Select the category of " type ."
7 Set Font : Select the font , font if there is no need to , you can edit the font list , see Part II .
Size : Set the font size, nice text size is 12 pixels (px) and 9 points (pt) are two, both about the same effect .
Line-height : row height is the distance from a line of text and another line between words , in order to facilitate reading, the row height setting big point of it . Can be set between 15 pixels to 25 pixels. Used in Example 20 pixels.
Modified : For plain text, select None. For the link, you can choose underline , overline underline , no other types.
Color: Black most suitable for reading , followed by gray, white. Link default blue color too , if the entire page is a link , use the blue can hardly distinguish the role , and very ugly. Do not use the recommended default blue pages !
8 Press the "OK " button , an application of the CSS pages on the well.
Part II: Edit Font List .
1 Click the down arrow font bar , open the Edit Font List .
2 In the Edit Font List window, click the plus button .
3 Select a font , such as Times New Roman, press the left arrow button.
4 Continue to add fonts , select a font , such as Arial, press the arrow button to add .
Description: A list of fonts in a variety of fonts , such as " Founder, Arial, Helvetica , Chinese in Song " , the visitor computer started from the very beginning of the Founder font , if there is no corresponding Founder fonts , on the implementation of Arial, Times New Roman did not , on the implementation of bold, if not in the list of fonts , the system will be replaced with the default font .
5 can repeat the above steps to add other combinations of fonts.
Part III: redefine the body tag , so that the contents of the application form style outside . If a Web page , in addition there are the contents of the table , you need to define the body tag .
1 defines a cell without a defined body of the page.
2 Choose Redefine "body" tag . The method according to the first part of the definition of "body" tag .
3 defines the body of the page.
Part IV: Custom Forms tab. If you are using a form on a Web page , you need to redefine the form tag .
A definition input labels.
2 Define select labels.
3 Definitions textarea tags .
Part V : Definitions layer corresponding label . Layer corresponding label is div.
Part VI : Definitions anchor tags . That is about the link tags. Anchor corresponding label is a.
A default anchor tag pages , links are underlined , blue. This link is difficult to see !
2 Select the tab drop-down bar a.
3 Define a CSS style . Choose size 12 pixels ; modification select None ; choose a dark gray color , and black can distinguish text .
4 redefine the anchor tag page.
Part VII : Modify the style sheet.
1 In the CSS Styles panel, click the "Edit Style " radio button, then click the lower right corner of the "Edit Style Sheet " button .
2 for CSS styles to make some changes . Examples are the color becomes lighter .
3 Modify the style pages.
The basic need to define the style of a web page on the definition of good, style web applications directly on the new definition. If necessary, you can also define the style of other labels , such as the definition of the level of the color of the label hr .
When you create CSS, according to personal preferences, choose a way to use CSS . If you want to use the same style control multiple document formats , the use of " external CSS style sheet " is the easiest way . If " only the CSS document " like simple steps, or only one page needs to apply a CSS style sheet , then use .
The main contents :
1 " only to the document CSS" creation and application ;
2 Create the "external CSS style sheet ," the . ;
3 links " external CSS style sheet " file ;
4 , " the only document CSS" convert " external CSS style sheet " ;
5 " external CSS style sheet " into " the only document CSS";
6 Use the " snippet " function reuse " only the CSS document ."
When you create CSS in Dreamweaver, you can choose " is defined in the document " Creating a CSS style sheet and one of the "New Style Sheet file ." " Is defined in the document " The role only in the current document ; "New Style Sheet File" to create an independent external CSS style sheet file , multiple documents can be linked to an external CSS style sheet file.
1 . " The document only CS]
Objectives to be achieved : : The first part of the text into a web page nice 12 pixels (px) size.
Method: through the " Redefine HTML" tab , define td (td is the cell label ) font size of 12 pixels (px). Because the entire web content on the table , but also in the cell , it may redefine the cell style by changing all the content on the cell Gerry . Of course, the re-definition of the form tag table, you can also achieve the same effect.
Condensed steps: Open the Styles panel → select " Redefine HTML" tab → select redefine the label , such as td → to the selected label ( for example, td) is defined CSS → a defined tag pages on the well in types.
1 Open a Web document.
2 Open Styles panel.
3 Click "New CSS Style " button .
4 In the "Type" , select the "redefinition HTML" tab.
5 Select td tag . Td label that represents a cell .
6 Select the category of " type ."
7 Set Font : Select the font , font if there is no need to , you can edit the font list , see Part II .
Size : Set the font size, nice text size is 12 pixels (px) and 9 points (pt) are two, both about the same effect .
Line-height : row height is the distance from a line of text and another line between words , in order to facilitate reading, the row height setting big point of it . Can be set between 15 pixels to 25 pixels. Used in Example 20 pixels.
Modified : For plain text, select None. For the link, you can choose underline , overline underline , no other types.
Color: Black most suitable for reading , followed by gray, white. Link default blue color too , if the entire page is a link , use the blue can hardly distinguish the role , and very ugly. Do not use the recommended default blue pages !
8 Press the "OK " button , an application of the CSS pages on the well.
Part II: Edit Font List .
1 Click the down arrow font bar , open the Edit Font List .
2 In the Edit Font List window, click the plus button .
3 Select a font , such as Times New Roman, press the left arrow button.
4 Continue to add fonts , select a font , such as Arial, press the arrow button to add .
Description: A list of fonts in a variety of fonts , such as " Founder, Arial, Helvetica , Chinese in Song " , the visitor computer started from the very beginning of the Founder font , if there is no corresponding Founder fonts , on the implementation of Arial, Times New Roman did not , on the implementation of bold, if not in the list of fonts , the system will be replaced with the default font .
5 can repeat the above steps to add other combinations of fonts.
Part III: redefine the body tag , so that the contents of the application form style outside . If a Web page , in addition there are the contents of the table , you need to define the body tag .
1 defines a cell without a defined body of the page.
2 Choose Redefine "body" tag . The method according to the first part of the definition of "body" tag .
3 defines the body of the page.
Part IV: Custom Forms tab. If you are using a form on a Web page , you need to redefine the form tag .
A definition input labels.
2 Define select labels.
3 Definitions textarea tags .
Part V : Definitions layer corresponding label . Layer corresponding label is div.
Part VI : Definitions anchor tags . That is about the link tags. Anchor corresponding label is a.
A default anchor tag pages , links are underlined , blue. This link is difficult to see !
2 Select the tab drop-down bar a.
3 Define a CSS style . Choose size 12 pixels ; modification select None ; choose a dark gray color , and black can distinguish text .
4 redefine the anchor tag page.
Part VII : Modify the style sheet.
1 In the CSS Styles panel, click the "Edit Style " radio button, then click the lower right corner of the "Edit Style Sheet " button .
2 for CSS styles to make some changes . Examples are the color becomes lighter .
3 Modify the style pages.
The basic need to define the style of a web page on the definition of good, style web applications directly on the new definition. If necessary, you can also define the style of other labels , such as the definition of the level of the color of the label hr .
When you create CSS, according to personal preferences, choose a way to use CSS . If you want to use the same style control multiple document formats , the use of " external CSS style sheet " is the easiest way . If " only the CSS document " like simple steps, or only one page needs to apply a CSS style sheet , then use .
The main contents :
1 " only to the document CSS" creation and application ;
2 Create the "external CSS style sheet ," the . ;
3 links " external CSS style sheet " file ;
4 , " the only document CSS" convert " external CSS style sheet " ;
5 " external CSS style sheet " into " the only document CSS";
6 Use the " snippet " function reuse " only the CSS document ."
When you create CSS in Dreamweaver, you can choose " is defined in the document " Creating a CSS style sheet and one of the "New Style Sheet file ." " Is defined in the document " The role only in the current document ; "New Style Sheet File" to create an independent external CSS style sheet file , multiple documents can be linked to an external CSS style sheet file.
1 . " The document only CS]
