Getting Started with DreamWeaver

Getting Started with DreamWeaver Chapter 1

Objectives

• Students will be able to:1. Explore the DreamWeaver workspace2. View a web page and use Help3. Plan and set up a website4. Add a folder and pages

Introduction

• Adobe DreamWeaver CS6 is a web development tool that lets you create dynamic web pages – Contains

• Text• Images• Hyperlinks• Animation• Sounds• video• Interactive elements

– Create individual web pages or complex websites

Introduction

• Website– A group of related web pages that are linked together and

share a common interface and design• Web Browser

– Program which displays web pages• Internet Explorer• Google Chrome• Apple Safari• Mozilla Firefox

Using DreamWeaver Tools

• Create dynamic and interactive web pages– Easy to enter and edit the code directly

• See the visual results of the code instantly

• Organization tools– Help you work with a team to create a website

• Management tools– Help manage the site

• Files panel– Create folders to organize and store the various files for your

website– Add pages to your website

Explore The DreamWeaver Workspace

• Workspace– The screen that includes all the menus, panels, buttons,

inspectors, and panes that you use to create and maintain websites.

– Designed to give you easy access to all the tools you need to create web pages

See page DreamWeaver 1-5 of the book


• Document Window– Large area in the DreamWeaver program where you create

and edit web pages.• Menu Bar (Application Bar)

– Located above the Document Window– Includes:

• Menu names• Workspace switcher• Other application commands

– Appears as one or two bars depending on screen size and resolution


• Insert Panel (Insert Bar)– Includes nine categories of buttons displayed through a drop-down

menu• Common• Layout• Forms• Data• Spry• jQuery Mobile• InContext Editing• Text• Favorites

– Displays the buttons and menus for inserting objects associated with that object


• Document Toolbar– Contains buttons and drop-down menus

• Change current work mode• Check browser compatibility• Preview web pages• Debug web pages• Choose visual aids• View file-management options

– Live View• Displays an open document as if you were viewing it in a browser,

interactive elements active and functioning• Navigation buttons are added to the Document toolbar


• Standard Toolbar• Contains buttons you can use to execute frequently used commands that are also

available on the File and Edit menus

• Style Rendering Toolbar• Contains buttons that you can use to display data for different platforms, such as a cell

phone or television

• Related Files Toolbar• Located below an open document’s filename tab and displays the names of any related

files– Related files

• Files linked to a document and are necessary for the document to display and function correctly

• Coding Toolbar• Contains buttons you can use when working directly in the code and is not visible

unless you are in Code view


• Property Inspector (Properties Pane)• Located at the bottom of the DreamWeaver window• Lets you view and change the properties (characteristics) or a selected object.• Context sensitive

– Changes according to what is selected in the Document window

• Status Bar• Located below the Document window• Left side displays the tag selector

– Shows the HTML tags used at the insertion point location• Right side displays the Select Tool

– Used for page editing» Hand Tool (panning)» Zoom Tool (magnifying)» Set Magnification Menu (change percentage of magnification)


• Panel– Tabbed window that displays information on a particular

topic or contains related commands• Panels Groups

– Sets of related panels that are grouped together • Dock

– Collection of panels or panel groups

Working With DreamWeaver Views

• View– Particular way of displaying page content– Three working views

• Design View– Shows the page as it would appear in a browser– Primarily used for designing and creating a web page

• Code View – Shows the underlying HTML code for the page– Used for reading or editing the underlying code

• Show Code and Design Views (Split View)– Combination of Code View and Design View– Best for debugging (correcting) errors– Immediately see how code modifications change the appearance of the page

– View buttons are located on Document toolbar

Lesson 1 Practice

• Complete exercise on pages Dreamweaver 1-7 thru 1-11 of book

View a Web Page and Use Help

• Opening a Web Page– After starting DreamWeaver you can create

• New web page/website• Open an existing web page/website

– Home Page• First page to appear when users go to a website• Sets the look and feel of the website and directs users to the rest of

the pages in the site.


• Viewing Basic Web Page Elements– Text

• Type directly onto a web page• Import from other programs• Use Property Inspector to format• Should be short and to the point to engage users and prevent them

from losing interest


• Viewing Basic Web Page Elements– Hyperlinks (links)

• Images or text elements on a web page that users click to display another location on the page, another web page on the same website, or a web page on a different website

– Images• Add visual interest to a web page

– Banners• Images that appear across the top or down the side of the screen

that can incorporate a company’s logo, contact information, and links to the other pages in the site


• Viewing Basic Web Page Elements– Menu Bars (Navigation Bars)

