Page spice

Animated page title script

A script that lets you animate the page title in the browser.

Animated message page

This script displays text messages on an introduction page before redirecting it to another page.

Bouncing image script

A script with which you can make an image bounce across the page.

Circling images

A script that will draw a circle consisting of a set of images around your mouse pointer.

Dynamic animation

This script can be used to fly text or images onto the browser screen from different directions.

Falling images

With this script you can make images fall down and then disappear from your page.

Floating images

A script that will float one or several images around the screen.

Search light

This DHTML script creates a search light effect on images using a start/stop link.

Transition effects

A script you can use to create transitions between images.

Text animation

A script to animate and fade in and/or fade out with text.

Labels: Code, HTML, Tips

Writing resources

..."the personal website of Matt Pfeffer. It is an experiment more than anything. An attempt to learn a thing or two, get some exercise, maybe have a laugh now and then.
Everything here is either trivial, or wrong."

"The guidelines this document describes will tell you how to improve the user experience on your site. They apply to web copy generally - both marketing copy and navigational (or instructional or "guide") copy - and their value is indirect but significant: Observing them will improve your site's ability to do its job well. "

"This style guide seeks to serve as a resource for anyone writing or editing web copy, and to document some of the conventions that distinguish good writing, as published on the web, from writing published in other media."

"I am glad to provide free editing help to nonprofit organizations and independent web publishers. The offer is generally for one-time edits of a web site, or of any reasonable amount of web content."

Labels: Tips

I didn't know you could do that!

"This site documents my attempts at understanding and exploring the possibilities of CSS. From standard navigation links to my more bizarre experimental techniques.

All my examples are produced with JUST CSS, no javascript, or any other language, has been used in any of the examples. The demonstrations are designed to work in all the latest browsers, but, if you're lucky, some may also work in earlier versions."

Stu Nicholls' Navigation Gallery.

Here are two of the examples demonstrated:

Messing about in boats
Hover over a picture and it enlarges to 100%

Also:



The Streaker
A piece of animation done with CSS alone, no Java.

