Creating A Simple But Effective Website Part 1 - Design

[twitch 0]

WARNING: This is a VERY image heavy tutorial and will take time to complete

Notice from twitch:

Topic closed until I can find the time to complete it, and I am getting mad with the large scale plagrism of other articles.

Also, the images will no longer work, as I have changed domain name and also removed the images to make space.

Creating a basic but effective website
For beginners

Introduction:
Ok, so maybe you want to make a website that is âworthyâ of the web. That is to say, you have made small taster sites before in FrontPage or something basic like it. And realised that no matter how you tried, you could only do so much, and it still wasnât looking as good or respectable as larger sites. I was in this position only a few months back. Through sheer determination, I eventually learnt that it takes more than some WYSIWYG editor and Paint to create a site. And the site doesnât need to be all hip to be good.

Unfortunately for me, I threw myself in the deep-end and took on everything like a bull in a China shop, and literally got no where in a hurry. It wasnât until I started relaxing and taking my time that my abilities started to rise. I am still a beginner in the design industry (I have not even scratched Photoshop yet) and would like to share with you all, my take on design and development.

In this two part tutorial, I will show you how to design and develop your site.

If you do not want to design, but want to start on the development, then download THIS FILE, inside you will find two folders:

• 
  
• PNG - This is where you will find complete.png, the file I used for this tutorial
  
• Fonts - This is where you can find all the fonts used in this tutorial.
  

Then, skip to the next tutorial (published 5+ days from this tutorial).

What you will need:
In order to complete or even start this tutorial, you will need the following.

• 
  
• Macromedia Fireworks MX 2004 or 8 - you can get it by visiting

http://www.adobe.com/
Macromedia Dreamweaver MX 2004 or 8 - find it at the same place as Fireworks
Brains - if you havenât one brain cell, then unfortunately I donât know where to download one.
Letâs Begin:
Firstly, once you have Fireworks, fire it up. Then, create a new file. Make it 1500pixels by 750pixels. The reason we are making it so large, is so that we can accommodate for the larger ranged monitor resolutions, with the background pattern we will be creating. Keep the resolution of the document at 72 pixels/inch and the canvas White. I personally prefer the white canvas as it is much easier to work with, a transparent one scares me. It is your choice, but it may be easier following the way of the white. As for having the document resolution at 72 pixels/inch, this is the default resolution, that all or most designers use, when creating web projects. Below is a screenshot of what you should have.

Screenshot 1

Now that we have our document, we are going to start by zooming in to 100%. On your keyboard, hold CTRL and press 1 on the numeric keypad. The size may seem imposing, but in time it will all fall into place.

We are now going to create the background. Those who saw an earlier version of my website will recognise the background we are going to create. Anyway, letâs get on with it. Firstly, select the Rectangle Tool, located on the Tools Panel.

Screenshot 2
If you can not see the panel, go to Window > Tools. Once you have the tool selected, create a rectangle that is small, it doesnât matter about the size yet, as we are going to adjust it in a minute. Once you have your small rectangle made, change the X and Y co-ordinates to 0 and the Width to 495 and the height to 750. This will make the larger rectangle that will make up the left hand side of the background.

Screenshot 3

Now that we have that, we are going to make it sightlier. I consider the background to be as important as any other part of a website, and to leave it to the last minute is often a bad decision. The background is the foundations of a website, and with dodgy foundations, comes an unstable building.

To make it more appealing, we are going to add a gradient and a texture. This may sound simple, but the effect created for the amount of effort is very good. Click on the drop-down that says Solid to Gradient > Linear.

Screenshot 4

It might not be the same colours as I have on my screen. Now that we have a gradient, the colours are still not the ones that are in the colour scheme. Click on the little down arrow on the gradient box, and then click on the bottom-left colour pot. Change the colour to #009900.

Screenshot 5

Then, on the bottom-right pot, change the colour to #004F00. That is that part done. The colour scheme is going to consist of greens, blues, blacks, whites and the occasional other-colour.

We are now going to apply the texture. Please note that in Fireworks, there are two ways of styling a fill. Using the Pattern simply changes the whole thing and fills it with the desired pattern. I almost always never use this, unless I have created a specific background tile and want it to be used across the document. The Texture is what I use more commonly. It keeps the current formatting, just applies the texture inside the object. We are going to use Line-Diag 2 for this one. Then, change the percentage to 15%, so that it is not over-powering.

