Lessons

Resources

Full Course Outline
Skills Test Quiz - Under Construction
Certificate of Completion
Post-Class Survey

Questions?

Please feel free to post your questions or comments below. If you have questions about a specific lesson, please specify the lesson number and the time index in the lesson where the issue occurs. Thank you!

Subscribe for Updates

If you would like to be notified whenever changes are made to this page, new lessons are posted, or comments are made, click on the subscribe button.

Subscribe to FrontPage QuickStart
Get notifications when this page is updated

Intro

In this video, we'll walk through the basics of website design and planning, discuss how the internet and websites work, and then get started using Microsoft Front Page 2000 to build a simple website from scratch. You'll learn how to create and organize web pages, set up navigation with hyperlinks, add and manage images, use basic formatting tools, and work with both internal and external links. We'll also talk about best practices for site planning, file management, and choosing the right graphics formats. This is a great starting point for anyone new to Microsoft Front Page or web design in general.

Transcript

And of course, if you have any questions while we're going through this material, drop the questions in the chat. We're going to start off today by talking about some basic definitions, a little bit of introduction about website design, and we'll talk about site planning.

I'm going to talk for a little while before we actually get into some material, just to make sure that everyone is on the same page. Of course, the first thing that I'm going to emphasize is that in class, all I can do is show you the features of the software.

In order for you to get good at website design, you're going to have to practice. We use Front Page 2000 in class, but most of what we're going to cover is the same in 2000 and XP or 2002. So, depending on which version you have, it doesn't really matter. What you need to do is practice.

After the class is over, go ahead and practice the examples. If you need to, you can watch the class again in the archive section. In fact, I recommend you sit back and just relax and watch the class the first time through as you're doing a live session, because after that you can go into the archive section and replay the class at your leisure.

Let's talk a little bit about the internet. Now, I'm not going to go through all the material in the book. You can feel free to read through this at your leisure later. Just to go over some basic definitions, the origins of the internet: obviously, the internet began back in the 50s and 60s as part of a military research project to get information around the world.

Of course, the major feature of that network was that it had to be able to survive a nuclear attack. So, in case there was a problem with any part of the network, information could be rerouted. Even today, if part of the network goes down, information can still go around the other areas.

However, that original internet was not very user-friendly. Back in the 90s, they came up with the World Wide Web, which is a graphical way of getting around the internet. Instead of having information just stored in text pages that you had to know where the different pages are stored, they came up with a graphical interface that later became what we know as the World Wide Web.

Now, you're going to hear the term internet. The internet with a capital I is the worldwide network of computers that are all connected together and have web pages, email, and all that in them. An intranet is a network of computers, usually within an organization. An intranet is generally a website set up inside of a company.

Whether you're building websites for the world to see or just your corporation, the tools we can use are the same. We can use Microsoft Front Page and pretty much any web browser to view an intranet just as well as the internet.

A simple definition: a web page is simply a document sitting on the web, sitting on the internet. Web pages can contain text, graphics, sound, video, all kinds of stuff. A website is a collection of web pages usually with a common theme or topic. The home page is the first page in the site. When you type in Microsoft.com in your web browser, you are brought to their home page. That is the first page in the site.

Now, web pages are basically nothing more than straight text files. There is nothing fancy about web pages. However, they have special code in them called tags. We're going to see how these tags work in a future class. The language that websites are written in is called HTML or Hypertext Markup Language. Do you have to remember that? No. If you hear about HTML a little bit later, you'll know what that means.

Web pages contain hyperlinks that let us jump around from document to document. Those little blue underlined words on web pages are called hyperlinks. Obviously, if you didn't have hyperlinks, it would be very difficult to get around. Web pages are stored on web servers. A web server is nothing more than just a computer sitting on the internet with its own address. We'll talk about addressing in a future class. It's just a PC or a Mac or something, just sitting there on the internet, handing out pages to people who request them. Nothing fancy about a web server.

One who develops websites and maintains a web server is called a webmaster. You will also hear the term web administrator, which is common nowadays as well. Of course, computer geeks are always looking for terms that make their jobs sound more important - webmaster.

We view websites with a web browser: Microsoft Internet Explorer, Netscape Navigator, Mosaic, a bunch of other ones. That's just a program that lets us view web pages. It converts those tags into pictures and hyperlinks and things that we can actually benefit from.

Each web page has a specific location on the web, usually an address like www.somewhere.com. That's called a URL, a Uniform Resource Locator. Again, do you have to remember all these fancy acronyms? No. There are a bunch of them. The ones that you start seeing over and over again, you'll just remember them. Do not panic if you can't.

Now, the part of the URL that is at the end of it, like somewhere.com or Microsoft.com, that's called the domain, or the domain name. When you set up a website, you will either be sitting on someone else's domain, for example, your internet provider's domain, or you can register your own domain name, like emicron.com or IBM.com.

If you're using personal web space at an ISP called, let's say, internetboys.com, then you might have your website at their domain. But as your business grows, you might decide to get your own domain name. You can register a domain name anywhere from $15 to $25 depending on where you go. In fact, the going standard cost is $35 a year. But there are places that will register them less expensively for you.

In the book, I also go through all the different types of internet connections, which I'm not going to bore you by going through now. There are modems which connect over the phone line. There are other types of digital connections, DSL, cable modems, leased line, and T1s. We talk about the different types of internet service providers, like AOL and such. If you want to, go ahead and read through those pages in the book, pages 4 and 5.

Let's talk a little bit about planning your website. Even before you sit down behind Front Page and begin to build your website, it's beneficial to plan it out first. I recommend planning it out on paper or on a whiteboard or chalkboard, and going through and trying to get the screen as close to what you're envisioning as possible. That will help you later on so that you're not sitting down behind Front Page unable to think of what to do next.

