Session 1 SESSION 1 Working with Dreamweaver 8.0

Dreamweaver8.0/ Session 1/2 of 22 Session Objectives List the new features of Dreamweaver New features in Dreamweaver 8.0 Describe the various Workshop Elements Insert Images Modify Images Create a Website

Dreamweaver8.0/ Session 1/3 of 22 Features of Dreamweaver Integrated Workspace –Development time saved with tabbed panes, integrated file browsing, dockable panel groups and customized toolbar. Powerful Templates –Nested templates allow more customized layout control. Extensive Code Libraries –Built-in libraries for data manipulations for records and pages. Server Technology Support –Support for building websites and applications using ColdFusion, JSP, ASP.Net and PHP. Sample Content –Site Setup wizard for instantly configuring site information. XML and Web Standards Support –Standard compliance with default conversion to XHTML output and easy conversion from standard HTML to XHTML.

Dreamweaver8.0/ Session 1/4 of 22 Features of Dreamweaver (cont) Cascading Stylesheets Support –Improved CSS rendering and design tools help built sites that are compliant with latest CSS standards. High Powered Coding Features –Code Hints, Tag editors, Tag chooser snippets and code validation help write code faster. Accessibility –Web pages can be created for users with disabilities. Snippets Panel –Code once written can be stored and reused when required. Dynamic Web Pages –Dreamweaver’s UltraDev used for database connectivity.

Dreamweaver8.0/ Session 1/5 of 22 New Features of Dreamweaver 8 Zoom Tools and Guides –To preview page layouts, working with complex tables and images. Visual feedback for accurate snapping. Visual XML Data Binding –Use of XML-based data into web pages by simple drag and drop workflow. New CSS Style Panel –Working with CSS styles is easier with consolidated CSS functionality. CSS layout Visualization –Visual aids can be used at design stage to apply outline CSS layout borders and color CSS layouts. Code Collapse –Specific blocks of code can be expanded or hidden, to focus on particular code. Coding Toolbar –Buttons for common coding features in the code view. Background Filter Transfer –Minimizing time for uploading of files

Dreamweaver8.0/ Session 1/6 of 22 Dreamweaver 8.0 – Start Page Existing files can be opened Blank new file can be created Using templates

Dreamweaver8.0/ Session 1/7 of 22 The elements of a Web Page can be added and modified with the help of different windows or panels available in Dreamweaver 8. Document window Blank Document

Dreamweaver8.0/ Session 1/8 of 22 Switching between views Blank Document Code View Design View Split View

Dreamweaver8.0/ Session 1/9 of 22 Toolbars Title bar –Displays the title of the web page the user is currently working on. Document bar –This allows the user to change the title of the page, switch between views and view the document in the browser.

Dreamweaver8.0/ Session 1/10 of 22 Toolbars (cont) Standard bar –This bar consists of the basic file and editing operations. Status bar –This displays information such as the window size and the download time.

Dreamweaver8.0/ Session 1/11 of 22 Toolbars (cont) Property inspector –Everything that is inserted into a page - including text, graphics, tables, and horizontal lines - is considered as an ‘object’ that has certain ‘properties’. –When any object is selected, the Property Inspector displays all the formatting properties associated with that object including any links. –Property Inspector will have a small arrow in the lower right corner, indicating that there are further options. On clicking the arrow, those options can be seen.

Dreamweaver8.0/ Session 1/12 of 22 Toolbars (cont) Insert bar –This bar has buttons that help insert objects onto the page. Click the arrow beside the category name to view the buttons in other categories such as Layout, Form, and Text.

Dreamweaver8.0/ Session 1/13 of 22 Toolbars (cont) Coding Toolbar –This bar contains buttons that help perform coding operations like collapsing and expanding code selections, applying and removing comments, indenting code and so on. –This toolbar is visible only in the Code view. Open Documents Collapse Full Tag Expand All Apply Comments Remove Comments

Dreamweaver8.0/ Session 1/14 of 22 Panels Panels are grouped together in Panel Groups. Panel Groups are a set of related files under one heading. To Expand a Panel Group To Undock, drag the gripper

Dreamweaver8.0/ Session 1/15 of 22 Adding Images Images help enhance the look of the document. To insert images in Dreamweaver is an easy task. To insert images, the steps are listed below: –Place the cursor on the page where the image is to be inserted. –Click Insert -> Images or Click on the Image button of the Insert bar.

Dreamweaver8.0/ Session 1/16 of 22 Adding Images (cont) This opens the Image Selector window. –Select the image and click on OK.

Dreamweaver8.0/ Session 1/17 of 22 Modifying Images Name of the Image Margin between text and image Border for Image Aligning image

Dreamweaver8.0/ Session 1/18 of 22 Image Placeholder An Image placeholder is useful when the images to be inserted into the page are not ready. The basic layout can be prepared by placing the image placeholders instead of the images. The images in their final format can be placed in these placeholders. To insert an image placeholder, the steps are: –Click on Insert -> Image Objects -> Image Placeholder. –Specify the name, width, height and color for the place holder. –Click OK

Dreamweaver8.0/ Session 1/19 of 22 Creating a Website Create a root folder in the Hard drive. Create a sub folder in the root folder to store images and other assets required for the site. Create a site on the local machine, and then upload the files to the server. Types of site: –Local site –Remote site –Local folder –Remote folder

Dreamweaver8.0/ Session 1/20 of 22 Step to create a Website The next step expects the user to select the remote folder Select the remote folder

Dreamweaver8.0/ Session 1/21 of 22 Summary 1-2 Macromedia Dreamweaver 8.0 is capable of working with far more technologies than any other previous versions. Images can be created and edited in other applications such as Macromedia Fireworks and then import them directly into Dreamweaver, or by adding Macromedia Flash objects directly in Dreamweaver. Dreamweaver workspace consists of Document Window, Property Inspector, Insert Bar, Panel Groups and Panels.

Dreamweaver8.0/ Session 1/22 of 22 Summary 2- 2 Image Placeholder can be inserted in a web page, if the images are not ready when the page is being designed. Images can be inserted in the image placeholder. A root folder is where all the files corresponding to the site are stored. Testing Server Folder is a folder where Dreamweaver can process dynamic pages.