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 long web address into the label or title of the link.

For example this web address:

http://pamvanlonden.com/embedding-hyperlinks-in-documents

becomes

Embedding Hyperlinks In Documents

Instructions

Example demonstrates selecting the title of an article, choosing the link tool, and pasting in the web address, starting with http://

1. Using a browser, locate the article you want to link to.
   1. Copy the web address shown in the address bar of the browser.
2. Inside your document, select the title of an article.
   1. Choose the link making tool.
   2. Paste in the web address copied in step 1.1.
   3. Save the document.

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 JavaScript

Making Tables Sortable

You can use JavaScript to make your tables sortable. When you click on the column headers, the table is sorted based on the values in that column.

• SortTable – Making tables sortable
• CSS-Based Tables: Modern Solutions
• 21+ Fresh Ajax CSS Table

Adding a totals row

If you have a table of numbers, you can add a totals row at the bottom with JavaScript. First set up your table structure with the three sections:

<table>
  <thead> ...column names... </thead>
  <tbody> ...cells go here... </tbody>
  <tfoot> ...totals... </tfoot>
<table>

Dynamic Development with Dreamweaver

Lynda.com’s Dreamweaver CS3 Dynamic Development with David Gassner

1. In Windows, click Start->Programs->Microsoft Office->Microsoft Office Tools-> Microsoft Office Picture Manager.
2. From the File menu, choose Add Picture Shortcut.
   1. 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.
3. Double-click on the photo you want to edit.
4. 

   Cropping an image with Office Picture Manager. © Microsoft 2009

   In the Edit Pictures… panel, click the Crop tool.

   1. Use the picture’s corners to drag a marquee around the space you want to keep.
   2. Click OK on the Crop panel to keep the changes.
5. Click Edit Pictures… again to view the Edit Panel.
6. Click the Change Picture Size->Resize menu.
   1. Note the the picture’s dimensions; do they fit your content column?
      1. Do not leave the photo larger than the area in which it will sit in your web site’s content column.
   2. Change the percentage, type in a custom width and height, or choose a predefined width and height from the drop down menu.
   3. Click OK.
7. Click Edit Pictures… again to view the Edit Panel.
8. Click the Change Picture Size->Compress Pictures menu.
   1. Choose Compress for Web Pages.
   2. Click OK.
9. File->Save as… the picture with a new name.
   1. Do not save over your original high-resolution image. You may need it later.
   2. Save the image with no spaces in the name.
   3. Choose the directory/folder location that is just for the project you are working on.

1. In Windows, click Start->Programs->Accessories->Paint.
2. 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.
3. Choose Stretch and Skew from the Image menu.
   • Update the height and width percentages so the image will fit within the web page column you’ll be placing it into.
   • Retain the proportions so the image does not look skewed.
   • A typical web site is 700 to 900 pixels wide.
4. Save As the file with a new name without spaces in one of the following formats:
   • Online photos are usually .jpg.
   • Flat-color images like logos and clipart are usually .gif and sometimes .png.

1. Open the original file. Usually one of these formats: .gif .jpg, .wmf, or .tif
2. Select the image you want to optimize using the selection tool.
3. 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.
4. Save the new image. Choose JPEG.
5. Choose Save As… from the File menu. Name the file without spaces.
   • Underscore or hyphen characters are ok.
6. Choose the images folder of your web site.
   • Make an images folder in your site directory if you haven’t already.
7. Another option with PaintShop Pro is to let the Wizard help.
   • In the bottom right hand corner of the save as dialog box, click on Options.
   • Choose Run Optimizer.
     • A wizard dialog box will appear with a walk through of the process of optimizing.
     • Each change to the image will be shown as a preview with the option to save or discard.

1. Open the original file
   • Usually one of these formats: .jpg, .gif, .tif .wmf, .eps, .pdf.
   • Choose RGB from the Image Mode menu.
2. 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.
3. Choose Image Size... from the Image menu.
   • Change Resolution to 72.
   • Change Width and Height to fit the exact area needed on the web page (in pixels).
   • Click OK.
   • Enhance contrast and color as needed.
4. Choose Adjust from the Image menu.
   • To lighten a dark image, choose Levels and slide the adjuster left.
   • Sharpen images that are soft or blurry.
