PDA

View Full Version : HTML.....?



Tanya
02-18-2008, 08:28 AM
I have been doing photoshop for a few months and I have also learned how to work with Image ready.

I have followed a few of Photoshopcafe's tutorials but I am struggling with the one tutorial where I design in photoshop, export to image ready and then make it ready for the web.

The tutorial I am busy with is BUILDING A WEBSITE WITH PHOTOSHOP AND DREAMWEAVER. I am able to do my own design in photoshop, then I am able to do the slices in imageready and the roll overs, and do all the changes as explained in the tutorials, but as soon as I have saved the optimized file in HTML format, and then open that link it shows what I have done, but as soon as I send my html file to my colleagues, it does not show on their computer. Where the pictures / slices are supposed to be, a little red cross shows. I donít know what I have done wrong??
Can someone please help me or explain what i have done wrong!!!!

rAyVoLvEz
02-18-2008, 08:32 AM
did u send ur friends/colleagues the images?

also what is the relative path to ur imageS?

check the <img src="your image path"/>, what is in your image path?

TheDoc
02-18-2008, 08:32 AM
Ray beat me to it!

The HTML code does not have the images imbedded within it. For your colleagues to see it properly on their own computers, you also need to send all of the image files their way as well.

[Edited on 2/18/2008 by TheDoc]

padiq
02-18-2008, 08:32 AM
HTML pages do not contain anything but markup (code) by themselves. Where an image is speicified in the code it must be linked to either absolutely or relatively. In other words you have to email them all the images (exported images from IR) plus the html file and then they will be able to see it all. - maybe it's best to zip it all up and then send it all at once instead of attaching individual files...

padiq
02-18-2008, 08:33 AM
^^^ :lol - ALL POSTED AT THE SAME TIME :)

Tanya
02-18-2008, 08:45 AM
Thank you for your answers!
i will try the options out and see if i have come right!

Tanya
02-18-2008, 08:50 AM
Originally posted by rAyVoLvEz
did u send ur friends/colleagues the images?

also what is the relative path to ur imageS?

check the <img src="your image path"/>, what is in your image path?

....... :) :)
i did not send them the pictures, i have all the images on my pc.

i do not know what the relative path to my images is??

and i dont know what is my image path.

What i am trying to do is set up our website, i dont know much about web designing but i am practicing through tutorials. i also want other people to see our company's website when they enter our website. So i am getting stuck when someone or anyone wants to view the site.....

dcloud
02-18-2008, 09:11 AM
First, if you do your design work in Photoshop and then save them for the web (as JPEG, GIF, etc.) then anyone with a computer can view the files. However, if you're sending them PSD files then they can't view these unless they have Photoshop.

When you create a web site in DW you do so by "Creating a Site" which you can do from the menu or by clicking on the "Site" link in the column on the right in the DW main window. DW will create it's own site folder within My Documents where all your html pages and images will be stored. Usually you go through these steps in the beginning when you first create a site and are given the opportunity to name this folder.

padiq
02-18-2008, 10:18 AM
You need to open your HTML file with notepad or just view the source code in your browser - then what you need to do is look through the HTML code which has been generated by Photoshop - look for <img> tags - there should be an src attribute which will show a path of where the images 'should' be located.

In fact - could you post the HTML code (open HTML file with eg.notepad and copy all code) here - just select all of it and post it here and we will have a look and let you know what you need to do :)

