0% found this document useful (0 votes)
3 views4 pages

Adobe Dreamweaver: 1-Month Course Guide

Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views4 pages

Adobe Dreamweaver: 1-Month Course Guide

Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

ADOBE DREAMWEAVER 1 MONTH/ 36 HOURS

✓ About Dreamweaver

Adobe Dreamweaver is a software program for designing websites,


which is more featured as compared to HTML web and programming
editor. It was originally developed and published by Macromedia in 1997.
Adobe took over Macromedia in 2005 and continued the development in
the software and it’s still going on. Dreamweaver is a visual web page
editor that allows you to create, edit and manage websites and webpages
without having to learn HTML. It uses a WYSIWYG environment that
allows you to see what your web pages look like as you create them.

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

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.
Document 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.
No Browser/Check Errors enables you to check cross-browser compatibility.
Validate Markup lets you validate the current document or a selected tag.
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.
Visual Aids lets you use different visual aids to design your pages.
For more information about using the Document toolbar, see Exploring the Workspace in Using
Dreamweave

✓ Coding Toolbar

The Coding toolbar


The Coding toolbar contains buttons that let you perform many standard coding operations, such
as collapsing and expanding code selections, highlighting invalid code, applying and removing
comments, indenting code, and inserting recently used code snippets. The Coding toolbar is
visible only in Code view and appears vertically on the left side of the Document window.

You cannot undock or move the Coding toolbar, but you can hide it. For more information, see
Displaying toolbars in Using Dreamweaver.
For more information about using the Coding toolbar, see Inserting code quickly with the Coding
toolbar in Using Dreamweaver.

✓ Properties Inspector

The Property inspector


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. The contents of the Property inspector
vary depending on the element selected. For example, if you select an image on your page, the
Property inspector changes to show properties for the image (such as the file path to the image,
the width and height of the image, the border around the image, if any, and so on).
The Property inspector is at the bottom of the workspace by default, but you can dock it at the
top of the workspace if you want. Or, you can make it a floating panel in the workspace. For more
information about moving the Property inspector, see Docking and undocking panels and panel
groups in Using Dreamweaver.
For more information about using the Property inspector, see Using the Property inspector
in Using Dreamweaver.

✓ Creating New Webpage

✓ Blank Webpage

✓ Template Webpage

✓ Insert an AP Div. Element

✓ Setting Properties for AP Elements

✓ Creating the Dreamweaver template

✓ Creating Editable Regions

✓ Creating Repeating Regions

✓ Using Optional Regions

✓ Settings Tag Attributes

✓ Nested Templates

✓ Exporting a Template-Based website

