Skip navigation
donna@nahant.com
Currently Being Moderated

How do I convert an html design web site to CSS template and layout?

Jan 3, 2012 8:49 AM

Tags: #dreamweaver_cs5

Good Morning, All!

How can I convert, apply, or change, efficiently, my html web pages into a CSS template so I don’t have to change each page every time I add something to the main page…also, I currently have two tables (I know, old-fashioned) one which holds my list of contents and links to the different sections (page) with information from the community on the website. The other table holds my text and pictures which I want to update daily. How can I change the format to a 2 column, liquid layout with a masthead area on top for logo and text with a box around it. Time was not available for me to learn all the details of my new Dreamweaver program so I did what I knew and uploaded it with all the boo-boos, inactive links and non-existant pages.

 

Now I have the time to focus and want to get it done better so that it is easy to update with new text and features daily. (I am converting my printed newspaper to an online version after 17 plus years and trying to learn the new Adobe Premium Design Suite CS5 programs. What a trip this is at 61-years-old!

 

My community and readership are looking forward to the web site according to a survey I took. They are very tolerant about my boo-boos while I learn the new software for the web design. I’ve let them know, through my newspaper and personally (I am very active in the community), that online is where I am going and all that I’ve spoken to, or who have sent emails, are very supportive and look forward to getting their news from my web site newspaper.)

 

I am seeking some guidance...I know a little about a lot, but not a lot about anything...even though I've been working with computers since 1983.

I thank you all in advance for whatever help you can give.

 

Donna

 
Replies
  • Currently Being Moderated
    Jan 3, 2012 10:16 AM   in reply to donna@nahant.com

    I don't suppose you'll get many responses because the question is too wide other than to say search google for css web design tutorials, for beginners.

     

    This forum is primarily meant to be of assistance to someone with a reasonable amount of css knowledge who needs a little guidance, help in putting right an area of their website that is not working correctly.

     

    What you have asked is 'How to do something before actually taking any lessons'. I would suggest that you first do some basic css tutorials then when you feel comfortable try and convert your existing web pages into something more up-to-date.

     

    A bit negative but I don't have a magic wand. Maybe someone can give you some web resources for a few starter css tutorials

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 3, 2012 10:21 AM   in reply to donna@nahant.com

    Donna - while I agree with osgood's comments, there may be a few suggestions that would help.  Try starting with a 2-column liquid layout in DW's Samples, and slowly adapt it to match your layout design.  Then copy and paste content over.  If you run into trouble, come back and post a link to your problem page.  That's a pretty good way to learn quickly....

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 3, 2012 10:23 AM   in reply to osgood_

    Maybe someone can give you some web resources for a few starter css tutorials

    Have a look here http://www.adobe.com/devnet/dreamweaver.html

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 5, 2012 10:16 AM   in reply to donna@nahant.com

    That's a good start.  You will want to fix these things -

     

    * change this -

    Don Lawton. Used with permission. <div></p>

     

    to this -

    Don Lawton. Used with permission.</p>


    * change this -

    </center>

    </P>

    <div align="center"><a href="mailto:

     

    to this -

     

    </center>

    <div align="center"><a href="mailto:

     

    * change this -

    <p>

      <center>

        <b><font size="+1">Webmistress: Donna Lee Hanlon<br />

          c/o www.Nahant.com &middot; PO Box 88 &middot; Nahant, MA 01908<br />

          Copyright 2002-12</font></b>

      </center>

    </p>

     

    to this -

    <p style="text-align:center;">

        <b><font size="+1">Webmistress: Donna Lee Hanlon<br />

          c/o www.Nahant.com &middot; PO Box 88 &middot; Nahant, MA 01908<br />

          Copyright 2002-12</font></b>

    </p>

     

    And now you will have a page that contains completely valid HTML.


     
    |
    Mark as:
  • Currently Being Moderated
    Jan 5, 2012 12:29 PM   in reply to donna@nahant.com

    When you get to it, suggest that you start here to learn tableless web page layout: http://adobe.ly/RSjjk

     

    There are more CSS resources here, which should be helpful as well: http://adobe.ly/DW_CSS

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 16, 2012 9:00 AM   in reply to donna@nahant.com
     
    |
    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