cema/site design

Professional site development is so much more than simply knowning how to put together a web page or two. Professional site development requires:

An understanding of corporate marketing objectives
Knowing the target audience for a company
Gathering market research regarding demand for products and services
Having an understanding of what market segmentations are most crucial for a given product or service
A meeting of the minds among web designers; company and web marketers; web developers; and company administration, management, and staff
Company goals need to be in place and objectives clearly defined prior to designing or developing a site
Business management will generally present the web deveopment team with a RFP (Request for Proposal) where the initial request to have a team work on a project is requested
After the web team and the company management have met and have the objectives clearly agreed upon, then the team can go to work designing the site
Once the layout and design have been established, then the development can take place
Once a project is complete and has met the objectives set prior to beginning the project, the project is signed off.
Further changes or alterations and additions would then fall into a new contractural agreement

Having everything in writing and meeting to discuss overall goals and desires is absolutely crucial to the successful deployment and implementation of any web project for professionally marketed e-corporate divisions.

A large factor into the success of an Internet presence by a company is whether a company treats its Internet division as exactly that - an additional division of the same company. The policies, standards, guarantees, procedures, and customer service need to be a mirror image of the brick-and-mortar establishment for the company.

Target Audience is CEO

Companies should avoid designing for themselves; they should step outside of themselves and visualize their company as their customers and potential customers see it. Those responsible for establishing the company goals should internalize the following statement:

To sell Jane Smith what Jane Smith buys,
You must see things through Jane Smith's eyes.

Corporations who lose this vision, lose business. The concept is as true for the Internet economy as it is for the brick-and-mortar economy. Remember that for companies to be truly successful, they must treat their Internet division as an extension of an already established company, with the same policies and procedures.

Your Audience is in the 4th Grade

Internet studies have shown that people, in general, tend to run past pages, skipping content and reading bold text and sometimes only the links. With this in mind, the level of writing needs to be brought down a few grades. Write as if your audience was in the 4th grade, and you will, accoring to statistics, reach a larger audience. More visitors will stop and stay and buy if they can find what they need quickly and the information is presented in a clean, concise, elementary level.

Remember yourself in the 4th grade? You needed a systematic, step-by-step approach to things. The instructions needed to be brief and easy to follow. Welcome back to the 4th grade, and may you pass with an A+ this time.

Simplicity is Key and a Word about Content

As mentioned in the 4th grade theory, simplicity is the key to any good site design. Here are a few tips for keeping things simple:

Make it easy for people to navigate your site by providing links on every page to every page

Company logo should be on every page

Company address and phone should be on every page

Company e-mail should be on every page with a mailto: link in place. The full e-mail address should be the text that is linked.

Cut out extra words in sentences, get to the point, and say what you need to say

Test your site navigation on a young child to see if he/she can find his/her way around the site. The child needs to know how to read

Always test your links for usability. Make sure there are no dead links on a site

Keep the number of clicks to access site content to a minimum. If a link informs site guests they can get particular content by clicking there, make sure the content is there to be found and the site guest doesn't have to continue clicking to get the information they need.

Keep the number of clicks to a minimum for customers in the checkout line of your e-Commerce store. The equivalent of having no-line waiting in a store is to have one-click convenience in an Internet store. Research has shown that as much as 64% of shopping carts are abandoned prior to checking out, with much credit being given to the cumbersome checkout procedures

Always state shipping costs clearly on a site; do not make the site guest hunt for it or wait until they've purchased to be told

Always state return policies clearly on a site

Keep content fresh -- don't let information become outdated on a site.

Offer valuable information -- People are online looking for information. As a matter of fact, some of the higher-profile search engines and directories will not consider listing a site into their databases if the site is lacking valuable educational information

Write to be Scanned

Be a chunky writer. Chunky writers are skilled in grouping concepts into small stand-alone tidbits that make sense on their own, complete with a topic heading. At the same time, the chunk of information makes complete sense when read as part of the entire document.

Because people scan web site content, writing in chunks is essential to helping site guests find what they are looking for. The principle is as true on the web as it is in resume writing: write to be scanned so that someone can discover the site topics, basics, and what to expect in a matter of seconds.

Include Headings. Chunks of text need to have a paragraph heading included with them for content scanning and usability.

Provide Descriptive Links. While the words "click here" have been proven to be successful in banner advertising, web marketers need to provide descriptive textual links within the body of their documents. Keep in mind that people scan pages, often only reading text for hints into the subject matter. Compare the following two examples:

