By now weve looked at the sizes for
Professional web site design , the best color mode, navigation schemes, and typography styles. Ive told you its usually beneficial to lay out a web page in a graphics program prior to coding the page. When doing so, you need to identify locations for all the aspects of the web page, whether each piece is ultimately going to be in the form of an image, a form field, multimedia such as flash, or text rendered by the browser.
When you look at a typical web page, it might not be immediately discernable which parts are images and which arent. Distinguishing between the two is important because theyre treated differently when it comes to production.
When you work with HTML you designate various aspects of your pages as images, text, form, field elements, links, and so on. It you look at the again with the images turned off in the browser, you can see which aspects of this page were saved by the designer as images. The words still visible are browser- based text, meaning they were typed into web page code and not included in images.
A few elements of this page may surprise you. First, while the tabs at the top contain text, they are actually images. When images are not displayed for any reason, those tabs are hidden. Even though the black space is still clickable, I doubt most users would know where to click for those three sections.
Next, the search box in the top-right corner appears to be a form field. It is indeed an editable form field, but the box itself has a background image that includes the title magnifying glass icon. Users can still enter search text even when the background image is not displayed, but they might not know where to type or how to click the search button.
These are risks involved in using images for functional aspects of a page. With the said, you might wonder why someone would make something an image if it could easily be rendered by the browser instead. Several reasons exist:
If text lies on top of, or is mixed with, a photograph or other graphic, it might need to be saved as an image along with that graphic. The reason is it can be difficult to consistently layer elements on a web page, even though it might be easy to do so in Photoshop or another
Graphic design services program. However, the abc.com site shows it is definitely possible to achieve the layered look with text placed on top of a Photoshop.
If you need text to be displayed with specific formatting, you may need to save it as an image. HTML text formatting is limited somewhat, mostly by the fonts available on the users system.
If you want to display an element with a particular style not possible with HTML or CSS you might need to save the style as an image and load it into the background of an element.
