Web Site

Quick Start

WORKSHOP DESCRIPTION...... 1 Overview 1 Prerequisites 1 Objectives 1

WEB DESIGN REVIEW ...... 2 Understanding the 2 Web Browsers 2 How Browsers Display Web pages 3 Saving a Web Page You Visit 3 Web Guidelines 4 Sacramento State Web Guidelines 4 Accessibility 4 Copyright 5 Educational Permissions 5 The Web Process at Sacramento State 6 Web Site Organization 6 File Naming Conventions 6 Site Structure 7

WEB EDITORS: CONTRIBUTE AND DREAMWEAVER...... 8 Contribute 8 Dreamweaver 8

INTRODUCTION TO DREAMWEAVER ...... 8 Document Window 9 Toolbar 10 Objects (Insert) Panel 10 Properties Panel 10 History Panel 11 Where to find Help in Dreamweaver 11

FACULTY WEB SITE: GETTING STARTED...... 12 Faculty Web Site Template 12 Understanding the Template 13 The Site Structure 14 EXERCISE #1 14

EDITING YOUR WEB PAGES...... 15 Define Your Site in Dreamweaver 15 Changing the Title and Content Information 16 Adding Hyperlinks for College and Department 16 Adding Your Photograph (or deleting the current one) 17 To delete the current image 17 To add your own image 17 Editing Course Information 17 Including Basic Course Information 18 Including Detail Course Information via a Link 18 Adding Additional Courses 19 Creating New Web Pages 19

COPYING YOUR SAMPLE WEB SITE TO A WEB SERVER...... 19 How to Define an FTP Connection 20 How to copy files using FTP 22

RESOURCES...... 23 Faculty / Staff Resource Center 23 Appointments with Consultants 23 Academic Technology & Creative Services 23 Online Information 23 Books 23 Contribute Resources 24 Dreamweaver Resources 24 Web Accessibility Resources 24

WORKSHOP DESCRIPTION

Overview

Are you new to ? Not sure how to start your Web site? Join your peers in this introductory workshop that explains the Web design process at Sacramento State and contains useful tips to guide you as you create and implement your Web pages. Topics include how browsers display Web pages, the Web guidelines and process at Sacramento State, how to organize your Web site, and editing a simplified version of the faculty template.

Prerequisites

Individuals taking this workshop should have basic computer skills, knowledge of the Web, basic Web browser skills, and the ability to work effectively in the Windows or Macintosh OS environment.

Objectives

Participants attending this workshop will: ▪ Review the Sacramento State Web guidelines ▪ Attain a beginning understanding of the Web publishing process ▪ Organize a sample Web site ▪ Learn the basics of editing Web pages using Dreamweaver ▪ Add hyperlinks and images to the sample Web pages.

TIP: The exercises in this document require files distributed during the workshop. Please make sure that you have a copy of these files.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 1 WEB DESIGN REVIEW

Understanding the World Wide Web The World Wide Web – or Web – consists of files linked together on the Internet that are written in some form of HyperText Markup Language (HTML). Files are stored on Web servers, which get their name because they can serve requests from many users at the same time. Users access files and documents on these servers via applications called browsers.

Web Browsers A Web browser is a program that displays Web pages and other documents on the Web. Different browsers may interpret HTML somewhat differently, and thus, they may appear different when viewed in various browsers. Examples of supported browsers include:

Internet Explorer www.microsoft.com www.mozilla.org

Note: A visitor can customize many display features of a browser, including: • background color • font • font size • text and link colors, and whether or not to download images.

Safari (Mac) www.apple.com

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 2 How Browsers Display Web pages When a Web page opens in a browser, the browser reads and interprets the HTML file and formats the Web page for display. If there are references to external files, such as images or multimedia, these files download from the server and display in the browser window.

Saving a Web Page You Visit Sometimes you may want to save a copy of a Web page you visit so you can view the design of the Web page later in a Web editor. To save a Web page, follow these steps:

