1 / 38

Chapter 1: Introduction

Chapter 1: Introduction. Contents. What’s New in Dreamweaver CS4? The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your Web Pages Format text. What’s New in Dreamweaver CS4 ?.

tait
Télécharger la présentation

Chapter 1: Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 1: Introduction

  2. Contents • What’s New in Dreamweaver CS4? • The Dreamweaver CS4 Interface • Setting Up a Site • Creating a Web Page • Adding Text to Your Web Pages • Format text

  3. What’s New in Dreamweaver CS4? • The Property inspector: has been split in two to better separate HTML options from CSS. You can also create and edit styles as you specify settings. • Coding Improvements: Dr.CS4 offers many new features to make working in Code view better. JavaScript Programming benefits

  4. What’s New in Dreamweaver CS4?

  5. What’s New in Dreamweaver CS4? • More Spry goodies: These new features made it easy to add pop-up navigational menus, validate HTML forms, include complex, animated visual effects • You’ll find new form validation tools for making sure a visitor registering on a Web site.

  6. What’s New in Dreamweaver CS4? • Greater Photoshop integration: CS4 adds support for Adobe “Smart Objects” so you can maintain a connection between a high-quality Photoshop file and the smaller, lower quality Web version of the image.

  7. The Dreamweaver CS4 Interface

  8. The Dreamweaver CS4 Interface • The Insert Panel: • When you first start Dreamweaver, the Insert panel is open. • If you ever close it by mistake, you can open it by choosing • Window ➝ Insert or pressing Ctrl+F2.

  9. The Dreamweaver CS4 Interface • The Insert panel offers seven sets of objects: • Common objects • Layout objects • Form objects. • Data • Spry. • InContext Editing • Text objects and Favorites.

  10. The Dreamweaver CS4 Interface • The Files Panel: The Files panel is another panel you’ll turn to. It lists all the Web files—Web pages, graphics, Flash movies, that make up your Web site.

  11. The Dreamweaver CS4 Interface • The Property Inspector: is a chameleon. It’s aware of what you’re working on in the document window: a table, an image, some text, and displays the appropriate set of properties.

  12. The Dreamweaver CS4 Interface • The Application Bar: is new in Dr.CS4. Its main purpose in life is to let you switch between different document views

  13. The Dreamweaver CS4 Interface • Code/Design View menu • Switch between the visual Design view and the raw HTML • The Sites menu lets you “define” a new site or “manage” the sites.

  14. The Dreamweaver CS4 Interface • The Workspace switcher lets you re-organize the program’s layout of windows.

  15. Setting Up a Site • When you build a new Web site, you must define a site. This is the most important first step when you start using Dreamweaver. • Defining a site lets Dreamweaver know where you store your Web pages on your computer, makes sure Dreamweaver correctly inserts images and adds links to the pages of your site

  16. Setting Up a Site • Dreamweaver gives you two methods for defining a site: • The hold-you-by-the-hand site Definition wizard. • The advanced “Get out of my way I know what I’m doing” approach.

  17. Setting Up a Site • The Site Definition Wizard • Choose Site->New Site to open the Site Definition window, and then select the Site • The “Site name” , type a name for your site. • Local Site folder: where you can choose a folder on your hard drive that will serve as your local site’s root folder.

  18. Setting Up a Site

  19. Setting Up a Site • Choose Advanced Settings: • Default Images Folder: Select a folder where store images of the website, this folder must be inside the Local site folder

  20. Setting Up a Site • Web URL: Type the Web address of your site. This step is also optional. • Click OK to finish the process. • Your site’s files appear in the Files panel. Now you’re ready to create Web pages and take advantage of Dreamweaver’s powerful site building tools.

  21. Creating a Web Page • Create a web page: • After defining a site, Just choose File->New or press Ctrl+N to open the New Document window. • Select Blank Page • In the Page type: select HTML • In the Layout: select None • Click Create button.

  22. Creating a Web Page

  23. Adding Text to Your Web Pages • Adding Special Characters: • On the Insert panel, choose the Text category. • At the end of the Insert panel, select the symbol you wish to insert

  24. Adding Text to Your Web Pages

  25. Adding Text to Your Web Pages • Multiple Spaces: • Choose InsertHTMLSpecial Characters Non-Breaking Space. • Press Ctrl + Shift + Space bar ( ) • Adding a Date to Your Page • Click on Date icon or • Insert ➝ Date

  26. Text Formatting • Paragraph: • When you press Enter  you create a new paragraph, complete with opening and closing <p> tags. • Paragraph formatting: • Click anywhere inside the block of text, In the Property inspector choose Paragraph, or Choose Format  Paragraph FormatParagraph or Press Ctrl + Shift + P

  27. Text Formatting • Properties Inspector: usedfor format Text

  28. Text Formatting • Headlines: • To turn a paragraph into a headline, click anywhere inside the line, or block, of text and then do one of the following: • In the Property inspector, from the Format menu, select one of the heading levels (Heading 1 ->6) • Or Choose Format  Paragraph FormatHeading1… Heading6

  29. Text Formatting • Heading function equivalent tag <Hn> • Example: Heading 1  <H1>

  30. Text Formatting • Paragraph Alignment: • Choose Format ➝ Align ➝ Left, Center, Right, or Justify • Indented Paragraphs: • On the Property inspector, click the Blockquote button or Choose Format -> Indent, or Press Ctrl + Alt +] • This function  <Blockquote>

  31. Text Formatting • Creating a new bulleted or numbered list: • In the document window, click where you wish to start a list. • In the Property inspector, click the Ordered/Unordered List button. • Or Format -> List -> Unordered List or Ordered List. • Type the first list item-> Enter. Repeat until you’ve added all items in the list.

  32. Text Formatting • Use menu Format List • Use List button in properties Inspector

  33. Text Formatting • Formatting bullets and numbers • Click once inside any list item. • Format ➝ List ➝ Properties to Open the List Properties dialog box • Choose a bullet or numbering style

  34. Text Formatting • Nested: • Using the Property inspector’s indent button lists:

  35. Text Formatting • Definition List: can be used to display items in a dictionary or glossary, or whenever you need to present a term and its definition. • Each a list of definitions and terms: Each term and definition should be in its own Paragraph, • Highlight the paragraphs that contain the terms and definitions, and then choose Format ➝ List ➝ Definition List.

  36. Text Formatting

  37. Text Formatting • Example:

  38. Text Formatting • Text Styles: • To use these styles, select the text, and then apply a format from the Format ➝ Style menu

More Related