CIS 205—Web Design & Development

DreamweaverChapter 1

Chapter 1: Getting Started with Dreamweaver

• Introduction– Web site• Group of related web pages with a common design

– XHTML• Acronym for ‘eXtensible Hypertext Markup Language’• Currently the standard language for creating Web pages

– HTML• Acronym for ‘Hypertext Markup Language’• Formerly the standard language for Web pages

– Browser• Program used to display Web pages

Chapter 1: Getting Started with Dreamweaver (2)• Using Dreamweaver Tools– Adobe Dreamweaver CS3• Software for creating Web pages and Web sites

– Files panel• Part of the Dreamweaver user interface• Used to organize and store files in a Web site

– Home page• First page viewers see when they visit a Web site

– Site map• Graphical view of the organization of a Web site

– Navigation structure• How viewers navigate from page to page in a site

Lesson 1: Explore the Dreamweaver Workspace• Examining the Dreamweaver Workspace– The workspace contains all tools for creating web pages– The Document window is the large white area– The insert bar (above the Document window) contains

seven tabs, each displaying a group of buttons– The menu bar is located above the insert bar– The Document toolbar is at the top of the Document

window and contains buttons and menus– The status bar is at the bottom of the Document

window and contains a tag selector (shows HTML tags)– The Property inspector is at the bottom of the

workspace, allowing you to change object properties– The panels, on the right of the workspace, contain

additional information and commands

Lesson 1: Explore the Dreamweaver Workspace (2)

• Working with Dreamweaver Views– A view is a way of displaying page content– Design view is how a page looks in a browser– Code view shows the underlying HTML code of a page– Code and Design view shows both views at once

Lesson 1: Explore the Dreamweaver Workspace (3)• Start Dreamweaver (Windows)

1. Click Start on the taskbar, point to All Programs2. Point to Adobe Web Standard CS33. Click Adobe Dreamweaver CS3

• Change views and view panels1. Click HTML in the Create New category on the

Dreamweaver Welcome Screen2. TIP: If you don’t want to see the Welcome Screen,

click the Don’t show again check box3. Click the Code, Split, and Design buttons on the

Document toolbar4. Click each panel name in the panel group and inspect

Lesson 2: View a Web Page and Use Help• Opening a Web Page– A home page is the first Web page that appears when

a viewer goes to a Web site• Viewing Basic Web Page Elements– Most information on a Web page is in the form of text,

which should be short and to the point– Hyperlinks (or links) are elements that, when clicked,

go to another location on the same page or to a new page in the same site or in a different site

– An image is a graphic element (less is more)– A navigation bar has links for navigating the Web site– Flash button objects are animations that add interest

Lesson 2: View a Web Page and Use Help (2)

• Getting Help– Click the Help menu item to get help with

Dreamweaver– Context-specific help is available by clicking the Help

button on the Property inspector (the ? In a circle)

Lesson 2: View a Web Page and Use Help (3)

• Open a Web page and view basic page elements1. Click File, Open on the Menu bar2. Click the Look in list arrow and navigate to the

Dreamweaver chapter_1 folder (these files should have been installed from the textbook CD)

3. Double click dw1_1.html (“The Striped Umbrella” page opens)

4. Click the Code button to view the code5. Click the Design button to return to Design view6. Click the Close button on the page (or File, Close)

Lesson 2: View a Web Page and Use Help (4)

• Use Dreamweaver Help1. Click Help on the Menu bar, click Dreamweaver Help

(the Adobe Help Viewer window appears)2. Click in the Search text box3. Type saving in the Search box, press [Enter]4. Double-click saving in the Search box and type “save

files” in the Search box (including quotes), press [Enter]

5. Click a topic in the help window6. Close the Help Viewer window

Lesson 3: Plan and Design a Web Site

• Understand the Total Process– Creating a Web site is a complex process

• Planning a Web Site– Planning is an essential part of creating a Web site– Create a checklist of questions and answers about the

site (goals, audience, sources, budget, timeline, etc.)

Lesson 3: Plan and Design a Web Site (2)• Setting up the Basic Structure– Create a storyboard (a small sketch of every page in a

Web site including relationships)– You can use paper/pencil or software (e.g., Word)– The home page is the parent page and all other pages

are child pages– Create a folder hierarchy for storing all files for the

Web site– The root folder contains all Web pages in the site– A subfolder called assets contains all files that are not

Web pages (images, sound files, etc.)– When you define a Web site, folders and files appear in

the Files panel in the workspace

Lesson 3: Plan and Design a Web Site (3)

• Creating Web Pages and Collecting Page Content– Gather files for text, images, buttons, video, etc. (a

page with too many elements might take a long time to load)

– Place these files in the proper folders in the Files panel– Create blank pages according to your storyboard and

add the content to your pages

