1. Introduction to Dreamweaver

2. OBJECTIVES:  G UIDELINES FOR WEBSITE DEVELOPMENT.  E XPLORE THE D REAMWEAVER WORKSPACE.

3. G UIDELINES FOR W EBSITE D EVELOPMENT  Use small and simple graphics — don't overdo animation  Be Consistent — logo and navigation should be in the same place throughout site  Stay away from frames — users like to print pages and search engines may have problems indexing framed pages.  Include HTML title on each page — use subheads — search engines need titles  Limit page length  Avoid horizontal scrolling — page should not exceed 770 pixels  Include a link to your homepage and high-priority pages on every page

4. W ORKSPACE LAYOUT OVERVIEW  The Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents. A. Insert bar B. Document toolbar C. Document window D. Panel groups E. Tag selector F. Property inspector G. Files panel

5.  The Welcome screen. Lets you open a recent document or create a new document. From the Welcome screen, you can also learn more about Dreamweaver by taking a product tour or a tutorial.  The Insert bar. Contains buttons for inserting various types of objects, such as images, tables, and AP elements, into a document. Each object is a piece of HTML code that lets you set various attributes as you insert it. For example, you can insert a table by clicking the Table button in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar.  The Document toolbar. Contains buttons that provide options for different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.  The Standard toolbar. (Not displayed in the default workspace layout.) Contains buttons for common operations from the File and Edit menus: New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo. To display the Standard toolbar, select View > Toolbars > Standard.  The Coding toolbar. (Displayed in Code view only.) Contains buttons that let you perform many standard coding operations.  The Document window. Displays the current document as you create and edit it. You can select any of the following views: (design view, code view, code and design view )  The Property inspector. Lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties. The Property inspector is not expanded by default in the Coder workspace layout.  The tag selector. Located in the status bar at the bottom of the Document window. Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents.  Panel groups. Sets of related panels grouped together under one heading. To expand a panel group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s title bar.

6. The Files panel. Lets you manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also lets you access all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).

7. D REAMWEAVER FILE TYPES Following are some of the other common file types you might use when working in Dreamweaver:  CSS. Cascading Style Sheet files have a.css extension. They are used to format HTML content and control the positioning of various page elements.  GIF. Graphics Interchange Format files have a.gif extension. GIF format is a popular web graphic format for cartoons, logos, graphics with transparent areas, and animations. GIFs contain a maximum of 256 colors.  JPEG. Joint Photographic Experts Group files (named after the organization that created the format) have a.jpg extension, and are usually photographs or high- color images. The JPEG format is best for digital or scanned photographs, images using textures, images with gradient color transitions, and any images that require more than 256 colors.  XML. Extensible Markup Language files have a.xml extension. They contain data in a raw form that can be formatted using XSL (Extensible Stylesheet Language).  ASPX. ASP.NET files have a.aspx extension and are used to process dynamic pages.  PHP. Hypertext Preprocessor files have a.php extension and are used to process dynamic pages.

8. D OCUMENT WINDOW OVERVIEW The Document window shows the current document. You can select any of the following views:  Design view. A design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see when viewing the page in a browser. You can configure the Design view to display dynamic content while you’re working on the document.  Code view. A hand-coding environment for writing and editing HTML, JavaScript, server ‑ language code—such PHP or ColdFusion Markup Language (CFML)—and any other kind of code.  Code and Design view. Lets you see both Code view and Design view for the same document in a single window.

