Presentation on theme: "1 Web Site Design Overview of the Internet Cookie Setton."— Presentation transcript:
1 Web Site Design Overview of the Internet Cookie Setton
2 How the Web Works
5 A 30-day free trial is available by download at Suite from $399 – check out student and teacher discounts.
6 F. CS Live G. Tag selector H. Property inspector I. Files panel A. Application bar B. Document toolbar C. Document window D. Workspace switcher E. Panel groups F. CS Live G. Tag selector H. Property inspector I. Files panel
7 Workspace elements overview The workspace includes the following elements. Note: Dreamweaver provides many other panels, inspectors, and windows. To open the panels, inspectors, and windows, use the Window menu 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 Application bar – Across the top of the application window contains a workspace switcher, menus (Windows only), and other application controls. 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, Browse in Bridge, Save, Save All, Print Code, 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.
8 Workspace elements overview continued The Document window – Displays the current document as you create and edit it. The Property inspector – Lets you view and change a variety of properties for the selected object or text. Each 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. Panels – Help you monitor and modify your work. Examples include the Insert panel, the CSS Styles panel, and the Files panel. To expand a panel, double-click its tab. The Insert panel – Contains buttons for inserting various types of objects, such as images, tables, and media 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 panel. If you prefer, you can insert objects using the Insert menu instead of the Insert panel. 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)
10 Status bar overview The Status bar at the bottom of the Document window provides additional information about the document you are creating. 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 (Not available in Code view.) 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. Encoding indicator Shows the text encoding for the current document.
11 View the interface Menus and tools –Common view button: stuff we use all the time Workspace – Tabs of open files, (* = unsaved) Code ( doc type, head, body tags ) - Split - Design Title tag – important for ranking in Google, Validation, Preview, make sure the html code is clean. Right panel –Files - site –Assets images, swatches, colors –Tag inspector Attributes (backgrounds), Behaviors, roll over images –CSS – cascading style sheets Open or close > panels Bottom area - Properties panel, formatting, links, sizes, styles Rulers, can be inches, px, or cm.