[Lazaro]

Hi everyone. I need some advice for a web site that I am going to redo. I'll start by telling you what experience I have. I took a web design class in college about 2 years ago. I haven't really worked on anything since then. I am familiar with HTML and CSS. I have a copy of Dreamweaver.

On to the problem:

My dad started a restaurant about a year ago. It's doing great. He got some "computer guy" to create a web site for him. The site is horrible. The person that manages the restaurant doesn't know how to update it, so my dad has to pay the computer guy to do it. ($75/ hour). When I heard about this I was a little shocked by it so I volunteered to learn how to update it and teach the manager. I took a look at the site and it was created with Photoshop and uses ASP. http://sinfoniarestaurant.com That is a link to the site.

I need some advice:
1. Do you have any tips for making the website look better (Maybe a whole redesign. I'm open to that, it would be a fun project)
2. How can I make the site simple to operate for someone that is not very "good with computers"
3. Maybe just some general tips for a site like that. Most of the stuff like menus are static, but there are also music shows and events. Info that would be changing often.

Any help would be great because I really don't know where to start. Thank you very much.

[Exizl del Fuego]

I have a similar project for a very different client. They too have most of the site be static content, but a couple of portions change on a fairly regular basis. The person who needs to edit those in-motion pages knows very little about computers and would be completely lost looking at html code or even Dreamweaver. I therefore isolated the static portions of the site and the dynamic portions of the site and split them off to be handled separately.

I focused on their static pages first and completely rewrote their website using XHTML+CSS, thus making the overall site feel more modern and clean (I'm not sure how Dreamweaver handles stuff like this, but I'd advocate ditching Dreamweaver and getting a nice text editor like BBEdit/TextWrangler). Like your site, they had a table-based layout -- I've moved them away from that. Like your site, they had boxes of text that were actually images -- there's no need for that. CSS does a great job for things like that.

I am now making that nice, clean markup work for me by creating blogging templates for the in-motions pages. I think I'm going to utilize Blogger's web interface so that the person responsible for making these small but significant updates can just log into the website, make their changes in a text screen, and be done with it.

I don't know if the blogging thing would work for you or not, but for my client, it's gold.

[besson3c]

Originally Posted by Exizl del Fuego

I have a similar project for a very different client. They too have most of the site be static content, but a couple of portions change on a fairly regular basis. The person who needs to edit those in-motion pages knows very little about computers and would be completely lost looking at html code or even Dreamweaver. I therefore isolated the static portions of the site and the dynamic portions of the site and split them off to be handled separately.

I focused on their static pages first and completely rewrote their website using XHTML+CSS, thus making the overall site feel more modern and clean (I'm not sure how Dreamweaver handles stuff like this, but I'd advocate ditching Dreamweaver and getting a nice text editor like BBEdit/TextWrangler). Like your site, they had a table-based layout -- I've moved them away from that. Like your site, they had boxes of text that were actually images -- there's no need for that. CSS does a great job for things like that.

I am now making that nice, clean markup work for me by creating blogging templates for the in-motions pages. I think I'm going to utilize Blogger's web interface so that the person responsible for making these small but significant updates can just log into the website, make their changes in a text screen, and be done with it.

I don't know if the blogging thing would work for you or not, but for my client, it's gold.

Great advice here...

If the blogging thing doesn't work out, check out what CMS solutions are available from http://www.cmsmatrix.com . Setting up a CMS will help them maintain the dynamic content of their site through a web interface without needing to know code - much easier.

I'd definitely stay away from the WYSIWYG editors.

[maccrazy]

so my dad has to pay the computer guy to do it. ($75/ hour).

Dare I ask how many hours it took them to make it?

[nica]

I’m working on a similar project for a friend for his restaurant and in doing research I found the sites below. If you are not doing anything dynamic I would suggest to get rid of ASP and just use XHTML and CSS. If you need a dynamic site use MySQL and PHP (free).

Restaurant Sites:
http://earlygirleatery.com/
http://www.tirolskaizba.sk/en/
http://www.certovka.info/cz/

Restaurant Menu CSS Tutorial:
http://web-graphics.com/mtarchive/001622.php

CSS Sites:
http://www.cssbeauty.com/

[besson3c]

Unless you plan to be their webmaster indefinitely and you want them to be dependent on you, research CMSes as well....

[Lazaro]

Thanks for the advice everyone.

To maccrazy: He didn't charge us for the site. But he charges $75/ hour to update it.

I agree with the blogging method. I am also looking into all the other options. So far I have created a new graphic. and a simple menu with some examples from a tutorial site. I am writing the code myself. Mostly because I don't really know how to use most of the functions of dreamweaver, but I do like coding with it (waste of money I know). I'll show you guys what I have as soon as I upload it.

Thanks again!

[Lazaro]

Hi everyone. I'd like to thank everyone again for their help before. I'm having a lot of trouble with this website. I really want to create something nice with a CSS layout and some neat dropdown menus. I find most of these things online that I can copy, but since I am not too good with CSS I run into a lot of problems. I stopped using dreamweaver because it is a major pain in the ass.

The owner (my dad ) has put a deadline on this. He wants it done by Feb. 20th. That gives me about 3 weeks to get this done. I know I can do it.

I'm going to hold off on the CMS for now. I'd like to do some more research before I dive into that.

What I really want to learn is CSS. It seems so powerful, and I find some very good examples online, but with my lack of knowledge I keep messing it up when I try to change things. So my first priority is learning CSS, or at least getting a good enough understanding so I can create the sites interface on my own without having to copy another web site's entire style sheet.

I have given myself a small research budget, and I've got time. Are there any websites or books that could help me out. I know a lot of people will say that books are a waste but they really help me out. I am open to anything though. (And any other tips you may have!)

Thanks a lot!

[besson3c]

Originally Posted by Lazaro

Hi everyone. I'd like to thank everyone again for their help before. I'm having a lot of trouble with this website. I really want to create something nice with a CSS layout and some neat dropdown menus. I find most of these things online that I can copy, but since I am not too good with CSS I run into a lot of problems. I stopped using dreamweaver because it is a major pain in the ass.

The owner (my dad ) has put a deadline on this. He wants it done by Feb. 20th. That gives me about 3 weeks to get this done. I know I can do it.

I'm going to hold off on the CMS for now. I'd like to do some more research before I dive into that.

What I really want to learn is CSS. It seems so powerful, and I find some very good examples online, but with my lack of knowledge I keep messing it up when I try to change things. So my first priority is learning CSS, or at least getting a good enough understanding so I can create the sites interface on my own without having to copy another web site's entire style sheet.

I have given myself a small research budget, and I've got time. Are there any websites or books that could help me out. I know a lot of people will say that books are a waste but they really help me out. I am open to anything though. (And any other tips you may have!)

Thanks a lot!

I would recommend not getting a book, because there really isn't much to "get" about CSS - the concepts are pretty easy to grasp, and there are plenty of reference materials online for looking up CSS instructions.

Here is all there is to get, in a nutshell:


1) Stylesheets can dictate font style and/or page layout, they can be embedded into a page within a <style> tag, or referenced from a standalone file (I usually prefer doing the latter, as it allows you to drive entire sites this way).

