DIRECTORY

HOME
BEARS
BEAVERSHARKS
BOWLS
CATS
E-MAIL
FACE JUGS
FAQ
FISH
FLOWERS
FRUIT
GEOMETRICS
JANIFORMS
KIAWAH
LIGHTHOUSES
MASKS
MOSAICS
PITCHERS
PLATES
PLATTERS
POOPHEADS
PRINTS
STUDIO
TEAPOTS
VASES
LATEST WORK
ART EDUCATION
TUTORIALS
WEB DESIGN
LINKS
GLOSSARY
TRANSLATIONS
NEWSLETTERS
WILL'S WORKS
ADD TO CART
ORDER
ADD TO CART
© copyright 2007
X PRANKARD
all rights reserved
Tarpon Springs,Florida
USA
Phone Link
simplified chinese.title.image
DEUTSCH
El ESPANOL
FRANCAIS
korean.title.image
L'ITALIANO
japanese.title.image
NEDERLANDS
O PORTUGUES
traditional chinese.title.image
k.x. studios logo
OWN OUR HANDMADE, ORIGINAL, WORKS OF ART

Web Site Design is a presentation by X Prankard from Pinellas County School Board, Largo, Florida for the Florida Art Education Association at the 2005 annual convention in Miami, Florida. These pages are intended as an introduction to various steps in the web design process. This page requires Internet Explorer 5.2 / higher or Netscape 7.2 / higher or Safari. All the links will not work in some older browsers. Javascripts and “pop ups” should be enabled.

You can visit the Floria Art Education Association web site @ FAEA.ORG

WEB SITE DESIGN

  1. 1. HTML CODE and SOFTWARE

  2. 2. BROWSERS

  3. 3. WEB PAGE ANATOMY

  4. 4. DIGITAL IMAGES

  5. 5. TEXT / PAGE LAYOUT

  6. 6. SITE HIERARCHY DESIGN

  7. 7. ABOUT LINKS

  8. 8. SEARCH ENGINES

  1. 9. ADVANCED HTML - JAVASCRIPTS

  2. 10. RESOURCES / BOOKS

  3. 11. FREE WEB SITE SPACES

  4. 12. FAEA 2004

  5. 13. TOUR ART EDUCATION

  6. 14. TOUR KXSTUDIOS.COM

  7. 15. FAEA / KXSTUDIOS.COM NEWSLETTER

  8. 16. FREQUENTLY ASKED QUESTIONS ?

CLICK TITLE FOR MORE
OR SCROLL DOWN MANUALLY

# 1. HTML CODE AND SOFTWARE

A.  HTML: UNIVERSAL CODE

BACK

HTML, Hyper Text Markup Language, is a universal code. It can be read by all operating systems. Windows systems and Macintosh being the most common. Browsers, however, do not see the same code in the same way.

There are many alternatives to HTML. Each offers a little different spin to the way the code is read. DHTML, SHTML,XML are examples. They are extensions or variations on the HTML path.

XHTML is expected to take over HTML 4; the current version.

Click here to see more on “How Web Pages Work” @ www.howstuffworks.com

B. SOFTWARE

BACK

The list of software avaialable for creating web sites is extensive. Those listed below are my personal favorites. They are not paid endorsements, not yet, anyway.

  1. MACINTOSH

  2. MAC OS 9: Simple Text ( comes with system )
  3. MAC OS X: Text Edit ( comes with system, go to preferences and take off the RTF suffix; add .html)
  4. COMMERCIAL:
    www.MACROMEDIA.com: DREAMWEAVER 8 (Free 30 day demo )
  5. Dreamweaver Tutorials @ www.intranetjournal.com
  6. Dreamweaver Discounts @ www.buysusa.com
  7. SHAREWARE: Pay a little - get a lot
    www.OPTIMA-SYSTEMS; PAGESPINNER HTML EDITOR ( GREAT ! This was my first editor for two years)
  8. FREEWARE: Download it - Own it
    Mac OS 10.2: TACO HTML EDITOR ( Sounds VERY good ) @ tacosw.com
  1. WINDOWS

  2. TextPad ( should come with system or download it here ) @ www.textpad.com
  3. COMMERCIAL:
  4. Adobe GOLIVE 6 @ www.adobe.com/products/golive/main.html
  5. Adobe GOLIVE 6 Tutorials @ www.golivein24.com/tips
  6. Adobe Discounts @ /www.superbuysoftware.homestead.com
  7. Microsoft: Front Page @ office.microsoft.com
  8. Front Page Tutorials @ www.fgcu.edu/support/office2000/frontpage
  9. Microsoft Discounts @ www.softwareoutlet.com
  10. SHAREWARE: Pay a little - get a lot
  11. WebElite @ www.safety.net
  12. COFFE CUP HTML Editor: $49.00 @ simplythebest.net/shareware
  13. FREEWARE: Download it - Own it
  1. RELATED LINKS

  2. FREE MAC DOWNLOADS @ www.download.com/Mac-Software
  3. FREE DOWNLOADS FOR WINDOWS @ www.download.com
  4. LOTS OF GREAT MAC and WINDOWS DOWNLOADS @ TUCOWS.COM

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 2. BROWSERS

