session 1 session 1 working with dreamweaver 8.0
Post on 12-Jan-2016
223 Views
Preview:
TRANSCRIPT
Session 1SESSION 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 filecan 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 DocumentCode 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 imageBorder 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.
top related