step 1. View the Web page in your browser, if it is not currently visible. step 2. From the File menu in your browser, select Save As (, Safari) or Save Page As (Firefox). step 3. For Windows users: In the drop-down menu next to the Save as type field, select Web Page, HTML only. If you want to save the Web page and the associated images, select Web Page, Complete (Internet Explorer, Firefox).

For Macintosh users: In the drop-down menu next to Format, select HTML Source (Internet Explorer) or Web Page, HTML only (Firefox). Choose Web Page complete (Internet Explorer, Firefox) to save the Web page and its images. In Safari, simply go to the next step. step 4. Choose the name of the Web page file and select the location on your computer where you want to save the Web page. step 5. Click Save.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 3 Web Guidelines

Sacramento State Web Guidelines Information Providers at Sacramento State are faculty, staff, and students responsible for publishing Web content for schools, departments, program centers, and official student organizations. It is your responsibility to become familiar with the following University guidelines and policies: 1. Sacramento State Web Guidelines http://www.csus.edu/web/webguidelines.html 2. Sacramento State Web Policy http://www.csus.edu/web/webpolicies.html 3. Identity Style Guide http://www.csus.edu/pa/identity

Accessibility Accessibility in terms of Web design generally refers to facilitating the use of technology for people with disabilities. Providing equivalent access to Web sites for all students, faculty, and staff at Sacramento State is required by SB302. This Senate Bill extends the requirements of Section 508 of the federal Rehabilitation Act to the California State University.

So, how do we make Web sites accessible to people with disabilities? ▪ A user with hearing problems will need to have video captioning included. ▪ People with mobility impairments benefit from well-designed sites that allow for easy movement through the site utilizing alternate input devices. ▪ Users with sight disabilities who cannot see the information on a Web site benefit from accessing a site designed to facilitate screen reader technology. ▪ Learning-disabled users benefit from good design that provides consistent elements as well as both visual and aural input.

ACCESSIBILITY: Follow these steps to better understand the guidelines. 1. Review the Web Accessibility For All bookmarks available free from ATCS. 2. Take the Introduction to Web Accessibility workshop. 3. Visit the Web Accessibility Learning Module at Fresno State, http://www.csufresno.edu/webaccess/learningmodules/index.html and the Section 508 Explained page at http://www.csufresno.edu/webaccess/508/508explained.htm 4. Test your Web pages for accessibility using Dreamweaver or Cynthia Says: a. Take advantage of the accessibility tools in Dreamweaver. http://www.adobe.com/resources/accessibility/dw8/ b. Or test your Web pages using Cynthia Says, a free online service. http://www.cynthiasays.com/

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 4 Copyright Copyright refers to laws created to protect the rights of individuals to their materials, for a specified period, so that they may obtain commercial benefit from the works and have control over how their works are used. These laws originated in the Constitution of the United States, but have been modified and expanded with subsequent legislation.

Most intellectual works are copyrighted from the moment they are created into a fixed form. There need be no notice or registration of copyright. Illegal copying can result in legal proceedings being brought against those who use information and/or products without permission, including both the individual and the University. Because copying information is so easily accomplished, it is important for faculty, staff, and students to become aware of proper educational uses so that you can make responsible choices.

TIP: Follow these steps to gain a better understanding of these guidelines. 1. Visit the TEACH Checklist at NC State to find out if you can use a copyrighted work. http://www.lib.ncsu.edu/scc/legislative/teachkit/expanded_checklist. html 2. Check out the Fair Use Worksheet at NC State to see if your proposed use falls within the fair use guidelines. http://www.lib.ncsu.edu/scc/copyright/worksheet.pdf 3. Read the TEACH Act chart [halldavidson.net] — a summary for educators. http://www.halldavidson.net/copyright_chart.pdf

