web site design

# 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.

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

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


	RELATED LINKS FREE MAC DOWNLOADS @ www.download.com/Mac-Software FREE DOWNLOADS FOR WINDOWS @ www.download.com 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.

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

	WINDOWS BROWSERS Microsoft: INTERNET EXPLORER @ www.microsoft.com NETSCAPE 8 @ browser.netscape.com FIREFOX @ www.mozilla.org OPERA @ opera.com MORE WINDOWS BROWSERS @ www.windowsdownloads.com

	ALTERNATIVE BROWSERS FOR HANDICAPED VIEWERS 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.

	CLICK HERE SEE OUR CODE SAMPLES

	RELATED LINKS Getting started @ www.htmlgoodies.com WRITING FOR THE WEB @ www.useit.com Beginner's Guide @ archive.ncsa.uiuc.edu 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. 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.

	OPTIMIZING IMAGES RELATED LINKS Manipulating images @ www.htmlgoodies.com 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.

	DIGITAL IMAGE EDITORS RELATED LINKS DESIGN AND DIGITAL PHOTOGRAPHY DOWNLOADS @ www.download.com/Digital-Photography IMAGE EDITING DOWNLOADS @ www.download.com/Image-Editing Photoshop Tutorials @ www.good-tutorials.com 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 WINDOWS: PAINT SHOP PRO X @ www.corel.com 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. 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.



	OUR SAMPLE LAYOUT PAGE

	RELATED TEXT / LAYOUT LINKS LAYOUT @ www.w3schools.com TEXT COLOR @ www.weballey.net TEXT STYLING @ style.cleverchimp.com MORE ABOUT TEXT @ www.weballey.net 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.

	DOWNLOADS DOWNLOAD “SIMPLE SITE PYRAMID”: PDF DOWNLOAD “WWW AND YOU”: PDF DOWNLOAD “HTML HEIRARCHY”: PDF

	HTML HEIRARCHY RELATED LINKS MORE THAN YOU WANTED TO KNOW @ www.w3journal.com NICE, STRUCTURAL APPROACH @ www.webstyleguide.com 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.

	HYPERLINKS RELATED URLS ABOUT HYPERLINKS @ www.codeave.com HOW TO BUILD HYPERLINKS @ www.w3schools.com/tags CORRECT CODE WITH A VALIDATOR @ www.htmlhelp.com/tools/validator 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.

	LINK SUGGESTIONS TO KXSTUDIOS ART EDUCATION @ kxstudios.com/arteducation.html WEB SITE DESIGN @ kxstudios.com/faeawebdesign.html ARTIST SITE @ kxstudios.com SCHOOL SITE @ kxstudios.com/art.education/schools/curtis_fundamental.html 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:


	LINKING SITES RELATED LINKS LIST OF SITES @ www.google.com CHECK OUT THIS ONE, IT LOOKS FREE @ monsterlinkswap.com www.linkexchanged.com www.linkalizer.com www.gotop.com 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: The PAGE TITLE ( in the HEAD of the page) not the file title ( blabla.html) The DISCRIPTION meta tag should start with the same words as the title 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. ) The FIRST LINE OF THE PAGE should be a large H1 or H2 text heading with the same words as the title 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 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

	SEARCH ENGINE RELATED LINKS ALL / MOST OF WHAT YOU NEED TO KNOW @ searchenginewatch.com USERS GUIDE TO SEARCH ENGINES @ /www.searchengineshowdown.com LEARN WHAT THEY DO @ searchenginewatch.com MAJOR LIST @ www.weballey.net INTERNATIONAL SEARCH ENGINE LIST @ searchenginecolossus.com FANTASTIC STUFF @ www.submitcorner.com SUBMIT @ www.weballey.net LEARN HOW TO PROMOTE YOUR SITE @ 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.

	JAVASCRIPT RELATED LINKS THOUSANDS OF JAVASCRIPTS @ javascript.internet.com MORE JAVASCRIPTS @ webdeveloper.earthweb.com 789 JAVASCRIPTS @ www.geocities.com/SiliconValley 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.

	DAY / DATE: ON THE INDEX PAGE, HOMEPAGE AND ALL SUB-DIRECTORIES 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.

	HTML RESOURCES LINKS JUST ABOUT EVERYTHING YOU NEED TO KNOW ABOUT HTML @ htmlgoodies.com WEB MASTERS STUFF @ links.webmastersite.net HTML AUTHORING @ www.htmlhelp.com WHAT'S WRONG WITH THIS SITE @ www.webpagesthatsuck.com Dr HTML \|"S TOOL CHEST @ www.doctor-html.com A LITTLE OF EVERYTHING HTML @ hotwired.lycos.com/webmonkey WEB DEVELOPMENT ARTICLES @ www.smallbusinessbrief.com CHECK OUT DIFFERENT VIEWS OF YOUR SITE @ www.delorie.com/web SMALL BUSINESS MARKETING AND RESOURCE ARTICLES @ www.smallbusinessbrief.com WRITING COPY THAT SELLS @ www.smallbusinessbrief.com 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:

	BOOKS IN MY LIBRARY ( Click here to see 'em ) HTML GOODIES BOOKS by Joe Burns; THE BEST HTML 4 by elizabeth Castro; Visual QUICKPRO Guides Published by Peachpit Press THE MISSING MANUALS SERIES by O'Rielly on HTML Topics and Software The Bible Series of HTML and Software Books by Wiley Publishing 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

	RELATED LINKS YAHOO - GEOCITIES FREE WEBSITES @ geocities.yahoo.com THEY SAY FREE, NO ADS @ free.hostdepartment.com 100 Mb, no ads @ free.hostdepartment.com GREAT LIST OF FREE SPACES @ thefreesite.com 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



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

	NEWSLETTER RELATED LINKS NEWSLETTER LAYOUT AND DESIGN @ www.atomiclearning.com NAME NAME 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

	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

	1. HTML CODE and SOFTWARE 2. BROWSERS 3. WEB PAGE ANATOMY 4. DIGITAL IMAGES 5. TEXT / PAGE LAYOUT 6. SITE HIERARCHY DESIGN 7. ABOUT LINKS 8. SEARCH ENGINES	9. ADVANCED HTML - JAVASCRIPTS 10. RESOURCES / BOOKS 11. FREE WEB SITE SPACES 12. FAEA 2004 13. TOUR ART EDUCATION 14. TOUR KXSTUDIOS.COM 15. FAEA / KXSTUDIOS.COM NEWSLETTER 16. FREQUENTLY ASKED QUESTIONS ?


	OWN OUR HANDMADE, ORIGINAL, WORKS OF ART

DIRECTORY

© copyright 2007

X PRANKARD

Tarpon Springs,Florida

USA

OWN OUR HANDMADE, ORIGINAL, WORKS OF ART

WEB SITE DESIGN

CLICK TITLE FOR MORE

OR SCROLL DOWN MANUALLY

# 1. HTML CODE AND SOFTWARE

A. HTML: UNIVERSAL CODE

B. SOFTWARE

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.

MACINTOSH

MAC OS 9: Simple Text ( comes with system )

MAC OS X: Text Edit ( comes with system, go to preferences and take off the RTF suffix; add .html)

WINDOWS

# 2. BROWSERS

A. AN INTRODUCTION

B. GET YOUR BROWSERS NOW

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

MACINTOSH BROWSERS

WINDOWS BROWSERS

ALTERNATIVE BROWSERS FOR HANDICAPED VIEWERS

# 3. WEB PAGE ANATOMY

A. A LITTLE BACKGROUND INFO

B. PAGE SAMPLES

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.

RELATED LINKS