How to make a picture into an html website without using just hotspots?
I’m using Dreamweaver and I have been given an image in Photoshop format to make into a website. The image looks like a typical website and I am pretty familiar with Photoshop. However, I was wondering how I can put text on the image in Dreamweaver instead of making the entire website one big picture with Dreamweaver hot spots in it for links.
In other words, how can I make a picture into an html website where the text is copyable?
Put the text in spans and position them with CSS.
Use CSS to create DIV sections and position those sections on/around the picture.
CSS File:
#section1
{ height: 20px; width: 40px; background-color: #FF0000; position: absolute; left: 35px; top: 75px; }
HTML File:
Text Goes Here
This bit of code will place a 40px x 20px box with a red background 35px from the left side of the page and 75px from the top of the page with the text “Text Goes Here” in the box.
You just need to figure out how your website picture will display and then you can position text where you want it using this method.
My main advice is close Dreamweaver and use a basic text editor like notepad to hand code
it’ll be a whole load easier to achieve things like this.
Are we talking for navigation menus here? If so I’d use ordered lists and pixy images. has a video tutorial on how to do this.
If we’re talking just regular text on images there’s a couple of ways. If it’s a simple graphic with regular straight sides (for example a gradient in a box) I’d slice out just a thin strip of the background image in photoshop then use a background repeat-x or repeat-y css declaration and set it as the background of your div
html like this
Your text here (I’ve used paragraph tags but you get the picture)
css like this
.whatever{
background: url (pathtoyourimagehere.jpg) repeat-x; (or repeat-y, works like axis)
}
If you have a more complicated shape or image then just slice out the whole image from photoshop and change the repeat-x/y declaration to no-repeat. You can then put whatever text you want into the div in your html file and it will appear on top. Just don’t forget you will need to specify width and height values to your css class or the text will burst out of the container.