Welcome!
Lesson 1 Tutorial
1
This tutorial was written by 10000mb.com
I own the copyright(s) to
this tutorial! I also own the intellectual property rights
You are free to add this tutorial to your website if you put a link on
your site, back to our site.
Your link should look like this:
With that said...
Here I will teach you how to build your
own basic custom website...step by step.
This is tutorial 1. After
you have finished all 5 lessons go to ... I put these links here in case
you have finished
lesson 5, and needed to take a break. You can link quickly to the next
tutorial.
Tutorial
2
Tutorial
3
See the problem with buying templates...like
300 for 19.95 is...you guessed it,
there are hundreds of people
who have bought the same templates! That means that hundreds of people
have the
exact same website as you do! That will not make your website
stand out! It might give you
some really good ideas, but what you want is to make your site stand out
with you own personality!
So now you will be able to create your own templates for your site! Cool
huh!
As a bonus, I have added a few of my own templates
for you to try yourself. Try to figure out how
I made them, and try to design something simular. If you can, you are
well on your way!
After going through this tutorial, you should
be able to re-create these websites
that I have done.
I used all of the graphics that the client sent to me, or created myself.
To use the graphics I have done on these sites, you can right click the
graphic on the web, and save it.
Illinois Central Railroad
Meridian Business Solutions
AutismIllinois.com
B-Cools
10000mb
This is what most books do not tell you.
How to build this part, and put it into that part, to make a complete
part...uh...page!
They usually tell you one or the other. This tutorial tells you both!
How to create your own graphics for your website, How to put your own
graphics
you just made into your website program.
They expect you to already know that! Now
you will.
You will learn how to create a banner from scratch, links, etc., using
your own graphic
tools you want to design with. Even if you hand code HTML (not taught
in this tutorial), it will work for you.
I have used Dreamweaver as my tool to put this tutorial together and Paint
Shop Pro 5, to make the graphics
You may use whatever you like, because they are all basically the same.
If you have Dreamweaver though, it will be easier to follow.
We are going to start with a very basic graphic so you
can get the hang of it.
First you have to have a program like paint shop pro, photoshop, even
your regular paint program
might work, but you need to be able to save your picture or
we call it a graphic, as .jpeg or .gif
The reason for that is most people can view these type of graphics.
TIP: If you don't have these tools,
go to your library it's free you know, and grab a book with a cd
that has Dreamweaver
and another for Paint Shop Pro 5, then you get to play around with it
for a certain period of time.
I love the library!
TIP: SAVE YOUR WORK OFTEN!
First open your paint program. I am using Paint Shop Pro 5, but they
all work basically the same way.
You will notice that on the top you have
File, Edit, View, Image, Colors, Layers...etc.
Put your mouse over the FILE and click new. Whatever the dimensions
are, just click OK.
I want to first show you how to save your work correctly.
Put your mouse over the FILE and click.
You will notice a pull down menu.
Look for the Save As...
Here is an Example of a save as...file (for the web graphics)
Click on the Save As...
Then you will see this box come up. This is how you will save your graphics.
But what I really want you
to notice is the Save as type pull down menu. Click on any of those
and your files will be saved as that
file type. You will notice I clicked on .gif
You will notice here you can save it as a .gif, .Ibm, .jpeg, etc. Most
of the graphics will be saved as either .jpeg, or .gif
(Every once in a while you will see .png that is a macromedia file, for
fireworks, I have noticed though when I save it like
that, not everyone can see it, so I would recommend, .jpeg or .gif).
Let's Create a New Page:
There are 3 ways you can do this.
This is the first way.
The 2nd we will go into later in tutorial
2 template 2, and 3rd in tutorial
3 template 3.
The first way is to make a graphic and use that graphic as the
entire website template. In other words, every page
has the same look and feel as the next. We call that fluency. Alot of
website designers do this.
It gives you fluency throughout your website.
Meaning, the links, and logo will be in the same spot on every page. FLUENCY!
The only thing that changes is the text, graphics, and anything else you
decide.
You can change all the text in your pages, but it keeps the same template
for every page.
All corporations have fluency to their site, and any web designer worth
his or her salt does the same thing,
it does not matter how you do it, just do it!
One way to tell if you are a new designer is to look at all the pages
in a website. If the pages are
all over the place, without any type of fluency...ie...one page has one
template, another page has something completely different,
and still another has something totally irrelevant to the site..., everyone
will know that this person is new to designing.
That is not to say they are bad designers...just new, and they have not
learned fluency. BUT YOU WILL!
Open up your paint program again, (if it not already open).
Click on the top left where
it says...
File and then New. After you click new...you will see something
resembling this...
A standard web page is 800 in
width by 600 in height. Choose the background color you like.
I did not use 800 x 600 because I have so many graphics, I wanted the
page to load a little faster
for you.
Now let's draw.
Depending on your program, you
should have a new page to work with, and a way to create
a picture that should look something like this.
Here are the paint tools in Paint Shop Pro 5.0 To the
left side you will see ICONS (magnifying
glass etc.) you will use
in the program and what they do, and right next to that I have typed in
what each of these do. Like Magnify.
Let's Begin!
End of lesson 1.
Let's go to lesson 2.
Make sure you can do all of these things before proceeding!
Website Hosting Website Domain Names Website Hosting ASP Website Hosting PHP Website Hosting MySQL