Columns advice needed.

[rudy_11]

I created a header banner which is 1150pix wide. I enter it as 100% wide in html. I have 17 link buttons in 2 rows under this (consisting of contact, home, and all product categories). i then created an editable region over the full width of screen under these) and I have saved this as my template. should my Shop name banner be placed inside the header tags?

My problem is, I want to enter 4 columns wide x 6 rows deep, to insert images & text in, for template page 1, but when I drag the scrubber to the left, to see how my small screen will look, my 17 buttons have become a row down the left and my images have all gone down under that again.

what am i doing wrong and where do i go from here??

My images are 140 pix wide for 1 template page,   200pix wide for 2nd template page and     350pix wide for the 3rd template page.

How many columns wide should I be placing on my page for these sizes, do you think???

All help and guidance greatly appreciated.

Thank you.

[BenPleysier]

From what I read, this is one of the first projects that you are working in which case I urge you to have a look at

• Responsive web design basics |
• Create a responsive menu |

[Nancy OShea · Accepted solution]

A template is a common layout for your entire website.  It's not something you build on a page-by-page basis because that defeats the whole point of using a template.

Start with a responsive layout.

Phase 1 - prototyping your sitewide Template:  Even for small projects this represents about 80% of your planning.  Consider all the common elements in your website.  For an average project you will probably need:

• Links to sitewide CSS files,
• Links to sitewide scripts,
• Layout
• Logo or brand,
• Global header,
• Global Navigation,
• Ads,
• Global Footer.

You might need 4 column layouts on some pages and only 1 or 2 columns on other pages.  So plan accordingly.  Remember, you're building a sitewide template here.

Once your prototype page is perfect and everything validates, then you saveAs Template.dwt and add some Editable and Optional Editable Regions to your layout for page specific content. 

Save & close Template.

Phase 2 - the child pages:

Go to File > New > Site templates.  Choose a template from 3rd panel and hit Create button.

This new page is a child page spawned from your template.  The only areas that are not grayed out are your editable & optional editable regions.  Go to File > SaveAs > index.html.   Repeat for other site pages.

Phase 3 - sitewide navigation links.

Open your main Template.dwt file and add links.  Save and populate changes to child pages.   Check everything in browsers.  Upload all child pages to server.

Repeat Phase 3 whenever you need to make changes to your main Template.dwt

Good luck!

Nancy