Full Version: Dreamweaver
I'm sorry if this is posted in the wrong spot. I'm new to the forum. I have a project due next week were we have to make a layout in Photoshop and then code it with Dreamweaver but the thing is I have absolutely no clue how to do this. So maybe if I posted my layout could someone point me in the right direction maybe online tutoring or something.
Hi Katie*, welcome to Pixel2life 
There are loads of tutorials that can be useful to you here in our site. You have basically two options: the first one is code your layout using tables, and the second one using CSS.
Asumming you want to code it using tables, the first thing you have to do is silice it using Photoshop. Then you go to Dreamweaver and create a table, inserting the images you've just sliced. Here you have a few tutorials that explain that process: http://www.pixel2life.com/search/all/slicing/1/
Good luck with it and don't hesitate to ask here if you have any problem
There are loads of tutorials that can be useful to you here in our site. You have basically two options: the first one is code your layout using tables, and the second one using CSS.
Asumming you want to code it using tables, the first thing you have to do is silice it using Photoshop. Then you go to Dreamweaver and create a table, inserting the images you've just sliced. Here you have a few tutorials that explain that process: http://www.pixel2life.com/search/all/slicing/1/
Good luck with it and don't hesitate to ask here if you have any problem
Thanks for your reply PSgirl. I'm pretty sure I have to use CSS guess I should find that out. We're taking bits and pieces of it and uploading them to Dreamweaver. Not really sure how to explain it but it's not cutting it up.
I got the part to make the actual layout but now my pages won't link together and I don't know why.
I see, well, if you have to use css it's a different story 
Why the pages won't link? What error gives you? Can you paste your html code here so we can take a look?
Why the pages won't link? What error gives you? Can you paste your html code here so we can take a look?
Here is my code. I don't even know if it's right since it looks nothing like the layout I posted in the first page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>centered layers</TITLE>
<style>
<!--
html,body {
margin: 0;
padding: 0;
}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: middle;
text-align: center;
}
div {
border: 0px solid #000000;
}
div.container {
position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
width: 780px;
height: 900px;
}
div.left {
position: absolute;
top: 16px;
left: 45px;
width: 549px;
height: 432px;
}
div.top {
position: absolute;
top: 236px;
left: 258px;
width: 580px;
height: 150px;
}
div.main {
position: absolute;
top: 253px;
left: 245px;
width: 580px;
height: 282px;
}
#Container {
position:absolute;
width:777px;
height:792px;
z-index:2;
background-image: url(Images/background.jpg);
visibility: visible;
background-repeat: repeat-x;
left: 2px;
top: -2px;
}
#Bottom {
position:absolute;
width:773px;
height:138px;
z-index:4;
background-image: url(Images/background.jpg);
background-repeat: repeat-x;
left: -27px;
top: 653px;
}
#buttons {
position:absolute;
width:543px;
height:41px;
z-index:2;
background-image: url(Images/buttons.jpg);
background-repeat: no-repeat;
left: 233px;
top: 94px;
}
#apDiv1 {
position:absolute;
width:270px;
height:145px;
z-index:3;
background-image: url(Images/logo.jpg);
background-repeat: no-repeat;
left: 207px;
top: 263px;
}
#Logo {
position:absolute;
width:270px;
height:140px;
z-index:3;
background-image: url(Images/logo.jpg);
background-repeat: no-repeat;
left: -37px;
top: -5px;
}
-->
</style>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div id="Container">
<div id="Logo"></div>
<div id="Bottom"></div>
<div id="logo"></div>
<div id="buttons"></div>
<div id="logo"></div>
</div>
</div></td>
</tr>
</table>
</body>
</html>
I don't get any kind of error when trying to link the pages it just doesn't work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>centered layers</TITLE>
<style>
<!--
html,body {
margin: 0;
padding: 0;
}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: middle;
text-align: center;
}
div {
border: 0px solid #000000;
}
div.container {
position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
width: 780px;
height: 900px;
}
div.left {
position: absolute;
top: 16px;
left: 45px;
width: 549px;
height: 432px;
}
div.top {
position: absolute;
top: 236px;
left: 258px;
width: 580px;
height: 150px;
}
div.main {
position: absolute;
top: 253px;
left: 245px;
width: 580px;
height: 282px;
}
#Container {
position:absolute;
width:777px;
height:792px;
z-index:2;
background-image: url(Images/background.jpg);
visibility: visible;
background-repeat: repeat-x;
left: 2px;
top: -2px;
}
#Bottom {
position:absolute;
width:773px;
height:138px;
z-index:4;
background-image: url(Images/background.jpg);
background-repeat: repeat-x;
left: -27px;
top: 653px;
}
#buttons {
position:absolute;
width:543px;
height:41px;
z-index:2;
background-image: url(Images/buttons.jpg);
background-repeat: no-repeat;
left: 233px;
top: 94px;
}
#apDiv1 {
position:absolute;
width:270px;
height:145px;
z-index:3;
background-image: url(Images/logo.jpg);
background-repeat: no-repeat;
left: 207px;
top: 263px;
}
#Logo {
position:absolute;
width:270px;
height:140px;
z-index:3;
background-image: url(Images/logo.jpg);
background-repeat: no-repeat;
left: -37px;
top: -5px;
}
-->
</style>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div id="Container">
<div id="Logo"></div>
<div id="Bottom"></div>
<div id="logo"></div>
<div id="buttons"></div>
<div id="logo"></div>
</div>
</div></td>
</tr>
</table>
</body>
</html>
I don't get any kind of error when trying to link the pages it just doesn't work.
But on that code you don't have any link. You have to include your images in their divs. For example, let's say you have 'Our work' button jpg, ourwork.jpg. Then go to buttons and insert that image and, after that, add the link to your 'Our work' html. You should have something like this:
</style>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div id="Container">
<div id="Logo"></div>
<div id="Bottom"></div>
<div id="logo"></div>
<div id="buttons"><a href="ourwork.html" target="_self"><img src="outwork.jpg" /></a></div>
<div id="logo"></div>
</div>
</div></td>
</tr>
</table>
</body>
</html>
Make sure your path to the image and your html is correct.
</style>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div id="Container">
<div id="Logo"></div>
<div id="Bottom"></div>
<div id="logo"></div>
<div id="buttons"><a href="ourwork.html" target="_self"><img src="outwork.jpg" /></a></div>
<div id="logo"></div>
</div>
</div></td>
</tr>
</table>
</body>
</html>
Make sure your path to the image and your html is correct.
QUOTE (PSgirl @ Mar 19 2009, 05:05 PM) 
But on that code you don't have any link. You have to include your images in their divs. For example, let's say you have 'Our work' button jpg, ourwork.jpg. Then go to buttons and insert that image and, after that, add the link to your 'Our work' html. You should have something like this:
</style>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div id="Container">
<div id="Logo"></div>
<div id="Bottom"></div>
<div id="logo"></div>
<div id="buttons"><a href="ourwork.html" target="_self"><img src="outwork.jpg" /></a></div>
<div id="logo"></div>
</div>
</div></td>
</tr>
</table>
</body>
</html>
Make sure your path to the image and your html is correct.
</style>
</head>
<body>
<table border=0>
<tr>
<td>
<div class="container">
<div id="Container">
<div id="Logo"></div>
<div id="Bottom"></div>
<div id="logo"></div>
<div id="buttons"><a href="ourwork.html" target="_self"><img src="outwork.jpg" /></a></div>
<div id="logo"></div>
</div>
</div></td>
</tr>
</table>
</body>
</html>
Make sure your path to the image and your html is correct.
Thanks
Hey. I didn't want to start a new topic for my new project. I'm almost done my website except for adding some sort of form ie. contact or order form. I made one but it's not on the site it like make itself above where the layout is if that makes sense? How do I go about getting it on the site?
Got screenshot/link to an example/code we can look at?
QUOTE (Katie* @ Apr 6 2009, 09:19 PM)
Hey. I didn't want to start a new topic for my new project. I'm almost done my website except for adding some sort of form ie. contact or order form. I made one but it's not on the site it like make itself above where the layout is if that makes sense? How do I go about getting it on the site?
Ok thats because you have a table and a bounch of divs.
First of all your code is very messy, it's all over the play, have you considering using a separate css file and link it to the html coding? why do you have a table with a whole bounch of div in it? I suggest that you consider the layout of your site first usally when I design my site I have a div for the entire page, one for header, one for footer, one for body.
Now to answer why your form doesn't go where you want it to go it is because html process codes in layers. If you place the form codes outside of the table and divs it will be process under <body>tag and it doesn't matter if you place the code before or after the table or divs tags, it would be consider as a separate part.
here is how you create a style sheet, open a new css page with dreamweaver or any text adding program, and call it whateveryouwanttocallit.css and than copy and pase your enire style section with out the style></style> to the new css file and save it. Now under your <head> tags add this line
CODE
<link rel="stylesheet" type="text/css" href="whateveryouwanttocallit.css" />
Now depending on which dreamweaver version you have, it should automatically open both html and your css file at once.
Hope this helps
Cheers
Steve
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.