Skip navigation
JoyceOdell
Currently Being Moderated

One Site. 5 different-width Pages. How?

Mar 24, 2013 1:33 PM

Okay. I'm rebuilding an old GoLive site in Dreamweaver CS6. It's a good-sized site (will be something in the neighborhood of 250 pages when complete). The problem is that some of the areas showcase different things. Consequently, the pages need to be different widths.

 

It's easy enough to edit the width of any single page. But that edits the CSS rules that affect the width of *all* pages. Permanently. Across the whole site. I've tried detaching a child page from the template and duplicating those rules and giving them new names, and edtiting them. But that doesn't do it. That has no effect, because the page was built to the old rule, and won't recognize the new ones.

 

I've tried opening a new blank page, with its own style sheet, and renaming its rules, intending to modify them -- and then move those into the external styles sheet with the others. But they don't accept the renaming, and the page elements flop all over the place when renamed, no longer recognizing the instructions.

 

Am I going to have to build a duplicate site for each page width and link files across 4-5 different sites, and upload all of these different sites to the same server in order to get what I need? Or is there some way to acomplish what was trivially easy (if tedious) to do in GoLive?

 
Replies
  • Currently Being Moderated
    Mar 24, 2013 1:43 PM   in reply to JoyceOdell

    5 different widths is kind of extreme and aesthetically distracting.

     

    To answer your question, use external style sheets for all your site wide styles.

    Use embedded CSS inside <style> tags in your HTML document for page specific styles.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 24, 2013 1:44 PM   in reply to JoyceOdell

    It's easy enough to edit the width of any single page. But that edits the CSS rules that affect the width of *all* pages. Permanently. Across the whole site.

     

    Not necessarily. It's quite simple to put an embedded stylesheet into the head of any template controlled page such that it sets a unique style group for that particular page. The trick would be to make sure that the editable region falls BELOW any links to external stylsheets so that your page-specific CSS will override the linked styles.

     

    And you NEVER want to detach a page from a template in a template controlled site. Never. If you need to do something you modify the template so that you can do that.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 5:41 AM   in reply to JoyceOdell

    Or am I overthinking this? Can I just duplicate the existing style sheet, rename it, edit the page widths on it and build a new template from it that lives in the same templates folder as the others?

     

    How do you make sure that you are building the new page from the correct style sheet?

     

    1. Yes you are overthinking it. Your embedded stylesheet may only need a single rule, e.g.,

     

    <!-- InstanceBeginEditable name="head" -->

    <style type="text/css">

    body {

         width:820px;

    }

    </style>

    <!-- InstanceEnd -->

     

    When you insert a new rule on the page, just select "This Document Only".

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Mar 25, 2013 7:30 AM   in reply to MurraySummers

    Let me stress what Murray stated in his first post. Any embedded style must be below your linked style sheet. A web browser will render a page from top to bottom, so it's read from top to bottom, therefore any width changes embeded will need to below any css that is above it for the change to work.

     

    Jim

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 9:14 AM   in reply to JoyceOdell

    Linking to external style sheets in DW.

    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:02 AM   in reply to JoyceOdell

     

    Given that different parts of the site have different menus and nav bars too, it begins to look like the whole base template needs to be an editable region. Or just have a fistful of different templates.

     

    YIKES!  That totally defeats the whole principle behind templates.  Maybe you should be looking at Server-Side Includes.

    http://www.smartwebby.com/web_site_design/server_side_includes.asp

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:35 AM   in reply to JoyceOdell

    There's still no reason to use more than one template for all of these pages, given the power and control you can exercise on your layout with CSS. You can handle the differing navigation in several ways by putting the navigation code into an editable region which would allow you to manage that navigation with server-side includes or with DW's Library items, either of which would continue the theme of 'one file, one change, many propagations'.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:57 AM   in reply to JoyceOdell

    I am innured to tedium.

     

    Squared!

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 11:27 AM   in reply to JoyceOdell

    I'm not a huge fan of library items.  They are proprietary to DW & limited to content in the <body> tags.  Also, you must republish every page that uses them.

     

    Server-side includes are flexible, non-proprietary so you can use them with any HTML editor. And you only need to upload one file.  All the magic is performed by the server.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 12:43 PM   in reply to JoyceOdell

    Making a server-side include or a Library item from a Spry menu is tricky, since the parent page must contain the Spry CSS and js dependent files already linked.

     

    Library items only function within DW and have no purpose on the server, so leave them in your local site. While I agree with Nancy's comments about Library items, they have one great convenience - you don't need to rename your files to use them. Using SSI will require that *.htm(l) files be renamed to *.shtm(l) UNLESS one of the following applies:

     

    1. You can configure your server to parse ALL file extensions, not just dynamic scripting ones (e.g., *.php, *.asp, etc.)

    2. You can use either ISAPI REWRITE or HTACCESS to redirect old filenames to new ones

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 4:53 AM   in reply to JoyceOdell

    *sigh* Well it was a nice idea, but if the menus have to already have everything linked before I can build the SSI it could get dicy. If anything went wrong I'd have to try to add or rebuild the menus to every one of the pages after the fact.

     

    I'm not sure what you mean by this. SSI is the tool of choice for applications such as you describe. What kinds of 'things going wrong' are you anticipating here?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 12:02 PM   in reply to JoyceOdell

    Let's say you have 2 different menus you want to use in your site.  Put them inside an Includes folder in your site folder: 

     

    Includes

         Menu1.html

         Menu2.html

     

    Menu1.html contains only the relevant code for that menu, sort of like this (I'm leaving off all the Spry stuff to make this as simple as possible to understand).

              <ul>

                   <li><a href="some_link.shtml">Link 1</a></li>

                   <li><a href="some_link.shtml">Link 2</a></li>

                   <li><a href="some_link.shtml">Link 3</a></li>

                   <li><a href="some_link.shtml">Link 4</a></li>

              </ul>

     

    Menu2.html contains this:

              <ul>

                   <li><a href="some_link.shtml">Link 5</a></li>

                   <li><a href="some_link.shtml">Link 6</a></li>

                   <li><a href="some_link.shtml">Link 7</a></li>

                   <li><a href="some_link.shtml">Link 8</a></li>

              </ul>

     

    Where you want Menu1.html to appear in your Template.dwt, simply add an include statement like this.

     

         <!--#include virtual="../Includes/Menu1.html" -->

     

    Where you want Menu2.html to appear in a child page created from a template, simply add an include statement like this:

     

        <!--#include virtual="Includes/Menu2.html" -->

     

    This assumes all menus  share the same CSS & JavaScript code referenced inside the parent template.

     

    Actually, very simple when you think about it...

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 12:30 PM   in reply to Nancy O.

    Your links in Menu1.html and Menu2.html *should* be root relative, e.g.,

     

    <li><a href="/some_link.shtml">Link 1</a></li>

     

    That way they will work when the containing page is located anywhere in the site.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 27, 2013 12:52 PM   in reply to MurraySummers

    That's a good point if you have pages in sub-folders.

     

    SITENAME

         index.shtml

         -Includes

              Menu1.html

              Menu2.html

         -Sub-folder1

                page1.shtml

         -Sub-folder2

                page2.shtml       

         -Templates

              main.dwt

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 28, 2013 7:45 AM   in reply to JoyceOdell

    As mentioned earlier, the new page also needs to have the links in the head to the Spry support files, same as the original page (i.e., the Spry js and css file). Without them, your menus turn into text exactly as you describe.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2013 5:07 AM   in reply to JoyceOdell

    Shift-enter?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2013 2:30 PM   in reply to JoyceOdell

    Just remember that line breaks are absolute. If someone changes the text size in their browser, your 'even out' line break could make the content look even worse.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 31, 2013 5:05 AM   in reply to JoyceOdell

    Let's see your attempt. You should know by now that there is more than one way to skin these cats, and that the answer is always in the code.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 31, 2013 12:04 PM   in reply to JoyceOdell

    You can insert screenshots into the web forum using the Camera icon.  However, screenshots don't show us your underlying code which may be the real culprit here.

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points