Making a ’90s Style Website With Microsoft FrontPage 98!
(Windows 98 Startup Sound) (intro music) - So let's say it's 1998, you just got internet access at your house. And finally got a chance to try out this whole world wide web thing and you're a bit curious. You spent some time surfing around all sorts of websites and maybe downloaded a few files over your extremely fast dial up connection. And there was something about it that just captivated you an unchartered territory, where you could unleash your creativity and ideas to anyone in the world.
The possibilities seemed endless, it didn't take long for you to discover the wide variety of web pages out there each with its own unique feel and charm. And after a while you thought to yourself, "I wanna do that." Having your own little spot on the web quickly became an extremely popular thing to do.
And there were a handful of programs out there that could help you create a website without needing to know much about HTML. One of those was Microsoft FrontPage 98, a WYSIWYG website creation tool that initially wasn't even a Microsoft program at all. And thanks to a viewer named Matthew, we're gonna be checking it out today.
FrontPage started its life as a product of Vermeer Technologies founded in July of 1994 before being quickly bought up by Microsoft less than two years later for an estimated $130 million in stock. Over time, FrontPage became a part of the Microsoft Office suite, first as a standalone product following the same packaging design and beginning with office 2000 bundled with certain Office editions. There was also a limited version of the program known as FrontPage Express, which was included with certain versions of Internet Explorer. Though more limited, it did provide base sick WYSYIWYG editing functionality. Yet another blow to Netscape Navigator. And yeah, if you couldn't already tell one of the motivations for Microsoft purchasing this company up so quickly was to integrate FrontPage's technology into their master plan for web domination.
Because certain effects and components you could integrate into your FrontPage site would only allow Internet Explorer users to view it properly. Extremely problematic for web designers who wanted universal compatibility, but chances are, if you were a professional web designer, you weren't using FrontPage. Though surprisingly it did find use among a handful of major corporations. A fact that Microsoft proudly displayed on their website. FrontPage 98 sold for $149 and included a $40 rebate for users of Microsoft Office. Also among the standard fair of documentation inside was a promotional booklet with introductory offers at various web hosting companies when you were ready to put your site online.
Obviously the most important thing here is the disc itself. So let's pop it into the 98 PC, get it installed and experience just what it was like to create a website with it over two decades ago. All right, so when you launch FrontPage for the first time, you're gonna get presented with this getting started window here. It's going to ask you if you wanna open an existing FrontPage web or create a new one now. It's already got one in here that we created during the setup process. So we're gonna log on to that one.
And of course, this is all stored locally. So that's what this address here corresponds to. If I were to go into Internet Explorer and type in the really complex web address of M it will load our home page here. With this being a WYSIWYG editor, it's very, very simple to edit the web pages. So when you open them up in the FrontPage Editor here, this is what you get. So you've got the HTML here and you can also preview it.
So this is a live preview of the webpage itself. So this is how it would look. And then we can just go back to the normal view here.
And so I have got a list actually of some things, if we go out of the FrontPage Explorer here, we'll close out of this and we'll close out of My Computer. And on the desktop here, I've got this text document with all of my ideas, the things I wanna implement into this website, because we are going full '90s style guys, 100%, we're gonna try to make this a... Like something you would see on GeoCities back in the late nineties. And to accomplish that, I have scoured the web mainly by going on a very useful website from the Internet Archive called GifCities, and GifCities is a collection of GIFs that are just pulled from GeoCities webpages because they've got a bunch of them, right? They got a ton of those pages archived. So one of the things that I wanna do going by with the third option here, a ton of animated buttons in footer. So this is almost 50 GIFs of various animated buttons that I'm going to load up in the footer.
And I think it's gonna be absolutely hilarious because that was a thing people did back in the nineties and early 2000s is just... I mean, you guys have probably seen these before. You can find them occasionally out there today, Things like this, that would be at the bottom in the footer somewhere. So I've got a ton of those. I've got some animated backgrounds and we've got some other stuff that we'll get into in a moment.
So the first thing we're gonna do is go back to FrontPage Explorer here. First, let's talk a little bit about how FrontPage works here, because it is a pretty intuitive interface, it's pretty simple to navigate around. So what we're on now is the Folders view and this gives you a directory structure here on the left side, and as I go through here you can see all of the contents of those folders, so this is just the root directory.
So you got your HTML files and then these folders over here, you can just go to all files, and this will just show everything just in a... You can view them by name, by type, by what folder they're in, etc. And you can view the navigation tree here. And so this shows you how you've got everything laid out and you got your contents down here, again. Hyperlinks, this lets you see a kind of bird's eye view of all the hyperlinks on your website and how they link to the other pages. You got Hyperlink Status here and then what's really cool is the theme.
So if you didn't really wanna go into the level of customization that we're gonna go into in this video, you could just go in here and pick one of these themes and it would apply across your entire website. So you saw what the homepage looked like, right? What the index page looked like. So let's change it to... Let's see here, let's go with this one here with this zero theme, so we apply and now if we go back to folders here, it was actually called default.htm and we can open this up and you see it's the same page, the same contents, but the theme has been changed. So that's a really easy way to just do a sitewide change in just a few clicks there.
And you've got a ton of them here. There is definitely no shortage of options in here you can really go it through. We could probably spend an entire video going through all these here, but what I wanna do is turn off the theme. So we're gonna disable and hit apply, and we'll go back to default.htm here
and you can see now there's no theme. So the first thing we're gonna do is get rid of the title and we're gonna call this Michael MJD's Amazing '90s Awesome Website. Okay. We're just gonna leave the navigation controls alone for now, but you could just double click on them to modify the settings here. And we'll just cancel out of that. And you've also got your links on the side here.
You got another navigation bar. So going back to this list here, the first thing I wanna do, we'll get to the background in a moment, but I wanna make a marquee because what screams '90s website design better than a marquee. Well, really everything in this document I think screams '90s website design. So we're gonna add the word awesome here, welcome to my awesome website. And we'll just keep it spelled like "web site", like two separate words and we're gonna highlight it, go up to insert, active elements, marquee.
And so it's got our text there and this is where we can do all sorts of stuff, so we can change the delay. And we're gonna go to style here because we are going to add a border. Oh yeah, there we go guys.
Oh, isn't that beautiful. Got that nice bouncing back and forth effect in our wonderful marquee with a border. Okay. What we're gonna do now is add one of the backgrounds. So let's go up here to format, background, background image, and we'll browse. Right now it's looking on the quote unquote web server. Of course, everything is stored locally, but I mean, this computer will become a web server once we publish this and I mean just on my local network here.
Right now it's set to look for files just on your web server here. So to access files on your local computer, you click on this button down here and that brings up a Windows Explorer file browser here. Now we're gonna go with... I think the star one here. Now I'm gonna make three separate pages and I'm gonna have different backgrounds on each page. So we're gonna do "bgstar" and we hit okay, and then there we go.
And now when we go to preview that we will have to change all the text color, you see we got that nice animated background. It just repeats, it just does a little like checkered pattern, it just repeats over and over again. So the actual image itself is just about this one little corner right here, but I'm not sure if I'm gonna keep this one. Let's see what else we got.
Okay, so that's the clouds one, you know what? We'll leave the clouds one, 'cause this is kinda giving me a Windows XP vibe, with the blue and green. So we'll do that and we'll change the text color up here. First off, let's make this underlined. Let's make the text maybe...
And we'll just leave it at that size and then we'll change the color or we can change the font too. You know what font we're going with? We're going with our good friend Comic Sans. Oh yeah, we're making this a beautiful masterpiece. And then let's make another line under it. And we'll say "Your '90s simulation sensation." I'm trying to make it to where you can read the text, but you can just barely read it.
Looking good so far. Oh my gosh guys, holy crap. Okay, so now we're gonna add some text here. We're gonna leave this date modified 'cause I find that hilarious.
That it's set to 01/01/1990. Hello everybody, this is my amazing website. All right, so I got my pretty accurate description there.
All right now for some fun stuff. We're gonna go in here and we're gonna start adding these buttons, so you see, we have this Microsoft FrontPage one, can we highlight all of these and just drag them in? No, it's not gonna let us do that, but I know you can just drag one in at a time. So is it just having multiple ones? Yep. You can only do one at a time. Okay. And I wonder if we could just import, let me go to file, ah, here, insert image and we'll do this, CTRL+A, we can't do CTRL+A and we can't highlight them either. So you can only select, can you do shift or control? No, you can import one at a time. Okay.
(the signature MJD timelapse music) All right guys, I think we're looking really good. Oh yeah, check that out. Let's go to preview, let's preview that. Oh yeah, look at that... (chuckles) It just extends it across the entire- 'cause we've not done line breaks. Oh my gosh. Okay. So, oh, I don't want the Darwin one to be up there.
How do we add a line break without going into the HTML? Oh, line break, there you go. Shift + Enter. Okay. This is gonna be a complete, oh my gosh.
This is so bad. (chuckles) This is so terrible. Oh, we could just center them, can't we? No, go away. Yeah. There we go. It's still a little bit too long there, at least this... Which one is this? The one with Hotmail. All right.
So we've got 'em all in, a couple repeats, but I think they look pretty- That is really gonna bother me, this one here that is slightly taller. All right. We gotta remove that one. There we go guys. Oh my gosh. (chuckles) This is everything I wanted it to be so far. I just love this, this is hilarious, just this old...
I mean just the way it looked, these buttons, man. I just remember seeing these all over the place. I love them, they're so cool. You know what? I'm thinking of changing this background because I don't know, I don't think the clouds one fits here. So let's go back up here, let's go to background.
Okay. How about this one? Okay. Yeah. See this one, it's another space theme. Well, there were a bunch of space themed ones that I found, but actually this kinda looks like snow falling. I think we're gonna center this text here. Not that. Center it and then let's make...
Okay. We gotta change this text here. Yeah, there we go guys. Oh my gosh, this is gonna be so just... Oh my gosh.
So we can save it and when you save it, it'll ask you if you wanna save the embedded files, which you'll have to if you want them all to show up. So here's all of our GIFs here. So we're gonna save that, it'll take a minute here 'cause it copies them all over to the web server directory. So now if we go back to FrontPage Explorer here, you can see all those files are now here on the root directory. I'm gonna get rid of these other pages.
At least we'll get rid... Let's just see what they look like first. So let's see what the favorites one is. Okay, make a list of your favorite sites. Interest. Okay. So here's a place for your interests.
myfav3 and photo, "The World Wide Web makes it easy to share photos with your friends and fans. (bronx cheers) (beep) "The World Wide Web makes it easy to share photos with your friends, replace these images with your own." Okay. So we'll keep the images one,
but we're gonna get rid of... Let's get rid of myfav3. We'll get rid of interest here. So we got three pages and we're gonna rename them, so we're gonna call favorite.
We're gonna call this YouTube and photo, we're gonna call this, my friends... What are we gonna call it? We're gonna call this NFT because if you guys saw my Linux on a PlayStation video, I made this glorious image here and oh yeah, we've copied it over here to the 98 PC. So we're gonna get rid images here. We're just gonna get rid of everything. We'll even get rid of this over here. We're gonna get rid of...
Well, we'll leave that so you can go back home. You know what? Let's just get rid of everything, already committed to it. So we're gonna say, oh gosh, what do we want up top? Buy this now it is totally not just a JPEG. Okay. So we've got our title here and we're going to make this a marquee wonderful.
So we're gonna go back here. Now., I've got the perfect image that we're gonna use for the background. All right. There we go.
Yeah, I think that looks really, really nice. So we're gonna have this here. (chuckles) We're gonna have this here and then we're gonna drag the image, which you can just drag it in on the page.
So we'll drag our image here and we're gonna make this take up most of the page. So we're gonna maybe make it a little bit larger there. And then at the bottom here, we're gonna add a price. We're gonna go down here. All right. So we got our pretty fair price there.
We're gonna center that. We're gonna make the text green so you can totally read it and we'll kinda just increase it a bit, make it bold and not underlined. I think that would be a bit too excessive and yeah, I think that...
Oh geez, that was kind of horrifying. We're gonna go back up here. Now, I think guys, I think this page we can call this page complete. And the next one I wanna do is kind of an advertisement for my YouTube channel.
So let's open this one here. Oh no, was that the... That was the header I'd changed. Oh no, I didn't realize that was actually changing the header.
(music) All right. So I've recreated the page. I've updated the price that I'm selling this for, made it a little bit more affordable. And so we're gonna save that here. Now it's gonna upload these two great images to the server here.
And so yeah, there we go guys, looking really good. So now we've got our own separate page that does not have the same header and side bar as our original documents. So, okay. One thing I wanna do is move all these images
into the images folder here and what's nice is... Just highlight them all here and then get these two down here. So we can move all of them into images. It will actually modify the HTML files so that you don't have to go back in and change all of that.
So let's go back into here and you see it's still here, right? And if we look at the HTML itself, you see right here, it's changed the source, the image source to images/ps2.PNG. So yeah, you've got easy file moveability functionality. So you can move images and other asset files around and not have to worry about it breaking the webpage or something not showing up properly, which is really nice.
So the last page that I wanna make, as I was saying before, is a, kinda like an advertisement for my YouTube channel. We're gonna take this one a little bit more seriously. It's still gonna be all done in fun obviously. If we go to tools here and we go to shared borders, we can set for this page only and turn off the top and now that'll go away and then I'm gonna go here and let's make a large title that says, check out my YouTube channel. Now for the background here, we're gonna use an image that I created many, many years ago. Yep, that's it.
So, okay, we're gonna have to make this text. Let's maybe change it to da, da, da, da. Let's do maybe... Poh, what would look not super eye straining, orange, not the greatest, but it'll work. We'll get rid of all this 'cause I'm just going to drag in my logo.
You can see- it's supposed to be a circle, it's not formatting properly. Let's go to preview and oh, and it's not... It's a transparent PNG, but you see, it's not cropping the transparent background out. So it just has that in there, but whatever, we'll just center that. And we're gonna right click on this and go to image properties and we're going to make this a hyperlink and we're gonna make that location http://mjd.yt,
which is my short link. And we can also add alt text, lets go here and change this to "YouTube Channel Link" And there we go, we'll save that. Let's just get rid of this here, this text.
And let me go back to my document here. So we've done the marquee with border. We've done the animated background. We've put the animated buttons in the photo. We'll get to the GIFs everywhere. I gotta put email address, large text near center.
That's something I just thought would be kind of obnoxious. Oh yeah. Tables and way too many links. Okay. So we're gonna add just a crap ton of links here.
All right. So that checks off adding a table and way too many links, large text near center. We'll go back to the main page.
I think we'll go back to the main page for most of the other modifications. Maybe move this, the date modified down underneath these. I don't really like the big text, we'll just get rid of that.
So large text near center, email address, we'll definitely add that. 'Cause you always had an email address on your site. So michael@teammjd.com.
I can't see that, but we'll see it in a moment here. Actually, we'll make this email me by clicking here! Because we can just make this a hyperlink mailto:michael@teammjd.com. So we'll do that, that gets the email address. We definitely wanna add a ton of GIFs. And so let's see here, we got... Well, we'll add this one in here, got some stars.
Oh yeah, the Netscape cube. I definitely wanna add that in. And I think that's all of the GIFs that I got. Oh, we got...
Oh yeah, that's right. I forgot about this one, we've got this YouTube. I should totally go back and put that on this page here.
We'll extend that. And we'll just put this with the link as well. So maybe move "Welcome to the Internet" right here. Move that like down there. Da, da, da. Oh yeah, the Netscape cube. Oh my gosh, we wanna make this super large.
Move it down. Yeah, there we go. All right. So that gets rid of this. And the last thing I wanna add is some under construction GIFs, because, websites were never finished by then. Right?
I mean, if you had a website like this over on GeoCities or somewhere, it was never finished. You were always adding stuff to it. So I've got some images here that I pulled that are all under construction. So we're gonna add like this massive banner up here.
We'll add it like right here. So maybe just duplicate this same one here and we'll put it right up here, put it right there. And then let's just go down here and just paste an absolute ton of them. Oh my gosh. This is just so much fun. I mean, I'm having a ton of fun here.
Oh, we're gonna stretch this out, so it looks ridiculous. And I mean, I just love it guys. I love everything about this. So here is our website, which apparently is not...
Oh, I didn't add in line breaks and the under construction things just added- Okay, let's go ahead and modify that. I was like "wait a second, where is everything?" So there it is guys, that's the final product. All our hard work across this video. I think this, honestly... Honestly, this looks not...
I mean, yeah, it's obviously we made it purposely funny with all this stuff, but I think it looks kind of cool. It's got that nice charm to it. Right? And this is by the way, being hosted right now from this computer across my local network.
Thanks to FrontPage's Personal Web Server, which is running in the system tray here. So there it is, it is running. And I could go to another computer in my house and pull this page up from it. We're gonna go ahead and explore it here. So it looks like one thing I actually completely- Did I really overlook? Yeah.
I think I deleted the navigation bar from here. All right. We're gonna go back here. All right. There we go, I've got it configured properly now. So now we got our page here and oh my gosh. Check... I love the GIF. Oh, that's beautiful.
Oh, that's perfect. Oh, this is amazing. Okay. So yeah, both of these linked to the same thing, by the way.
I mean, it's not gonna load here in IE 5, but this would take you to mjd.yt, which is my YouTube channel short link. So we also got all these links down here.
This one just goes to google.com, all your various links to click. And we can go back here and go to our NFT page and view it. Oh my gosh. It's so bad.
Oh Lord, but it's so perfect. Why is this not- Why is the marquee not working? Oh no. Okay. So we just wanna set the delay to zero then,
delay is zero, and then just do this 50. I just had it set wrong, that's all. So we go back here and oh yeah, look at that, I didn't even change the title. Oh wow.
That's really bad practice. There we go. So now we got our wonderful marquee going.
We've got our NFT here and yes. So let me go ahead and... You see, this is still called "Favorites". So we go back here to FrontPage, open up NFT.
I know how to modify the HTML to change the title of the page, but how do we do it from FrontPage here? Do we just go to page properties? Yep. There we go. So we'll call this "NFT For Sale" and we'll call this "YouTube". Yeah, I really like how these editors included the ability to view the HTML here.
So, like right here is where you can change what the title of the page is. So if you didn't feel like going up here to file and go to properties and all that, you can just go in there. I just can't get over this. This is the perfect embodiment of a nineties web page. I think it's so perfect in every way, but yeah, there you have it guys. That is a look at Microsoft FrontPage 98 in all of its glory.
I wanna give a huge thank you once again to Matthew for your very generous donation to the channel, really appreciate you making this video possible. And if you guys enjoyed this one, be sure to give it a thumbs up, get subscribed, turn on notifications, all that good stuff. And as always, I wanna thank you all so much for watching and I'll see you in the next video.
(outro music)
2022-02-14 05:30