5. Choose Save for Web from the File menu.
   • Choose the proper format:
     • For images with just a few flat colors:
       • GIF, Adaptive, 8 to 32 colors, Diffusion Dither 100%
     • For images which use transparency:
       • PNG-24
     • For images with many colors and gradations:
       • JPG, medium (or less), optimized, regressive.
   • Reduce the size if needed.
   • Optimize file size to no more than 30k.
   • Click OK to save the new file in the images directory of your web site or other folder.
     • Name the file without spaces.
     • Underscore or hyphen characters are ok.
     • Do NOT save over your original image file; use a new file name.

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, which can have a different look for each type of navigation on your page. The footers at the bottom of this page have a “a.footer:hover” pseudo class applied, which works because a class called “.footer” is defined.

When list items are used to create menus, stylesheet definitions can easily transform them to vertical or horizontal bars with tabs, borders, and rollover effects. Examples:

This code:

<div>
     <ul class="toolbar">
       <li><a href="#" title="one">one</a></li>

       <li><a href="#" title="two">two</a></li>
       <li><a href="#" title="three">three</a></li>

     </ul>
</div>

…and this style sheet:

ul.toolbar {
  margin:0; padding:0; text-align:left;
}

ul.toolbar li {
  margin:0; padding:0; display:inline; list-style-type:none; font-size:12px;
}

ul.toolbar li a {
  margin:0; padding:10px; text-decoration:none; color:#6600CC;
  border: 1px solid #6600cc;
}

ul.toolbar li a:hover {
  margin:0; padding:10px; text-decoration:underline; color:#fff;
  background-color:#6600CC;
}

…give you a menu that looks like this (roll over the menu items to see them change):

Additional Resources

• Pure CSS Menus (Horizontal or Vertical Multiple Level Menus)
• CSS Design: Taming Lists is a wonderful tutorial on making your own CSS lists.

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 layout, color scheme, and navigation items defined, this initial page can become a template which is applied to all other pages. The beauty of this is when you need to add or change menu items, colors, or move a section, then all the pages with the template applied (Dreamweaver .dwt templates, that is) will change as well. If you aren’t using a site management application like Dreamweaver, then building a page with server side includes (ssi)—sometimes called components, snippets, libraries, or assets— for each section will still save you time. And, you can combine ssi with Dreamweaver templates to improve efficiency.

Start by bringing your prototype design file into Dreamweaver, either from the slicing up of a Photoshop, ImageReady, or Fireworks file, or from creating a block/div layout. Then choose one of the following methods to break out the areas of the page into easily updateable snippets of code and content:

• Service Side Includes (.htm, .txt, or .inc) These are called with ssi statements.
• PHP include files (php, .htm, .txt, or .inc) These are called with php code.
• Library files (.lbi, Dreamweaver only) These are called with proprietary statements.
• Component files (GoLive only) These are called with proprietary statements.

Server Side Includes (SSI)

With the ssi method, a page is built when a visitor requests it with within a browser. So the server does the work of compiling the sections of a page, rather than the web author putting a copy of all the sections in each page individually.

For instance, instead of leaving all the code for the masthead in the template page, move it to a new file. Leave out all the code that is already used in the template (doctype, body, etc.); take just the snippet that renders the masthead. Replace it with an include statement to "call" it when the page is requested by the user:

Masthead

<!–#include virtual="/masthead.htm"–>

which includes the logo, site name, and classes needed for the top portion of the site.

Navigation

<!–#include virtual="/navLeft.htm"–>
which contains one set of navigation.

Footer

<!–#include virtual="/footer.htm"–>
which contains the second set of navigation and the copyright statement.

Date last modified

<!–#config timefmt=’%B %e, %Y’ –><!–#echo var=’LAST_MODIFIED’ –>
which dynamically displays the date the file was last edited and posted on the server.

The reading above at the right, Apache Tutorial: Introduction to Server Side Includes, has this to say about paths for include statements:

The include element can determine what file to include with either the file attribute, or the virtual attribute.

The file attribute is a file path, relative to the current directory. That means that it cannot be an absolute file path (starting with /), nor can it contain ../ as part of that path.

The virtual attribute is probably more useful, and should specify a URL relative to the document being served. It can start with a /, but must be on the same server as the file being served.

When combining ssi files with Dreamweaver Templates, it is helpful to either:

1. Make a template for each level of directories the site will use.
   • For example, navigation links can be coded with a relative path to their pages, but the file that contains these links is called by the template page using a relative or absolute path. Clone this page for the files that reside in one level of directories from the root, but change the path to the included files.
2. Put the statement in an editable region of the template so the path to the file can be customized for each level of directory the page resides in.

If you use SSI with Dreamweaver, set the preference that allows you to see the include file while you’re working, otherwise, it is not visible until posted to the server.

