Radio Control Model Airplane Club

crmamx · February 10, 2011

Hi All:

My first attempt in 10 years (only did 1 then) at designing and programming a site. I switched hosts about 30 days ago so I could utilize mySQL and php (which I had never heard of till then). Making good progress thanks to phpfreaks help.

Would appreciate any suggestions, advice or help from the experts.

http://ecbiz71.inmotionhosting.com/~bayare27/

Thanks

ignace · February 10, 2011

Well to say the least the website is seriously dated. Here are some resources to freshen your design:

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/

http://www.freecsstemplates.org/css-templates/

gizmola · February 10, 2011

Well to say the least the website is dated.

Hello 1997!

To Ignace's point, that is a very dated design. I'd suggest an immediate revamp where you lose the marquee (really annoying) and the frames structure. Work up a new design using html and css and start to port your site over to that.

crmamx · February 10, 2011

Hey guys, I am dated!

How many programs have I written on punched cards? A ton.

I don't have photoshop, just wordpad and komodo.

You dont like the marquee. Neither do I. Never have. Gonna remove it.

Other than that, what don't you like? What is wrong with frames?

Work up a new design using html and css and start to port your site over to that.

Not trying to be cute but it is written in html and a little css.

What is it that is dated and why is that a bad thing?

ignace · February 10, 2011

How many programs have I written on punched cards? A ton.

My initial introduction to programming was with COBOL and Assembler, my room just wasn't big enough to hold the computer otherwise.

I don't have photoshop, just wordpad and komodo.

You don't have to. You can find CSS designs all over the net and use that as your base.

What is it that is dated and why is that a bad thing?

Not sure this still holds truth but search engines have trouble properly indexing your website with frames. The problem with frames is that search engines index your navigation and content as different pages which means people can end up on your main content with no navigation or on a page with only navigation.

crmamx · February 10, 2011

Not sure this still holds truth but search engines have trouble properly indexing your website with frames. The problem with frames is that search engines index your navigation and content as different pages which means people can end up on your main content with no navigation or on a page with only navigation.

That's what I like..."pacifics." That surely is a bad thing. I will look into changing it. Only another 40 hours of work for me...lol

Many thanks

gizmola · February 10, 2011

A really simple approach to this that I recommend to people in your situation is to create a simple controller script. You should call this script index.php. That script becomes a junction box for your site that takes a single parameter and then loads the appropriate content using include. The entire thing is based on a single case statement.

Here's what I would recomment for you:

-create a header.php file.

In this file stick your valid html doctype, your head and title and anything else you want like meta keywords and description. Load your main .css style sheet. This might be the only one you have in a simple site, although you willl also be able to load individual style sheets for each page in the index.php. This file can start your body and usually people have a div that contains an actual header for the site, with logo and sometimes a top navigation. It's considered good practice to have a top nav and a menu nav, and a lot of people also repeat the nav in the footer. There's lots of tutorials on how to create an attractive menu using pure css, usually with an unordered list for the markup.

- create a footer.php

have a footer div here, and any copyright or similar info you want, and many people also repeat their menu.

-menu.php

have a div and markup for your sidebar menu.

-index.php

This is your junction box. It includes the header.php, then sets up a main div. If you want to stay with the basic structure you have, then have a

$page = $_GET['page'];


require_once('menu.php');


switch ($page) {
  case 'president' :
     require_once('president.php');
     break;
  case 'clubinfo' :
     require_once('clubinfo.php');
    break;
  .....  a case for each page.
  case 'home' :
  default :
     require_once('home.php'); 
}

require_once('footer.php');

Now you simply make a php script for each page on your site, and your navigation url's should always be:

?page=president or whatever you have for each page in the navigation.

This scheme is conducive to adding a simple mod rewrite rule so that you can have the navigation omit the 'page=' so all your urls would be seo friendly:

www.yoursite.com/president

www.yoursite.com/weather etc.

Here's a link to a clearly written article that shows you how to implement a 2 column css layout: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Now you have pretty much everything you need

For inspiration you might want to look at http://www.csszengarden.com/

Every site you click on in the right hand side uses the same markup file. The look and feel (style) of the sites is all done using css with some images included as background elements. They can not change the markup, so you'll see that incredible things can be done purely in the .css stylesheet.

gizmola · February 10, 2011

I should probably add, that having margin, padding, alignment and font consistency is what you want to aim for here. Reduce your site back to its content, with simple markup around the elements:

h1, h2, h3, div tags, p tags, ul's, anchors and img. Then start adding styles back in, and your site will transform into one that is consistent and looks professional and modern.

crmamx · February 21, 2011