• Testing the Pages– When all pages are complete, test the site in a browser– Use multiple browsers (e.g., Internet Explorer, Firefox)– Test with different screen resolutions

Lesson 3: Plan and Design a Web Site (4)

• Modifying the Pages– Pages in the site may need updating– Test all modified pages before publishing

• Publishing the Site– Publishing a site means transferring all files to a Web

server (a computer with an IP address connected to the Internet)

– A Web server can be accessed for free from certain ISPs (Internet Service Providers) such as http://www.tripod.lycos.com/.

– The Files panel can be used to transfer files with FTP (File Transfer Protocol)

Lesson 3: Plan and Design a Web Site (5)

• Create a root folder (assumes using Vista)1. Right-click Start on the taskbar, click Explore2. Navigate to the drive and folder where you will

create a folder for your Web site (such as Documents)

3. Click Organize, New Folder and rename this folder striped_umbrella, press [Enter]

4. TIP: You can create a Web site folder in the Files panel by selecting a drive and folder, right-clicking, and selecting New Folder

Lesson 3: Plan and Design a Web Site (6)

• Define a Web site1. In Dreamweaver, click Site, New Site in the menu bar2. Click the Advanced tab in the Site Definition window3. Type The Striped Umbrella in the Site name text box4. Click the file icon to the right of the Local root folder

text box, navigate to the striped_umbrella folder5. Click the striped_umbrella folder, then click Open

and Select6. Verify that the Document option button is selected7. Verify that the Enable cache check box is selected8. Click OK

Lesson 3: Plan and Design a Web Site (7)

• Set up Web server access1. Click Site, Manage Sites, Edit2. Click Remote Info in the Category list3. Click the Access list arrow and select a type of access

(click None if a remote server has not been set up)4. Provide the necessary information in the Site

Definition dialog box and click OK5. Close the Manage Sites dialog box

Lesson 4: Add a Folder and Pages

• Adding a Folder to a Web Site– Create a folder called assets for all non-HTML files– This assets folder can be the default folder for images– The assets folder could have subfolders for images,

sound, videos, etc.

• Setting the Home Page– Tell Dreamweaver which page is the home page in the

Web site (usually named index.html or default.html)

• Adding Pages to a Web Site– Always use the Files panel (not Windows) to add,

delete, move, or rename files and folders in a site

Lesson 4: Add a Folder and Pages (2)

• Add a folder to a Web site1. Right-click The Striped Umbrella site in the Files

panel and click New Folder2. Type assets in the folder text box, press [Enter]

• Set the default images folder1. Click the Site list arrow in the Files panel, click

Manage Sites, and click Edit2. Click the folder icon to the right of the Default

images folder text box3. Double-click the assets folder and click Select4. Click OK and Done

Lesson 4: Add a Folder and Pages (3)

• Set the home page1. Open dw1_2.html from the location where the you

stored the textbook files (installed from the CD)2. Click File, Save As, click the Save in list arrow3. Navigate to the striped_umbrella folder4. Select dw1_2.html in the File name text box and

then type index5. Click Save and click No to update links6. Right-click index.html in the Files panel and click Set

as Home Page

Lesson 4: Add a Folder and Pages (4)

• Save an image file in the assets folder1. Click The Striped Umbrella banner broken link

placeholder2. Click the File icon next to the Src text box in the

Property inspector and navigate to the assets folder in your Data Files folder for this chapter

3. Click su_banner.gif and click OK, then click in a blank part of the page (file is automatically copied to the assets folder in your Web site, which is the default images folder)

Lesson 4: Add a Folder and Pages (5)

• Add pages to a Web site1. In the Local Files column of the Files panel, right-click

the root folder (Site—The Striped Umbrella), click New File, type about_us.html (replacing untitled.html), and press [Enter]

2. Repeat Step1 above to add five more blank pages: spa.html, café.html, activities.html, cruises.html, and fishing.html.

3. Click the Refresh button on the Files panel to list the files alphabetically.

Lesson 5: Create and View a Site Map

• Creating a Site Map– A site map is a graphical representation of the pages in

a Web site

• Viewing a Site Map– The View list arrow in the Files panel allows you to

select the Map view– The Expand button in the Files panel allows you to get

a bigger view of the site map

• Using Site Maps to Help Visitors Find Your Pages– You can create an image of the site map for your site– An XML site map can be created to aid search engines

Lesson 5: Create and View a Site Map (2)• Select site map options– Click the Site list arrow in the Files panel, click Manage

Sites, click The Striped Umbrella, click Edit– Click Site Map Layout in the Category list– index.html should be the home page– Click the Page titles button, click OK, click Done

• View a site map– Click the Expand button in the Files panel– Click View in the menu bar, point to Site Map Options,

click Show Page Titles to deselect it– Click the Collapse button to collapse the site map– Click File, Exit to exit Dreamweaver