Sliced images moving in DW

Hi all,
I am pretty new to development in DW and I have a question that I hope I am putting in the right place.
I have already sliced up the template and imported them into dreamweaver. However, when I am creating a contact us page and input the table for the form, the website becomes distorted. I believe it may be the size of the form itself causing the issue but no matter how much I lower the width in DW it still looks distorted.
Does anyone have any idea how I can stop the sliced images from moving in DW once I import them?
Thanks in advance
andersonr09

I can take a look, but I don't know of any off the top of my head. Basically you could start that tutorial at the following:
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html#articlecontentAdobe_nu mberedheader_4
Creating slices in Photoshop is very similar except that where Fireworks has the box where it says the "Type: Image; JPEG", Photoshop will do that in the Save for Web Dialog. But with that said, Parts 2 & 3 are where it leaves the Fireworks plane and goes in depth with how to structure HTML and CSS in Dreamweaver which is the preferred method. The Save For Web where Photoshop generates HTML is more for prototyping. What that means is basically just showing someone an image of what the web page will look like without doing much coding so that if design changes need to be made, they are done before the content gets entered in as HTML since things could get messy at that point.
Pt. 2 http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Pt. 3 http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html

Similar Messages

Building a site out of sliced images from photoshop

I've just begun a web design class and i assume that the instructor has us building sites this way cuz pretty much none of us have any idea how to use CSS (pretty much everyone in the class is brand new to web design, myself included). So i'm pretty much trying to build the entire thing/layout with a 945 pixel wide table (height to be 625 when everythings in place).
It isn't working though, once i start splitting and merging stuff gets really messed up, like the measurements of cells appear to almost randomly change and when i try to change them back it like, wont work.
i seriously dont know why this isnt working, google search has answered this question not at all. i just dont think i dont know how to use tables, which i need to do in order to complete his assignments.
plz halp meh T.T

Building a site out of sliced images from Photoshop is a poor way for your instructor to begin your web design/Dreamweaver learning.
Site layouts built this way are fragile and inflexible.
Once you start splitting and merging cells and moving cell borders around, you open a world of debugging and troubleshooting.
Much better to learn some elementary HTML and CSS first then learn Dreamweaver in a weekend. Dreamweaver makes so much more sense when you do.
As it is, you're trying to learn Dreamweaver, HTML (and a little CSS) simultaneously on the fly. Really inefficient way to do it.
Tables in web design are elastic by nature i.e. they collapse to fit snug against the content inside them.
Since you're already on this journey, remove your cell dimensions entirely and see what happens.

Embedded Images moved to the bottom of the page

Images on some pages are all being moved to the bottom of the page when displayed.
i.e. -
H
ello world. blah blah ...20 lines later ...blah.
The image is not in the top left corner of the text, but at the bottom under the text - - - but only on some pages.
See GemAndMineralInfo.com - the home page loads correctly, but the Gemstone page which uses the same basic format has all images moved to the bottom of the page in FireFox.
== This happened ==
Every time Firefox opened
== 5/1/2010 ==
== User Agent ==
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.21022; .NET CLR 3.5.30729; .NET CLR 3.0.30618)

Looks like a positioning issue caused by floating content.
If it is your own website then you can try to ask advice at the MozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
See http://forums.mozillazine.org/viewforum.php?f=25

Sliced images shift

Hi all,
I am new to dreamweaver, but have been reading books and
checking out online tutorials. I created a design in photoshop and
created layer based slices where appropriate then saved for the web
as html with images. I brought that html page into dreamweaver and
tried to link one of my buttons to another page. As soon as I link
it all of my sliced images are shifted leaving me little white gaps
between them. I have no clue whats causing this. Any suggestions
are greatly appreciated! I tried just creating a CSS template and
making links and they don't cause any shifting at all. So I am
obviously doing something incorrect with my PS template.
I noticed it show up when I preview with firefox and not
safari.
Thanks in advance.

The problem is that you used a graphics application to create
your html. The html created by Photoshop and other graphics apps is
fragile and subject to break anytime you make changes to it, or if
the user changes things like the text size. The real solution is to
use PS for images, and create your layout in Dreamweaver. Of
course, you will need to have an understanding of html, css and
page layout techniques.

Slicing images/Css