What I usually suggest is to take a look at some other websites that are out there, your competitors as well, and see what they're doing that you like and that works well for them. Decide on a basic focus or a reason for your site. What are you trying to do? Are you trying to share information, promote special products, entertain people, or sell things directly through your website? Try to have a driving reason and a main focus for your site. Don't try to do everything at first. Just have one focus and stick to it until your site gets bigger.

Now, the basic steps for web development that I've given here - I've got seven steps. I will tell you that these are the steps that you should go through once you are knowledgeable with Front Page and know what you're doing. These are the proper steps for building a website.

However, in class, I don't always follow these seven steps because I kind of have to teach you how to walk before we can run, so we're kind of going to go in a strange order while we're building our first website. That's because I have to teach you some of these concepts.

But generally, here are the first steps:

1. Plan out your website on paper or whiteboard. Sit down and try to write out the screen as close to perfect as you can.
2. Gather as much information as you can about your site. Get all the stuff together: your company brochures, your letterheads, whatever information you want to have on your site, whatever documents you're going to need, pricing, pictures. Try to get all that stuff together and ready upfront. It's better to have it all there than it is to have to stop what you're doing and go and find something, because then you might set the website aside and never get back to it. Gather all the information you can first.
3. Research your competitors. Spend a couple hours surfing some other websites from some of your competitors or some of your manufacturers or other related sites. See what they're doing that works and what annoys you about their site. Just remember, if you steal from one source it's plagiarism, but if you steal from multiple sources it's considered research.
4. Start building your website. Type up your main web page in Front Page. Try to get the first page to look as close to perfect as you can because then we can cookie-cutter it. We can use that first perfect page as a template to create all the rest of them. Again, we're not doing this while we're building our first site just so we can appreciate it more. But that's essentially what you want to do. Get one page looking really good, almost perfect, and then we can use that to build the rest of them.
5. Once you've got a few pages designed, link all the pages together with your hyperlinks so that your site is easily navigable.
6. Add all your graphics and other images. I like to have all the pictures ready, but I like to just put the text of the pages together first, then add the graphics to them. It makes it easier to work with, I think. Once you get all your ideas out, then you try to make the pages look pretty.
7. Test your site, not only on your computer, but try to test it on several different computers if you have access to them. Try to test it with different browsers. If you're using Netscape Navigator, try to get someone using IE to test it. Have your friends check for dead links or hyperlinks that don't go anywhere. We'll talk more about that as the course goes on.

Keep in mind that your website is a direct electronic representation of your company. It doesn't have to be fancy to be good. In fact, a short, simple, and sweet website that is professional-looking and clean is better than a website that's got all kinds of information on it but it's cluttered. So, clean is good. Simple is good.

If you look at some of the websites that I built on my website, I've got my portfolio there. Some of them are real simple. I don't have a lot of information on them, but they're real clean, crisp, and professional looking. I generally try to get the website to look like the brochures or business cards of my clients.

Try to put the important information first. Important things like products and services are more important than job postings or other less important stuff. There are a whole bunch of other warnings and notes that I've put in here on pages 7, 8, and 9, and we'll talk about these as we go through the course. If you want to read through them, feel free to go ahead after class. We'll be going through all these a little bit later.

Let's talk about Front Page. Let's actually get into the program here. Again, we use Front Page 2000 in class. Let me minimize this and pull up my software here. There we go. There it is, Microsoft Front Page. This is Front Page 2000.

I had an email from a gentleman who's using Front Page 98 and he asked if he could use the course. Yes, you can, but Front Page 98 was really more of a single web page editor, whereas Front Page 2000 and 2002 are really better designed to maintain entire websites. It's kind of like comparing a Pinto to a Jaguar. Yes, you can use it to edit single web pages, but Front Page 2000 is much, much better for maintaining entire websites.

I've used 2002. It's very good. I have it installed on my machines here at home, but I usually wait until software is on the market for a while, about a year and a half, until I personally look to it and recommend it to my clients just so Microsoft can get all the bugs worked out and get some service packs out there.

Now, one of the things that I like to do: this views bar over here - I can't stand it. I like to turn that off because it wastes a lot of space. Especially here when I'm broadcasting classes, I'm only going to get a small window to work with on my screen, so I like to turn that off. Even when I'm building normal websites, I like to turn this views bar off because it's a waste of space.

I'm going to come up here and click on View and then View Bar. That will turn that bar off. You can get to all those things on the views bar by just clicking on View, and here they are up here: folders, navigation, etc. To be honest, you're hardly ever going to use these other options. Mostly, nine times out of ten, you're going to stick with this Page view here. We'll talk more about what those views are in just a few minutes.

When you're building in Front Page, you get two options: you can either build your website locally on your hard drive, on your C drive, and then publish it up to the web when you're done, or you can build straight on the web.

If you have a dial-up connection, you might find it easier to do all of your work on your C drive and then publish it up to the internet when you're done. That's how I used to work way back when I had dial-up. But now that I've got a high-speed connection - I've got cable modem at home and DSL at the office - I usually just do my work right on the web. For the purposes of class, however, we're going to do some of our work on our C drives, just so I can get you started building your web on your C drive. Then a little bit later in the course, we're going to publish it up to an actual internet site that I've got set up for class starting with the next class so that I can show you some of the advanced components. Some things like the hit counters and the reply forms don't work unless you're actually on a web server. You can build them on your C drive, but of course they're not going to work until you get them published up to the internet.