A.  AN INTRODUCTION

BACK

The subject of Browsers on the web is a big deal. Millions of people use only dozens of browsers. Browsers are quite important to the internet process. Once you have signed on with an ISP, Internet Service Provider, you have a choise of which browser you utilize. AOL, America on Line, is both an ISP and its own browser. AOL, my ISP, is limited in many ways. My preferense is IE 5.2. ( Internet Explorer version 5.2 for Mac ) Then, there are the versions that emerge of each browser. Millions of computers, litterally, join the internet each year. They tend to stay with what becomes familliar, the version of a browser they started with. They do not update their browser to the newest versions. Or, their operating system and browser, slowly becomes stale and eventually obsolite.

The point, here, is your HTML code MUST be readable in most or all browsers. Each browser reads the same code a little differently. Most of the time the difference is quite subtle. Other times...WOW.. what happened ? Each browser claims to offer the best internet experience

Hense, you will encounter what has become known as the “Browser Wars,” the fight for dominance.

You MUST see your pages, regularly, on at least three browsers and versions.

Click here to see more on How Browsers Work @ www.learnthenet.com

B.  GET YOUR BROWSERS NOW

BACK

It's time for you to download a few different browsers.

  1. MACINTOSH BROWSERS

  2. Microsoft: Internet Explorer @ www.microsoft.com
  3. NETSCAPE: OS X or less @ browser.netscape.com
  4. APPLE: SAFARI; OS X 10.2 or 10.2.8 @ docs.info.apple.com
  5. FIREFOX by MOZILLA @ www.mozilla.org
  6. OPERA @ opera.com
  7. ** iCab @ www.icab.de/dl.php
  8. MAC ONLY BROWSERS @ darrel.knutson.com
  1. WINDOWS BROWSERS

  2. Microsoft: INTERNET EXPLORER @ www.microsoft.com
  3. NETSCAPE 8 @ browser.netscape.com
  4. FIREFOX @ www.mozilla.org
  5. OPERA @ opera.com
  6. MORE WINDOWS BROWSERS @ www.windowsdownloads.com
  1. ALTERNATIVE BROWSERS FOR HANDICAPED VIEWERS

  2. WWW.W3.ORG @ www.w3.org

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 3.  WEB PAGE ANATOMY

A.  A LITTLE BACKGROUND INFO

BACK

This section will introduce you to the structure of HTML code. Simple text editors require the auther to actually write or implement the HTML code. That will work, but it is unrealistic.

Some Freeware will actually do a pretty good job. Shareware will do a good job of writing code. Educational software is the best option. You can purchase full power programs for a fraction of the retail cost to create sites for your department, school, students or yourself using your teacher status.

B.  PAGE SAMPLES

BACK

Next, you can learn how to look behind the curtain and see how the code is written for any page you choose. You will start with a simple web page and progress to more complex coding.

tag page

CLICK HERE SEE OUR CODE SAMPLES

  1. RELATED LINKS

  2. Getting started @ www.htmlgoodies.com
  3. WRITING FOR THE WEB @ www.useit.com
  4. Beginner's Guide @ archive.ncsa.uiuc.edu
  5. Even MORE @ www.davesite.com

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 4. DIGITAL IMAGES

A.  CAMERAS

BACK

Ironically, cheap camers with low “MEGA PIXELS” are just fine for web sites and the internet. The actual resolution of internet images is 72 dpi. ( dots per inch ) That is too low, way too low, for printing copies ; like 4" x 5" or ( HA, HA ) 8" x 10". A $ 20.00 digital camera from Wal-Mart or Target will make you good to go.

BUYER BEWARE ! All the stores that sell digital cammera play a shell game with the buyers. People seem to buy cameras by the price first, manufacturer second and, oh yeah, number of megapixels last. It is mandatory, imperitive, that you compare the number of megapixels to the price and then the manufacture. You know, in the heart of your wallet, the camera you buy will go on sale for 50% off the minute you walk out the door.

Camera selection and price are entirely too personal a subject to delve into here. The bottom line for digital images for web sites is any camera will do.

LEARN MORE ABOUT DIGITAL DIGITAL CAMERAS @ www.faqs.org

