0:00
[MUSIC]
Okay, so we've built a couple of navigation bars.
But the problem is, we don't really have much of a site to navigate yet.
So in this lesson, we're gonna just quickly build out the sites so that
it maps more closely to the structure that Kate showed you in the earlier lesson.
So we're gonna build the photo album concept,
where you have a set of photo albums at the top level.
And then you can dive in and you can see all the photos in an album.
And then following that, you can then go to an individual photo.
So, let's just build sort of the basic structure that we need for
that by creating a few navigation links and then creating a few new files.
0:41
So here's our page, as it was, and we've got the Home and then another page there.
So, first thing I'm going to edit is the navigation bar, so opening up the index
file, I'm going to go into my navigation and change it a little bit.
So I want to have an albums page.
1:02
All right, so remember this is the part of the navigation bar that is shown when it's
uncollapsed, if you like.
So albums.
And I'm just gonna change the link text that says Albums.
So save.
Jump back over to the browser.
Check that it does work we expect.
1:18
Good. So when I click on Albums I get
page not found because I haven't created it yet.
So we've got Albums.
But I'm also going to create another page which just sort of pulls out
all of the photos that I've uploaded and just shows all of them in a big list.
And I'll call that All Photos.
Okay?
Let's save that, check that.
So now I've got three links on my navigation bar.
1:57
So let's now create these pages.
So I've got to create albums, photos.
I'm gonna create an additional page as well which is gonna be called photo1.
So that's just going to be there so
that we can have a page that shows just an individual photo.
But it's not gonna be linked off the navigation bar directly,
the user has to come and drill down to get to that page.
2:16
Okay, so that's our album.
One way to do it is to just duplicate this like this.
So we can just do copy, paste, paste, paste.
So I'm gonna create three index files.
Then I need to rename them.
So we've got albums.
We've got photos.
And we've got photo1.
Okay.
So now we've got four pages, and let's just check if the linking is working now.
So Home, Albums, that doesn't break anymore, All photos works.
So I can click on these links, and you'll see that it's updating
the page that I'm viewing there as I move around.
3:18
So we open that up in the text editor.
Actually let's drop it into the same window, so we can jump through.
So I've got Albums here, and what I want to do inAalbums,
is essentially just drop in a list of photos.
Cuz normally when you look at a photo album online,
you start off with a cover photo of the album.
So here we go, let's create the cover photo.
Now remember with images, for accessibility purposes,
we always put an alt text in on the image.
So that if someone doesn't actually have access to the image, then they can
at least get a description of what they should be seeing, if they were able to.
Right. So the source is images and img_1.jpg.
Now remember that with the resources for this course you get this kinda starter
Bootstrap site, which comes with a set of images so that you can use those.
Of course, you can use your own images or whatever.
And let's just check what it looks like, so I can write a decent description.
Okay, cover photo.
Then we might just write cover photo for my first album.
You can write the alt text, write it as detailed as you can, but
let's just call it graffiti cover image.
Right. So if someone's not able to see the image
they can at least see that description.
And say, oh yeah, so this is an image of some graffiti.
Right. And so we're gonna have three albums.
4:53
Okay, so that's number 2.
That's not graffiti, that is what we call a full English breakfast.
So we'll just call that the full English, which is the height of English cuisine.
And then we've got some cheese.
Right. So, let's put in the word racks of cheese.
5:25
There it is.
But it's a bit confusing, it's still got this weird title, and
also the images are a bit too large.
I mean normally when you're putting images online you would resize them
in your photo editing software to be the size that they want to be displayed at.
So if they're thumbnail images like an album you would make a small version, and
then you would make a larger version for when the person wants to click through.
But for now we're just going to use CSS to kind of get the browser to resize them for
simplicity.
5:53
So how do I use CSS?
Well, I'm going to add a class to the image like this,
which is going to be album cover.
Okay?
Save that.
And then I want to start writing some more styles of my own.
So remember back when we created our own styles file?
Well, and then we deleted it again.
Well, I'm going to recreate it.
So, there's styles, and I'm gonna go to a new file called styles in the CSS folder.
Styles.css, there it is.
And I'm gonna create a class called album_cover which has
a width of 25% of whatever it's sitting inside of.
Ok, so that's just a CSS class called album_cover, so
full stop then album_cover, and it's just got one property, which is the width.
And so if we go back here, we can see, let's just save that and
have a look at it.
You see now that one has shrunk to being 25% of whatever the containing element is.
Right?
So as we shrink it, it shrinks down to 25% of, basically that container div here.
7:07
And reload.
Right. So now I've got my album covers.
And because they're album covers,
I'm goning to add one more little style element to them.
Which is, I'm gonna give them a solid border of say,
20 pixels, which is solid.
And I want it to be a gray border.
8:18
So go Homepage, Albums, click on the link, and now we're in photos.html,
so the final one to edit is photos.html, so let's load that up.
[SOUND] Drop that in there.
Again, I'm gonna put the [SOUND] style sheets in.
[SOUND] So you can imagine as your site grows that this problem of having to apply
any changes back to everything.
So imagine I wanted a new thing on the navigation or
want to include a new CSS file.
Then you'll have to go and reapply that change to all of my HTML files,
which is a right pain.
But we're gonna learn, as we work through the course and
through the specialization, there are much better ways of doing this, so don't worry,
we're gonna deal with that issue.
9:17
And we'll change the title to Here are the photos.
And there's my photos.
And it's not gonna be class image cover, though.
It's gonna be class.
[SOUND]
Photo.
[SOUND] Okay, and we'll get rid of that for now.
And I want it to link to photo1.html.
Because when they click on a photo in this list,
I want it to go to an individual photo.
10:28
There we go.
So they're all gonna link to the same file for now, but that's okay.
And this one, let's just change the image,
2, 3, 4, 5, save.
Okay, now I've got five images on there, and they all kind of jump
through to this final page which is going to be called photo1.
And let's just go and edit it photo1.
That's photo1.
So remember, I might as well in here,
I can put that style sheet back into photo1 like that.
And then, photo1 is gonna have just the title of the image.
11:29
Okay.
So then, that's that, now let's just do one final style for that.
So, class equals singl_ photo and
single_photo and this one
is going to have width 75%.
Because it's a single photo I want it to be a bit larger.
So hopefully.
12:03
Okay. So now.
So, let's just run through that.
So we've completed the basic site structure that we can work with for
the rest of the lessons.
So, we've got albums.
Click in or out on all of your photos.
Click on an album and then you can jump through.
You can see all of the photos in the album.
If you click on a photo then you can see a bigger version of that photo.
Okay, so that's our basic site structure.
In the next lesson,
we're gonna show how we can solve the problem, which we can just see here.
Well, as I through, I don't know where I really am in the site.
Yeah, I've got my navigation, which tells me where I can go.
But I don't know where I am.
So, we're gonna ask the question, where am I?
And try and answer that in the next lesson.
[MUSIC]