Example 1:
At Candice's cooking corner this week, Candice shows everyone how to make delicous holiday fudge. This chocolate fudge recipe is sure to be a hit this Christmas season. Click here for more.

Example 2:
At Candice's cooking corner this week, Candice shows everyone how to make delicous holiday fudge. This chocolate fudge recipe is sure to be a hit this Christmas season.

The link in Example 2 would generate a higher click through because the expected content is evident by the linked text.

Site Navigation Principles

As mentioned in the "Keeping things Simple" section, make it easy to navigate your site by adding links to every page on every page. Here are some additional basic rules to help in developing site navigation:

Make sure your audience and the technology you use for the navigation match. Menu bars can be created using JavaScript or software tools such as Macromedia Flash. Even image maps often have some JavaScript built into them. JavaScript requires a java-enabed browser (generally any version 3 or higher browser), although Netscape 6 is showing difficulty reading JavaScript. Navigation created in Flash® requires the browser plug-in. Prior to using JavaScript or Flash® to create a navigational system, do some market research and see if your audience would be likely to have the capability of viewing the content.

When using a navigational tool created in Flash® and you're not sure if your site guests will have the plug-in, you can use a reroute script that will detect whether or not the requesting browser has the plug-in installed. If the plug-in isn't found, reroute the site guest to another version of the site where the navigation has been created using simple graphics or is text based. Of course, site guests would need a Java-enabled browser in order to read the script (but most browsers support the JavaScript).

Regardless of the global navigation you select for your site, provide textual links along the bottom of every page, perhaps in a smaller font than the text on the other pages. Remove the link to the page that the link is on. Example of links on a home page with this principle in place:

Home | Store | Contact Info | Return and Shipping Policies | Tips

Make sure the colors for the site navigation match your site and target audience profiles.
Test the usability of the site navigation by asking others to try the site prior to publishing it to the web.

Designing for Disabilities

Many people who need the assistance of a computer-aided system to read site content, desire to browse the Internet. Due to the need, there is a tool out there called Bobby®. Sites are invited to become "Bobby Certified" that is to have a Bobby seal of approval on their site, indicating the site is accessible and navigatable for people with disabilities. To find out more about Bobby, visit http://www.Bobby.org.

A few clues: Because a computer-aided system reads the content to the site guests, ALT attributes need to be added to image tags and TITLE attributes need to be added to anchor tags for links. In addition, applying the other principles mentioned in this lesson will help a company receive Bobby® status.

Design for 800 X 600 Resolution
Site architecture is all about layout. Remember you are designing for a 800 X 600 resolution. Ignoring this rule can cause sites to have horizontal scroll bars and images that do not fully display on the screen without scrolling. Sites do not look professionally designed any other way. Let's look at some retail sites for examples:

Eddie Bauer, available at http://www.EddieBauer.com
- Notice how the entire home page fits within one window.
- Change your Windows settings by right clicking on the Desktop and selecting "Desktop Properties". Then click "Settings" and change the settings to 1024 X 768. Notice the entire page is still visible, with a little more space around the content. Change your settings back to 800 X 600.
Now visit JCPenney online at http://www.jcpenney.com
- Notice the site is also designed for the 800 X 600 Resolution
- If desired, again adjust the screen resolution through the Windows settings to see the site at a different resolution.

To design for 800 X 600 resolution, set tables, images, and other page elements to dimensions conducive with an 800 X 600 resolution. As a general rule, the widest width of an object should be 750 pixels and the tallest object on a page (to be able to view th object without scrolling) should be 400 pixels in height. Keep in mind that while the site is being designed for an 800 X 600 resolution that the browser itself takes up part of the area. Another option that may help beginners is to design with the screen resolution set to 800 X 600. Again, always test your work by looking at the site in different settings.

The Browser Makes a Difference
Internet Explorer and Netscape Communicator are currently the two browsers professional marketers/designers design for. Having a copy of both browsers to test with is crucial to professional imagery. Tables and site layout can look extremely different in one browser over the other. The two browsers also handle JavaScript and Applets differently, and the developer needs to be certain that any JavaScript or applet on the page is compatible with both browsers.

Draw the Layout
Design the layout by drawing it on a piece of paper or using a computer software program to assist you.