DIGITAL EDITING HEALTH TIPS @ www.editorsguild.com

B.  FORMATS

BACK

Once you have a camera and images for a web site, you need to decide how you are going to disply them. In traditional photography, you cold choose between black / white or color. Digital images are quite a bit more complex.

There are many formats or systems for the computor to read and produce oor write an image. For the internet it boils down to two JPG ( ) or Gif ( ). Jpg is best used for regular images of people, places or things with a broad range of colors. GIF is best for graphic images with relatively few colors like cut paper collages or even watercolors; 2-D art in general.

GIF's load faster than JPG's and have smaller flies. Jpg's render more colors because they have larger files. Therefore, JPG's have lots of unnecessary pixels and load   s  l  o  w  l  y.

Loading speed is of great importance. Bigger is not better on the web. Faster is better. Large images take longer to load. You will loose your audiance if you burdon their computer with huge images.

LEARN MORE ABOUT IMAGE FORMATS @ www.htmlgoodies.com

C.  OPTIMIZING IMAGES

BACK

Image loading speed on the web is of great importance. Bigger is not better on the web. Faster is better. Large images take longer to load. You will loose your audiance if you burdon their computer with huge images.

Here are three examples. Watch how long it takes the three images below to display.

snowman's love
CLICK HERE to watch three different size images load; THEN CLOSE POP-UP

Sizing you images for themost effecient use of space and loading time is known as “OPTIMIZING.” This is truely a big deal. The three examples above where loaded from three seporate image files. You can resize images by specifying their dimentions in the IMG tag. However, the computer will still have to read the bigger file and then resize it. TOO LONG !

These images are stored together in an IMG file or specifically; holiday_plates.img file. They are titled with a sizing code, so they can be distingwished by name. ie: snowman_with_heart_thb.jpg ( thunbnail); snowman_with_heart_100.jpg ( 100% ); snowman_with_heart_001.jpg ( 1000% )

Notice: lower case letters only, underscores not spaces, NO SPACES !; peroid; format, lower case. Of course, there are examples to the contrary, that work; you sound like a student.

  1. OPTIMIZING IMAGES RELATED LINKS

  2. Manipulating images @ www.htmlgoodies.com
  3. OPTIMIZING IMAGES @ www.yourhtmlsource.com

D.  DIGITAL IMAGE EDITORS

BACK

First, let's examine digital imaging software / editors.

Regrettably, the best; the cheapest, most wonderful image editor is no longer in production. Adobe PhotoDeluxe 2 or 4 was / is really a star, Macintosh and Windows. It came as a bonus on the software CD with my digital camera, a Kodak 3700. Oh man, is it ever great. It really does EVERYTHING expensive editors do, like Photoshop. WOW! Ask around, you probably know someone that has it.

You can get a lot of cool digital imaging software with the CD that comes with the books “Adobe PhotoDeluxe 4 for Dummies.” or “Adobe PhotoDeluxe 2 for Dummies.” Adobe PhotoDeluxe 2 or 4 does not come with the book, however. There was one at a close out book store for $7, just this summer. It is also avaialbe at Barnes and Noble close outs for $ 22.00. Amazon close out, etc may have it even cheaper.

www.barnesandnoble.com

There can not be enough said about the value of this image editor. ALL the images on my pages have been retouched, resized, and optimized.

Okay, enough about Adobe PhotoDeluxe. There are, certainly, other better ( ? ) editors out there. The foremost is Adobe Photoshop ( CS ). It is THE program for the world's photography or digital image industry. Photoshop is truely complex and requires a high degree of comitment. New, off the shelf it is expensive. Oh, it is very good. The manuls to learn it are another $35 and 3" thick. You can get “Educational copies” for under $100.

  1. DIGITAL IMAGE EDITORS RELATED LINKS

  2. DESIGN AND DIGITAL PHOTOGRAPHY DOWNLOADS @ www.download.com/Digital-Photography
  3. IMAGE EDITING DOWNLOADS @ www.download.com/Image-Editing
  4. Photoshop Tutorials @ www.good-tutorials.com
  5. WINDOWS FREEWARE: IrfanView is a very fast, small, compact and innovative (for non-commercial use) graphic viewer for Windows 9x/ME/NT/2000/XP/2003 @ www.irfanview.com
  6. WINDOWS: PAINT SHOP PRO X @ www.corel.com
  7. Photoshop DISCOUNTED @ esmartsoft.net

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 5. TEXT

A.  LEARN HOW TEXT CODING WORKS

BACK

