|
HTML - Photoshop Slice To Dreamweaver Help
Okay so I manage to make a design on photoshop so I then slice most the image to various parts and then had it transfer to dreamweaver so now its an html file. but now I want to add thing to those images like an image placement holder but when I try to add something such as a table or an image placement holder to one of the images that i sliced it keeps on putting the image or table outside the box where I want it to be.
here is a video of my problem http://www.youtube.com/watch?v=ONXom...layer_embedded thanks Similar TutorialsHi, I'm trying to create a website with photoshop and dreamweaver. And I want to create 2-3 frames. 1 left side navigation bar and mayber a banner frame at the top, and the middle frame where the text comes. Now my problem was that when I tried to create something like this with dreamweaver it made those ugly looking draggable things. Id want them not to be visible and apply my 1337 design made with photoshop (and cut with the slice tool). If anybody has any idea or any specific site that could help me further please help me! My current site is http://squeezingavocados.urli.net/ But whenever I write something to the iframe and it expands the navigation bar also does, making it look like ****... Here's what I currently have on my screen: http://img291.imageshack.us/my.php?i...4169031eq4.jpg What I'm trying to do is Save the Layers as JPEGs so I can place them into Dreamweaver and continue Editing my Webpage. I wasn't able to Edit some of the Images in Dreamweaver so I had to Edit the actual PSD File, but now that I've edited the PSD File, I can't seem to transfer the updated Graphics back to individual JPEG Form, I can only save the entire document as a giant JPEG, and that's not what I want. Slicing isn't viable either, the PSD didn't come with any... I would think it has something to do with those blue lines running across the page, but I don't know what that means? How do I save the Graphics I updated so I can transfer them into Dreamweaver? Hello. I can't figure out why my image slice isn't working right. As you can see in the example link below I have an image slice. This will be the border around some text. I placed a table in the middle of it for the text to a width that will fit in the box. But for some reason the text does not jump down to the next line when it reaches the set width. Instead, the box stretches and pushes the left side of the box out creating an empty space. So what I need is to make it so the text will stay within the width of the box. The more text I add the taller the box will get, but never wider. See what I'm talking about at this link: http://sbultimate.com/newdesign/box.html Thanks for any help. Ron I have created an image in Photoshop and sliced it to create different links as a banner. When I opened the html file on my computer it works and the links all work. The part that doesn't work is when I changed the file locations to the location on photobucket. Somewhere I have something wrong. If anyone can direct me on what I need to correct I would greatly appreciate it. I feel like I am close but something is off. This is the image itself http://www.shopmemento.com/images/me...gemap4copy.jpg This is where I got the directions of how to do a multiple link image with image slicing: http://www.createblog.com/tutorials/...l.php?id=13888 HTML Code: <HTML> <HEAD> <TITLE>memento image slice</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <!-- ImageReady Slices (memento image slice.psd) --> <TABLE WIDTH=338 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=8> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif" border="0" alt="Photobucket"></a> <WIDTH=338 HEIGHT=131 ALT=""></TD> </TR> <TR> <TD> <A HREF="http://www.shopmemento.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Website'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=46 BORDER=0 ALT="Memento's Website"></A></TD> <TD ROWSPAN=2> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_03.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_03.gif" border="0" alt="Photobucket"></a> <WIDTH=15 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.blogspot.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Blog'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_04.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_04.gif" border="0" alt="Photobucket"></a> ><WIDTH=69 HEIGHT=46 BORDER=0 ALT="Memento's Blog"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_05.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_05.gif" border="0" alt="Photobucket"></a> <WIDTH=18 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.etsy.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Etsy Shop'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_06.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_06.gif" border="0" alt="Photobucket"></a> <WIDTH=68 HEIGHT=46 BORDER=0 ALT="Memento's Etsy Shop"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_07.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_07.gif" border="0" alt="Photobucket"></a> <WIDTH=13 HEIGHT=56 ALT=""></TD> <TD> <A HREF="mailto:terri@shopmemento.com " ONMOUSEOVER="window.status='Email Memento'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_08.jpg" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_08.jpg" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=46 BORDER=0 ALT="Email Memento"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_09.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_09.gif" border="0" alt="Photobucket"></a> <WIDTH=8 HEIGHT=56 ALT=""></TD> </TR> <TR> <TD> <IMG SRC<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_10.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_10.gif" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_11.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_11.gif" border="0" alt="Photobucket"></a> <WIDTH=69 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a <WIDTH=68 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=10 ALT=""></TD> </TR> </TABLE> <!-- End ImageReady Slices --> </BODY> </HTML> okay so i dont have dreamweaver or nething like that. i made a website template that is the home page. i want all the other pages to look like that as well except with different writing which i will want to edit with html when i want to my problem is im not sure how to make my template work and upload it to the web. i can do it as a jpeg but not as an actual template. if some one can help me i would greatly appreciate it thanks What is the best or rather easiest way to learn how to use Photoshop? I have Photoshop 3.0 elements, which I think is different then CS3 correct? I am just not sure where to go for a beginner tutorial on this? Everything I have found so far is for people that already know mostly how to use it.....UGH! Thanks Jeff ok.. im a noob i made my template in photoshop and now what I want to do it put my content in such as information, navigation etc. How to I write over the pics so that the text will be visible. Any help on this matter would be appreciated Cheers Ryan How do make a curved edge for a table row or table data? Right now my site looks kind of boxy. I would like to create my web navigation using photoshop aswell as other menus but im unsure how to embedd them into html For instance, i remeber seeing tutorial were a guy created a simple vertical blue navigation with slices for each link, then used HTML to put them together in his page. I could not find it so i came here. Hi everyone, I'm creating a prototype ipad webapp for uni and I've managed to get stuck when using photoshop slices. Basically whats happened is that when I add a href to a slice a blue border appears and knocks all the slices out of line by a few pixels. I've tried
Code: frameborder="0" but hasnt worked. Is there a solution using html or would I be better off trying CSS? Thanks, Claire How do you insert Google adsense code into a table, because when i make a website using Photoshop it makes a bunch of tables. Is it possible to put adsense into a table? Thanks Help me with imageready/photoshop website? Okay, heres the coding im confused with.. ive exported all the images from my photoshop website ive created and all of those fit perfectly in the coding... However, im having a problem with the navigation.. This is the coding: websiteeeeeeeeeeeeeeeeeee_home_over = newImage("images/websiteeeeeeeeeeeeeeeeee-04.gif"); websiteeeeeeeeeeeeeeeeeee_home_down = newImage("images/websiteeeeeeeeeeeeeeeeee-05.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_3_over = newImage("images/websiteeeeeeeeeeeeeeeeee-09.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_3_down = newImage("images/websiteeeeeeeeeeeeeeeeee-10.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_4_over = newImage("images/websiteeeeeeeeeeeeeeeeee-13.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_4_down = newImage("images/websiteeeeeeeeeeeeeeeeee-14.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_6_over = newImage("images/websiteeeeeeeeeeeeeeeeee-17.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_6_down = newImage("images/websiteeeeeeeeeeeeeeeeee-18.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_8_over = newImage("images/websiteeeeeeeeeeeeeeeeee-21.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_8_down = newImage("images/websiteeeeeeeeeeeeeeeeee-22.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_10_over = newImage("images/websiteeeeeeeeeeeeeeeeee-25.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_10_down = newImage("images/websiteeeeeeeeeeeeeeeeee-26.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_12_over = newImage("images/websiteeeeeeeeeeeeeeeeee-29.gif"); websiteeeeeeeeeeeeeeeeeee_1_copy_12_down = newImage("images/websiteeeeeeeeeeeeeeeeee-30.gif"); preloadFlag = true; etc.... i wont post the entire thing, but thats for the navigation..and im lost.. i still have the navigational images left, but i dont know where to put them within the code. can anyone help me? Ok so I made a kinda complex layout in photoshop by slicing and I'm using hte code they gave me to put it all together. I've switched the images from being in the table to being the background of the table. Everything seems to work great. But I'm trying to make it so that when I type too much in the body function the body will just roll down and repeat itself and the links on the left side will stay and do nothing. But at the same time I want it so when I get too many links I want the links bar to continue to roll down and repeat itself while the body does nothing. Well right now when the body rolls down there are gaps in every break in images on the links side. I've tried valigning them all to the top and it works on the first one but the 2nd 3rd and 4th image still have gaps between them. Any suggestions? Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Hi there! I'm in the process of designing my first website, so I'm pretty green at this. I will have a number of internal and external hyperlinks links on my pages that I want to apply to rollover images. I have created the rollover images in Photoshop with slices, URLs etc. That all went fine, but here's my problem. When I save the image in Photoshop, the tutorial tells me to save the image as "HTML and images". This produces an image file and an associated HTML file that contains the script information for the actual image file. I can't figure out how to create an <A hef...> link or whatever is needed in my main HTML file that will get this "image" html file to show up in the browser and to call the rollover image so it works on mouseover. I've tried a number of options, but none seem to work. I assume that I need an <IMG SRC...> in there somewhere to call the image?? Any help on this would be awesome as I'm about to lose it over this one. Thanks! I have a site and the spry menu bar won't go all the way across the screen. anyone know why? I have been following this incomplete tutorial series http://www.youtube.com/user/EdzJohnson and have a finished product of what was done in Photoshop Website Design Tutorial 2. As of right now there is no third tutorial but I would still like continue developing my website. Currently the code represents the lay out of sliced up images for the web banner and some map tags surrounding the locations of where a button would link you to something else. However, I do not know where to place the link tags so the map locations actually link you to something else. does anyone know where to place the link tags? Code: <html>
<head>
<title>dobbs and bishop cheese de sliced10152010</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (dobbs and bishop cheese de sliced10152010.psd) -->
<table id="Table_01" width="1153" height="168" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="11">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_01.gif" width="1152" height="16" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_02.gif" width="85" height="152" alt=""></td>
<td rowspan="6">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_03.jpg" width="148" height="151" alt=""></td>
<td colspan="9">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_04.gif" width="919" height="50" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="50" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_05.gif" width="260" height="1" alt=""></td>
<td rowspan="3">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_06.gif" alt="" width="176" height="54" border="0" usemap="#Map2"></td>
<td colspan="5">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_07.gif" width="483" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_08.gif" width="59" height="101" alt=""></td>
<td>
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_09.gif" alt="" width="191" height="52" border="0" usemap="#Map"></td>
<td rowspan="5">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_10.gif" width="10" height="101" alt=""></td>
<td rowspan="5">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_11.gif" width="41" height="101" alt=""></td>
<td>
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_12.gif" alt="" width="155" height="52" border="0" usemap="#Map3"></td>
<td rowspan="5">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_13.gif" width="39" height="101" alt=""></td>
<td rowspan="3">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_14.gif" alt="" width="190" height="64" border="0" usemap="#Map4"></td>
<td rowspan="5">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_15.gif" width="58" height="101" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_16.gif" width="191" height="49" alt=""></td>
<td rowspan="4">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_17.gif" width="155" height="49" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_18.gif" width="176" height="48" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_19.gif" width="190" height="37" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td>
<img src="images/dobbs-and-bishop-cheese-de-sliced10152010_20.gif" width="148" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<map name="Map">
<area shape="rect" coords="4,8,191,45" a href="C:Users/blood muffin/Desktop/dobbs and bishop website/croppedheaser/www.dobbsandbishop.comcheese.html">
</map>
<map name="Map2">
<area shape="rect" coords="13,13,176,47" href="www.dobbsandbishop.comother">
</map>
<map name="Map3">
<area shape="rect" coords="5,9,153,48" href="www.dobbsandbishop.comphoto">
</map>
<map name="Map4">
<area shape="rect" coords="11,-5,188,55" href="www.dobbsandbishop.comglossary">
</map>
</body>
</html>
When you are using dream weaver for a website, do you have to install it onto the server I was going to use it because I think it's a nice layout for HTML coding. In the site: www.eldon.com see those little dotted lines in the page? I couldn't figure out how they did this to save my life... Thanks... I'm starting a new website on Dreamweaver. Can't remember how I did this the first time: I need some jpg images to go into my images folder. I created a folder for my website on my hard disk (local root folder)...and I defined my site on Dreamweaver, with an image folder....but when I try to add images to the folder, it won't accept them on Dreamweaver. Does anybody know what I'm doing wrong? |
|||||||