Let's start off by building a website. We're going to pretend that we have a small pizzeria called Pizza Pizza and we're going to build a website for Pizza Pizza. Yes, I actually tried to go out and register the domain PizzaPizza for my classes and someone else has already taken it, so they're actually in the Pizza Pizza business.

Let's get started here. We're going to click on File and then New and then Web. Now, you can create a new page or a new web. A web in Front Page terminology is a collection of web pages and forms a website. In Front Page terminology it's called a web, so let's click on New Web. A window opens up asking you exactly what you want.

Now, there are a bunch of wizards. A note on wizards that I have to give in the beginning of all my courses is that there are good wizards and there are bad wizards. Some of the wizards are good because they do things that you wouldn't want to do manually, but some of them are bad because they'll build a website for you but they're not going to teach you what they're doing.

We're here in class to learn how to build a website from scratch. I'm not going to waste a lot of time with wizards. Sometimes in my classroom classes, since we have more time, I do go through some of these wizards in a little more detail, but I'm not going to waste your time with that today.

If you want to run through some of these wizards a little later on your own time, like the customer support web or the personal web, feel free to play with them. You're not going to break anything. It's good to go through there and just play with them to see what they do. But we're going to stick with One Page Web for class. That's going to create a blank web with a single page in it that we can start with.

Now, over here on the right-hand side, it's asking you to specify the location of the new web. Where do you want to put it? If you're going to be building directly on the web, on the internet, you would change this to say something like www.mywebsite.com or whatever your website happens to be - for me, it would be emicron.com.

However, like I said, we're going to start off by building this web on our C drive. I'm going to take all this information out and let's type in C:\\ where you want your web to go. Let's call it frontpagecourseweb. Just like that. "frontpagecourseweb", or you could put it in your My Documents folder or wherever you want to store it. Hit OK at the bottom and it will create that web for you.

Notice across the top of my screen, it says Microsoft Front Page C:\\frontpagecourseweb. Over here, we now have a folder list that shows all the folders and files in your website. Here's the root folder or root directory for those of you that go back to the old days. There's a private folder. Any folder that begins with an underscore character is inaccessible on the web. These are for private files that Front Page needs to maintain your website, and you can store things in them if you want to but you can't get them over the web. "Images" is a folder for all your pictures to go in. These are things that Front Page creates for you.

Then we have an index.htm file. Index.htm is going to be your home page. Most of the time, index.htm is going to be the first page in your web. There are some exceptions. We'll talk about them in a couple of classes.

To start, let's open up this index.htm. Over here on the right-hand side, it starts you off with a new _page1.htm. We want to start off with this index.htm. So let's double-click to open it, or right-click on it and go Open.

I have a confession: when I'm running my broadcasting software that I use to broadcast the classes, it interferes with my double-click for some reason, so I have to right-click on stuff and then pick the option. If you right-click on a file you can open and then it will open up over here instead of double-clicking on it. So you can just double-click on this to open it as well.

Here we have our index.htm. This is going to be our blank page that we're going to start with. If you use Microsoft Word or Excel or any of those Microsoft applications, you're going to recognize the interface. It's very similar to Word. In fact, when I teach this class in my classroom, I make sure that people have taken Word first before taking Front Page.

We have all the basics across the top here. We've got New, Open, Save, and some other stuff like Publish Web that we're going to talk about next class. Here's your folder list button, the print, the preview in browser. We'll see what some of these do in a little bit. Cut, copy, and paste, spell check - a lot of the similar buttons that they have in Word.

Down here we have our font selections, our formatting toolbar, fonts, font sizes, bold, italic, underline. A lot of this stuff is similar to what you're used to in Word, but some of it's different.

Now we've got our homepage open. Let's go ahead and start off our site. What do we want our site to look like? I'm going to scroll the window up here to get a bit more room.

Let's say we want the homepage across the top and want it to say "Pizza Pizza." Below that we want to have our navigation bar links to the different pages in the site that people can go to. So we'll start off with a Home page link. I'll hit spacebar twice, then put a little pipe symbol - that's a little vertical symbol.

On your keyboard, it's going to look like a vertical line. Sometimes it's over in the bottom right corner, sometimes in the upper left corner. You have to look for it because it's not a standard key. I've got two different computers on my desk here. On one it's the same key as the backslash and on the other it's the same key as the tilde. You have to look for that one. You can use any character you want there. This is just to separate the hyperlinks. You can use a dash, a period, whatever you want it to look like.

How about our Pizzas page, right? And then we've got the Contact Us page, a Company History page, and Locations. Press Enter.

Now notice when I hit Enter, it moves me down one line. Unlike Microsoft Word, it only moves you down one line in here. In Front Page - and this is how the whole web works, not just Front Page - when you hit Enter, it gives you a paragraph break with a whole blank line in the middle. If you want a single line break, you have to hit Shift+Enter.

Just to show you: "this is some text", if I hit Enter, it's going to move me way down, but if I hit Shift+Enter, it gives you a single line break and you can continue to type down here. That's Shift+Enter. We'll talk more about that a little bit - don't worry too much about it for now. I get that question all the time.

How about an introductory message? "Welcome to Pizza Pizza, where we specialize in hot, steaming pizza delivered fresh to your door in 30 minutes or it's free," just to start off with.

Now let's take a minute to just make our homepage look good. I'm going to highlight "Pizza Pizza" here. Change the font to Arial, bold it, and go up to 14 point.

Now, notice when you're looking at the font sizes: it says 1 through 6. Actually, there's more of them if you scroll down. The sizes are just approximations. Size 4 is about 14 points. Size 5 is about 18 points. These aren't perfect because some browsers may display them differently. In fact, people have the option in their browser to display stuff in normal size, large, extra large, or small, depending on how they want to see the pages. So just because you've set it to size 5 doesn't mean it's always going to be 18 points on the person's screen. Everything is pretty much relative in a browser. Try to make it look as good as you can for most people.