Educational Permissions The reprinting of materials for coursepacks is not considered fair use. Services such as the Copyright Clearance Center (CCC) and XanEdu can prepare coursepacks for you and obtain the necessary permissions. Fees vary depending upon the cost of copyright permission, copying, binding, and processing fees. Students bear the cost of the coursepacks – the average cost can range from $5.00 to $25.00.

▪ The Hornet Bookstore offers XanEdu Digital Coursepacks – see the information at http://www.xanedu.com/ ▪ The Copyright Management Center at Indiana University-Purdue University provides a step-by-step guide to obtaining permissions at http://www.copyright.iupui.edu/permsec.htm ▪ Sample coursepack permission request and agreement forms are available at: http://fairuse.stanford.edu/Copyright_and_Fair_Use_Overview/chapter7/7-a.html

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 5 The Web Process at Sacramento State step 1. Request a Sacramento State Web server Account ▪ Department – contact your department sponsor or ITC ▪ Faculty – complete the online form http://www.csus.edu/uccs/forms/webserver ▪ SacLink – http://webpages.csus.edu ▪ WebCT – complete the online form http://www.csus.edu/webct/webct_account.stm

step 2. Gather Materials ▪ Assignments, Handouts, Syllabi, Textbook Info ▪ Images, Photographs ▪ PowerPoint lectures, etc. Note: You may need to convert some materials for use on the Web.

step 3. Create/Edit HTML Files ▪ Text Editors – Notepad (PC), SimpleText (Mac) ▪ Web Editors – Dreamweaver, Microsoft FrontPage

step 4. Preview HTML Files ▪ View the local files using a Web browser, such as Internet Explorer, Firefox or Safari (Mac) Note: Remember to test all of your hyperlinks.

step 5. Upload to Server ▪ Copy the files to a Web server using one of the following programs: Dreamweaver, FrontPage, WS_FTP, Fetch, WebCT

step 6. View pages on Web ▪ View your Web pages from their actual Web address on the Web server using a Web browser, such as: Internet Explorer, Firefox, Safari (Mac)

Web Site Organization

File Naming Conventions When creating a Web site or a Web page, there are a few rules for creating file names. These rules not only apply to HTML files, but to any file or document, that is part of your Web site.

1. Use lower-case letters in your file names. You may use upper- case letters, but do so sparingly. Uploading files with capitals into WebCT can create problems. Some older browsers do not locate files that are not exactly specified.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 6

2. Only use numbers and letters in your file names. File names must begin with a letter (not a number). Special characters, except those noted below, should not be used – including #, & and comma. Do not use any spaces within a filename.

3. Representing spaces within a filename: You may use the underscore (‘_’) character or the dash (‘-‘) character to represent a space in a filename.

4. File extensions: Use .htm or .html as the file extension when you name your HTML files. Be consistent with the convention you use.

Site Structure Every Web site that you build or inherit should have a consistent and simple organization – called a site structure. A site is a collection of HTML files, documents and images contained in a single master folder (the root folder). Within this root folder, you can save your documents and subfolders organized in a manner that makes sense to you, as well as to others in your department that may need to edit the information.

We recommend that the structure of your Web site include: 1. A root folder that contains the Web site. 2. A Web page entitled index.htm (or index.html) that resides within the root folder to represent the default homepage for the Web site. 3. An images folder that contains the graphics, illustrations, images and photographs used in your Web pages. 4. Additional folders for organizing your content.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 7 WEB EDITORS: CONTRIBUTE AND DREAMWEAVER

Contribute Adobe Contribute is a simplified Web editor that makes it easy to maintain an existing Web site. It is ideal for occasional edits by non-technical people including changes to existing pages, new pages duplicated from them, and rollback to earlier versions. For groups, it also allows for routing of changes for approval before publishing to a Web server.

Due to its simplified capabilities, Contribute is not good for changing the structure of your Web site, including creating new folders and adding files to them. It is also not good for editing JavaScript, style sheets and templates. If you need to perform any of these tasks, use Dreamweaver.

