Dreamweaver CS4 Question

Yusshin · May 25, 2010

All right. I saved a template I made in PS CS5 as a Web & Devices thing, "HTML & images", as index.html.

It loads fine into Dreamweaver, but whenever I try to add a link to an image, my template chops up. "Sections" (as sliced in CS5) will separate from another and form an image like a broken puzzle.

How do I properly insert links onto images without it breaking up?

Here:

Spoiler:

Petie · May 25, 2010

Just add the following bit of CSS to the page:

Code:

img
{
    border: 0px;
}

Just put that in with the rest of the stylesheet. The reason it's breaking, which you can see in the screen shot, is because when you add a link, it creates a border. Hiding this border should fix it.

Yusshin · May 25, 2010

I can stick that in anywhere? Or is there a specific place?

I'm using Dreamweaver 'cause I suck at HTML XD Please be noob-friendly for me ;-;

<table width="1191" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
img
{
border: 0px;
}
<tr>

When I do it like that, it still breaks D:

Here's my Dreamweaver CS4 code for the template...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>template with slice</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (template with slice.psd) -->
<table id="Table_01" width="1191" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="13">
			<img id="index_01" src="images/index_01.png" width="1190" height="412" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="412" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="8">
			<img id="index_02" src="images/index_02.png" width="136" height="1005" alt="" /></td>
		<td colspan="3" rowspan="2">
			<img id="index_03" src="images/index_03.png" width="255" height="126" alt="" /></td>
		<td colspan="4" rowspan="2">
			<img id="index_04" src="images/index_04.png" width="400" height="126" alt="" /></td>
		<td colspan="4">
			<img id="index_05" src="images/index_05.png" width="257" height="122" alt="" /></td>
		<td rowspan="8">
			<img id="index_06" src="images/index_06.png" width="142" height="1005" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="122" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<img id="index_07" src="images/index_07.png" width="127" height="4" alt="" /></td>
		<td rowspan="2">
			<img id="index_08" src="images/index_08.png" width="128" height="70" alt="" /></td>
		<td rowspan="7">
			<img id="index_09" src="images/index_09.png" width="2" height="883" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img id="index_10" src="images/index_10.png" width="95" height="66" alt="" /></td>
		<td>
			<img id="index_11" src="images/index_11.png" width="1" height="66" alt="" /></td>
		<td colspan="3">
			<img id="index_12" src="images/index_12.png" width="281" height="66" alt="" /></td>
		<td rowspan="2">
			<img id="index_13" src="images/index_13.png" width="107" height="68" alt="" /></td>
		<td colspan="2" rowspan="2">
			<img id="index_14" src="images/index_14.png" width="181" height="68" alt="" /></td>
		<td>
			<img id="index_15" src="images/index_15.png" width="117" height="66" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="66" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img id="index_16" src="images/index_16.png" width="257" height="121" alt="" /></td>
		<td>
			<img id="index_17" src="images/index_17.png" width="120" height="2" alt="" /></td>
		<td colspan="2" rowspan="5">
			<img id="index_18" src="images/index_18.png" width="245" height="813" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="4">
			<img id="index_19" src="images/index_19.png" width="408" height="811" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="119" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4">
			<img id="index_20" src="images/index_20.png" width="257" height="110" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="110" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4">
			<img id="index_21" src="images/index_21.png" width="257" height="109" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="109" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4">
			<img id="index_22" src="images/index_22.png" width="257" height="473" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="473" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="136" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="95" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="159" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="120" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="107" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="171" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="117" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="128" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="142" height="1" alt="" /></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Petie · May 25, 2010

Ah, sorry. Just put the following, in its entirety, right before the </head> tag:

Code:

<style type="text/css">
  img
  {
      border: 0px;
  }
</style

Yusshin · May 25, 2010

Wow :D It worked!

Now, I know the tags <p> and </p> make paragraphs, and <h1></h1> are for headers. How do I write something onto part of the image in HTML?

Also, do I have to make a new page for every link? Kinda like, take the same lay-out, but have it say different stuff on the page via. HTML?

Petie · May 26, 2010

Text over images is accomplished by making the image the background of another element. For example, something like this would work:

Code:

<div style="background-image: url(path/to/image.png); width: #px; height: #px;>Text goes here</div>

Where the # after width and height are the width and height of the image. However, this approach will position the text at the top left of the image. Positioning the text complicates things a little more though you should be able to do it easily if you're using Photoshop to create the layout.

As for making new pages, if you're using pure HTML then yes, you do have to make a new page for each link to link to. Using a server-side language, like PHP for instance, you can make pages dynamic and include content in a template, so to speak, but I think this is a little beyond the scope of your current project.

Yusshin · May 26, 2010

xD;;; yeah, I'm kinda really new to this.

I have one big problem, though.

I have a background image, but when I use it in Photoshop, the dimensions aren't wide enough for my computer screen.

Would inserting this fix it:

<style type="CSS/text">body
{
background-image:url('[IMAGE].png');
background-repeat:no-repeat;
}
<style>

and to combine that with the no-break thing, would it look like this:

<style type="text/css">
img
{
border: 0px;
background-image:url('[IMAGE].png');
background-repeat:no-repeat;
}
</style>

Thanks for the help :D

[Edit]

I managed to get the background on, but it's chopped up. It's no better than the Photoshop version lol I really want this background, though. It compliments the rest of the template so well ><

?

Cherrim · May 26, 2010

You can have more than one thing to style in your <style> tags. It should look like this:

Code:

<style type="CSS/text">
     body {
          background-image:url('[IMAGE].png');
          background-repeat:no-repeat;
     }
     img {
          border: 0px;
     }
<style>

If you combine them like you did, then you'd basically be telling every image on the page (so anything you added with <img> tags) that it needed [IMAGE].png as its background and that background would not repeat... which isn't quite what you're going for. ;p

I'm gonna move this to Webmaster's Discussion since it's more about coding help than program help. (And it's a web-authoring program anyway.)

Serene Grace · May 29, 2010

You shouldn't really be using inline CSS. It will cause problems when your site gets a fair amount of content

aRedMoon · May 30, 2010

It works fine as you are just starting out, tho. :)

Dreamweaver CS4 Question

More options

Yusshin

♪ Yggdrasil ♪

Petie

Yusshin

♪ Yggdrasil ♪

Petie

Yusshin

♪ Yggdrasil ♪

Petie

Yusshin

♪ Yggdrasil ♪

Cherrim

PSA: Blossom Shower theme is BACK ♥

Serene Grace

Pokémon Trainer

aRedMoon

Wait for me outside the lines