Also, a note about fonts: try not to use any wacky fonts. You may have more fonts on your system than the people who are viewing your page have on theirs. Stick with all the standard fonts that come with Windows: Times New Roman, Arial, Courier. If you pick something that you have on your computer that others don't have, the system will substitute usually Times New Roman or Arial for it.

Let's highlight the link spot. Click and drag to highlight, change it to Arial as well, and make it a little bit smaller at 10 point.

How about some color? Let's do some color. Highlight "Pizza Pizza," go to the font color button on the toolbar. It's an "A" with a color underneath it. Right now it's set to automatic, which is generally black on white, but automatic might be different depending on browser settings. We're going to force it to dark blue here. Now we have that as dark blue.

How about a horizontal line? Let's throw a horizontal line underneath that link spot. You can either click after "Locations" and press Enter to give yourself a blank line, or come right in front of "Welcome" and hit the horizontal line. The horizontal line is up here under Insert, then Horizontal Line. Click, and there we go, a horizontal line.

Time to save our work. Come up top here and hit the Save button. Since we've already given our file a file name, index.htm, we don't have to specify it again. So I'm just going to save it as index.htm.

How about down here in the bottom of the homepage we give it a list of some of our benefits? Let's make a bulleted list. Just like in Word, on the toolbar, click on the bulleted list button. Then create a bullet down there. Let's put in some of the benefits of Pizza Pizza: "Fresh hot pizza," Enter. Notice how you get another bullet, just like in Word. "Delivered in 30 minutes or free." "Free Pepsi with $10 order." "Pizza and 30 wings for $9.99." Press Enter again to end the bullets.

Save our work one more time by hitting the Save button up on the toolbar. Now we have built our first basic web page.

Now, one page by itself isn't really that spectacular. What we want to do is create some other pages, like our Pizzas page and our Contact Us page, and link all these pages together.

We're going to use this page here as a template to make the next one. There are a couple of ways you can do it. You can either, while this page is still open, go to File, Save As, and save this as "ourpizzas.htm". That's one way to do it. I'll hit Cancel, though.

Another way to do it is to close this page. Over here on the right-hand corner, instead of having an X up here like other Microsoft applications, there's an X right there. Click on that X to close the page.

Now I can copy my index.htm using a copy and paste technique. You can either use the toolbar or right-click and go to Copy. I prefer the keyboard myself: Ctrl+C to copy. If you don't know these, I'm going to set them on the screen for you. These are handy. I use them all the time: Ctrl+C for copy, Ctrl+V for paste, Ctrl+X for cut. There's one more: Ctrl+Z is undo. I use Ctrl+Z all the time too. These keyboard shortcuts can be used everywhere, even where you sometimes can't right-click.

So watch this. Ctrl+C, Ctrl+V. Now we have an "index_copy1.htm", which is a copy of the index page. We don't want to call it "index_copy1.htm". Let's give it a good name.

To change it, click on it once, wait about half a second, then click again - now it's in edit mode. It's kind of like a blinking cursor at the end. Now you can edit this. Let's call this one "ourpizzas.htm".

You can use spaces and dashes in file names. You can use underscores. My personal preference is to use dashes. Can you use capital letters? Yes, you can. I prefer to use all lowercase; it goes back to my days of C programming. Just a matter of style. It's better not to use spaces in your web page file names, especially for programming with Active Server Pages or JavaScript.

We've got a copy of our index page. Let's rename that contact us. Let's open up "contactus.htm". Let's change this across the top to "PP - Contact Us". Come down to the bottom, highlight all of this, and put in our information for the Contact Us page for Pizza Pizza.

"We welcome your comments!" Let's put the contact information down below: "716-555-2222". If you do not want to go down to full paragraphs, hit Shift+Enter for a single line break, which is a <br> tag.

Now, if you type an email address in Front Page, it will turn it into a hyperlink that, when clicked, will launch the user's email program.

How about a website address? On the web at www.pizzapizza.com. Notice that it also changed that into a hyperlink as well. That is an external hyperlink.

That's how you make hyperlinks to other websites. How about making hyperlinks inside our site? Let's start utilizing our navigation bar on the top. We want these to be hyperlinks across the top to the different pages inside our site.

Let's say "Home" - I want this home link to go back to my index page. If they're on the Contact Us page and want to get back to the home page, they should click on this Home.

Highlight "Home". Click the hyperlink button on the toolbar (a little globe with the chain link underneath). You'll see a list of pages inside your site. Down at the bottom it says URL - that's your Uniform Resource Locator, the address of the page you want to go to.

If I want to make an internal hyperlink, a link to a page inside my own site, all I have to do is just click on the file. Notice how the URLs are placed - "index.htm". You don't want to type out your full web page address; you don't want to type www.pizzapizza.com/index.htm. That is an absolute URL and is always going to be in that same spot. If I just pick index.htm, that becomes a relative hyperlink. In other words, it's going to look for a file called index.htm in the current folder, which right now happens to be frontpagecourseweb. In the future, when I publish this to the internet, it could be in a different location. It doesn't matter, because my hyperlinks inside the site are all relative.

Click on index.htm and OK. I just made my first hyperlink inside the site. If you look down at the bottom, resizing the screen will show you that it says index.htm. Now let's go over to our home page and make a link back.

Save the page, close it, then open up our index page again. I want to link "Contact Us" over to our contact page. Highlight "Contact Us", click on the hyperlink button, and link to the contact us page, then OK. Now that is linked. Save it.

