5.1. Understanding Basic Formatting and Positioning

In this section, I help you understand some of the very basic formatting features of SharePoint Designer. Later, you might decide to implement functionality provided by these features by using separate CSS styles. However, this section should help you develop understanding about how these features work and also explore some code behind the implementation.

5.1.1. Setting fonts for text

Fonts and font styles help implement text formatting on Web pages. You implement basic font formatting in SharePoint Designer by using the Font dialog box, as shown in Figure 5.1. You access the Font dialog box by either choosing Format Font or by simply right-clicking on the Web page in the Design view and then choosing Font from the popup menu.

Figure 5.1. The Font dialog box with the Font tab selected

To apply a font to text on a Web page, follow these steps:

  1. Open the Web page in the Design view and then select the text to which you want to apply a font. Double-clicking a word in a line of text selects that word. Clicking three times successively selects a whole paragraph.

  2. Right-click on the selected text and then choose Font from the popup menu. The Font dialog box opens, allowing you to choose the font, font style, and size you want to apply to your text.

  3. Using the Font list in the Font tab, choose the font that you want to apply to the selected text. The Font list displays the font families and the fonts installed and available for use on Web pages. Your selection is shown in the box just above the Font list. For this exercise, choose Tahoma from the Font list.

    NOTE

    You can press Ctrl+Z to undo any changes made to a Web page. Ctrl+Y can be used to reapply the last change made. This comes in handy if you need to change only certain aspects of a page and don't want to access the Font dialog box for each change.

  4. Use the Font style list to choose the style for the selected text. You can choose to display the text in bold, italics, both, or neither. Choose the (Default Style) option (which actually means neither) in the Font style list for this exercise.

  5. You can use the Size box and list to either specify a size (in points) or choose from a set of predefined sizes. Choose a small size (such as 12 points) for the selected text.

  6. Click the Color dropdown menu to choose a color for the text. You can either choose from the standard colors shown in the default palette, custom colors that you created, or document colors that already exist in the document. You can also click More Colors to specify or create another color.

  7. Choose More Colors from the Color dropdown menu to open the More Colors dialog box, as shown in Figure 5.2. Here, you can specify the hex value that defines the color, create a custom color by using the Custom button, or choose from the hexagonal palette of colors by clicking Select. Also, a preview in the bottom-right corner of the dialog box shows the New and Current colors.

  8. Click Select to enable selection from the hexagonal palette in the dialog box. Choose the color you want to use by clicking on it in the hexagonal palette. The Value text field shows the hex code associated with the color, the Name text field shows the color name, and the preview shows the selected color.

  9. Click OK to view the preview of the selected color in the Preview section of the Font dialog box.

  10. In the Effects section, click the Underline, Overline, Strong, and Variable check boxes. The Effects section allows you to choose from some default effects that have been prepared for use. When you make a selection in the Effects section, some of the font styles may change. For example, clicking the Strong check box changes the selection in the Font style list to Bold.

  11. Click OK to apply the font to the selected text.

While the Design view of the Web page now shows the font formatting applied to the text, the interesting aspect is how SharePoint Designer applies this formatting. You can view the code that SharePoint Designer wrote for the previous steps by choosing the Code view of the Web page:

  • Style section:

    <style type="text/css">
   .style1 {
       font-family: Verdana;
       font-size: small;
       color: #CC6699;
       text-decoration: overline underline;
   }
   .style2 {
       font-style: normal;
   }
   </style>

  • HTML section:

    <p class="style1"><var class="style2"><strong>test</strong></
   var></p>

Figure 5.2. The More Colors dialog box

As indicated in the Code view, fonts are implemented by using a combination of CSS and HTML technologies. The font size, color, etc., are applied by using CSS styles (indicated by the class="style" code), and the Strong effect is applied by using the <strong> tag.

Many of the formatting options provided by the Font dialog box are also available by using the Common and Formatting toolbars, as shown in Figure 5.3. For example, you can use the Formatting toolbar to quickly choose a font for the selected text, define the font size and apply font styles, specify the background and foreground colors for lines and paragraphs, create borders for lines and paragraphs, etc.

