Stuff For Graphics Class 831
- displaying images in tables same way in MSIE and Netscape
The gap you see may be caused by a bug
in Netscape that can be worked around by eliminating spaces and
new lines within the cell.
This was the response from liam of Html Help by the WDG to Sal's question "I'm having trouble with an image inside a table...it displays properly in MSIE,
but in Netscape the right side of the table leaves a gap of about
1/8 inch. Any suggestions?"
I found this additional information later at the Netscape site on tables with the example of a return after the the first td and the closing td after image line: "That extra whitespace inside your cell and around your image gets
collapsed into single space
characters. And it is these spaces (whose baselines by default align
with the bottom of the image)
which are making your cell look lopsided. Try this instead: " with the same solution suggested by liam.
Do not leave a space between text and the code for line break in tables either, as the same principal applies.
- Lview Pro to make images transparent
- From Tina, ... it's so easy to make a
First of all it has to be a gif and have a solid background colour.
Open the gif up in the program.
Click on Retouch on the menu above and choose background colour.
Make sure "Mask selection using:" is checked and for light-coloured
backgrounds check white and for dark coloured backgrounds check black.
Then choose the colour of your background from the colour pallette.
Sometimes you just have to keep choosing until you see your graphic turn
black but the background shows through as white or black.
Then click OK. Then SAVEAS Gif 89A. There are two versions of ways to save gif's, 87 and 89. Make sure you choose 89 because 87 will not make it transparent.
See "To Anne's Project Experiments" for examples of how to do this in Lview Pro and PSP.
- File size
- kilobyte (KB) 2^10 = 1024 bytes.
megabyte (MB, colloquially "meg") 2^20 = 1,048,576 bytes = 1024 kilobytes.
1024 megagytes are one gigabyte. (from Computing Dictionary).
For optimal loading. limit web page to 30 KB (30,720 bytes) including text and graphics. To keep file size down for web pages, scan photos at 72 dpi as this is the limit for what browsers and monitor resolution can distinguish.
- Modifying Graphics
- Gamma correction is better than Brightness/Contrast for
making adjustments. Gamma between 0 and 1 will darken, 1-4 will
From Shafran's Creating Your Own Web Graphics with Paint Shop Pro p. 85.
Ingo's convert a graphic to a background tile. We all tried it.
To Anne's Project Experiments
Seamless frames test and making a graphic transparent, Snoopy with different programs and how to do it. Since I hate getting stuck in frames, I added <BASE TARGET="_top"> at the top of this document. This opens files in a full window in case someone clicks on the links in the main frame in my "frames test" example. When you are in the frames, view the document source to see the code that seems to work for borderless frames in Netscape 3 and 4 and also in MSIE.
More Experiments by Anne on making graphical text titles.
Find Chris Kutler's tutorials for homework from Oz site, Paul's Page Masters Graphics Tutorial
< b06main1.htm >
Color Primer tutorial by Chris. < b06main1.htm >
archived Internet Archives http://www.pacific.net/~chrisk/graphics/b06mn30.htm
Putting Graphics on a Web Page < b06mn20.htm > archived
GIF vs JPG and PNG
Gif versus JPG < http://www.pacific.net/~chrisk/graphics/b06mn40.htm >
Reducing Graphics Load Times archived < graphics/b06mn60.htm >
JPEG/GIF Comparisons tutorial by Chris, archived at waybackmachine archive.org
Chris plays Tricks with a single pixel transparent gif dot_clear.gif dot_peri.gif archived http://www.pacific.net/~chrisk/societal/pixel.html
Design, Help and Tools
- Web Site Development Information, Good Site Design Practices extensive listing of resources from Liam and Toby
- Esperfonto Choose typefaces that work well together or achieve a specific affect
- Experts Exchange Home Page from Chris
- HTML Help by The Web Design Group bulletin board to answer questions and info to create accessible sites regardless of browser, platform, or settings
- Web Page Design for Designers taming the electronic page, typography, Graphics and Color | Web Page Design for Designers wpdfd Sep 1 2000, tips and tricks 2012 2000 change to redirect url more on palettes. changed name http://www.wpdfd.com/wpdgraph.htm to http://www.wpdfd.com/issues/30/graphics_and_color/
- World of Color Dmitry's Design Lab April 1997 starting with color wheel
- informit.com -- Your Brain is Hungry. InformIT Replaced MacMillan' Personal Bookshelf. Computer, Graphics and Web Design, Web Development reference books. Must register, free, to view partial content from books.
Assigned Reading and Stuff from class
Michael posted PSP Help Tips for study group #PsP_HELP, Mkell, Shawnsy, willy with examples Larry W.
Text for class Special Edition Using HTML, Second Edition published by QUE
IRC class meetings were Thursdays on www.zia.com and MKell firstname.lastname@example.org took over as instructor 5/14/97
Chapter 10 Adding Graphics to Your Home Page
- Chapter 11 Handling Images
- Chapter 15 Netscape-Specific Extensions to HTML "Frames" through "Targeted Windows" online, book pages 317 - 329
- Chapter 10, section on "Clickable images" and Chap. 12 Graphics Navigation Imagemaps, pages 229 - 250
Comic Sans Cafe scroll down to note from Vincent Connare, Comic Sans' designer. Windows and Mac from Microsoft Typology.
To Anne's World: Web Page Resources
Updated 2-18-98, Mar 2012. Removed sites no longer found. Geocities sites no longer online, linked to Internet Archives archive.org or archived at recocities.com. Other links have been corrected or expanded on my main page.