Now I want to see how all this is going to look in my browser. I use Internet Explorer. Let's see how it is going to look. On your toolbar, there's a button: "Preview in Browser". Front Page is good for designing these pages but not that good for showing an exact preview of what they're going to look like when finished.

There's a tab on the bottom of the window: "Normal", "HTML" (we'll talk about that later - it's the actual text under the page), and then a "Preview" tab. The preview tab is supposed to show you what it will look like, but I have found it doesn't always look that good, especially if you have a lot of complex formatting in your page. For now, stick with normal. If you want to see what your page is going to look like in the browser, click on the "Preview in Browser" button.

Microsoft Internet Explorer loads. Move it around, and now in the browser, the address is something like C:\\frontpagecourseweb\\index.htm. I click on the "Contact Us" link to go to the contact page, and click on "Home" to get back.

Now, while I'm building this site, I can leave my browser window open and just bring Front Page to the foreground or minimize it.

Now let's move forward. If you are following along in the book, this brings us up to page 23. Let's say we want to put a link on our home page to a different website. Let's say we only use quality Sorrento cheese. I want to make a link to Sorrento cheese. Highlight "Sorrento cheese", click the link button, and type in the web page address, www.sorrentocheese.com.

What if I want to create a mail link to an email address? Let's go back to our contact page. At the bottom, type "Email the president", highlight it, hit the link button, and then click the mail icon. Enter the email address. It says "mailto:[email protected]". You can type that yourself "mailto:[email protected]" to create a mailto link.

One thing you also might find useful are comments. I like to use comments a lot. Let's go back to our homepage. At the bottom, go to Insert, then Comment. Enter your comment such as "Remember to update the specials every week." Press Enter, OK, and now you will see purple text at the bottom of that page. Keep in mind that comments are visible if someone knows how to look at the HTML of your web page; they're not completely hidden to the public, but they will not show up on the page when viewed in the browser. Do not put anything there you would not want your customers to see.

Now, let's go ahead and make up the other pages that are going to comprise our web: our History page and our Locations page (these are in the book on page 28 if you're following along). We'll use our index page as a template.

Let's do our Pizzas page: copy and paste index.htm as "ourpizzas.htm" and open it up. Now we have our pizza page.

Let's go ahead and edit the Pizzas page. I'm going to get rid of all this extra text, and type in our list of pizzas. At Pizza Pizza, we have a great menu.

Create a bulleted list:
- Large cheese and pepperoni pizza, $10.95 (bold that)
- Small cheese pizza, $3.95 (bold that)
- Party pizza (feeds 20), $19.95 (bold that)
- Delivery

Now it's almost 1 o'clock here in New York, and I haven't even had lunch yet. I hate teaching this class hungry.

Let's make our hyperlinks to the other pages. Copy and paste to create history and locations. Open each, update the name across the top and add:
- For "History": "Pizza Pizza started in 1930 in Buffalo, New York. We're not going to type a whole history here."
- For "Locations": "Pizza Pizza is around the world." Make a bulleted list: Buffalo, New York; Chicago, Illinois; Toronto; Paris; Rome; Tokyo.

Now we've got one perfect link bar. Let's copy this whole link bar and paste it onto the other pages. If you add another page later, like a special page, you'll have to go back to each of the other pages and add a link, so it's not ideal.

The best way to do a link bar like this is to use an "include page" component in Front Page. We'll show that in the next class. We'll make one link bar page, make it perfect, then insert that page using the include page component into the other pages. If you need to make a change, you just change the include page, and all your other pages update automatically.

This way, I'm showing you just for now for practice, so you can practice making hyperlinks and get the basics down.

Let's talk a little about graphics. We're just going to talk about graphics for a minute. Graphics are one of the most overutilized features of a website. People use graphics all the time. I hate it, especially for dial-up users. 80% of all the users on the internet still use dial-up connections. There are websites out there that look great and beautiful, but they're so graphics-heavy that they're really tough to browse on dial-up.

Keep in mind when you're putting graphics in your site that most people are still on dial-up, unless you're building your website for corporate use where most users have high-speed connections.

There are two graphics formats that you should use on the web: GIF (.gif) and JPEG (.jpg). Both GIFs and JPEGs are compressed images, so that all the extra space is compressed out of them. A Windows bitmap, for example, is what you use in Windows Paint or something similar, but they are not compressed and are huge. To put them on a web page, convert them to GIF or JPEG. We'll show you how to do that if we have time.

GIFs are generally better for clip art or any images that need a transparent background, but GIFs only support 256 colors, so they're not good for photo-quality images. JPEGs, on the other hand, support up to 16 million colors, but cannot have transparent backgrounds.

You can add clip art to your pages using the clip art that comes with Microsoft Office. I will be the first to tell you that the clip art that comes with Microsoft Office is not great, but I'll show you how to use it. Let's open up our contact page and scroll to the bottom.

Let's insert a piece of clip art that is an email icon. Go up to Insert, Picture, Clip Art. The Clip Art Gallery will open. Find a suitable image (say, an envelope) and insert it. You can then grab any corner or edge to resize it.

After you insert a graphic into your web, save your page. You'll get a window for saving embedded files. You have to embed the graphic in your web. Rename it if you like, for example to "envelope.gif". Put it in your images folder, hit OK. Now we've saved the envelope in our web as envelope.gif.

Now, close your page. You do not want graphics hanging out in your root folder because it gets cluttered. Move envelope.gif into your images folder. As long as you move files inside Front Page, it will update all file references automatically.

If you right-click on the picture and go to Picture Properties, you will see the source is "images/envelope.gif".

