Creating Simple Websites With Keynote

You can use Keynote to build a simple multi-page website. When you export as HTML, the resulting files can be uploaded to a web host. To make a presentation behave like a website, you need to create buttons and link them to other slides. You can also turn off regular presentation navigation and add other web and email links. Sites created this way are relatively basic, but can be updated easily.

Video Transcript: Hi, this is Gary with MacMost.com. On today's episode I want to show you how to make simple websites using Keynote.
So Keynote has the option to export to html to create a website from a presentation. Now it can't do too much. I can't create complex websites but it can create very simple ones and a lot of times that is exactly what is needed. So let's look at an example.
I've just started a new document. I'm going to choose one of the preset templates here. Just something that will be easy for me to demonstrate. I'm going to choose this one right here and we're going to build a very simple website using this template.
We're going to create a five page website for a simple fictional store. I'm going to select the first slide that it puts in there. I'm going to select Format over here and change the master so it is something that would make sense for a website. So let's just go with the default artwork here to make things quick and say we're doing a pottery store.
So we'll do My Store here. We're going to get rid of this text and use this space down here for what you would expect on a website which would be some buttons. So we're going to use the Shape tool here to create some buttons. I'm going to just create a simple square here and going to create a button like this. Then I'm going to put some text in it. So like the first thing we might want to do is a button for that, Our Story.
Then we're going to want to have a series of buttons on the bottom. So I'm going to Option Drag to duplicate this button four times here. Then I'm going to select all four. I'm actually going to space these out so the ends, that looks about right, I'm going to make sure they are distributed nicely. I'm going to select a range here on the right, distribute them horizontally and they are already pretty well distributed. So we've now got four buttons. Let's do like About Us, maybe Directions or location button, and maybe one for Hours. These are the four different pages on the same website.
Of course then you would put a picture in here that is your picture but we're just going to pretend we are doing a pottery store and this happens to be our picture. So here we already have the first page of our website.
So let's create four other pages. Let's say the first one is going to be Our Story. Let's create one that has got an image on the side and we'll then put some fake text here. I can turn off the bullets so we have some plain text. Then we'll create another slide. I'm going to create four of them and put them in place.
Now I've got four different pages here to match the four buttons. So how do I link these together because right now this is a presentation. If I'm showing this slide I can click anywhere and it simply just goes to the next slide. So what I want to do is to link these buttons to the individual pages. 
If I Control click or use two fingers on a trackpad I can Add Link to this. I can say I want to go to a Slide and give a specific slide I want to go to. So I'll do slide 2 for this. You can see now it shows that they are linked. There is a link there. I can do that for all of these linking to the proper slide.
Now when I run this presentation I'll be able to mouse over to any of these and you can see that each one acts like a button and I can jump to a specific slide on here.
The next thing we need is a way to get back. So for that I'm going to take one of these buttons here, because I want it to be the same kind of button, and I want to copy it and then paste it. So Command C, Command V. I want to put it here on this page. I'm going to change the text to Back and I'm going to Control click it again and Edit Link and have it go to the first slide. 
Now that I've got that Back button there I can copy it and then paste it onto all the other pages of the website. Put it in the appropriate spot anywhere I want. So now when I run I can use the Back button to go to the first page from any of these pages.
The next thing I want to do is I want to change something about this presentation. I want to go to Document settings here to change the presentation type to Links Only. That means it won't automatically advance to the next slide when I click on a slide. It will only advance to another slide clicking one of these links. So it behaves just like a website.
Now that I've got it working the way I want I simply go to File and then Export and I can choose HTML as the export type. I'm going to export it as a series of files in a folder.
So now here in the Finder this is what I've got. I've got a folder where I've put all this stuff. It has an index html file which is the main page for a website and it has a folder full of assets that has all the rest of the stuff, the graphics and everything.
If I were to double click on this it will launch Safari and I can view the website as html not as a Keynote presentation any longer. 
So as you can see this is running in my web browser but it is still just files on my drive here. And it works. I can view the photos  in there. I can click on any of the links and go back and find all this information that I have put on the website and it is very easily done.
Now all I need to do, if I wanted to actually put this on a website, is get a host and upload the index html and that assets folder to that web host and then to just about any web host that will allow you to upload raw files will do. You've created a web site.
You can easily alter this presentation as many times as you like and simply replace all the files. So you can update your hours and your information and all of that very quickly and easily without needing a web designer. So if your needs are for a simple website this could be the way to make it.
One last thing I want to point out. Suppose you wanted to change this button to a contact button. You can do that in Links here. Instead of doing slide you can do Email and put your Email address in the Subject here and somebody can click on the link and send you an email. You can also change it to webpage where you can have them go to Contact form but say for the Directions button you can have them go to a link to Goggle Maps. You can copy a link that shows your location on Goggle Maps and you can place that in there or you can link out to another site, say if you have an Ebay store or an Amazon front store you can go and put that link in here.
So there is a lot you can do. You don't just have to show information. You can actually make the site somewhat functional.

Comments: 12 Responses to “Creating Simple Websites With Keynote”

Antrim

9 years ago

Cool idea.

Thanks Gary, excellent podcast (once again!!). I've been struggling with making a simple website for ages. It never occurred to me to use Keynote. Very much appreciated.

Rien

This is a great idea. Thank you Gary!

Nicky

Fantastic - I have wanted to come up with a way for clients to do educational quizzes this is perfect for multi-modal learners. How can I protect it so they can't make changes - they will be using it on an off line ipad.

Gary Rosenzweig

If you export the "quiz" as HTML, then they really can't edit it. They would be playing it in their web browser.

Kerrie Redgate

Brilliant, Gary! Thank you so very much. I had no idea Keynote could do these things! I'm currently designing a Keynote presentation and will need to flip between 3 slides out of sequence due to audience participation. You've solved my problem if I can use buttons like this to link the slides!

Israel

Thank you for shedding some light on the versatily of keynote. Well done Gary.

inghilt

Wow,Gary! Your podcast are excellent.Thank you so much,love it.

Wow Gary, great podcast,love it. Thank you.

Brad

I love seeing your tips in my mailbox! Sometimes I learns lots and sometimes I learns just a little but it's never a waste of time.

Comments Closed.

Creating Simple Websites With Keynote

Comments: 12 Responses to “Creating Simple Websites With Keynote”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information