Tanya
02-18-2008, 10:31 AM
i hope i have done it correctly!!
thanks for your help james



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web page one</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Preload Script (Web page one.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
Web_page_two_04_over = newImage("images/Web-page-two_04-over.jpg");
Web_page_two_05_over = newImage("images/Web-page-two_05-over.jpg");
Web_page_two_06_over = newImage("images/Web-page-two_06-over.jpg");
Web_page_two_07_over = newImage("images/Web-page-two_07-over.jpg");
Web_page_two_08_over = newImage("images/Web-page-two_08-over.jpg");
Web_page_two_09_over = newImage("images/Web-page-two_09-over.jpg");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" onload="preloadImages();">
<!-- ImageReady Slices (Web page one.psd) -->
<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img id="Web_page_two_01" src="images/Web-page-two_01.jpg" width="61" height="27" alt="" /></td>
<td colspan="6">
<img id="Web_page_two_02" src="images/Web-page-two_02.jpg" width="735" height="27" alt="" /></td>
<td>
<img id="Web_page_two_03" src="images/Web-page-two_03.jpg" width="4" height="27" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<a href="www.willsons.co.za"
onmouseover="changeImages('Web_page_two_04', 'images/Web-page-two_04-over.jpg'); return true;"
onmouseout="changeImages('Web_page_two_04', 'images/Web-page-two_04.jpg'); return true;"
onmousedown="changeImages('Web_page_two_04', 'images/Web-page-two_04-over.jpg'); return true;"
onmouseup="changeImages('Web_page_two_04', 'images/Web-page-two_04-over.jpg'); return true;">
<img name="Web_page_two_04" id="Web_page_two_04" src="images/Web-page-two_04.jpg" width="78" height="30" border="0" alt="" /></a></td>
<td>
<a href="#"
onmouseover="changeImages('Web_page_two_05', 'images/Web-page-two_05-over.jpg'); return true;"
onmouseout="changeImages('Web_page_two_05', 'images/Web-page-two_05.jpg'); return true;"
onmousedown="changeImages('Web_page_two_05', 'images/Web-page-two_05-over.jpg'); return true;"
onmouseup="changeImages('Web_page_two_05', 'images/Web-page-two_05-over.jpg'); return true;">
<img name="Web_page_two_05" id="Web_page_two_05" src="images/Web-page-two_05.jpg" width="93" height="30" border="0" alt="" /></a></td>
<td>
<a href="#"
onmouseover="changeImages('Web_page_two_06', 'images/Web-page-two_06-over.jpg'); return true;"
onmouseout="changeImages('Web_page_two_06', 'images/Web-page-two_06.jpg'); return true;"
onmousedown="changeImages('Web_page_two_06', 'images/Web-page-two_06-over.jpg'); return true;"
onmouseup="changeImages('Web_page_two_06', 'images/Web-page-two_06-over.jpg'); return true;">
<img name="Web_page_two_06" id="Web_page_two_06" src="images/Web-page-two_06.jpg" width="160" height="30" border="0" alt="" /></a></td>
<td>
<a href="#"
onmouseover="changeImages('Web_page_two_07', 'images/Web-page-two_07-over.jpg'); return true;"
onmouseout="changeImages('Web_page_two_07', 'images/Web-page-two_07.jpg'); return true;"
onmousedown="changeImages('Web_page_two_07', 'images/Web-page-two_07-over.jpg'); return true;"
onmouseup="changeImages('Web_page_two_07', 'images/Web-page-two_07-over.jpg'); return true;">
<img name="Web_page_two_07" id="Web_page_two_07" src="images/Web-page-two_07.jpg" width="120" height="30" border="0" alt="" /></a></td>
<td>
<a href="#"
onmouseover="changeImages('Web_page_two_08', 'images/Web-page-two_08-over.jpg'); return true;"
onmouseout="changeImages('Web_page_two_08', 'images/Web-page-two_08.jpg'); return true;"
onmousedown="changeImages('Web_page_two_08', 'images/Web-page-two_08-over.jpg'); return true;"
onmouseup="changeImages('Web_page_two_08', 'images/Web-page-two_08-over.jpg'); return true;">
<img name="Web_page_two_08" id="Web_page_two_08" src="images/Web-page-two_08.jpg" width="220" height="30" border="0" alt="" /></a></td>
<td colspan="2">
<a href="#"
onmouseover="changeImages('Web_page_two_09', 'images/Web-page-two_09-over.jpg'); return true;"
onmouseout="changeImages('Web_page_two_09', 'images/Web-page-two_09.jpg'); return true;"
onmousedown="changeImages('Web_page_two_09', 'images/Web-page-two_09-over.jpg'); return true;"
onmouseup="changeImages('Web_page_two_09', 'images/Web-page-two_09-over.jpg'); return true;">
<img name="Web_page_two_09" id="Web_page_two_09" src="images/Web-page-two_09.jpg" width="129" height="30" border="0" alt="" /></a></td>
</tr>
<tr>
<td colspan="8">
<img id="Web_page_two_10" src="images/Web-page-two_10.jpg" width="800" height="543" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="61" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="160" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="120" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="220" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="125" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt="" /></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

padiq
02-18-2008, 10:42 AM
From your code it looks like you have your HTML file, and then an images folder in the same location - For the website to work, the HTML file and that images folder need to stay together.

If you want to email it then you could zip it all up into a zip archive (the html file and the images foldeR).

Tanya
02-18-2008, 11:04 AM
Thank you for your help!! its starting to make sense to me!! :)

that is true, i have the html file saved on my desk top and i had the images file saved in my documents. I will keep them together from now on. Where do you think the best would be to save these folders??

lastly how do i go about zipping it all up.

thanks again for your help:D

padiq
02-18-2008, 12:14 PM
Well you can download programs to zip them up - Such as http://www.7-zip.org/

I thought Windows had a way to do it...

Anyway, I would suggest putting all the files (html + images folder) into a entire folder for itself - just make sure that the relative paths of the images (in the code) stay true...

Tanya
02-18-2008, 12:29 PM
thank you so much for your help,
i have put the html and images into a folder for itself, and i figured out how to zip the files.

i have e-mailed the link to one of the people who work with me to see if they can now view the pics. im just waiting for them to let me know if it has worked!!

thank you for helping me!!