At this point, it is a good idea to read parts 1 and 2 of The Non-designer's Web Book by Williams and Tollett. The authors not only review basic structures and concepts of the Internet and the Web, but they also go over website file organization and planning.
As well, Multimedia Projects in Education by Ivers and Barron will provide you with excellent insights into the decision making and preparation involved in planning projects for both "Strategies for Application and Presentation" and "Staff Development and Presentation". You should read chapters 1 - 3 and pages 108 - 116 (a bit of HTML) for some background.
Having a stack of books and tutorials is always handy. I have found that the Dreamweaver 2 Bible and Microsoft Office 2000 are both invaluable as references. Additionally, a Google search will net these results for Dreamweaver and FrontPage tutorials. Search for other tutorials. There must be hundreds out there!
Tilt stands for Text, Images, Links and Tables. The acronym was created by Jeff Peach as he sought to isolate some of the most important components of a website. Visit the TILT site, and you'll realize just how simple web authoring can be. For more TILT references, see also TILTing with Tables.
We're going to create a website in FrontPage and Dreamweaver using the TILT concepts. Open FrontPage, give the new page a title and save it in your website folder using the procedures in Lesson One.
T is for Text
Enter some text into the typing area (in FrontPage we call this the Text Editor). Below is an example of text.
Notice that in the image above I've highlighted the text. When you place the cursor to the left of a line in the text editor, you'll notice that the cursor changes to an arrow. Clicking when that arrow appears will highlight the entire line of text. You may also click and drag to highlight just as you would in a word processor.
After selecting, I formatted the text. To do that, I used the Font menu. It's the pull-down menu that says (default font). I selected the text and then chose Lucida Calligraphy as the font.
Then, I used the Style menu and chose Heading 1 as the style for that particular text.
There are many other text formatting options you can experiment with. You can center, right or left justify your text using the toolbar icons. If you want to justify a whole line, you don't even need to select. Just make sure your cursor is placed somewhere in the line you want to justify. To change the text color, simply select the text you want to format and click the appropriate icon.
The above toolbar shows the icons you can use. Think word processing.
Changing the size of text is simply a matter of selecting the text and using the font size menu. It's the pull-down menu in the toolbar just to the left of the icon for Boldface. Create some text all over your Text Editor. Format the text as you like and play around with the options. Have fun.
Images
Adding and positioning images on your webpage is simple, but first we need lots of locations that allow us to acquire ready-made images. Below are several links in the thousands that are available on the web.
Images and animation
Backgrounds
Everything
Graphic text and logos
That ought to get you started. However, you do need to know how to get images from a webpage to your hard drive. This is really simple. On a Mac, just place the cursor arrow or browse hand on the image. Click and hold the mouse button and you'll see a window pop up that gives you the option to "Save Image As..." . Choose this and navigate to your website folder created in lesson one. On a PC, simply right-click to do the same procedure. Place the image in your image folder that you've nested within the website folder. Below, the image on the left is the example I showed in lesson one. All my images for the webauthoring website go in the images folder. On the right is the image folder opened up so you can see that I've placed all relevant images in that folder. Those images are relative to this website.
So, now we can get images. There's more.
What are gifs and jpegs anyway?
GIF means Graphics Interchange Format and JPEG means Joint Photographic Experts Group (How would you like to party with these guys?). These are geek terms for image compression, and it's the way graphics are recognized by HTML code. Most of the time, you need to use lowercase letters followed by a dot and the extensions gif or jpeg (jpg) in order for internet servers to recognize that you've got a picture on your web page. If you're using Windows, the .gif or .jpg is placed there for you. Notice the extensions in the image above on the right.
Putting Images and backgrounds on your Web page
Now the easy part! This is so easy because it's very intuitive! Place your cursor where you want the image. Go to "Insert" and choose "Picture" => "From File..." in the menu bar or use the icon on the tool bar.
A window opens. Navigate to your website folder, choose the image you want, and click on OK.
You can also add images as backgrounds. Use the "Page Properties" window for this. You can see it below. Click on the Background tab and look under the word "Formatting" where you will see that you can browse to your Web Site folder where you should have some backgrounds. If you have no backgrounds, go to Roger's Background Gallery and get some and save them to the image folder in your website folder. You may also use this Yellow Flower background if you like. Experiment with a few. As you will see from some of my other pages, background images sometimes get in the way. If you don't like a background you have set, go back and browse to another one.
Text Wrap
Finally, to wrap text around an image, add the image to a paragraph, select the image, and then go to Format => Position. The text wrap options appear. Select the one you want, click OK, and admire your work.We've put a lot on this page, so we'll move to another page to learn about Links.
Links
.
