So we have a landing page and it looks pretty good.
I have to say, one of the things that I do want to change, though, before we get to making our rooms
is this carousel.
It looks good, but when I go from image to image, it actually slides.
And I don't want it to do that.
I want it to fade.
And if you look at the documentation on the bootstrap page, so I've gone to component's Carousel and
then over here I clicked on Crossfade right over here.
It shows me that I can actually have things fade from slide to slide, which looks better to me.
All you have to do is copy this carousel slide or carousel fade and go back to your Tmall and find your
carousel.
Wherever it is, it is right here.
Carousel slide and add that success class to it.
So that would be carousel fade.
At least that's what they say.
So I save this.
I go back to my website, I reload that page and let's see if it works.
Yes.
Now it fades from slide to slide.
That just looks better to me.
All right.
So now we want to create some pages for our rooms.
And we made two links for it.
One was Generals' quarters and one was major suite.
That's what I'm going to use in the final application.
But because I need to navigate around right now to HTML files, let's make a few changes to our navigation.
So here's my NAV.
I'm going to format that a little bit better.
OK, so under rooms where it says rooms, general quarters, we'll use that later, but right now we'll
just put it generals', HTML and for the majors will put Meijers.
HTML.
And just because I want to be able to get around really easily, I'm also going to do HTML links for
these things.
And when we build our go line templates, of course this will be indexed on HTML and this will be Reservation
Dorridge HTML.
And I can't have the Slash's in front of them, so I'm able to fix that problem right now.
Will fix this, will change these in the Golan template.
So when we actually cut it up in the templates and we'll just have to change them in one place which
is kind of nice.
And then somebody contacted each team.
All right.
This saves me the trouble of having to actually construct and run this HTML file through a real Web
server, which I don't want to do right now.
So those links should work, but they don't have anywhere to go yet.
So what I'm going to do is copy the entire page, create a new file, which I will call generals' HTML.
Oops, I will paste in the content and I will save it as general HTML.
I'm going to save it in the same place as the index.
That is simple.
So right in my working HTML folder beside index studied HTML, I'm creating a new file called General
Safety Model and will make this a page, will make this our actual page.
So first of all, we're not going to have a carrousel here, so I'll get rid of that.
Unless you want one and you can leave one end, but I'm not going to have one and I'll just do that
for right now just to save it, and I should be able to go back here, reload this page to get my refreshed
links and choose generals' him up.
And it takes me to that.
Good.
So I have the page.
That's good.
Let's just save this as a second file.
I shall create a new one or create a new file and call it Save Meijers HTML and paste it in there,
save it and I'll go put a title in here so I can tell the difference.
And this will be right here in the title majors suite and on general storage.
HTML will change this to generals generals quarters.
I think that's what I call it.
Save that.
Save that and they should all work.
I should be able to go to major suite and it is go to the generals quarters and it's there and back
to the home page and that works too.
So I haven't done the book now or the contact page, but we'll get to those shortly.
Let's get these rooms out of the way first.
So what do we want to show on this this this page?
Well, first of all, let's show a picture now in the course resources for this site.
You will find a file called Roomi Images, dot, zip, download that, extract it and put those, as
I'm doing right now, into images.
So you now have five images in here.
The two we just added, major suite and general quarters.
They're both ping files.
And I don't think I actually told you this, but there's really only three kinds of images you ever
want to use on a Web page gif or possibly Jif, depending on how you choose to pronounce it.
JPEG, which end with jpg and Penglase pages.
And I'm going to use pings almost exclusively throughout the course.
There are other more modern types, but they're not accepted widely enough on browsers that I can actually
use them on Web sites.
So I don't.
So those are the three you want to stick with Peng's jpeg and GIFs.
So I've put an image there, generals quarters and the page I'm working on right now is General Squirters.
So let's put a picture there.
So the way that we do that is pretty straightforward.
I want to put this picture where I'll put it on its own row div class equals.
Roe, and it has a give and I will just put the picture there and we'll move it around and play with
it in a bit and see how it looks like.
And as you know, an image is put into a Web page like this image source equals.
And because I'm actually not on a Web server, I can't start with a right now static images.
And the name of the file is generals quarters talking.
Generals dash for jurors talking.
And you're supposed to give images a width and a height as well.
But I'm just going to give them the class a class class equals and this is a bootstrap thing, image
fluid.
And that makes the image responsive.
And we'll see what that looks like in a minute.
So that row should have been in a static column.
And I'm sure you noticed that div class equals color.
The color of the image should have been inside a column, inside the role of.
All right, so let's format this just to keep our divs nicely lined up so we can see where things open
and close.
The class equals relative class equals call my image, which should have an all tag ALZ equals room
image and two closing deals and it should be good.
Let's go back and reload that page and see what it looks like and it doesn't work.
Why not?
Static images generals' save.
That's better, OK, too big, but doesn't matter.
I'm going to go with that for right now, but it looks pretty ugly.
I mean, it's just stuck there.
It's way too big.
So what I'm going to do, rather than shrinking this image, which I could do in Photoshop or whatever
image editing software you happen to have, maybe I will change the width of the column and we haven't
done that yet.
So so far, all we've seen is div class equals call.
Here's the thing to bear in mind.
This entire container and this image takes up the entire width of the container and the container is
this tag right here.
Div class equals container bootstrap breaks that up into 12 columns are 12 possible columns.
So I can have as many as 12 columns in that particular row and I can do that.
I can specify how wide a column is using the syntax call.
And I'm going to go with L.G. for large and I'll call it three.
That means on large monitors, monitors that are very, very wide.
This will take a maximum of three columns.
And I can also specify other sizes as well.
I can go call IMed three for medium sized monitors, call s.m for small monitors and for small monitors.
I want this to be worldwide, OK, just because I can and if I go call excess, I want that to be worldwide
as well.
In other words, to take up the full width of the container.
Now, I've just added all those classes and I save it.
And if I reload, this looks much smaller.
It is now.
It's very small.
Well, that's too small.
Let's try five or four.
Let's see how that looks.
Save that a little better.
OK, let's try six.
Make it half the width of the container.
And I'm doing it for both large and medium because I want to treat those the same reload.
OK, that's not bad.
Great.
But it would be nice to have a little bit of space above it and it would be nice to have this kind of
centered on the page.
Well, let's see what Bootstrap gives us four images.
So under the documentation for the boot straps, I'm going to go to components and I'm going to find
images.
Are they in there now?
Maybe they're under content.
Let's try content images.
Look at that.
So responsive images.
I did this already just by giving it the image fluid syntax and that makes an image grow or small base
to grow or shrink based upon the size of the window it's shown in.
And we can also put little borders around a class image equals thumbnail.
Let's try that, see what that looks like.
So copy this and find my image and add it.
The class space image thumbnail.
Let's save that.
Go back here, reload this page.
OK, that's that's not bad because it does give you a little bit of space at the top and that is really
all I want and it puts a nice little border around it.
All right.
Let's try centering this now.
Well, we already know how to do that div class in the class on the div around this image.
Can I put text center?
Let's see what that does.
Give me a little center.
An image to know didn't work.
Well that kind of makes sense since you know, text center is actually text center.
Let's go back to the documentation.
So back here and let's find our images again.
I don't know how I got off there, but anyway, I did.
That's under content images.
Unless you scroll down.
Let's look over here aligning images, align images with the helper flow classes or text alignment classes.
OK, and here's an example of center.
So says, all I really need to do is to copy this these two things and paste them in my image.
Let's try that safe.
Go back over here, reload my page.
It's still not centered.
Maybe it's because we have the thumbnail on their list to get rid of the thumbnail and see what happens.
Still not centering it.
Well, why is it not centering it?
Well, of course it is centering it.
It's centering it because we actually made this this column couple large six to be the leftmost column
when we're looking at this from a large monitor.
It's actually not centering it or is centering it, but it's centering it in a column that only takes
up half the space.
So if I change this back to 12 and change this back to 12 or just leave it as call, for example, how
can I make this?
I just want this to be one column.
Now, if I save this, what's going to happen?
The image will get huge again.
Well, how can I make that smaller?
Well, I can actually do it by defining another stylesheet class and I'll call it half width or room
image because it's specific to these images.
And I can just say max width and then I need to put something in there.
Fifty percent might work.
So don't make it any more than 50 percent of the width of the available space.
So down here, we just need to add in this image, the class room image, which should make it 50 percent
maximum width.
And it does.
All right.
Now, when I took away my thumbnail, I lost my little space at the top.
So let me put an image thumbnail back in there and there it is.
OK, now we have a room image and we could put our description of the room here, make reservation now.
Well, let's let's think about what that button's going to do on the home screen when I'm back here,
when I click on Make Reservation.
Now, what I want to do is search for the availability of everything in my property.
I have two rooms.
Check for the availability of all of the available rooms.
But on the actual room itself, general quarters, I want to check just for this room.
I don't care if they have the rooms available when I'm searching for that room specifically, so maybe
I should change the text on that button and have it point to something else.
So what I'll do is go back to my editor and I will find that and I will say check.
Availability and instead of make a reservation, I'll put my reservation, GQ.
OK, so we're going to Saper and we go back here and reload this.
And I didn't say it did.
I must not have saved it.
Check availability.
Don't generals save, go back, reload.
Reload.
There we are.
OK, so I've got one room done now let's just for the sake of getting this out of the way, select all
copy and paste the general's quarters over top of the majors and then just go change these things.
Major sweet.
And down here, instead of GQ, we'll put MS for major suite, and this is just a placeholder, we'll
make that URL, whatever it needs to be later on.
So now if I save this oh, I got to change the image to instead of having generals quarters, I believe
I called it Meijers.
Sweet.
Save and reload.
That's fine.
Go to major suite and there it is.
I didn't call it major suite.
What did I call it.
Meijers.
I misspelled Meijers.
Oh, well, I'm going to leave it like that because of my ability to upload it to the course website.
Let's just paste that in there.
Nobody sees that except for us anyway.
Now when I come back to my Web browser and reload that I now have the major suite.
So I've created a two pages, one for a room, one for another room.
And I have my home page and I don't have my book now done yet.
That doesn't exist.
So we'll have to build that one.
We can do our contact, though, just really quickly, just by putting placeholder text in there, select
all copy, make a new file paste, save it as contact
e-mail, make sure it's in the right place.
It is.
And I'll just delete this stuff in the center and say, here, that can be gone.
This can be gone.
And each one this will be the contact page, close each one and get rid of this row.
And that's just a placeholder just to get us in there.
OK, so we save that.
We go back to our Web browser, we reload the page and we should have a contact page and we do nothing
special in there.
But that works.
This works about it's not there.
So let's just do that.
Select all copy new files, paste save about org html.
We're building a wireframe for our site and Williams will do one now for book now as well.
So new file paste save and we'll call it book dot html.
I think that's what I will call it that anyway.
Save OK.
And now let's look at our navigation and see what I should have called that.
Now, General Sportsbook, now reservation got e-mail, so I'll just rename that by coming over here
and hiding that and finding my working e-mail and renaming book to close that book to reservation.
OK, so let's go back and label those so we know they're actually correct.
This will be the reservation page save about.
This will be the about page save contact is the contact page.
So we should have all of the necessary pages right now.
So we have our homepage, we have an about page.
We have our generals quarters.
We have a major suite we have booked now and we have contact.
All right.
At this point, I am now ready to convert this these HTML files into Goldwing templates and we can do
that in the not too distant future.
So that's enough for this time around.
We'll pick it up in the next lecture.