PDA

View Full Version : centre a sliced image from photoshop into dreamweaver cs4


annagr
09-03-2009, 11:43 AM
Hi there,

I have a problem I have not been able to solve now for a couple of days and its driving me crazy! My last resort is to get hold of someone that knows about css or html coding.

What ive done is created my homepage in photoshop, sliced it, saved for web and devices.
Opened it in dreamweaver by just clicking on it (saved it first in my homepage folder).
Now it looks perfect and i have linked my sliced images and i am very happy with the result. The only problem is that I can not centre it!! there is nowhere in the properties window were i can align it to the centre.....im working in cs4. What am i doing wrong? My page is basically finished but i need to centre it.
Should i have built up a table first and placed the whole html file in there? Or could i create a div around it and then centre it? I have googled and watched 1000 of tutorials but can not figure this one out.

Is there anywhere i just can slot in some html code to centre it??

Sorry guys, new at webdesign....maybe ive gone by it the wrong way....what other ways are there to do this? (build a page as an image and then slice it and get it in dreamweaver cs4) I have tried to build up a table and slot the images in separately but it does not work since the images are place irregular....

Would be very thankful for some help!

Kind regards
Anna :confused:


here is the whole code....
<html>
<head>
<title>newindexpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- ImageReady Styles (newindexpage.jpg) -->
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:20px;
width:794px;
height:721px;
background-color: #000000;
}

#newindexpage-01 {
position:absolute;
left:0px;
top:0px;
width:794px;
height:81px;
}

#newindexpage-02 {
position:absolute;
left:0px;
top:81px;
width:160px;
height:640px;
}

#newindexpage-03 {
position:absolute;
left:160px;
top:81px;
width:68px;
height:25px;
}

#newindexpage-04 {
position:absolute;
left:228px;
top:81px;
width:111px;
height:25px;
}

#newindexpage-05 {
position:absolute;
left:339px;
top:81px;
width:107px;
height:25px;
}

#newindexpage-06 {
position:absolute;
left:446px;
top:81px;
width:53px;
height:25px;
}

#newindexpage-07 {
position:absolute;
left:499px;
top:81px;
width:75px;
height:25px;
}

#newindexpage-08 {
position:absolute;
left:574px;
top:81px;
width:220px;
height:93px;
}

#newindexpage-09 {
position:absolute;
left:160px;
top:106px;
width:414px;
height:68px;
}

#newindexpage-10 {
position:absolute;
left:160px;
top:174px;
width:238px;
height:547px;
}

#newindexpage-11 {
position:absolute;
left:398px;
top:174px;
width:322px;
height:242px;
}

#newindexpage-12 {
position:absolute;
left:720px;
top:174px;
width:74px;
height:548px;
}

#newindexpage-13 {
position:absolute;
left:398px;
top:416px;
width:322px;
height:305px;
}
body {
background-color: #000000;
background-image: url();
}
body,td,th {
color: #000000;
}

-->
</style>
<!-- End ImageReady Styles -->
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body style="background-color:#000000; margin-top: 10px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onLoad="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');">
<!-- ImageReady Slices (newindexpage.jpg) -->
<table align="center">
<div id="Table_01">

<div id="newindexpage-01">
<img src="images/newindexpage_01.gif" width="794" height="81" alt=""> </div>
<div id="newindexpage-02">
<img src="images/newindexpage_02.gif" width="160" height="640" alt=""> </div>
<div id="newindexpage-03">
<img src="images/newindexpage_03.gif" width="68" height="25" alt=""> </div>
<div id="newindexpage-04">
<a href="javascript: void(0)"><img src="images/newindexpage_04.gif" alt="" width="111" height="25" onClick="MM_openBrWindow('AG/graphicdesign/graphicdesign.html','Graphic','width=800,height=60 0')"></a> </div>
<div id="newindexpage-05">
<a href="javascript: void(0)"><img src="images/newindexpage_05.gif" alt="" width="107" height="25" onClick="MM_openBrWindow('AG/styling/styling.html','Styling','width=800,height=600')"></a> </div>
<div id="newindexpage-06">
<a href="javascript: void(0)"><img src="images/newindexpage_06.gif" alt="" width="53" height="25" onClick="MM_openBrWindow('AG/lilyjets.html','','width=320,height=240')"></a> </div>
<div id="newindexpage-07">
<img src="images/newindexpage_07.gif" width="75" height="25" alt=""> </div>
<div id="newindexpage-08">
<img src="images/newindexpage_08.gif" width="220" height="93" alt=""> </div>
<div id="newindexpage-09">
<img src="images/newindexpage_09.gif" width="414" height="68" alt=""> </div>
<div id="newindexpage-10">
<img src="images/newindexpage_10.gif" width="238" height="547" alt=""> </div>
<div id="newindexpage-11">
<img alt="" width="322" height="0" style="background-color: #000000">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','322','height ','242','id','FLVPlayer','src','FLVPlayer_Progress ive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=fashion&autoPlay=true&autoRewind=true','quality','high','scale','noscale ','name','FLVPlayer','salign','lt','pluginspage',' http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','FLVPlayer_Progressive' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="322" height="242" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=fashion&autoPlay=true&autoRewind=true" />
<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=fashion&autoPlay=true&autoRewind=true" quality="high" scale="noscale" width="322" height="242" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />
</object></noscript>
</div>
<div id="newindexpage-12">
<img src="images/newindexpage_12.gif" alt="" width="74" height="547" align="middle"> </div>
<div id="newindexpage-13">
<img src="images/newindexpage_13.gif" width="322" height="305" alt=""> </div>
</div>
</center>
<p>
<!-- End ImageReady Slices -->
</body>
</html>

domedia
09-03-2009, 03:14 PM
Hi Anna, I'm sure you'll get lots of advise in this thread :)
A couple of pointers which will help you out.

1. Do not save for HTML. Photoshop is not meant for making web pages. Slice out the graphic you need to use for the site and then use DW to construct your webpage.

2. Learn HTML and CSS. This is the two most important building blocks of a webpage. If you want to make websites, knowing these 2 languages sooner than later is a great advantage.

3. Web pages are not laid out with tables (anymore). Use Web standards and leave tables for when you need to display data like you would in a spreadsheet.

annagr
09-03-2009, 05:33 PM
hi again,

thanks for your reply....i know i need to get myslef more clued up with html and css....and i will.....but for now i just really need to centre my page....i know my coding is not the best and i have probably done loads of mistakes. For now thats all good tho, need to be able to show a page by the end of the week.

Its all working the only thing i need is to centre it. Do you know a way i can do that?

If not....if i would to save the image again just as slices....not html....how do i build it up in DW? What technique do i use? Do you know any tutorials i can watch? Or what phrase i should google?

Or, is there anyone else out there that can guide me? Please help!

Many thanks
Anna

domedia
09-03-2009, 06:37 PM
Once you know HTML and CSS you also inherit the knowledge of how to put a webpage together, it's the same thing really.

To center the content look at this tutorial:
http://www.dreamweaverclub.com/css-center-content.php

Also look to make sure your code is valid HTML, you can find numerous HTML validators online. There's one at w3c.org.

jay
09-05-2009, 12:46 PM
Highlight the page you want centerd press the left click button on keyboard. go to sencond or 3rd option -->Align and choose center

DWcourse
09-05-2009, 10:33 PM
http://dwcourse.com/dreamweaver/centering-page-layout.php