Hello,
I am working on a site with a number of large-ish photos (
http://www.rosieroo.com/design_one_home.html)
I was on this forum awhile back asking advice on slicing and
positioning with CSS and since then I have been working through
suggested tutorials. but I am still confused.
Most of the tutorials I have come acroos seem to be around
slicing/CSS image rollovers. I simply want the images to load
faster no need for roll over functionality.
I have also come across some sites saying slicing is a thing
of the past and no longer needed.
Can anyone offer advice on:
1) Does slicing increase the speed a page is loaded or does
it jus appear to load faster?
2) With regards to my link above would slicing help this page
load faster?
3) If slicing is reccomended would it work to simply:
slice images > export images only
>Put the images piece by piece into a div (this is what I
have done with the large images so i am assuming it would work with
mutiple smaller images? I have not used any positoning other than
inserting each piece -is that bad form?)
4) or would it be better to position the images with CSS? If
so can anyone reccomend simple tutorial that would help me achieve
a fast loading CSS positioned page
thank you,
Shontelle

Ok I understand now and thanks for the comments.
Cheers
Pablo
An Eye of Menorca
www.dellimages.com
"Michael Hager" <[email protected]> wrote in message
news:[email protected]...
> Guess you missed my point and after re-reading I see I
didn't really
> communicate it. My comment was only a response to your
comment that you
> couldn't imagine creating a site without image slicing.
I can't imagine
> creating a site that needs to use image slicing.
>
>
>
> I just take the approach of design simplicity. I don't
start with a big
> image as the basis for my site. It's just my style.
Maybe not yours.
> Sites don't need to be designed in such a way that they
require image
> slicing, but they can be and the Zen garden page is a
good example. I
> don't particularly care for it so I simply would avoid
that kind of
> design.
>
>
>
> It's not a matter of what is correct. It's a matter of
preference. You
> like to slice, I generally don't.
>
>
>
> I really do like your web site by the way and I'm sure I
could not
> recreate that without using sliced images. I probably
would have simply
> designed it in such a way that it didn't need them.
>
>
>
> By the way Pablo, your photographs are simply stunning.
Makes me want to
> visit Menorca. While we may not agree on web design, we
do have a love of
> photography in common.
>
>
>
> Michael Hager
>
> www,cmhager.com
>
>
>
> "Pablo" <[email protected]> wrote in
message
> news:[email protected]...
>> How would you create this
>>
http://www.csszengarden.com/?cssfile=/202/202.css&page=0
and thousands of
>> other great looking sites without slicing? I'm
baffled to say the least.
>>
>> --
>> Cheers
>>
>> Pablo
>> .................................
>> An Eye of Menorca
>> www.dellimages.com
>> .................................
>> "Pablo" <[email protected]> wrote in
message
>> news:[email protected]...
>>> So how do you build your interface? Do you
create loads of images? I
>>> create one and slice it, what do you do? How
would you create my site
>>> without using slices? This image for example:
>>>
>>>
http://www.dellimages.com/images/cssstuff/topheader.jpg
>>>
>>> Overflowing into the nav buttons
>>>
>>> Or the right side faux column?
>>>
>>> How?
>>>
>>>
>>>
>>> --
>>> Cheers
>>>
>>> Pablo
>>> .................................
>>> An Eye of Menorca
>>> www.dellimages.com
>>> .................................
>>> "Michael Hager" <[email protected]>
wrote in message
>>> news:[email protected]...
>>>>> What a load of tosh that is, where have
you seen this? I cannot for
>>>>> the life of me think of a way of
creating a web layout without having
>>>>> to slice images, unless you create
something that is nearly all text.
>>>>
>>>> Wow!... I can't think of a reason in the
world to create a web page
>>>> where you NEED to slice images.
>>>>
>>>>
>>>
>>>
>>
>>
>
>

How to get sliced image into my table ?

hi all :)
i have created a sliced image of my country and added
rollover with disjointed fx.
i have also exported the code which works fine by it self.
however when i try to get the code into a table cell on my
website it breaks the table.
so please can you tell me what i have to do inorder to make
it fit in please.
the site is www.365cityads
dot com.
here you can see a placeholder map of sweden thats were
i want the sliced map to be
you can view the working map here on
www.365cityads
dot com/xmap/swemap.html
here you can see that everything is working but breaks when
i try to get it to the index.php page.
please can anyone help me with this multiple nested table
situation
thanks
K

