Part 2 of how to create a website! Part 2 features
finishing a template in Image-Ready and coding it!
-
Step 1 Get your template out and
make sure everything is done..
-
Step 2 Press this button to go to
ImageReady;
-
Step 3 Once in ImageReady, click
the slice-icon
-
Step 4 Just use it as a
selection-tool and select your header first;
-
Step 5 Then select the
navigation-menu;
-
Step 6 Then select the
content-window;
-
Step 7 Go to File>Save Optimised As and save as HTML
and Images;
-
Step 8 Log off both Photoshop and
Imageready and go to the folder where you saved your site and change
image.html to index.html, because your browser will always open the
INDEX-file!
-
Step 9 Open index.html and change
the following inside the source code;
-
Step 10 Then change this and you're
ready to code!
-
Step 11 Now comes the coding;
Go
to your source-code and find the image that you sliced for your menu-bar;
Code:<TD
COLSPAN=5>
<IMG SRC="images/image_01.gif" WIDTH=500 HEIGHT=100
ALT=""></TD>
-
Step 12 Change the TD-background to
that image;
Code:<TD COLSPAN=5
BACKGROUND="images/image_05.gif" WIDTH=500 HEIGHT=100>
-
Step 13 Now you can fill every
possible link you need between the TD-tags;
Code:<TD COLSPAN=5
BACKGROUND="images/image_05.gif" WIDTH=500 HEIGHT=100>
LINK LINK LINK
LINK
</TD>
-
Step 14 Now for the iframe;
Find
the part of the coding where you sliced your main-window;
Code:<TD
COLSPAN=5>
<IMG SRC="images/image_02.gif" WIDTH=600 HEIGHT=600
ALT=""></TD>
-
Step 15 Change the TD-background to
that image;
Code:<TD COLSPAN=5
BACKGROUND="images/image_05.gif" WIDTH=500
HEIGHT=100>
</TD>
-
Step 16 Then add this code between
the TD-tags;
Code:<TD COLSPAN=5
BACKGROUND="images/image_05.gif" WIDTH=500 HEIGHT=100>
<IFRAME
SRC="content.html" NAME="iframe" FRAMEBORDER="0" SCROLLING="auto" WIDTH="100%"
HEIGHT="100%"></IFRAME>
</TD>
-
Step 17 All your links MUST have
this in them;
Code:TARGET="iframe"
-
Step 18 And now you have learned
everything that holds the basics and the rules of iframe...
ENJOY
