1

Web Site Design

Overview of the Internet

Cookie Setton

2

How the Web Works

3

4

5

A 30-day free trial is available by download at http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver

Suite from $399 – check out student and teacher discounts.

6

• F. CS LiveG. Tag selectorH. Property inspectorI. Files panel

• F. CS LiveG. Tag selectorH. Property inspectorI. Files panel

• A. Application barB. Document toolbarC. Document windowD. Workspace switcherE. Panel groups

• F. CS LiveG. Tag selectorH. Property inspectorI. Files panel

7

Workspace elements overviewThe 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)

9

Document window overviewThe 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.

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.

Split Code view  A split version of Code view that lets you scroll to work on different sections of the document at the same time.

Code and Design view  Lets you see both Code view and Design view for the same document in a single window.

Live view  Similar to Design view, Live view displays a more realistic representation of what your document will look like in a browser, and lets you interact with the document exactly as you would in a browser. Live view is not editable. However, you can edit in Code view and refresh Live view to see your changes.

Live Code view  Only available when viewing a document in Live view. Live Code view displays the actual code that a browser uses to execute the page, and can dynamically change as you interact with the page in Live view. Live Code view is not editable.

• When a Document window is maximized (the default), tabs appear at the top of the Document window showing the filenames of all open documents. Dreamweaver displays an asterisk after the filename if you’ve made changes that you haven’t saved yet.

• To switch to a document, click its tab.

• Dreamweaver also displays the Related Files toolbar below the document’s tab (or below the document’s title bar if you’re viewing documents in separate windows). Related documents are documents associated with the current file, such as CSS files or JavaScript files. To open one of these related files in the Document window, click its filename in the Related Files toolbar.

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<body> 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.