DAY 3 BUILDING FEATURE RICH WEB PAGES
I hope you had a chance to view www.lemontime.com to see how nicely a
website can be designed using EZ-Page Builder, and other features of this
system. If you have not looked at www.lemontime.com yet, now is a good time.
You might also want to look back at the example website as you progress with
this chapter. This will give you a chance to view a website created with the tools
you are about to use.
At your fingertips, you have the power to design your website in countless ways,
to create commercial web sites that have the professional appeal you desire, with
the transactional power merchants need.
EZ-Page Builder provides a number of block types that can be used to
design a web page. By stacking and configuring different blocks, you can design
and configure your web page according to your specifications. Refer to online
Help and Users Manual for further information.
Although you can work with your design as you take this course, I suggest that
you try every block type to get a sense of each component. When your done
you can get a sense of how to delete a block, by clearing the block you dont
want on your website.
The Title block is great for setting up headlines. Headlines are important for
drawing your readers attention to your topic and idea. This tool is straight
forward: You enter title text and select font attributes like size, face, color, set
text alignment, and other options.
The Text block can be entered and formatted in a variety of fonts colors, sizes,
and faces. And text can be aligned left, right or center. One thing you might also
note: most block types have the "Insert Blank Line" On/Off option, so you can
set a space after the block.
The HTML block allows those who know how to create HTML and Java
Script, to customize their website in limitless ways. This feature can be very
useful for advanced and intermediate users who want to put custom features on
their website. You can type your commands or copy and paste code right into
your web page.
HTML and Java Script will be covered more in a future lesson. In the meantime,
here is a cute little piece of code for your enjoyment. Built-in modular design
lets you quickly and efficiently cut and copy and paste a drop down menu that lets
you control background color.
Hint: Highlight text starting at and including the first "<FORM>" and
the last "</FORM>" included. ENJOY!
Use copy and paste to capture the code AFTER THIS LINE.
<SELECT onChange= "document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="2E8B57">Sea Green
<OPTION VALUE="87CEEB">Sky Blue
<OPTION VALUE="F4A460">Sandy Brown
<OPTION VALUE="FFF0F5">Lavender Blush
<OPTION VALUE="FF1493">Deep Pink
<OPTION VALUE="FFFFFF" SELECTED>White
Use copy and paste to capture the code BEFORE THIS LINE.
Adding a Table is a 2 step process: First you specify the table configuration
(number of row and column, header formatting, alignment, border thickness and
other options. Then in the second window you add the text that will appear in
the table. See how easily and efficiently you can disseminate information with
Bulleted Text allows you to present a list with custom bullet markers and
customizable text. Bulleted Text can be configured to allow each bullet point to
act as a hyper-link. Alignment can be left, center, right, or sidebar which
(according to you taste) can make a quick hyperlink navigation panel for your
The Add Horizontal Line allows you to insert a horizontal line on your web
page. A number of stock lines are already available if you wish to use them. A
good idea is to enter a description in the "Alt Text" field. Alternate Text is
displayed when a graphic has not yet loaded onto your visitors computer for
whatever reason. Putting alternate text lets your visitor know the intent of your
graphic. If the alternate text said something like "horizontal line", "end of section"
the visitor will have some understanding of the unseen graphic.
Graphics can be the fun part of your website design. Perhaps that is why there
are several graphics block types:
Its a good idea to try all the graphic block types so you have an awareness of
each. As you work more and more with these tools, you will gain more familiarity
with each block type and its customization.
The Specials block is a grouping of stock graphics, that relate to "specials", like
holiday sales, and such. This allows you to quickly insert graphics that provides
both visual stimuli and a hyper-link to your "specials". If you dont want to spend
time creating or searching for graphics, here are professionally created holiday
"specials" that you can add in minutes.
Mail List allows you to insert a mail list form on your web page. Visitor can
then enter their name and email address to be added to your mailing list.
The Order Button lets you add a order button graphic that provides a link to
your Secure Order Form. You have a number of stock order buttons available.
Normal and Advanced Site Search can be added to you website at the click
of a mouse. This feature time both in setup and usage. Your visitors will be able
to search for what they want for YOUR sight.
Once you have items in you catalog, you will be able to create a shopping cart
button that allows visitors to add a specified number of items to their shopping
cart. We will come back to this block type when we study e-commerce in an
The Credit Card block display the credit card logos for the credit cards brands
configured in EZ-Order. We will come back to this when we study e-commerce
in an upcoming lesson.
The Button Builder allows you to quickly and easily create a hyper-link
navigation bar using a selected button graphic, and your superimposed text and
Button Bar lets you use custom images as your navigation bar to your specified
hyper-link address. Button Bar can be align in the center of your page or as a
An Information Request form can be inserted into your web page that allow
visitors to enter contact information and comments. Each Information Request
can be customized to the specific topic related to that form, and forwarded to a
unique email address. You can also customize other options like automatically
adding the user to the website mailing list when they submit the request form.
File, found in the upper corner of your web page (not browser) and the drop-
down list next to "Go". File has the following functionality:
Save - Saves page you are composing to a web page file on the
Save As - Save page to file name you specify.
Delete - Delete file you select.
View HTML - Lets you view the HTML code for a page you select.
Meta Tags - Enter meta tags: title, description, and keywords. Stops warning.
More Options - Advanced options.
Edit Links - Add, edit and delete hypertext links globally.
Exit - Exit EZ-Page Builder
GRAPHICS ON THE
Graphics are often the most notable part of a website. Graphics can also become
the most problematic. One of the problems is that graphics slows down the
loading of a web page over slow moving computer modems used by most.
Therefore it is a good idea to make sure your graphics files are small and
optimized for the web, to make loading speed of your web site fast so you dont
keep your customers waiting.
THINGS TO THINK
Load Time, the time necessary to load a web page onto a computer, is one of
the first thing one notices when entering a website. Actually it is the excessive
load time that usually gets noticed.
This is something you dont want your website to be noticed for. Because once
a visitor notices they are waiting, they begin to get bored, and might move to
somewhere else before your page has a chance to fully load. Therefore you
want to reduce the time it takes to load your webpage.
If you feel you must have an animated splash screen as visitors enter your
website, make sure you offer a way for your visitors to skip over your animation.
Your visitors may be impressed the first time when they visit your website, but it
is not good to make your visitors wait for an animated "commercial" every time
they try to visit your website.
If background and other graphic are large or plentiful, it will cause visitors to
wait excessively, so you want to keep the number of graphics to a minimum.
Some suggest using no more than 5 files for a web page (example: one for the
page itself, one for your logo, and 3 for whatever (graphics, background,
A way to reduce web page load time is to reduce or eliminate animated
graphics (unless its important for demonstration of your produce or service).
Not only does your animation extend your load time, it also distracts readers
from your message.
Another way of minimizing picture file size, is to minimize the picture size,
dimensionally speaking. I don't mean that you use the stretch feature of some
web page software to shrink the picture layout. (Often this reduces the
apparent size, but not the actual file size.) Use a graphic program to reduce
the number of pixels in the height and width dimensions, thereby reducing
file size and load time.
I know of a good program for manipulating and optimizing your graphics. In
addition to many other graphic controls and features, Photo Impact allows
you to adjust picture size as suggested in the above paragraph. You can
download a shareware version of Photo Impact at www.ulead.com
Another way of reducing load time is to optimize the graphics for the web.
Photo Impact has a nice way of optimizing graphics by reducing the number
of colors in a picture (referred to as color depth). By reducing the number of
colors in a picture, one can reduced the file size (thereby the file load time)
without changing the picture size. If you reduce both color depth and the
number of pixels, you can reduce page load time significantly.
In addition to reducing the number of pixels in a picture, Photo Impact
can reduce the number of colors in a picture without a noticable difference
in the optimized picture as compared to the original. This program can be
very helpful in reducing picture file size, and web page load time, while
presenting good quality pictures.
Photo Impact can be found at www.ulead.com
END OF LESSON
Tomorrow: The Power of Email - Building Your List, Checking It Twice
© Copyright 2000 Daniel Szeremet. All Rights Reserved