Step #3
Order your heading text for the top of the web page. You can order Discount Widgets or the name you've chosen for your website. Be sure to specify the Webstyled7 template on the order form. Get It Now
When you receive your heading text graphic, save it in the WebStyled7/images folder.
Step #4
Open NoteTab Light and load webstyled7/default.html into the editor.
First we'll change the document title and meta tags
At the top of the editor window find these 3 lines of code:
<title>Webstyled Template #7</title>
<meta name="description" content="Webstyled Template Seven">
<meta name="keywords" content="free web template">
Change them to:
<title>Discount Widgets</title>
<meta name="description" content="Widgets at discount prices and free service for all our widgets.">
<meta name="keywords" content="discount, widgets">
If you've chosen a different name for your website , enter your title, meta description and keywords accordingly.
Save the Web Page
Dig: More on Meta Tags
Step #5
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
To add our new heading text graphic, find this line of code:
<img src="images/heading-text.png" style="margin-top: 65px; margin-left: 90px" align="left" border="0">
Change: heading-text.png
to
discount-widgets.gif
or change it to the name of the graphic that you saved in the images folder for your heading.
Save the Web Page
Preview in Browser
Dig: More on Using Images and
Adding Images
Step #6
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
Now let's change the links to the list of 5 pages we planned.
Find this block of code:
<!--Edit Links Here-->
<p><a href="sub-temp1.html">Page Number Two</a></p>
<p><a href="sub-temp1.html">Page Number Three</a></p>
<p><a href="sub-temp1.html">Page Number Four</a></p>
<p><a href="sub-temp1.html">Page Number Five</a></p>
<p><a href="sub-temp1.html">Page Number Six</a></p>
<p><a href="sub-temp1.html">Page Number Seven</a></p>
<br>
Change the code to:
<!--Edit Links Here-->
<p><a href="index.html">Home</a></p>
<p><a href="about-us.html">About Us</a></p>
<p><a href="services.html">Services</a></p>
<p><a href="products.html">Products</a></p>
<p><a href="contact.html">Contact</a></p>
<p><a href="sub-temp1.html">Page Number Seven</a></p>
<br>
Delete:
<p><a href="sub-temp1.html">Page Number Seven</a></p>
Save the Web Page
Preview in Browser
Note: If you click on the page links now, you will get a Cannot Display Webpage error message. The new web pages do not exist yet!!
Dig: More on Hyperlinks and Anchor Tag
Step #7
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
Now let's change the page heading.
Find the code:
<!--Edit Body Text Here-->
<h1>Webstyled Template Seven</h1>
Change it to:
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Home</h1>
Delete current web page text and images.
Beginning with the code:
<p>Place your own text between the paragraph tags ,
carefully delete everything down to:
<br clear="all">
</td>
Your HTML code can be added to the page using the drop down menu on the left of the editor window. If it isn't selected choose HTML from the drop down menu.
Set your cursor directly below the code for the page header tag:
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Home</h1>
Scroll down the HTML tags list to Quick tags and double click the p for a paragraph tag.
This will add the code: <p></p> to the page.
Type some words between the 2 paragraph tags so that you end up with something like:
<p>Discount Widgets has been supplying the world with widgets of all styles and colors since 1965.</p>
That's all the text we'll add for now. This is going to be our template for our 3 column web page. One more change and we're done.
Save the Web Page
Preview in Browser
Step #8
Open NoteTab Light and load webstyled7/default.html into the editor. (Ignore if already loaded.)
Let's change the footer.
Find the code:
<!-- edit Company info Here-->
<address>Company<br>
Address<br>
Email</address>
Change it to:
<!-- edit Company info Here-->
<address>Discount Widgets<br>
Somewhere, Someplace<br>
contact@discount-widgets.com</address>
or enter your real company information.
Save the Web Page
Preview in Browser
The 3 column template page is completed. You can now use it to create the 5 pages of your website.
If you prefer the 2 column design for the interior pages, load sub-temp1.html into the editor and repeat the steps 4 thru 8 for its modification.
After you finish modifying sub-temp1.html, you will have a template for a 2 or 3 column page.
Step #9
Let's use the 3 column template as our home page.
Open NoteTab Light and load webstyled7/default.html into the editor.
On top left of Editor Click File - Click Save As
Enter: index.html as the filename
Click Save
We now have our home page. (index.html)
default.html is preserved as our 3 column template.
Step #10
Let's create the remaining 4 pages using the 2 column template.
Open NoteTab Light and load webstyled7/sub-temp1.html into the editor.
Be sure that you have completed steps 4 thru 8 for its modification.
On top left of Editor Click File - Click Save As
Enter: about-us.html as the filename
Click Save
We now have our About Us page. (about-us.html)
sub-temp1.html is preserved as our 2 column template.
On top left of Editor Click File - Click Save As
Enter: services.html as the filename
Click Save
We now have our Services page. (services.html)
On top left of Editor Click File - Click Save As
Enter: products.html as the filename
Click Save
We now have our products page. (products.html)
On top left of Editor Click File - Click Save As
Enter: contact.html as the filename
Click Save
We now have our Contact page. (contact.html)
If everything has gone right you should be able to Preview the Contact page in the browser and access all other web pages.
Note: you can save time on Step #11 by using the Reopen function under File instead of Open.
Step #11
Now open each individual page and change the page header according to its page name:
Change:
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Home</h1>
to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Products</h1>
on the products.html page.
to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Services</h1>
on the services.html page.
to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>About Us</h1>
on the about-us.html page.
to
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Contact</h1>
on the contact.html page.
NEXT --> Add an image to Product page
Common Problems
You can save some clicks by setting your default filter to HTML. Here's a visual tutorial that shows you how. Filters Tutorial
I'll be expanding this tutorial in the next few days. A step by step guide was requested by some of our users. This should get you going.
|