Graphic designers will find the issue of text and page design a little like laying out a page for print. It is possible to specify typeface styles on your pages. If you look closely at my code, you will not find any such notations. ALL the browsers have a default type face they use when the code does not dictate or request a typeface. Since there are issues between browsers the simplier you make your code, the more latitude you will be given. Does it really matter ? If you write code for a specific typeface and the browser bawks, you loose. Your page will be ... troubled.

On the page link below, you will open a page with a series of tables with progressively more complex table designs. The linked page is sort of like a clapping game.

ie: clap you hands once; clap you hands once, touch your right ear with your right hand; clap you hands once, touch your right ear with your right hand, clap you hands twice; clap you hands once, touch your right ear with your right hand, clap you hands twice, wave your left hand. Okay, it is tempting to make this go on; but stop. The linked page is an example of my “HELLO WORLD ” progression. Each example ( table) has a different color background. You know how to open the view page source code with you browser. Use that or, better yet, copy the page; open the view page: place the curser at the top left corner / select all / copy / cut / paste the whole page on your own page / file.. Then, you can open it on your desk top. Make duplicate copies. Number each one, like: “ text_examples_01.html.” If you loose track of your changes you can easily make a new duplicate of the original and start over. Check out the nine sample tables on the next pop-up.

The first table: HELLO WORLD is centered and sized to H1 with a white background.

The second table: HELLO WORLD is centered; in three sizes on three rows with a green background.

The third table: HELLO WORLD is left, center and right; on one row in three colors with a red background

And so on, you will see. Look at the source code with your browser.

Look for the comment after each table tag. It will tell you the color of the background and its hexigonal number. Each table is also numbered so you can find it in the source code. The Hello World idea made it hard to distinguish one table from another.

text example thumbnail

OPEN HELLO WORLD TEXT EXAMPLES

B.  PAGE LAYOUT

BACK

Page layout is created with Tables, Rows and Columns. As you saw in the text section, above, text formating is closely associated with page layout.

Undoubtably, the first step is a pencil sketch of how you want a page to appear. You build pages like an electronic Lego set. One approach, is to simpley layout the Tables, Rows and Columns first. Then insert the background colors, text, images, and graphics. Now is a good time to mention templates. Once you have a page layed out the way you want it, name it, save it in a folder or directory and make duplicates of the original for each additional page.

The main idea here is to learn how to use the BORDER="1" table attribute for layout. The Table tag contains data for the the table. You can put lines / borders around your Tables, Rows and Columns to see what and where they are. The long text sample page had one table over another running down a page.

Pages MUST load quicky. Web surfers will not, do not wait or scroll down past the opening page view; unless they are very engaged in the information. The generally accepted theory is two linked short pages are better than one scrolling pages.

AS always, once the Sample page opens; look at the source code in your browser to see the way the Tables, Rows and Columns are structured. This page is designed to be a home page. You can select subjects randomly and return to the main directory. Or, continue scrolling down from subject to subject without returning to the main directory.

The top of the page, the opening view is the model for the Page Layout Sample.

layout page
OUR SAMPLE LAYOUT PAGE
  1. RELATED TEXT / LAYOUT LINKS

  2. LAYOUT @ www.w3schools.com
  3. TEXT COLOR @ www.weballey.net
  4. TEXT STYLING @ style.cleverchimp.com
  5. MORE ABOUT TEXT @ www.weballey.net
  6. MORE ABOUT TEXT @ www.w3schools.com

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 6. SITE DESIGN

A. WEB SITE HIERARCHY

BACK

This section could have gone first. Designing the navigational flow of your site and pages should be an early part of the creation process. However, it is a chicken or the egg type query. You have to know how to write source code and create tables, etc. before you can produce your first page. The next pop-up has three downloadable PDF ( Portable Documrnt File ) illustrations. Each illustration demonstrates a different facet of site navigation and hierarchy.

The first diagram starts with the home page and main directory at the top; ie Ceramics; illustrated with thumbnail images. A visitor should be able to go everywhere on a site from the home page and back. The home page should be a general introduction to the site. It should load quickly. The visitor should not have to scroll down. Besides, generally, they will not scroll down ; unless they are terribly engaged, like you are. There should be thumbnail illustratios and a written list directory to take the visitor anywhere throughout the site and back.

The second level down is labeled the Sub Directory. The home page lists all the large sub topics of the site ; ie only vases or only cups. The sub directory has more information choices on a specific sub topic. The visitor can then choose to go to individual pages related to the sub topic. The visitor should be able to move laterally from one Sub Directory to another without going back to the home pages. There should be a navigation bar that will take them to the home page or related topics.

The third level down is labeled individual pages. Individual pages should have information about specific aspects of the sub directory; ie individual vases or individual cups with discriptions about each item. The visitor should be able to move laterally from one Individual page to another without going back to the home pages. There should be a navigation bar that will take them to the home page, the sub directory, or related topics.

