Information Technology Reference
In-Depth Information
Visual Design of Web Screens
A Web page is a collection of digital media elements that resides in a
programmable framework, it also is a screen. The term “screen” refers to the
fact that Web pages are presented on screen and not on paper. Web screens
need to be built; initial design needs to be created before Web coding can be
done. The goal when designing screens in an image editing application is to
create only the graphical elements and layout. Concentrate on graphical
elements only, leaving space for Web text (browser based text) and multimedia
components.
Screens can be created in any image editing program that optimizes and outputs
Web pages. Keep in mind, the screens you design will become Web pages in
your site. The reasons we create screens in an image editing application and use
this technique are many. We use a two-dimensional design program to create
Web pages because it provides an accurate view of what our page looks like
in size and color, allows us free-form design with type and graphics, and most
importantly, because the screens we create will be composed of layers, we can
edit graphical content pages quickly and easily. In this topic, I will use Adobe
Photoshop and Macromedia Fireworks to create screens.
The screens you create in Fireworks become Web pages in the following
manner. Screens get optimized, sliced, and exported into HTML tables using
Macromedia Fireworks. The resulting Web pages with tables are opened in
Dreamweaver. Then, the tables can be converted to layers or kept as tables.
The tables hold all the graphics. More tables or layers are added for the text
elements and additional graphics if needed. An easy technique is to use layers
placed to float on top of the page. Layers can be positioned easily. Tables,
when they are freely placed on Web pages, may need added HTML editing
savvy and can be more challenging than simply using layers. Especially, when
you are new to using Macromedia Dreamweaver. Tables are easier to
manipulate when they are inserted into layers. This approach is a useful
technique for positioning elements freely in a Web page.
The screens we create may change during the design process. We may improve
something or realize that something is not quite right. That's okay, design is a
dynamic process. Also, we will not be creating all pages using the Fireworks
screen slice techniques; we will be using Dreamweaver to create Web pages
“from scratch”. We will also touch on static page design combined with some
simple JavaScript and HTML tweaks. I approached the tutorials for Web
