Chapter 1

Chapter 1

Getting Started with Dreamweaver

© 2011 Delmar, Cengage Learning

Chapter 1 Lessons

1. Explore the Dreamweaver workspace

2. View a web page and use Help

3. Plan and set up a website

4. Add a folder and pages

© 2011 Delmar Cengage Learning


• What is Adobe Dreamweaver CS5?

– A web development tool that lets you create dynamic websites

• What is a website?

– A group of related web pages that are linked together and share a common interface and design



• What does Dreamweaver CS5 offer?

– Design tools that can create dynamic and interactive web pages without writing

HTML code

– Organizational tools

– Site management tools



Tools You’ll Use


Explore the Dreamweaver Workspace

• The Dreamweaver workspace includes:

– Menus

– Panels

– Buttons

– Inspectors

– Panes



Application bar (Win) shown as one bar

Document toolbar

Browser Navigation toolbar

Menu names

Document window

Status bar

Property inspector

Workspace switcher

Insert panel

Drag the panel border up or down to resize

Insert pane;

Files panel

Tag selector Select tool Hand tool Zoom tool

Dreamweaver CS5 workspace



• The Insert panel (Insert bar) includes eight categories:

– Common

– Layout

– Forms

– Data

– Spry

– InContext Editing

– Text

– Favorites



• The Browser Navigation toolbar contains navigation buttons you use when you are on your Live view.

• Live view displays an open document as if you were viewing it in your browser.



• The Standard tool contains buttons you can use to execute frequently used commands.

• The Style Rendering toolbar contains buttons you can use to display data for different platforms.



• The Related toolbar displays the names of any related files.

• Related files are files that are linked to a document and are necessary for the document to display and function correctly.

• The Coding toolbar contains buttons you use when working directly in the code.



Active panel tab

Your drive may differ

Double-click to collapse or expand panel group

Collapse to

Icons button

Panel groups are sets of related panels that are grouped together.

Panels in panel group



• A panel is a tabbed window that displays information on a particular topic or contains related commands.

• A dock is a collection of panels or panel groups.

• In Dreamweaver CS5, Business

Catalyst, Files, and Assets panel appear by default.



• The Property inspector (Properties pane) lets you view and change the properties of a selected object.

• The status bar:

– The left side displays the tag selector, which shows HTML tags

– The right side displays the Select tool, used for page editing


View a Web Page and Use Help

• The home page is the first page that appears when you go to a website.

• Web pages can be primarily text or media-rich with images, sound, and movies.



Banner

Image

Search Feature

Links to main pages in the website

Contact information

Image

Common web page elements



• Basic Web Page Elements:

– Hyperlinks (links) are images or text elements on a web page that users click to display another location on the page

– Images can add visual interest to a web page

– Banners are images that display logos, contact information, or links to other sites



• Basic Web Page Elements (continued):

– Menu bars (navigation bars) are bars that contain multiple links that are usually organized in rows or columns

– An image map is an image that has been divided into sections, each of which serves as a link



• Basic Web Page Elements (continued):

– The navigation structure of the site refers to the way the menu bars and other internal links are used on web pages

– Rich media content is a comprehensive term that refers to attractive and engaging images, interactive elements, video, or animations



Banner

Links to the main pages in the website

Text

Image

Viewing web page elements


Plan and Set Up a Website

Phases of a website development project



• A checklist of questions for a website:

– Who is the target audience?

– How can I tailor the site to reach that audience?

– What are the goals for the website?

– How will I gather the information?

– What is my budget?



• A checklist of questions (continued):

– What is the timeline?

– Who is on my project team?

– How often should the site be updated?

– Who will update the site?



• Wireframes

– Also referred to as a storyboard, is an illustration that represents every page in a website

– Shows the relationship of each page in the site to all other pages

– Allows you to visualize how each page in the site links to others



• Wireframes (continued):

– They help the client see how the pages will look and work together

– Range from very simple to interactive and multidimensional



The parent page

The child pages

The Striped Umbrella website wireframe



• Once you create a wireframe for your site, you should create a folder hierarchy on your computer for all the files you use in the site.

• The local site folder (root folder) should contain assets or images.



• You can set up a website using the

Dreamweaver Site Setup dialog box and assign a name and specify the local site folder.

• After the site is setup, the folders will appear in the Files panel.



Site category

Site name

Local Site Folder text box-your drive may differ


Browse for folder icon


• When you create a web page, images, colors, tables, and horizontal rules all contribute to making a page attractive and interesting.

• You should consider the size of each web page; if it takes too long to load, visitors may leave your site.



• Test the site to make sure all the links work and that everything looks good.

• Test your web page on several different browsers.

– Internet Explorer

– Mozilla Firefox

– Google chrome

– Safari



• A web server is a computer that is connected to the Internet with an IP

(Internet Protocol) address.

• Publishing a website:

– Internet service Providers (ISPs) provide space on their servers for customers to publish websites

– The Files panel can be used to transfer files using the Dreamweaver FTP (File Transfer

Protocol) capability


Add a Folder and Pages

• You can use asset folders to store all non-HTML files, such as images or sound files.

• You should set this as the default location to store the website images.



Local site folder for

The Striped Umbrella website

New assets folder

The Striped Umbrella site in Files panel with assets folder created



• The home page of a website is the first page that a viewer sees when they visit your site.

• Websites can be as simple as one page or contain hundreds of pages.



• Adding web pages to a website:

– You can add several blank pages when the site is first created and then add content as you go

– You can add and link pages as you create them


Add a Folder and Pages su_banner.gif in the assets folder

New pages added in the striped_umbrella local site folder

New pages added to The Striped Umbrella website


Chapter 1

Chapter 1

Related documents

Products

Support

Chapter 1

Chapter 1

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib