Microsoft Office Project: How to Make a Basic Web Site Using Powerpoint
written by: Jeffrey Davis•edited by: Tricia Goss•updated: 6/24/2010
Although the intended use of Microsoft PowerPoint is to create virtual slideshows for presentations, the software does have a few tricks in the box, one of which allows you to export your presentation in HTML format. In this project, we are going to use this feature to make a simple, basic website.
slide 1 of 6
Although the intended use of Microsoft PowerPoint is to create virtual slideshows for presentations, keynotes and the like, the software does have a few tricks in the box that can be used to your advantage in ways that you didn't know were even possible. One such trick, for example, is to export presentations as web pages for use as a presentation delivery method -- but why stop there? In this project, we are going to turn this feature on its head and use it for an altogether different purpose -- one more befitting of an HTML file. You read that right: we're going to make a website using PowerPoint. A whole flippin' website! Sure, it's not the most traditional way of getting the job done, but what's to stop us? So let's get started already!
Oh, but first things first: this guide assumes Office 2007, which means all our steps are going to be centered around the ribbon interface. (I seriously, honestly didn't want to forget that one now, did I?) If you are using any older version of Office then you're going to have to adjust your strategy wherever I mention something, anything related to the ribbon interface.
Okay, now we are ready to go, so let's get started.
slide 2 of 6
Setting the Layout and Theme
To begin, let's set the basic layout and theme for the website. Start by going to the Home tab on the ribbon, click Layout in the Slides panel, and select Title and Content as shown below:
Now let's insert the text of our home page and set the header and title. The title, of course, should be the name of the website, so set it as appropriate based on the example below. Next, type Home to signal that this is the home page. This is strictly important: if a home page header is not used, PowerPoint will export the webpage with the link for this page as the beginning few words of the first line of text; therefore, the title must be the name of the site and the first line of the content section as the page header. Under the header is where the body text of the page should go, so follow accordingly. In addition, since PowerPoint defaults to a list format for the content section (which doesn't make sense in this scenario) go ahead and select all of the text. Click the Bullets button in the Formatting panel. This places it in the off position, thus getting rid of the list formatting.
The results to this point should look like this:
Now all we have to do to wrap up this step is to choose the page theme desired for the website. For this example we are using the Verve theme, so click the Design tab on the ribbon, click the arrow to the immediate left of the Fonts menu and select the Verve theme (it should look like multiple shades of gray criss-crossed by two lines in the lower right corner, with one of the lines coming from the upper left. You should now have the following result:
slide 3 of 6
Technical people and everyday office workers alike know that Microsoft PowerPoint is intended more to create virtual slideshows for presentations, keynotes and the like than anything else -- but why stop there? In this guide, we are going to turn PowerPoint’s HTML export feature on its head and use it for an altogether different purpose -- one more befitting of an HTML file. That's right; we are going to create a basic HTML website using PowerPoint. This second part of the how-to discusses the addition of further pages of the website, saving the finished product and extra tricks for across-the-board compatibility with various web browsers.
slide 4 of 6
Duplicating Pages and Setting Custom Types
Now we are going to set up the different pages of the website. To do this, we can either set up a new page from scratch or we can make it faster to complete the process by simply duplicating the first page as many times as we need. We are going to use the latter method in order to save time, so in the slides panel go ahead and right-click the existing slide and select the Duplicate Slide option as follows:
You may want to do this a total of three or more times based on how many pages you want to have. Then, for each page, you will need to change the header text to identify each section (e.g. About Us, Services, Contact Us). In the case of the Services page, we are going to want a list for each item on the list of available services. Once each item on the list of services is defined, select all of the individual items for that list, click the Home tab on the ribbon and choose Bullets again to turn the bulleted list formatting back on for that block of text as shown below:
Finally, let's create a page with contact information. Again, you can duplicate an existing page for this or simply start from scratch. Since the previous page was a list page and I didn't feel comfortable modifying that for the last page in this project, I opted for the latter option and set each individual portion of the fresh, new page to match the other pages in the site design. Since a contact page includes a mailing address, email information, etc. I set an example of such information to demonstrate the formatting of a typical contact page as shown below:
slide 5 of 6
Finishing the Project
Now that we have all the website pages formatted accordingly, it's time for us to save the webpage file. Begin by selecting the Office button, point to Save As and choose Other Formats in the list that appears (be careful not to move the pointer out of the Save As option before you move it to the applicable list, or you'll have to point to it again!) The items to highlight and select are listed in the illustration below:
Now we are going to save the file. Begin by setting the file format to Web Page and replace the text in the File Name box with "index.html" (with the quotes included to force the exact text as the entire name of the file -- including the extension -- so that a web server can interpret the file correctly). You can leave the title of the HTML page as-is, so go ahead and click Save to finalize the webpage file.
slide 6 of 6
Supporting Third-Party Web Browsers
Alternatively, if you wish to support old Netscape browsers, Firefox and whatever other known web browsers there are besides Internet Explorer, you can save an initial copy of the website file as something like "home.html" (again, with the quotes included) and then repeat the Office button/Save As/Other Formats procedure. However, instead of selecting the Save option this time we are going to select the Publish option, which will bring us to the following selections:
Now set the Browser support to All browsers listede above, set the file name at the end of the published path to "index.html" (no quotes necessary -- or even allowed -- this time), and then select Web Options and click the Browsers tab in the resulting dialog box in order to bring up the following selections window:
Answer the People Who View This Webpage Will Be Using: query with the Microsoft Internet Explorer 3.0, Netscape Navigator 3.0, or later option in the drop selector and click OK. Click Publish in the prior dialog and let Powerpoint do the rest. You should now be ready to go!