|
As part of our Young Web Developer section, Silvergateway.com will walk you through some basic planing of your website. It's importune that you have a good idea of what you want before you start to build your new site. I will walk you through some basic steps for planing your new site, give you a basic outline for a site layout, and suggest some places you can look for finding a template that will get you a starting place in the look and feel of your new site.
Basic planing
Before you can doing anything you need to know what your site will be about. Your imagination is the limit here, from a site about your favorite pet, a personal journal, a personal homepage that give you easy access to all your favorite sites, even a page that play your favorite MP3's or videos. So lets start with a few point form questions to get you thinking about what your new website should be.
- What is the Name of your new website?
- What will the site be about?
- Do you want music on the site?
- Do you want videos on the site?
- Will the site keep track of special events?
- What links do you want on your site?
- Do you want to embed other websites in your page for easy browsing?
- What are the different sections of your site going to be?
- Do you want a photo gallery on your website?
- How do you want that photo gallery displayed?
- What is your over all goal of this site?
These are likely not all the questions you should ask yourself about what your new site will be, but it is a start to get you thinking. Make sure you take notes of the above questions and your answers, it will help keep you on track as you work towards goal.
How do you want the site to look?
Now the Joomla CMS system comes with some basic looking templates, they are good to start with, but I am betting your going to want something that looks a lot cooler. There are a whole host of free templates available for the Joomla system, hence why I suggest we use this system in the first place ;)
There are also some good Pay template demo sites out there, RocketTheme being an example of such a demo site. I am not suggesting you buy anything, this is supposed to be for fun, but using the themes for ideas of what you would like on your own site is a great idea. The other major question is... What colour do you want your site to be? I currently do not have the demo page up on our sites section of Silvergateway.com, it should be there soon. But regardless there will be a sort of colour wheel on the top right of that page. Using this will give you a good idea of what colours will go well together. So lets get so questions rolling here and go exploring some free templates, and some good demo pages.
- What colours do you want your site to be?
- Background colour?
- Foreground colour?
- Text colour?
- Link colour?
- Heading colour?
- HINT: Pick a few different colours and put them together using a graphics program like GIMP. Set them side by side on top of your background colour to see if you like the way it looks.
- How do you want your site layed out?
- Should the site have a lot of different modules? (modules are side blocks that are separate from the main content)
- Should the site be clean and simple?
- More or less text?
- Lots of images or videos?
- HINT: Before looking at anyone else's work, take a peace of paper and draw what you think your site should look like. It dose not have to be perfect, just a general idea of what should be on the site and where it should be located.
Now that we have a general idea of what your site should look like, lets go have a look at some other demo, and template sites.
Getting some ideas and picking a template
I think we will start by looking at some demo sites from RocketTheme first, we should also take a look at YOOtheme as well. These two companies are the leaders in template design, so they should help give you some ideas well making the plan for your site. Again take notes of what you like and don't like, also go visit some of your favorite sites and figure out what you like and don't like about them.
Now that you have gone through some professional templates, and hopefully some sites you like as well, you should have a good idea of what you like, and how you would like your site to look. Now lets look at some FREE templates that you can easily get access to and add to your site.
NOTE: Just remember that you are looking for templates that are for Joomla version 1.5 NOT version 1.0
Warning : Free templates are not always coded very well. It is for this reason I would suggest you only use your personal site as a personal site, and do not put it live on the internet. There are security issues that if you do not understand you can open your site and the server it runs on to hacking attacks.
What makes up a web page
A web page is made up of several components, in regards to layout. Below is an example of the different sections.
 |
The very top of a page is called a Header.
Normally included in a header are your Logo, Main menu, and sometimes a search box and banners.
The left and right sides of the page are module positions. Modules can be placed allover the page depending on the template. For example this template has 20 different module positions. Modules can have polls, search boxes, ad's, pictures, text, and just about anything else you can think of. They are an easy way of both dressing up your web page, but also leading to other sections of your site.
The main body or content is the space for your articles. These will be the articles you write to take up the main focus of your page.
Banners : Just a quick note about banners, if you ever decide to start developing on a professional basis. Banners that come from other websites, such as google will effect your site load times. Also these style of ad's have there own terms, such as google only allows you to have a maximum of 3 on one page. But the most importune thing to remember about ad's on a website... They are irritating, don't drowned your visitors in ads.
The bottom of a page is called the Footer.
This is typically where you would keep your copy right information, address, hit counter, site map, your terms and conditions.
|
Colours and changing them quick note
Websites are all controlled by something called cascading style sheets or CSS. CSS will control the colour of text, text size, link colour, your site background. Really anything everything is controlled by the CSS file in the template, and that makes it easy for us to change the look of the site. Now we will get into some detail later on in this guide, but to give you an idea of what a CSS file looks like here is a example.
|
body {
color: #000000;
background: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: #006699;
text-decoration: underline;
}
a:hover, a:active, a:focus {
color: #333333;
text-decoration: underline;
}
.button {
padding: 3px 5px;
border: 1px solid #333333;
background: url('/../images/grad1.gif') repeat-x top #333333;
color: #CCCCCC;
font-size: 85%;
text-transform: uppercase; |
To the left is an example of some CSS, lets go over a few of the items listed here.
body {} - This is setting the main colour of the site, in this example it is also setting the Font type and colour
a {} - Now a sets the colour of a link this is what we use on this site to change the colour of a link for the standard blue to the green that we use.
a:hover {} - Along with active, focus all controls what happens when you run your mouse pointer over a link. In this line the css is changing the color of the link and adding an underline.
.button {} - This one looks a little more complicated, but its not really. One of the other things we can do with CSS is create titles or buttons. So rather then having hundreds of images for buttons we can use one image and have it stretch to make our button as we need it.
padding is adding a space around the text
border is adding a small thing line all the way around
background is setting a colour and adding an image overlay
The reset is setting controls for the font
An example of this would be this line here by wrapping my text with <span class="info"> adding this text, and closing with </span> I can use my CSS in my content.
|
Well I hope you have some good ideas on the direction you would like to take your website. Don't worry if you don't have answers to all the questions or if your not entirely sure what you want to do. The ideas will come, the most importune part is that you have fun and learn some new things. |
