instructions for the Kwik-n-free CSS template
Instructions & beginner's guide for our mostly table-free CSS template with PHP.Monday, September 6. Last edited: 2008.01.12
Copyright agreement for the Kwik-n-free CSS template:
- The Kwik-n-free template, with all referenced files, is free to use if, on any site using it, you maintain one active link to, "Kwik-n-free.com tips & information web site," posted on any page linked from your Home page.
- So long as you do not re-distribute copies of the blank template, you can erase any references to Kwik-n-free.com. However, you must maintain your own copyright notices at the bottom of the page and in the invisible "head.inc" include of the source code. Change the site reference from Kwik-n-free.com to Whatever-is-Your-site.com.
- Please email me to report errors and suggestions.
Here are the basic instructions for the Kwik-n-free CSS & PHP web page template.
Sorry, but it may be some time before I can post a color-coded template with more detailed instructions. However, if you are a wee bit clever, you can figure everything out, even if you hardly know anything about HTML, CSS, or PHP. After all, I made this template and hardly know anything myself.- If you don't know anything about HTML or CSS, be sure to spend a few minutes on the instant Kwik-n-free PHP, CSS & HTML tutorials.
- Create an empty folder on your computer labeled "site1," or a short name for your website. Inside that folder, create another folder named "pix". (Tip: to minimize the length of the desktop URL, keep the folder name short. Place in a "sites" folder created directly in the "C:" folder.)
- Click on the blank webpage template link at the top of this page. (Opens in a new window. Disable pop-up blockers.)
- Click on "File" in your browser menu, then "save as" or "save page as." Save the file in your "site1" folder. Name the file "index.php." Make sure it does not end up as "index.php.htm" or anything else.
- Open Notepad or (much better) a free editing program with built-in FTP, such as HTML Kit. With this program open, click on "file...open" and then open your index.php file for this template.
- You might want to activate "word wrap" to reduce the length of the lines for visibility. This causes some versions of Notepad to become unstable. The free HTML Kit has a better "word wrap" option. Go to Edit >Preferences >Editor. Then check "Wrap at Column."
- Erase all "TEXT GOES HERE" words on the template, leaving only the HTML codes. Replace with whatever you want to say.
- Examine the HTML codes, and you will find references to ".inc" files and "css" files and "js" files and image files. Return to my website and download these files according to the references. (Use your browser and "save as..." just as for the blank template.)
- Note the slashes and dots in some file references. Each slash with dots means "go up one level." For example:
"../../sideleft.inc"
Suppose this is found on the third level:
"http://Kwik-n-free.com/level-2/level-3/this-page.php"
This "up 2 level" reference therefore results in:
"http://kwik-n-free.com/sideleft.inc"
For PHP includes, this reference must change on each level.
Sometimes, another way is possible: start a reference with a single slash and no dots. This means "start this reference at the top level." Then it works for any level. For example, using this method to reference this page: "/web-design/template/instructions.php" However, (a) this does not seem to work with PHP includes. (b) If you call the CSS this way, it will not work when previewing on your desktop. - I recommend that the Home page for your site, and a "contact email" page, and perhaps a "site map," be the only web pages on the top level of your "site1" folder. Any other files on that level should only be the ".inc," ".css," and ".js" files. Any additional web pages should be placed inside of sub-folders. Each sub-folder must have one "index.php" file, and can have several additional .php files with descriptive names. (This page for example is "instructions.php") There are other ways to organize a website. It is popular to have an "includes" folder for all .inc and .css files etc. However, keeping them "out front" minimizes my clicks in certain editors and uploaders.
- In case of accidental deletion due to confusion between numerous "index.php" files in different folders, I suggest that you "save copy as: index2.php" with each revision. Also occasionally as "index3.php." Or, HTML Kit has a free plug-in that automatically adds the date and time to the names of backup copies.
- You also are supposed to have a "robots.txt" file on the top level. You can use mine which is at /robots.txt. This welcomes all search engines, except not to index my image files.
- You must of course replace my pictures with yours. However, you can give your pictures the same names, such as "logo1.gif" etc. Then you do not need to change the reference names in the HTML code. Keeping "generic" names also may simplify later updates.
- Normally to see the PHP pages correctly, you must upload them to a server. You can find a free web host, or a pretty good one for as low as $30 per year including URL. Or, use a free PHP editor. Or, set up a free Aprelium.com web server on your computer. (Even if you have a web host, a desktop server can slash editing time if you have a slow connection.)
- Click here for the: randomizer.php. I have converted it to randomizer.php.txt for viewing. "Save as": randomizer.php
The randomizer lends a touch of variety to the top right corner, each time a page is revisited. To change the quotes, edit the text in the "random.txt" file. Or search the web for "famous quotations" files. Or replace the entire script with another PHP file that can rotate HTML. Or install automatic news or the weather. Or just use the most basic PHP language to display the same urgent message on every page. Or if you want nothing in that corner, delete the contents of randomizer.php. Please note:- The "random.txt" file is referenced inside of the "randomizer.php" file. If you see an error message, adjust this reference.
- For the random.txt to display on several levels of a site: you must either: (a) post an identical copy of "randomizer.php" and "random.txt" on each level, or (b) create a separate "randomizer-b.php" and "randomizer-c.php," etc., for each level.
- My random.txt somehow did not work after editing with HTML Kit. If this happens, start fresh with Notepad.
- If you make substantial changes, you must adjust the CSS in your css-screen.css for ".random-a" and ".random-b"
- Using CSS, the quotations instantly can be moved to the bottom of the page throughout the site.
- See my webdesign links directory for more randomizers. The most efficient is probably the "PHP Fortune Cookie Script".
- A "Random HTML" script, offered free by most web hosts, works well for the Home page of a site. However, the Home page and its include calls then must be converted from PHP to SSI.
- A brief guide to the includes.
- The "sidetop.inc" file controls your top-of-page logo display. A web designer also can have a field day here, sprucing up the header design, right now or years later.
- The "sideleft.inc" file contains the left margin links to be repeated on every page of your site.
- The "sideright.inc" file controls the bottom-of-page logo, email address and copyright notice, and the right margin. If you do not need anything in the right margin, erase everything between the <td> and </td> tags that contain this, reduce the width for ".tdright" in the CSS file, and possibly add "display:none;" for ".sideright".
- The "css-print.css" file tells printers to leave out the left and right margins. This is followed by an identical repeat of everything in the main "css-screen.css" file. (If you fiddle with "css-screen.css," then occassionally re-paste its contents into the bottom of "css-print.css." Optional: images can be set to "display:none;" or 50% of original size. Links can be set to print clearly, in black or dark blue.)
- The "css-all.css" file may be left blank. This is just in case you wish to add sound or multimedia effects. However these or any other special effects also can be added to every page using the "head.inc" file.
- For efficient downloading, I suggest that you keep the file sizes of all images below 15k, and below 10k whenever possible. For efficient design updating, crop all images to conform to a few standard sizes. My "css-screen.css" style sheet comes with three styles for a main illustration for each page: pixmain (180x180), pixmain-wide (200x150), pixmain-tall (150x200). If you crop all your images into one of three choices for dimension, this may simplify any future changes to your design. The simplest method of all is to make most of your images square, such as 180x180 pixels, and for the originals to be 200x200 pixels. Then you can change to almost any size at any time. Of course for the downloading speed, if you use multiple illustrations on each page, I would suggest smaller images and smaller originals.
- To make a seamless background image.
- Start with any small image. Or use your graphics program to apply an "underlay" of "canvas" or "sandstone" to a blank file, perhaps with some color but with no image at all.
- "Select all" and "copy." Then "paste" into the left side of a blank image file with the same height and twice the width.
- "Flip horizontal."
- "Paste" again the original image into the left side. It should join seamlessly with its mirror image on the right side. (If not, reduce the image size after the paste, and the seam may disappear.)
- "Copy" the resulting double-width image. "Paste" into the top half of a blank image file with the same width and twice the height.
- "Flip vertical."
- "Paste" again to the top half of the image file. It should join seamlessly with its mirror image on the bottom. (If not, try reducing the image size.)
- Also, the top edge of this final image should match seamlessly with the bottom edge, and the right edge with the left edge, since they are mirror images.
- Make the size about 400px by 400px. A smaller size tends to leave a seam.
- If necessary, fade out the colors by increasing "brightness," so it is a more subtle background--both for the entire image, and also while "selecting" any especially dark areas.
- For faster downloading, save it with a reduced quality setting. A file size of about 5k is ideal, and I would not exceed 10k.
- Post a link to this page on your website. Use it yourself occasionally to check for improvements to the template.