PDA

View Full Version : photoshop sizing issue in dreamweaver


twilightballoons
08-26-2007, 06:10 PM
Hi, I am new to this forum but will give it a go as it looks like a great place to learn more about using dreamweaver.

I have a question if someone could help me with?

I have designed and built a few websites using dreamweaver using photshop to make all the images, however, I have now decided to make a full website using photoshop and slicing it up etc.

I have made the site, sliced it up in image ready and transfered it over to dreamweaver and everything is fine and looks great. But, when I remove the two center content boxes where I want to insert text using dreamweaver things to wrong! As soon as I remove the lower box then the whole template shifts to the right by a few pixels which makes the template look odd as it is now no longer in line.

I am not sure as to how I go about correcting this and would be grateful if anyone could tell me how to fix this problem.

Also, I had a problem with the links which I corrected using http:// before the link, and now when I preview it in firefox the links only last once although everything works ok with ie7.

Any help and feedback would be gratefully appreciated. Cheers.

kittyprrrs
08-26-2007, 08:10 PM
I am trying to follow but without the proper link of what you are seeing it is kind of hard. Now, onto what I think you are saying:

"As soon as I remove the lower box then the whole template shifts to the right by a few pixels which makes the template look odd as it is now no longer in line."

-You shouldn't have to remove anything. When you slice in PS, you really need to decide exactly how the layout of the page goes. For instance, if you want the logo at the top, the buttons on the left side (and if they are rollover effects added, each slice needs to be created with proper layers and their appropriate effects...properly named of course), content in the middle and most likely, an area for your copyright info. PS/Image ready does all the work for you and slaps all the images in a nice folder...all you have to do is open up the "html" in the folder in DW(ie 8 in my case) and you should be able to start adding content. Just select the middle section which was created as the "content" area when you sliced and start typing. If I am correct...anyone feel free to correct me.

However, if this does not answer your question...please provide a link (or some images at least....upload them to your photobucket account if you have one or on your server with a link to it)....

Links act wierd on ie7 and firefox...i do not know if this is a coding issue or browser issue as my links for the site I am doing is fine in FF but look nasteeeee...in ie7. As for the links only "working once" could it be *i'm sorry to assume, again...links would be better examples here* that the other links were not edited? meaning your home page is coded and your second page but the second page has not been edited for the links to roll back to previous page or next page?

twilightballoons
08-27-2007, 10:56 PM
Thanks for the reply but have to admit that I am just as confused as before!

I made the template in photoshop, then I transfered it over to image ready, then sliced it up saved it and opened it in dreamweaver. Now, when I go to type in the content box it shifts the box to the right to make way for the text. I have tried not selecting the box where I want the text and moved that to dreamweaver then then typed, but the type starts in the middle not on the top?

Is it best to do all the typing in photoshop and then just slice it over to dreamweaver? If I do this then my page wont get a good ranking as my text will be an image, is this correct?

Any help is really appreciated!

kittyprrrs
08-28-2007, 05:00 AM
Confusion is a good thing. You learn from it! :)

First off, if you have a link of what you are trying to do, that would be great.

OR

