• Save
Lesson 2   cs5
Upcoming SlideShare
Loading in...5

Lesson 2 cs5






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • If the Office document is not already stored in the site folder along with the other site files, Dreamweaver will let you know and ask whether you want the program to copy the file there. Word HTML pages may contain coding that is not necessary in Dreamweaver, making the files larger than necessary. To strip out unnecessary codes, use the Commands > Clean Up Word HTML menu command.
  • Use the options in this dialog box as follows: Text only pastes the copied material as basic text. Excel data pastes as a block of text without any tabular organization. Text with structure pastes the copied material with its basic paragraph or spreadsheet structure in place. Text with structure plus basic formatting pastes the copied material with structure plus any bold or italic formatting that has been applied. Text with structure plus full formatting pastes the copied material with structure and all applied formatting, such as font color or cell fill color.
  • Use the Commands > Check Spelling command to launch the spelling checker. If the spelling checker finds spelling errors on the page, it lists alternatives you can choose to correct spelling. Choose Edit > Find and Replace to locate and change text and tags on the current page or throughout your site. For example, you could use Find and Replace to change all occurrences of a product name on your site. When used to find and replace text, this feature works much the same way as it does in a word processing program.
  • There are several advantages to creating and using styles and style sheets: Working with styles is efficient: You can create style rules once and use them many times on a page or throughout a Web site. If you need to edit a style, you can change it in one location and the change is made throughout the site. Styles give you more formatting options than HTML: Using styles, you can easily apply borders to any side of a paragraph, position images or blocks of content absolutely, specify space between lines of text, and apply other options that cannot be achieved with standard HTML coding. Styles are not as code-intensive as HTML: Styles take up less room in a document’s code than HTML, which means the page’s file size is smaller and it will often load more quickly. This is especially true for tags such as , which require a number of attributes and values each time a designer wants to adjust text appearance on a page.
  • You will use the options in the Type category most often when creating new text formats. You can select the desired font, size, style, weight, and color, as well as “decorations” such as underlines or a blink feature. Note that you can also specify line height to add space between lines that can give text a less crowded look. Use the Background category to set a background color or image for the style. If you select a background image, you can tile it on the page using the Repeat option in the Repeat list. Use the Block category to set vertical and horizontal alignment options. You can also create indents in this category. The Box, Border, List, Positioning, and Extensions categories offer additional settings to fine-tune the style: create box shapes for content, add borders to any or all sides of the style object, create custom list settings (such as bullet characters you specify), position an object absolutely, or apply extensions that insert page breaks or change the look of the cursor. After you have finished selecting options for the new style rule, the style name displays in the CSS Styles panel . Information about an internal style is stored in the Head area of the document.
  • You have learned the two preferred methods of supplying styles for a Web page: creating internal styles on a single page or external styles that can link to many pages. Earlier in this lesson, you created styles within HTML tags. These styles are called inline styles. When a browser applies styles, it gives the highest priority to inline styles. This means that you can use inline styles to override other styles. However, the use of inline styles is discouraged in most instances. One of the benefits of using CSS is that the styles are located in one place in a page or style sheet, so that a designer can easily make changes to the styles. Having inline code sprinkled throughout a document defeats the real purpose of using CSS. Dreamweaver CS5 provides a handy utility for converting inline CSS to a rule. In a code view, right click the inline style, click CSS Styles, and then click Convert Inline CSS to Rule. (Or, use the Format > CSS Styles > Convert Inline CSS to Rule command.)

Lesson 2   cs5 Lesson 2 cs5 Presentation Transcript

  • Learning Web Design with Adobe CS5 Dreamweaver ® Fireworks ® Flash ®
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 8
    • The easiest way to insert Office text in a Dreamweaver page is to use the File > Import > Word Document or File > Import > Excel Document menu command. This command displays the Import Word Document or Import Excel Document dialog box, where you can navigate to the location of the Word or Excel document you want to insert.
    • Another method of inserting Office information into a Dreamweaver page is to drag the file itself from an application such as Windows Explorer or the Dreamweaver Files panel onto the Dreamweaver page.
    • After you drag file icon to the page and release the mouse button, Dreamweaver displays the Insert Document dialog box.
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 8
    • You can also insert Office document text using the Copy and Paste commands. Copy the Word text or Excel spreadsheet data and then use one of the following Paste options:
      • Use Edit > Paste to convert the pasted text to HTML format, the same as when importing a Word or Excel file.
      • Use Edit > Paste Special to open the Paste Special dialog box.
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 8
    • You can change the default typeface, size, style, and color using tools in the CSS page of the Property inspector.
    • By default, the Dreamweaver font list offers only a few popular fonts that display well in most browsers. You can, however, add fonts to the list using the Edit Font List option at the bottom of the Property inspector’s font list (or click Format > Font > Edit Font List).
    • You can choose a different font size for selected text by highlighting it and clicking the Size arrow in the CSS page of the Property inspector to display the list of available font sizes.
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 9
    • A style is a rule that contains instructions on how to format an HTML element. A style may be applied to text (like styles in a word processing program such as Word) or to other HTML elements such as images, AP divs, or frames. You can also create styles that apply to specific HTML tags such as the horizontal rule tag or a heading tag.
    • A collection of styles created for a page or a Web site is called a style sheet . Using a style sheet, you can format a number of HTML elements quickly and easily. Dreamweaver supports Cascading Style Sheets (CSS), style sheets developed specifically for use in Web design.
    • Creating a new style involves choosing the CSS selector type (class, ID, tag, or compound); naming the style; and choosing where the rule will be used.
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 9 Internal styles stored in the Head section of the page Define formats for new style The CSS Styles panel displays style properties
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 10
    • If you want to apply styles to several Web pages in a site, you need to create an external style sheet. An external style sheet is a separate, or external, file that provides the definitions of all the styles used in a Web site.
    • External style sheets have the file extension .css.
    • After you have created an external style sheet, you can attach it to existing or new documents in the site. This allows you to use the same styles on all pages to ensure consistency throughout your site.
    • For most cases, choose the Link option in the Attach External Style Sheet dialog box. If you select the Import option, the styles are directly imported into the document rather than linked to the external file.
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 11 Alignment controls Ordered list Unordered list Indent Outdent
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 11
    • You can insert the current date on any page in your site using Dreamweaver’s Date feature. If you choose, the inserted date updates each time you save the page. This is a good way to keep track of modifications made to a Web site.
    • Display the History panel using the Window > History command .
    • Not only can you keep track of the tasks you have performed in the History panel, but you also can use the History panel to repeat a series of steps or undo a number of recent tasks quickly and easily.
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 12
    • The Code Inspector displays the page’s code in a floating window.
    • Snippets are predefined HTML elements you can add to your pages. You will find snippets for forms, tables, menus for selecting month and year (handy for credit card order forms), Javascript tools for computing the area of a circle and other shapes, headers, footers, navigation bars, and other complex and/or commonly used code.
  • Working with Text Using CSS Styles and HTML: Lesson 2, Exercise 12
    • The code hints feature helps you insert a specific HTML tag or attribute. When you type an opening wicket, the code hints list appears in the code view that you are using.
    • Another way to find a specific HTML tag and insert it is to right-click at the desired location and select Insert Tag from the shortcut menu (or click the Insert > Tag menu command) to open the Tag Chooser .