The fourth level down is enlargements. At this level all the visitor sees is a large image of the object. The visitor should be able to move laterally from one enlargement to another without going back to the individual pages. There should be a navigation bar that will take them to the home page, the sub directory, or related items.

FIRST DIAGRAM: SIMPLE SITE PYRAMID

The second Illustration should be self explainitary. It demonstrates the flow of information from your computer to the domain server / your files and back. It also shows how visitors from the world wide web relate to the system

SECOND DIAGRAM: WWW AND YOU

The third illustration is an exploded view of a complex site. It demeonstrates varios options for the flow of information and how it can loop and inter relate.

THIRD DIAGRAM: HTML HEIRARCHY

B.  DOWNLOADING THE ILLUSTRATIONS

BACK

When you click on a download a seporate window will open. If you have ADOBE ACROBAT READER loaded on your computer it will open. It may open with another PDF reader. In eather case, if it does open; go to file / print. You should get a copy. You could also go to file / save or copy to save a copy. When you are done, close the pop up.

You may need Adobe Acrobat Reader to read or print the PDF from your computer. You can download it for free. Click on the logo to download a copy.

  1. HTML HEIRARCHY RELATED LINKS

  2. MORE THAN YOU WANTED TO KNOW @ www.w3journal.com
  3. NICE, STRUCTURAL APPROACH @ www.webstyleguide.com
  4. SITE DIADRAMS @ www.webstyleguide.com

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 7. ABOUT LINKS

A.  LINKING BASICS

BACK

Hyperlinks move viewers for page to page and site to site. They incorporate what is kmown as an “URL,” Uniform Resource Locator.

READ MORE ABOUT URLS @ archive.ncsa.uiuc.edu

DO NOT USE SPACES IN URLS. We combine letters to form words, we seporate words with spaces. Computer programs can not process spaces. They think the command has ended and they want to stop processing. That does not really work very well. So, computers have been programed to insert “%20” when ever it reads a space between words in an URL. WOW! Does that make trouble!

Instead of using spaces, you should use an underscore “_” or a period “.” UnderscoreS are better than periods for in line spaces. Periods should be saved for seporating suffexes at the end of a file name or URL.

It is is important, to use only lowercase letters in URLS and ALL tag attributes. Mixing upper and lower cases will make you case sensitive. Then, you will have to use and remember EXACTLY the same sequence of letters for file title and URLS. DO NOT DO THAT ! Stay with lowercase only.

Otherwise, linking is not as complex as former topics. The code lines are simple. There are two basic links: Hyperlinks; page to page or site to site, Image links; call the file for a jpg or gif image.

Hyper-links tags open like this: <A HREF="sub_directory/sub_directory/file_name.html"> Macintosh web pages end with HTML; Windows end with HTM.

Image links open like this: <img src="sub_directory/sub_directory.img/file_name.jpg" width="54" height="85" HSPACE="0" VSPACE="0" BORDER="0" ALT="mandatory"> Both Macintosh and Windows use the same image suffexes: jpg, gif, tiff, png for images.

Both hyperlinks and image tags close with a </A> tag.

Please note: the ALT atribute is MANDATORY ! There are two reasons for this. First, browsers for handicapped visitors depend on the alt text for text informatio. They enlarge it or read it out loud for handicapped viewers.

READ MORE ABOUT THE RULES OF ALTS @ www.faqs.org

The hardest part of linking is understanding the addressing of the links. When you first begin, you will be working on your computer and calling for local files. The browser you use will include you desktop and hard drive AND file names in the address of your links when opening pages for you to see. This type of link is called ABSOLUTE ADDRESS. When you have a host and files on a server; you will be moving around from file to file on the server within the same main file. These are called   RELATIVE LINKS.

Here is an example. After you have aquired an HTML EDITOR and a BROWSER; you feel like you are good to go. As you design and view pages on your desktop, they link, open and look fine. THEY ARE NOT FINE. All your links are NOT going to work when you upload to a server, they have absolute addresses. Your links hve to be relative.

After some initial practice on your desktop, go for it. Upload to a server so all your links will be relative and work as your site grows.

You will be glad you did.

  1. HYPERLINKS RELATED URLS

  2. ABOUT HYPERLINKS @ www.codeave.com
  3. HOW TO BUILD HYPERLINKS @ www.w3schools.com/tags
  4. CORRECT CODE WITH A VALIDATOR @ www.htmlhelp.com/tools/validator
  5. WINDOWS ONLY: FIND BROKEN LINKS WITH “Xenu's Link Sleuth” @ home.snafu.de/tilman/xenulink.html

Some link suggestions to our site are listed below.

Please copy and paste them. E-mail me with your sites address and I will link to you.

B.  LET'S LINK

BACK

Oh yeah, this is important. Everyone wants to be one of the top or first ten when a visitor does a google search.

According to current trends in Search Engine algarhythms, one factor in web site ranking is how many sites are linked to you. This is actually a page link issue, not a web site issue. In other words, if all / many FAEA members linked their site to this particular page , this page would rank high on searches for Web Design.

“POPULARITY” is a rank that evaluates how many sites are linked to you. If we link to each other or create a network; we will all benefit.

So, as you “grow” your site, please link to pages my site. I will in turn link to your site to impove your ranking. We may have many themes / pages in common; school sites, art education pages; including various media, ceramic art, etc and artist sites.

Apparently, the link does not have to be prominent. Years ago, there was a linking rumor about the number of links you had going out from your site to others. Now, current magazines extol the merits of having links TO your site.

Most sites have a LINLS page. Links from your site to other sites used to be important. So, i made lots of link list a couple of years ago. Check the out @

CHECK OUT OUR LINKS @ KXSTUDIOS.COM

Some link suggestions to our site are listed below.

Please copy and paste them. E-mail me with your sites address and I will link to you.

  1. LINK SUGGESTIONS TO KXSTUDIOS

  2. ART EDUCATION @ kxstudios.com/arteducation.html

  3. WEB SITE DESIGN @ kxstudios.com/faeawebdesign.html

  4. ARTIST SITE @ kxstudios.com

  5. SCHOOL SITE @ kxstudios.com/art.education/schools/curtis_fundamental.html

  6. ART EDUCATION @ kxstudios.com/arteducation.html

C.  SWAP LINKS OR RECIPROCAL LINKS YOU PAY $$$ FOR

BACK

And then, there are sites dedicated to this issue of gaining rank when people use search engines. Search engines are actually another subject listed below. Anyway, here is a list of site that charge you for their services:

  1. LINKING SITES RELATED LINKS

  2. LIST OF SITES @ www.google.com
  3. CHECK OUT THIS ONE, IT LOOKS FREE @ monsterlinkswap.com
  4. www.linkexchanged.com
  5. www.linkalizer.com
  6. www.gotop.com
  7. www.associateprograms.com

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 8. SEARCH ENGINES

A.  FRIEND OR FIEND

BACK

Just a brief word about all those search engines. There are a lot of them. GOOGLE, YAHOO, ALTA VISTA are quite prominent on the list.

You can do your own search for elaborate explainations. Let it surfice to say, search engines create lists of web sites and their content. Presently, they are counting how many sites are linked to you. How important are you?

Search engines also evaluate pages by this these criteria. All the things on this list are supposed to be the same:

  1. The PAGE TITLE ( in the HEAD of the page) not the file title ( blabla.html)
  2. The DISCRIPTION meta tag should start with the same words as the title
  3. The KEYWORD meta tag should start with the same words as the title AND be brief. ( keyword searches have to match EXACTLY. If you put twenty words on your list; a search will only respond to the same list. So they say. )
  4. The FIRST LINE OF THE PAGE should be a large H1 or H2 text heading with the same words as the title
  5. The FIRST WORDS OF THE OPENING PARAGRAPH should have the same words as the title. Or, they should appear in the first sentence, at least. The title words should be highlighted wth the <EM> </EM> tag
  6. And finally, the ALT TAG in the image brackets should start with the same words as the title

AIN'T THAT EASY !

HOW SEARCH ENGINES WORK @ searchenginewatch.com

  1. SEARCH ENGINE RELATED LINKS

  2. ALL / MOST OF WHAT YOU NEED TO KNOW @ searchenginewatch.com
  3. USERS GUIDE TO SEARCH ENGINES @ /www.searchengineshowdown.com
  4. LEARN WHAT THEY DO @ searchenginewatch.com
  5. MAJOR LIST @ www.weballey.net
  6. INTERNATIONAL SEARCH ENGINE LIST @ searchenginecolossus.com
  7. FANTASTIC STUFF @ www.submitcorner.com
  8. SUBMIT @ www.weballey.net
  9. LEARN HOW TO PROMOTE YOUR SITE @
  10. LEARN HOW TO PROMOTE YOUR SITE @ www.weballey.net

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 9. ADVANCED HTML - JAVASCRIPTS

A.  LET THE GAMES BEGIN

BACK

Javascripts are complete computer programs that preform fun little tasks. You use them all the time on the web. The “Open New Page” feature used throughout this page is a javascript. Rollover images, blinking lines, random image generators, automatic slide shows, pop-ups and best of all games.

