| | #1 |
| Member Join Date: Sep 2005
Posts: 126
![]() | [Tutorial] Using Image Slices to Create a web page This tutorial will teach you how to convert your template slices into a fully working page, text and all. 1. Lets start with slicing properly. You want to make as little amounts of slices as possible because you are going to be converting each image, manually, into a background. It doesn't seem as hard as it sound though, so don't worry. Begin by slicing through the unneeded areas leaving any areas you want to make into links. When clicing up a template, they can sometimes be big and your Swatch window or your layer window might be covering the image. You can tuck the away by minimizing them since you don't really need these while slicing. If you wish, you can keep the History window open, I use this window a lot if I make a mistake. Do it like in this image: http://tech-fusion.net/slicetut/1.png This is image is zoomed out, to show you all of the slices. Notice how the slices that don't include links are large and the links are small and precisely on the image. This is how you would slice up a link: http://tech-fusion.net/slicetut/2.png 2. Now it's time to convert it to an html file and begin our code work. Go to File -> Save for Web. Now choose the image types you want to the right, then click save. Choose a folder to save to. Choose "index.html" as the name, Save As "HTML and Images" Default Settings and All Slices. 3. Depending on hwo you want to do your work, open up your index.html in Dreamweaver or or favorite text editor. If you don't have a text editor, Google "Textpad," I personally use this. If you use a text editor, make note of the file names of the images that are going to be turned into links. 4. Use the Split view in Dreamweaver so you can see which images you are editing on what line. In your editor (Dreamweaver and Text Editor) you will see code like this for each image: Code: <td colspan="6" rowspan="2"> <img src="Tech-Fusion/images/index_02.png" width="587" height="28" alt=""></td> Now comes the time to change the image to a background. We do this by switching the above code with this: Code: <td colspan="5" rowspan="2" background="images/index_05.png"></td> Dreamweaver users will have to refresh after each code change to see the next image,. You will notice the images dissapear, this means they are in the background. Now you can just select the images that are left and they can be turned into links. You write text you just enter your text with any <font> tags over the image where they should be. Congratulations! You have created your sliced image website! This tut may not appear anywhere but the following sites: - Tech-Fusion.net - Agerage.net - MPC - Admin Fusion TUTORIAL COPYRIGHT 2006, Skyline_R34.
__________________ To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. For everything related to computers. |
| | |
| | #2 |
| Member | Shouldn't Code: <td colspan="5" rowspan="2" background="images/index_05.png"></td> Code: <td colspan="5" rowspan="2" background="images/index_02.png"></td> Anyways, GREAT tutorial! I swear to God I've been trying to find a tutorial on EXACTLY this... don't believe me, I'll give you links to all my threads asking. ![]() Thanks a bunch! P.S., you should add this to Pixel2Life, if you havent already |
| | |
| | #3 |
| Member Join Date: Sep 2005
Posts: 126
![]() | Sorry about that, it's a typo. But you get it. Hope it helped . I was tying to do this just yesterday and when a co-admin on another forum showed me i made the tut.
__________________ To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. For everything related to computers. |
| | |
| | #4 |
| Apprentice ![]() | Wow cool. thanks. I've been wanting to make a new layout for a site, but I couldn't figure out how to do this. |
| | |
| | #5 |
| Rookie Join Date: Sep 2005 Location: Sunny north of Greece
Posts: 23
![]() | Awesome tutorial mate. Keep them coming
__________________ : [ Admin: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. ] : [ Admin: To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts. ] |
| | |
![]() |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
| |
Similar Threads | ||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Google Ranking Explained | Ryan | Search Engine Optimization | 36 | 12-23-2009 10:50 PM |
| What should be the google page rank?!! | Danecookie | Search Engine Optimization | 2 | 11-18-2005 04:46 AM |