(I haven't figured out how to use situational CSS in a blog, so you'll have to go to Stu's site to see if the guy gets to the other door.)



See all Topics

internet

Labels: CSS, Graphics, HTML, Tips

Screen-magnification or zoom

"[Participants] told us that they often copied and pasted material into Word where they could enlarge the font even more and make it bold, thus rendering it easier for them to see."

"We have not done a good job of catering to these screen-magnification or zoom users. Using CSS, it's easy to do, as we shall soon see. And moreover, using CSS to develop zoom layouts is almost exactly what developers of handheld and PDA browsers are doing in their quest for small-screen rendering of wide, multicolumn web pages."

Labels: CSS, HTML, Layout, Tips

Obscure clicks

"I would like to know how to only print part of email, as all the parts of an email conversations are not necessary to print. I have tried by highlighting the part I want and then choose "select" on print menu - but the font is so small then (no matter which printer I use). I can select in the print menu which pages to print, but that is not always clear where the page breaks happens. I could copy and paste into a word document, but then the details are missing."

Labels: Internet, Tips

First steps

"You can use a wireless network to share Internet access, files, printers, and more. Or you can use it to surf the Web while you're sitting on your couch or in your yard. Plus, it's easier to install than you think."

1. Choose your wireless equipment
   
   
2. Connect your wireless router
   
   
3. Configure your wireless router
   
   
4. Connect your computers

Labels: General, Tips

It's in the script

"Have you ever wanted to add a pop-up window to your Web site? Maybe you've wanted to add a hyperlink that closes the page or to display the current date and time. You can add all of these features and more by using JavaScript: A scripting language that can be used to add functionality to a Web page or a Web site, or to enhance the look of one. JavaScript scripts can run on any type of client or server computer."

Days Remaining in Year

Use this script to calculate the number of days between now and the end of the year.

Popup Checkbox Navigation Menu

This script opens a small popup window containing a checkbox navigation menu.

Form Field Help

Add a help link to each section in your form. When clicked, an explanation is given of what is required and a box is offered where the information can be entered and transferred to the form.

Image Viewer

Use this script to display different images without opening a new window. Click the links to change the displayed image right in the current page.

Random Password Generator

This script can be used to generate random passwords for improved password strength

• Free JavaScripts
  
• JavaScript Tutorials
  
• Free Java applets
  
• Advanced JavaScript Tutorials
  
• DHTML/ CSS Tutorials
  
• Web building tutorials
  
• JavaScript Reference

Labels: Code, Tips

DWTs

"FrontPage 2003 introduced Dynamic Web Templates, a new and sophisticated type of Web page template that enables you to share a layout among several pages in a site, preserve specific regions of content from unwanted changes, and save time when you begin to manage the Web pages on your Web site.

By creating a Dynamic Web Template, you can make regions on attached pages available for other authors to add and modify content, while preventing changes to other regions on the same page. This provides you with control to preserve the layout of the pages and the template itself. When you update the content in a Dynamic Web Template, you can update the attached Web pages simultaneously."

Microsoft:
Create a master Web page layout
by using Dynamic Web Templates

Change the master page layout
by using Dynamic Web Templates

Also:

Dynamic Web Template Interchange Guidelines

"The Dynamic Web Template Interchange Guidelines have been established by a consortium of web designers and developers in an effort to provide webmasters using a third party DWT the ability to cross over from one design to another with relative ease. The goal of the DWTIG is not to standardize design; rather, to standardize the method in which the content is added to a DWT through Editable Regions within the design."

Labels: Layout, Templates, Tips

Formating tools

Labels: Addin, Color, HTML, Tips

Point the way

"As a Web designer and HTML builder, one of the first places I visit on a Web site is the site map. The site map shows an entire overview of the structure of the site, and more importantly, indicates how much effort was put into usability testing during the site's construction.

Learn how to chart a better site map
By Jim Kukral -Builder.com

According to Jakob Nielsen's Alertbox Usability Study on Site Maps

"27 percent of users turn to site maps when asked to learn about a site's structure. If your site map is poorly designed, you may lose 27 percent of your Web visitors. That could translate into millions of dollars of missed sales for an e-commerce site, or a massive amount of missed leads for a service company."

Labels: Internet, Layout, Search, Tips

How many mentions

Labels: Addin, Internet, Links, Performance, Tips

Make it easy

"Accessibility, the design of HTML documents for accessibility by people with disabilities, is such an important aspect of the Internet today that the Worldwide Web Consortium (W3C) has adopted a set of guidelines for designing accessible Web sites. The Web Content Accessibility Guidelines (WCAG) closely follow Section 508 of the U.S. Rehabilitation Act.

For some Web sites, adherence to the WCAG is not optional; it is a necessity. Expression Web/FrontPage 2003 has tools for evaluating the accessibility of an entire Web site, identifying elements that violate the guidelines, and finding ways to correct the violations. The accessibility checker provides all of this functionality in a single dialog box.

To access the accessibility checker on the Tools menu click Accessibility (Accessibility Reports). You can use the accessibility checker to check a single page or an entire Web site. The accessibility checker checks for varying levels of accessibility and specifically for adherence to Section 508 of the U.S. Rehabilitation Act. You can check for errors or warnings, and you can add a manual checklist."

MSDN:
Adding Rules to the Accessibility checker

University of Toronto:
Adaptive Technology Resource Center (ATRC)

Labels: General, Layout, Tips

Abrogate Obfuscation

Labels: General, Tips

Screen fonts preview

"The Typetester is an online application for comparison of the fonts for the screen. Its' primary role is to make web designer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated."

Labels: HTML, Internet, Tips

Drill down to the answer

Jay White of DumbLittleMan.com has a nice site. One of the features is a list of 20 search tips to be used with Google.

Here are a few:

• Either/or. Google normally searches for pages that contain all the words you type in the search box, but if you want pages that have one term or another (or both), use the OR operator -- or use the "" symbol (pipe symbol) to save you a keystroke.
  
  
  
• Quotes. If you want to search for an exact phrase, use quotes.
  
  
  
• Not. If you don't want a term or phrase, use the "-" symbol.
  
  
  
• Similar terms. Use the "~" symbol to return similar terms.

• Definitions. Use the "define:" operator to get a quick definition.

• Vertical search. Instead of searching for a term across all pages on the web, search within a specialized field. Google has a number of specific searches, allowing you to search within blogs, news, books, and much more

Labels: Search, Tips

Eavesdrop on the experts

Labels: General, Internet, Tips