Front Page is a preferred tool for building websites as opposed to Word or some other program because it automatically handles links when moving files around, if done inside Front Page.

You can make this image a hyperlink by clicking on it and then clicking the hyperlink button at the top. Sometimes it will grab a hyperlink from nearby text (if separated only by a line break), so be careful about that.

You can insert pictures from pretty much any source you want. If you have pictures on your hard drive, drop them into your web first, then insert them into your pages.

For example, using Windows Explorer, drag a picture (for example discover.gif) from your hard drive to the images folder in your web. Now you can open your Pizzas page and insert the graphic.

You can also borrow graphics from websites. Open Internet Explorer, go to a website, right-click on an image, and Save As to your hard drive, then drag it to your images folder in Front Page.

If you're unable to copy-paste a graphic directly from a webpage, do a screen capture: press the Print Screen key, open Paint, paste, crop the part you want, and save it as a GIF or JPG. Drag it into your images folder, then insert it into your page.

You can use Paint to create your own images, such as simple maps. Once finished, select and copy, then paste into your page in Front Page. Save it and give it a descriptive file name such as map.gif. Move it to your images folder.

Now your website is starting to come together.

That's all for today. Homework assignment if you are sticking with me for the remainder of the course: practice what we did in class today. In the book, you're going to build one for a Mexican takeout restaurant. Go ahead and try that. If you have any questions, I'll be in the chat for about five minutes. Feel free to email me as well. My email address is [email protected].

Quiz

Q1. What is the primary way to become proficient in website design, as emphasized in the video?
A. Memorize all the software features
B. Regularly read technical books
C. Practice building and editing websites on your own
D. Only watch video tutorials without hands-on work

Q2. Which Front Page versions are primarily discussed in the video as suitable for managing entire websites?
A. Front Page 98 and 97
B. Front Page 2000 and 2002 (XP)
C. Microsoft Word and Excel
D. Netscape Composer and Dreamweaver

Q3. What is the main difference between the Internet and an Intranet?
A. The Internet is only for email, while an intranet is for web browsing
B. An intranet is a private network within an organization, while the Internet is public and global
C. They are both identical except for the terminology
D. Intranet can only be used on Macs

Q4. What is the function of HTML in web design, according to the video?
A. Enabling email communications
B. Describing text formatting in Microsoft Word files
C. Providing tags and structure for web pages
D. Running server-side programs

Q5. What is a home page in website terminology?
A. A secondary contact page
B. The first/main page of a website
C. The page used for graphics storage
D. Another name for an email page

Q6. What should you do before starting to build a website in Front Page, as recommended by the instructor?
A. Begin coding immediately
B. Plan the website layout and content on paper or a whiteboard
C. Only look at competitor websites
D. Install graphics software

Q7. Which of the following is NOT an initial recommended step for web development from the video?
A. Gather all content and materials before starting
B. Research competitor websites
C. Build the site without any planning
D. Plan the website structure in advance

Q8. What is the instructor's advice regarding the use of fancy fonts on web pages?
A. Use as many unique fonts as possible
B. Use only system standard fonts to ensure compatibility
C. Install custom fonts for visitors
D. Fonts do not affect website display

Q9. How does Front Page handle hyperlinking within your own website (internal links)?
A. Uses absolute URLs by default
B. Uses relative URLs, referencing files in the current folder
C. Does not support internal links
D. Only links to external websites

Q10. What is the advantage of using Front Page instead of another word processor or editor for maintaining websites?
A. It is the only program that can use colors
B. It automatically updates links when files are moved within the project
C. It has more fonts
D. Only Front Page can insert images

Q11. What is a quick way to copy and rename web pages in Front Page, as shown in the video?
A. Use Ctrl+C and Ctrl+V, then rename the new page file
B. Drag with the mouse between browsers
C. Use the Save As function exclusively
D. Restart the program

Q12. What is the purpose of an "include page" component in Front Page, as described by the instructor?
A. To create a graphical logo
B. To insert reusable sections (like navigation bars) onto many pages for easy updates
C. To speed up website loading
D. To upload pages to the server

Q13. According to the video, how should a website's navigation bar be handled for best maintainability?
A. Copy and paste the navigation into every page
B. Never update navigation bars
C. Use an include page so updates apply to all pages automatically
D. Only place navigation on the home page

Q14. When inserting images into Front Page, which two formats are recommended for web use?
A. BMP and TIFF
B. GIF and JPEG
C. PNG and SVG
D. DOC and PDF

Q15. What should you keep in mind about using graphics on your website, especially for visitors with slower connections?
A. Use as many large images as possible
B. Use graphics sparingly and select compressed formats for faster loading
C. Only use uncompressed bitmaps
D. Graphics will not affect load time

Q16. What happens if you move a picture file to a different folder inside Front Page?
A. You must manually update all links using that picture
B. All links and references are automatically updated by Front Page
C. The image will stop displaying permanently
D. The image will lose quality

Q17. Which type of hyperlink would you use to let a visitor send an email directly to the site owner?
A. "mailto:" hyperlink
B. "http:" hyperlink
C. Absolute link to another webpage
D. Internal link

Q18. What is the purpose of using comments in your page through Front Page?
A. To hide confidential information completely from everyone
B. To provide notes and reminders for web developers that are not visible in the browser view
C. To improve search engine ranking
D. To display flashing alerts to users

Q19. What should you do after each significant update or addition to your page, as shown in the process?
A. Ignore saving until finished with the entire site
B. Save your work frequently to prevent data loss
C. Only save at the very end
D. Only use AutoSave

Q20. If you want to see a true representation of how your web page will look on the internet, what is the best way according to the video?
A. Use only the Preview tab within Front Page
B. Click the "Preview in Browser" button to open the page in an actual web browser
C. Print the web page
D. Trust the Normal view completely

