Pengenalan Dreamweaver

1. Pengenalan Dreamweaver R0312 – Grafik Komputer

2. Dreamweaver • Macromedia Dreamweaver MX 2004 is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience. • The visual editing features in Dreamweaver let you quickly create pages without writing a line of code. You can view all your site elements or assets and drag them from an easy-to-use panel directly into a document. You can streamline your development workflow by creating and editing images in Macromedia Fireworks or another graphics application, then importing them directly into Dreamweaver, or by adding Macromedia Flash objects. • Dreamweaver also provides a full-featured coding environment that includes code-editing tools (such as code coloring and tag completion) and reference material on HTML, Cascading Style Sheets (CSS), JavaScript, ColdFusion Markup Language (CFML), Microsoft Active Server Pages (ASP), and JavaServer Pages (JSP). Macromedia Roundtrip HTML technology imports your hand-coded HTML documents without reformatting the code; you can then reformat code with your preferred formatting style. • Dreamweaver also enables you to build dynamic database-backed web applications using server technologies such as CFML,ASP.NET, ASP, JSP, and PHP. • Dreamweaver is fully customizable. You can create your own objects and commands, modify keyboard shortcuts, and even write JavaScript code to extend Dreamweaver capabilities with new behaviors, Property inspectors, and site reports.

3. Antarmuka Dreamweaver • The Insert bar contains buttons for inserting various types of "objects," such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to 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 and pop-up menus that provide 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 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 kind of object has different properties. • Panel groups are 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. • The Files panel enables you to manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also enables you to access all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh). • Dreamweaver provides a variety of other panels, inspectors, and windows not shown here, such as the CSS Styles panel and the Tag inspector. To open Dreamweaver panels, inspectors, and windows, use the Window menu.

4. Antarmuka Dreamweaver (lanjutan)

5. Document window • The Document window shows the current document. You can select any of the following views: • Design view is 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 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 is 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 enables you to see both Code view and Design view for the same document in a single window

6. Document toolbar • The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and a split view that shows both Code and Design view. • The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites.

7. Document toolbar (lanjutan) • 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 displays Code view in part of the Document window and Design view in another part. When you select this combined view, the option Design View on Top becomes available in the View Options menu. Use this option to specify which view appears at the top of your Document window. • Show Design View displays only the Design view in the Document window. • Server Debug displays a report to help you debug the current ColdFusion page. The report includes errors, if any, in your page. • 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.

8. Document toolbar (lanjutan) • No Browser/Check Errors enables you to check cross-browser compatibility. • 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

9. Status Bar • The status bar at the bottom of the Document window provides additional information about the document you are creating • The 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. • The Window Size pop-up menu (visible in Design view only) lets you resize the Document window to predetermined or custom dimensions • To the right of the Window Size pop-up menu are the estimated document size and estimated download time for the page, including all dependent files such as images and other media files

10. Insert bar • The Insert bar contains buttons for creating and inserting objects such as tables, layers, and images. When you roll the pointer over a button, a tooltip appears with the name of the button • The buttons are organized into several categories, which you can switch on the left side of the Insert bar. Additional categories appear when the current document contains server code, such as ASP or CFML documents. When you start Dreamweaver, the category you were last working in opens