PHP includes

PHP includes work like ssi includes but the statements are written differently. Save your snippets in separate files and call them from your template like this (note single quotes):

Masthead

<?php require(‘Templates/masthead.htm’); ?> or use require_once; good for connecting to a database. It will provide an error message if it fails.
OR
<?php include(‘Templates/banner.htm’); ?> good for cosmetic files; also provides error message if it fails. Use @include if you want to suppress the error message.

Page title

<?php $page_title = ‘Title
of Page’ ?> Add this other places in the page so you only have to type it once!

 

Date last modified

<?php = ‘Updated ‘  . date(‘F j, Y’, filemtime($_SERVER['SCRIPT_FILENAME'])) . ” ?>

Save the page as .php rather than .htm.

Library (.lbi) files

Libraries (Dreamweaver uses this term; GoLive calls them components) are items that get repeated on more than one page. Some examples are sets of navigation, copyright and disclaimer statements, logos, ads, contact information, and links to plugins.

When you build your site, create empty pages for each item in each navigation set and link to them from your template page. Then…

1. Select the text/items to add to a library file.
2. Modify->Library->Add Object to Library.
3. Next time you need to add the library to a page, drag it from the Assets pallet to the page. It will appear highlighted and can be edited when you click Open in the properties panel.
4. Edit content in a library file by selecting it, then using the properties pallet or library/asset pallet.

Note: since you’re building a site with consistent navigation, the relative address of the page to link to, rather than the absolute address, will suffice. Using the relative address will allow applications like Dreamweaver to update links automatically when you move files around.

One advantage SSI has over Dreamweaver Libraries is updating time. If you have a site with 500 pages, and all use a particular library, it takes a great deal of time to check the files out, make the update, wait for all pages to receive the update, and post them back to the server. With SSI, the change is made to just one file and when posted back to the server, the change appears in the effected pages with no time lost.

Template files

Templates typically store the title, meta tags, logo, navigation sets, and page layout for each section of a site. And on each page, there are defined areas where content can be edited outside the template, such the main content area (called an editable region by Dreamweaver).

Save your prototype file as a template file (.dwt) and apply it to all pages.

1. File->Save File as Template…
• The file extension will change to .dwt and be placed inside a new Templates directory within your site structure.
• Select the content area and add an Editable Region.
2. Open each page of your site and Modify->Templates->Apply template to page…
• Save each page.
3. Upload and test.
• Check to see that all links work.
• If not, make adjustments in the library and/or template file so that all links are automatically updated.

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 graphics with low resolution.

Spend an hour trying each of these options in Photoshop. If you’re using another appliction, there are probably similar options. They are all helpful to know about when you come across projects that have a lot if images or special needs.

Save for Web…

Allows control over slices, transparancy, detailed optimization settings.

Save as Compuserve .gif

One of the original ways to save a .gif. Allows less control over optimizing than Save for Web.

Save as .jpg

Handy for images with no slicing, or for saving original scans.

Save as .png

Retains layer information and allows transparancy.

Automate->Batch Process

A macro that allows you to optimize all images in a specific directory all at once.

Automate->Web Photo gallery

A macro that outputs thumbnails, resized and optimized images, and places them in a web site template. Very handy if you don’t need to modify anything afterwords.

ImageReady output options

ImageReady is designed to handle just web graphics, unlike Photoshop, which was originally designed to handle photography and painting for printing. Debaballizer and FireWorks are applications that do much of the same work as ImageReady. There are also other open source or shareware applications that can accomplish the same tasks.

Spend an hour trying each of these options in ImageReady. If you’re using another application, there are probably similar options. They are all helpful to know about when you come across projects that special needs.

Save Optimized As…

Allows control over slices, transparancy, detailed optimization settings.

Save as Compuserve .gif

One of the original ways to save a .gif. Allows less control over optimizing than Save for Web.

Save as .jpg

Handy for images with no slicing, or for saving original scans.

Save as .png

Retains layer information and allows transparancy.

Save as .jpg movie

Compiles several .jpg files into a QuickTime format.

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 the navigation links on each page so they don’t have to listen to them over and over.

About Favicons

Wikipedia.com

Need more templates?

When you finalize the design of your masterpage, you can make additional masterpages for other uses, such as:

• Subtopics which need new color schemes, imagery, or functions.
• Content-only popup pages.

Additional templates are based on the original template, so that there is consistent use of color color, fonts, and layout.

The purpose of a masterpage/template is to provide a consistent message to the users, via functions, navigation, content, color, and placement of elements, no matter what page they land on.