Some designers use graphics editing programs to design the layout of the site. Using a graphics program can be a very beneficial thing to do, but keep in mind that it can also generate a long-to-load site. If you design a site using a graphics editing tool, be sure to separate the images and page elements and reassemble the idea on a page using a web page editor and creating the graphics you've envisioned in a graphics software program, one at a time. You will thank yourself later, and your boss will thank you when site guests stay around and order instead of exiting the site because it doesn't load.

There is more than one way to create a web page. The most popular ways to create web pages are using WYSIWYG editors, Text-Based Editors, word processing programs, or template software.

WYSIWYG page editors are editors that show you what you're creating as you go. Hence the term which stands for "What you see is what you get." Examples:

HTML Text-Based Editors are editors that developers can write HTML, DHTML, JavaScript, and other languages into to get the results they desire. The site generally needs to be toggled to a browser to be viewed and in some cases, the software provides a built-in site previewer. Examples:
1. Windows Notepad, the standard ASCII text program that comes with all versions of Windows
2. Allaire/Macromedia HomeSite (also bundled in ColdFusion Studio), a smart editor that completes tags and checks syntax
3. HTML Kit, a free downloadable editor that has a drag and drop tag interface.
Some Wordprocessing Programs come with the ability to be saved as web pages. Examples: Corel WordPerfect or Microsoft Word

Software Templates are common and can be obtained from web hosting companies or stores that sell computer software. Templates provide a way for merchants to establish Internet sites without knowing any HTML or designing principles. Templates are pre-made sites that can have images and text added to them in a preformatted style.

Web hosting companies that provide templates generally provide an easy-to-use interface for site guests to upload their images and text into. The program then displays the items in a preformatted style.

HTML or Hyper Text Markup Language, is the tag-based ASCII language used to create pages on the World Wide Web. HTML allows people and computers to communicate.

Other Markup Languages:

XML or Extended Markup Language, is the language that allows computers to communicate with other computers on the web and retrieve data. XML has become one of the hottest trends for conducting e-business.

XHTML or Extensible Hypertext Markup Language, is a language that XML understands better than HTML and helps to describe the appearance of a web page as XML simultaneously retrieves data for the web.

SHTML or Server-side include Hypertext Markup Language. The ".shtml" at the end of files indicates that the file is a server-side include Hypertext Markup Language, which means that the file includes some information that will be added "on the fly" by the server before it is sent to you, such as the current date, a "Last modified" date at the bottom of the page, current stock information, etc.

DHTML or Dynamic Hypertext Markup Language. DHTML is HTML with a definite zip. DHTML and Javascripts and applets often go together and often share similar or duplicate code. Popular sites for getting free DHTML are DynamicDrive.com and WSabstract.com.

Basic HTML Tags

HTML tags determine how the page will view in the browser. The basic necessary tags for any HTML document are:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

What do the Basic HTML Tags mean?

Meta Tags
Meta tags are used by search engines to catalog a page within a directory. The Meta Tags are defined at the top of each page. The following Meta Tags need to be defined on each and every page for search engine optimization: Keywords, Description, Generator. Although not as critical as the other three Meta Tags, another good Meta Tag to include is the Author tag. In addition, if desired the company can add a Copyright tag to the page. Here are examples of the tags:

<META NAME="Keywords" CONTENT="keyword1, keyword 2, keyword3, keyword4, keyword5, keyword6, keyword7, keyword 8, ...">

<META NAME="Description" CONTENT="A 25-word or less description of site content, written in sentence format and using keywords">

<META NAME="Generator" CONTENT="program used to create the page">

<META NAME="Author" CONTENT="Name and title of author">

<META NAME="Copyright" CONTENT="© calendar year, person or entity owning the copyright"
*Note: Although the Meta Tags are not visible on a page, the ©in HTML returns © on a page and represents the copyright symbol in the code.

Title Tag
The Title tag is added between the <HEAD></HEAD> tags on a page. The title is what appears along the top of the browser in the Title bar and is what search engines and directories/web guides use to list a site in the search results. The Title tag is also what is bookmarked in browsers. The Title tag on the home page should always include the name of the company and a brief statement of what the company offers. The Title tag can generally accept 24 to 26 words and still leave room in the Title bar for browser identification (a built-in identification attribute by the browser). On pages other than the home page, the Title tag should include a statement about the specific page content and the company name. The Title tag is written by adding desired text between <TITLE></TITLE> tags