re: gizomla's reply but all comments solicited and welcome.

The is totally a css question but it seems right to continue the original topic here.

Would you consider this good css code and a good 3 column layout with which to start my site redesign?

Many thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>3-column CSS layout</title>
  <style type="text/css" media="screen, print, projection">
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
#body {
width:960px;
margin:0 auto;
background:#ddd;
}
#header {
padding:10px;
background:#fdd;
}
#content-1 {
float:left;
width:220px;
padding:10px;
background:#bfb;
}
#content-2 {
float:right;
width:720px;
}
#content-2-1 {
float:left;
width:460px;
padding:10px;
background:#ddf;
}
#content-2-2 {
float:right;
width:220px;
padding:10px;
background:#dff;
}
#footer {
padding:10px;
background:#ff9;
}
/* Easy clearing of floats */
.cf:after {
display:block;
clear:both;
height:0;
visibility:hidden;
content:" ";
font-size:0;
}
/* Does not validate – use conditional comments  */
.cf {*zoom:1;}
</style>
</head>


<div id="body">

<div id="header" class="cf">

<h1>HEADER INFORMATION</h1>
This is <code><div id="header"></code>.
	</div>


<div id="main" class="cf">

<div id="content-1">

<p>This is <code><div id="content-1"></code>.</p>


<p>NAVIGATION</p>
<p></p>
<p></p>
<p></p>
<p></p>

		</div>


<div id="content-2">

<div id="content-2-1">

<p>This is <code><div id="content-2-1"></code>.</p>


<p>The color moves down as you add text. </p>
<p>MAIN CONTENT</p>
<p></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>


<div id="content-2-2">

<p>This is <code><div id="content-2-2"></code>.</p>


<p>MINOR CONTENT</p>
<br>
</div>

		</div>

	</div>


<div id="footer" class="cf">

<p>This is <code><div id="footer"></code>. CREDITS, COPYRIGHT, ECT.</p>

	</div>

</div>

</body>
</html>

gizmola · February 21, 2011

I'd recommend you use this site. One big advantage is that they already have navigation and you can also choose from a variety of different skeletons. You have to decide whether you want a liquid layout, that expands and contracts with the browser size, or a fixed width display. For a site like yours, one advantage of a fixed width display is that you can put a background image behind it, and being that your site is a hobby club, a picture, perhaps with reduced opacity or tweaked with one of the photoshop filters, might be a nice touch.

http://www.maxdesign.com.au/articles/css-layouts/

crmamx · February 22, 2011

Yep! Those are really nice. Best site I've seen on css.

But I can't decide on a 2 or 3 column. Column 1 will be for navigation. I just have too much to put it across the header or footer. I was thinking column 2 for Main Content and column 3 other than main, whatever that is..haha But I have to decide before I get started. Looking at the content I have, what would you suggest:

http://bayarearcsociety.com/

I think from a technical aspect I would be better off with a fixed width.

Thanks

gizmola · February 22, 2011

It's 100% subjective. As for a top menu, you really want to have that. It's not necessary for you to have every item you have in your sidebar menu -- you can pick out the most important items.

Here's a site for a club in the LA area that might provide you with a bit of inspiration. http://www.valleyflyers.com/

Now it was developed by a guy who has a web design company, but the underlying ideas used are the same ones we've been discussing in this thread. In his case he used a 3

It has to be said, that the valleyflyers.com site is using some sort of CMS. There's a point at which a site like yours needs to consider using Joomla or Drupal for long term maintenance, and so that the various people involved with the club can update content. It's probably better to figure that out sooner than later, because CMS templates have a specific structure to them. Also, there are marketplaces where you can go and buy a template for anywhere form $10-100 and customize it to your needs.

crmamx · February 22, 2011

Wow! You are an encyclopedia of information. Between you and Picachu I might get there. He got me thru the add/delete/change programs to my db.

The Valley Flyers is right down the line of what I had in mind. Yea, I'm pretty well set on 3 columns. I don't have the technical skills to produce one that good, but I might get close. It is clean, whereas mine is dark and drab looking.

The one I have now I produced on the fly trying to learn all the code. But I am an old time system designer and I am going to do the front end work this time.

Joomla and Drupal. Heard of them but know absolutely nothing about them. Will do a little research. I understand that if I use a CMS then all the coding has to go thru it. That is, I would not be writing any code per se as I am doing now. Is that right? If so, might take all the fun out of it.

Which of the 2 would you pick?

crmamx · February 22, 2011

Man alive, they look complicated. I had enough problems learning the very basics of mySQL and php and then how to use cPanel. And there appears to be no way to migrate any of my code into either one of them, which basically I could do as I am now proceeding.