Answers: 1-C; 2-B; 3-B; 4-C; 5-B; 6-B; 7-C; 8-B; 9-B; 10-B; 11-A; 12-B; 13-C; 14-B; 15-B; 16-B; 17-A; 18-B; 19-B; 20-B

DISCLAIMER: Quiz questions are AI generated. If you find any that are wrong, don't make sense, or aren't related to the video topic at hand, then please post a comment and let me know. Thanks.

Summary

Today's video from the Web Design Learning Zone covers the fundamentals of creating your first website using Microsoft Front Page 2000. We'll begin with some introductory concepts and definitions related to website design before we dive into the practical work of building and planning a website.

As with any software-based subject, my primary role here is to demonstrate how the features work. However, to truly become proficient at website design, you'll need to invest time practicing on your own. Whether you're using Front Page 2000, 2002, or even an earlier version like 98, the basic principles and most of the steps you'll learn remain the same. My suggestion is to watch the class live, relax, and absorb the information. Later, you can go back to the archived sessions to review specific sections and reinforce your learning as you practice the techniques demonstrated.

To start, let's look at a bit of history and some key terminology. The Internet originated in the 1950s and 60s as a military project intended for secure and reliable worldwide communication. The key goal was to allow information to be rerouted even if parts of the network were compromised. Although this early network wasn't user-friendly, things changed dramatically in the 1990s with the development of the World Wide Web. This gave people a graphical interface for browsing content, making navigation much easier and more intuitive.

You might hear terms such as "Internet" and "intranet." The Internet (with a capital "I") refers to the global network, home to websites, email, and more. An intranet, on the other hand, is a private network within an organization, often featuring its own internal websites. The same tools, such as Microsoft Front Page and standard web browsers, are generally used for both.

A web page is just a document residing on the Internet, and a website is a collection of related web pages. The home page is simply the main starting page for the site, like what you see when you type in "Microsoft.com."

Technically, web pages are text files containing special codes known as tags. The language behind most web pages is HTML, or Hypertext Markup Language. These pages make use of hyperlinks, which are clickable links allowing users to move from one page or document to another. Web pages are housed on web servers, which are simply computers connected to the Internet, responsible for serving up those pages to visitors. The person managing these sites might be called a webmaster or a web administrator.

Web browsers such as Internet Explorer or Netscape Navigator interpret the HTML code and display it in a way that's visually helpful to the user. Each web page is accessed via a unique address, known as a URL (Uniform Resource Locator). The ending part of the URL, such as "somewhere.com," is called the domain name. When setting up a website, you can use space on someone else's domain or register your own, which gives your site a unique address and identity.

Registering domain names varies in price, ranging from roughly 15 to 35 dollars per year, but there are options for lower-cost registrations as well. The specifics of internet connections—such as dial-up, DSL, cable modems, and T1 lines—and providers like AOL, are also covered in the reading material if you wish to learn more.

Before you launch into building your actual site in Front Page, it's very helpful to plan your site on paper, a whiteboard, or a similar medium. Having a clear idea in mind will save you time and help keep you focused once you start building. Take the time to look at other websites, especially those of competitors, to see what design elements are effective and which ones are less appealing.

Be clear about your main purpose—whether it's sharing information, selling products, or entertaining visitors. Aim to focus on a primary goal, and only broaden your site's scope once it begins to grow.

I recommend the following seven-step process for building a website, which you should follow once you're familiar with the software:

1. Begin with careful planning on paper or a digital tool, mapping out how pages should look.

2. Collect all materials you'll need, such as brochures, company info, images, and pricing details, before sitting down to build. This prevents disruptions during development.

3. Research what others in your field—including competitors and related companies—are doing online. Take notes on features you like and those you don't.

4. Create the main web page and get its appearance as close to ideal as possible, since you'll be able to use it as a template for your other pages.

5. When a few pages are designed, interconnect them using hyperlinks for easy navigation.

6. Add your graphics and images after the page structure and text are set, making the site visually appealing.

7. Test your site across multiple computers and browsers to ensure everything works well and all links are active.

Remember, your website reflects your business to the world. It doesn't need to be loaded with complex features to make a good impression. Often, a simple, clean design is the most effective and professional.

Now, let's get practical and take a closer look at working in Microsoft Front Page 2000. While earlier versions like Front Page 98 can be used for simple pages, 2000 and 2002 significantly improve the management of entire websites, which is essential as your project grows.

One thing I recommend for efficiency is to turn off the "views bar" in Front Page. This saves space and simplifies your work area; almost all needed actions can be accessed from the main menu.

When starting, you can choose to develop your website locally on your hard drive and then upload it online, or you can work directly on the web server. Working on your computer is often more manageable, especially with slower internet connections. For this class, we'll start with building our site locally and tackle publishing to the web later on, especially since certain features like hit counters and forms only function properly online.

For our hands-on example, imagine we're building a site for a fictional pizzeria called Pizza Pizza. We'll start by creating a new web, which in Front Page terminology means a collection of web pages forming a website. When prompted for a location, set it somewhere you can easily find, such as a folder called "frontpagecourseweb" on your C drive.

Once Front Page sets up the site, you'll see several folders: a root directory, a private folder for files not accessible from the web, and an images folder for your pictures. The main page will be called "index.htm," which typically serves as your site's home page.

When you open this file, you'll notice that Front Page shares much of its interface with Microsoft Word, making it familiar for users of other Office programs. Across the top are buttons for standard operations, like New, Open, Save, and buttons for formatting text.