krughan wrote:
> Hi pixlor :)
> pixlor maybe im missing the bigger picture and there is
something i can learn
> or maybe its due to my understanding of english.
>
> after slicing up up sweden into 21 counties then
exporting it to html
> it worked fine no problems at all. (are you saying i
need not slicing ?)
>
> my problems became about when i tried to fit the map
into a table cell on my
> site (365cityadds.com where you can see the map working
now) that was the
> problem before as it was breaking up
> on every attempt.
>
> so i looked back on the orginal could working map code
and notice
> there were 3 parts to it 1st to go in the header 2nd to
go in the desired cell
> destination then the 3rd part was attached below
> (is it here that im doing worng ?)
>
> as i said the map is in the right place on the site and
seems to be doing what
> i wanted. however what i cant get over is the amount of
code generated by
> firefox which makes the map slow to load on initial
entry to the site (im
> using preload images too)
> (maybe im doing something wrong here. am i ?)
>
> pixlor, by no way am i being confrontational with you in
any sort
> of way. i assumed that you thought i was slicing the map
sections into 21
> matching table cells, how ever my assumption may and can
be totaly wrong.
>
> if you have time to look at the front page of the site
and see the
> usage of the map and its code via right click . just to
see if i used
> the software as intended. :) thanks.
>
> i have use FW a few time (im not an expert) to do
smaller stuff and
> i really thought that i was using it correctly but if
there are other
> way that can make the map speed, cut code and/or an
effecient
> way of doing the same thenig then i ask you please let
me know
> or provide me with a link to reference(s)
>
> thank you again for responding. your input means alot to
me
>
> Thanks
> k
>
>
>
>
This kind of complexity would be much better handled via
Flash, but that
may be outside your experience at this point.
The code you saw was NOT generated by Firefox; it was the
code generated
by Fireworks to pull off the effect you wanted. The lag you
experienced
was Firefox having to download the code to the user's browser
and then
Firefox having to parse and display all the elements
Generally, overlapping slices is not a good idea for many
reasons -
bloated code being one of them. Other issues that can occur
are
unreliable image display, multiple - unnecessary - sliced
images and
migraines from having to edit the code at the source level
<grin>.
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
http://www.communityMX.com/
CommunityMX - Free Resources:
http://www.communitymx.com/free.cfm
.:Adobe Community Expert for Fireworks:.
Adobe Community Expert
http://tinyurl.com/2a7dyp
See my work on Flickr
http://www.flickr.com/photos/jim_babbage/

Is it possible to use sliced images with fluid grids CS6?

I have 2 sliced images that I want to use in my page. The site has been designed with fluid grids CS6. As soon as the page is made smaller 1 of the images shrinks while the other remains the same size. Is there any way to make this work or is it just not possible using fluid grids?

There's nothing on this page.
http://www.lavishvegas.com/las_vegas_barsx.html
If you want images to rescale to device width, the parent container must be fluid (% width).
The images need a CSS max-width of 100%. DW does this for you when you create a Fluid Grid layout.
Also, the native image must be inserted into the HTML foreground with no stated height or width attributes. If you set the height/width, it won't rescale to viewport width.
Working example:
http://alt-web.com/FluidGrid/Fluid2.html
Nancy O.

Return sliced image to original

Is it possible to take a sliced image and put it back to just
one image? The image was sliced in Photoshop and I use
Fireworks...when we add to a page on the site the proportions in
the sliced cells don't always work the way I want them too...so I
would like to recreate the background image as a whole. Any ideas?
Thank you in advance
Kaz

Mama-Kaz wrote:
> Is it possible to take a sliced image and put it back to
just one image? The
> image was sliced in Photoshop and I use Fireworks...when
we add to a page on
> the site the proportions in the sliced cells don't
always work the way I want
> them too...so I would like to recreate the background
image as a whole. Any
> ideas?
Make a screen shot of it and use the screen shot.
Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
http://www.adobe.com/communities/experts/

Problems with sliced images in dreamweaver

Hi, when i uploaded a template from photoshop into dreamweaver and typed in "index" in the link box, the entire page expands a little with white spaces in between all sliced images. How do i fix it?

