Pam Van Londen » Knowledge Base http://pamvanlonden.com Corvallis Artist, Oregon Artist. Creating Every Day...paintings, web sites, and courses Oregon daily painter, murals and portraits. Corvallis Web Designer / Web Developer Fri, 03 Sep 2010 00:20:03 +0000 en hourly 1 http://wordpress.org/?v=3.0 Stylesheets for Handheld Devices http://pamvanlonden.com/stylesheets-for-handheld-devices/ http://pamvanlonden.com/stylesheets-for-handheld-devices/#comments Thu, 04 Mar 2010 02:27:34 +0000 Pam Van Londen http://pamvanlonden.com/?p=4112 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" [...]]]> 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"
media="only screen and (max-device-width: 480px)" />

Key recommendations include using:

  • Single-column liquid layout, which does not use frames, popup windows, or JavaScript.
  • Useful alternative descriptions on images.
  • Simple, non-dynamic menus with links that look like links.
  • No floating:  * {float: none;}
  • A maximum width for images: #content img { max-width: 250px;}

Note: According to Jeff Starr, “the trick to getting Windows Mobile to recognize handheld stylesheets is to capitalize the media attribute value for the screen stylesheet.”

Resources

]]> http://pamvanlonden.com/stylesheets-for-handheld-devices/feed/ 0 Creating a stylesheet for IE http://pamvanlonden.com/creating-a-stylesheet-for-ie/ http://pamvanlonden.com/creating-a-stylesheet-for-ie/#comments Thu, 04 Mar 2010 01:45:49 +0000 Pam Van Londen http://pamvanlonden.com/?p=4108 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 [...]]]> 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 the <head> section which calls embedded <style> definitions.
  • Use a conditional statement in the <head> section which calls an external style sheet build just for IE: ie.css.

Resources

]]> http://pamvanlonden.com/creating-a-stylesheet-for-ie/feed/ 0 Optimize Images using iPhoto http://pamvanlonden.com/optimize-images-using-iphoto/ http://pamvanlonden.com/optimize-images-using-iphoto/#comments Sat, 07 Nov 2009 18:55:33 +0000 Pam Van Londen http://pamvanlonden.com/?p=4219 Update iPhone settingsOptimize 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 [...]]]> Optimize images using the Macintosh iPhoto application
  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

      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

      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.

      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

      iPhoto Export settings.

  6. Confirm the file size in the Finder.

    • Confirm the settings of your new file.

      Confirm the settings of your new file.

]]> http://pamvanlonden.com/optimize-images-using-iphoto/feed/ 0 Embedding Hyperlinks in Documents http://pamvanlonden.com/embedding-hyperlinks-in-documents/ http://pamvanlonden.com/embedding-hyperlinks-in-documents/#comments Wed, 22 Jul 2009 17:19:58 +0000 Pam Van Londen http://pamvanlonden.com/?p=3195 Example demonstrates selecting the title of an article, choosing the link tool, and pasting in the web address, starting with http://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 [...]]]> 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 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://

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.
]]> http://pamvanlonden.com/embedding-hyperlinks-in-documents/feed/ 0 Table Functions http://pamvanlonden.com/table-functions/ http://pamvanlonden.com/table-functions/#comments Tue, 19 May 2009 19:45:14 +0000 jamesholladay http://pamvanlonden.com/?p=2656 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 [...]]]> 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.

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.

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

]]> http://pamvanlonden.com/table-functions/feed/ 0 Optimizing Images in Office Picture Manager http://pamvanlonden.com/optimizing-images-in-office-picture-manager/ http://pamvanlonden.com/optimizing-images-in-office-picture-manager/#comments Thu, 14 May 2009 20:35:41 +0000 jamesholladay http://pamvanlonden.com/?p=2625 Cropping an image with Office Picture Manager. © Microsoft 2009Optimize 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 [...]]]> Optimize photos with Office Picture Manager

  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

    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.
]]> http://pamvanlonden.com/optimizing-images-in-office-picture-manager/feed/ 0 Optimizing Images in Paint http://pamvanlonden.com/optimizing-images-in-paint/ http://pamvanlonden.com/optimizing-images-in-paint/#comments Thu, 14 May 2009 20:30:53 +0000 jamesholladay http://pamvanlonden.com/?p=2619 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 Paint
  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.
]]> http://pamvanlonden.com/optimizing-images-in-paint/feed/ 0 Optimizing Images in PaintShop Pro http://pamvanlonden.com/optimizing-images-in-paintshop-pro/ http://pamvanlonden.com/optimizing-images-in-paintshop-pro/#comments Thu, 14 May 2009 20:27:29 +0000 jamesholladay http://pamvanlonden.com/?p=2615 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 [...]]]> Optimizing images in PaintShop Pro
  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.
]]> http://pamvanlonden.com/optimizing-images-in-paintshop-pro/feed/ 0 Optimizing Images in Photoshop http://pamvanlonden.com/optimizing-images-in-photoshop/ http://pamvanlonden.com/optimizing-images-in-photoshop/#comments Thu, 14 May 2009 20:25:11 +0000 jamesholladay http://pamvanlonden.com/?p=2612 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. [...]]]> Photoshop tutorial for preparing images for online viewing
  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.
]]> http://pamvanlonden.com/optimizing-images-in-photoshop/feed/ 0 Adding Style to Navigation Lists http://pamvanlonden.com/adding-style-to-navigation-lists/ http://pamvanlonden.com/adding-style-to-navigation-lists/#comments Thu, 23 Apr 2009 19:23:16 +0000 jamesholladay http://pamvanlonden.com/?p=2526 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, [...]]]> 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, 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

]]> http://pamvanlonden.com/adding-style-to-navigation-lists/feed/ 0