Inline Text Formatting and CSS
The following are basic inline text formatting tags, many of which are being deprecated with HTML version 4 and replaced with CSS (Cascading Style Sheets).

Inline Text Formatting--

Container Tags
Container tags are tags that require both opening and closing tags.

Opening Tag Page Content Closing Tag

<B> Text you want to appear bold </B>

<I> Text you want to appear italicized </I>

<U> Text you want to appear underlined </U>

<BIG> Text that you want to appear respectively larger than the other text on the page by one size. </BIG>

<BIG><BIG> Takes the text up 2 sizes </BIG></BIG>

<SMALL> Text that you want to appear respectively smaller than the other text on the page by one size. </SMALL>

<SMALL><SMALL> Takes the text down by 2 sizes. </SMALL></SMALL>

<SUB> Creates subscript, used often in footnotes and other documentation. Example (notice the number at the end):
World News Report₁ </SUB>

<SUP> Creates Superscript text, used often in such things as exponential number. Example:
4² </SUP>

<STRIKE> Creates text that appears striked (crossed-out). Example:
~~BOYS~~ </STRIKE>

<BLINK> Creates text that blinks. Very annoying!! Avoid using this tag. Example:
Special! Act Now!! </BLINK>

<PRE> Preformatted text tag. This is a great tag to use when you really need to have spaces in your document or returns and line breaks and you just want to enter them in on the keyboard and not worry about specific tags. </PRE>

<FONT> Tag Attributes
The font tag is a container tag (requires a closing </FONT> tag), but also requires attributes in order to be effective. An attribute is an additional element added within the tag itself. No matter how many attributes you add to an opening <FONT> tag, you only need close the entire tag with </FONT>

<FONT COLOR= "lightcoral" for a colorname or "#F08080" for a hexadecimal value. Hexadecimal values are better color matches between browsers. For instance, "orange" is in hexadecimal value: "#FFA500". The color "orange" may look different between different web browsers and different platforms, but a hexadecimal value of "#FFA500" will be consistently the same shade.
Hexadecimal values also allow for shading of colors. See this great page of colors.
Clearly explained in the Color on the Web Lesson, coming up.

SIZE= "N" (Where "N" represents a value from 1-7. Size="3" is the default font size which is "Times New Roman, font size 12"). So if you don't include the SIZE= attribute, the text will be a Times New Roman 12. Therefore, SIZE="+2" would return a font size 14, etc.
+2 (adds two font sizes to the text)
-2 (subtracts two font sizes from the text)
+3 (adds three font sizes to the text)

</FONT> Closes the font tag

Empty Tags
Empty tags are tags that do not require both opening and closing tags.

