|
Over
the years we have found that most people get stuck on this
section so we have included some more videos to help you. We
are going to follow on with the theme of Podcasts however
before we do you can find templates to save you some time.
I want to
show how you can have a site up and running in a very short
period. In this
section you will start to set up a template. We
will first look at some samples and then we will use one I
have created for this tutorial. This is the foundation of all
your web pages so set aside some time to do this workshop as
it can be quite lengthy. I have created a page as our example
so you will learn how to use tables, side bars etc. Of course
many websites do no use this method however once you learn the
technique you can branch out into different areas.
The whole purpose of this
tutorial is not so much to build a web site as to teach you
all the different elements.
I have chosen quite a hard
template to start with so you can get used to all the
different aspects of web page creation. Don't be put off
because I have also produced videos to show you exactly how it
is done.
SITES FOR
TEMPLATES
There are some great sites that
have templates for you to use. If you're connected to the
Internet you can click on the links to have a look at some. In
this tutorial we will use a specific one and show you how to
produce your page using a pre-designed template. Once you have
seen how it works, then you can progress on to make your own.
You can also now get Flash page templates which incorporate
Macromedia.
Free
Templates:- This has a great range of free templates.
Central
Templates:- Very basic but it will give you some ideas.
For one of the greatest ranges
of side bars and templates go to Royalty
Free Art.
Your
First Template
Ok, let's get started.
Click on this link http://www.msincome.com/myweb/tp16.htm
to open your browser. This is what your page will look like
however we are now going to personalise it with your
information. Its important that you open this file in
Internet Explorer so you can save all the elements. Do not try
to open in firefox or another browser as it will not save the
complete page. Copy the link if you do not usually use IE.
Create a folder called tutorial on your hard drive. Now in your browser go to file and save this file into your
tutorial folder we just created.
Open your Sothink editor and
open the file tp16.htm and go to the design tab at the bottom
of the screen. The dotted lines are tables and we will discuss
them later.
Alternative
Video Source
Renaming
Your Page for Favourites.
Once you have the page in your composer
right click anywhere in the page and choose page properties. When the new window opens you will see it is named
XYZ Co Online - Put Your Slogan Right Here in the
title area. This is the area where you put the name you
would want people to see in the top of their browser and also
what will be saved if they choose to add your page to their
favourites. In this example we will call it "Widgits for
everyone". Go ahead and highlight the current name XYZ
and type in Widgits For Everyone and choose OK.
Personalising
the Page
At the moment you will notice your page is
called XYZ and has a whole lot of text. This part is just like
a word processor where you can highlight any of the text and
change it by typing new text. For now, let's call your site
"WIDGITS" (instead of "XYZ ") and the
slogan is, "Something For Everyone". Highlight
"XYZ" and type Widgits. You can adjust the colour
and size of the text just like your WP on the toolbar to suit.
Just click on the yellow " W"
Type over "A Slogan" with "Something For
Everyone" and decrease the font by using this button
or the font drop down menu..
Alternative
Video Source
We will do a little exercise now to show you
how to personalise this page. The colours for this page are
set in the background. To change the feel you need to insert a
new background. Say, we don't like the brown colour and we
would prefer a white area to put our text in.
Click
here click on this link and go to the page in your
browser, and save the light
brown side bar. By using the right
click button on your mouse, you will see you have a number of
choices. Right click on the graphic and use the "Save
Target" or "Save Picture" depending on your
browser. You can save it as "bg-bu" into the same
folder as your index page or better still add it to the images
folder.
Power Tip:
Once you get a lot
of images its better to put all your images in an "image"
folder and save them into it. When you downloaded the template
it might have already created a folder for the images.
Now go back to your composer and right click
to choose page properties. Click on the dots next to where it
says background image and browse to select "bg_bu" that
you just saved. Click on the "OK" button. So, there
you have it. A new feel and a new background. Don't be
concerned about the colour as we will change them next. You
can come back later and experiment a little till you get the
feel you want.
Saving Your
Site
Before we go any further save
this page. Go to your file menu and choose "save as"
and over write by choosing the index file we created
previously.
NB: When loading pages on to
a server,
the first page is either called "index". For this exercise it is
index.htm. This
is the first page that will load up, when a visitor types in
your web address. If your using proprietary software like
Dreamweaver or Front Page then your first page would be
default normally but for this tutorial use index.
Changing
Linking Text Colours
We have now created a problem. The text on
the side bar, ie. the links ( we will talk about these soon),
and the headings don't look any good. Highlight Widgits by
placing your cursor at the beginning of the word and while
holding down your left mouse button drag across all the
letters. You can also just double click on widgits and it will
highlight. Now use yellow "W" button to change the
colours or the font drop down menu.
Power Tip: Do not choose to many different
fonts because your web site visitor must also have that font
on their computer. We usually use arial, times roman or Verdana
Use the brown that is on the far bottom
right hand corner. You can choose another one if you want.
Change "Widgits" to Brown and the
slogan to say dark green.
Hyper Link
Colours
Once again in your composer go
to page properties section. In the background section we were a little while ago you will see Hyperlinks. These are the
colours the words will be that have links associated with
them. The top one is for the first view and the second will be
for a links visited. Simply change the colours here till you
think you have the right mix. I used a Maroon for normal link
which is the default when people visit your site. A dark brown
for the link visited and green for the active link. What this
means is that when your page first loads up the dark brown
will be on. When they click on one of the links it will change
to the assigned colour.
Creating The
Linked Pages
Now we also want to save this
same page as, "about", "products",
"links" and so on. We will then be able to set up a
link to each of these pages. This is so that when you click on
the word on the side of the page, you will be directed to that
page.
You can view your pages as you
build them to check they are correct by using your preview tab
on the bottom of the composer. This is what your page will
look like on the web.
Change the view to preview and
you can try and click on
"About". See what happens. Notice it said file not
found. This is what we call a bad or dead link. To get back to
the normal view click on the design tab. What we will
do is create the pages for these links. In the composer on the
right hand text page type "about" over
"Hello" so you know this is the about page. Go into the page properties and change the Page
Title to Widgits - About. This will make it easier for you in
the next section. Click on
file and use the "save as" function to save this
page as "about" (without the "). Highlight index in the
file name and replace it with about. It will leave the
"index" page and create a new file called
"about". Make sure it is in the same folder as your
index page.
Repeat this process for each of
the words on the left except "e-mail" using the same
page. Replace the word you typed on the first line with the
name of each file (eg. "about" file has
"about" , "products" has
"products" etc). You can type the name of the
"file" in lower case as no one will actually see
this name because we will change all this text when you build
your own site. This means when you have finished you will have
6 pages, including index, saved in your folder. To check this,
simply click on the open icon and see if they are all in the
folder, under the right names.
About Links
Usually if you created the
page you will link directly to the file name eg
"about.htm". This is called
a relative link.
If you link to a page outside
of your folder like another web page it's called an
absolute link. By using relative links you can
produce your page offline which is great for demonstrations,
etc. Once you complete this section you can open your
index file in your browser again and all the links will work
just as if you were online because we will use relative links.
By using relative links you could also put
your work on a floppy or cd and it would work just as if your
were online. Many computer magazines etc use this technique.
This product uses the same format.
Setting Up A Link
What we are going to do now is
edit the links on the side bar, of each page, so that when you
click on them, you will go to the selected page. Open up the
"index" page in your composer and double click on "about"
on the side bar. You will notice the whole
word highlights. Find the link button on the tool bar. Now use
the dots to find the about
file and select ok.
Now go
to your preview mode again and and check that
when you click on the "about" link that the
"about" page opens. The new page should have about
typed where hello used to be. Also in the address menu you
should see the file location. Repeat for each word eg
"products", "links", etc. Instead of
reopening your browser you can now just go back to the index
file using the back arrow and use the refresh button to reload
the page and check that the links works.
Once you have finished linking
each word on your "index" page you will need to open
the "about' page in your composer and do the same process
again. Repeat this for each page.
Power Tip:
after completing the index page links, highlight the words
"about" to "contact" and copy (in the same
way you would in a word document). When you open each page you
can highlight the same words again and paste. This will
quickly add the links on each page. You may want to add a
Home page on all the other pages except for the index page and
link it to the index file.
Creating
More Links
The beauty of building your own pages comes
in here. Open the index file in your composer again and type
the word "Thredbo" over Quentin Brown on the right
hand side in the white area. You can do this on any one of the
pages as it is just an exercise and we will undo or replace
with some other text later. Now highlight the word and go up
to the link icon.
This time a new window will open and in the
Hyperlink type area choose "http" in the drop down box.
( It should be there by default) Type this web address http://www.thredbo.com.au
into the address area next to URL. Click "OK". Save
the page using the disk icon. Now go to your preview tab if you
are online, making sure you have the index.htm file loaded.
On the file you created you now should see
the word "Thredbo" as a link, ie underlined in dark
brown and if you click on it you will be directed to a page at
someone else's site. You have now created a link to another
site. This is called an absolute link. You can do so much here
because you now can link to pages all over the web by just
inserting addresses. If you now click back on the design
option it will take you back to the page you came from. Note
also the link has changed color.
Lastly you can also now choose
the blank option which will mean that the link will open in a
new window of your preferred browser. This is very important
if you do not want people to leave your site completely. Also
lets choose to view the page in our browser by clicking on the
browser button. Now click on the link and a new browser window
will open.
Alternative
Video Source
Nearly Finished
Personalising Your Page
Margins
In this section we are going to change the
margins. The margins in a web page are not usually very
important unless you want to butt the page up against the edges
of the browser. If you go to http://www.microsoft.com
you will see that all the color and the page fills the
whole screen.
The best way to achieve this is
to right click and go to page properties and just change the
margins to "0" for both top and left. This changes a little bit of html
so your page will now but up against the side of the
browser.
This doesn’t necessarily work
in all browsers so use it carefully.
Text For Your
Site
To add some text you will want to overwrite
the text that is already on each page. This all works much the
same as a word processor.
Remember if you make a mistake go to edit and choose undo. We
will go into tables later on to show you how to make and
resize them.
The easiest way to complete
this task is to go to this google
and search for widgets definition. Now go to your composer and highlight
all the text and then copy and paste the text from the web
page. You should also write some of
your own and follow the same procedure.
Sometimes it is difficult to
highlight with your mouse. It seems to want to highlight more
than you want. You can place your cursor where you want to
start and use your keyboard. Hold down the shift key and use
the arrows on your keyboard to highlight by moving across and
up and down. To add new text you can either copy and paste
from a previously created document or simply type it in
directly.
There are the standard tools to
bold, italics, underline, font, colour, size and type. NB.
The fonts you use in your web page must be on the viewers
computer as well otherwise the font will default to a standard
one. Use the principle of KISS (Keep it super simple).
Most people use Arial, Times Roman or Verdana. Don't make your
text to big and include lots of space.
Lets
have a look at the Graphics
|