2) There are classes and IDs. Classes are intended to be used a number of times on the same page. IDs are meant to be used once. Layout stuff often makes sense to declare as IDs.

3) In stylesheet files, IDs begin with "#" signs, classes begin with periods. There are tag styles, and homemade classes/IDs. For instance:

[code]
h1 {
font-size: 24px;
}
[code]

Means that any headline setup using an <h1> tag will be font size 24.

Code:
.subheadline {
     font-size: 18px;
     font-weight: bold;
}

Means that your own class you are calling "subheadline" has bolded fonts of size 18.

Code:
#nav {
     width: 300px;
     border: 1px #000000 solid;
     float: left;
     margin: 5px;
}

Means that your own "nav" ID is 300 pixels wide, has a one pixel black border, and is left aligned with an outer margin of 5 pixels.

4) Classes and IDs can be embedded within one another, e.g.:

Code:
#nav ul {

}

means that unordered lists (ul) within the nav ID will inherit these characteristics

5) Multiple classes/IDs can be assigned to the same declaration, e.g.:

Code:
h1, h2, .bigheadline {

}

6) Elements in your HTML can be assigned to these classes/IDs within the tags themselves (e.g.

Code:
<h1 style = "myheadline">

, but you'll find it more useful to learn about <div> and <span> "blocks". Divs basically mean "all this stuff that follows should be set to this style", and spans are the same, except whatever comes after the span will not start on a new line. Spans are very useful for defining fonts, they aren't terribly useful for layout. e.g.:

Code:
<div id="nav">
your content
</div>

Will take on the characteristics defined in your nav ID above, and:

Code:
<span class="subheadline">your headline</span>

will take on the subheadline class. Subheadline can be defined as an ID in your CSS if you prefer, and called accordingly within your HTML code, and likewise NAV can be defined as a class if you prefer.


You'll need to do a lot of experimentation, a lot of looking stuff up (the w3cschools site is very helpful), and you may have to learn a fair bit about CSS compatibility with various browsers. Since this is such a moving target, IMHO it is best to look stuff up online, experiment, and have access to all major browsers for testing (IE 6 will be the one that proves to be the biggest PITA).


There are big thick books about CSS, but what I've provided here is pretty much the gist of what you need to know. You'll probably find Google faster than pulling out a textbook. You don't need to know everything obscure thing about CSS to use it.

[besson3c]

Originally Posted by Lazaro

Hi everyone. I'd like to thank everyone again for their help before. I'm having a lot of trouble with this website. I really want to create something nice with a CSS layout and some neat dropdown menus. I find most of these things online that I can copy, but since I am not too good with CSS I run into a lot of problems. I stopped using dreamweaver because it is a major pain in the ass.

The owner (my dad ) has put a deadline on this. He wants it done by Feb. 20th. That gives me about 3 weeks to get this done. I know I can do it.

I'm going to hold off on the CMS for now. I'd like to do some more research before I dive into that.

What I really want to learn is CSS. It seems so powerful, and I find some very good examples online, but with my lack of knowledge I keep messing it up when I try to change things. So my first priority is learning CSS, or at least getting a good enough understanding so I can create the sites interface on my own without having to copy another web site's entire style sheet.

I have given myself a small research budget, and I've got time. Are there any websites or books that could help me out. I know a lot of people will say that books are a waste but they really help me out. I am open to anything though. (And any other tips you may have!)

Thanks a lot!

I would recommend not getting a book, because there really isn't much to "get" about CSS - the concepts are pretty easy to grasp, and there are plenty of reference materials online for looking up CSS instructions.

Here is all there is to get, in a nutshell:


1) Stylesheets can dictate font style and/or page layout, they can be embedded into a page within a <style> tag, or referenced from a standalone file (I usually prefer doing the latter, as it allows you to drive entire sites this way).