Screenshot 6

There, we have created the first panel of the background. Now, select your rectangle and copy/paste it. Then, go to Modify > Transform > Flip Horizontal, this will make it a lot easier for making the opposite panel of the background.

Screenshot 7

Move the newly created panel to X = 1005 Y = 0. This will put it on the other side of the document. Now, we need to change the texture so that the lines go in the opposite direction (vertically). So, in the textureâs drop-down, choose Line-Diag 1.

There, we have almost finished the background. Now to add a simple part, the centre column. For this, we are going to use a simply colour, so, instead of messing around with a new rectangle, will pick the easy way out. In the Properties Panel, at the bottom of the application, change the colour pot of the canvas to #4C4C4C.

Screenshot 8

I suggest at this point you save. Throughout this tutorial, I will continuously tell you to save. Personally, I save all my work with the generic name of Layout_[pagename].png. Fireworks saves all of its work in .png (until you start exporting) and the layers and parts of your development are kept. So, to save, it is pretty simple. File > Save.

Now, the background isnât finalised. Although this is just management, I find it useful to do. Select both of your rectangles, by either holding Shift and click on each one, or in the layers panel, hold Shift and select each one.

Screenshot 9

Then, once they are selected, hold CTRL and press g on your keyboard to group these objects. Then, simply change the name of the grouped object to BG (double click on the object in the layer panel).

Adding the main layout:
The background was the foundations of the site design, so now it is time to move onto the main attraction, and possibly the hardest part of the design.

Firstly, we are going to look at the header. After all, it does make sense, it is the first part of the site most people will notice. For this, we are not going to do anything too fancy and technical. Use the Rectangle Tool, and create a rectangle that is 500 pixels wide, 75 pixels high, X = 500 and Y = 0. Now, the graphic you will get, will have the formatting of your BG. No worries, this is because the program has simply remembered the last formatting control. Now, we want to remove the texture, so, in the percentage field, change it to 0%. And the line-diag will disappear. However, the gradient isnât the colours that we want. Change the bottom-left to #336699 and the bottom-right to #172F46. This will give use a better and calmer gradient. The balance against the site is now, unfortunately out. So, we are going to change the direction of the gradient from horizontal to vertical (for those into the mathematical side, y=0 to x=0). To do this, make sure your rectangle is selected. A gradient angle/position object will appear. Hold left click on the Circle pointer and move it so that it is on the bottom of the rectangle. Then, angle/distance the square pointer, so that it is EXACTLY adjacent to the circle pointer.

Screenshot 10

We now need an example logo. Although many designers may frown at putting it on now, I actually think it is better to put a âbetaâ of the logo in the place of where it is going to go. Using the Text Tool, draw out a rectangle, anywhere within the header.

Screenshot 11

Afterwards, in the text-box, put PERSONAL PAGE. Change the font to Trebuchet MS (or Tahoma), size 25, Smooth Anti-Alias.

Screenshot 12

Moving on:
With a header, underneath comes a navbar. A navbar or navigation bar is needed on every site. No matter how many pages or its structure. Even Flash websites require navbars. For this, we are going to create something dark, but subtle and keeps in touch with current colour scheme.

Directly underneath the header, make a new rectangle that is 500x20 pixels. Make sure the gradient is changed to Solid and the colour set at #172F46. We are also going to apply a subtle texture. In the texture field, choose Hatch 2, and have the percentage at 8%.

Screenshot 13

To add the items of the navbar, we are going to use the text tool. Again, draw a text box, and fill it in with what you can see on the screenshot below. To get the spacing between the words and dashes, use TAB key.

Please note that you will need AgencyFB font installed. You can find it by downloading the file packet found at the beginning and end of this tutorial. For the positioning of the text box, revert to the screenshot.

Screenshot 14

DONE. Seriously. We have covered the design aspect. As I am only covering the homepage, no other designs are needed. To create an image holder, use the skills you have accumulated so far.

So what about the rest of the design I hear you say? Well, the next parts are done with pure CSS/HTML.

The header is ok as it is. If you want to spice it up between now and the next part of the tutorial, then ok.

[akijikan 0]