You may want to have a read of these two articles from the DW FAQ:
Posting code in this forum
How to get help quickly
From the image it looks like the page is breaking due to very poorly written html. As someone pointed out, do not use an image editor to write the code for your page. Slice up the PS comp and build the page in Dreamweaver.
If you are new to Dreamweaver, it may be worthwhile to take a tour of the following tutorials:
TAKING FIREWORKS COMP TO DREAMWEAVER:
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html

How to remove white space between sliced images ? Please help.

I've created a site by exporting sliced images from Photoshop into Dreamweaver. Some images have a thin white line between them that I can't get rid of. I think it's because they are in a table format. There is no cell padding. Can you help me remove them? (see code below) The images I'm talking about are the horizontal buttons used in the navigation bar. Thank you in advance!
Here is a link to the site: Site Preview
--------------CODE---------------
<table width="1001" height="751" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="17">
        <img src="../Images/Optimized-Header.gif" width="1002" height="188" alt="logo header"></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="194" alt=""></td>
      </tr>
    <tr>
      <td rowspan="2">
        <img src="../images/white-space-top-left.gif" width="44" height="45" alt=""></td>
      <td colspan="16">
        <img src="../images/Creekside-Layout-Final_03.gif" width="956" height="1" alt=""></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="1" alt=""></td>
      </tr>
    <tr>
      <td colspan="3"><a href="../creekside_homepage.html"><img src="../images/about-btn1.gif" width="157" height="44" alt="about"></a></td>
      <td colspan="3"><a href="../steam_and_sauna_page.html"><img src="../images/steam-and-sauna-btn2.gif" width="233" height="44" alt="steam and sauna"></a></td>
      <td colspan="3"><a href="../creekside_hot_tubs_page.html"><img src="../images/hot-tubs-btn3.gif" width="162" height="44" alt="hot tubs"></a></td>
      <td colspan="3"><a href="../creekside_rentals_page2.html"><img src="../images/rentnals-btn4.gif" width="151" height="44" alt="rentals"></a></td>
      <td colspan="3"><a href="../creekside_contact_page.html"><img src="../images/contact-us-btn.gif" width="211" height="44" alt="contact us"></a></td>
      <td>
        <img src="../images/white-space-top-right.gif" width="42" height="44" alt=""></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="44" alt=""></td>
      </tr>
    <tr>

Your slices appear to be a little bit off.
Use Photoshop for images only. Use DW to build your web pages. Exporting HTML from graphics apps is not going to produce good cross-browser results. It's really only for quick prototypes; not real web sites.
See this 3 part tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS Layout in DW
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Sliced images problem

