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.