The problem with flash based pages is mainly that their content won't get indexed by search engines. I think that when a page is completely flash it is really disadvantage for the creater and the user.

[twitch 0]

The problem with flash based pages is mainly that their content won't get indexed by search engines.  I think that when a page is completely flash it is really disadvantage for the creater and the user.

1064327849[/snapback]

And that is why I don't like 100% Flash sites (unless they have a HTML version as well).

[soleimanian 0]

And that is why I don't like 100% Flash sites (unless they have a HTML version as well).

1064327870[/snapback]

you can desgin, both HTML and Flash Pages

[twitch 0]

you can desgin, both HTML and Flash Pages

1064327895[/snapback]

Yes you can, however, I still do not like Flash.

[iGuest 3]

thnx man nice infooo......

[jeremyvicencio 0]

30 tips to help webmasters become successful in their websites and rank well in search engines. Following these tips will no doubt take you far.

 

HTML Editors

Try to refrain from using HTML editors and using notepad. HTML Editors are less customizable than doing it yourself.

 

No Flash

Flash animations are nice, but make it difficult for people who don't have flash support and is harder for SE Spiders to crawl your site.

 

Notice from m^e:

Rest of content deleted as whole post was plagiarised from: http://forums.xisto.com/no_longer_exists/

 

Lost credits worth: 16 days.

Edited November 15, 2005 by miCRoSCoPiC^eaRthLinG (see edit history)

[minnieadkins 0]

Some of those tips are pretty useful, but maybe you should have included them in a code block or something. I'd say a mod will work with it. Anyways, the whole topic is obviously directed toward a WYSIWYG approach. I started using netscape's built in web design program and I personally think that I started on the wrong path. In dreamweaver, when you said make a new rectangle does that make a new division? What exactly can dreamweaver do? I know it can be useful to code some meaningless and repititious stuff. I recommend looking into basic templates involving css.

http://www.ssi-developer.net/main/templates/3col.shtml

Look at some of those layouts and some of the code to get a good idea of a what most users expect of a website.

[organicbmx 0]

Splash PagesSplash pages are not ideal as first impressions are everything. People generally scan a website between 10-30 seconds before deciding to leave or stay.

i disagree, the point of a splash page is to load quickly and allow the vistier to guage if they want to view the site. a minimal first impression may not totally express the site but it is much better than the same impatient visitor to just leave becasue the page hasnt loaded yet.

splash pages are great as long as they aren't stupid ages to load uninteresting flash animations, then they are a serious crime. also my opinion of flash pages is very low, they are un-nessisary, slow, irritating to get images or words off, and often bloated with too much animation.

[lecius 0]

This is a good one but this is my favorite tutorial

 

How to Make a Website Of Your Own

Here's some advice on how to build a great web site and avoid the steep costs of hiring a designer

 

There are several ways to make a website but all of them will cost you either time or money or both. Don't worry though, there are ways to minimize either or both costs to a bare minimum so keep reading.

 

You can either:

 

* Hire a professional designer to create a site for you OR

* Build it on your own and never depend on other people for making websites.

 

Notice from m^e:

Rest of the content deleted because of Plagiarism. Whole post is actually a copied article from: http://forums.xisto.com/no_longer_exists/

 

Lost credits worth 72 days.

Edited November 15, 2005 by miCRoSCoPiC^eaRthLinG (see edit history)

[lecius 0]

And sry for double post this is a really good tutorial.

 

Getting Started

 

There are basically two ways to make a web page. The first way is to create the page(s) offline and then upload them to your Internet Service Provider (ISP) via FTP. The second way is to create your web page(s) online using a Telnet program by accessing your UNIX account, if you have one.

 

If you are creating your web page(s) offline, do so in any text editing or word processing document. Make sure that when you save your document, you save it as a "text", "plain text" or "text only" document. Otherwise it will not be read properly by a web browser. Once you have created your page(s), you will need to contact your ISP about how to go about uploading them to your server.

 

 

Notice from m^e:

Rest of content deleted. Copied in parts from various places - including a good part from:

1. http://forums.xisto.com/no_longer_exists/

 

AND

 

2. http://forums.xisto.com/no_longer_exists/

 

CHEATHOUSE.COM !!!! Wow, the kids are getting really innovative these days.

 

Anyways, Credits lost: 120 days