Here are a few options: 1. "Check out my latest achievement! I've just graduated with a d, Study notes of Computer Science

Download Here are a few options: 1. "Check out my latest achievement! I've just graduated with a d and more Study notes Computer Science in PDF only on Docsity!

Web Design

An Introduction

• WORKSHOP DESCRIPTION...............................................................
  • Overview
  • Prerequisites
  • Objectives
• UNDERSTANDING THE WORLD WIDE WEB....................................
  • The Language of the Web: HTML
  • Web Browsers
    • How Browsers Display Web pages
    • Saving a Web Page You Visit
• WEB GUIDELINES
  • Sacramento State Web Guidelines
  • Accessibility
  • Copyright
    • Educational Permissions
    • COURSEPACKS
    • RESOURCES
• THE WEB PROCESS AT SACRAMENTO STATE
• WEB SITE ORGANIZATION................................................................
  • File Naming Conventions
• SITE STRUCTURE............................................................................... - EXERCISE
• WORKING WITH IMAGES
  • Acquiring Images
  • Image Copyright
  • Image File Format
  • Image File Size
  • Image File Location
• WEB EDITORS
  • Adobe Dreamweaver
• MOVING YOUR FILES TO A WEB SERVER
  • File Transfer Programs
• WEB USABILITY
  • Designing Your Web Pages
  • Evaluating Your Web Site
    • EXERCISE
• RESOURCES
  • Alternate Formats
  • Faculty / Staff Resource Center
  • Training & Tools eNewsletter
  • Getting Help
  • Campus Resources
  • Books
  • Web Accessibility Resources
  • Web Resources

WORKSHOP DESCRIPTION

Overview

Are you new to Web design? Not sure how to update 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, ways to evaluate your Web site, and resources available to you.

Prerequisites

Individuals taking this workshop should have basic computer skills, knowledge of the Web, basic Web browser skills, and the ability to effectively work 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 how to evaluate a Web site. ▪ Discover where to find Web design resources.

UNDERSTANDING THE WORLD WIDE WEB

The Internet is a collection of computers around the world connected to each other via a high- speed series of networks. The World Wide Web – or Web – consists of a vast assortment of files and documents that are stored on these computers and written in some form of HyperText

Markup Language ( HTML ) that tells browsers how to display the information. The computers

that store the files are called servers because they can serve requests from many users at the

same time. Users access these HTML files and documents via applications called browsers.

How Browsers Display Web pages

When a Web page is opened 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 are downloaded from the server and displayed in the browser window. It is important to note that HTML files are text files that only contain references to the external files – you do not “embed” these files into the Web page.

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 (Internet Explorer, Safari) or

Save Page As (Firefox).

