Adobe Photoshop
Free Tutorials » Adobe Photoshop » Futuristic Content Box
Create a very cool high tech content box in photoshop and then learn how to slice and export it into dreamweaver and add an iframe.
Step 21
We now need to add this bit of code inside the <"td"> tag:
background="images/image_03.gif" Width=384 Height=165
Change the numbers above to match the size of your image_03.gif as your's will be a differen't size to mine. Do this by looking at the image_03.gif's width and height.
Then Delete image_03.gif and type a word in the box, for example "content".
Your Code will look like somthing below:
Step 22
We now need to insert an iframe into the content space. If you typed in the word "content" or any other word in the content area please delete it. Inbetween the <"td"><"/td"> tag's insert this line of code (without the quotes):
<"iframe src="content.php" frameborder="0" name="iframe" height="165" width="348">
Change the width and height to the same size as your background area. Your code should look like below but with a differen't height and width:
Step 23
Now make a new page [ File > New ], save it as content.php Add all your content in that page and make sure the background is the same as below:
Step 24
Now open image.html back up and resave as index.html, open up your browser and test it. Your content box should now be complete!
My result is shown below:
| |
||
| |
|
|
| |
||
Tutorial comments
08.07.2008 -
i dont have dreamweaver but i have frontpage... would that work?
03.11.2007 -
Wow, really cool, gret tut, thx for sharing
View all user comments for this tutorial.
Tutorial statistics
- Date added:
- 27.10.2004
- Author:
- Zymic
- User rating:
- 5/5
- Total views:
- 5960
- Total comments:
- 2