Information Resources & Technology (IRT)

Work with Special Case Designs

Most pages in the Stanford Medicine format have intrinsic margins for the MainColumn editable area, and have very simple layouts. You may encounter pages, such as site home pages, with more elaborate layouts. Editing existing elements in place is fairly straightforward, but creating and changing these layouts should be considered advanced activities. Authors experienced with CSS and Dreamweaver should have no trouble finding and applying our local styles. Less experienced authors should proceed cautiously, with backups and lots of testing on alt versions of pages. Please contact Web Help if you want help setting up or repairing layouts or just want us to take a look at your designs.

Watch Demo

Step 1: Create an "alt" Home from 3-column stationery

  1. In Dreamweaver, find and open the root/3col_stationery.html file for your site (for live sites, contact Web Help if stationery files are missing)
  2. Use the menu sequence File > Save As...
  3. Name the file "index-alt.html" and save it at the top, or "root" level of your site
  4. Update the browser title to reflect the name of the site (remove "PageNameHere - ")
  5. Save the file, then find the Site menu and Put
  6. View the new page in your browser by typing "index-alt.html" after the trailing slash of your home URL and pressing Enter
  7. Find and open the current root "index.html" (based on the standard 2-column stationery) file and compare it to "index-alt.html"; note how "index.html" has an intrinsic margin between the main body text and the rule boxes that make up the page; "index-alt.html" has some elements that touch the margin, and some that don't
Watch Demo

Step 2: Examine div containers

  1. Sepcial Case layouts use a table that fills the MainColumn editable area, the cells of which make up the ruled text columns of the page, plus some special CSS classes
  2. Place your cursor within the first column-top label (all caps LOREM IPSUM)
  3. Look for the tag selector at the bottom of the document window (you may also want to view Split code and preview mode)
    • Find and click once on "div.boxlabel"
    • This is a div with the class "boxlabel;" it is automatically capitalized and has an intrinsic bottom rule
    • Note how this div fills the table cell from rule to rule
  4. On the Properties Inspector, click the <td> tag selector to the left of the div
    • Note the selection rule around the table data <td> cell and all the content it contains
  5. Place your cursor anywhere in the block of text below the boxlabel element
  6. Look for the tag selector at the bottom of the document window
    • Find and click once on "div.margins_othercontent"
    • This is a div with the class "margins_othercontent;" it creates the margin between the text and the box rules of the table
  7. All of your text content should be within one or the other of these two types of containers; text should never touch the box rules of the page
  8. Click once on the image at the top of the page to select it
  9. Examine the Tag Selector and the Properties Inspector
    • No container div is applied here - there may be scenarios where a container div is needed, but this isn't one of them
    • Images must be within a certain width range to fit; in this case, the image size is fixed at 555 pixels wide
    • Note V Space and H Space in the Properties Inspector; this creates the 5 pixel buffer needed between the image and the box rules instead of a container div
Watch Demo

Step 3: Edit within the container

  1. Start by selecting text within the existing containers and editing it
    • Carefully select the text of the first, left box label and type in "About Us"; note that it shows as all-caps, regardless of what we type
  2. Let's create a second block of text for the larger, left text column, under the same heading
    1. Much of the art of working with these layouts lays in how you select things and place your cursor within the layout
      • Double-click on the first word of the text under the boxlabel
      • Hold the shift key, and carefully click well to the right of the bottom-most content (the "More" link)
    2. Use the menu Edit > Copy
    3. Click well below the "More" link, then use the menu File > Paste
      • Note how the text is touching the outer rule box; this is not good
      • Use the menu Edit > Undo
    4. To make sure your cursor is below the content, but still within the container:
      • Place your cursor anywhere in the "More" link
      • Find and click the <p> Tag Selector at the bottom of the document window, to select the parent block HTML element
      • Carefully click once on the arrow-right key
    5. Use the menu Edit > Paste to paste the new paragraph and link
  3. See what happens when you copy and paste a styled element
    1. Select any of the text of either boxlabel element and Edit > Copy
    2. Place your cursor anywhere within one of the margin_othercontent containers and Edit > Paste
      • Dreamweaver always assumes you want to keep the text formatting in this context
      • It adds a <span> tag with the boxlabel class
    3. Move your cursor so that it's within the text you just pasted
    4. Find <span.boxlabel> in the Tag Selector and right-click (win) or ctrl-click (mac) and select "Remove Tag" to remove the unwanted styling
Watch Demo

Step 4: Create new column sections

  1. We will add a new section with it's own box label to the right column; if necessary, remove some text to make the right column shorter, first
  2. Copy the box label element
    1. Put your cursor anywhere within the right-most column's boxlabel element
    2. Use the Tag Selector to select the entire element, then Edit > Copy
  3. Place your cursor; it should go outside/after/under the margin-setting div (this is the trickey part)
    1. Put your cursor anywhere within margins_other content text area below this boxlabel
    2. Use the Tag Selector to select <div.margins_othercontent>
    3. Carefully click once on the arrow-right key to exit beyond the container
  4. Edit > Paste
  5. We need to add a rule to the top of the boxlabel div
    1. Use the Tag Selector to re-select the pasted boxlabel
    2. View Split or Code and find "<div class="boxlabel">
    3. In the code, place your cursor just after "boxlabel" but within the close quote mark
    4. Type the spacebar; a popup menu provides a list of classes; find and select "ruleontop" and type the Enter key
      • This added the rule which belongs on top of the boxlabel (it's provided by the table cell for the boxlabel at the top)
  6. Copy the margin-setting div
    1. Place your cursor inside the the body text area
    2. Use the Tag Selector to select all of <div.margins_othercontent>
    3. Edit > Copy
    4. Place your cursor in the bottom boxlabel element and use the Tag Selector to select <div.boxlabel ruleontop>
    5. Carefully click once on the arrow-right key
    6. Edit > Paste
  7. You can now edit the new elements freely
  8. Finish up
    1. Save all of your changes
    2. Put the page using the menu Site > Put
    3. Switch to your browser and find the topic home or reload if already viewing it
Watch Demo

Maximum widths

Elements within special case design pages must also be controlled for width, or you risk pushing out your margins (see images). Here are the maximum widths for the entire main editable area (all components must add to the following numbers, in pixels, or the margins may push out):

Maximum widths within the pages' content containers will vary by example. Check your pages in the browser, looking at the margins closely, and adjust images and/or tables, and/or unbroken text so that all elements fit and margins are tight.

Watch Demo

Step 5: Swap Home pages

  1. You can close index-alt.html if it's still open
  2. In the Local Files list, select index.html and re-name it "index-old.html" to get it out of the way
  3. Select index-alt.html and re-name it "index.html"
  4. Select index.html, and index-old.html if you want to save it on the server, and use the Put button to put the file(s)
  5. Switch to your browser and click on the Home link to validate your update
Watch Demo

For Advanced Dreamweaver Users

Watch this demo for some power tips for changing special layouts effectively. If you need help changing your layouts, please contact Web Help.

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: