Expertrating - Dreamweaver Interface 1 of 5 6/14/2012 9:21 PM ExpertRating Home ExpertRating Benefits Recommend ExpertRating Suggest More Tests Privacy Policy FAQ Login Home > Courses, Tutorials & ebooks > Dreamweaver Tutorial > Dreamweaver Interface Dreamweaver Interface Page 1 of 1 Index Dreamweaver Interface Making Website Site Structure and Content Style Sheets and Template Forms and User Intraction with ASP Database Dreamweaver Extensions Online Personal Trainer Personal Trainer (Spanish) Six Sigma Find a Personal Trainer Project Management Six Sigma Six Sigma Black Belt Master Black Belt Six Sigma Green Belt Lean Management Lean Six Sigma First Aid CPR Yoga Aerobics Pilates Business Analyst Introduction Dreamweaver is an easy to use web development application that covers up the gap between a developer and a designer. Dreamweaver is a powerful web development tool that helps you create attractive, dynamic, powerful websites. It includes advanced features to develop complex data-driven web applications. Dreamweaver s user friendly interface and extensive library not only enables even the amateur web designers to create professional websites easily, but helps one to structure the websites in such a way that they are easy to maintain after being built. This tutorial is a practical introduction to Macromedia Dreamweaver 8. Starting with explaining all the entities of the user interface, this tutorial will quickly get you used to the robust features of dreamweaver. Dreamweaver Interface Dreamweaver has a very easy and user friendly interface that lets the user develop and manage simple as well as complex websites. The interface features in Dreamweaver allows the user to quickly create web pages in the WYSIWYG mode. The various elements and assets can be dragged directly into the document from an easy to use panel. Developers can work directly with the page's code, making use of the various tools Dreamweaver provides for ensuring correct syntax. Dreamweaver comes with the support to directly import images created using Macromedia Fireworks and other graphics applications. In Windows, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows and panels are integrated into a single larger application window.
Expertrating - Dreamweaver Interface 2 of 5 6/14/2012 9:21 PM SEO Online Photography Course & Online Business Writing Course & Baby Sitting Course & Time Management Health Club Management Medical Coding Medical Billing Business Analysis Course Master Trainer Total Quality Management Kaizen Creative Writing Test Search by Job Title Online survey software Virtual Assistant All Online Courses Figure-1.1 The toolbars contain the common commands. Many of these commands are also available in the Dreamweaver menus. Additional commands are available in the panel groups found on the right side of the Dreamweaver window; you can expand and collapse these groups as necessary. 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. We will go through the brief introduction of each of these features. Insert Bar You can use the insert bar to create and insert objects such as tables, layers and images. It includes images, hyperlinks, tables, forms, and multimedia objects. When the mouse is rolled over a button, its tooltip comes up with the name of the command button. These command buttons are organized into categories. These categories can be switched on the left side of the bar. In addition to this the categories also appear when the current document contains server code such as ASP or Coldfusion documents. Figure-1.2 The various categories that these command buttons are grouped into are Common - The default category, which contains commands for adding hyperlinks, tables, images, and multimedia objects. Layout - It is used for designing the layout of the page, with the help of commands for tables, layers, and framesets. Forms - Contains commands for adding form elements to your page.
Expertrating - Dreamweaver Interface 3 of 5 6/14/2012 9:21 PM Text - Contains commands for applying various formatting to the text on your page, as well as for inserting special characters. HTML - Lets you select various HTML tags to insert into your page. Application - Contains commands for adding database elements to your page. Flash Elements - Lets you insert a Macromedia Flash movie into your page. Favorites - Lets you customize your own toolbar by grouping your favorite commands. To show or hide the Insert toolbar, open the View menu and select Toolbars, and then Insert. Document Toolbar The Document Toolbar can be used to toggle between different view modes i.e., Code, Design and Split View mode. In addition, there are some common commands related to viewing the document and transferring it between the local and remote sites. There are commands for naming, previewing, and publishing the current document: Figure-1.3 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. Code view is updated automatically when you make changes in Design view. However, after making changes in Code view, you must manually update the document in Design view by clicking in Design view or pressing F5. Show Design View - displays only the Design view in the Document window. Document Title - Lets you specify a title for the page, which appears in the title bar of the browser's viewer. No Browser/Check Errors - Provides a menu of options for checking browser compatibility with the page. Validate Markup - lets you validate the current document or a selected tag. File Management - Provides a menu of file management options for the page, including a command to upload the page to your web server. Preview/Debug in Browser - Lets you preview the page in the browser you select. Refresh Design View - Refreshes the appearance of the page in Design view after you've made changes to it in Code view. View Options - Lets you specify various settings for the current view. Visual Aids - lets you use different visual aids to design your pages. If you don't see the Document toolbar, open the View menu and select Toolbars, and then Document to show it. Document Window The Document window shows the current document in either of the view modes among Design View, Code View and Split View. The Design View mode is used for visual page layout, visual
Expertrating - Dreamweaver Interface 4 of 5 6/14/2012 9:21 PM editing and rapid application development. In the Design View mode the document is available as a fully editable visual representation similar to the final output that you would be seeing in the browser. Code view provides the user with hard-core coding environment for writing and editing HTML and Javascript code as well as the backend server language code like PHP, coldfusion, ASP etc. The Split view mode lets the user view both code and design view in the same window. Figure-1.4 The title bar displays the title of the page and the file s path and name. An astrisk is displayed after the name if any changes have not been saved. When a Document window is maximized, tabs appear at the top of the Document window area showing the filenames of all open documents. To switch to a document, click its tab. Panel Groups The Dreamweaver Panel Groups are displayed vertically on the right side of the Dreamweaver window. Panel groups are collection of related panels and commands you will use to design your pages andbuild and publish your web site. A Panel group can be collapsed or expanded and docked or undocked along with the other panel groups. A panel appears as a tab in the panel group when selected. The commands available in the panel groups are far more extensive than the ones you'll find on the Insert bar, which contains the most common Dreamweaver commands. Figure-1.5 Each panel includes an Options menu in the upper right corner, which contains additional options for that panel. Design Panel Group
Expertrating - Dreamweaver Interface 5 of 5 6/14/2012 9:21 PM Figure-1.6 There are two panels in the design panel group: CSS Styles and Layers. CSS styles are used to maintain the styles in the document and creating and attaching style sheets. The layer panel shows all the layers of the open document. It can be used to lock or unlock, rearrange, and rename the layers. Code Panel Group Figure-1.7 You can use the Code panel group to work with the code in the document like HTML, JavaScript, and ASP. You can save code snippets using the Snippets panel, which can be reused later. The Reference panel contains HTML reference library. ExpertRating Dreamweaver - Get Certified Now!! Home About Us Privacy Policy Site Map FAQs Contact Us ExpertRating 2006. All Rights Reserved.
Expertrating - Dreamweaver Interface 1 of 4 6/14/2012 9:22 PM ExpertRating Home ExpertRating Benefits Recommend ExpertRating Suggest More Tests Privacy Policy FAQ Login Home > Courses, Tutorials & ebooks > Dreamweaver Tutorial > Dreamweaver Interface Dreamweaver Interface Index Dreamweaver Interface Making Website Site Structure and Content Style Sheets and Template Forms and User Intraction with ASP Database Dreamweaver Extensions Application Panel Group Page 2 of 2 Online Personal Trainer Personal Trainer (Spanish) Six Sigma Find a Personal Trainer Project Management Six Sigma Six Sigma Black Belt Master Black Belt Six Sigma Green Belt Lean Management Lean Six Sigma First Aid CPR Yoga Aerobics Pilates Business Analyst Figure-1.8 The Application panel contains functions to include dynamic content into your web pages. You can manage data sources and define record sets and also add advanced server behaviors. Tag Inspector
Expertrating - Dreamweaver Interface 2 of 4 6/14/2012 9:22 PM SEO Online Photography Course & Online Business Writing Course & Baby Sitting Course & Time Management Health Club Management Medical Coding Medical Billing Business Analysis Course Master Trainer Total Quality Management Kaizen Creative Writing Test Search by Job Title Online survey software Virtual Assistant Figure-1.9 All the attributes of your page elements are displayed in the Tag Inspector. You use the tag inspector to edit any attribute of the selected HTML entity by typing into the corresponding attribute s box. Another way of doing this is by selecting it from a menu which pops up when clicked inside the box. Files Panel Group All Online Courses Figure-1.10 Files and Assets Panels are part of the Files Panel Group. The File panel is used for managing the website files like downloading and uploading files to and from the web server. This panel can also be used for defining new websites and to switch among various sites. Status Bar The status bar contains addition information about the document. The status bar is located at the bottom of the document window. Tag Selector Figure-1.11 The tag selector displays the hierarchy of tags surrounding the selection. You can Click any tag in the hierarchy to select that tag and all its contents. Clicking on the <body> selects the entire body of the document. Right-click (Windows) or Control-click (Macintosh), select a class or ID from among the items in the context menu to set the class or id attributes for a tag in the tag selector. Hand Tools The Hand tool is used to drag the document in the document window. Clicking on the Select tool disables the Hand tool.
Expertrating - Dreamweaver Interface 3 of 4 6/14/2012 9:22 PM Zoom Tool and Set Magnification pop-up Menu The zoom tool and the Set Magnification pop-up menu let you set a magnification level for your document. It can be used for checking the pixel accuracy of graphics, to select small items more easily, design pages with small text, design large pages, and so on. Window Size pop-up Menu Window size pop-up menu lets you resize the Document window to predetermined or custom dimensions. This menu is only visible in the Design view mode. The status bar displays the Document window s current dimensions (in pixels). In order to design a page that looks its best at a specific size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create new sizes. Document Size and Estimated Download Time This shows the estimated document size and estimated download time for the page, including all dependent files such as images and other media files. The size is calculated based on the entire contents of the page, including all linked objects, such as images and plug-ins. The download time is estimated based on the connection speed entered in the Status Bar preferences. In addition to the user interface entities shown in the default UI view, there are more toolbars like the Coding Toolbar, The Style Rendering toolbar and tools like Reports in dreamweaver. The Coding Toolbar The Coding toolbar has buttons are used to perform many standard coding operations, like highlighting invalid code, collapsing and expanding code selections, editing comments, indenting code, inserting recently used code snippets etc. Figure-1.12 The Coding toolbar is visible only in Code view and appears vertically on the left side of the Document window. The Style Rendering Toolbar The Style Rendering toolbar is hidden by default. It contains buttons that lets you preview your design for different media types if you are using media-dependent style sheets. The Style Rendering Toolbar contains a button that lets you enable or disable CSS styles. To display the toolbar, select View > Toolbars > Style Rendering.
Expertrating - Dreamweaver Interface 4 of 4 6/14/2012 9:22 PM Figure-1.13 By default, Dreamweaver shows you how a page is rendered on a computer screen. There are different media type renderings which can be seen by clicking their respective buttons given in the Style Rendering Toolbar. Render Screen Media Type previews the page as it appears on a computer screen. Render Print Media previews the page as it appears on a printed piece of paper. Render Handheld Media previews the page as it appears on a handheld device, such as a mobile phone or a BlackBerry device. Render Projection Media Type previews the page as it appears on a projection device. Render TTY Media Type previews the page as it appears on a teletype machine. Render TV MediaType previews the page as it appears on a television screen. Toggle Displaying of CSS Styles is used for toggling the display of the css styles. Reports in Dreamweaver Reports in dreamweaver can be used to find content, troubleshooting or testing content. There are various types of reports that can be generated. Search can be used to search for tags and attributes or specific text within the tags. Validation is used for checking the code or syntax errors. Target Browser Check is used to test the HTML code in your documents to check if there are any tags or attributes that are unsupported by the target browsers. Link Checker is used to locate and fix broken links. Site reports are used to improve workflow and testing of html attributes in the website. There are workflow reports that contains checked out by, recently modified and designs notes information. FTP logging enables you to view the file transfer log. ExpertRating Dreamweaver - Get Certified Now!! Home About Us Privacy Policy Site Map FAQs Contact Us ExpertRating 2006. All Rights Reserved.