Best of all, you do not have to write them. There are litterally hundreds you can down load for FREE. Really, the only hitch is; the authors want credit. They want you to put their name in the head of your page and “site the source.” WOW ! That's easy.

They are, some times, a bit querky to install. But, learning is fun or can be.

Javascripts add a lot of pazazz to your site.

  1. JAVASCRIPT RELATED LINKS

  2. THOUSANDS OF JAVASCRIPTS @ javascript.internet.com
  3. MORE JAVASCRIPTS @ webdeveloper.earthweb.com
  4. 789 JAVASCRIPTS @ www.geocities.com/SiliconValley
  5. JAVASCRIPTS AND MORE THAN THE ONE WITH MORE @ www.javascriptcity.com

B.  CHECK OUT SOME JAVASCRIPTS ON KXSTUDIOS.COM

BACK

These javascript examples will pop-up ( pop-ups are javascripts ) in a new window. Close the window after you see the example to go on to the next. There are no browser navigation bars to tempt you from traveling within the site.

  1. DAY / DATE: ON THE INDEX PAGE, HOMEPAGE AND ALL SUB-DIRECTORIES
  2. RANDOM SLIDE SHOW

C.  JAVASCRIPT GAMES ON MY SITE

BACK

These javascript games are so much fun. When our Face Jug pages were first evolving, all there was to say or list was H x W X D; clay type; glaze.

KA BOOM ! WOW ! BORING.

What else could be said ? How about a folksy story ?

The first story was Jerreye That worked fine; for the first story. As the stories developed; the Face Jugs became a village of friends, cousins and idiots. They lived and worked together. They also did dumb stuff that disrupted their world. You may have met charactors much like these or have them in your family.

Anyway, the first generation of Face Jugs did not use javascripts; just back up images to document the possibility it was all true.

The next generation of Face Jugs were the Kiawahs. They demanded more that cutesy stories and images. They were destined to wield the power of Javascripts.

LOTUS: CHINESE BIRTH SIGNS
ASTRO: WHAT'S YOUR WEIGHT ON OTHER PLANETS ?
JONA: TIC TAC TOE ( WATCH OUT; HE CHEATS ! )
MAX: SEUTH SAYER; MYSTIC, PSYCHIC; PSYCHO

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 10. RESOURCES / BOOKS

A.  RESOURCES

BACK

Here are, initially, links to some of my favorite HTML Resource sites. HTMLGOODIES.COM is the foremost resource. The others were collected as my searches for these pages unfolded.

  1. HTML RESOURCES LINKS

  2. JUST ABOUT EVERYTHING YOU NEED TO KNOW ABOUT HTML @ htmlgoodies.com
  3. WEB MASTERS STUFF @ links.webmastersite.net
  4. HTML AUTHORING @ www.htmlhelp.com
  5. WHAT'S WRONG WITH THIS SITE @ www.webpagesthatsuck.com
  6. Dr HTML |"S TOOL CHEST @ www.doctor-html.com
  7. A LITTLE OF EVERYTHING HTML @ hotwired.lycos.com/webmonkey
  8. WEB DEVELOPMENT ARTICLES @ www.smallbusinessbrief.com
  9. CHECK OUT DIFFERENT VIEWS OF YOUR SITE @ www.delorie.com/web
  10. SMALL BUSINESS MARKETING AND RESOURCE ARTICLES @ www.smallbusinessbrief.com
  11. WRITING COPY THAT SELLS @ www.smallbusinessbrief.com
  12. WHY SOME SITE SELL AND OTHERS DO NOT @ /www.smallbusinessbrief.com

B.  BOOKS

BACK

You could, honestly, create an entire site without buying even one new book. You could compromise and buy used HTML books or both. Most of the books in my library are “previously owned.”

Do not misunderstand, at 24 to 50 bucks a pop new computer books are very expensive and often necessary. There are some series published that are truely better than others.