<P> Paragraph tag (same as pressing [ENTER] twice in a word processing program

<BR> Line Break tag (same as pressing [ENTER] once in a word processing program

CSS (Cascading Style Sheets) --
Cascading Style Sheets provide a way for establishing text formatting styles on a single page or for an entire site. CSS tags can be added at the top of a page for internal style sheets or in another document for external style sheets.

Internal Style Sheets: Internal style sheets have formatting tags at the top of the page, defining the formatting for page text, headings, and links. The formatting will affect only the page the style sheet has been added to. The settings are set between <STYLE> and </STYLE> tags.

Example Code:

<HTML>
<HEAD>
<TITLE>CSS Example - Internal Style Sheet</TITLE>

<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
P { font-face: arial; color: purple; font-size: small }

</STYLE>

</HEAD>
<BODY>
<h1>Example Internal Cascading Style Sheet (CSS)</h1>

<h2>Introduction</h2>
<br>
Greetings from all of us.
<p>Welcome to the example page. Notice that this sentence is in Arial font, font size 10 and Purple.

</BODY>
</HTML>

View the Page

External Style Sheets: External style sheets have formatting tags in a separate ascii text document. External style sheets can be created in a simple program such as Notepad. The tags are simply defined and the page is saved with a .css extension. Then a link to the style sheet is added to the page desiring to use the style sheet formatting. The link is added with a <LINK> tag.

Example Code:

H1 { font-size: x-large; color: #0084A5; text-align: center }
H2 { font-size: large; color: #AD0000 }
P { font-face: arial; color: purple; font-size: small }

View a Page linking to the Code

The Formatting of Style Sheets: This course will not attempt to teach all the elements of Cascading Style Sheets. Here are some online resources for learning the tags and specifics --

HTML Help

WDVL

Web Monkey

About

W3C

Internet commerce can be handled in the following ways:

In-house, meaning the company site is hosted on a company web server. The payment gateways are set up on the inhouse server and the appropriate firewalls and other necessary security considerations are handled by the company owning the store. Handling the entire site and store hosting would also require that the company have a computer system in house, compatible with the computer system of the bank with which their merchant account is established. The payment gateways need to be talking to each other.
In-house, meaning the site is hosted in-house, but the commerce transacations are handled elsewhere, perhaps through a order processing or shopping cart service or another web hosting provider
By a Order processing or shopping cart service. With these services, the site is designed and then linked to the system that communicates with the bank. There are many companies providing this service. Some companies host sites and some simply provide the communication tool between the site and the bank, in which case finding hosting for the site is a separate responsibility of the merchant (site owner).
Through a web site host. Many web site hosts provide e-Commerce solutions. They host the site and provide the connectivity through the payment gateways to talk to the bank and have transactions securely take place.

Additional consideration:

Companies need to have SSL (Secure Socket Layers) or TLS certificates installed for security. Secure Sockets Layer (SSL) is a protocol for handling secure transactions online and is still used by many companies and documented in several places online eventhough it has since been replaced by Transport Layer Security (TLS). Obtaining a certificate is as simple as completing an application. Utilizing the technology is as simple as installing it on the web server computer system.

The Ability to Accept Online Payments

The ability to accept electronic transactions depends on the following criteria:

Company must have a merchant account

Payment gateways that provide a compatible bridge between banking systems and computer systems of web host providers or company in-house systems.

Company must have a web site communicating with a payment gateway that is in turn communicating with a banking computer system.

Companies must have a way of gathering customer information so products can be delivered and customer service can be implemented.

Payment Gateways

The payment gateway can be likened to a telephone wire that connects the sender's message to the receiver. The payment gateway is the system that communicates between the merchant's web site, any outsourced provider, the bank holding the merchant account, and the bank holding the financial records of the customer. There must be a communication channel among these entities and if the merchant's system is not compatible with the banking system, a transaction cannot take place. The system that determines the compatibility is the payment gateway.

Merchant Accounts

Merchant accounts are not new to the web. Merchant accounts are bank accounts for business owners. Any merchant/company on or off the Internet must have a merchant account. Merchant accounts enable businesses on and off the Internet to be able to accept payment for goods and services from customers.

When company management/owners wish to look for a merchant account for the Internet, looking first to the company where they already conduct their banking makes complete sense. Before signing the bottom line on an Internet merchant account with the same institution handling the brick-and-mortar transactions for the company, consider the following factors:

Does your current bank have the ability to offer instant online credit verification checks, or does the merchant have to manually run the payments everyday? What value does the either one of these factors have to the company management?

What online hosting services are compatible with the merchant account? In other words, will signing an agreement with this banking institution for this Internet merchant account limit the choices in hosting the commerce side of the company? If so, where, how, and how much?

If considering in-house hosting (meaning the company is going to handle the transacations themselves and not outsource the commerce side of the site), are the computer systems within the company compatible with the banking system? What will the company need to do to make the two systems communicate? Would the effort be cost effective?

SET (Secure Electronic Transactions)

SET (Secure Electronic Transactions) are used everywhere, not just on the Internet. Everytime someone uses a debit card or credit card in a grocery store, they've called upon SET technology.

SET incorporates SSL (Secure Socket Layer), TLS (Transport Layer Security), and Secure Transaction Technology (STT) to assign the user a digital certificate, verify the transaction, and to securely transfer financial data among computer systems by the merchant's bank, the consumer's bank, and the web host provider or in-house server. SET works in chime with the Payment Gateway System. The data is scrambled during transmission and then unscrambled when securely located.

Consumer Payment Options

Credit Card Transactions
Accepting credit cards was the first method of payment for Internet sales. Credit cards continue to be the most popular way to purchase online today. Merchants should be sure to select a merchant account that accepts all major credit cards: Visa and MasterCard, American Express, Discover and Diner’s Club. According to Gallup International Reports in May 2001, only 1 in 5 Americans are without a credit card, which leads to another plus for the ability to accept them online.

PayPal
PayPal is the first and the largest Internet payment service. e-Bay and other auction sites have virally spread PayPal. As a result, PayPal participants total into the billions, with the numbers growing exponentially. Why? Establishing a PayPal account is free for both consumers and merchants.

Merchants pay a per transaction fee. Consumers must have an account with PayPal to which they deposit money to spend online with PayPal merchants, but the PayPal account itself is free. Merchants provide a PayPal button on their site, linked to the services to checkout so the money can be electronically transferred from the consumer to the merchant.

Electronic Cash and Smart Cards
Electronic cach companies act as an intermediary between consumers and companies. Consumers can deposit money with an electronic cash service and then purchase online, debiting the account.

Smart Cards are like other electronic cash systems, only smart cards can be programmed for particular days and events, and limited to particular companies. Or not. Smart cards are great for promotionals and gifts. They function similarily to debit cards and can be used on and off the Internet. Visa and MasterCard offer smart cards as do other internationally recognized revolving credit vendors.

Online Checks
Online check handling can be done by purchasing software to handle the transactions or by signing up with an online check processing center. There are several online check processing centers. The payment gateway compatibility and merchant account issues listed above still apply. Some companies offering online check processing include but are not limited to: CheckProcessing.com, eCheck2000, Electronic Transfer, Inc., Create A Check, ePayment Options, WeDebit.com, and many many more.

Offering online checks is becoming more popular due to increased numbers in Internet traffic and the resulting diversity of Internet surfers, many of whom desire additional online payment options other than credit cards.

eCharge
eCharge offers two payment options: one for PCs and one for mobile phones. According to eCharge, they offer a "a feature-rich, fraud-proof online payment system that supports emerging technologies". eCharge does not collect credit card numbers so the consumer is protected from fraud.

Funding B2B Transactions

B2B (Business-to Business transactions) are outweighing B2C (Business-to-Consumer). B2B transactions involve the exchange of products, services, or information among companies. As a result, some companies are a disovering a need to have a line of credit issued to them for online transactions. That's where companies like eCredit come in who provide the opportunity for businesses to finance large-dollar or business-to-business Internet transactions.

Outsource or Develop In-House

Generally companies who decide to take care of their own in-house ecommerce transactions have the budget, time, and resources to continually train employees and provide resources to maintain the application(s).

Outsourcing means a company has opted to house the commerce side of the store with another company. The company may decide to host all other aspects of the site, other than the store, on an in-house company server. Hosting the stie itself without the store requires less security, firewalls, and other measures than does hosting the commerce entitity.

Companies with the expertise and finances may determine to house the commerce side of the store in-house and may find doing so more beneficial due to freedom in managing the account as they see fit, instantaneously, without waiting on the assistance of a third party.

Data Management Side to e-Commerce

There is a data management side to e-Commerce/e-Business/e-Marketing. Often times companies will desire to place articles online to have site guests search for needed info or products. There are also occasions for wanting to gather site guest info and have the data collected update a customer database for future reference. Gathering demographic and psychographic data is absolutely a marketing function, yet there is a need for computer technology integration. Many web marketers are also web developers and many are web designers.

As an Internet marketer in training, you need to understand the tools necessary for processing data online. Each of the following is an example software and skill-set package for handling data management for the Internet side of a company:

For ColdFusion Enterprise Server:
1. ColdFusion Enterprise Server
2. A page editor: ColdFusion Studio or Dreamweaver UltraDev
3. SQL (Structured QUery Language) -- a computer language, not software. ColdFusion Studio has a built-in SQL Builder jprogram, although knowledge of SQL is still required by the user. SQL can be written in any text-based page editor.
4. A database. MS Access works fine for introductory purposes. Many small companies use Access for their web site integration, while larger corporations will work with Oracle or Sybase.
For ASP (Active Server Pages):
1. Requires a Windows platform. The ODBC drivers are built in to Windows. There are many books available for teaching ASP.
2. A page editor: ColdFusion Studio or Dreamweaver UltraDev. Dreamweaver UltraDev integrates beautifully with ASP.
3. SQL (Structured Query Language) -- a computer language, not software. ColdFusion Studio has a built-in SQL Builder jprogram, although knowledge of SQL is still required by the user. SQL can be written in any text-based page editor.
4. A database. MS Access works fine for introductory purposes. Many small companies use Access for their web site integration, while larger corporations will work with Oracle or Sybase.
For PHP --
1. If using PHP, you may want to consider using MYSQL. These are scripting style programs for integrating database-style data with sites. PHP and MySQL serve together as the query language, the tool that serves the data to the web pages, and the database structure.
2. A page editor -- Dreamweaver is a popular page editor with PHP and MySQL.
For JSP (Java Server Pages)
1. JRUN is a Java Server Application Program, formerly an Allaire product, now part of the Macromedia/Allaire merged Company.
2. A page editor: ColdFusion Studio or Dreamweaver UltraDev
3. A database. MS Access works fine for introductory purposes. Many small companies use Access for their web site integration, while larger corporations will work with Oracle or Sybase.

Each of the applications listed above: ColdFusion Enterprise Server, ASP (Active Server Pages), PHP, and JRUN for implementing JSP pages -- are all communicative tools, linking the server, web pages, and databases together.

Activity, Part A - Understanding Image Maps

The following activity for image maps includes instructions for creating image maps in Macromedia Fireworks.

Introduction to Image Maps

Utilizing image maps in site navigation can make a very fun site, or at least make it more interesting. An image map is a picture that has been divided: one picture linked to more than one object or page.

Image Map Info

Image maps are created to help web site browsers graphically see where links will take them. Image maps increase user interaction and ease of web site navigation. There are countless examples on the web of image maps, one of which is at http://www.utahrealestate.com.
As you can see, an image map is a graphic (gif or jpg, graphical or photo quality) that has been divided into coordinates and a different link assigned to each. When you roll the mouse of each area of the image, a different link is available. ALT tags are essential to image maps. ALT tags are what make the yellow markers pop up on the screen, informing the user where the link will take them.
While the most common use of image maps is for site navigation and so the links redirect the user to another area or page within the site, these image map links can as easily redirect users to another site altogether.
When using image maps, take time to notice the size of the image. You will want to make the image as small in size as possible. This does not necessarily mean resize the actual height and width pixels, because you want the image to be readable, but rather to look at the resolution, hue, and color depth of the image. Often changing these features will make the image considerably smaller in KB. The optimal size for an image is less than 10 KB. While this is often not possible for image maps, do your best to keep it less than 50 KB whenever possible.
In some cases, Internet users will not have image loading capabilities or will not have a fast enough modem to pick up the image (even small images) at a speed they are willing to wait for. In addition to image maps, web designers need to also include text links elsewhere on the page that will take the viewers to the same links as the image map.

Image Maps, Server and Client Side

There are two types of image maps - server-side and client-side:
- In the Internet arena, the terms "client side" and "server side" are common. Image maps are just one example of client side/server side technology. Server side anything means in order for the object to work, additional data is required to be retrieved from the server. So before an action can take place, a message needs to be transmitted to and returned from the server. Client Side anything means that the object works entirely once it is loaded; no continual messages need to be sent to the server.
- JavaScript and Java Applet example: When an entire JavaScript is contained within the HTML code of the page, it is considered a client side application. However, an applet requires that a message be sent to the server requesting action from the Applet; this is a server side example.
Client-side image maps use HTML. The following tags are used to create HTML (client-side) image maps:

<MAP> Defines an image map. Takes an attribute of NAME that is used to tie an image to a map

<AREA> Specifies a clickable area. Takes a SHAPE attribute of POLY, CIRCLE, or RECT, a COORDS attribute that specifies the area to be made clickable, and an HREF attribute that specifies the anchor URL for user clicks.

<USEMAP> Used within the <IMG> tag to specify a map to use. This value will correspond to the value of NAME in the <MAP> tag.

Learn How to Do Image Maps

Roll your mouse over the cat and then the bird

</map>

Notice the area shape="circle" code. This tells the computer to create a hot spot in the shape of a circle and looks for 3 values: An x and y value for the center of the hotspot and another value for the radius in pixels.

The area shape="rect" expects to be given four values - on a x/y graphical setting: One set of x and y values for the upper left corner of the hotspot and one set of x and y values for the bottom right corner of the hotspot. In this case, the rectangle hotspot is over the little yellow bird.

For a polygon, you'd type: area shape="poly" and there would be an x and y value for every point or turn made around the image. So if you were outlining someof the flowers in the picture, as shown, you can see you would have 12 sets of values (12 values for x and 12 values for y):

<area shape="poly" coords="171,223,193,213,198,184,213,178,239,182,240,196,247,224,
253,247,254,262,237,276,194,274,182,258" href="http;//www.ftd.com" title="FTD some flowers today!" alt="FTD some flowers today!" >

Count the blue dots around the flowers, and you will see that there are 12, resulting in 12 sets of values.

Activity, Part B - Creating Image Maps with HotSpots
(using Macromedia Fireworks)

Create a Navigational Image Map

To create a navigational image map, complete the following steps in Fireworks:

Click File, New and set the size to 120 Width and 300 Height.
Change the color of the canvas by selecting Modify, Canvas Color. Then select "Custom" and double click on the color box to mix a color.
Use the A tool to write text on the image. Type your menu options on the nav bar. Use the following options:
- Home
- Shopping
- Tutorials
- Links
- Contact Company
To evenly space the menu items, click Edit, Select All.
Then click Modify, Align, Distribute Heights (this will center the menu options vertically - top to bottom)
With the image still completely selected, again click Modify, Align, Center Vertical (this will center the menu options left to right). This is not a type-o.
Now you will need to set each menu item up as a link. To do this, do the following:
In Fireworks locate the hot spot tool in the tool bar (as shown)
Draw a hot spot box over the first menu option on the nav bar.
If the Object window isn't presently visible, click Window, Object .
In the Object window enter the link and alt attribute of the image tag as shown here: (Don't forget to add the http:// if you're linking to an external web site.)
Link the parts of the image map to the following addresses:
- Home: index.html
- Shopping: shopping.html
- Tutorials: tutorials.html
- Links: links.html
- Contact Company: contact.html
Be sure to click File, Save As... and save the file. Saving the file will create a file with a .png extension. Not all browsers support files with a .png extension. Even so, this is the wrong type of .png file to add the page. Saving the file saves it as an editable .png file. If you export the image as a .png file, you can use that format on a web page (for newer browsers). Exported .png files can not be edited later (clickable areas to change font, etc. are non-existent with exported .png files). Again, for editable working .png files, simply save the image. You would never want to add an editable .png file to a web page because of file size and incompatibility with many browsers.
Click File, Export Preview, make sure the right format is selected (look under "Options") and save the file where other files for your site are located. The program will create two files: one file for the image you just saved ( .gif or .jpg file) and one .htm file. The .htm file has all of the necessary quadrants and information programmed into the file.
To view the image map that you created, open Netscape or IE and click File, Open Page. Then click on Choose File... You will want to look for an html file by the same name as the picture you just exported.

Activity, Part C - Creating Image Maps with the Slice Tool and Rollovers
(using Macromedia Fireworks)

Open the png file you saved in Part 2 of this assignment. Part 3 of this assignment is to create an image map with rollovers.
Change the color of the text on the image map and/or the color of the map itself. Do something to it to distinguish this image map from the one you created in Part 2.
Creating a map with a rollover means that when site guests roll their mouse over one of the navigational choices that the option will appear selected - or will change in some way.
Delete the hot spots from the navigation bar.
Remember creating animated images in Fireworks. Creating image maps with rollovers can involve completely different images or can involve frames. In this example, we will use frames. Create a new frame for each menu option: there are 5 menu options, so add 5 new frames to the image. You will have a total of 6 frames, with the image map in frame 1.
Single click on the first menu option. With a blue box around the first menu option, press CTRL + C on the keyboard (or Edit, Copy from the menu bar). Go to Frame 2 and click CTRL + V on the keyboard (or Edit, Paste from the menu bar).
Change the color of the text and add a glow to the words by clicking Window, Effect, Shadow and Glow, Glow. Do something to the text to make it different.
Repeat for the next menu option, copying the words into Frame 3 instead of Frame 2, and so on until all Six frames have content in them.
Now add a mouseover to each of the frames. Here are the steps:
1. Locate the slice tool, next to the hotspot tool on the toolbar and draw a box over the first menu selection

Click Window, Behaviors

In the Behaviors dialog box, click the + sign and then click "Swap image"

Select Frame 2

Repeat for each menu option, selecting the frame for the respective menu option.

To test your work, click Preview in the tab bar along the top of the document window, and roll your mouse over each of the menu options

Next add the link and alt tag to the sliced area by clicking: Window, Object. Remember if you’re going to link to another web site, you need to add the http:// in front of the www. in order for the web site to be found.

Export the image, the same as you did the other image maps. IMPORTANT NOTE: When you select the slice tool so that you can add action rollovers to the image map, the image is exported as a puzzle in several pieces and then reassembled on the page. As a result, you will end up with several image pieces being reassembled on the page.

The image should have exported an html page as well as the image you created. If it did not export an html page, recheck the export options when you select File, Export Preview and export the image again.