21 Day Web Master Training
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 ending with the last "</FORM>" included. ENJOY!
Use copy and paste to capture the code AFTER THIS LINE.
<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 Integration.
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 page.
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 upcoming lesson.
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 hyper-link reference.
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 sidebar.
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 Internet
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 Internet
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 About
Load Time, the time necessary to load a web page onto a viewers 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 be sure that your page loads as quickly as possible by minimizing picture file size. One way to minimize picture file size is to minimize the picture size, thereby minimizing the file size. Another way it to optimize a picture to reduce file size while maintaining good visual quality. There are a number of programs you can use to optimize graphics. You can download a program called Photo Impact at www.ulead.com
Another thing you might consider, is to reduce or eliminate animated graphics (unless its important for demonstration of you produce or service). A dancing graphic might be interesting once, and cute for a while, but often animations and dancing logo distract visitors from your message.
If you insist on having 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 you business 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, picture,..).
Another way of reducing load time is to optimize graphics to reduce file size. At www.ulead.com you can find a tool for optimizing pictures to minimize file size while maintaining good picture quality. Check it out 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
Return to Training Navigator