Optimize images using the Macintosh iPhoto application Double-click the Pictures menu in the Finder to open iPhoto. Select Preferences from the iPhoto menu on the main menu bar. Choose General->Edit Photo->in Separate Window to ensure you edit inside iPhoto and not another application. Select a photo from the Events, Photos, or Albums list. Click the [...]

Word processing applications allow writers to add hyperlinks to sources. Hyperlinks are sometimes automatically created when the writer pastes a web address/URL into the document. While long web addresses may be helpful to some they are generally hard to read and longer than the width of the page. To alleviate these problems, writers embed the [...]

Alternating table row colors Alternating row color is common practice on large tables of data. It improves readability. Try these resources to use CSS or JavaScript to enable row coloring. How to Alternate Table Row Colors in CSS and HTML Zebra Tables Zebra Striping: More Data for the Case Alter Table Row Background Colors Using [...]

Optimize photos with Office Picture Manager In Windows, click Start->Programs->Microsoft Office->Microsoft Office Tools-> Microsoft Office Picture Manager. From the File menu, choose Add Picture Shortcut. From the choose file screen, navigate to the folder where you photos reside. Click Add to add the folder of photos to the Picture Manager. Double-click on the photo you [...]

Optimizing images in Paint In Windows, click Start->Programs->Accessories->Paint. Open an original file graphic file. Usually one of these formats: .gif .jpg, .wmf, or .tif Save As a copy of this file so you do not overwrite the original. Name it something else. Choose Stretch and Skew from the Image menu. Update the height and width [...]

Optimizing images in PaintShop Pro Open the original file. Usually one of these formats: .gif .jpg, .wmf, or .tif Select the image you want to optimize using the selection tool. If cropping is necessary, from the image menu, choose crop to selection Make any other adjustments to the image such as sharpen, brightness/contrast, etc. Save [...]

Photoshop tutorial for preparing images for online viewing Open the original file Usually one of these formats: .jpg, .gif, .tif .wmf, .eps, .pdf. Choose RGB from the Image Mode menu. Select the area of the image you want to keep using the crop tool. Double-click in the center of the selection to keep the crop. [...]

CSS pseudo-classes Notice the menus in this page have a pseudo-class applied to them for the link, visited, hover, and active, colors. For the site with no need for fancy menus, these pseudo-class changes in the style sheet can make tagging your pages fast. Where “a” is a link tag, “a:hover” is a pseudo class, [...]

What makes a web page different from a web site is how the pages connect to each other visually and mechanically. The purpose of a template is to provide a consistent message to the users, via color, navigation, content, and placement of elements, no matter what page they land on. Once you have a page [...]

Readings Optimizing Images Also includes Freehand and Paintshop Pro instructions. Batch Process Like Images Using Photoshop’s Actions, Droplets, and Batch Process automations. Lesson 10.5: Slicing Images Adobe Web Tech Curriculum. Photoshop output options Photoshop is designed to handle all manner of image enhancing, from high-resolution "painting" and photography to be printed, to tiny little web [...]

Readings Formatting for Accessibility Van Londen. 2004. Approximating Master Pages in PHP Spinning the Web. 2006. An Introduction to Accessibility on the Web Macromedia Training Cafe Accessibility Techniques for Dreamweaver MX Macromedia Training Cafe How to make skip navigation links this technique allows visitors who listen to websites (rather than read them) to jump over [...]

Readings HTML For the World Wide Web Page 32, 55; chapter 2, 3. The Unusually Useful Web Book June Cohen. New Riders. 2003. Pages 191 to 192. Creating Web Pages with Dreamweaver Pages 82 to 91. It is the linking of separate, single web pages that turns them into a web site. How the pages [...]

Visitors to your site will want menu items listed on each page so they don’t have to click back and forth to move to a new topic. In addition, the visitor will want each page of the site to be a quick-read—once they see the home page, and understand it—they should not have to think [...]

Readings Approximating Master Pages with PHP Spinning the Web. 2006. PHP using a typical ASP concept. Manage Your Content With PHP Christopher Robbins. A List Apart. 2002. This method uses a cookie to store a visitor’s’ preferences. Other Templating Systems Templating systems provide separation between presentation and application logic. mod_perl Documentation: Choosing a Templating System [...]

Readings Introduction to PHP W3Schools. PHP.net Tutorials and functions list with syntax and examples. PHP Basics: Writing Simple PHP Applications Ewald Geschwinde ,Hans-Juergen Schoenig. InformIT, 2002. The Unusually Useful Web Book June Cohen. New Riders. 2003. Pages 155, 168 to 169. PHP and MySQL for Dynamic Web Sites Larry Ullman. Visual QuickPro Guide. Peachpit Press. [...]

