Jump to content

background web

ricardojosesanchez

By ricardojosesanchez
in HTML/XHTML

Recommended Posts

ricardojosesanchez Newbie

ricardojosesanchez

Posted
Posted

I don't know if i'm in the right place.my cuestion is i made a background in adobe photoshop.its gots bottons an banner and evrything its about 5X11 inches.what i wan't to do is put it in dreamweaver and wen't peoples click on the linksi don't want it to change the whole page instead i wan it to come out in the botton middle of the background picture.

Link to comment
Share on other sites
ste Member

ste

Posted
Posted
i made a background in adobe photoshop.its gots bottons an banner and evrything its about 5X11 inches.what i wan't to do is put it in dreamweaver and wen't peoples click on the links
hi ricardo,ok first off for web designing we dont deal in inches. get that design going in pixels and if it's going to be part of a web page make sure it will fit the browser window. anything below 960 pixels width should be ok.in photoshop are your buttons on seperate layers than the background? if so you can save these buttons individually as jpgs or gifs e.g. button01.jpg button02.jpg etc then save the background image (without the buttons) as something like background.jpgok once thats done open up notepad (I don't know dreamweaver but i can give you a walk through for building the webpage in notepad)right paste in this code and then save as index.html (in the same folder as the images)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>page title goes here</title><style type="text/css">body {background: url(background.jpg)  no-repeat;}img {border: 0;}</style></head><body><a href="#"><img src="button01.gif" /></a><a href="#"><img src="button02.gif" /></a></body></html>

hope this helps,ste

Link to comment
Share on other sites
ricardojosesanchez Newbie

ricardojosesanchez

Posted
  • Author
Posted
hi ricardo,ok first off for web designing we dont deal in inches. get that design going in pixels and if it's going to be part of a web page make sure it will fit the browser window. anything below 960 pixels width should be ok.in photoshop are your buttons on seperate layers than the background? if so you can save these buttons individually as jpgs or gifs e.g. button01.jpg button02.jpg etc then save the background image (without the buttons) as something like background.jpgok once thats done open up notepad (I don't know dreamweaver but i can give you a walk through for building the webpage in notepad)right paste in this code and then save as index.html (in the same folder as the images)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>page title goes here</title><style type="text/css">body {background: url(background.jpg)  no-repeat;}img {border: 0;}</style></head><body><a href="#"><img src="button01.gif" /></a><a href="#"><img src="button02.gif" /></a></body></html>

hope this helps,ste

thank you very much, i really appricated.
Link to comment
Share on other sites
ricardojosesanchez Newbie

ricardojosesanchez

Posted
  • Author
Posted
hi ricardo,ok first off for web designing we dont deal in inches. get that design going in pixels and if it's going to be part of a web page make sure it will fit the browser window. anything below 960 pixels width should be ok.in photoshop are your buttons on seperate layers than the background? if so you can save these buttons individually as jpgs or gifs e.g. button01.jpg button02.jpg etc then save the background image (without the buttons) as something like background.jpgok once thats done open up notepad (I don't know dreamweaver but i can give you a walk through for building the webpage in notepad)right paste in this code and then save as index.html (in the same folder as the images)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>page title goes here</title><style type="text/css">body {background: url(background.jpg)  no-repeat;}img {border: 0;}</style></head><body><a href="#"><img src="button01.gif" /></a><a href="#"><img src="button02.gif" /></a></body></html>

hope this helps,ste

how to i make the link , and come out in the same page in the middle of the background were i want it?
Link to comment
Share on other sites
midnite Member

midnite

Posted
Posted

for the link, you may just replace # with the URL you want, such as:

<a href="#"><img src="button01.gif" /></a>becomes<a href="http://www.w3schools.com/"><img src="button01.gif" /></a>

then when button01.gif is pressed, it will lead you to w3schools.For the centering, that's what also i am asking about. Kind of headache if we don't use <table>.But anyway, your case should be simpler. As you have a background picture and you would like to fix the buttons in a certain page of it. First, find out the offset (in px, pixels) that your buttons should place. Then have a look of the following codes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>  <head>	<title>page title goes here</title>	<style type="text/css">	  body {background: url(background.jpg)  no-repeat;}	  img {border: 0;}	  #image01 {position: absolute; top: 80px; left: 320px;}	  #image02 {position: absolute; top: 250px; left: 90px;}	</style>  </head>  <body>	<a id="image01" href="#"><img src="button01.gif" /></a>	<a id="image02" href="#"><img src="button02.gif" /></a>  </body></html>

hope these help :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...