What if I want to create my ShopSite store with an HTML editor?

In the beginning, writing HTML documents was a tedious process that involved learning hundreds of cryptic codes, or writing with a manual slung over your knee. As the Internet has become more widespread, Web publishing has been facilitated by HTML editors--word processors for Web documents.

The first editors simply automated some of the coding tasks that previously had to be done by hand, like putting the <b> and </b> tags around a word to make it bold. Now, WYSIWYG editors, named for "What You See Is What You Get," allow you to lay out your Web pages the way you want them to look on line. For the Web design novice, these are tremendously useful.

It is certainly possible to use a WYSIWYG editor as a tool for creating your ShopSite store, but unlike a traditional Web site, your ShopSite store is an integration of a Web site and a database. In order for your online ordering system to work, and for changes made to your databases to manifest themselves on your Web site, you must work within the ShopSite system. For that reason, you can't simply design a Web site using an editor and upload it to your ShopSite store.

What you can do is use the editor to design components that you can then enter in through your back office. For example, if you would like to create a complex collage of text and images for your store's front page. Once you were finished, the source code would look like this:

<HTML>
<HEAD>
  <META NAME="GENERATOR" CONTENT="Adobe PageMill 2.0 Mac">
  <TITLE>Test Document</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">

<P><I>Let's Pretend</I></P>

<BLOCKQUOTE>
  <P>that this is a complex <FONT COLOR="#D01218">collage</FONT> of</P>
  <P ALIGN=CENTER><FONT SIZE=+3>text</FONT> and</P>
  <P ALIGN=CENTER><IMG SRC="/asterix/best.gif" WIDTH="72" HEIGHT="72" ALIGN=
  "BOTTOM" NATURALSIZEFLAG="3"> images.</BLOCKQUOTE>
</BODY>
</HTML>

(If you do not know how to view the source code of a document you have created with an HTML editor, check your documentation.)

Once you have created this document, you can remove the body section of it and insert it into one of the text fields in the main page of your store. To do this, highlight and copy everything between the <BODY BGCOLOR="#ffffff"> and </BODY> tags. There may be other information after "BODY" like "LINK" "ALINK" and "VLINK". Do not copy that information. Only what comes after the > tag. Going back to our example, choose the following highlighted information:

 
<HTML>
<HEAD>
  <META NAME="GENERATOR" CONTENT="Adobe PageMill 2.0 Mac">
  <TITLE>Test Document</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<P><I>Let's Pretend</I></P>

<BLOCKQUOTE>
  <P>that this is a complex <FONT COLOR="#D01218">collage</FONT> of</P>
  <P ALIGN=CENTER><FONT SIZE=+3>text</FONT> and</P>
  <P ALIGN=CENTER><IMG SRC="/asterix/best.gif" WIDTH="72" HEIGHT="72" ALIGN=
  "BOTTOM" NATURALSIZEFLAG="3"> images.</BLOCKQUOTE>

 

</BODY>
</HTML>

 

The center section, outlined here, is what you should copy from the document created by your HTML editor and paste into the text field in the "pages" section of the back office. Then, when your store is generated based on the contents of your database, that entire block of text is part of your store's data.

Some information that you can specify for your page using an editor, specifically, background and text colors for the document, background images, and metatags, will have to be specified separately in the "page formatting" section of the back office, because those attributes must apply to other information that might be generated on the page, such as products and a footer, so they must be entered as separate data fields.

We can't recommend a specific HTML editor, because new developments would quickly make our recommendations obsolete. As with any software, consult magazines and other Web sites for reviews of the various programs. Some of the better known WYSIWYG editors are Adobe PageMill, Claris Home Page, and NetObjects Fusion.

Back to Main Help Page | Search | Give Feedback
If you are not finding the help you need, please give detailed feedback.