Use the chart below to choose the most appropriate file format and application for your project. For more detail, please see Wikipedia’s comprehensive list. Common File Formats Explained File Extension Name Purpose Application Notes .htm/.html HyperText Markup Language Universal format for web pages. A language of tags and code allows the web page author to [...]

Document the site for long-term quality Examples OSU Guidelines are a good model for other companies: Web Identity Guidelines Central Web Services Web Accessibility Multimedia Accessibility During and after the design and production phases of site development, I recommend documenting the following to guide the client, programmers, and web authors after the project launches. All [...]

Readings Comprehensive guide to .htaccess Write error pages, track logins, and support SSI. .htaccess files allow you to update default web server actions. Learn more at the Comprehensive Guide site: Error Documents Password protection Enabling SSI via htaccess Blocking users by IP Blocking users/ sites by referrer Blocking bad bots and site rippers (aka offline [...]

Add any location map iframe tag to a sidebar widget For widget-enabled themes only. Add the Text widget to the sidebar of your choice. Edit the Text widget. Copy the iframe text provided by Google into the editing box. For example: <iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com/maps…”></iframe> <br /><small> <a href=”http://maps.google.com/maps…” style=”color:#0000FF;text-align:left”>View Larger [...]

WordPress allows you to embed hosted movies using only the <object> tag. It works and is compliant in IE7, FireFox and Safari. Here is an example of the embed code and URL provided by YouTube: Copy the URL from the embed code provided, up to the first ampersand (&): Add the following code to your [...]

Resources Try-It-Yourself! W3Schools DHTML examples are a quick, fun way to play with new knowledge without the fuss of uploading. HTML for the World Wide Web, 5th Ed. Pages 126 to 132. The Unusually Useful Web Book June Cohen. New Riders. 2003. Pages 110 to 119. 250 HTML and Web Design Secrets Molly E Holzschlag. [...]

Readings Zen Garden Templates applied to the same content. Style sheets are one aspect of style sheets. Accessify.com’s ListoMatic Online tool for generating menu bars. Adding Style to Navigation Sets Dynamic Navigation Read about dynamic options once you’ve learned to style them with CSS pseudo-classes. Many sites have more than one set of navigation: Site-wide/global [...]

Readings DHTML and CSS For the World Wide Web, 3rd Ed Chapter 18. The Unusually Useful Web Book June Cohen. New Riders. 2003. Pages 110 to 119. 250 HTML and Web Design Secrets Molly E Holzschlag. Wiley Publishing. 2004. Page 72, 84. Many sites have more than one set of navigation: Site-wide/global section topics Subtopics [...]

Some visitors to your site might be listening rather than reading your site. So that they do not have to listen to all the menu items every time they click to a new page, provide a Skip Navigation Link so they can skip over all menu items and get right to the content area. Visitors [...]

Objectives At the end of this lesson, students will be able to: Create a color scheme using an online generator. Create a colors scheme using Adobe Photoshop, Dreamweaver, or Illustrator. Requirements To complete objective 1, students will need access to one of the following applications: Adobe Photoshop, Dreamweaver, or Illustrator, along with basic knowledge of [...]

By Loren Paulsen 2007 This page explains how to specify the language used in your web pages. Setting Up the Page This page will use the XHTML 1.1 standard. Start with the following template. The most important attributes are the encoding, charset, which must be set to UTF-8 as shown. <?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html [...]

Readings iFrame Tutorial W3schools.com Dynamic Drive DHTML scripts for iframes and other window operations. Popup Window Builder Nav Surf iFrames iFrames with pages, graphics, or snippets inside them are a slick way to add dynamic content to a page. In the example below, a JavaScript is used with an image map, which when clicked displays [...]

Readings DHTML and CSS For the World Wide Web, 3rd Ed Pages 478 to 481. HTML for the World Wide Web, 5th Ed. Pages 83 to 102. The Unusually Useful Web Book June Cohen. New Riders. 2003. Pages 203 to 209. The purpose of interactive images is generally to support the topic or subtopic on [...]

Readings & code DHTML and CSS for the World Wide Web, 3rd Ed. Page 306. JavaScript: DHTML API, Drag & Drop for Images and Layers JavaScript Library Walter Zorn. Includes tutorial. This script should be browser compatible. Report any errors to the instructor. Download the Drag and Drop file. Scriptaculus Draggables & Droppables Scripts for [...]

Using Photoshop’s Actions, Droplets, and Batch Process automations Written for Photoshop 7 Readings Photoshop 7 for Windows & Macintosh Elaine Weinmann, Peter Lourekas. Visual Quickstart Guide. Peachpit Press. Web Photo Albums Web Photo Album: How to Create a New Web Photo Album Template Parts 1–4. Jolantha Belik. Macromedia Developer Center. Save yourself and your clients [...]