2) There are classes and IDs. Classes are intended to be used a number of times on the same page. IDs are meant to be used once. Layout stuff often makes sense to declare as IDs.

3) In stylesheet files, IDs begin with "#" signs, classes begin with periods. There are tag styles, and homemade classes/IDs. For instance:

[code]
h1 {
font-size: 24px;
}
[code]

Means that any headline setup using an <h1> tag will be font size 24.

Code:
.subheadline {
     font-size: 18px;
     font-weight: bold;
}

Means that your own class you are calling "subheadline" has bolded fonts of size 18.

Code:
#nav {
     width: 300px;
     border: 1px #000000 solid;
     float: left;
     margin: 5px;
}

Means that your own "nav" ID is 300 pixels wide, has a one pixel black border, and is left aligned with an outer margin of 5 pixels.

4) Classes and IDs can be embedded within one another, e.g.:

Code:
#nav ul {

}

means that unordered lists (ul) within the nav ID will inherit these characteristics

5) Multiple classes/IDs can be assigned to the same declaration, e.g.:

Code:
h1, h2, .bigheadline {

}

6) Elements in your HTML can be assigned to these classes/IDs within the tags themselves (e.g.

Code:
<h1 style = "myheadline">

, but you'll find it more useful to learn about <div> and <span> "blocks". Divs basically mean "all this stuff that follows should be set to this style", and spans are the same, except whatever comes after the span will not start on a new line. Spans are very useful for defining fonts, they aren't terribly useful for layout. e.g.:

Code:
<div id="nav">
your content
</div>

Will take on the characteristics defined in your nav ID above, and:

Code:
<span class="subheadline">your headline</span>

will take on the subheadline class. Subheadline can be defined as an ID in your CSS if you prefer, and called accordingly within your HTML code, and likewise NAV can be defined as a class if you prefer.


You'll need to do a lot of experimentation, a lot of looking stuff up (the w3cschools site is very helpful), and you may have to learn a fair bit about CSS compatibility with various browsers. Since this is such a moving target, IMHO it is best to look stuff up online, experiment, and have access to all major browsers for testing (IE 6 will be the one that proves to be the biggest PITA).


There are big thick books about CSS, but what I've provided here is pretty much the gist of what you need to know. You'll probably find Google faster than pulling out a textbook. You don't need to know everything obscure thing about CSS to use it.

[besson3c]

Originally Posted by Lazaro

Hi everyone. I'd like to thank everyone again for their help before. I'm having a lot of trouble with this website. I really want to create something nice with a CSS layout and some neat dropdown menus. I find most of these things online that I can copy, but since I am not too good with CSS I run into a lot of problems. I stopped using dreamweaver because it is a major pain in the ass.

The owner (my dad ) has put a deadline on this. He wants it done by Feb. 20th. That gives me about 3 weeks to get this done. I know I can do it.

I'm going to hold off on the CMS for now. I'd like to do some more research before I dive into that.

What I really want to learn is CSS. It seems so powerful, and I find some very good examples online, but with my lack of knowledge I keep messing it up when I try to change things. So my first priority is learning CSS, or at least getting a good enough understanding so I can create the sites interface on my own without having to copy another web site's entire style sheet.

I have given myself a small research budget, and I've got time. Are there any websites or books that could help me out. I know a lot of people will say that books are a waste but they really help me out. I am open to anything though. (And any other tips you may have!)

Thanks a lot!

I would recommend not getting a book, because there really isn't much to "get" about CSS - the concepts are pretty easy to grasp, and there are plenty of reference materials online for looking up CSS instructions.

Here is all there is to get, in a nutshell:


1) Stylesheets can dictate font style and/or page layout, they can be embedded into a page within a <style> tag, or referenced from a standalone file (I usually prefer doing the latter, as it allows you to drive entire sites this way).

