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 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 Programs 2.Point to Adobe Web Standard CS3 3.Click Adobe Dreamweaver CS3 Change views and view panels 1.Click HTML in the Create New category on the Dreamweaver Welcome Screen 2.TIP: If you don’t want to see the Welcome Screen, click the Don’t show again check box 3.Click the Code, Split, and Design buttons on the Document toolbar 4.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 elements 1.Click File, Open on the Menu bar 2.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 code 5.Click the Design button to return to Design view 6.Click the Close button on the page (or File, Close)

Lesson 2: View a Web Page and Use Help (4) Use Dreamweaver Help 1.Click Help on the Menu bar, click Dreamweaver Help (the Adobe Help Viewer window appears) 2.Click in the Search text box 3.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 window 6.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 – 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 Explore 2.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 site 1.In Dreamweaver, click Site, New Site in the menu bar 2.Click the Advanced tab in the Site Definition window 3.Type The Striped Umbrella in the Site name text box 4.Click the file icon to the right of the Local root folder text box, navigate to the striped_umbrella folder 5.Click the striped_umbrella folder, then click Open and Select 6.Verify that the Document option button is selected 7.Verify that the Enable cache check box is selected 8.Click OK

Lesson 3: Plan and Design a Web Site (7) Set up Web server access 1.Click Site, Manage Sites, Edit 2.Click Remote Info in the Category list 3.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 OK 5.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 1.Right-click The Striped Umbrella site in the Files panel and click New Folder 2.Type assets in the folder text box, press [Enter] Set the default images folder 1.Click the Site list arrow in the Files panel, click Manage Sites, and click Edit 2.Click the folder icon to the right of the Default images folder text box 3.Double-click the assets folder and click Select 4.Click OK and Done

Lesson 4: Add a Folder and Pages (3) Set the home page 1.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 arrow 3.Navigate to the striped_umbrella folder 4.Select dw1_2.html in the File name text box and then type index 5.Click Save and click No to update links 6.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 1.Click The Striped Umbrella banner broken link placeholder 2.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 site 1.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