Building a Website
Step by Step
Adding an Image
It is a good idea to keep your images separated from your html documents. This practice will make your website easier to maintain.
The webstyled7 folder that you downloaded included a sub folder for images. Store any images you wish to place on your pages in that folder.
This tutorial assumes that you completed the process of creating the 5 page website from the 2 original templates.
This simple tutorial will show you how to add an image to the product page.
Step #1
Open NoteTab Light and load webstyled7/products.html into the editor. (Ignore if already loaded.)
First set a paragraph tag.
Find this block of code:
<!--Edit Body Text Here-->
<h1>Discount Widgets<br>Products</h1>
Set the cursor below the h1 header tag.
Scroll down the HTML tag list to Quick Tags and double click the p for a paragraph tag.
While the cursor is still between the tags, scroll up to Image Elements and double click Image.
Use the dotted square to the right of the Image filename box to navigate to the webstyled7/images folder.
Click on color-scheme2.gif and then click Open.
Set Align to left
Leave Horizontal and Vertical space blank
In image text description Type: Color Scheme2
Click OK
Add text to the paragraph.
Type some text between the closing img tag bracket and the closing paragraph tag
The code:
Scheme2"></P>
For example:
Scheme2">Color Scheme2 is our favorite widget. It's free and can be used on any PC to plan the colors of your website.</P>
Save the Web Page
Preview in Browser
|
