TIPS & TRICKS FOR WEB DEVELOPMENT

Web Development -  Templates and Logos



Using the PWCS logo on your school Home page and using the template and standards for your department's Home Page:

Follow the Communication Guidelines for Web Site Development location on page 17 of the document on the Intranet at:http://portal3.pwcs.edu:7779/InfoServices/PWCSCommunicationHandbook.pdf

Find the PWCS Logo graphic files on the Intranet; click Communications & Technology at top of page, then click Community Relations, then click Logos and Templates or go to: http://portal3.pwcs.edu:7779/portal/page?_pageid=73,54176,73_62553&_dad=portal&_schema=PORTAL

PWCS Departments should use the official banner, navigation, and text content format that has been distributed by the Webmaster for the PWCS Web Wite.



Adding Space Between Words in a Web Editor:

One way is to create a small transparent graphic square with pixel size of 4 x 4 or so.  Save/export the graphic as a transparent gif format (GIF89a format). Inserted below is a small graphic that is 4x4 pixel size, that can be used as a spacer.

Browser Compatibility

If you use web page editors such as Lectora, Dream Weaver, Netscape Composer, or other applications, be sure to review the web pages in both common browsers--Netscape Navigator browser as well as the Microsoft Internet Explorer browser. Some tags, scripts, and file types used in these programs do not function in both browsers.  For example, some effects such as mouseovers and audio in Front Page do not display in the current version of Netscape Navigator.

Creating or Editing Graphics for the Web


JPEG Format Issues -- Maintaining  Best Visual Quality
When creating or editing graphics for the web, it's better to use another format other than JPEG as your initial source graphic, such as PSD (Adobe Photoshop), BMP (Microsoft) or TIFF (scanned file). After editing, then save a non-JPEG version as your editing file and also save a copy in JPEG format for your web page.  The reason is that every time you open a JPEG to edit it and then resave it, it actually deteriorates and looses visual quality (looses digital information) the next time it is saved. 

If you only have a JPEG version of a graphic to start with, as when you have used a digital camera, convert it to the format of your graphic editor and save any changes in that format.  Then before inserting it on your web page, save a copy of the edited graphic as a JPEG again.  If you need to go back later and change the graphic again, use the non-JPEG version for all the changes.

Using GIF or JPEG Format On a Web Page
There are always exceptions, but in general a JPEG graphic format is used for a photo or a "continuous tone" illustration (one that has lots of color shading).  It maintains more than 256 colors.

A GIF file format is generally used for simpler illustrations with fewer colors, since it only maintains 256 colors or less.  It is also used in a graphic that has no background, so that an irregular shape can overlay or be more easily formatted with other graphics or text.

Graphics File Size on Web Pages
Graphics files are larger than text files and can slow down the access to web pages.  Therefore the size of each graphic and the number of graphics on each web page should be limited.  It's recommended, if possible, to maintain a standard of approximately 30 KB (kilobytes) of graphics files per web page.  This is followed on many web sites, since it decreases the access time for web pages.  For example, using a 14.4 modem, it takes about 1 second per kilobyte as the image downloads to the user.  Some tips on how to maintain small size are:

  • Scale down your graphics in a graphic editor before inserting them on a web page.
  • Keep the visual page size of graphics relatively small, then the file size will also be smaller.
  • Check the file size of your graphics by looking at your hard drive list of files under the Size column (in MS Windows).
  • Don't use too many graphics on each web page

  • Keep your page designs simple, with the graphics complementing or enhancing the information, not distracting from the main message.

 

 

 

Rev. 8/1/07

Back to PWCS Home Page