This section is sort of a supplement to my FAQ page, relating to more specific design techniques that I've used on this site that keep generating questions. If you've looked at a section of the site and wondered "How'd she do that?" you'll find out here. I'm not always that good at explaining things, but I'll try my best! I wrote these assuming some basic knowledge of HTML, so if you're a complete rookie (don't feel bad--everyone starts there!), try looking at this site to learn some of the really basic components of HTML.
Making an image gallery requires a minimal amount of time and patience. If you're going to make a nice one, it's best to use a small version of a picture (called a thumbnail) as a link to the full-sized version of that picture. Text links don't supply enough information about a picture to make onlookers feel like it's worthwhile to see the full version. Using thumbnails does increase the time it takes for the page to be displayed, so try to keep the file size of each thumbnail small. 10KB and under is pretty good.
To display the thumbnails in neat little rows like I did, you have to set up a table. It sounds a lot harder than it is, and the only real trick it keeping the file names of your images straight! Here's the HTML coding for the first row on the first page of the Tsunami gallery:
<TABLE WIDTH="100%"> <TR> <TD ALIGN=CENTER><A HREF="tsunami/tsu1.jpg"> <IMG BORDER=0 SRC="tsunami/tsu1_small.jpg" ALT="Pure Beauty"><BR> <B>(19 KB)</B></A></TD> <TD ALIGN=CENTER><A HREF="tsunami/tsu2.jpg"> <IMG BORDER=0 SRC="tsunami/tsu2_small.jpg" ALT="Look out, Tenchi!"><BR> <B>(11 KB)</B></A></TD> <TD ALIGN=CENTER><A HREF="tsunami/tsu15.jpg"> <IMG BORDER=0 SRC="tsunami/tsu15_small.jpg" ALT="A cute Tsunami"><BR> <B>(53 KB)</B></A></TD> <TD ALIGN=CENTER><A HREF="tsunami/tsu5.jpg"> <IMG BORDER=0 SRC="tsunami/tsu5_small.jpg" ALT="Tsunami and Ryo-Ohki"><BR> <B>(26 KB)</B></A></TD></TR>
It's helpful to keep all of your pictures in the same folder (in this case, the folder is called "tsunami")and to give the thumbnail and full image similar file names. For instance, the thumbnail for the image "tsu1" is called "tsu1_small." Never try to squeeze too many thumbnails into the same row or the pictures could look deformed and messy. In this case, 4 pictures per row worked the best. If your thumbnails are smaller, you can fit in more per row.
It's also a good idea to include alternative text and the file size of the image. Some rare individuals actually do set their browsers to not display images, and it's nice if they have a tiny description of the picture that they don't see. Providing the file size lets someone know how long it may take for their browser to display that image. A 300KB picture isn't going to pop up instantly on most people's computers, and you can't tell if the full picture is that big from a thumbnail.
To start the next row of thumbnails, you can simply type <TR> ("table row") and keep going. But if you want to put in more space between each row of thumbnails, you can end the table, stick in a few blank lines, and start a brand new table:
</TABLE> <BR> <BR> <BR> <TABLE WIDTH="100%">
This will keep the thumbnails from looking crowded, but it's really a matter of personal preference in the end. Some people don't mind having the thumbnails really close together, and others (like me) prefer them more spaced out. Use whatever looks best to you.
While you're making your tidy tables, why not spruce them up with some color? Adding color is a piece of cake, and it can make an ordinary layout a little more snazzy. It only requires adding in a few more HTML tags when you set up your table:
<TABLE BORDER="5" BORDERCOLOR="#224831" BGCOLOR="#A9E7C0" CELLSPACING=8 CELLPADDING=12>
CELLSPACING is the number of pixels in between the border and what's in each cell, and CELLPADDING is just the width of the borders (don't you wish they used normal names sometimes?). Play around with the sizes until you like how it looks.
The number combinations are color codes (the first one is light green, the second dark green). One of the annoying things about HTML is that colors have numbers, and you usually have to know the color's code in order to use it. A few basic colors, such as black and white, can be specified by name, but the more interesting shades require using the number. Some image editors (like Paint Shop Pro) allow you look up the code for any color on the spectrum, but if you don't have one of those, you can try finding a list online or in a book. Since I'm really nice, I'll show you a couple of the ones I use:
Be an artist and play around with color. Just be careful with your combinations! Don't fall into the trap of making your text disappear because it's too light or too dark for your background! Use some common sense with colors--if it looks crappy, chances are it is crappy! (if I see one more neon green background with red text I swear I'll scream) And please be sure that it doesn't hurt the eyeballs of your onlookers!
First, let's clear up a small source of confusion among the populace. It's common for people to use the words "website" and "webpage" interchangeably, but they really shouldn't. "Webpage" refers to one, single page within a website. For instance, this "howto" section is a single webpage located within the entire Sasami Sanctuary website. Understanding the meanings of these terms will make understanding how to use frames much easier.
Second, frames are one of the most abused layout enhancers on the web. It frightens me how often I bump into pages that use six or seven frames all at once. Someone please tell those web designers that there is such a thing as overkill! Frames can be very helpful for making a website easier to navigate, but if you use too many, it can make your site difficult to look at and may even cause older systems to crash. I admit that it's fun to show off more advanced HTML techniques, but complicated doesn't always mean better.
With that gentle reminder in place, here's how you set up frames for your site. I'll use the old "Goodies" section coding as an example (this is referring to version 2 of the Sasami Sanctuary). To begin, the file name for the opening page to the Goodies section is "goodies.html". "goodies.html" doesn't have any readable text on it at all--it only has the specifications for the frames to be used in that section.
<TITLE>Goodies and Games!</TITLE> </HEAD> <FRAMESET COLS="175,*"> <FRAME NAME="left" SRC="goodylist.html"> <FRAME NAME="right" SRC="others.html"> </FRAMESET>
<FRAMESET> is how you begin to set up the frames. You can divide frames into COLS (vertical sections) or into ROWS (horizontal sections). You have to specify the size of the rows or columns in either the number of pixels or the percentage of the page the frame should occupy. In this case, I made a column that will take up 175 pixels of the page. If you want the other frame to take up the remaining space, you can just write a "*" like I did.
Once you've declared the size of the frames, the next step is to name them. Type <FRAME NAME= and then put the name of your first frame in quotes. I called the frame "left" because it was on the left side of the page. Next, you type in the name of the page you want to be displayed in that frame, which in this case is called "goodylist.html". The second frame is named "right" and displays the page "others.html". So really, the frames are displaying two different webpages side by side at the same time. You write </FRAMESET> to end the frame setup.
"goodylist.html" is the list of contents of the whole Goodies section. So how did I get those linked pages to appear in the right frame when "goodylist.html" is in the left frame? Well, it's quite simple. When I made the link on the "goodylist" page to the music page, I specified which frame I wanted the music page to appear in:
<A HREF="music.html" TARGET="right">Music</A>
<TARGET="right"> tells the web browser that "music.html" should appear in the frame I named "right" in the frameset. If I hadn't told it the target, "music.html" would've appeared in the left frame (and wouldn't have fit very well). There are several other types of targets you can specify. For instance, "goodylist" also contains a link back to the main page and the target is written <TARGET=_top> so the main page doesn't appear in either of the frames set up in goodies. In the puzzles section, I created links to the full images in separate windows by writing <TARGET=_blank> to make the image appear in a new window.
Confusing? Yeah, it is at first. But after a little experimenting you get the hang of it.
JavaScripts and Java Applets are my two favorite things after HTML and graphic tweaking/designing. If you want, you could go to school or buy lots of thick, brainy books and learn how to program these nifty things yourself, but why bother? There are places like The JavaScript Source and The Java Boutique that will give you lots of pre-written scripts and applets to chose from for FREE! This is definitely a better option for the average webmaster who lacks the time (or patience, energy, brainpower, etc) to learn these things on his or her own. Most sites even give you complete instructions on how to use those scripts and applets so you'll know how to use them correctly. Isn't the internet great? ^_^
Though they have similar names, JavaScripts and Java Applets have very little in common. JavaScripts are written in the JavaScripting language and are added directly into your HTML document. Java Applets, on the other hand, are written in Java (an actual computer programming language) and exist as separate documents (files with the ".class" extention) from your HTML. Applets have to be declared and imported in your HTML, whereas JavaScripts do not.
I've recieved lots of questions about the Falling Flowers (snow, leaves, shamrocks) on my main page. I must reiterate that I did not write that script myself. It is actually a version of the semi-famous snow script that was modified by one of the truly great web-goddesses KatC (*bows in worship*). It is a very easy to use cut-and-paste script that can enhance any webpage. If you'd like to use it yourself, simply download this zip file and follow the instructions. Piece of cake, right?
flowers.zip (5 KB)
I've used three different Applets in this site (so far)--the Eyecandy Water Applet, the Puzzles, and the Fireworks that appear after completeing a puzzle. The Water and Fireworks Applets are available at the Java Boutique, and the Puzzlemaker Applet is available at Virtual Max's Cafe. Though they come with instructions, I'll do a quick run-through on how to use applets. I'll use the Puzzlemaker one for my example.
<APPLET
CODE=puzzlemaker.class
WIDTH=307
HEIGHT=415>
To import the applet into your HTML document, you begin by writing <APPLET>. CODE is where you specify the name of the applet, which is "puzzlemaker.class" in this example. The Class file is a separate file from your HTML document and contains the actual Java that makes up the applet! In order to use the applet you must have the class file somewhere on your site! The parameters WIDTH and HEIGHT tell the applet what size it needs to be (in this case, the dimensions match those of the image used for the puzzle). Specifying the wrong width or height can make the applet look distorted or cause it to malfunction when it's loaded in a web browser.
<PARAM NAME="IMAGE" VALUE="group/group4.jpg"> <PARAM NAME="ROWS" VALUE="9"> <PARAM NAME="COLS" VALUE="6"> <PARAM NAME="LINK" VALUE="congrats.html"> <PARAM NAME="TARGET" VALUE="_top"> </APPLET>
These parameters are specific to this particular applet--other applets will have different parameters. The IMAGE parameter specifies which image to use, and VALUE denotes where that image is located on the website. ROWS indicates how many horizontal rows to use when spitting up the image, likewise COLS indicates how many vertical columns to use. LINK tells the applet which page to go to when the puzzle is completed (if any), which in this case is the page "congrats.html". Lastly, TARGET specifies where to make that page appear. "_top" tells it to make the page appear in the same window as the puzzle. You write </APPLET> to end the applet setup.
And that's all there is to it! So go find some cool applets and have fun!
Image maps range from the very simple to the incredibly complex. They can be really complicated if you use odd shapes for your links, but really simple if you use easy shapes like rectangles. Image maps are also a nice change of pace from standard text links, but like frames, it's usually best not to over-use them.
When you have the picture you want to use, you'll need to get the coordinates for each area that will link to another page. With rectangles, all you need are the coordinates for the upper-left and bottom-right corners of each rectangle. To do this, you'll need to view the picture in an imaging program like MS Paint, Paint Shop Pro, or Adobe Photoshop. Simply move your cursor over the top-left corner of the rectangle and write down the coordinates that appear somewhere within the program, and then repeat for the bottom-right corner. See this picture if you're confused on my meaning.
When you have all the coordinates you need, go to your HTML document. Find the spot where you want the image map and add it in like so:
<IMG SRC="images/map1.jpg" USEMAP="#profiles"> <MAP NAME="profiles">
USEMAP is where you make a label for the image map, and then you use that label under <MAP NAME>. This map's name is "profiles." Next, you need to add in the areas to specify the the information for the areas of the image map. This is where you'll need those coordinates.
<AREA SHAPE="rect" COORDS="10,198,149,232" HREF="sasami.html">
"rect" specifies that the shape you want is a rectangle (or square). COORDS is where you write down the coordinates you obtained, with the top-left coordinate first and the bottom-right coordinate second. HREF specifies which page you want that area to link to. Then simply repeat for all of your link areas:
<AREA SHAPE="rect" COORDS="144,13,378,48" HREF="prettysami.html"> <AREA SHAPE="rect" COORDS="344,189,493,223" HREF="tsunami.html"> </MAP>
Write </MAP> when you've specified all the areas, and voilà--you've created a working image map!
When I redesigned the Sasami Sanctuary, you likely noticed that all of the scrollbars on the site are now colored various shades of blue to match my layout. I'd seen this trick on many other websites and it took me an obnoxiously long time to figure out how it was done. Turns out all it takes is a little trickery with some CSS. All you have to do is place the following lines of code right before your <BODY> tag. Behold!
<STYLE type=text/css>
<!--
BODY {
scrollbar-face-color: "color code";
scrollbar-highlight-color: "color code";
scrollbar-3dlight-color: "color code";
scrollbar-darkshadow-color: "color code";
scrollbar-shadow-color: "color code";
scrollbar-arrow-color: "color code";
scrollbar-track-color: "color code";
}
-->
</STYLE>
Obviously, you have to substitute the codes for the colors you want where it says "color code" in the example. I recommend choosing shades that compliment your site's layout but are different enough so that they still stand out against the backgrounds. After all, your visitors might be confused and frustrated if they can't see where they can click to scroll down the page!