2) There are classes and IDs. Classes are intended to be used a number of times on the same page. IDs are meant to be used once. Layout stuff often makes sense to declare as IDs.

3) In stylesheet files, IDs begin with "#" signs, classes begin with periods. There are tag styles, and homemade classes/IDs. For instance:

[code]
h1 {
font-size: 24px;
}
[code]

Means that any headline setup using an <h1> tag will be font size 24.

Code:
.subheadline {
     font-size: 18px;
     font-weight: bold;
}

Means that your own class you are calling "subheadline" has bolded fonts of size 18.

Code:
#nav {
     width: 300px;
     border: 1px #000000 solid;
     float: left;
     margin: 5px;
}

Means that your own "nav" ID is 300 pixels wide, has a one pixel black border, and is left aligned with an outer margin of 5 pixels.

4) Classes and IDs can be embedded within one another, e.g.:

Code:
#nav ul {

}

means that unordered lists (ul) within the nav ID will inherit these characteristics

5) Multiple classes/IDs can be assigned to the same declaration, e.g.:

Code:
h1, h2, .bigheadline {

}

6) Elements in your HTML can be assigned to these classes/IDs within the tags themselves (e.g.

Code:
<h1 style = "myheadline">

, but you'll find it more useful to learn about <div> and <span> "blocks". Divs basically mean "all this stuff that follows should be set to this style", and spans are the same, except whatever comes after the span will not start on a new line. Spans are very useful for defining fonts, they aren't terribly useful for layout. e.g.:

Code:
<div id="nav">
your content
</div>

Will take on the characteristics defined in your nav ID above, and:

Code:
<span class="subheadline">your headline</span>

will take on the subheadline class. Subheadline can be defined as an ID in your CSS if you prefer, and called accordingly within your HTML code, and likewise NAV can be defined as a class if you prefer.


You'll need to do a lot of experimentation, a lot of looking stuff up (the w3cschools site is very helpful), and you may have to learn a fair bit about CSS compatibility with various browsers. Since this is such a moving target, IMHO it is best to look stuff up online, experiment, and have access to all major browsers for testing (IE 6 will be the one that proves to be the biggest PITA).


There are big thick books about CSS, but what I've provided here is pretty much the gist of what you need to know. You'll probably find Google faster than pulling out a textbook. You don't need to know everything obscure thing about CSS to use it.

[selowitch]

Originally Posted by besson3c

I would recommend not getting a book, because there really isn't much to "get" about CSS - the concepts are pretty easy to grasp, and there are plenty of reference materials online for looking up CSS instructions.

Well, some folks learn well from books, in which case I'd recommend anything by one of these three authors (presented in no particular order): Eric Meyer, Jeffrey Zeldman, or Molly Holzschlag.

[Exizl del Fuego]

I agree with selowitch here, as I'm one of those people who simply learn better reading from a physical book than looking things up online. I love the internet for quick reference, but greatly prefer a book for a proper introduction.

The authors previously mentioned will be excellent, but I also wanted to toss out O'Reilly's CSS Cookbook as another possibility. They give you stock code for common CSS usage, but they also do a wonderful job explaining WHY they did something some way and HOW it works.

And one more note. When I was first learning CSS I kept hearing "box model" come up. I can't remember if I was just glossing over this in my reading or if I was seeing it referenced a lot without any explanation. Regardless, once I finally took the time to research what the box model actually was, a whole lot of CSS suddenly made a whole lot of sense. A quick google search yielded this guide. I can't make light of this: you MUST have a good understanding of what the box model is if you want to get anywhere with CSS.

[Lazaro]

That "box model" guide is brilliant.

[Lazaro]

About books. I can "get things done" using online references, but it is usually easier for me to actual learn and retain the material if I read a book. I know books contain a lot of junk and filler, but it's all somewhat related to the subject matter. So it is entertaining and helps think about the material in different ways.