Jump to content

background web


ricardojosesanchez
 Share

Recommended Posts

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

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

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...