I'm having a strange problem with some sliced images I
created and exported from FW to DW. Now, I am not seeing this
problem in any of my browsers, but my client is, on one of her
machines (IE7.0, WInXP). My IE7 displays this fine, so I am at a
loss. Wondering if someone could peak at the code and see if they
see anything? And please let me know if you can see the problem,
and what browser/platform combo you are on? I'd be so grateful.
The problem is in three areas:
-Across all pages in the top navigation :
http://www.thelovesack.com/
-On the gallery page main image (
http://www.thelovesack.com/gallery/index.htm)
-An extra page, in the background image:
http://www.thelovesack.com/beyond/index.htm
The problem she is seeing is thin lines that go along where
the image slices are. It's invisible to me, but she was able to
send me screenshots. What can I do to eliminate these thin
lines??????? THANKS IN ADVANCE.

Sounds like your client has image zooming on in IE7. I don't
see the
streaks in normal view but I do see them when images are
zoomed up above
100%. My default browser is FF 1.5 with image zoom add-on, XP
Home Ed. with
SP2.
--Nancy
"webdesigner41" <[email protected]> wrote in
message
news:f2d6fl$bt8$[email protected]..
> I'm having a strange problem with some sliced images I
created and
exported
> from FW to DW. Now, I am not seeing this problem in any
of my browsers,
but my
> client is, on one of her machines (IE7.0, WInXP). My IE7
displays this
fine, so
> I am at a loss. Wondering if someone could peak at the
code and see if
they see
> anything? And please let me know if you can see the
problem, and what
> browser/platform combo you are on? I'd be so grateful.
>
> The problem is in three areas:
> -Across all pages in the top navigation :
http://www.thelovesack.com/
> -On the gallery page main image
http://www.thelovesack.com/gallery/index.htm)
> -An extra page, in the background image:
>
http://www.thelovesack.com/beyond/index.htm
>
> The problem she is seeing is thin lines that go along
where the image
slices
> are. It's invisible to me, but she was able to send me
screenshots. What
can I
> do to eliminate these thin lines??????? THANKS IN
ADVANCE.
>

Why is the image moving when I print on 300gsm card, but is fine on 160gsm paper?

Hello,
I am printing a double sided invitation for a customer. I am not sure what it was originally set in as I have only been given the pdf up to now. The invite has a thin black line around the writing.
I am trying to put a proof together so they can see it on the colour they've chosen, when I cut it out (using their crop marks) on 160gsm everything lines up nicely, however, when I cut it out from 300gsm I end up cutting either the top or the bottom off as the image has moved. I am sure this is down to the weight of the card but how do I (or the customer) counteract this and what is the term for the issue? (If there is one)
Thanks
Louise

Can you duplex the 300 gsm card inside the machine?
Or are you forced to print one side and then run the cardstock through the machine 2nd time to print the other side?
Double sided heavier cardstock is more problematic than paper and this issue is a common occurence.
Are you using the bypass tray or (if your printer allows it from a drawer?. usually there are limits to the stocks that can be run from drawers on smaller, less expensive machines)
It may help if you make sure the correct media type/weight and drawer/bypass tray is selected correctly in your print dialog/print setup.
There may be more than 1 place to select these parameters; check them all
Also check the media/weight setting on the printer itself for the bypass or drawer you are using.
There may be no real solution to achieving perfect registration from front to back on all type of media in your machine.
Good Luck!
Just realized you are printing from PDF. Make sure that Actual Size in selected each time in the print dialog when printing both sides. sometimes it defaults to Fit when you aren't paying attention and this can cause problems.
You wrote: The invite has a thin black line around the writing.
Do you mean they placed a stroked box around the edge of the invitation? This is a no-no. The crop marks should be adequate. A thin stroked box at the trim size will be an invitation to disaster when cutting a stack of printed items, even single sided would be hell, Double sided, forget it. Have them remove the box and just have crop marks. When cutting you will obviously cut off some of the marks which makes it difficult to determine the later cuts. This is when you get out a ruler to determine the settings you need to make for these cuts using your cutter.

Sliced Images are Broken after Converting HTML into a PDF

I am trying to create a PDF of a webpage and after Acrobat converts it, the page is broken apart in multiple pieces. I noticed that this is happening to images that are sliced. Does anyone know how to prevent this from happening?
Thanks!

Just to clarify, I only want a PDF image of the web page -no functionality of it. The equivalent of a "print-screen" of the page without the IE window/toolbar etc. I need to have it in PDF format for printing purposes.
ASP code is also appearing in the PDF and I don't want this to occur.
Ver: Adobe Acrobat Professional
OS: WinXP Professional

Images moved by LR4

I have my images saved to folders based on image content. I have a folder that I have worked with in LR3. After intalling LR4, I imported the images in that folder into LR4. I could see and work on these images, however the images have been moved to new folders based on the original image exposure date.
When I attempt to view these images in LR3, they are missing from the original folder. Using a back up I was able to copy the images back into the original folder where they are visble in LR3. The moved images are still visible in LR4, but at the location they were moved to. What happened?

At a guess, when you imported into LR4b you used the "Move" import option, and in the Destination panel you had one of the "Organise by Date" options selected.
The advice given by Adobe and others is to work on a copy of your LR3 images.....not the originals.

Open html of sliced images in template

Hi,
I have a pretty ok site with frames and I have finaly decided
to change it to a noframe site even though it works great. Everyone
is telling me to !
I have created a template from the selection in CS4.
In photoshop I sliced an image that I want as menu bar but
how do I open the "save for web" html that contains all the images?
With a frame I just open in frame but I just cannot figure it
out.
Any help is highly appreciated !
BR,
Peter

Or I am not the only one in the world that talks to thenselves.
That's not necessarily bad - unless you carry on a three-way conversation. Then its time to consider the white coat with the cuffs of the sleeves sowed in the back.
NOTE: This is meant as a Joke. (although it is true I do talk to myself from time to time. Its called thinking out loud.)

Sliced images moving in DW

Similar Messages

Maybe you are looking for