Dreamweaver is a full-featured Web editor that allows you to create and edit HTML and XHTML documents (Web pages). With Dreamweaver, knowledge of the HTML mark-up language is not required to create professional-grade Web sites. It is ideal for creating a new Web site, editing style sheets and templates, renaming and moving files, and checking your site for accessibility.

INTRODUCTION TO DREAMWEAVER

The main areas of Dreamweaver are outlined in the following table and serve as a legend for the image on the next page. This document uses screen samples from the version of Dreamweaver.

Legend 1. Objects (Insert) Panel – Allows you to 4. Properties Panel – View and modify add images, tables, and multimedia to properties of an object selected in the your Web pages. Document window. 2. Toolbar – Shortcuts to many of the 5. History Panel – Tracks commands you Document window commands, perform and allows you to return your including adding a page title page to a previous state. 3. Document Window – A work area to 6. Files Panel – Lists the various folders and edit and arrange text, images, and other files associated with the site. elements on your Web page.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 8 1 2

3

6

5 4

Document Window The Document window contains the toolbar, document title, file name, Code View window to view the HTML and XHTML code, and the WYSIWYG window to view your Web page graphically (Design View).

Code View

Design View

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 9 Toolbar The toolbar is actually part of the Document window and allows you to toggle between the Code View and Design View windows (View Modes), set your page title, check your document for browser-specific errors, preview your page in a browser and select different view options.

View Modes Browser Browser View Check Preview Options

Objects (Insert) Panel The Objects (Insert) panel contains various icons that allow you to easily insert different types of elements into your Web documents. For example, insert a table, picture or horizontal rule.

View as a drop-down menuor

View as tabs

Properties Panel With this panel, you can modify the properties of an element selected in the Document window.

Text Properties

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 10 Image Properties

History Panel This panel makes it easy to undo multiple actions at the same time. To undo a series of actions place your cursor in the Design view document, then within the History panel click and drag the undo slider to the desired position. To activate the History panel: go to Window > History or press Shift+F10.

History panel undo slider

Where to find Help in Dreamweaver There are various ways to find help in Dreamweaver. Below are just a few of them.

1. Click the Help menu and select Using Dreamweaver. The Help window appears, as shown to the right. 2. From the Properties panel click the question mark button . This opens the Help window and displays information about each area of the Properties panel. 3. Click the Help menu and select Reference. The Results panel opens to the Reference tab. Here you can select a Book and then get more

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 11 detailed information from pages of that book. This is a great way to learn more about HTML and XHTML from the O'Reilly HTML Reference book.

FACULTY WEB SITE: GETTING STARTED

Faculty Web Site Template The Faculty Web Site template consists of two parts. First, the home page contains general information about you and provides a way for potential students, current students and colleagues to learn about you. Therefore, it is important to publish the material that will best represent you. Second, you can provide course information – either in the form of a short description or a long description that includes a syllabus, calendar, and other information. The template is customizable, so you can modify it to your specific needs.

NOTE: For this workshop, we are using a simplified version of the faculty template.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 12 Understanding the Template The template was created with default content that you can alter as desired to meet your specific needs. Template pages consist of structural, non-editable regions, and regions or sections of content that are editable. Editable regions include University or department header graphic; faculty image and left navigation links; main content area; and the footer text. The template consists of a main home page and a course overview page.

Faculty home page with editable regions highlighted

Course overview page with editable regions highlighted

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 13 The Site Structure Before editing the template, it is important to understand the template file structure. Remember that Web pages are linked from one page to another; therefore, if you move a file or rename it you must edit the link pointing to that file. Another important aspect is that the Web site file structure on your personal computer must be duplicated on the Web server; otherwise, broken links and missing images can exist.

Let us look at the file structure for our sample template. The root folder contains all the Web pages and sub-folders. The main page is the file called myindex.htm. Your images and photographs go in the images folder.

