Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 1: Introdution

Chapter 1 include content: 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.

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?  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 What’s New in Dreamweaver CS4? 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 What’s New in Dreamweaver CS4?  Greater Photoshop integration: support for Adobe “Smart Objects” maintain a connection between a Photoshop file and the smaller, lower version of the image CS4 adds so you can high-quality quality Web The Dreamweaver CS4 Interface 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 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 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 Adding Text to Your Web Pages 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 Text Formatting  Paragraph: – When you press Enter  you create a new paragraph, complete with opening and closing

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 Text Formatting  Properties Inspector: used for format Text Text Formatting  Headlines: – To turn a paragraph into a headline, click anywhere inside the line, or block, of text and then one of the following:  In the Property inspector, from the Format menu, select one of the heading levels (Heading ->6)  Or Choose Format  Paragraph Format Heading1… Heading6 Text Formatting  Heading function equivalent tag – Example: Heading  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  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 Text Formatting – Use menu Format List – Use List button in properties Inspector 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 Text Formatting  Nested: – Using the Property inspector’s indent button lists: 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 Text Formatting Text Formatting  Example: Text Formatting  Text Styles:  To use these styles, select the text, and then apply a format from the Format ➝ Style menu ... 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?  The Property... the image CS4 adds so you can high-quality quality Web The Dreamweaver CS4 Interface The Dreamweaver CS4 Interface  The Insert Panel: – When you first start Dreamweaver, the Insert panel is open... 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 The Dreamweaver