step 3. For the PC: 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 the Macintosh: In the drop-down menu next to Format select HTML Source (Internet Explorer) or Web Page, HTML only (Firefox). Choose Web Archive (Internet Explorer) or Web Page, complete (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.

WEB GUIDELINES

Sacramento State Web Guidelines

Faculty, staff, and students who are responsible for publishing Web content for schools, departments, program centers, and official student organizations should become familiar with the following University guidelines and policies:

1. Sacramento State Web Policy

http://www.csus.edu/irt/web/Policies/Web-Policy.html

2. 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 under Section 508 of the federal Rehabilitation Act. For more information, visit the Accessibility at Sacramento State website at http://www.csus.edu/accessibility/.

Faculty, staff, and students who develop University-related Web pages need to become familiar with Section 508 to adequately address accessibility concerns. It is also helpful to understand how text browsers, screen readers, magnifiers, and other assistive technologies work.

Your quick guide to understanding accessibility guidelines:

1. Take a Web Accessibility workshop.

2. Read the information from WebAIM at Considering the User Perspective: A Summary of

Design Issues (http://www.webaim.org/articles/userperspective/).

3. Visit the Center for Assistive Technology and Environmental Access (catea) Accessibility

Learning Module (http://www.accesselearning.net/).

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/accessibility/products/dreamweaver/

b. Test your Web pages using Cynthia Says, a free online service.

http://www.cynthiasays.com

THE WEB PROCESS AT SACRAMENTO STATE

This overview shows you the six steps needed to successfully get your information online.

1. Request a Sacramento State Web server Account

a. Departmental – contact your departmental sponsor

b. Faculty request form

(http://www.csus.edu/irt/Web/Forms/CSUSWeb-Request.html

c. SacLink request form ( http://webpages.csus.edu)

d. SacCT request form ( http://www.csus.edu/webct/selfservicehelp/)

2. Gather Materials

a. Assignments, Syllabus, Handouts, Textbook Info

b. Images, Photographs

c. PowerPoint lectures, etc.

3. Create/Edit HTML Files

a. Text Editors [Notepad (PC), SimpleText (Mac)]

b. Web Editors [Adobe Dreamweaver, Microsoft FrontPage]

c. You may need to convert some materials for use on the Web.

4. Preview HTML Files

a. View the local files using a Web browser, such as Internet

Explorer, Firefox, or Safari (Mac)

b. Remember to test all of your hyperlinks.

5. Upload to Server

a. Copy the files to a Web server using either WS_FTP, Fetch,

Dreamweaver, FrontPage, or SacCT

6. View pages on Web

a. View pages on the World Wide Web using a Web browser, such

as Internet Explorer, Firefox, or Safari (Mac)

WEB SITE ORGANIZATION

File Naming Conventions

When creating a Web site (or a Web page), there are a few rules for creating filenames. 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.

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.

WORKING WITH IMAGES

It is important that you prepare your images before inserting them into your Web pages. Use an

image editor, like Adobe Photoshop Elements , to optimize and resize your images for use on

the Web, and save your files as either GIF or JPG files in the images folder within the site folder.

Acquiring Images

HTML documents can contain references to images. These images can be photographs, designs, icons, or logos and can be acquired in several ways, such as:

▪ Buying or downloading ready-made images.

▪ Digitizing photographs. This can either be accomplished with a digital camera or a scanner. The University offers four workshops that address these issues.

▪ Creating your own images. To design your own images, an image-editing program must be used, such as Adobe Photoshop or Adobe Photoshop Elements.

Image Copyright

Copyright laws must be considered in any use of audio and video recordings, images and any work authored by another person or entity. Do you have permissions to use that image or video? Or, will using them fall under fair use? Be safe by following guidelines which provide a “safe harbor” within which to make choices about using others’ materials or portions thereof. Refer to the Copyright section on page 5 for additional information.

Image File Format

The two most common image formats on the Web are:

1. GIF (Graphic Interchange Format) – used for illustrations without gradients.

2. JPEG or JPG (Joint Photographic Experts Group) – used for photographs,

illustrations with gradients and large images.

JPEG image GIF

Image File Size

Whenever you include an image in a Web page, you need to be aware of your image file size. If your image file sizes are large, they will take longer to download (or appear) on the Web page.

In general, try to keep images file sizes as small as possible, without degrading the quality too much.

How do you find out the file size? You can either right-click the image (or Cmd+click on the Macintosh), and then click ‘properties.’ You may also open the picture within an image-editing

program, such as Adobe Photoshop Elements.

Image File Location

Before inserting an image into your Web page, it is important that it is located within your Web site folder. Images should be stored in an images folder that is located in your Web site folder. This is very important for file organization and file management. Here is an example:

Legend

Objects (Insert) Panel – Allows you to add images, tables, and multimedia to your Web pages. Available from the Window menu.

2 Toolbar – Shortcuts for Document window commands, text field for page title.

Document Window – Provides a work area to insert and arrange text, images, and other elements of your Web page.

4 Properties Panel – Allows you to view and modify properties of an object that is selected in the Document window.

History Panel – Tracks commands you perform and allows you to return your page to a previous state by backtracking through those commands.

6 Files Panel – Lists the various folders and files associated with the site.

MOVING YOUR FILES TO A WEB SERVER

In order for your audience to see the Web pages you create or edit, you need to copy your completed HTML files, documents and images to a Web server account – such as your faculty Web account, WebCT course, SacLink Web account or a departmental Web account.

TIP: If you do not organize your files on the Web account the same as they are organized on your local computer, hyperlinks may not work and images may not display properly. Remember to follow the recommendations in the Site Structure section on page 8.

File Transfer Programs

After you establish a Web account you can copy your files to the Web server. The University currently supports four different file transfer protocol (FTP) programs, two of which are contained within Web editors. For information on obtaining any of these software programs, visit the Sacramento State Software Distribution page at http://software.csus.edu.

If you want to copy files to and from a SacCT course, you must use the SacCT File Manager tool and not one of the following FTP programs. Refer to the File and Content Management document at the SacCT Documentation page, http://www.csus.edu/webct/faculty/docs.stm

Common FTP Programs used at Sac State

PRODUCT NAME PLATFORM HOW TO USE THE PROGRAM

Dreamweaver Macintosh, PC http://www.csus.edu/saclink/ftp/

Fetch Macintosh http://www.csus.edu/saclink/ftp/

FrontPage PC See the Help menu within the product

Windows Explorer PC http://www.csus.edu/saclink/ftp/

WEB USABILITY

For a Web site to be usable, it must be convenient and practical for its intended audience. The content, images, navigation, and placement of these elements need to match what the visitor is expecting. Visitors can easily become frustrated and quickly go to another Web site.

Designing Your Web Pages

We really don’t read Web pages – we scan them. When was the last time you read everything on a Web page? Most visitors scan a Web page, looking for specific words or phrases. When they find an item that matches, they try to click that object to get more information. If it isn’t what they want, the visitors simply click the back button and look for something else. The concept of scanning Web pages is similar to how we “read” a newspaper – quickly scanning titles, reading a few lines here and there.

Here are five important things you can do to make sure your visitors see and understand as much as possible about your Web pages:

1. Create a clear visual hierarchy on each page.
2. Take advantage of conventions.
3. Break pages up into clearly defined areas.
4. Make it obvious what’s clickable.
5. Minimize noise.^2

(^2) Krug, S. (2000). Don’t Make Me Think! A Common Sense Approach to Web Usability. 31.

RESOURCES

Alternate Formats

For questions regarding provision of instructional materials in alternate formats for students with visual impairments, learning disabilities, or mobility impairments that impact their ability to read printed materials, please contact the Services to Students with Disabilities' High Tech Center at (916)278-7915/htc@csus.edu. Website: http://www.csus.edu/sswd/services/htc.html

Faculty / Staff Resource Center

Located in ARC 3012. Assistance available on walk-in basis. FSRC Website - http://www.csus.edu/irt/acr/fsrc/

Training & Tools eNewsletter

To receive email notification regarding online seminars, new technology/tools, and other online teaching, technology and learning events, fill out and submit the Training & Tools eNewsletter request form - http://www.csus.edu/atcs/tools/newsletter/request-form-ait-news.stm.

Getting Help

IRT Service Desk (916) 278-7337 or helpdesk@csus.edu Academic Technology Consultants http://www.csus.edu/atcs/contact.htm 1on1 Help @ ATCS on Thursdays 1-4 pm in ARC 3005 (no appointment necessary) Help Desk - Problem Reports & Contact Information http://www.csus.edu/irt/helpdesk/contact.stm Training Requests training@csus.edu Web Services (a unit of Academic Computing Resources in IRT) http://www.csus.edu/irt/Web/index.html web@csus.edu Resources and technologies for the creation of static webpages and dynamic web applications, including accessibility.

Campus Resources

Training http://www.csus.edu/training Training Handouts http://www.csus.edu/training/handouts Online Tutorials http://www.csus.edu/atcs/tools/training/tutorials.stm

Educational Tools http://www.csus.edu/atcs/tools Accessibility at Sacramento State http://www.csus.edu/accessibility

Books

Dreamweaver CS4 Bible by Joseph W. Lowery Adobe Dreamweaver CS4 Hands-On Training by Garrick Chow Dreamweaver CS4 for Dummies by Janine C. Warner HTML for the World Wide Web (6th edition) with XHTML and CSS by Elizabeth Castro http://www.cookwood.com/html/extras/cssref.html Don’t Make Me Think by Steve Krug – a common sense approach to Web usability Web Style Guide by Patrick J. Lynch, Sarah Horton

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/ Sac State Web Central Accessibility page for Web Developers http://www.csus.edu/web/accessibility Section 508 Web Standards – CSU Accessible Technology Initiative http://www.calstate.edu/accessibility/section508/standards/ Visual Simulation Web Site http://vischeck.com/ WebAIM: Web Accessibility in Mind http://www.webaim.org/

Web Resources

Checklist for rating Web sites http://www.cyberbee.com/design.pdf Criteria for evaluating Web pages http://www.library.cornell.edu/olinuris/ref/webcrit.html Review of good and bad Web design http://www.webpagesthatsuck.com Web design style http://www.webstyleguide.com