How do I redesign Source Code on Dreamweaver?

Question

Hello everyone,
I currently am doing a voulenteer website (they said they will let me intern for them if I do this, I am not getting paid since I volunteered). Little did I know that the client had a website that was done by another company and would like me to redesign it.
I thought no problem, I can manage, but now its stressing me out.
The company sent me a "Source Code File" on the website and I just do not know where to begin.
The Zip file cotains:
Five folders: Content, CSS, Images, Pages, Script
There are also three items: Custom.css, Index.html, Main.css
I do not want to let them down, all my experience is wordpress and I have 3 weeks to work on redesigning the website. Supposedly, I cannot use wordpress because they want to charge the client an extra 1k if I do wordpress because they have to link the content. 
I would really appreciate an experts advice on how to begin redesigning and how long might it take. I understand only basic coding so the file is not too scary its just the CSS and the other tabs when I open the index in dreamweaver which have me worried.
Sorry if I am making no sense, I am just really stressing on this one website.  When I said web design I wanted to start from scratch...I look forward to hearing from you all.
Thanks!

Answer 1

So for the website should I make buttons myself or just use html for them?
The entirely depends on you. Fact is, the easiest 'button" to make is:
<a href="#">click here</a>
In other words, it's a simple link.
But you can style navigation and use backgrounds and divs to create button-like navigation:
Here's the navigation I did for one website (html):
<div id="navigation">
<nav>
<ul id="menu">
        <li><a href="../index.html">Home</a></li>
        <li><a href="../about.html">About</a>
       <li><a href="../connect.html">Connect</a></li>
      </ul>
</nav>
</div>
And the CSS for the above, which creates a drop-down menu structure using CSS3 elements. The navigation is very button-line and works great:
@charset "UTF-8";
/* CSS Document */
/* Main */
#menu
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #f6d78d;
        background: #fbf6f6; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
                    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d 3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc 2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiB ncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogI CAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3R vcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y2ZDc4ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZ mZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y0Y2M2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ 9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+C iAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJ hdGVkKSIgLz4KPC9zdmc+);
                    background: -moz-linear-gradient(top, #fbf6f6 0%, #f6d78d 50%, #f4cc6e 51%, #fbf6f6 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbf6f6), color-stop(50%,#f6d78d), color-stop(51%,#f4cc6e), color-stop(100%,#fbf6f6)); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(top, #fbf6f6 0%,#f6d78d 50%,#f4cc6e 51%,#fbf6f6 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(top, #fbf6f6 0%,#f6d78d 50%,#f4cc6e 51%,#fbf6f6 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(top, #fbf6f6 0%,#f6d78d 50%,#f4cc6e 51%,#fbf6f6 100%); /* IE10+ */
                    background: linear-gradient(top, #fbf6f6 0%,#f6d78d 50%,#f4cc6e 51%,#fbf6f6 100%); /* W3C */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf6f6', endColorstr='#fbf6f6',GradientType=0 ); /* IE6-8 */
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
#menu li
        float: left;
        padding: 0 0 10px 0;
        position: relative;
#menu a
          float: left;
          height: 25px;
          padding: 0 15px;
          color: #000;
          text-transform: uppercase;
          font: bold 14px/25px Arial, Helvetica;
          text-decoration: none;          /*text-shadow: 0 1px 0 #000;*/
#menu li:hover > a
          color: #3c2764;
*html #menu li a:hover /* IE6 */
          color: #3c2764;
#menu li:hover > ul
        display: block;
/* Sub-menu */
#menu ul
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #f6d78d;
    background: -moz-linear-gradient(#f6d78d, #fbf6f6);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fbf6f6),color-stop(1, #f6d78d));
    background: -webkit-linear-gradient(#f6d78d, #fbf6f6);
    background: -o-linear-gradient(#f6d78d, #fbf6f6);
    background: -ms-linear-gradient(#f6d78d, #fbf6f6);
    background: linear-gradient(#f6d78d, #fbf6f6);
    -moz-border-radius: 5px;
    border-radius: 5px;
#menu ul li
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
#menu ul li:last-child
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
#menu ul a
    padding: 10px;
        height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
        text-transform: none;
*html #menu ul a /* IE6 */
        height: 10px;
        width: 150px;
*:first-child+html #menu ul a /* IE7 */
        height: 10px;
        width: 150px;
#menu ul a:hover
    background: #F2C14F;
        background: -moz-linear-gradient(#EFD08D,  #F2C14F);
        background: -webkit-gradient(linear, left top, left bottom, from(#EFD08D), to(#F2C14F));
        background: -webkit-linear-gradient(#EFD08D,  #F2C14F);
        background: -o-linear-gradient(#EFD08D,  #F2C14F);
        background: -ms-linear-gradient(#EFD08D,  #F2C14F);
        background: linear-gradient(#EFD08D,  #F2C14F);
#menu ul li:first-child a
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
#menu ul li:first-child a:after
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
#menu ul li:first-child a:hover:after
    border-bottom-color: #F2C14F;
#menu ul li:last-child a
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
/* Clear floated elements */
#menu:after
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */