CIS 205—Web Design & Development

CIS 205—Web Design & Development Dreamweaver Chapter 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 Documentwindow is the large white area • The insertbar (above the Document window) contains seven tabs, each displaying a group of buttons • The menubar is located above the insert bar • The Documenttoolbar 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 Propertyinspector 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 • Designview is how a page looks in a browser • Codeview shows the underlying HTML code of a page • CodeandDesignview shows both views at once

Lesson 1: Explore the Dreamweaver Workspace (3) • Start Dreamweaver (Windows) • Click Start on the taskbar, point to All Programs • Point to Adobe Web Standard CS3 • Click Adobe Dreamweaver CS3 • Change views and view panels • Click HTML in the Create New category on the Dreamweaver Welcome Screen • TIP: If you don’t want to see the Welcome Screen, click the Don’t show again check box • Click the Code, Split, and Design buttons on the Document toolbar • 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 navigationbar 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 elements • Click File, Open on the Menu bar • Click the Look in list arrow and navigate to the Dreamweaver chapter_1 folder (these files should have been installed from the textbook CD) • Double click dw1_1.html (“The Striped Umbrella” page opens) • Click the Code button to view the code • Click the Design button to return to Design view • Click the Close button on the page (or File, Close)

Lesson 2: View a Web Page and Use Help (4) • Use Dreamweaver Help • Click Help on the Menu bar, click Dreamweaver Help (the Adobe Help Viewer window appears) • Click in the Search text box • Type saving in the Search box, press [Enter] • Double-click saving in the Search box and type “save files” in the Search box (including quotes), press [Enter] • Click a topic in the help window • 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 parentpage and all other pages are childpages • Create a folderhierarchy 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) • Right-click Start on the taskbar, click Explore • Navigate to the drive and folder where you will create a folder for your Web site (such as Documents) • Click Organize, NewFolder and rename this folder striped_umbrella, press [Enter] • 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 site • In Dreamweaver, click Site, NewSite in the menu bar • Click the Advanced tab in the Site Definition window • Type The Striped Umbrella in the Site name text box • Click the file icon to the right of the Local root folder text box, navigate to the striped_umbrella folder • Click the striped_umbrella folder, then click Open and Select • Verify that the Document option button is selected • Verify that the Enable cache check box is selected • Click OK

Lesson 3: Plan and Design a Web Site (7) • Set up Web server access • Click Site, Manage Sites, Edit • Click Remote Info in the Category list • Click the Access list arrow and select a type of access (click None if a remote server has not been set up) • Provide the necessary information in the Site Definition dialog box and click OK • 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 site • Right-click The Striped Umbrella site in the Files panel and click New Folder • Type assets in the folder text box, press [Enter] • Set the default images folder • Click the Site list arrow in the Files panel, click Manage Sites, and click Edit • Click the folder icon to the right of the Default images folder text box • Double-click the assets folder and click Select • Click OK and Done

Lesson 4: Add a Folder and Pages (3) • Set the home page • Open dw1_2.html from the location where the you stored the textbook files (installed from the CD) • Click File, SaveAs, click the Savein list arrow • Navigate to the striped_umbrella folder • Select dw1_2.html in the File name text box and then type index • Click Save and click No to update links • 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 folder • Click The Striped Umbrella banner broken link placeholder • 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 • 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 site • In the Local Files column of the Files panel, right-click the root folder (Site—The Striped Umbrella), click NewFile, type about_us.html (replacing untitled.html), and press [Enter] • Repeat Step1 above to add five more blank pages: spa.html, café.html, activities.html, cruises.html, and fishing.html. • 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 ManageSites, 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

CIS 205—Web Design & Development