1. Double-click the Pictures menu in the Finder to open iPhoto.
2. 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.

   • 

     Update iPhone settings

3. Select a photo from the Events, Photos, or Albums list.
   • Click the Edit icon and Crop and enhance the image as needed.
   • Click Apply for each editing option.

   • 

     Crop using the selection corners, then click Apply

4. With the newly cropped image selected in the Photo Album screen, edit the Title of the image (remember not to add spaces or upper case letters).

   • 

     Update the image's Title in the Information panel.

5. File->Export the image. Set the options like this: Kind: JPG
   • JPEG Quality: Low (smallest size)
   • Size: Custom (type a width, in pixels)
   • File Name: Use Title

   • 

     iPhoto Export settings.

6. Confirm the file size in the Finder.

   • 

     Confirm the settings of your new file.

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.