BUILD YOUR OWN WEBSITE
We will walk you through the step-by-step process on creating your
own web site, with the use of our FREE web site template below.
We, intentionally, didn't put every detail and explanation of the process, in order to make it simple and easier to follow. If you need to know more, check the recommended readings at the bottom of this page. If you have any questions, you can e-mail us and we will respond right away.
Let's Start!!
Part 1
Creating Your Homepage
1. Download a copy of the template below, by clicking on DOWNLOAD.
2. You will have the following files:
- index. htm - This is the homepage of your site
- images folder - contains all the images of
the web site
- html folder - contains all the text files of the site.
Under html folder, you will find the following files:
- vianet_template.css - this is the file that holds all the font styles, colors, etc. of the site.
- secondpage.htm - this is the template
you are going to use for your secondary pages, such as "About"
page, "Contact" page, etc. It looks very much
the same with the homepage, only that the link paths are
different.
3. Select index.htm, right click,
and choose Open with... (selections of available
program will show), choose Notepad. You will,
then, see the code of your homepage. Now we can start reading
and customizing the page for you.
We will start from the top to the bottom of the code.
4. Put your Logo
Replace the logo to your very own. Save your logo to file name
yourlogo.jpg, and place it under the images folder.
You will get a prompt asking if you want to replace the existing
file. Click "Yes".
One very important thing to remember here is to make sure that your logo's image size is 126 pixels by 100 pixels.
If you find it hard to fit your logo to that dimension, you can change the size in the code to make it compatible with your logo's size.( However, it is best that you won't go beyond 100 pixels for the height.) To do this, find the section below, and change ONLY the highlighted text:
<!-- change width and height measurement of your logo image here, if you need to -->
<td width="100%" rowspan="2" align="left"
valign="top"><br />
<img src="images/yourlogo.jpg" alt="insert your
company logo" width="126" height="100"
/>
</td>
<!-- end editing logo here-->
5. Put your Company Name
Replace the phrase "your company name her"
to the real name of your company, by finding the section below
and replacing ONLY the highlighted text:
<!-- Replace the phrase, "your company name here"
to your real company name -->
<td height="66" colspan="4" valign="middle"
class="name">
your company name here
</td></tr>
<!-- end of company name -->
6. Change the name of link1, link2, link3, link4, and link5 found on the top blue bar of the web page.
To do this, find the section below, and change ONLY the highlighted text:
<!--START editing top side link text here-->
<td align="right" valign="bottom"> <a
href="html/link1.htm" target="_parent">
link1 </a> · <a
href="html/link2.htm" target="_parent">
link2 </a> · <a
href="html/link3.htm" target="_parent">
link3 </a> · <a
href="html/link4.htm" target="_parent">
link4 </a> · <a
href="html/link5.htm" target="_parent">
link5 </a> </td>
<!--STOP editing top link text here-->
7. Change the phrase, Major Text A, and link A here, link B here, and link C here, and so on.
To do this, find the section below in code, and change ONLY the highlighted text:
<!--START editing left side link text here-->
<tr>
<td width="15%" valign="top">
<table width="100%">
<tr>
<td align="left" valign="middle" class="tdnavhead">
Major text A
</td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav">
<a href="html/linka.htm" target="_parent">
link A here
</a>
</td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linkb.htm">
link B here
</a></td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linkc.htm" target="_parent">
link C here
</a></td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnavhead">
Major Text B
</td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linkd.htm" target="_parent">
link D here
</a></td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linke.htm" target="_parent">
link E here
</a></td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linkf.htm" target="_parent">
link F here
</a></td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnavhead">
Major Text C
</td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linkg.htm" target="_parent">
link G here
</a></td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linkh.htm" target="_parent">
link H here
</a></td>
</tr>
<tr>
<td align="left" valign="middle" class="tdnav"><a
href="html/linki.htm" target="_parent">
link I here
</a></td>
<!--STOP editing left side link text here-->
8. Change the text in the main center area of your page:
One very important note: please refer to the proper way of writing the paragraph before starting here.
Now, let's first change the heading of the content by finding the section below from the code, and changing ONLY the highlighted text:
<!--START editing main content here-->
<tr>
<td align="center" valign="top"><h1>
PUT TITLE OF YOUR CONTENT HERE
</h1></td>
Now, change the content paragraph by finding the section below, and changing ONLY the highlighted text:
<tr>
<td align="left" valign="top" class="tablecontent">
You can put your own text here. Remember to use the right way of writing the text for web site.
Always refer to the instruction of "Building Your Own Web Site"
by VIANET WEB DESIGN.<br /> <br />
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
text ... text ... text ... text ... text ... text ... text ... text
... text ... text ... text ... text ... text ... text ... text ...
</td>
<!-- STOP editing here -->
9. Save your revised code (Click File, Save).
10. Congratulations! You just build your own homepage.
To check how it looks in a browser, Go to Window Explorer, and double click on the index.htm file. It will automatically open in your browser window.
If everything goes well, we can proceed to building your About Us page.
Go to Part 1 2 3 4 5
Next Page (Building your About Us page) |