Template file structure when defined in Dreamweaver

Template file structure

EXERCISE #1 – Getting the Sample Faculty Template Files

1. Follow the instructions from your instructor to save the zip file containing the sample faculty template files. 2. Uncompress (unzip) the zip file on the desktop of your computer. 3. If you do not have your sample Microsoft Word, PowerPoint and Adobe PDF documents, download and unzip the sample files from the instructor's Web site. 4. Create a new folder inside the main folder for your new documents. 5. Copy your sample document files (Word, PowerPoint, and PDF) into the new folder you just created.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 14 EDITING YOUR WEB PAGES

Define Your Site in Dreamweaver Before creating or editing the sample faculty Web pages (or any Web pages), you can have Dreamweaver help you manage your files by defining a site.

TIP: Keeping everything within a master folder enables you to easily transfer files to a Web server. If you do not organize your site files on the Web server the same as they are organized on your local computer, hyperlinks will not work and images will not display properly.

step 1. To create a local site, from the Site menu select the New Site option. step 2. When the Site Definition dialog box appears click the Advanced tab.

step 3. Enter a name for your site in the Site name field. step 4. Click the folder icon at the end of Local root folder field to locate a local folder to serve as the master folder for all of your files for this site. step 5. Click the folder icon at the end of Default images folder field to locate a local folder to serve for all of your image files for this site. step 6. Once you have defined your Dreamweaver site, it is visible in the Files panel. Here you can simply double-click any file listed to open and edit it.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 15 Changing the Title and Content Information step 1. Double-click the file myindex.htm from the Files panel to open it. step 2. Locate the text Faculty Member’s Name and replace it with your name. The text is located in two places – on the page itself and as the title property.

Replace faculty member's name

step 3. Locate the contact information table and enter your contact information.

step 4. Add information under the following sections: Papers and Publications, Research Projects/Interests and Professional Associations, as desired. step 5. Review your home page and add or remove unnecessary content. step 6. Save and Preview the file in a browser.

Adding Hyperlinks for College and Department step 1. Replace the College Name and Department Name with their proper names.

Replace college and department names

step 2. Open a Web browser and locate your college Web site.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 16 step 3. Copy the URL from the browser. step 4. In Dreamweaver, highlight the name of the college in the left navigation and paste the URL in the Link textbox in the Properties panel. step 5. Repeat these steps for the department link. step 6. Save and Preview the file in a browser.

Adding Your Photograph (or deleting the current one) You can replace the current photograph with your own or delete it. Before you include your image on your home page, be certain that it is in either GIF or JPG format and that the width does not exceed 150 pixels. We recommend using an image-editing program such as Elements to edit your image. Once your image is ready, copy it to the images folder in your site.

To delete the current image step 1. With the file myindex.htm opened in Dreamweaver, click once on the image in the left navigation to select it. step 2. Press the Delete button on your keyboard.

To add your own image step 1. After you delete the sample image, click in the left navigation area just above the link for your college. step 2. Click the insert image button on the Common tab of the Objects (Insert) panel. A menu appears where you can select the option to insert your image. Alternatively, add your image by dragging it in from the Files panel in Dreamweaver to the space above the link for your college.

Editing Course Information Currently, the sample faculty home page lists two sample courses under the Courses section. If you wish, add your own courses, including basic course information if you desire.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 17 Including Basic Course Information To include basic course information on the home page and not link to a separate, detail page.

step 1. Within the Courses section, replace the name of a course with your own course designation and title. step 2. Press the shift + Enter keys to go to the next line. step 3. If needed, replace the sample course information with your own or type the description for your course. You may also copy and paste the information from your syllabus or the course catalog. step 4. To add additional courses, press Enter (Return on Mac) at the end of an item in the list of courses to create another list item. Add your course information. step 5. Delete any unnecessary course information for your list of courses. step 6. Save and Preview your home page.

