Dreamweaver CS4 Question

Started by Yusshin May 25th, 2010 12:58 PM
  • 1116 views
  • 9 replies

Yusshin

♪ Yggdrasil ♪

Age 30
Quebec, Canada
Seen May 13th, 2013
Posted May 13th, 2013
2,414 posts
13.8 Years
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:


Polaret | Fourette | Ecuret | Axew | Zorua | Nanette [Shiny]
"My scar makes me sassy, child!"
The Big Bang Theory Fan Club - Click To Join!
The French Club

Petie

Age 34
Male
Colorado
Seen June 25th, 2022
Posted July 14th, 2020
152 posts
14.5 Years
Just add the following bit of CSS to the page:

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

♪ Yggdrasil ♪

Age 30
Quebec, Canada
Seen May 13th, 2013
Posted May 13th, 2013
2,414 posts
13.8 Years
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...

<!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>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>


Polaret | Fourette | Ecuret | Axew | Zorua | Nanette [Shiny]
"My scar makes me sassy, child!"
The Big Bang Theory Fan Club - Click To Join!
The French Club

Yusshin

♪ Yggdrasil ♪

Age 30
Quebec, Canada
Seen May 13th, 2013
Posted May 13th, 2013
2,414 posts
13.8 Years
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?


Polaret | Fourette | Ecuret | Axew | Zorua | Nanette [Shiny]
"My scar makes me sassy, child!"
The Big Bang Theory Fan Club - Click To Join!
The French Club

Petie

Age 34
Male
Colorado
Seen June 25th, 2022
Posted July 14th, 2020
152 posts
14.5 Years
Text over images is accomplished by making the image the background of another element. For example, something like this would work:
<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

♪ Yggdrasil ♪

Age 30
Quebec, Canada
Seen May 13th, 2013
Posted May 13th, 2013
2,414 posts
13.8 Years
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 ><

?


Polaret | Fourette | Ecuret | Axew | Zorua | Nanette [Shiny]
"My scar makes me sassy, child!"
The Big Bang Theory Fan Club - Click To Join!
The French Club

Cherrim

Age 34
she / her
Toronto
Seen 19 Hours Ago
Posted 19 Hours Ago
33,052 posts
20.4 Years
You can have more than one thing to style in your