Getting started with dreamweaver

• 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 –

Getting Started with Dreamweaver

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

Chapter 1 Lessons

• 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

Getting Started with Dreamweaver

• What does Dreamweaver CS5 offer?

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

HTML code – Organizational tools – Site management tools

Getting Started with Dreamweaver

Getting Started with Dreamweaver

Tools You’ll Use

• The Dreamweaver workspace includes:

– Menus– Panels– Buttons– Inspectors– Panes

Explore the Dreamweaver Workspace

Explore the Dreamweaver Workspace

Application bar (Win)

shown as one bar

Hand tool Zoom tool

Workspace switcher Insert panel

Drag the panel border

up or down to resize Insert pane;

Files panel

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

– Common – Layout – Forms – Data – Spry – InContext Editing – Text

– Favorites

Explore the Dreamweaver Workspace

• 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

Explore the Dreamweaver Workspace

• 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

Explore the Dreamweaver Workspace

• 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

Panel groups are sets of

related panels that are

grouped together

Explore the Dreamweaver Workspace

Panels in panel group

Active panel tab

Your drive may

differ

• 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

• 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

Explore the Dreamweaver Workspace

• 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

View a Web Page and Use Help

View a Web Page and Use Help

Common web page elements

Contact information

View a Web Page and Use Help

• 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

View a Web Page and Use Help

• 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

View a Web Page and Use Help

View a Web Page and Use Help

Viewing web page elements

Plan and Set Up a Website

Phases of a website development project

Plan and Set Up a Website

• 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?

Plan and Set Up a Website

• 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

Plan and Set Up a Website

Plan and Set Up a Website

The Striped Umbrella website wireframe

The parent page

The child pages

• 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

Plan and Set Up a Website

• 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

Plan and Set Up a Website

Plan and Set Up a Website

• 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

Plan and Set Up a Website

• 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

Plan and Set Up a Website

• 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

Plan and Set Up a Website

• 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

Add a Folder and Pages

Add a Folder and Pages

The Striped Umbrella site in Files panel with assets folder created

Local site folder for

The Striped Umbrella

website

New assets folder

• 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

Add a Folder and 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

Add a Folder and Pages

New pages added to The Striped Umbrella website

New pages added

in the striped_umbrella

local site folder

su_banner.gif in the assets folder