Let's start assembling the home page. Across the top, enter "Pizza Pizza," then directly beneath, create a navigation bar with links to your main sections: Home, Our Pizzas, Contact Us, Company History, and Locations. Use a pipe (|) or dash to separate the links horizontally, according to your preference. On most keyboards, the pipe symbol can be found paired with the backslash or tilde key, depending on your keyboard layout.

After the navigation bar, add an introductory message for your visitors. For example, "Welcome to Pizza Pizza, where we specialize in hot, steaming pizza delivered fresh to your door in 30 minutes or it's free."

To improve the appearance, format the text with your preferred font and size, but stick to standard typefaces like Arial or Times New Roman, as other systems may substitute your selection if they lack the exact font. The text sizes in Front Page correspond only roughly to actual point sizes and will look different across browsers and user settings.

For color, you can change text to blue or another shade by using the font color tool on the toolbar. Add a horizontal line under your navigation bar for a neat separation.

Also, include a bulleted list to showcase your services or features—this works much like creating a bullet list in Microsoft Word. Enter each feature and press Enter for a new bullet. Save your work frequently to avoid accidental data loss.

Once your home page is ready, use it as a template to create your other pages. You can do this efficiently by copying the file and then renaming it for each new section, for example, "ourpizzas.htm," "contactus.htm," etc. When renaming files, it's generally best to use lowercase letters and avoid spaces. Dashes or underscores are fine.

Edit each page to reflect its purpose. For the Contact Us page, include contact information and an invitation for feedback. When you type in an email address or website address, Front Page will convert these into clickable hyperlinks automatically.

To build internal navigation, create hyperlinks in your navigation bar. For example, highlight "Home," and create a link leading back to "index.htm." Always use relative links for internal navigation—just the filename (like index.htm)—so they will continue to work no matter where your site is published.

Preview your work in an actual web browser to check how things look. You can toggle back and forth between Front Page and your browser during development. Front Page also offers a "Preview" function but for an accurate result, use your regular browser.

If you want to link to an outside website, simply highlight the relevant text, select to make a hyperlink, and type the external web address (such as www.sorrentocheese.com). For email links, choose mailto: followed by the recipient address.

Front Page allows you to include comments in your pages. These can serve as notes or reminders, like "Remember to update specials each week." While these comments won't appear in the browser view, they are stored in the page's code and can be seen by anyone looking at the source, so don't put anything sensitive in them.

Continue creating the rest of your site—such as the History and Locations pages—by copying your template and updating the content.

Regarding your navigation bar: when updating navigation across all pages, the most efficient method in the long run is to use an "include page" feature in Front Page. This allows you to maintain a single navigation page and include it across your other pages so any changes are propagated automatically. We'll cover include pages in more detail in the next session.

Graphics play an important role in web design, but be mindful not to overdo it. Heavy use of graphics can make sites slow to load for users on dial-up connections, which are still common. Always use web-appropriate formats for images: GIFs for simple graphics or transparent backgrounds, and JPEGs for photographs or images with many colors. Avoid uncompressed formats, like Windows bitmaps, as they result in very large file sizes.

You can insert clip art shipped with Microsoft Office, which is serviceable though not always professional. After inserting a graphic, Front Page will prompt you to save it within your project, usually placing it in your images folder. It's good practice to keep all images organized in this folder.

To create hyperlinks from images, simply select the graphic and assign a target link. If you have personal images or need to use graphics from other sources, copy them into your images folder before inserting them into your pages.

If you need a graphic from a website, download and save it to your hard drive, then place it in your images folder before adding it to your site. Alternatively, use a screen capture, crop it as needed in Microsoft Paint, and save it in a web-friendly format.

For making simple custom images, such as maps, Paint can be a handy tool. Once your file is ready, insert it into your website as you would any other graphic.

At this stage, your basic website structure is taking shape. Your assignment for next time is to practice these skills and try building a sample site, such as one for a takeout restaurant suggested in the book. If you have follow-up questions, I'll be available briefly after class through chat or email.

A complete video tutorial with step-by-step instructions on everything discussed here is available on my website at the link below.

Live long and prosper, my friends.

Topic List

Basic definitions: internet, intranet, web page, website
Explanation of web servers and webmasters
Introduction to web browsers and URLs
Understanding domain names and registration
Initial planning and focus for a website
Steps of web development planning
Gathering website content and assets
Researching competitor websites
Building a website in Front Page 2000
Disabling the Views Bar in Front Page
Difference between local and online website building
Creating a new web in Front Page
Explanation of Front Page wizards and their use
Setting up project folders and file structure
Understanding and using index.htm as a homepage
Front Page interface and toolbars overview
Text formatting: fonts, size, and color in Front Page
Creating and styling navigation bars
Paragraph and line breaks: Enter vs Shift+Enter
Building a homepage layout with text and navigation
Adding horizontal lines using Insert menu
Creating bulleted lists in web pages
Copying, pasting, renaming pages for templates
Keyboard shortcuts for editing and navigation
Creating internal hyperlinks (relative links)
Creating external hyperlinks to other websites
Creating email "mailto" links
Using and inserting page comments
Using Save As and copy-paste for new pages
Updating navigation and content for new pages
Previewing pages in a web browser
Advantages of using relative hyperlinks
Best practices for navigation bars and maintenance
Considerations for graphics on websites
Web image formats: GIF vs JPG explained
Inserting clip art and images into web pages
Resizing and repositioning images in Front Page
Saving embedded images to correct folders
Organizing and moving images using Front Page
Setting image properties
Making images hyperlinks
Importing images from external sources
Screen capturing and editing images with Paint
Creating simple custom graphics and maps
Maintaining organized folder structure for web projects