And surely I do not want to have to install php, apache and whatever else on my PC. Which brings up another problem, how to develop and test my new system while keeping the old one running. I guess I can build an index1.html and add a 1 to all my files which would double the space I am using.

Maybe I need to get back to building my airplanes and flying.

cssfreakie · February 22, 2011

Hi crmamx,

As for your design, i just checked and indeed frames and scrollbar's other than on the normal position are not very nice looking. I would rather go for a 2 column layout, just like a postal card, where 2/3th is the main topic 1/3 is a column for additional modules like latest news events calender etc. And since you are in the sky stuff, get one nice picture and place it as background.

Just a simple layout, keep it simple choose no more than 4 colors apart from black and white. choose the right font. and that's it. see attachement for maybe some inspiration. its easy to make with css and a little html. And you don't need costly photoshop. Gimp and Inkscape are free. (last one is easiest to learn)

good luck!

-edit the background photo i used is just a very low quality google supplied one, but you get the idea

[attachment deleted by admin]

crmamx · February 22, 2011

All the following is used with the permission of maxdesign.

gizmola:

I'd recommend you use this site. One big advantage is that they already have navigation and you can also choose from a variety of different skeletons. You have to decide whether you want a liquid layout, that expands and contracts with the browser size, or a fixed width display. For a site like yours, one advantage of a fixed width display is that you can put a background image behind it, and being that your site is a hobby club, a picture, perhaps with reduced opacity or tweaked with one of the photoshop filters, might be a nice touch.

http://www.maxdesign.com.au/articles/css-layouts/

I decided on 2 columns rather than 3. I tried building the css script block by block but never could get it to work. So this is the complete script and it does work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Two columns with color &#8211; Final layout | Max Design</title>
<meta name="Description" content="Max Design - standards based web design, development and training" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="http://www.maxdesign.com.au/wp-content/themes/maxdesign/stylesheets/sample.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.maxdesign.com.au/wp-content/themes/maxdesign/stylesheets/print.css" type="text/css" media="print" />
<!--[if IE 5]><link rel="stylesheet" href="http://www.maxdesign.com.au/wp-content/themes/maxdesign/stylesheets/ie5.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="http://www.maxdesign.com.au/wp-content/themes/maxdesign/stylesheets/ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://www.maxdesign.com.au/wp-content/themes/maxdesign/stylesheets/ie7.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div id="sample-container">
	<h2>
	Two columns with color &#8211; Final layout	</h2>
<p><a href="/articles/two-columns/"><img src="http://www.maxdesign.com.au/wp-content/themes/maxdesign/images/button-article.jpg" alt="Back to article" /></a></p>
<div id="sample04">
<div id="banner">
<h1>Site name</h1>
</div>
<div id="nav">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
</div>
<div id="content">
<h2>Page heading</h2>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="footer">Footer stuff here</div>
</div>
		</div>
<div class="copyright">
©Copyright Max Design 2010
</div>
</body>
</html>

My first problem is obviously I don't want to link to his stylesheet but when I retrieve sample.css and print.css, neither one of them seem to be the right one.

crmamx · February 22, 2011

I found it. He is using the sample.css. I added it to my code and renamed it:

<link rel="stylesheet" type="text/css" href="barcs.css" />

It is identical except for one thing. On the link to his site the navigation area is a slightly lighter gray than the header. On my local link it is white.

gizmola · February 24, 2011

cssfreakie really captured a lot of the things I've been saying. As I mentioned previously, one sign of a bad site is inconsistent typography. Another is random colors, which is something your site currently suffers from.

I can elaborate with one other tool that is helpful: http://colorschemedesigner.com/

You pick colors you like and it lets you play with different schemes using color theory to determine which colors go nicely together.

As for Joomla and Drupal, they are written in PHP so you can code customizations, but you probably would not be needing to do much if any. The templates themselves are a mix of html and php, and in my experience that is where you would most likely need to do a little php tweaking.

The main reason I brought those up, is that the ultimate goal seems to be for you to provide a site that the club can maintain over time, and one that is static html and php with a few include files that you have to hand edit most of the time, is not going to provide that. Once that occurs there will be pressure on you to provide a solution that allows the members to update content, and pretty soon you'll be writing your own cms.

Learning either CMS still requires a substantial investment of time, but purely based on the type of site you have, I would probably look at using Joomla 1.5x, possibly with the K2 CCK plugin. For the most part your exercise would be getting it installed, and from there configuring the site to have the layout and blocks you want.

You probably should do a test install and try and move over your current site, just to see how what would be involved.

Sign In

Radio Control Model Airplane Club

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information