Table-Based Image Layout Webpage Tutorial! :D Written by: L-Sama no Miko / Kirsten Miller On Videoland: Adol Christian Caim Ramirez Link of the Four Swords Written on: 06:26:2004 06:27:2004 Notes: Yes. I need to do something to get my mind off of stuff, so... What am I doing? I'm writing a Photoshop Tutorial. After questions on how I've designed my character sites. With this in mind, I must create a site based on my new alt: Link of the Four Swords. The equipment I have used for this? Computer: Morgana- Sony Vaio Laptop Tablet: Wacom Graphire 4x3 tablet Image Software Adobe Photoshop 7.0 Adobe ImageReady (Included with Photoshop) Scanner: HP Scanjet 5300c Webdesign: HTML - IFrame HTML - Tables Cascading Style Sheets Text Editor: Notepad Note #1- This does require general Photoshop and HTML knowledge. As such, I don't have a way to really teach someone who to /design/ the image. This just shows how to put the design together. Note #2- Most stuff from Photoshop 6.0 is very similar/is the same as in Photoshop 7.0. Note #3- This was written while putting together the page for the four Links. When this is complete, the page should be as well. You are more than welcome to look at its source, as well as the others for my other characters at: http://www.swordbreaker.com/VL/ ===============STEP LIST=============== Step 01: Pick an Image. Scan in if necessary. Step 02: Create the Image w/ functional resolutions Step 03: Save and import to ImageReady Step 04: Slice out the 'data' table with the slice tool Step 05: Set up the Image Map with Image Map tool Step 06: Optimize and Save the Image Step 07: Edit the HTML file to create an IFrame. Step 08: Edit IFrame's on load source file Step 09: Create the main CSS file. Step 10: Test site- touch up and add details. ======================================= *****STEP 01***** Pick an image- for this project, I'm picking the image located here: http://www.swordbreaker.com/VL/Tutorial/site01.jpg This is an image of the four Links from the instruction book of Four Swords Adventures. It is scanned as a .tif file at 150 dpi. When it is brought to web, it will be brought down to 72 dpi. *****STEP 02***** Average dimensions of 'low resolution' nowadays are 800x600. The lowest possible is 600x480, but few use that at this time. What I tend to use for the site layout is 750x563. This will make it just under 800x600 to allow it to 'fit comfortably' in a standard IE window. Be creative with dimensions. As long as it is easy to read and easy to load. That's the important thing beyond anything else. However, they don't necessarily /have/ to be the same ratio mine are. As long as they are below what I've got mine set at. You should be all good then. Be creative with the image, however, take in mind that you should take in account to have an area for text, so that any text showing in it would be very clear and easy to read. The completed image for my site is here: http://www.swordbreaker.com/VL/Tutorial/site02.jpg I will be creating the menu in-image through 'hot-spots' in ImageReady rather than creating them in the frame HTML. (this will make sense later) like I did for the site for Caim. *****STEP 03***** Once the image is completed, ensure that you save a PSD of it. If you want to change soemthing in the menu, you'll have to do it through the image and rebuild the tableset. Ensure that you have everything you need/want in this shot. However, this step is importing the image from Photoshop to ImageReady. That is very simple. Just find the 'ImageReady' button and the software will do the rest for you. EXAMPLE: http://www.swordbreaker.com/VL/Tutorial/site03.jpg If you have not worked with ImageReady, take this as a moment to familiarize yourself with the various different tools. SLICE This will 'cut' the image apart for easier webloading. You make 3 slices in it, and the full image will be 3 images put together in a table. HOTSPOT (Image Map tool) This will be necessary to make the menu work. It creates the code necessary to show the 'area' for the Image Map. You will be breaking this code apart later in the HTML. OPTIMIZE This prepares the images for web optimization. This is what 'save to web' does in Photoshop. As ImageReady is a web image preparation program, that area is unnecessary. SAVE OPTIMIZE This will save the image as well as the html file that will AS allow the edited images to function completely. This also saves the file as it has been optimized. EXAMPLE: http://www.swordbreaker.com/VL/Tutorial/site04.jpg *****STEP 04***** Let's start with the slices first. Select the slice tool, or hit 'K' on the keyboard. What you'll want to do is locate the area you've generated for the main data 'frame'. (this will be explained later) Take the slice tool and select the data frame. ImageReady should slice up the image as needed for everything else. EXAMPLE: http://www.swordbreaker.com/VL/Tutorial/site05.jpg Open the 'slice' toolbar after this (found under "window"), and set the HTML options for the slice. Usually, I just put 'data' under 'name'. *****STEP 05***** Now, how 'bout we do the image map for the menu? This is done by selecting the appropriate imagemap tool for what you need. My layout only requires the Rectangle ImageMap Tool, so I'll just be using that. As you did with the slices, you'll be doing selections on the image. Unlike the slices, though, you will be selecting each and every 'mouse' point on the image. I will be doing selections individually around 'main', 'profile', 'logs', 'contacts', 'extra', and 'links'. EXAMPLE: http://www.swordbreaker.com/VL/Tutorial/site06.jpg Now what you're going to do is pull up the ImageMap Selection Tool (Same panel in the toolbar). As the slices toolbar is up, you should be able to switch over to the Image Map toolbar as well now. We're fixing the settings for the links of the image map. NAME: This is the image's name. When you the IMG SRC tag in HTML, this will be the 'name' setting in it. URL: This is the HTML file that the image goes to. A HREF=____.html TARGET: THIS IS IMPORTANT. I usually stick with 'Main' for all of my sites. Name it what you want, but REMEMBER IT. This will also remain the same on every option in your links. ALT: Optional. Looks nicer if you put something here, tho. This is what is displayed when you allow your cursor to hover over the point. EXAMPLE: http://www.swordbreaker.com/VL/Tutorial/site07.jpg *****STEP 06***** Optimize your file. This is done by first clicking the 'Optimized' tab at the top of the program. Then use the Optimize toolbar while observing the 'total' filesize at the bottom of the program as well. This displays how long the image will load when brought up. Note: When you are on the optimized tab, the image will reload on any changes you have made. This is because ImageReady is refreshing the image, according to the compression changes that you have made. Change it in the optimize toolbar from jpg to gif to see how it looks- and it's probably somewhat different, isn't it? Change it to jpg, then the quality from 100% to 50%? How is it? Different? Of course. I usually keep my quality settings at around 75%-85%, depending on the load times presented below. EXAMPLE: http://www.swordbreaker.com/VL/Tutorial/site08.jpg Try not to let it get too high. You still have to take into account the index.html file, as well as the main.html file that will be in the frame when it is completed. Once this is complete. Go to file, and to SAVE OPTIMIZED AS. Create the HTML filename. ImageReady will then create a folder of images based on your file's name. These are both very necessary. Save the PSD again, or import it back to Photoshop and save it again. Close both programs. *****STEP 07***** Prepare for HTML diving. That's what happens next. This is time to begin the customization of the HTML file itself. However, first step will be involving with locating the 'image' that will be changed into the main data frame. Open the HTML file in Notepad or whatever text editor you use. One way you can do this, simply look at the files located within the 'images' directory that ImageReady created. If you named your slice, it will be given that name as the filename, however. ^_^ Look for the file as named in the HTML file created. This is what I have: I will be changing that HTML code, however. Leaving in the tags, as they are necessary for the Table functions, I will be doing the following: That statement between the IFrame tags is necessary. If the computer that is viewing the site doesn't have the capabilities to view Iframes (which is /old/ HTML, should I recall correctly), then the site will display that image instead of the IFrame. Note the "#main". Remember what I said about TARGET? That's where it goes. You should name your frame the same as your Target. The purpose of 'Target' in the tags is to tell the HTML file, if frames are present, where to direct the clicked link to load. Ensure that you use the same dimensions on the width and height options, and if you don't want a border to show up, set it to frameborder="0". *****STEP 08***** Prepare the frame HTML file by creating a blank HTML called 'main.html'. (Or whatever you set the source file of the IFrame to.) This is all you need for now. However, we will be needing a CSS (cascading style sheets) file to make the individual pages uniform when loading the background. As you may have noticed, what was once your data area is now missing its image. That's what we'll be fixing now. If you wish to title your CSS file as 'main.css', then place the following line between the tags: This will point the file to the CSS file. We'll customize this shortly. How about a quick way to make your files for the entire page? Repeat 'save as' several times, saving the file as each and every HTML that your navigation links point to. Now you have a template for each made and you won't have to fully start from scratch again. *****STEP 09***** Let's create that CSS file. Open up your preferred text editor. Let's start with the basic entry: body { background: #FFFFFF fixed no-repeat url(images/image_name.jpg); } Save the file as whatever you named your CSS file in the string in the HTML file. ('main.css' in my case) What does it do? body { THis will effect anything underneath the 'body' tag in HTML. #FFFFFF This is the hexcode for 'white' in HTML. This will make the background before the image is loaded as 'white'. Best to use a color that will make the text easier to read. Users can begin to read before the image is fully loaded. background This will point to the background of the body tag in HTML fixed This prevents the background from scrolling when you scroll up and down in the frame no-repeat Prevents the image from repeating url(filename) Point this to the image that was the 'data' table in the image when you edited it. It will become your background image. Save as a .css file. If you cannot do that, save it as a .txt file and rename the extension in your FTP program. NOTE: You can use cascading style sheets to effect the fonts, the text colors margins, scrollbars, etc etc... There's a LOT you can do with this. Feel free to add many more customizations to this file, as long as you want it to work on each of the main files in your frame. I have used a minimal amount (as evident on Adol and Sora's pages) or I have gone all out with the CSS to prepare for other effects on separate pages with the tags (look at main.css on Caim's page for this example. :D). However, you don't need anything more for this to work properly. *****STEP 10***** Ensure the functionality of all the files. Test the HTML on the server. Does it work? Then you're set. All that is absolutely necessary is plug in the data as you wanted, in both HTML and CSS code. You can probably even use javascript if you're saavy enough. Perhaps, sometime, I'll attempt something like this with dual frames and involve a javascript to change two of the frames at one time. We'll see how I choose to experiment in the future. Another thing you can do, is if you're brave enough to do so, use slices instead of image map selections in ImageReady and use the toolbars to help you create mouseovers. :D However, that should do it. It may be a little tricky immediately, but enjoy yourself while working with it. After putting it all together, it should look beautiful. ^____^