Including Detail Course Information via a Link To add a link to a separate course page, follow these steps:

step 1. Rename the course folder in the Files panel: a. From the Files panel, right-click the name of the folder you want to rename, choose Edit from the menu and choose Rename. b. Enter your new course name. c. When the Update Files window appears, click the Update button. This is very important in order to maintain any links in your site that point to the old name. step 2. Edit the main page for your course. a. From within your new course folder, double- click the index.htm file to open it. b. Edit the content of this file as you did with your main home page. c. Save and Preview your changes in a browser. step 3. From your home page, change the current course text to reflect your new course. step 4. Make the course text a link to the separate course page you edited in Step 2. a. From your faculty home page, highlight the course name and/or title. b. Using the Point-to-File icon located to the right of the Link textbox in the Properties panel, click and drag the mouse pointer to the appropriate file name in the Files panel. Alternatively, you may click the Folder icon to the right of the Link textbox and locate the file you want linked to the text highlighted. c. Press the Tab key to complete the link field and to refresh the Document window. d. Save and Preview your file, making certain that the new link works correctly.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 18 Adding Additional Courses If you have additional courses to include, you can create new course folders from the Files panel. step 1. From the Files panel, right-click on your existing course folder, choose Edit from the context menu and choose Copy. step 2. Right-click again, choose Edit from the context menu and then choose Paste. step 3. Follow the process in the previous section to add a link to a separate course page. step 4. To add additional courses, start again at step1.

Creating New Web Pages The simplest way to create new a Web page is to begin with an existing Web page, save it as a new name, and then modify the content of your new Web page.

step 1. Open an existing Web page, such as the main myindex.htm file. step 2. From the File menu, select Save As. step 3. Give your new file a name. step 4. Select a different location in the Save in folder, if needed. step 5. Click Save. Dreamweaver now saves the file, which is already open in the Document window. step 6. Modify the content of your new Web page as needed and save your changes.

COPYING YOUR SAMPLE WEB SITE TO A WEB SERVER

At this point, your sample Web site (the pages you have been working on during this workshop) is located on your computer. However, the whole point of a Web page is to enable the entire world to see what you have created! For the entire world to see your Web site, you need to copy your files to a Web server. To copy files to a Web server, you need access to an FTP program. FTP stands for File Transfer Protocol. Dreamweaver has a built-in FTP utility.

TIP: If you do not organize your site files on the Web server the same as they are organized on your local computer, hyperlinks will not work and images will not display properly.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 19 How to Define an FTP Connection step 1. Make sure your site is defined in Dreamweaver. step 2. After your site is defined, select Manage Sites from the Site menu. step 3. When the Edit Sites window appears click your site name and click Edit. step 4. In the Site Definition dialog box click the Advanced tab, select the category Remote Info and then choose FTP from the Access pull-down menu.

step 5. Enter the information that pertains to your specific Web account. Refer to the table below.

Type of Web account Remote Info label Text to use Faculty Web account FTP Host www.csus.edu Host Directory indiv/INITIAL/SACLINKID * INITIAL = the first letter of your last name * SACLINKID = your SacLink ID For example, if the name was Miles Davis with a SacLink ID of “davism” the directory would be “indiv/d/davism” Login your SacLink ID Password ALWAYS LEAVE THIS FIELD EMPTY, when you connect it will ask for a password. SacLink Web account FTP Host ftp.saclink.csus.edu Host Directory web Login your SacLink ID

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 20 Password ALWAYS LEAVE THIS FIELD EMPTY, when you connect it will ask for a password. Department Web FTP Host get this information from your account Department IT personnel Host Directory Login Password

step 6. If using Contribute, follow these additional steps. Otherwise proceed to step 7. a. Click the Contribute category. b. Click the box next to Enable Contribute compatibility. c. When you get the warning window to enable Design Notes and Check In/Out, click OK.