9. DOCUMENT TOOLBAR  A. Show Code View  B. Show Code and Design Views  C. Show Design View  D. Document Title  E. File Management  F. Preview/Debug in Browser  G. Refresh Design View  H. View Options  I. Visual Aids  J. Validate Markup  K. Check Browser Compatibility The following options appear in the Document toolbar:  Show Code View. Displays only the Code view in the Document window.  Show Code and Design Views. Splits the Document window between the Code and the Design views. When you select this combined view, the option Design View on Top becomes available in the View Options menu. \  Show Design View. Displays only the Design view in the Document window.  Document Title. Allows you to enter a title for your document, to be displayed in the browser’s title bar. If your document already has a title, it appears in this field.  File Management. Displays the File Management pop ‑ up menu.  Preview/Debug in Browser. Allows you to preview or debug your document in a browser. Select a browser from the pop ‑ up menu.  Refresh Design View. Refreshes the document’s Design view after you make changes in Code view. Changes you make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.  View Options. Allows you to set options for Code view and Design view, including which view should appear above the other. Options in the menu are for the current view: Design view, Code view, or both.  Visual Aids. Lets you use different visual aids to design your pages.  Validate Markup. Lets you validate the current document or a selected tag.  Check Browser Compatibility. Lets you check if your CSS is compatible across different browsers.

10.  Tag selector. Shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click to select the entire body of the document. To set the class or id attributes for a tag in the tag selector, right-click (Windows) or Control ‑ click (Macintosh) the tag and select a class or ID from the context menu.  Select tool. Enables and disables the Hand tool.  Hand tool. Lets you click the document and drag it in the Document window.  Zoom tool and Set Magnification pop ‑ up menu. Let you set a magnification level for your document.  Window Size pop ‑ up menu. (Visible in Design view only.) Lets you resize the Document window to predetermined or custom dimensions.  Document size and download time. Shows the estimated document size and estimated download time for the page, including all dependent files such as images and other media files.

11. INSERT BAR OVERVIEW  The Insert bar contains buttons for creating and inserting objects such as tables, AP elements, and images. When you roll the pointer over a button, a tooltip appears with the name of the button.  The Insert bar is organized in the following categories:  The Common category. Lets you create and insert the most commonly used objects, such as images and tables.  The Layout category. Lets you insert tables, div tags, frames, and Spry widgets. You can also choose two views for tables: Standard (default) and Expanded Tables.  The Forms category. Contains buttons for creating forms and inserting form elements, including Spry validation widgets.  The Data category. Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeated regions, and record insertion and update forms.  The Spry category. Contains buttons for building Spry pages, including Spry data objects and widgets.  The Text category. Lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul.  The Favorites category. Lets you group and organize the Insert bar buttons you use the most in one common place.  Server-code categories. Available only for pages that use a particular server language, including ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP, and PHP. Each of these categories provides server-code objects that you can insert in Code view.

12. Display the pop ‑ up menu for a button Click the down arrow beside the button’s icon.

13. PROPERTY INSPECTOR OVERVIEW  The Property inspector is at the lower edge of the workspace by default, but you can dock it at the upper edge of the workspace, or make it a floating panel in the workspace. The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. Text properties  Unordered List. Creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started.  Ordered List. Creates a numbered list of the selected text. If no text is selected, a new numbered list is started.  List Item. Opens the List Properties dialog box.  Indent and Outdent. Indent or remove indentation from the selected text by applying or removing the blockquote tag. In a list, indenting creates a nested list and removing the indentation unnests the list.

14. Image properties  W and H. The width and height of the image, in pixels.  Src. Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.  Link. Specifies a hyperlink for the image. Drag the Point-To-File icon to a file in the Files panel, click the folder icon to browse to a document on your site, or manually type the URL.  Align. Aligns an image and text on the same line.  Alt. Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually.  Map Name and Hotspot tools. Allow you to label and create a client-side image map.  V Space and H Space. Add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image. Target. Specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:  _blank loads the linked file into a new, unnamed browser window.  _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.  _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.  _top loads the linked file into the full browser window, thereby removing all frames.

15. LINKS Document locations and paths  Each web page has a unique address, called a Uniform Resource Locator (URL). However, when you create a local link (a link from one document to another on the same site), you generally don’t specify the entire URL of the document you’re linking to; instead, you specify a relative path from the current document or from the site’s root folder. There are three types of link paths:  Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).  Document-relative paths (such as dreamweaver/contents.html).  Site root–relative paths (such as /support/dreamweaver/contents.html).

16. fin