Flexi CSS Layouts for Dreamweaver Forum


box Flexi CSS Layouts for Dreamweaver
Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Find out more about Flexi CSS Layouts for Dreamweaver

Thread: working with page layout HELP!!!

title left
User Details
message
title right
anne

post date:
2010-09-09 10:30:06
OK, so I got this flexi CSS extension, and tried to work on a website with it. I chose the web2 layout and created a page. Everything OK so far, besides the bug with the background image that I can't still figure it out. When I insert the background image in Dreamweaver and then I go back to tweak the background in flexi CSS interface the background image dissapears and then I have to reinsert it in DW every time; but the major problem I am having is that I decided to have another page done, based on the web2 layout and insert a picture gallery. After I tweaked the layout page in flexi CSS interface, I had to delete the showcase, etc. I inserted the page section layout, I saved the template as another file name, when I updated the file it updated both pages i.e. the index page, and the gallery page. So, I screwed up the entire layout for the index page as well. So my question is, what did I do wrong? What is the procedure to create another page based on the page you designed, without updating all the pages.
Andrei Rinciog [Extend Studio]

post date:
2010-09-09 10:45:33
Hello Anne,

From what I understand you set the background image on the page and then insert a full page layout. The full page layout will overwrite some of the CSS settings on the page. Probably this is what happens. We will make some tests and see if we can find anything wrong with this process.

The best thing to do if you want to use pages with the same layout is to use Dreamweaver templates functionality. You need to save a page as a dwt and then use "create page from template" to create additional pages.

Another way to do this would be to save the layout in the gallery first and then insert it in another page.

Either way, having two pages with exactly the same layout is not a good idea if you don't want to edit both layouts in the same time.

Regards,
Andrei Rinciog
anne

post date:
2010-09-09 10:52:12
Thank you for your reply. I saved the page as a layout in the gallery but I do not see it anywhere when I open the templates gallery. Where are they supposed to be? I will try the DW template and see how that is going. I think you should have some documentation pertaining to this procedure so we know how to proceed with this.
anne

post date:
2010-09-09 10:55:16
Just to clarify, I did not set a background image to the page. I used the web2 template with some changes, i.e the showcase size smaller, etc. Then I wanted to do another page by using only the header and then inserting some image galleries. That is when I messed up the index page even though I had saved the templates as 2 different names... both of them got updated. I do not know where my templates are anyway because I don't seem to find how I can open my own templates that I saved.
anne

post date:
2010-09-09 11:54:04
I tried to follow your advice to create the DW template from the web2 layout and then save the file from there. Unfortunately the web 2 template did not open anylonger, and I tried to uninstall and reinstall the extension again. Did not work either, keeps freezing up when I try to reinstall the extension. What should I do now?
Andrei Rinciog [Extend Studio]

post date:
2010-09-09 16:24:19
Hello again,

I fell a little behind with the replies so I will try to answer each one of your question now.

"I saved the page as a layout in the gallery but I do not see it anywhere when I open the templates gallery. Where are they supposed to be?"
I think that you need to increase the height of the interface. There should be some additional user categories beneath the default ones. Click and drag the bottom border of the window to increase its height.

"That is when I messed up the index page even though I had saved the templates as 2 different names."
From your earlier explanations you saved the pages with different names but the page layout on both of them is the same. That is why when you edit it in one part it gets modified on the other page as well.

"Unfortunately the web 2 template did not open anylonger, and I tried to uninstall and reinstall the extension again."
You can't open the template from the gallery or you can't open the dwt file? If you try to insert the layout from the gallery in page it works?

"Did not work either, keeps freezing up when I try to reinstall the extension. "
Are you saying the Extension Manager freezes when you try to install the extension or Dreamweaver freezes when you try to open the template?

Regards,
Andrei Rinciog


Andrei Rinciog [Extend Studio]

post date:
2010-09-10 07:22:54

Hello,

So, this is what you need to do to use a layout as a template for multiple pages from a website.

1. First of all, create an empty template file.

2. Insert the layout you want on the dwt file. Better to keep the layout as basic as possible. Just the main structure needs to be defined here. Specific containers will be added in the pages where they are needed.

3. Now you can start creating pages based on that template. Go to 'File -> New -> Page from template', select the template page

Before you create the page, you have two options, 'Update page when template changes' or don't update.

Don't check the update box if you want the pages to be independent from now on so you can modify them anyway you want then leave that box unchecked. You don't want to update the page when the template changes. I don't recommend this option as it kind of disables all the features templates provide.

If you select to update page when template changes it will give you much more control over the template and what each page can modify from it. You have to go back to the template and create editable regions. Only these regions can be modified in child pages of the templates.

