Has anyone been able to apply the CS6 Fluid Layout to existing Dreamweaver site pages? I have about 1000 pages, all template-based that I wojld love to convert to Fluid Layout if there is a reasonably efficient way to do it. Any info or a link to a tutorial on this would be appreciated. I am going crosseyed right now from all of the searching!
When you say "C6 Fluid Layout" are you referring to the Fluid Grid layout method in C6? If so, then I think you would just have to create a new page using that Fluid grid, migrate your design elements into that new page, and then save that new page as your base template. In other words, I don't think there's an easy way to adapt a currently built page to conform to the grid without just recreating the page within the grid.
DISCLAIMER - I have not used the Fluid Grid feature *at all*, but I am familiar with its operation/method.
Yes, I just got CS6 yesterday. Incidentally, www.newwoodworker.com is the site I am talking about. I had a feeling that building the new template was going to be the answer but you guys have amazed me with simple work arounds in the past so I had to ask.
All the tempates used across the site are essentially the same and all have one centra contrent area (one thing I did get right) so I hope I can build the new template, select the contrnt only from the contrnt hlding div on teh old page and drop it on the iupdated version. I used to know how to select that content area alone but if anyone knows I would appreciate the keystrokes.
I don't have CS6, so I don't know what the Fluid Grid Layout is that Murray's talking about. But if what you are trying to do is to create pages that fill the browser window, that's easy.
And I think you don't have to alter your template(s) -- it can be done in your style sheet.
Almost all web pages have an outer "wrapper" that everything else (save the body) lives in. So, for a fixed-width website, you do the following:
#wrapper {
margin: 0 auto; /* this centers your main content in the web page */
width: 980px; /* This is the maximum width of your website in pixel units. */
}
For a fluid width, you do the following:
#wrapper {
margin: 0 auto; /* this centers your main content in the web page */
width: 100%; /* this sets the width to the viewport */
}
Now, one thing I do like to do is specify a minimum width, which I do in the body:
body {
min-width: 760px;
}
I also like the CSS Tricks example, which specifies minimums and maximums, giving you "fluidity" up to a point.
Before you tackle Fluid Grid Layouts, get familiar with CSS Media Queries.
http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt3.html
Fluid Grid Layouts in CS6 are a nice, time saving feature. But they're not perfect. You're going to see code like this which will cause browser rounding problems if you don't tweak it manually.
| margin-left: 3.4482%; | |
| width: 31.0344%; |
Be patient. Sometimes it takes repeated efforts to get the right layouts for Phone, Tablet and Desktop.
Finally, use Fluid Grid.css for Layout only. Don't style these divisions. Style your content instead.
Good luck,
Nancy O.
Thanks! I found out about tweaking the widths and have been doing that, way more reliable. I also heard early on about using a separate css for the content so am using my currnet css sheet for all of the text and such.
One thing I am still at a loss, and it's not really about Dreamweaver is that when i wnat to pull all of my content out of a single frame on my old pages, I used to be able to just put the cursor in the page and do some cntrl-letter or something that someone here told me about years ago and it grabbed all of the content in the frame in one shot so I could drop it in the new page. that would make all this way easier once I get the fluid template working and start changing out my 1000 or so pages...... any ideas on that keystroke set to grab the content from one frame/cell on the previouse Dreamweaver pages woulld make me a happy camper...!
The cntrl-A gets almost everything but it is leaving images behind. I am sure someone (probably on this forum) a long time ago told me how to pluck everything from a cell or frame (that holds the content on my site pages) so I could just drop that onto the new page. I have around 1000 pages to do this with so learning to reduce the back and forth is a BIG deal in this effort. I did somehting similar several years ago and this keystroke magic was offered and worked great. But, now I forgot!
Ctrl-A should not leave the images behind. According to my tests, when in a <div>, Ctrl-A will select EVERYTHING in the div exclusive of the <div></div>. Unfortunately, when in a table cell, Ctrl-A will select everything in the cell INCLUDING the <td></td> tags. Is this what you are seeing?
I had been putting the images in two cell tables withint the content so I coujld include captions that were set off from the rest of the text. I tried the cntrl-a a coupole timess today while working on the template and it brought everything but the images, including the two-cell table where the image was.I haven't tried going in and copying everything between the div tags for the editable content section. This is why i am trying so hard to remember how I did it before as it was so simple. Of course, not reemmbering makes it REALLY complicated now!
I don't suppose there is any way that I can assign the new template to the old pages and have the content from the editiable regiion magically show up in the editable content place on the new template? That sounds like a never going to happen to me but I'd really hate kmyself if I found out later that I missed the easy way....
North America
Europe, Middle East and Africa
Asia Pacific