Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Text Styles - Adobe Dreamweaver CS3

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Adobe Dreamweaver CS3

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Text Styles - Adobe Dreamweaver CS3

In Dreamweaver, we can alter text properties with the Text menu or the Property Inspector.

Text Styles

In Dreamweaver, we can alter text properties with the Text menu or the Property Inspector (Fig. 20.2). Using these tools, we can quickly apply heading tags (<h1>, <h2>, etc.), list tags (<ol>, <ul>) and several other tags used for styling text. Text can also be aligned left, right or centered, resized, indented and colored.

 

Create a new document, switch back to Design view and type the text, as shown in the screen capture of Fig. 20.9, into the Document window. Drag the mouse to highlight one line at a time and select the corresponding heading tag from the Format pull-down menu in the Property Inspector. Then, highlight all the text by pressing <Ctrl>-A, and click the align center button in the Property Inspector. The resulting XHTML produced by Dream-weaver is shown in Fig. 20.9.

 

As you can see, Dreamweaver is prone to produce somewhat inefficient code. In this case, for example, using Cascading Style Sheets (CSS) to center the text would have been more efficient. At the end of this section, we discuss how to integrate CSS into your web page without having to edit the XHTML in Code view.

 

1    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

3    <html xmlns="http://www.w3.org/1999/xhtml">

 

4    <head>

 

5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

6    <title>Untitled Document</title>

 

7    </head>

8

9    <body>

 

10   <h1 align="center">Level 1 Heading</h1>

 

11   <h2 align="center">Level 2 Heading</h2>

 

12   <h3 align="center">Level 3 Heading</h3>

 

13   <h4 align="center">Level 4 Heading</h4>

 

14   <h5 align="center">Level 5 Heading</h5>

 

15   <h6 align="center">Level 6 Heading</h6>

 

16   </body>

 

17   </html>

 

 


Dreamweaver is capable of much more extensive text formatting, such as creating mathematical formulas. For example, type

 

e = mc2

 

into a new WYSIWYG window, then highlight the text. You can now change the format-ting of the equation by selecting Style from the Text menu, and selecting Code. The Code option applies a code element to the highlighted text, which designates formulas or com-puter code. Many other useful text-formatting options are located in the Text menu, as well. Click the Code button in the Document toolbar to view the code, and find the 2 in the equation. Surround the 2 with a <sup></sup> tag. The <sup></sup> tag formats the enclosed text as a superscript. Notice that after typing <sup>, Dreamweaver automat-ically completes a matching end tag (</sup>) after you have entered the </ characters. Click the Design button in the Document toolbar to view the fully formatted text (Fig. 20.10).

 

The formula can be further emphasized by selecting a Color… attribute from the Text menu. You can also access most of the elements in the Text menu (though not the color attribute) by right clicking highlighted text.


The Property Inspector is also useful for creating lists. Try entering the contents of a shopping list, as shown in Fig. 20.11, and applying the Unordered List style to the list elements. Apply an h2 element to the title of the list.

 

Select List from the Text menu for more list-related tags, such as the definition list (<dl>). There are two list elements in a definition list—the defined term (<dt>) and the definition data (<dd>). Figure 20.12 shows the formatting produced by a definition list and the code Dreamweaver uses to produce it.

 

To apply the definition list as shown, select Definition List from the List submenu of the Text menu. In the Document window, type the first term you want to define. When you press Enter, Dreamweaver changes the style to match that of a definition. Pressing Enter again lets you enter another defined term. The bold style of the defined terms is applied by clicking the Bold button in the Property Inspector, which applies the strong element.


Fig. 20.11 | List creation in Dreamweaver.

 

1    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

3    <html xmlns="http://www.w3.org/1999/xhtml">

 

4    <head>

 

5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

6    <title>Untitled Document</title>

 

7    </head>

8

9    <body>

10   <dl>

 

11         <dt><strong>FTP</strong></dt>

 

<dd>File Transfer Protocol</dd>

13         <dt><strong>GIF</strong></dt>

 

14         <dd>Graphics Interchange Format</dd>

 

15         <dt><strong>XHTML</strong></dt>

 

16         <dd>Extensible HyperText Markup Language</dd>

 

17         <dt><strong>PNG</strong></dt>

 

18         <dd>Portable Network Graphics</dd>

 

19   </dl>

 

20   </body>

 

</html>


Creating Style Sheets

Dreamweaver provides powerful tools to integrate CSS easily into existing code. Type

 

Deitel Textbooks

 

Internet & World Wide Web How to Program, 4/e

 

Java How to Program, 7/e

 

Visual Basic 2005 How to Program, 3/e

 

C# For Programmers, 2/e

 

into the WYSIWYG display. Make the last four lines into unordered list elements using the method described above.

 

Select CSS Styles from the Window menu, or press <Shift>-F11. The CSS Styles panel will appear on the right-hand side of the page (Fig. 20.13). Now, click the New CSS Rule icon (Fig. 20.13) to open the New CSS Rule dialog. Next to the Selector Type: prompt, select the Tag option. This designates your style selections to the particular tag selected in the Tag: prompt. Enter ul into this menu’s text box, or select it from the drop-down list. Next to the Define in: field, select the This document only radio button to create an embedded style sheet. The (New Style Sheet File) option generates an external style sheet.


Click OK to open the CSS Rule definition dialog. Type should already be selected in the Category menu. Next to the Decoration: field, check the underline box. Now select Background from the Category list, and enter #66ffff into the Background color: field. Click OK to exit the dialog and return to the Design view. The text within the <ul> and </ul> tags should now appear as in Fig. 20.14.


Now click the New CSS Rule icon to bring up the dialog again. This time, select Class under Selector Type:, and next to Name: enter special. In the CSS Rule definition dialog, select x-large from the Size: menu. Click OK to return to Style view, and highlight the word Deitel. Then right click the text and select CSS styles from the menu that appears. In the new menu, click special to apply the new class to the selected text. Your page should now appear as in Fig. 20.14.

 

Select the All option under the CSS Styles tab of the CSS Styles panel. There should now be a <style> tag in the All Rules window. Click the plus sign to its left to expand the category. Note that the two style rules that you created are present in this menu, and that additional properties can be added by selecting the rule, then clicking the Add Property link in the panel. Also, clicking a property’s value in the CSS Styles panel creates a drop-down menu, allowing you to specify a new value for the property.

 

Switch to Code view to see the style sheet that Dreamweaver has generated for you. Note that a <span> element was automatically created to contain the special class.

Please refer to

 

www.adobe.com/devnet/dreamweaver/css.html

 

for additional information on using CSS in Dreamweaver.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.