d. In the Contribute Site Settings window, type your name and e-mail address in the boxes provided. The Contribute category is now complete. step 7. Select OK to accept your changes. step 8. Select Done to close the Edit Sites window.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 21 How to copy files using FTP step 1. For Windows users, click the Expand/Collapse button on the Files panel toolbar. All Dreamweaver windows close, except for the expanded Files panel.

For Macintosh users, be sure you have the Files panel in the foreground. If not, click Windows menu and select Files.

step 2. Click the connect button on the toolbar to connect to your Web account. step 3. Enter your password and click OK. You should now see a list of files in the Files panel corresponding to your Web account under the section Remote Site. step 4. Select the files or folders to copy and perform one of the following tasks. ▪ Drag the files and folders to the other area. Be sure to pay close attention to where you place your files. You can click and drag files and folders from the Remote Site area to the Local Files area or from the Local Files area to the Remote Site area. ▪ Use the Put Files button. Use the blue up arrow button to copy files from the Local Files area to the Remote Site area (the Web account). Note: It preserves the file and folder organization and may ask you to copy the dependent files. If so, click Yes. Dependent files are images included on those Web pages. ▪ Use the Get Files button. Use the green down arrow button to copy files from the Remote Site area to the Local Files area. Note: It preserves the file and folder organization and may ask you to copy the dependent files. If so, click Yes. Dependent files are images included on those Web pages. step 5. For Windows OS users who want to return to the main Dreamweaver window, click the Expand/Collapse button on the Files panel toolbar. This collapses the Files panel into a single view, with the other Dreamweaver panels now appearing on your screen.

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 22 RESOURCES

Faculty / Staff Resource Center Located in ARC 3012. Assistance available on walk-in basis. Open Lab on Fridays, 1-4 pm (Fall, Winter, Spring) Open Lab on Thursdays 1-4 pm (Summer only)

Appointments with Consultants Phone: 278-7337 or x87337 E-mail: [email protected]

Academic Technology & Creative Services ATCS Contacts http://www.csus.edu/atcs/contact.htm Education Tools http://www.csus.edu/atcs/tools/ Questions or Comments [email protected] Training Workshops http://www.csus.edu/training

Online Information Faculty Web Templates http://www.csus.edu/atcs/tools/facultyweb Web Design Tutorials http://www.csus.edu/web/tutorials.html

Books Dreamweaver 8 Bible by Joseph Lowery Macromedia Dreamweaver 8 Hands-On Training by Daniel Short, Garo Green HTML for the World Wide Web, Fifth Edition, with XHTML and CSS: Visual QuickStart Guide, by Elizabeth Castro Teach Yourself Visually HTML, by Ruth Maran

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 23

Contribute Resources While in Contribute, click "Help" in the menu bar, then "Contribute Tutorial" Adobe Contribute Developer Center http://www.adobe.com/devnet/contribute/ Stanford online training site for Contribute http://med.stanford.edu/irt/web/training/contribute/

Dreamweaver Resources While in Dreamweaver, click "Help" in the menu bar, then "Getting Started with Dreamweaver" Adobe Dreamweaver Developer Center http://www.adobe.com/devnet/dreamweaver/

Web Accessibility Resources Accessibility at Sacramento State http://www.csus.edu/accessibility/ Dreamweaver Accessibility Resources http://www.adobe.com/accessibility/products/dreamweaver/ Firefox Web Developer Toolbar https://addons.mozilla.org/en-US/firefox/addon/60 Sac State Web Central Accessibility page for Web Developers http://www.csus.edu/web/accessibility/index.htm Section 508 Explained http://www.csufresno.edu/webaccess/508/508explained.htm Visual Simulation Web Site http://vischeck.com/ WebAIM: Web Accessibility in Mind http://www.webaim.org/

Academic Technology and Creative Services : Summer 2007 Web Site Quick Start 24