✓ Modifying template properties`

✓ Dreamweaver and Animate

✓ Inserting SWF File

✓ Inserting Animate video

✓ Managing Extensions in Dreamweaver

✓ HTML form Controls

✓ Inserting drop down list

✓ Text field and text area

✓ Radio Buttons And Check Boxes

✓ Working with Java Script Behaviors

✓ Using Browser Compatibility Feature

✓ Working with Broken links

✓ Managing linked Files

✓ Publishing the Website


✓ Using Dreamweaver's Publishing Tools

✓ Placing websites online

✓ Site Management

✓ Using Testing Server Options

✓ Activating Site Map Layout

✓ Using the files view Columns Option

✓ Including Java script in HTML

✓ Performing Operations

✓ Making Statements

✓ Using Arrays

✓ Fill element Loop

✓ String of Elements

✓ Addressing page objects

✓ Window properties

✓ Document properties

✓ Form Properties

✓ Action script Fundamentals

✓ Fundamentals of Web programming

✓ Building Spry pages visually

✓ Preparing to build dynamic sites ✓ Web hosting and Maintenance

• Dynamic Website Designing & Animation

✓ Company Website containing:

✓ Company Name

✓ Company details

✓ Company Logo

✓ Slogan

✓ Color code

Common questions

Powered by AI

Dreamweaver supports the integration of dynamic content through features like templates, editable regions, and scripting capabilities. Users can create repeating regions and use optional regions within templates, allowing for dynamic layout changes. Additionally, Dreamweaver facilitates the use of JavaScript behaviors and the incorporation of server-side scripts, enabling interactive and responsive web designs. Its ability to work with server settings and manage extensions further supports the creation and deployment of content-rich web applications .

Dreamweaver's visual aids significantly enhance the quality and efficiency of web development by allowing designers to see immediate visual outputs of their work, which reduces errors and time spent debugging. Tools such as the Properties Inspector help streamline the editing of element attributes by showing only relevant options based on the selected elements, thus minimizing the need for extrapolative coding. Additionally, the cross-browser compatibility check and markup validation features ensure that code is clean and standardized, improving the end-product's quality and usability across different devices and platforms .

Server debugging and browser compatibility features in Dreamweaver are crucial for developing robust web applications. Server debugging provides diagnostic insights by highlighting errors in server-side scripts, such as those written in ColdFusion, ensuring that dynamic content is rendered correctly across different executions. Browser compatibility checks further enhance robustness by validating that web pages function correctly across varied web browsers, preemptively addressing issues of inconsistent user experiences. These features aid developers in delivering stable, reliable applications that perform efficiently in different environments, thereby expanding user reach and satisfaction .

The Properties Inspector in Dreamweaver dynamically adjusts its interface based on the currently selected page element, displaying relevant properties that can be edited. For instance, if an image is selected, it shows image-specific properties such as file path, width, and height. This adaptability allows users to efficiently modify element attributes without navigating through menus, streamlining the design process. Additionally, the Properties Inspector can be docked or made to float, offering customization of the workspace based on user preference .

The Coding Toolbar in Adobe Dreamweaver provides functionalities intended to enhance coding efficiency. It allows users to perform operations like collapsing and expanding code sections, highlighting invalid code, applying and removing comments, indenting code, and inserting code snippets. However, its limitations include being restricted to Code view only and its fixed position on the left side of the Document window, as it cannot be undocked or moved. This restrictiveness may limit customization of the workspace layout, though the toolbar can be hidden if required for more screen space .

Dreamweaver's WYSIWYG editor significantly lowers the learning curve for new web developers by providing an intuitive, visual interface that allows them to construct web pages without needing to learn complex coding skills initially. By displaying real-time changes to pages as they are designed, it encourages experimentation and rapid prototyping. However, over-reliance on the visual editor may hinder the development of deeper coding skills necessary for advanced customization and troubleshooting. Despite this, its integration of seamless transitions between design and code views facilitates incremental learning of HTML and CSS as developers become more comfortable with coding environments .

Templates in Dreamweaver serve as foundational design elements that facilitate consistent and efficient web design processes. They allow users to define fixed layout elements and editable regions for dynamic content, promoting design uniformity across multiple pages. Templates can also incorporate repeating and optional regions, accommodating various layout variations on different pages of the site. This capability significantly reduces design time and ensures consistency, as changes to the template automatically propagate to all pages using it. Furthermore, nested templates and settings tag attributes allow for complex hierarchical designs and customization .

Dreamweaver's tools for managing linked files and extensions offer comprehensive support for ongoing website maintenance. They ensure that any changes to linked files, such as CSS or JavaScript, are automatically reflected across the site, maintaining consistency and reducing the likelihood of broken links. Additionally, Dreamweaver's extension management allows for the integration of third-party plugins and functionalities that can enhance workflow and site capabilities. Together, these tools streamline the maintenance process, enabling developers to keep sites up-to-date with minimal manual intervention .

The Document Toolbar in Adobe Dreamweaver provides several functionalities that streamline the website development process. It allows users to switch between different views—Code view, Design view, or a Split view combining both—facilitating a flexible workflow that accommodates both visual and code-based editing. Additional options such as the Document Title field help set the webpage title, while tools like Server Debug and Validate Markup enable error checking and code validation to ensure cross-browser compatibility. These capabilities enable developers to manage both the structural and design aspects of a webpage efficiently .

Adobe Dreamweaver offers a WYSIWYG environment, which allows users to create and manage websites visually without having to learn HTML coding. This feature distinguishes it significantly from basic HTML editors, which typically do not provide a visual design interface. Additionally, Dreamweaver includes advanced tools such as a Document Toolbar for toggling between Code, Design, and Split views, as well as a Coding Toolbar for performing standard coding operations efficiently. These features enhance user experience and productivity in web design .

You might also like