Look for these:

  1. BOOKS IN MY LIBRARY ( Click here to see 'em )

  2. HTML GOODIES BOOKS by Joe Burns; THE BEST
  3. HTML 4 by elizabeth Castro; Visual QUICKPRO Guides Published by Peachpit Press
  4. THE MISSING MANUALS SERIES by O'Rielly on HTML Topics and Software
  5. The Bible Series of HTML and Software Books by Wiley Publishing
  6. The Books for “DUMMIES” by IDG Books World Wide

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 11. FREE WEB SITE SPACES

A.  FREE ? THERE HAS TO BE A CATCH

BACK

My guess is “advertising pop-ups.” Yahoo Geocities seems legit, free. It is definately worth checking out.

You should also check out. Free stuff, lots and lots of it !

Free stuff, lots and lots of it @ thefreesite.com

  1. RELATED LINKS

  2. YAHOO - GEOCITIES FREE WEBSITES @ geocities.yahoo.com
  3. THEY SAY FREE, NO ADS @ free.hostdepartment.com
  4. 100 Mb, no ads @ free.hostdepartment.com
  5. GREAT LIST OF FREE SPACES @ thefreesite.com
  6. 150 MEGABYTES OF FREE SPACE WITH ADS @ www.freewebpage.org

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 13. TOUR ART EDUCATION

A.  MORE FREE STUFF

BACK

The Art Education on kxstudios.com section has evolved out of a need to communicate with parents, students and the art education community. Ignorance is no excuse. Knowledge is power.

LINKS to ART EDUCATION on KXSTUDIOS.COM

kiawah admiring a pop tart kiawah admiring a pop tart clay head clay head kiawah admiring a pop tart
ART EDUCATION HOMEPAGE
CERAMIC TUTORIALS
CERAMIC GLOSSARY
STUDENT ART GALLERY
DRAWING LESSONS

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 14. TOUR   KXSTUDIOS.COM

A.  MY PRIDE AND JOY

BACK

PLEASE NOTE: This tour follows the Hierarchy Format discribed in the Site Design section.

INDEX PAGE

Last and not least is the web site dedicated to our art at KXSTUDIOS.COM. The site first came on line in the summer of 2000. The county offered a Web Site Design course for teachers that spring. It was very fundamental and covered much of what is presented here. HTMLGOODIES.com was my first mentor site. This site has branched out and out. I spend a couple of hours a day hacking away at it. Usually, between 4 and 6 am.

The entry point to the site is the INDEX page. It offers translations of the homepage in eleven languages; English, French, German, Italian, Dutch, Spanish, Portuguese, Traditional Chinese, Simplified Chinese, Japanese, and Korean. It also features medium size images with a random image javascript of the art on the site.

OUR INDEX PAGE

HOME PAGES

The homepage has a text directory and a visual directory with thumbnail links. It is intended to service right brain and left brain visitors. Actually, it also could be for illiterate or non English speaking visitors, as well. There are actually over twenty home pages. All the sub-directory pages mimic a home page. They each have the translation logos at the top. The idea is to treat each sub topic; vases, pitchers, etc, as if it were an entry point or a homepage for a site dedicated to that particular theme.

This page, the one you are on now, follows the same homepage format. You entered KXSTUDIOS.COM directly into this page, as if it was a web site specifically dedicated to web design. You can in turn, navigate from this homepage throughout the site from the directory on the left side of the page. Therefore, KXSTUDIOS.COM is the sponsor and advertiser of this page.

A visitor can navigate laterally from one sub-directory to the next with the text directory list on the left side of each page.

OUR MAIN HOME PAGE

SAMPLE: SUB HOME PAGE

INDIVIDUAL PAGES

The sub directory homepage lists individual pages with text and thumbnail image links. Visitors can click on a link to an individual page with a medium size image and a text discription / story about the individual piece. There are usually links to related works of art elsewhere on the site. For example, a cat teapot on the Teapots sub _directory will suggest SEE MORE CATS on the CAT sub-directory.

A visitor can navigate laterally from one individual page to the NEXT within same the sub- directory with the text navigation bar at the bottom of each page. Check out all the places the navigation bar will “intuitively” take visitors.

INDIVIDUAL CAT TEAPOT PAGE

SUPPORTING INFORMATION PAGE: MILLIE IN THE BUSH

BACK

ENLARGEMENT PAGES

Each individual page has a text and medium size image link to an enlargement page. The enlargement page is a large image only.

A visitor can navigate laterally from each ENLARGEMENT page to the NEXT within the same sub directory with the text navigation bar at the right of each page. Check out all the places the navigation bar will “intuitively” take visitors.

OLDER ENLARGEMENT PAGE: CAT TEAPOT

RECENT ENLARGEMENT PAGE: CUP

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

# 15. NEWSLETTER

A.  FUN AND INFORMATIVE

BACK

Newsletters are not all that difficult to write or produce. Check out our latest

KXSTUDIOS  NEWSLETTERS

  1. NEWSLETTER  RELATED LINKS

  2. NEWSLETTER LAYOUT AND DESIGN @ www.atomiclearning.com
  3. NAME
  4. NAME
  5. NAME

GO TO FAEA ONCE FIRING

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

THA - THA - THAT'S ALL FOLKS

THANKS FOR DROPP'N BY

FAEA WEB DESIGN

ART EDUCATION

KXSTUDIOS HOME

E-MAIL

BACK

copyright © 2007
ALL RIGHTS RESERVED
TERMS OF USE

K. X. STUDIOS,INC.

PHONE LINK