Unit 4. Working with text (I)

Unit 4. Working with text (I)

Tutor 4,1

In this unit we'll learn how to change the text properties and to create CSS styles, that will allows us to assign styles to our texts.

Text Format

The Selected text format can be defined through the Text menu, and through the Properties inspector. We'll see the alternatives offered by the Properties inspector, although they are less than the ones the Text menu offers. Format: Here we'll select a paragraph format previously designed for HTML, it can be header, paragraph or pre-formatted. The headings are used to establish titles inside a document. The preformatted format works to make the text appear such as it has been written. For example, if between two words you introduce many spaces they will be considered as only one but when you establish the preformatted format, the spaces will not be changed. Font: Lets you select a set of fonts. There are fonts sets instead of only one, because it's possible that if you set just one font, the user could not have that font in their PC. So, if you select a set of fonts, if the user doesn't have one of them, another is would be applied from the set. For example, if we choose Arial, Helvetia,Sans-serif, we'll see the text with Arial font, but if it doesn't exist in our computer, we'll see the text in Helvetia, and so on. Size: Lets you change the text size. We can indicate the size in different units, such as pixels, centimeters, etc.. Color: Lets you select the font color, ignoring the defined color in the Page properties. If no color has been established here or in the Page properties, the text color will be black by default. Style: These buttons let you establish whether the text will be bold or italic. Through the Text menu you can underline the text and do many other things. This option isn't in the Properties panel. It's rarely used because links are underlined, and thus, underlining normal text could make users think it's a link. Align: Through these buttons it's possible to establish the text aligment in four different ways: left, center, right and justified. List: These buttons allow you to create bullet lists, or enumerated ones. Text indent: These two buttons let you set, or clear the text indent. The text indent is a kind of margin which is established at both sides of a text. In this case, buttons are referred to the text left indent.

To practice you can perform the Step by step exercises to insert text and modify it's properties

Creating Lists

You can insert text in a list mode. and this list can be enumerated or with bullets. To make a list from a previously introduced text in the document, you just have to select it and click on the right list option, through the Properties inspector, or through the Text menu. The bullet list (unordered) is selected through the button, while the enumerated list (ordered) is selected through the button.

Example of a enumerated list (ordered): Pack the bag Pull out the books of that day Introduce the books of the next day Put on my pijamas Brush my teeth Turn on the alarm

Example of a list with bullets (unordered): Dog Cat Birds Canary Parrot Hamster

To establish lists nested inside others, such as the previous examples, you need to add a text indent to the elements of the list you want to be part of the nested list.

Through the Text menu, and then the List option, it's possible to access the properties of the selected list. You need to previously select the text list or have the cursor in any part of the list to activate this submenu.

In the List properties window you can specify the list types (with numbers or bullets), the type of the numbers or bullets you will use (in the Style field), and in case of ordered lists, the number where the count starts.

 

Tutor 4,2

CSS Styles

In the Text menu, select the Style option, there are a set of predefined styles that can be applied to the selected text. You can define another set of styles, applicable to paragraphs or selected words. These new styles, called CSS Styles, are used to combine a set of text attributes - they can be the color or the size; so isn't necessary to assign those atributtes one by one each time you want to repeat the assigning of these same values or other parts of the text. Many of these options can be used as well to define image attributes, or other characteristics that are not available from HTML tags, like the background color for the text, etc. They even allow you to apply a style in all of the HTML labels of the same type, for example the A HREF label, which corresponds to hyperlinks. This way, all hyperlinks would acquire a defined appearance in this style. A CSS style is no more than a set of format rules that controls the aspect of a web site's content. CSS styles give flexibility and control to the view you are looking for in a Page, from the exact position of the elements to the font designs and specified styles. One of the big advantages of CSS styles is that they have a simply updating capacity; when you update a CSS style, the format of all the documents with that style are automatically updated. The disadvantage of working with style sheets is that some browsers cannot support them, although these browsers are usually older versions, and so this will rarely happen. The characteristics we apply to a text automatically creates CSS styles, which are inlayed in the actual document's heading. Let's see that: To create a personalized CSS Style: 1. In the document, select the text you want to apply the specific characteristics to. 2. In the Properties inspector, modify the text format properties, and establish the font attributes, and the paragraph you want.

Dreamweaver will automatically create a new style with the name Style1 or Style2 or Style3,... depending on the previous created names and styles. It will appear as the name: Style1 in the Style window of properties panel.

You can also change the name of the style, it's preferable to the style to have a name referring to the type of text to which it will be applied. To do this, unfold the style list and select the Change name... option. A dialog window will appear to introduce the new name as the image below.
Then write the new name without blank spaces. In this case: redstyle. Click on OK, and you will see a panel with the name Results. Close this window. This way you can create a style and add it to a document. Each new style that is created is added to the style list, and you can access them quickly through the Text menu, and then selecting the CSS Styles option. In the CSS panel you can verify that the new style has been automatically added.

If you want to learn more about the CSS panel click here . Now, you have a paragraph in which the previous CSS style has been applied. Class Style Text In the Page's HTML code, the text is like this : <head> <style type="text/css"> <!-- .redstyle { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #FF0000; } --> </style> </head> <body> <p class="redstyle">CSS Style Text</p> To apply a personalized CSS Style: In the document, select the text to which you want to apply the CSS style, or place the mouse in a paragraph to apply the style to the whole paragraph. If you select a text rank inside a paragraph, the CSS Style will only affect the selected rank. In the Properties Inspector select the style created by us from the list that appears when you unfold the Style field. Tutor 4,3