While in DW, click the box you are trying to type in
1. find "print screen" on your keyboard *above delete & insert*
2. PRESS Print Screen
3. Go back to PShop, File>New>Paste
4. Save image as "eeew" or something that explains it (my hell...) whatever...
5. Upload it on your server (OR) Upload it on your photobucket/flicker/msn....album that you may have online
6. in the "reply message" after this one, insert the image path (usually http://xxxx.xxx.com/xxxx.jpg)

Now...that we can see what you are having a problem with, we can troubleshoot better. I hope I didn't lose you on that!http://www.dreamweaverclub.com/forum/images/icons/icon12.gif

OK! Now...onto what I THINK you are needing help with. Text normally, for some odd reason (and I have not figured out WHY) when using a "sliced" image from IReady...always goes back to 'middle'. No worries, when you click inside the "content" box, when you look in your "properties" there is an "Align (I believe, or something like that as i don't have DW open right now)", you should be able to select "Top". NOW....this is OLD OLD OLD..FASHION! You might want to do a CSS for this and that is SO easy. If you have DW8, the "CSS/Layers" will be open on the right side of your screen. Click the CSS. In there, you can create a new style sheet and edit all your text and such to format exactly how you want it to look. There might be a better "tutorial" here in the forums that explains it better than I did.

As far as I know, if you typed all your text in PS, yes it will become an "image" with text and will not be "search" friendly. Be patient with learning DW. The payoff in the end is:

1. Learning a new program (which if you got this far with IReady and slicing...you are definitely patient and willing to learn...)
2. Learning how to make better sites
3. Learning from this forum with so many designers who have other solutions to problems
4. Learning all the bells and whistles to make your site stand out above the rest

The key, twilightballoons, is the payoff of what you get in the end.

DO post an image of what you are seeing so that we see what you have been dealing with as, I do not know if what i think you are saying is what you need help with. Get it? You can pm me as well as msn me or skype. I'll send the info to you in pm.

twilightballoons
08-28-2007, 11:37 AM
Thanks for the reply kitty, it does get really frustrating when you are trying to do something like this and cannot get it done!!

Here are some links:

This first image is what the site should look like before the text has been entered:
http://i195.photobucket.com/albums/z4/twilightballoons/sitelookingok-1.jpg

This next image is when I delete the image box where the main text is to go, the image seems to move a little to the right:
http://i195.photobucket.com/albums/z4/twilightballoons/screenmovedtotheright.jpg

The next image is when I just type straight into the main content box, the lower bar suddenly moves up to the middle:
http://i195.photobucket.com/albums/z4/twilightballoons/lowerbarmovedup.jpg

I tried typing into the box and making the text align to the top, the text did indeed go to the top, but the lower bar once again moved up to the middle with it

Am I right to say that you slice the whole image in imageready then move it to dreamweaver, delete the main content box, insert a text box from dreamweaver and then enter text? And if so, why does the image move out of shape to the right?

Cheers for the help.

domedia
08-28-2007, 02:42 PM
You're using table tags to create the content of your website. Did you look into some CSS layouts instead? DW comes with several premade, and there's some great CSS tutorials no dreamweaver.com

twilightballoons
08-28-2007, 06:43 PM
I am new to using css as well but at trying to get the hang of them at the same time that I try to get the hang of making a site in photoshop!

I do want to make my site center in the middle but that will come as soon as I can figure how I enter text into the design I made in photoshop.

twilightballoons
08-28-2007, 11:24 PM
I am completely distraught and am nearly at the stage of giving up, so please forgive my rant!!

I have designed the site in photoshop and sliced it up in dreamweaver with a nice blue background fading to white. Now, I have tried everyway I can think of to make things work for the site to look as good in dreamweaver as it does in photoshop but to no avail. Sometimes if I slice the image one way everything is fine until I come to remove the main content box then things go awry, then other times it is ok but I am still left with a white line on the right. For anyone who is interested here area a few screenshots:

Here is a screen shot as the site should be:
http://i195.photobucket.com/albums/z4/twilightballoons/siteasitshouldbe.jpg

Here is a screen shot with site site moving to the right with a white stripe:
http://i195.photobucket.com/albums/z4/twilightballoons/sitewithwhitestripe.jpg

If I slice the navigation on the right then the image moves to the right in dreamweaver and I am left with a white stripe, and the same happens if I slice the main content area. I have no idea where I am going wrong and how to correct this. I have looked all over the net and on the forums here but found nothing to help and am really begining to think if it is worth the bother as I have wasted days on the same problem but to no avail. I want to make it work but am completely stuck.

I am now seriously thinking about either giving up with the blue background and going with a white background which does not look as nice, or I am going to give up completely and just design the site in dreamweaver without going through the hassle to photoshop and slicing!

Please, please does anybody know the solution to this problem, I am guessing that it will be a simple one, but when you dont know the solution it is really, really frustrating?????!

kittyprrrs
08-29-2007, 01:04 AM
see below:

http://www.thethreemoirae.com/sitewithwhitestripe.jpg

It looks like the right side is a slice? (Correct me if I am wrong yall)...also, CSS is easy once you get used to it.

What I would do is make the right side (which if it is a slice, then the image is already there) the background image and repeat it horizontally at this point

then for the content, create a layer and keep the content inside the layer with the white box as the background....

(Does anyone else have a better solution that is EASY at this point?)....that is my easiest way of doing it as it is right now....

Again...this is how i would do it....

twilightballoons
08-29-2007, 01:22 AM
The white line that appears is not a slice. There is a slice which is next to it which contains a bit of the white content box as well.

I already have a slice running the whole length from top to bottom which is only 1 pixel wide which I have used css to choose that as a background.

Everything is fine and the line does not appear until i select part of the middle image to be sliced, then for some unknown reason this white line appears. I have been looking at the code and a few spacers are on the right, but when they are deleted nothing changes at all.

I have been trying to put the site in a table as I want to center the site eventually, but I am having problems doing it and am not sure how to do it in css, I have tried copying the code from the tutorial from this site but nothing happens so I am probably doing something wrong. I am thinking along the lines that the table might help to get rid of the white line somehow?

Cheers for the help kittyprrrs.