Figure 5.3. The Common (top) and Formatting (bottom) toolbars

You can specify whether to use the <strong> tags for bolds and italics by using the Use <strong> and <em> when using bold and italics toolbar buttons check box in the General tab of the Page Editor Options dialog box, which you access by choosing Tools Page Editor Options. If you deselect this check box, SharePoint Designer uses the <b> tag to bold text.


You can also use the Character Spacing tab in the Font dialog box to specify settings for the spacing between the words and characters in the text. By default, the character spacing is set to normal. However, you can choose to either expand (or condense) the characters and specify the measure (by using the By list box) of the expansion (or condensation). In the next exercise, I help you understand how you can position the text by using the options in the Character Spacing tab:

  1. Create a new HTML Web page with some text paragraphs inside your Web site and open it in the Design view.

  2. Select a line of text in the paragraph on the Web page. Right-click on the selected text and then choose Font from the popup menu to open the Font dialog box, as shown in Figure 5.4.

  3. Click the Character Spacing tab, and in the Spacing dropdown menu, choose Expanded. Use the By list box to specify the amount of expansion.

  4. In the Position dropdown menu, choose Super.

  5. Click OK.

The selected text in the Design view appears positioned a little above the normal text of the paragraph. If you investigate the Code view of the Web page, this functionality is again implemented by using CSS with vertical-align and letter-spacing properties:

  • CSS section:

    <style type="text/css">
.style1 {
   letter-spacing: 5pt;
   vertical-align: super;
}
</style>

  • HTML section:

    <p>Show me how to <span class="style1">superscript</span></p>

Figure 5.4. The Font dialog box with the Character Spacing tab selected

Because all the fonts might not be available on the machine where your Web page is being viewed or supported by the browser being used to view the Web page, it's useful to apply fonts by using the font families. Font families allow you to apply fonts to text on Web pages by using a set of fonts rather than a single font. If one font isn't available, a browser can display the text by using another font in the font family. You can create font families in SharePoint Designer by using the Font Families tab in the Page Editor Options dialog box, as shown in Figure 5.5.

To create a new font family and use it to format the text on your Web page, follow these steps:

  1. Choose Tools Page Editor Options to open the Page Editor Options dialog box and then click the Font Families tab.

  2. In the Select font family list, click the (New Font Family) option.

  3. Choose Arial from the Add font list and then click Add. Repeat this step to also add Calibri, Tahoma, and Verdana to the new font family you just created.

  4. Click OK.

The new font family is now created and is available for use in the Font dialog box or the Common and Formatting toolbars.

The Default Fonts tab in the Page Editor Options dialog box specifies the default fonts to use for displaying text in the Design and Code views. The fonts you set here are for display purposes only and don't apply to the page itself. When you view the Web page in a browser, fonts that are actually applied to the text using the Font dialog box (or other features) are used.


Figure 5.5. The Font Families tab in the Page Editor Options dialog box

5.1.2. Working with paragraphs and indentation

By default, SharePoint Designer allows you to format text by using paragraphs. Whenever you press Enter on a Web page in SharePoint Designer, a <p> tag is inserted and a new paragraph is started. Most of the paragraph formatting that can be applied by using the SharePoint Designer user interface applies to the <p> tag by using CSS styles.

In the next exercise, you use the Paragraph dialog box, as shown in Figure 5.6, to implement paragraph formatting to selected text on a Web page:

  1. In the Design view, open or create a Web page that has text paragraphs.

  2. Select a paragraph of text in the Design view and then choose Format Paragraph to open the Paragraph dialog box.

  3. Choose Center from the Alignment dropdown menu. This aligns the selected text in the center of the Web page.

  4. In the Indentation section, type the values of the indentation for the paragraph from the left and the right sides as well as the indentation of the first line in the paragraph.

  5. In the Spacing section, type the spacing you want before and after the paragraph and between words in the paragraph. Also, type the spacing between the lines of the paragraph by using the Line Spacing dropdown menu. The preview at the bottom of the dialog box shows how the settings you make for the paragraph look.

  6. Click OK and then save the Web page.

