To improve readability of your web site on smart phones and other handheld devices, add a handheld media type style sheet which simplifies the page layout, user interface, and eliminates unnecessary items. <!– for other devices –> <link href=”handheld.css” rel=”stylesheet” type=”text/css” media=”handheld, only screen and (max-device-width: 320px)” /> <!– for iphones–> <link href=”handheld.css” rel=”stylesheet” type=”text/css” [...]

Internet Explorer 6, 7, and 8 can often provide a different design than intended due to the lack of adherence to WC3 standards. To help make your web design look like it does in FireFox, Chrome, and Safari, try these options: Use IE-only hacks in an existing external style sheet. Use a conditional statement in [...]

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 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 [...]

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 [...]

Want to get fancy? Does your audience need your site to be fancy? Do you have time to devote to making your site fancy? Sometimes the simplest, most subtle changes will wow your audience, or at the very least (and most important) help them find their way and understand your message. Therefore, I recommend your [...]

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 [...]

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 [...]

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 [...]

Introduction While HTML gives web pages basic structure and marks content, it is the Cascading Style Sheet (CSS) that defines how that page structure and content should look. In addition, scripts like JavaScript and HyperText Preprocessor (PHP) add functions to control windows, data structures, files and folders, media, forms, etc. Style sheets save web authors [...]

Introduction Beginning the Production Phase Once the design phase is completed, production of pages using the master design(s) can begin. The master template (header and footer files) are included on each content page just as your prototype content page. Then, when all pages are created the navigation/menu items can be linked to them. It is [...]

Basic Page Layout Once the user interface language is defined, the page can be laid out in columns and rows that contain the visual scheme/images which are meant to improve the visitor’s experience at the site. The Block Method When to use which? Compare what you see in the style sheet with what is displayed [...]

Readings An Introduction to Accessibility on the Web Macromedia Training Cafe The Unusually Useful Web Book June Cohen. New Riders. 2003. Pages 182 to 183. 250 HTML and Web Design Secrets Molly E Holzschlag. Wiley Publishing. 2004. Page 3, 243, 246 and 267. What’s All This Talk About Web Accessibility, Part 1: Inside Adaptive Technology [...]