• Bars that contain multiple links that are usually organized in rows or columns

• Image maps– An image that has been divided into sections, each which serves as a

link• Navigational Structure

– The way that menu bars and other internal links are used on your pages


• Viewing Basic Web Page Elements– Rich Media Content

• Refers to the attractive and engaging images, interactive elements, video or animations

• Most created using Adobe Flash, Fireworks, Photoshop, or Illustrator


• Getting Help– When questions or problems arise, use the commands on

the Help menu to find the answers you need.– DreamWeaver Help page contains a list of topics and

subtopics by category• Based on Adobe Air technology

– Adobe product used for developing content that can be delivered with a browser or as a desktop application

• Use the Search text box to enter a keyword to search for a specific topic

Lesson 2 Practice

• Complete exercise on pages DreamWeaver 1-14 thru 1-17

Plan And Set Up A Website

• Understanding the Website Development Process

Develop A Plan

Create The Basic Structure

Create the Content

Test Modify

Publish


• Planning a Website– Create a checklist of questions and answers about the site

• What are your goals for the site?• Who is the audience you want to target?• How can you design the site to appeal to the target audience?• What content is appropriate for the target audience?• What content is relevant to the purpose of the website?

– From the checklist, create• Statement of purpose and scope• Timeline for all due dates• Budget• Task list with work assignments• List of resources needed


• Website Planning ChecklistQuestion Examples1. Who is the target audience? Seniors, teens, children

2. How can I tailor the site to reach that audience?

Specify an appropriate reading level, decide the optimal amount of media content, use formal or casual language

3. What are the goals for the site? Sell a product, provide information

4. How will I gather the information? Recruit other employees, write it myself, use content from in-house documents

5. What are my sources for media content? Internal product department, outside production company, my own photographs

6. What is my budget? Very limited, well financed

7. What is the timeline? Two weeks, one month, six months

8. Who is on my project team? Just me, a complete staff of designers

9. How often should the site be updated? Every 10 mins, once a month

10. Who will update the site? Me, other team members


• Planning the Basic Structure– Create a wireframe (storyboard)

• An illustration that represents every page in a website• Shows the relationship of each page in the site to all other pages• Show how each page element is to be placed on each page


Home

About Us Cafe Spa Activities

Cruises Fishing

Wire Frame Example


• Planning the Basic Structure– Parent Page

• Higher level in the web hierarchy and has pages linked to it– Child Pages

• Pages linked below the parent page– Use wireframe as a guide to develop the site to make sure

you follow the planned site structure


• Planning the Basic Structure– Create a folder hierarchy on your computer for all of the

files that will be used in the site• Local Site Folder

– Store all the pages or HTML files for the site– Root folder– Create subfolders called assets or images to store all of the files that

are not pages, such as images and sound files


• Planning the Basic Structure– Set up

• Use DreamWeaver Site Setup dialog box to assign your site a name and specify the local site folder

• Site name then appears in the Files Panel– Files Panel

• Panel used to manage your website’s files and folders• Ensures that the site links work correctly when the website is

published• Used to add or delete pages


• Creating the Web Pages and Collecting the Page Content– Gather the files you’ll need to create the pages

• Text• Images• Buttons• Video• Animations


• Testing The Pages– Test the site to make sure all the links work and that

everything looks good• Use different browser software• Use different screen sizes

• Modify The Pages– Each time you make a change you should test the site

again– Modifying and testing pages in a website is an ongoing

process


• Publishing The Site– Publishing

• Refers to the process of transferring all the files for the site to a web server

– Web Server• A computer that is connected to the Internet with an IP address, so

that it is available for viewing on the Internet– Internet Service Providers (ISPs)

• Provide space on their servers for customers to publish websites– File Transfer Protocol (FTP)

• Process of uploading and downloading files to and from a remote site

Lesson 3 Practice


Add a Folder and Pages

• Adding a folder to a website– 1st create a folder called assets (images)

• Store all non-HTML files– Images – Sound files

• Set as default location to store the website images– Saves a step when you import new images into the website

Add a Folder and Pages

• Creating the Home page– Home page

• The first page that users see when they visit your site

• Adding Pages to a Website– One method is to add as many blank pages as you think

you will use in the beginning• Enables you to set up the navigation structure of the website at the

beginning of the development process• View how each page is linked to others• Then add content to each page

Lesson 4 Practice


Skills Review

• Complete Skills Review on pages DreamWeaver 1-34 thru 1-35

Test

• Study for test on Chapter 1

Documents

Getting Started with DreamWeaver