If you investigate the Code view of the page where you applied the settings using the Paragraph dialog box, you see that most of the settings have been implemented by using CSS, with properties such as text-align, line-height, word-spacing, margin-left, etc.

One interesting feature provided by the Common and Formatting toolbars is to quickly format text lines and paragraphs by using predefined HTML and CSS styles. If you click the dropdown menu that has the Paragraph option selected, a list of available HTML tags, such as Headings (<h1>, <h2>, etc.) and Lists (<ul>, <ol>, etc.), are available for use on a paragraph. These tags format text in different ways, allowing you to choose the best formatting for representing the text. For example, the <ul> tag allows you to create a bulleted list in the text, while the <ol> tag allows you to create a numbered list.

NOTE

You can also increase or decrease the indentation of a paragraph or a line of text by using the Increase Indent Position (Ctrl+M) and Decrease Indent Position (Ctrl+Shift+M) buttons in the Common and Formatting toolbars.

Figure 5.6. The Paragraph dialog box

Choose Format Borders and Shading to apply borders and specify background colors and patterns for your text lines and paragraphs. In the next exercise, you use the Borders and Shading dialog box, as shown in Figure 5.7, to apply borders to a paragraph of text inside your Web page:

  1. In the Design view, open or create a Web page that has text paragraphs.

  2. Select a paragraph of text and then choose Format Borders and Shading to open the Borders and Shading dialog box.

  3. In the Setting section under the Borders tab, click Custom. The Settings section allows you to choose from Default (no borders), Box (creates a border on all four boundaries of the selected text), and Custom (allows you to choose on which boundary the border should be applied).

  4. In the Style list, choose double. The Style list allows you to choose from a list of styles that you can use for borders.

  5. Choose a color for the border by using the Color dropdown menu and then specify a width (in pixels) for the border.

    Figure 5.7. The Borders and Shading dialog box

  6. In the Padding section, type the values (in pixels) in the Left and Right boxes for applying padding to the left and right boundaries of the text paragraph. Padding specifies the amount of space from the border where the text begins.

  7. In the Preview section, click the appropriate buttons to apply the left and right borders to the text. The preview shows how the borders appear inside the Web page. You can also click in the Preview box to set the borders.

  8. Click the Shading tab and then choose the background and foreground colors by using the Fill section. The Preview section shows a minor preview of the background color that's applied to the paragraph. If you want to specify a background picture for the paragraph, you can do so by using the Patterns section.

  9. Click OK and then save the Web page.

The formatting is again applied in the Design view of the Web page. The borders and shading formatting is also applied by using inline styles.

NOTE

It's important to understand that most of the borders and shading formatting is implemented by using CSS styles. When the formatting is applied, it's not necessary for the Borders and Shading dialog box to pick the settings back from the Web page for modification with full fidelity (which might result in some confusion). To change the formatting, it's best that you clear the exiting style by using the Apply Styles task pane and apply a new one instead. To clear the existing style, select the associated text line or paragraph, and in the Apply Styles task pane, click Clear Styles. For more on the Apply Styles task pane, see Chapter 12.

If you used the Pattern section in the Borders and Shading dialog box to set a background picture for the selected text, you might be asked to save the picture locally inside your Web site if the picture doesn't reside inside the Web site. You can simply specify the folder location inside your Web site where you want to save the picture.

5.1.3. Using bullets and numbering