Best place to put editable regions is inside the comments added by our extensions. So where there is a comment " <!-- column_1 Content Starts Here -->" place and editable region after it. If you need to customize to customize the layout a little more, add some more divs, use section layouts.

So, to summarize:
- create a dwt file with a basic layout;
- use the template to create additional pages that will update when you make changes to the template;
- create section layouts inside editable regions of the template;

Now, each page will have its own design of the editable regions using section layouts. And if you want to make modifications to the big layout, open the dwt file and edit it. When you save it will automatically update the pages without deleting the editable regions.

Here is some more help with Dreamweaver templates: http://www.adobemediaplayer.com/devnet/dreamweaver/articles/ora_dw_cs4_mm/dw_cs4_mm_ch19.pdf

We can also make a desktop connection if you want and I can show you how to build this.

Regards,
Andrei Rinciog
anne

post date:
2010-09-10 12:46:04
Thank You for your reply Andrei,

I followed your instructions and I have created :

1. a new template file in DW & saved it as test template.dwt
2. I inserted the layout from the css layouts
3. I created a new page from the template in DW and did not have the update template option checked . My template did not have any editable regions at that point so it shouldn't have been modified at all.
4. I saved the new page as test1.html. and modified the page.
5. Both files changed, the template file(test template.dwt) and the test1.html. So it is the same thing. What am I doing wrong?

Regards, Anne
Cristian Dorobantescu [Extend Studio]

post date:
2010-09-10 13:23:20
Hi Anne,

My feeling is that there is something very minor missing from the workflow. Let's say you want to create a page called Home and a page called Articles. Create the pages in Dw: home.html and articles.html.

Open the home.html. Open the Flexi CSS interface and make all the changes you need. Save home.html

Open articles.html and insert a new layout from the Flexi CSS interface. Make the changes you need and save the page.

So far so good? What do you need to do next? If you need to change the home.html, then you should open that page and click on edit layout. Let me know so I could guide you further.

PS: if you make changes to the DIVs directly in Dreamweaver, (adding backgrounds for example) these will be overwritten by the extension.
PS2: do not save home.html as articles.html The pages should be created individually.

Cristian
anne

post date:
2010-09-10 13:45:27
Hi Cristian,

What I want to do is this. I have a home.html page that I have created by using the web2 layout that I have changed in your interface and saved it as home.html. Now I want to add another page say articles.html that has the same header and footer but instead of the content I want to insert a picture gallery instead. What is the workflow? Because when I tried to do this the home.html changed because both of them were based on the same layout. Thank You
Cristian Dorobantescu [Extend Studio]

post date:
2010-09-12 01:43:26
Hi Anne,

Ok, when you finish working on home.html and having the layout inserted in the page, click on edit to open the flexi css layouts interface, then there is a button "save in gallery" at the bottom of the interface like in this image:
http://www.extendstudio.com/images/flexi-css-layouts/screenshot/Simple-Structure.PNG

This should save the layout as a template in the template gallery.

Open the articles.html page, then click on "Insert layout from template gallery" and at the bottom of the layouts list on the left side, you should have a section "my layouts" like in this screenshot:
http://www.extendstudio.com/images/flexi-css-layouts/screenshot/Web20-Layouts.PNG

Choose the layout you just saved, then press the blue button "customize". When you insert this layout in the articles.html page, both pages should work independently.

Let me know if this procedure works. If it doesn't, it means we need to have a look at what's happening exactly on your machine.

Thanks,
cristian
Cristian Dorobantescu [Extend Studio]

post date:
2010-09-13 11:30:35
Hi Anne,

Here is a written tutorial on how to create multiple pages for a site using the Flexi CSS layouts:

http://www.extendstudio.com/tableless-css-layouts-for-dreamweaver/create-multiple-Flexi-CSS-pages.html

Cristian
anne

post date:
2010-09-13 11:44:31
Thank You Cristian,

I was just about to follow your previous response. I will follow the tutorial instead and if I have any problems I will let you know. Thank You again. Anne
anne

post date:
2010-09-13 12:19:43
OK I got it to work... the tutorial was very helpful. My only question is after I create additional pages i.e. articles.html and I want to insert a section layout from the template gallery for instance the picture gallery how would I do that. I understand how to change the layout, but what if I want to insert one that is already done, like the pic gallery? Thank You, Anne.
Cristian Dorobantescu [Extend Studio]

post date:
2010-09-13 12:38:36
Hi Anne,

You can insert in home.html a picture gallery layout. You can customize it there. If you also need a gallery in the articles.html, then you open articles.html and there you insert the gallery template.
anne

post date:
2010-09-13 12:47:23
Hi Cristian,

K thank you I finally got it to work. Great!