A masterpage should include the following components:

1. Masterpage Functions
• Scripts such as PHP allow the masterpage to be "included" or "called" by each content page creating an efficiency when updates to the graphic design are needed.
• For example, if you decided to update the name of the menus, one change in the masterpage is automatically applied to all pages of the site because they each include a call to the same masterpage.
• Click the diagram to see a legible illustration of the concept.
• Learn more at Spinning the Web:
  • Approximating Master Pages in PHP
2. Complete title tag
• Name of the page.
• Name of the site.
• Short description of the site, written using the most important keywords.
3. Meta tags
   • Some search engines still index your site by looking at meta tags. These are the most common to include:
     • Description of the site
     • Key words and phrases that visitors would use to search for the site.
     • Author of the site
     • Rating
   • If you don’t want your site indexed, then add the exclusion meta tags:
     • Noindex, nofollow, to keep site from being listed in search engines.
4. Accessibility features
• To ensure everyone can use your site, keep in mind that not all users have hands, ears, or vision. So consider incorporating these features:
  • Skip Navigation, to allow visitors who listen to pages–rather than view them–to jump over the navigation items each time they go to a new page.
  • Font-size enlarger icon. Many visitors do not know that the browser has a menu to increase or decrease the font size when they have trouble reading the page. Many new sites use a toolbar which includes skip navigation and a font-size enlarger to make it easier for the visually impaired.
  • Legible text and images. Many people are colorblind or have poor vision (and perhaps higher or lower resolution monitors than yours), so use text that is large enough, has enough contrast with the background, and does not flicker or blink when reading. Important details must not rely on subtle color changes to provide critical information because not all visitors can perceive color changes.
  • Images are quick to download, having file sizes smaller than 20k (10k or smaller is preferred).
  • Media files are labeled with links to necessary plugins and note the load time so visitors can choose whether to wait longer before viewing.
  • Downloadable files use appropriate formats. Label each with file type, links to necessary plugins, and are virus-free. Appropriate online file formats include:
    • Acrobat Reader (.pdf) files optimized for online viewing or download.
    • Text-files (.txt) work on all platforms without plugins and generally download quickly.
    • Graphics files (.gif, .jpg, or .png). Note that .bmp, .psd, .eps, and .ppt are not online formats and may be too large for some visitors to download quickly.
    • Media files (.ra, .qt, .wmf, .mov). New media file formats become available often, so test your files for download time and quality before asking your visitors to. Consider offering more than one format and size for visitors with slow internet connections.
    • Inappropriate formats for online deliver include .doc, .ppt, .xls, unless they are converted to web pages.
5. Site and page name and purpose
• Make it obvious what the site is about. Don’t rely on the <title> tag or menus to give all the information a visitor needs to understand at a glance what they can do at your site.
• In the header area, use the name of the site and a brief description that uses the main keywords.
• In the content area, use a descriptive headline.
• Continue to describe the site or page’s purpose in the first paragraph.
6. User Interface / Navigation sets
• At this stage, link names are set, but the pages are not created for them to land on.
• If using database-driven menus, testing of the links can be done at this stage.
7. Legal statements
   • Copyright date and holder.
   • Link to a policies/legal page that describes what visitors are allowed to do with the content of the site.
8. Date last modified
• If using php pages, add this function to the footer or article byline to tell visitors when the page was last updated. Visitors want to know how old or fresh the content is.
  • <?= 'Updated ' . date('F j, Y',filemtime($_SERVER['SCRIPT_FILENAME'])) . '' ?>
9. Contact information
   
   • Phone and address but NOT an email address.
   • Spammers will siphon the email address and begin sending you irritating email.
   • Adding a contact/inquiry form page during the content production phase will help alleviate unwanted email.
10. Layout defined
    
    • Will the layout be suitable for the home page as well as the content pages?
      • If not, make addtional masterpages with customized designs.
11. Add a favicon to help identify your site in the browser bookmarks list and tabs.
    • For FireFox, a .gif file will suffice.
      • <link rel="icon" type="image/gif" href="favicon.gif" />
    • For Explorer, an .ico file works best.
      • <link rel="icon" type="image/gif" href="favicon.ico" />
    • Convert most graphic files formats to ICO format with FavIcon from Pics’ free image converter.
      • Uncompress the .zip archive the converter provides and place the .ico fie in your images folder.
12. Print the template to ensure no text is cut off, excess white space does not create extra pages, and excess ink is not wasted on large masterpage graphics. See instructions below.