|
Getting Started With HTML Design
This lesson relies as much as possible on freeware and shareware. The HTML editor Arachnophilia is a rare "careware". Although more difficult and time consuming, learning HTML from scratch will later be a great advantage. Using the "What You See Is What You Get" (WYSIWYG) editors will no doubt at first seem much easier. However if you plan on developing a professional expertise there are many fine points that can not be achieved unless you understand the raw HTML code. Arachnophilia teaches you raw code in the respect that the raw code is always visible, with no WYSIWYG. Yet at the same time Arachnophia provides for code insertion from interactive menus.
The most popular WYSIWYG HTML editors:
Microsoft FrontPage
Macromedia DreamWeaver
And there are many others
When you really become proficient you will use many software programs for their individual qualities. Most are better at certain functions than others.
First an HTML editor, Arachnophilia
This editor will begin a new HTML page with all necessary HTML tags
It has auto executed menus needed for all common functions, font size, color, bold, italics, etc. It does "URL Links", "Image Lines", "Frames", "Tables", and more.
Let it teach you a few common tags, and then experiment in using Windows 95/98/Me/XP "Wordpad" as even a simpler editor such as Windows Notepad. With Wordpad use existing examples, such as the My Web Site logo image above, copying the existing image line in this page, pasting it in a different location, then changing only the image name and sizing parameters. "Wordpad's" default file type is ( .doc ) so it is necessary to click Wordpad's, "Files of type" and change it to "All Documents *.*" in order to find the .html or .htm file types. The main page for any site should be named "index.html", all other pages can have any name and need only the .htm file extention. All .html or .htm files saved by Wordpad must be saved as "File type Text Document".
Copying and pasting the image line to a new location, even a different page, making only needed changes, as suggested for the upper "My Web Site" image (mysite.gif) eliminates much repetitive work. The same procedure can also be used for any URL link line, or any text you care to duplicate.
Need an E-Mail link? Copy this one:
< A HREF="mailto:coease@ctaz.com" >< B >E-Mail COEASE< /B >< /A >
Remember . . . no spaces anywhere between the containers <>
Same as the one near this page bottom, paste appropriately, then change the address, username@whatsite.com, you will easily figure out how to change the label (visible part, any thing you want to name it). You will also note the ending < /A > tag with out the spaces, which ends the link. With out this ending (on all URL lines), all text below it will be the same link and will also be underlined.
Some very common HTML tags . . . the < B > is bold, the < /B > no bold, use I instead of B for italic, or use both for bold italic. The < Br > stops a sentence and keeps it alone on one line. The < P > is a paragraph break, all < containers > must have no spaces. Spaces here disable the tags for HTML, but make them visible for this viewing.
Configuring a Clickable URL Link (Text) Line
URL Stands for "Uniform Resource Locater"
In Plainer English it means "Internet Address"
And two very commonly used HTML tags, one for the "clickable URL link" text line, and one for placing graphic images (.gif and .jpg files).
First the clickable URL link text line . . . the tag:
< A HREF="http://www.anywhere.com" >Any Name here you want< /A >
Note . . . there can be no spaces between the containers <> The spaces here allow the tags to be visible for this example. The A HREF name can simply be a file name if it is the same folder (filename.htm). Any link line must end with the
< /A > (stop tag), or every thing below it becomes the same underlined link.
A stands for anchor - HREF stands for hypertext reference.
And the image line:
< IMG SRC="anyimage.gif" >
Or more properly with the image sizing tags, border tag, and the "alt" line.
< IMG SRC="anyimage.gif" Alt="any description you want" WIDTH="78" HEIGHT="81" Border="0" >
IMG stands for image, SRC stands for source - Alt= is the mouse "pass over" name, and the border set to "0" improves appearance. The correctly set sizing tags speed up loading.
The image can be the clickable URL link, with no text name . . .
Place the A HREF line above the image line, with no name or stop tag < /A >. In this case place the stop tag < /A > after the image line:
< A HREF="http://www.anywhere.com" >
< IMG SRC="anyimage.gif" Alt="any description you want" WIDTH="78" HEIGHT="81" Border="0" >< /A >
Remember that Internet image types are rarely any type except: .gif (Graphics Interchange Format) by Compuserve or .jpg, short for .jpeg (Joint Photographic Experts Group).
The major differences between the two . . . the .gif file is a fixed compression (unchangeable) file size. It is also the type that must be used to create animated images (with special software such as Gifcon).
The .jpg file may use adjustable compression, the tighter the compression the smaller the file size. But also, the smaller the file size, the more quality degradation. But you can usually compress 30/40 percent with good results. PaintShop Pro has this compression ability.
Although the .gif file is usually considered a "fixed" file size, there is software that will make it smaller. This is accomplished by reducing the colors. Depending upon the image quality, number of colors, and the necessary final quality the .gif file size can be reduced in this manner. An example of such software is the GIF/JPG Optimizer, by Ulead.
Image file size is critical as related to Internet page loading speed. The more graphics, and the larger the graphic file sizes, the slower the page loads.
A final word about graphic design, very high quality and professional style images can be created or modified, with the various shareware programs downloadable from this page. And Windows Paint is a good place to start, first creating .bmp files and then using PaintShop Pro to convert them to .gif or .jpg images. You also can download .gif and .jpg files from the Internet, convert them to .bmp with PaintShop Pro, modify them in Paint and then back to .gif and .jpg with PaintShop Pro.
These and most other HTML tags can be created by using Arachnophilia's automatic function menus. Just "select" your chosen area, character, word, sentence, etc., and use Arachnophilia's menus.
All HTML pages have the same basic initial design. . . example:
< HTML >
< HEAD >
< TITLE >(Type a title for your page here)< /TITLE >
< META NAME="GENERATOR" CONTENT="Arachnophilia 3.8" >
< META NAME="FORMATTER" CONTENT="Arachnophilia 3.8" >
< /HEAD >
< BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000" >
The page's content goes here, between the < BODY > and < /BODY > tags. Note the container tags <> in practical use have no spaces. The BODY line has several functions. A background image file name may be inserted between the background = quotes. Or a plain color tag may be placed after BGCOLOR=" ". Note the #ffffff is the tag for white and the #000000 tag, as in TEXT= is black. The three remaining link functions are for setting clickable link colors. You can auto select text colors with Arachnophilia, just "left" click in the middle of an existing color tag then "right" click for the color selections. If there are no existing color tags, use Arachnophilia's "Fonts" and "Color" menu tabs. Do the same for font size and many other functions. Remember that your chosen area for change must first be "Selected". "Right" click on a selected area for a context menu of options.
Arachnophilia will auto create a new page with three mouse clicks from the upper left "File" menu. It will place all tags as in this example. Note there are several other Meta (hidden for Search engines) tags that are desirable. Find them lower on this page.
Also note that all HTML pages begin with the < HTML > tag and ends with
< /HTML >.
< /BODY >
< /HTML >
Designing HTML Tables (Columns)
Like most computer functions, there is more than one way to design HTML tables. What are "tables" used for? Tables create the "column" effect. Use them for arranging text or pictures in neat rows. The limit in screen width is only determined by the width of each table column. And the width of each table column is determined by it's sizing paramaters or by it's contents. The only limit for rows, or top to bottom sizing, resulting in "file size", is your computer's drive storage space. Two table examples below . . . the first is created by Aracnophilia's upper "Commands", "Tables", and "TableWiz" menu. These tables have no sizing parameters, thus are sized by content.
First, 4 columns with no content, using only the overall width setting (75%)
Note . . . the border can be set to "0" or any width. This example is "1".
And with "text" content, using only the overall width setting (75%)
Note . . . this border width is "5".
|
Example
|
Example
|
Example
|
Example
|
The actual HTML tags, are as displayed here. (Remember no spaces inside the containers(<>)
Cellspacing= is "vertical spacing"
Cellpadding=is "horizontal spacing" (between columns)
< TABLE width="75%" border="1" cellspacing="0" cellpadding="1" >
< TR >
< TD >
< /TD >
< TD >
< /TD>
< TD >
< /TD >
< TD >
< /TD >
< /TR >
< /TABLE >
Another style table (Copy and paste from here while editing)
Adjustable sizing parameters, border width, and background color. These
table boxes just happen to be a clickable link, to non existent reserved.htm
And the HTML Tags . . .
The HTML tags below are precisely the same as those that make up the yellow background tables just above. However the container spaces <> disable the HTML functionality, allowing the tags to be displayed here as an example. If you copied and pasted from here, then closed the container spaces <>, you will have the same tables as shown above.
Note the border width is 5, the background color (Bg color) is #ffff00, the code for yellow, and the individual tables are set to "100" (pixels) wide. You can also see the URL link (A HREF="reserved.htm") line, the link name (Clickable Link) , and the
< A/ > stop tag.
< CENTER >< TABLE BORDER=5 BGcolor="#ffff00" >
< TR >
< TD ALIGN="CENTER" VALIGN="MIDDLE" WIDTH=100 >
< CENTER >
< A HREF="reserved.htm">Clickable Link< /A >
< /CENTER >
< /TD >
< TD ALIGN="CENTER" VALIGN="MIDDLE" WIDTH=100 >
< CENTER >
< A HREF="reserved.htm">Clickable Link< /A >
< /CENTER >
< /TD >
< TD ALIGN="CENTER" VALIGN="MIDDLE" WIDTH=100 >
< CENTER >
< A HREF="reserved.htm">Clickable Link< /A >
< /CENTER >
< /TD >
< TD ALIGN="CENTER" VALIGN="MIDDLE" WIDTH=100 >
< CENTER >
< A HREF="reserved.htm">Clickable Link< /A >
< /CENTER >
< /TD >
< /TR >
< /TABLE >
Remember that the slightest tag error will cause a malfunction, such as omitting or misplacing an =, or a ", but most errors will be very obvious when checking your saved work with your Internet browser. An error that is not so obvious, two < Center > in a row, with out matching < /Center >, or visa versa. This error makes it impossible to center or uncenter the following text or graphic images.
SSI (Server Side Includes)
Your Master Page Updater, update any number of pages with the same information, all from one page.
"Frame Pages", a typical example
Click Here for the Example
A "frame" page requires a minimum of three HTML pages, one as in this case is the "master" (master.htm), which does not become visible. It merely contains the configuration data that manages the other two, (leftmenu.htm and main.htm) which are the two visible frame pages. In practical use, if the frame page is to be your main Internet page, the "master" must be named index.html. Studying this "master" page (internally while editing) will make it's functions obvious, mainly how it controls the sizes of the two visible frames pages (leftmenu.htm and main.htm).
"Right Click"to download master.htm
"Right Click"to download leftmenu.htm
"Right Click"to download main.htm
After "right" clicking, "left" click on Save Link As...
. . . but first a suggestion: Create a new folder for your new
web site designing, do it with Windows Explorer probably on C:\drive, and name it any thing you want. Then save these files to that folder.
Although you will probably use Arachnophilia all most exclusively, using Wordpad is a way to compile web pages with no out side software. If you download your images from the Internet and compile with Wordpad, very nice results can be achieved with no out side software at all. Your desires and abilities will of course advance, but there is never a need to fight any of the many software programs, HTML editors or image editors, that are simply not well designed and offer only continued difficulties.
A "tip", use your Internet browser to review your editing changes. You will have a folder on your computer for storing these site files. Navigate to it, clicking on the desired file. Use the "Task Bar" icons for switching between the browser and Arachnophilia, clicking the browser Reload after each editing change.
Note, the new version of Arachnophilia is Java based, many prefer the older version 4.
Download Arachnophilia version 4
Free "Careware", Java Arachnophilia, get it here
Note, many programs are in compressed .zip format, meaning they must be "unzipped" before you can install them. In the older days Pkzip/Pkunzip would be used. But these programs are limited to the old DOS style 8x3 file naming style and will truncate Windows long file names. The world popular software (also shareware) now used for this purpose is Winzip. If you don't have it
Click here to Download Winzip
And Pkzip does now make Pkzip for Windows
Second, an image file type converter
You can design nice images using Windows Paint, saving them as file type (.bmp) They must be file type (.gif) or (.jpg) for Internet use.
Convert them with PaintShop Pro, shareware from:
Jasc Software - PaintShop Pro Shareware Download
PaintShop Pro also has many other valuable uses. You can also achieve your file conversion with other software, such as Corel Photo Paint, or one of the Adobe products. Actually Windows 98 (not 95) will handle .gif and .jpg files, but PaintShop Pro gives you more options.
If you are familiar with the Internet browser functions, you can download .gif and .jpg images by the millions, free, from the Internet. Occasionally you will see "Private" or "Copyright" notices. These should be at least handled with professional courtesy. With Netscape Communicator, "right" click on any image and select "Save Image As" (choose the folder it is to be saved into before clicking on "Save") Microsoft Internet Explorer is similar but refers to "Picture".
Third, Cuteftp, for FTP (File Transfer Protocol)
The software needed to upload to the Internet. It is easily configured, needing only a main folder with your site name as the contents. You can "Add Site", "Edit Site", or "Delete Site". When adding a new site as you will do, the configuration is simple, requiring only a "Site Label" (anything), "Host Address" such as ctaz.com a "User ID" such as your ctaz.com user name, and the user's "Password", all in the left side window pane. An important option, click on the "Advanced" button. Internet file names are case sensitive. Upper or Lower case doesn't really matter, but uniformity is a must. Uniformity meaning the HTML page line listing an image or any file name, must be the same case as the actual image or file name. The case difference in a single character of a file name will produce a "Cant' find" message, or for an image name will produce the "Question Mark" meaning "Can't find".
By clicking the "Advanced" button you will have the option of forcing all one type case. You will find both upper and lower case on the Internet, but "lower case" is much more common. The best way to avoid a lot of extra work is to make all HTML link lines "lower case", and check the Advanced Option of "Force Lowercase".
In the right side window pane, only two lines you need make entries in, "Initial Remote Directory" which for ctaz.com is www and "Initial Local Directory", which is the compete path to the files on your computer. If the files are on your C:\drive and the folder is named MPCUG, the path is simply C:\mpcug . . . note the slashes used in Cuteftp are ( back slashes \ ) not ( forward slashes / ), to the contrary of most other Internet use such as URL lines which do use the ( forward slash / ).
When finished click the lower "OK". If you must return to make changes or corrections, first click the upper left "FTP" button, then "Site Manger", , selecting the "Site Name"in the "right" pane, and finally using the "Edit" button to make any necessary corrections.
With this configuration completed just click on "Connect", bringing up a connection menu requiring you to click on "OK". When loading is completed your local files will appear in the right window pane, and the Internet files, such as on the ctaz.com server will appear in the left window pane. THe Internet server left side will of course be empty until you upload some files
into it.
Uploading the files, the easiest part, in the "left" pane, select a file with the "left" mouse button, then "right" click for a context menu and click on "Upload". Or simply "double left click" the file and it will upload. And you can hold down the left button on a file and drag it into the right pane. You may download with Cuteftp from the Internet to the folder in your computer by applying these same procedures from the "right window pane".
You may also "group select" and upload or download all files in one operation. Find these options by clicking the upper "Directroy" button. Select just a few adjacent files for uploading or downloading by "left" clicking the first file, hold down the "Shift" key, and use the keyboard "Down Arrow" selecting as desired. When finished selecting, click the upper "Commands" button for uploading or downloading.
"Right" clicking either side window pane produces the context menu, offering many other options, such as "Make New Directory", "Rename", and "Delete".
Keep in mind that in uploading or downloading, you can overwrite any existing files with the same name. This is not a problem if it is planned, but can cause a lot of extra work if unplanned. The "Advanced" button also offers options for issuing a warning before overwriting.
Download CuteFTP shareware here:
CuteFTP Free Trial Download
The three software programs listed above will take you a long way with quality results.
With very little additional effort you can achieve trully professional results. Check out the following four software programs. They all are also available for free trial download. And like the three mentioned above, all are priced very reasonably should you decide to register them. Registration and payment in all cases is totally at your discretion.
GifCon (Gif Construction Set)
GifCon is the first and still the best software around for creating animated images (animated .gif files). Designed and continuously improved with new versions free to registered users.
Download GifCon Shareware from Alchemy Mind Works.
Near their page bottom
Xara Fantastic Graphic Designing Software
Professional Results - No Experience Necessary
Free Trial Downloads - Amazingly Low Price to Register
Three Separate Programs, Choose One or All
Zara3D
Logos and signs, spinning, rolling, or still. Xara3D is a ‘slimware’ program as opposed to the increasingly complex 'bloatware' that is released from the major software developers nowadays. This does not mean that Xara3D is low quality or produces inferior results compared to more complex 3D programs; on the contrary, it produces better output, and faster than just about anything else.
Xara Webster 2
Xara Webster is a graphics tool for Windows and Windows NT 4 designed to help you create high quality Internet graphics. Typically you'll do this by taking clipart that we provide in the Clipart Gallery, dragging it onto the page, then manipulating it in whatever way you want (such as changing its color, size, adding your own text, etc.), and finally outputting the image as an anti-aliased GIF or JPEG bitmap.
Xara WebStyle
Headings, 3D Headings, Backgrounds, Buttons, Bullets, and Dividers. You can't imagine the ease of use and the professional results, specially the headings and buttons, with out trying WebStyle.
All three programs require little if any study. The functions and features are very straight forward and obvious. But for the "studious minded", there are hundreds of help pages.
Download one or all three for free trial, from this one access page.
Xara Free Trial Downloads
Download Ulead SmartSaver Pro
For optimizing .gif and .jpg files.
There are also many other shareware programs available from Ulead.
All the software referenced in this subject is set apart from the many available frivolous editing and designing programs. There are other good software programs, but few if any better, considering price and quality. In a short time you can become familiar with all of them and if you haven't developed a true professional expertise, you will be very close. But as stated in the beginning of this subject, this can only be true if you have first acquired a full understanding of "computer basics" and the Windows operating system.
Also there are many much more advanced web site design options than we have covered here. One such option swiftly growing in popularity is the use of Java Scripts. Different Java Scripts are used for many different purposes, offering many magical effects, such as buttons that change color or text when "touched" with the mouse cursor, and randomly playing a variety of background music. The actual script compilation is a field of it's own, requiring much expertise.
But like ready made still and animated images, ready made Java Scripts are becoming readily available for Internet download. Often they are supplied free of charge and include instructions for use. Searching the Internet will provide a host of possibilities. You can get an idea and download some samples at either of these sites:
COEASE Java Script Demos
COEASE Invisible Image Demos
Animated Image Files
Dynamic HTML/Stylesheets
Some good examples
Advertise your web site with the Link Exchange (450,000+ member web sites).
Also free, just register, then create and submit a specified banner image. Your "clickable" banner will be randomly placed on other sites around the world, as will other site banners be placed on your web site.
Current requirements for LinkExchange banners are physical size, 468 x 60 pixels and file size 10K or smaller.
The Link Exchange Free Banner Program
Last and Most Important . . .
If you want your web site easily found on the major search engines.
Search engines number over 1000 and growing. But only about 12
serve about 90% of the world.
InfoSeek - WEB Crawler - Alta Vista - Lycos
Google - EXCITE - HotBot - Yahoo!
You must personally submit the necessary information to each search engine. Most will only accept your main URL address such as http://www.mysite.com/ . . . and will take from a few days to several weeks to index your site into their system. Most better search engines are now going to a fee listing system. They vary in price.. For example Alta Vista's "Submit a Site, offers both a paid Express listing fee or a free Basic listing.
Yahoo .com is a search engine that lists by directory. You must seek out the correct directory type for your web site, then click the "Suggest a site" link located at page bottom. In most cases the only listing available is a fee listing ($299.00 recurring annual fee), some directories offer both a fee listing and a free listing.
To list your site, go to a given search engine and look for the listing link. It's location and title will vary on the different engines.
There are listing service companies that will list your site to numerous search engines for a fee ranging from about $25.00 and up, and guarantee results. One such company is:
Search Engine Placement Company
There are also listing service companies that will do the listing for you free, but their quality and availability varies.
More about search engine listings . . . what was just written about search engines is becoming less true by the day. This is because of website competition, multi-millions of sites. Currently google.com is by far the most popular and effective search engine. Listing with search engines is now very complex and good rankings are difficult to come by.
A major requirement is correct meta tags, you can auto write meta tags here.
It is important that the hidden meta tags literally agree with the webpage real content. One or two sentence Title, short paragraph of text for the Description, and Keywords extracted from content of the title, description and general page text.
Another important function is an auto updating sitemap, available from BetterMedia Internet services from around $50.00. Your site must be cgi enabled to use the sitemap function. The sitemap ties all pages on the website together making it easy for search engine robots to follow and index them.
The final act for search engine listing is the submission. Companies such as verica.com do a fair job however they and most other submission companies don't actually optimize your site and follow up on rankings except for a substantial charge, often thousands of dollars per year. BetterMedia Internet Services offers complete listing services for $100/$200 per year.
What you should realize is listing with the search engines is not difficult, but being effective is. The trick to being found by the search engines, and there are many, is not simply whether you are listed or not. It is determined by the layout and content of any given web site page.
First you must plan the information that is placed in hidden Meta tags.
All Meta tags as well as all HTML tags must be enclosed by "containers" the left and right arrow points < container > (Greater than and Lesser than symbols).
The standard Meta tags found by editing a page (or clicking the browser "View" menu, then "Page source") are: note the spaces within the containers, which makes them visible here, properly written there are no spaces and they are invisible except to the search engines.
< TITLE >Basic Web Site Design< /TITLE >
< META name="description" content=Initial Site Design Project >
< META name="keywords" content="Real Audio, AVI, MPG, Sounds, Video, Audio, Images, Graphics, Animation, GIF, JPG, Computer Users, Computer Groups, Computer User Groups, Computers, Users, Clubs, PC Clubs, PC Users, Software, Shareware, Freeware, Careware, Personal Creations, IBM Compatible, Kingman, Mohave, Arizona, USA, Virtual Variety, Cyber Variety, A to Z Index, QuickView, Alphabetical, Aardvark to Zwiebac, Any Thing, Every Thing, Some Thing, World Wide, Nation Wide, State Wide, County Wide, City Wide" >
< META NAME="Author" CONTENT="COEASE" >
< META NAME="revisit" CONTENT="7 days" >
< META name="resource-type" content="document" >
< META name="distribution" content="global" >
The information in the meta title will be the text on the search engine link line. The meta "Description" will be the search engines site description. Both these lines are actually limited to just a few words. Short and to the point is best.
The next meta tag, "Keywords", what ever you think a user will type in for search criteria, not really limited, separate keywords with a comma. The last four meta tags are of lesser importance.
The most important, the Title and Description. In general . . . different search engines place more value in some tags than others. All search engines pretty much grade your page by relevancy, the meta tag content compared to your page's visible content. So it is a very good idea to make your visible "first" heading the same as the meta title, and your "first informative information" the same as the meta description.
Most search engines totally ignore graphic images and the Alt= line (what is read by just placing the mouse cursor on an image, no clicking). Check it out in the above mysite.gif
Thus a well designed web site that can also be found in the "top 10" of at least some of the search engines requires a well designed plan before you begin any actual designing. How you plan on being found by the search engines is a good first step.
Work on your Title, Description, and Keywords. After you have developed some ideas, go to the various search engines and try out your new wording with real searches. See who is already there and check their relevancy ratings, at least Infoseek will show these ratings, it will show as a percentage just below the description. You will find that running searches on well known, very common words may produce millions of links. All search engines have their own unique method for refining searches. Most are case sensitive, showing different results with different case. There is no "one" common rule. Most better search engines will provide "Help" that is worth reading if you care to use their engine.
When you arrive at accepting certain words and terminology for your web site, your job is then to out design who ever is already in the "top 10". You can't get there with out knocking some one else out of a given spot. And most worthy webmasters watch this closely, as you must if you are to hold good positioning.
The idea of being so serious is only a matter of preference, truly important only on a serious business web site. What really is always important is to be informed. With this in mind there is certainly nothing wrong just designing for the fun of it.
There are many ways to access various search engines. Use the browser buttons or just type in the URL and press Enter. And for your information and convenience there is the next link, "one stop shopping for all the better search engines". On this page we track certain new search engines, include links to some free listing services, and provide other useful information and links. There is a link to RankThis.com who will check your placement on the major search engines, and a link to "Doctor HTML", who will check your website HTML pages for accuracy, HTML tags, spelling, dead links, and about all you need to know. Both services are free.
More View Points on Effective Search Design
COEASE Search Engine Access, the Top 3 and Many More
"Right Click" here to Download This Page
Then "left" click "Save Link orTarget As" . . . but first a suggestion: Create a new folder for your new web site designing, do it with Windows Explorer probably on C:\drive, and name it any thing you want. Then save this file to that folder. Next go to page top and save the mysite.gif to the same folder. "Right" click on it then "left" click choosing "Save Image As". These instructions are for Netscape Communicator. If you are using Microsoft Internet Explorer, the procedure is very similar with a little change in wording.
If you want this simple (left red stripe) background image, bg.jpg, "right" click on an open area (not on any image), then "left" click on "Save Background As... , saving it to the same folder in your computer.
When finished "Saving" this file and the upper mysite.gif (right click on image for menu, then left click on "Save Image As... , saving it to the same folder in your computer, go to the new folder with your browser. In the upper browser Location: box type in the path . . . c:/your new folder name, and press the Enter key (the mouse won't work). You will see this HTML file index.html. Just click (or double click) it and it will load. You now have this full instruction page on your computer and know how to find it.
|
Web Page Design Set
A "Start" page, or menu page for a number of advanced HTML function pages with examples. All registered for this course are welcome to download and use the page set. However, it is intended for the aspiring advanced web site designer.
It is a zip file (webdesign.zip about 39K in size). It should download in seconds
Download webdesign.zip
You will need Winzip to unzip it, which also can be downloaded as shareware from WinZip.com
Make a new directory (folder) and name it WebDesign. Unzip the zipped file to that folder. Then point your browser to that folder and the index.html file. . . if you placed it on C:\Drive, type this path in your browser address box:
c:/webdesign/index.html
And press the Enter key.
When the Start page appears, make it your "browser Start page". How? . . . with Microsoft Internet Explorer, click the upper "Tools" button, then the "Internet Options" function line and finally the "General" tab.
Now click the "Use Current" button, "Apply" and "OK">
With Netscape Communicator, click the upper "Edit" button, then the "Preferences" function line, and then the left "Navigator" title. Click the "Use Current" button and "OK".
Now each time you click your browser's "Home" button, you will arrive at your new "Start" page. You can change it again in seconds, first go to the page of your choice, any Internet page or page on your computer and repeat the above process.
These instructions are also included in the readme.doc file, which you can read immediately after unzipping.
|
design@bettermedia.com
Quick Review Clickable Index
|