SharePoint Designer implements bulleted lists and numbered lists by using the <ul> and <ol> HTML tags. To create a bulleted list and specify settings for it, follow these steps:

  1. Create a Web page in SharePoint Designer and then open it in the Design view.

  2. Place the cursor (or the insertion point) at the beginning of the line of text where you want to begin the bulleted list.

  3. Choose Format Bullets and Numbering to open the Bullets and Numbering dialog box, as shown in Figure 5.8, and then click the Plain Bullets tab.

    Figure 5.8. The Plain Bullets tab in the Bullets and Numbering dialog box

  4. Choose the bullet style and then click OK. SharePoint Designer creates a bulleted list by using the bullet format you chose.

  5. To create new bullet points in this bulleted list, simply press Enter right after the end of a line of bulleted text.

  6. To remove a bullet point from the list, place the cursor at the beginning of the line of text corresponding to the bullet and then press Backspace. Or you can right-click on the line of text corresponding to the bullet, choose List Item Properties from the popup menu to open the Bullets and Numbering dialog box, and then choose the No bullets option.

You can also create sublists inside the bulleted list by using these steps:

  1. In your existing bulleted list, create a new bullet point by pressing Enter right after the end of a line of bulleted text.

  2. Press Ctrl+M or click the Increase Indent Position button on the Common and Formatting toolbar. This creates a child bullet list inside the existing bullet list. To add new bullet points to this child list, press Enter right after the end of a line of bulleted text.

  3. To remove a bullet point from the child list, press Ctrl+Shift+M or click the Decrease Indent Position button on the Common and Formatting toolbar.

Using the previous steps, you can create inherited lists of multiple levels. In the Code view of the Web page, SharePoint Designer uses the <ul> tags for creating the bulleted list. The list items are created by using the <li> tag. Also, the style created while creating the list uses the list-style-type property to specify the style of the bullet being used.

NOTE

The <ul> tag represents the unordered list and is used to create bulleted lists. The <ol> tag, on the other hand, represents the ordered list and is used to create numbered lists.

If you want to add your own pictures instead of the existing bullets, use the Picture Bullets tab in the Bullets and Numbering dialog box:

  1. On the bulleted list you created by using the previous exercise, click the line of text corresponding to the bullet point where you want to change the bullet to a picture of your choice.

  2. Choose Format Bullets and Numbering to open the Bullets and Numbering dialog box, as shown in Figure 5.9, and then click the Picture Bullets tab.

  3. In the Picture section, click the Specify Picture radio button and then click Browse to locate the picture you want to use instead of a bullet point.

  4. Click OK and then save the Web page.

Because a picture appears instead of bullet points, make sure that you choose a picture of smaller dimensions. This ensures that the Design view of the list doesn't become confusing and unmanageable when the picture is selected for the list.


Figure 5.9. The Picture Bullets tab in the Bullets and Numbering dialog box

You can create numbered lists instead of bulleted lists in the same manner by selecting the format by using the Numbers tab in the Bullets and Numbering dialog box. You can also mix the numbered list with the bulleted lists. In other words, you can create a parent list as a numbered list and then a child list (created by using the Increase Indent Position button) inside it as a bulleted list or vice versa.

5.1.4. Positioning Web content

The Position dialog box (accessed by choosing Format Position), as shown in Figure 5.10, allows you to position content on the Web page by using a set of positioning CSS styles and HTML tags. It also provides the option for you to overlap content on Web pages, which enables you to create callouts and screen tips.

Figure 5.10. The Position dialog box

It's really important to understand the various positioning options available in CSS to choose which one is best for your design. Here are the CSS positioning options:

  • Static: By default, when a browser displays the contents of a Web page, the object has a static position in the display window.

  • Absolute: With this option, you can specify the top, left, right, and bottom distances from the parent's position where the object should be placed.

  • Relative: This option allows you to position the object relative to its original position inside a Web page. The object's original position is marked by an anchor sign in the Design view.

  • Fixed: This option allows a browser to identify content with respect to the main window so that the object maintains its position relative to the window even if the content is scrolled.

The Position dialog box also allows you to specify the location of the object by using the left, right, top, and bottom dimensions as well as set the change in width and height of the location. You can also specify the overlapping position of the content by using the Z-Order box.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.226.177.86