Skip navigation
bdab
Currently Being Moderated

Template or CSS style sheet

Feb 22, 2013 3:18 PM

Tags: #cs4 #dreamweaver

Which is the better way to start a website from scratch?

 

1.  To make a comprehensive Template with lots of CSS rules and then base all the other pages on the template OR

 

2.  Make individual pages and apply external CSS styles to each page?

 

I'm really confused about how to structure my website.  I've looked at a lot of tutorials on how to build all these separate elements but I'm having a hard time visualizing an overall structure.

 
Replies
  • Currently Being Moderated
    Feb 22, 2013 3:37 PM   in reply to bdab

    How big a site are you planning to make?

     

    Templates are convenient to a point.  But not well suited for 50+ pages.

     

    I recommend using an External Style Sheet regardless of whether you use Templates or not. 

     

    • External style sheet = site wide styles (applied to all pages).
    • Embedded = page specific styles.
    • Inline = HTML E-mails / newsletters or when you need to override a style in your External or Embedded code.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 4:40 PM   in reply to bdab

    Adding to Nancy's comments and with the knowledge that you are a newbie, I would suggest that you start with a single page first, called index.html.

     

    Start with the markup (HTML) first as per

     

    1. ensure that you start with the proper document structure

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>My Title</title>

    <meta name="description" content="">

    <meta name="author" content="">

    <link rel="stylesheet" href="css/style.css">

    </head>

     

    <body>

    </body>

    </html>

     

    2. Enter the content into the BODY element

    <div class="header">

        <h1>Company Name</h1>

      <div class="nav">

          <ul>

          <li><a href="#">Blog</a></li>

          <li><a href="#">About</a></li>

          <li><a href="#">Archives</a></li>

          <li><a href="#">Contact</a></li>

          <li><a href="#">Subscribe via. RSS</a></li>

        </ul>

      </div>

      </div>

      <div class="article">

      <h2>Article</h2>

    <p>Eu fugiat nulla pariatur. Velit esse cillum dolore ut aliquip ex ea commodo consequat. Duis aute irure dolor qui officia deserunt sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua.</p>

    </div>

    <div class="aside">

    <h3>Did you know?</h3>

    <p>Eu fugiat nulla pariatur. Velit esse cillum dolore ut aliquip ex ea commodo consequat. </p>

    <div class="footer">

    <h4>&copy; Comapny name</h4>

    </div>

     

    3. View in your favourite browser and you will see that it looks horrible. It needs some styling.

     

    4. Create a file in a css subdirectory called style.css

     

    5. In style.css start with browser reset rules as per http://meyerweb.com/eric/tools/css/reset/. This will help to ensure that you don't have browser problems down the track.

     

    6. Enter a few style rules into the CSS file

    body {

        width: 1000px;

        margin: auto;

    }

    .header {

        height: 120px;

        background: #063;

    }

    .header h1 {

        color: silver;

    }

    .nav {

        background: darkgray;

        height: 35px;

    }

    .nav ul li {

        position: relative;

        text-align: left;

        width: 10em;

        float: left;

    }

    .nav ul a {

        display: block;

        background-color: darkgray;

        padding: 0.5em 0.75em;

        color: white;

        text-decoration: none;

    }

     

    I did not finish the CSS, leaving it up to your imagination.

     

    The above is the workflow that I would suggest for all newbies. At each stage, check in the browser to see the effect of the addition/change/deletion.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 11:24 AM   in reply to Ben Pleysier

    Adding to Gramps' excellent starter, after you're completely satisfied with your main page in all browsers & the code validates without errors,

        

    CSS - http://jigsaw.w3.org/css-validator/

    HTML - http://validator.w3.org/

     

            CREATE A TEMPLATE:

    1. File > SaveAs Template.
    2. Insert Editable Regions for content that will change from page to page. Thoroughly read F1 Help about Template Editable Regions.
    3. Save & close template. 

      SPAWN CHILD PAGES:
    4. Go to File > New > Page from Template. 
    5. Select the Template from right panel.
    6. Hit Create button.
    7. SaveAs index.html (your domain's home page). 
    8. Repeat for the rest of your site pages.

      EDIT TEMPLATE:
    9. File > Open > browse to Templates/template.dwt file.
    10. Add links to your menu. 
    11. Save. 
    12. DW will ask if you want to populate changes to your child pages. 
    13. Hit yes.
    14. Upload all child pages to your remote server.

     

    If you ever need to edit your Template, repeat steps 9 - 14.

     

     

    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