Part 5

Add Bootstrap, split the page into a shared header and footer, and build the home and facilities pages.

#digital technology #gce #parkwood vale #wjec

← Previous part Next part →

We turn the wireframes into real pages. Bootstrap does most of the styling, and a shared header and footer keep every page the same. In this part: 0:50 Downloading Bootstrap and adding it to the project 1:50 Comparing the Adobe XD design with the site so far 2:56 Splitting the page into header.php and footer.php 5:27 Page title, character set, viewport and meta tags 10:03 Linking Bootstrap, then our own style.css after it 12:04 The page container and the home page banner 19:55 The logo, and WebP images with a PNG fallback 24:29 A collapsible Bootstrap navigation bar with a search box 47:00 The footer and the custom CSS, including the background image 52:50 Home page content: opening times, address and contact details 1:09:47 Creating facilities.php from the same template Software: Adobe Dreamweaver, UwAmp, Bootstrap, PHP, HTML, CSS, Lighthouse.

Transcript

Okay, welcome back then. And in this video, I'm going to show you how we're going to
structure our website following the designs of the wireframes we made last session.
We're going to start off by downloading the latest version of Bootstrap, making sure
that's in the correct locations and linking that to each of our pages.
We're then going to look at old versions of web design versus the new versions of
web design and see how we can stylize the templates of our pages so that each of our
pages follow the same layout and look professional.
Let's get into it.
Okay, so as you can see I'm back on my student computer then and what I've got set
up already is Dreamweaver running and I've got UwAmp running on my server.
Now I'm going to go into the Bootstrap website and I'm going to download the latest
version of Bootstrap. From Bootstrap's website we have the ability to look at
different examples. They have a documentation page which is brilliant.
I'll take you through that in a little bit.
And an option to choose which version we want to work with.
Now we're going to be working with the latest version of Bootstrap.
on the download option here and download the pre-compiled files see that little
number one there i've already downloaded this beforehand this is a third time doing
this video take not been happy with my previous work so i want to make sure that it
is as clear as possible for you what i've all i've done in this is i've gone in and
i've taken the basic bootstrap element out so if i go into Parkwood Vale what i have
included was the bootstrap and bootstrap min with the map files and that's it
nothing from css just yet when i've downloaded and extracted those i can get rid of
that i can minimize UwAmp and let's open up adobe xd
so there it is
i've got the two versions of the Parkwood Vale site available to me the one i did
last session with you guys and this session here is the original design I created.
Looking at this original design then if I zoom in ever so slightly you'll see that
all of the pages have the same template and the way we're going to do that rather
than just simply using .tmp files and trying to put editable regions and things like
that in place what we're actually going to do is have a header and footer
document that contains most of our styling elements and the middle part here that
that's going to be our different pages.
So let's jump into Adobe Dreamweaver and I'll show you what we're going to do.
So as it stands at the moment, we have our connection file that's just being
required to connect to our database and that's it.
It's saying open our config file and include or require the use of our connection
file there, otherwise the server shouldn't run anything.
and if I go to localhost all I get is a blank screen.
What I'm going to do next is I'm going to insert a new file or add a new file which
is a type of PHP file and I'm going to create that and I'm going to call it header.
So here's my header document here I'm going to put it straight back into code mode
and zoom in so you can see what I've got in place quite clearly.
And all it is is a standard boilerplate HTML page.
Nothing different there. This is going to be included.
This is going to be the top of every single one of the pages, whether it be the
admin side or the user side of our website.
So rather than requiring the use of our database on our original
document,
I'm going to get rid of it from my index page.
it in place on my header page
and that's linked those two together there now I'm connected to my test server I'm
in local view and that's why I keep getting a warning saying are you sure you want
to do this because it will automatically update it for me now the very first thing
I've got in place is this require the connection and then I have the rest of my HTML
page with our header page then it's not just going to contain what's in our head
document it will
and it will start to contain some elements for our navigation and the setup of our
pages. What it won't contain are the last two body tags there.
So I'm going to get rid of those.
Instead, I'm going to add a new file.
Again, create it, and it's going to be called footer.php.
Now, at this time, it won't actually contain any PHP, but we will undoubtedly be
adding some when we get to it.
All it's going to do is contain the final two HTML tags.
So as you can imagine, I'm putting this together as the header tag will be in place
or the header page Then the index page then the footer page and all three will be
loaded every single time At the moment my index has nothing in it
So if I went to localhost, it will show me nothing and if I go to page source It
will show me my required there because it hasn't been updated to show that I've made
those changes So let's just go over here upload that so that I put that over
there and when I refresh this now I should get a blank
document
what I'm going to do rather than say require which will break the software if it's
not there I'm just going to say I want to include it so I'm going to go up here I'm
going to say PHP I want to include and what I want to include is my
header or dot PHP file
Now, I'm also going to go in, add some spaces in, and I'm going to include a PHP pad
that includes my footer page,
just so that I have that full working PHP document and everything in place.
And let's do that properly there.
Now, you can see here it's linked these two documents into it, and they have
asterisks next to show that they haven't been saved correctly.
There's that element there. I want to save that one.
There's that element there. I want to save that one.
They're all linked together. On my header here, I probably should have a PHP tag in
just to be sure of it. Make sure that's all saved.
And I should be able to put that up.
And if I refresh my page, it's giving me an error.
It didn't expect that on header line one.
But if I refresh this, it does give me that error output.
That's why. I accidentally deleted my bracket.
And I don't know what button I pressed then, which duplicated pretty much everything
that was in place.
Let's see. How's that looking there?
And there.
Yeah. Not quite sure what happened there.
PHP.
Require.
Dreamweaver can do some strange things on times.
So now that's in place.
And close that, close that, close that a second.
Just open this up. There you go.
That's all as expected.
And so is that. And Kevin, the two files open at the same time caused some sort of
internal error with Dreamweaver.
If I refresh this page then, that error disappears.
If I refresh the view source, I get my HTML section set up.
And as you can see, on line 14 and 15, if I come back to here, I have
what's on line 1 and 2 there, but they are being pulled through into the right
places, as I'd expect it to look.
Now, I'm not really going to be working on my index page to start with, so I'm going
to close that down, because as we saw two seconds ago, it can cause some internal
errors.
open the file you need open at the time.
That's one of my biggest tips.
Now up here you can see it says untitled document.
We don't want to say untitled document, we want to tell it that it's Parkwood Vale's
library system. So we're just going to simply update our title to say Parkwood Vale
library.
If I save that and go back to my local host,
let's put that up,
refresh that,
with Parkwood Vale Library, it's put that in place for me.
I'm going to continue working inside my head section.
It's already put in place for me, thankfully, the character set of UTF-8.
That just allows our browsers to know what version or what character set we are
using. What I'm going to do very quickly is just zoom in a little bit on there so
you should be able to see it clearly.
Please do let me know if it's unclear and I'll try and do some editing magic to make
it a bit clearer for you. Now I am going to indent these a little bit because I like
it to look nice and neat and tidy.
We have our meta for our character set in place.
We also want to put in place some meta details around other bits and pieces
for our site. One of the most important ones when working with a responsive site is
our viewport. Now this sets the size of our page.
The size of the pages should be viewed at.
I mind saying that the width of the device is scale one.
in and it's the full width of our device.
I've got a few little other bits that I like to include as well, good for SEO,
and they are just simply information based around our website.
So we have our meta description, which says this is an example transactional website
solution, our author, which is me, the generator, which is me, and some keywords to
help with SEO, search engine optimization.
Now, after we've put our basic meta details in place, which would have zero impact
on our actual site itself, what I want us to do is link to our
CSS that we have included here.
The way I'm going to do that is start off with a comment so that I
know that this is for my CSS.
Just so that when I'm looking at it, I can easily find those different sections.
I want to have a link command in place.
That is a href that will, if I click on browse,
go to my CSS. and I'm linking directly to the bootstrap CSS and I'm gonna click
okay.
Now it's relevance is going to be, it's a type of style sheet.
And that will link my CSS to it.
Now when I save that page there, bootstrap becomes a linked page at the top here.
If I put this file up and I refresh my local host, nothing changes,
but in the view page source, we now have that link to our CSS included as well.
aside from that that's for our generic rules that are generated for everything
i also want to link to a href stylesheet i haven't yet created but i can
put the link in ready
which is going to be a css and it's going to be called style.css and it
as well is going to be a style sheet.
And all this is, is rather than overwriting the rules of Bootstrap in any way, if I
want to put in some custom CSS, I put it in the style sheet, which is loaded after
the Bootstrap sheet, which allows me to then put in any customizations I like
without having to modify Bootstrap's original coding.
Now in my body section for my site then, I'm going to break it down into different
containers that contain the elements of my website.
To start off I want a main section so I'm going to use a main tag
and the main tag is going to be a class of container.
Now as I put this in place it will help me
autofill until it decides it doesn't want to do it the way I expect it to.
The end of my main this section here will be in my footer document so
i'm going to open up footer a second and make sure that my body is there and then my
main finishes but close that again just to make sure that everything stays nice and
neat i do want to put both files so they're both on my web server
and if i refresh this yet again we still have no changes but we can see
i'm including this code in place.
Indentation in my footer section is terrible.
I'll deal with that later.
Inside my container then, my main section, what I'm going to do is start to put in
place my
design for my page. So I'm going to focus here on my first page here and just
stylize it all around this. This will be my index page.
As I did say, this will form the code for most of my page anyway but this is going
to be my index section.
I have at the top here this padded section where my logo is going to go and where my
text is going to go.
So I'm going to put in place a divide for it, a div tag.
This allows me to add different classes to it to make it look how I want it to
and I'm just simply going to stop there a second and end the div tag.
Now I'm going to add in some classes from Bootstrap.
One of them being p-4 which adds a four
pixel width element as padding around the whole of my document.
I'm going to put in an mt which is the margin at the top of my
container and I want that to be of consideration three.
I want it to be rounded which is very nice
And actually the last thing I'm going to put in place is text and I want it to be
background BG and it is dark.
Now all of these elements you've seen auto-filling come directly from Bootstrap
themselves.
Inside of there then, inside this div tag, I'm going to put in another divide and
I'm going to put in a class called rub.
Now responsive website design and bootstrap themselves work with rows and
containers.
One row is a horizontal width of your screen and contains 12 containers.
So they can be spaced at container sizes 1 through to 12 and any sort of combination
between.
I'm going to put in place a div section here.
It's going to be a class type column.
MD for medium size and it's going to be eight.
So that's going to take up eight columns within my site.
I'm going to scroll this down a little bit because we don't need, I can't yet, wait
for it to get to it.
And in there I'm going to say that I want it to be centered using the
px0 command. That will center any text I put in place in there.
And what I'm going to do is put
one and I'm going to put in Parkwood Vale
library and underneath that then
I'm going to put in a paragraph and in my paragraph I'm also going to put in the
text that you'd see on the Parkwood Vale site if you were to load it up.
Now I can scroll. Now I can add classes to how
these look So, if I put in class equals, I'm going to say
display, and I'm going to put in a display for like I
did originally.
I could also see if this one works.
F, S, T. Yep. Say that I want my font to be a static italic style.
So, if I save this page now, and I refresh this,
make sure you use the put command.
refresh this i start to get my text in place it's not the right color it's in the
right position and it fills up the right section of this with my p my
um paragraph and add a class to it as well and that class
is going to be a lead of text and it's going to have a
margin to it an my3
and if I save that put it and refresh it
you can just see that it increases the space and the stylings of it I have a nice
big space here where I'm going to put my logo and that is in my images folder in the
png or the WebP element and I'm going to show you through those two in a second
before we go that further step though I'm going to look at this and see that's not
the right color
and I'm going to go to my p tag here next to my dark text and just use an
inline css command I could put this in my style sheet if I wanted to but I'm going
to show you an inline element first it's going to be a background color now you get
a lot of noise when you're typing in here it could help this background color I can
click onto it it does help come through but sometimes it can be quite overwhelming
just get used to ignoring it and just type what you want to type regardless trying
to tell you to type. So my color originally was
set to this purpley blue color here.
Now if I save that, put that file up and refresh my
page,
it's not changed the color.
So what I can do is I can force it that my background color is important and
should be obeyed using important as a tag
element there now what that will do is say to change it to this color
regardless of what comes before it and now it
should pick up let's see if that has come through on my page source background
colors there but it wasn't put up properly so let's take that
put that up refresh this the importance there has it worked
it has there we go so it's going back that color that right shade
so i've got my header section in place i'm going to scroll down
and outside of this div then inside of my call my row div i'm going to add in a
new div
which again is going to be a class this time around though instead of being
colmd8 we're going to fill up the rest of our columns which is called md4
and we're going to put our padding for our element there as well let's close that
off and put that in place so this is going to now take up the rest of the space
within my banner bar i would originally traditionally use an image
tag
for my image tag and browse to my
pictures my image say my PNG and I'd go for my Parkwood Vale library
image and that puts that in place and if I was to save
it I get I get used to clicking on that put button
and then refresh it I I get a massive logo that takes up too much space.
I can use CSS classes to control the size of that logo.
And what I'm going to do is I'm going to have the class equal to MX auto, which will
center it. I'm going to put the display element as a block, so it displays it in a
block style. I'm going to set the height, this time around, to 200 EM.
and I'm going to add in my alt text for anyone with
any additional requirements as
Parkwood
Vale logo.
Now if I refresh that page nothing will happen because I forgot again to click on
the put button and then refresh that page.
Now let's put it down to the right size and that's
happy all looking as I expect it to but if I was to go into my
inspect section and I was to use the lighthouse scoring system
to analyze my desktop page Google will go through analyze how
my page looks so far and it will tell me recommendations based around how my design
is in place
as you can see hitting quite high on pretty much every element here but if i do
scroll through there will be a section where it says width and height not added and
to use caching and it should be an element somewhere html doesn't have the
language tag i can deal with that one a bit later on but it should say about
pictures and using um the more modern style images, which is what
we created when we converted from PNG to WebP the other session.
Now, the way we do that is we keep this as a fallback for if that doesn't work, and
we add in a picture tag instead.
Now, our picture tag becomes a container that does contain our image,
but also contains alternative options for it and these go before
it so I'm going to put in my source here for my picture and my source is going to be
a source set r s r c s e t equals and then I'm going
to tell it where to find my images so it's going to be image forward slash WebP
forward slash and this time it is the same name but ending
with dot webp and then the type
because you have to specify what type it is is image forward slash
webp and that puts that in for my original source
element at the moment if I right click on this I want to save image as it come up as
a PNG but if I was to remember to put the file to
and then refresh it when i go to save image as this time around it's now a WebP
file because edge is a chromium based website and supports these newer
image types it would display a newer image type if someone was using an older
website an older web browser sorry or using something like firefox it might not
accept it safari might not accept it they are taking they are becoming a lot
a lot more commonplace but we still need to have that failover just in case we need
to use it. And that would set up my main container, this top
block here for my website.
I'm now going to look at my menu bar across the bottom here.
Before jumping into the menu bar I'm going to have a quick drink, refresh myself and
then come back to this.
okay welcome back man so now we've done our main element there for our
banner we're going to start looking at next at how we put in place our menu bar
now i put that main there and i end the main in the footer section but on reflection
i don't want to end it there so let's get rid of that save that and put that because
otherwise i forget that and just end my main section here
and I'm going to create another main element in place in two seconds time and these
are my different sections for my different set parts I could put in a comment nicely
to remind myself and just say banner so that is my banner element and
I could do underneath here just so that I know where it is I could do
end banner I'm putting that end banner
section there and if I was to actually indent all of that ever so slightly I should
be able to minimize it so that I can get rid of that code there so it makes it a
little bit easier for you to see what's going on so there's the end of my banner and
I'm gonna put in place a comment and I'm gonna say now far because
that's what
and go from there.
So in the same way then, I'm going to put in a container for this that is going to
be containing my navbar. So I'm going to go div.
I'm going to put in a class equals, and it's going to be a type of container.
Now the reason I'm using container all the time with these elements is container has
some built-in properties. If I very quickly just open this up and inspect that
section there.
As it's a type of container, if I was to bring these elements up here, it has
its max width set for me and it has some different properties to affect how
it changes and adjusts in size, keeping its responsive nature in place.
So that's why I'm using containers for these elements here so that they keep to the
same size on my page all the way down.
now in my nav bar itself then i'm going to have a nav command this
class is going to be a type of container again but this time around rather than just
being a standard container it is going to be a fluid size container
actually in fact i'm getting ahead of myself there my nav is going to be a type of
navbar and then it's going to be a navbar
expand
on large size
and I'm going to use a background of a light navbar
now I won't be able to show you how those impact anything just yet
but when I come through and I've added some elements into my navbar I'll show you
what the
Now, if I save that and put that and refresh this,
nothing really changes. I haven't put anything in my navbar yet.
What I'm going to do is I'm going to put in this is where my container comes in
place.
Class container and that's with my container being a fluid
style container, which all that means is use as much of the space as you can.
So inside my navbar, inside my container, I want a fluid container.
I know it can get a little bit confusing having all of these commands in place.
What I'm going to do is I'm going to set up my first element, which is my
A class,
my standard link, which is going to be called my navbar,
and it is my navbar's brand.
Now, inside my navbar's brand, it's going to href.
So, its horizontal HTML reference is going to go to its standard page.
And in here, then, I'm going to say Parkwood there.
If I save that, put that, and refresh it,
it hasn't pulled
through. I'm going to click on the wrong thing.
There we go.
Now, thank you very much.
I get Parkwood Vale here. It is in line, and this is where I can actually jump back
and show you. Here, if I change this to BG Dark, and I
put that, making sure I'm on my header far this time.
When I refresh it, it comes up as a black nav bar.
if i went into bg dark and there was different options
i can go dark subtle and i can a danger subtle sorry and i can
push that i get a pinky color so there are all sorts of built-in
colors and built-in bits and pieces that you can utilize now this seems like a good
appointment as any to jump back into that bootstrap page i was talking about earlier
so if i go to bootstrap
and I go on to their site, and I go on to the documentation.
In here is everything you'd need to know about Bootstrap.
All the different CSS tags and everything they are looking at can be found here.
So I'm on the navbar section, and as I scroll down, it has all of these different
elements in place. It explains to me how to use the different elements, so the brand
for your company, the navbar itself, the toggler, all these different sections.
And as I go further down, it'll take me through some colorings and other bits and
pieces. So I've got here theme, blue, dark colors, and all different ways of
doing it.
So that's the documentation within Bootstrap, which is extremely,
extremely in-depth and thorough.
Realistically, you should be able to find anything you want to Bootstrap related in
the Docs section. But if you are having any issues, by all means, you can message me
and I can see what I can do to help.
So I've got that in place then.
And what I'm going to do is put in a button which will allow me to expand out my
page if need be. So what I've got here is a button tag.
It's classed as a navbar toggler.
It's a type of button and it's got some extra data elements included,
which hopefully you can see here, that will allow you to have that in place.
And when I actually save this and put the icon for it in place as
well, so let's just drop that in.
When I push that up,
realistically, nothing appears here just yet because that section I've just put in
place is there. Let's do a double check actually, because I've got that open.
Yep, the icon is there the span is there brilliant for when it is in
Phone mode it is this section here that I was just working on putting this different
element in place Now you may just looked at what I've done there and thought what
the hell has he done? How's it gone like that?
I'm gonna show that one again.
I right clicked I went to inspect here Which allows me to look at the code behind it
using my browser in some fashion And I have this little option here which has a
symbol of a phone and a tablet on it where I can toggle into different devices
Now on the drop down I can choose what device I want to work with and it presets the
dimensions for me And I can also rotate it so the moment it is in landscape mode
if I click here It will go into portrait mode and I can see how it looks if it was
on a device So if I went back to the iPhone 12 Pro section, that's my
phone here in landscape mode. And if I went to rotate, it would rotate it to
portrait mode. And as we are on the same Wi-Fi, I
should be able to go, if I remember the IP for it,
2.168.159.4.
And I should be able to pull this up because WAMP should run it through.
Although I think it's getting caught on the firewall itself.
1, 2, 1, 6, 8, 1, 5, 9, 4. Yes, it's not loading on my phone.
So it must be a firewall issue there.
So let's just close this back out a second.
I've shown you where that toggle is.
And I've shown you how to get into developer mode there.
And let's jump back in and start adding some pages in place.
So all of these sections are there.
enter let's tab that in and then gonna have a look
at what I'm going to include
in my section here I have home categories search about us sign in and create
an account if I actually go to Parkwood Vale I've
got home I've got browse books facilities acknowledgements feedback forms
search and account so it did differ slightly to what it was I originally designed.
What I'm going to do is in this section here then in my nav section I've got my A
class in place. I've got the end of that there and I'm going to put in now a new div
section.
Now this divide, this div section, in fact actually my bad I didn't quite finish my
button off otherwise nothing would show.
There we go that's the end of my button tag that span could possibly be tagged in
now with that done I'm going to put in place my div and that div is going to be a
class and it is a class of collapsible so that it can disappear if it needs to
and it is a navbar
collapse in place there
and all that means is that anything inside of this action, if it's on a phone,
don't show it natively.
Now, the way that Bootstrap works to create its nav elements is it utilizes
unordered lists. they are set as a class
themselves of a navbar
and
it is a navigation type. I can add some other elements into it as well so I'm
going to put it into the margins as an auto element so that it sets those out.
I'm going to put a bottom margin on top as well of a two and I'm going to put in
margin bottom on the larger element screens as zero because it'll take up too much
space otherwise.
And again, these are all just elements that you can play about with.
They are documented
heavily in Bootstrap's site, so you can see how to set those out.
I will put in a list item, which will need a class of nav
item so that it knows it is a type of navigation item for it.
Now inside my nav item, this is where I put in my link, so my a href.
And that's where I link it to wherever I want to link it to.
So as this is going to be my browsing for my books, I'm going to put in a browse
books link there. I'm going to write the words
here of browse books
and that's
in place now to put it in place here I got browse books facilities acknowledgements
and feedback form all I have to have is
the same thing over and over a couple of times so I got browse books
next one up I'm going to say is facilities and I'm going to Facilities section
there. It's going to go to my Facilities page, lowercase F.
I'm going to put in my Acknowledgements page.
I'm going to put in Acknowledgements,
lowercase A. And I don't need the feedback form.
That was just there as a demonstration to see how it would look.
If I put this up and I refresh my local page, I get my
elements in place here. They're not pulling through as they should.
little look as to why.
What I've forgotten to do is give them a class on the tags here.
Now by using the control key I can tag three elements, press space,
type class equals and it puts all three in at the same time.
Click and save that. Now when I refresh this one
put it first then refresh it and they come up looking
just the same as they do here the only difference being i don't have the underline
in place just yet
now i could have a link in place to my feedback form like i did previously
and i'm just going to copy that put that in place there call it feedback
and the reason i want to show you this one is just
one last simple thing. I have my link from
Microsoft Forms to go back into there.
And if I go over and target it to a new
page, and I'm going to say new,
what will happen is and I put it up there and refresh
it if I click onto it it opens a new tab as opposed to
removing this tab here now I know if you've done any bits and pieces before with it
you may be well aware of that command but if you come in from a draw plus point of
view you may not know it so I just wanted to put that in place there for you so you
could see what was going on
so I've got my links to my different pages but my nav bar is not yet complete
If I look at this, we have our search and our account buttons over on the other far
side. I don't yet have those here.
What I need to do then is put those in place.
I'm done with this side of my unordered list though.
So I can close that off and I'm in there.
And I'm going to remain inside my collapsible section because I
want these all hidden. And what I'm going to do is I'm going to put in a very simple
form.
and my form element here is only going to contain one input
so i don't need a button for it because i'm going to use ajax as a type of searching
element its id is going to be called my search
and what i'm going to do is give it a bit of a stylization to it again using the
bootstrap built-in elements we have a form element it's a form control i'm looking
for and i'm going to put in that auto me its
type is going to be a search so i've got that in place there
and its placeholder text i can put in place
to say search
now that placeholder can say whatever you wanted to say i've got it here at the
moment and it just search, I could go back into here and say instead of search,
find a book.
And that's what my placeholder text would say.
And I'm just going to put that there for a second.
And if I save this and put this up and refresh it, we get find a
book appears over here. I click into it.
Nothing happens at the moment.
I got the X, which will close it.
I'll come back to that.
but it's not relevant at this point so I will come back to it when we do that
section.
I then want another unordered list section.
That unordered list is going to be the same element as before so it's going to be a
class equals and in there I'm going to say nav
bar hyphen nav and I'm going to say mb hyphen two.
Underneath is going to have its list item
which is a class of nav item.
And inside that section, I'll also still have that A
tag, which is a class of nav
link.
Now, that link this time around is going to say account,
and it is going to be a href to my account page.
And save that.
Put that.
Refresh it. And we get the account button.
So our nav bars, if I put them side by side,
both have these elements in place.
Now that expands. This one doesn't.
That is because we haven't included the JavaScript forages yet.
We'll get to it. work by the end of this video.
But if I was to put them underneath each other, so one underneath the other, you'd
see that they were pretty much identical.
With that in place then, that's our nav bar setup finished for now.
We are done with all of this section here.
That's the end of my div tag here, which is the started up this section here, which
is my nav bar. So I'm going to put in place the end
nav bar section
and save that so now I should be able to collapse my nav bar and I got
end nav bar there as well if I put that up there and refresh my page
everything is how it should look and that is the end
of my head section. I've got the end of my navbar in place, all of that's there
ready to go. And what we're going to do next is jump into the footer section, which
will allow us to fix those issues with the navbar not working, the dropdown not
working, before we look at the main index element.
I have another pause by here a second, grab another drink, have another quick
refresh before we go into this next section.
okay so this final part then i call it the final part who knows let's go down and
see what happens first things first i'd forgotten to give the id to a
navbar so i've gone back into my navbar section i've gone after my button element
where i set the controls name the data target as the navbar support on my
navbar class I've given it its id navbar supported content.
Now that's in place I've refreshed my page and it still doesn't do
anything because we haven't included the javascript but without that the javascript
wouldn't make a difference. I'm going to jump into the footer page now so I can
close my header I'm done with it Dreamweaver doesn't like us having too many things
open so let's close that and let's start into our footer section here
Our footer section is going to be quite simple to start with, but we are going to be
adding some CSS elements to stylize it a little bit differently as we go through.
So even though we're on our footer page, we want to tag it as our footer section.
And let's just end that footer section there to say that that's what we've got in
place.
The class for it is simply going to be our footer.
We're going to have it as an auto for our margin.
and we're going to put in just a few other little background elements just to
stylize it into the right place as it was within Parkwood Vale's demo.
As with previously, I'm going to use a container.
So I'm going to have a class of container and end that
class. And inside that class I'm gonna have a text span of
a muted text meaning I
want it to be a little bit dull looking now I'm just gonna put in my copyright
details there for Parkwood Vale just again made up copyright details and put those
in place and save that if I put and then refresh my page
I'll get my bar going across the up there in the wrong place but we'll deal with
that in a second but if i was to go like this that still doesn't do anything and
it's bugging me so let's get that fixed
what we want to do instead then is underneath this section we are going to have a
script
because our scripting should be one of the last things we have in place so i'm going
to have a script tag.
I can never spell the word script properly.
The source for my script tag is simply going to
browse into my Parkwood Vale and I got this bootstrap bundle JS file.
Now that was taken directly from my download of my
distribution JS bootstrap bundle.
Copied that into that folder, refresh the element local files
there it is and I've linked that there now we don't want this to take a priority
and take up time when it's loading this for us so we're gonna put in place a
simple command called a defer tag which means that it will load it but not take
priority with it I want to save it and And over here then, I'm going to
go to footer and put it. Make sure that I've put that file up as well.
So everything should be in place.
And when I refresh this now, I go like this.
I should have had a jump out bar.
Why is that not working? View page source.
Muted text footer. It hasn't included my script tag there.
I can see that's not loaded.
So, footer, boot shop there.
Perhaps let's just remove that defer for a second.
And upload that.
And there it is. It now jumps out.
Perhaps it was the defer tag. Let's check it back in and see if it works.
The defer tag.
And put that.
Refresh our page.
it should have yeah the deferred tag shouldn't have affected it in that way it
obviously just hadn't updated correctly so now we have in place our banner
our navbar and our footer if i reload Parkwood Vale our banner
with our logo there slightly different sizing our navbar
same as our navbar and at the very bottom our footer is the same as our footer.
That's our template sections completed with the exception of the fact that we don't
have our background picture in place.
So let's see if we can do something about that.
I have a style CSS document here just right click new file and put in our style CSS
and if I open up my style CSS here it is an empty CSS document.
And what I want to do is have a look at what we're going to include to make sure it
includes everything we want it to.
Start off with, we need to stylize the HTML tags we're going to be using.
I'm going to say HTML to tag all of our body.
And I'm going to say that with our HTML tag, I'm going to be focusing on its
position. And its position for everything is going to be relative.
So anything that has any changes or anything like that, it's all linked back.
I say it's min height is going to be 100% because I want it to be the full of my
screen. I say padding. And this time the padding at the bottom of my screen is going
to be 60 pixels.
I save that.
I'm going to go down a little bit further.
I'm going to put in my body tag.
And I'm going to directly impact my body because I want to focus on my background.
And this time if I scroll through these, I want my background image.
then I'm going to put in a URL tag I'm going to browse to it and the picture I want
is in my Parkwood Vale images folder and we're going to start off with our webp
background image.
Now again we can't guarantee that they all work so we have a fallover too and I'm
going to browse to the png version of that same file
and I'm going to end that with a terminating tag.
I'm also going to say that my body has a margin on its bottom section as well which
is a margin 60 and
i'm going to leave it as it is at the moment i do want to stylize my footer
my footer tagged by using the footer tag there its position is going to be
absolute
which means that it doesn't move it isn't relative it is locked in place
the bottom element means that any position from the bottom of my screen is zero
its width not windows width is going to be 100 percent
and let's not forget to make that its height is just going
to match that 60 pixel element that I've specified for the different sections
now with that in place then they're all saved there is
going to have to put that up to there make sure that in my index
so there is my not my index sorry my header my header has
that link to my star css should be in place let's close that let's close that close
that and close that so everything's closed down and if I go into here and refresh
we have a background picture and our footer
is in the right place that's because if I go back into my CSS a second
of this section here given its absolute position at the bottom of my screen 100%
width and 60% height and these padding elements and margin elements make sure that
we don't overlap that in any way
And that there is the template element for all of my pages.
If I jump back onto here a second, if I go to browse books, facilities,
acknowledgements, all the pages, accounts page, have the same background, same
layout, same structure.
And now on here, they do as well.
The main difference being, if I try to go to them, they don't find them because we
haven't created them as of yet.
The only one that will work is the feedback form.
We have a background picture and we have this section here.
That will put in place all of the basic elements we need for all of our different
pages. My index page then, if I was to reopen up my index page here, has my
header included, my footer included,
and I can start to put in place what I want to.
So in between this, I will have a main section, which will have its class
container,
and that puts in place my main section for the main of my text.
Inside my class container then I can start to put in different elements.
Now I haven't set up my slideshow yet.
I'm going to leave the slideshow for next week's video but I will put in place some
of the text elements so you can see how they look.
So I'm going to put in place a div
here,
a div tag, and that div tag is going to be set up
with a class
equals P,
and it is a padding for.
Now inside that div tag there,
text and my bits and pieces. So I'm going to have some basic p-tags for my different
paragraphs.
So there's my first paragraph and I'm just going to take it directly from Park with
Vale and paste it there. Now if I was to put my index
page up and refresh my index page, it appears,
but we can't really see it. We need to change the color so that we can
read what's going on on our different section here.
Now inside my container to colorize it all what I'm going to do is put in a div
and I'm going to class that div as a
margin bottom four so we've got a bit at the bottom section of it and i'm going to
stylize it putting in place a background color
and the background color is simply going to be an off white color ef ef ef
giving it that grayish sort of look and if i close that tag
i want to end it the other side of this and all of
this should be indented correctly.
Now when I refresh it, if I remember to put it,
it comes up in the right color.
So I can now see it. And as you can see, that nav bar is not, that photo bar is not
jumping up to grab it all the time.
It stays in place.
If I go here, we have this section here in place.
I'm going to go through. I'm going to add in the next paragraph so paragraph tag
again and simply put in place the next set from
parkwoodvale
and then i'm going to put in p because
there's four p tags to start off
And in a second, I'm going to show you how I've stylized some of those differently.
So there's all my P tags. If I put that file up, I can refresh it.
And there are my different sentences.
On here, it looks different because we don't have that slider banner.
But there's our text. The text is a different font.
I'll come on to fonts at a later stage.
I have that in place there then.
And all I'm going to do for my different P tags, let's keep them all in line, shall
we?
How did I do that I missed
But there and let's check that there so they're all in And at the starting point
of each of my p tags I'm gonna give them a class and that class is a
class of lead text and margin three
And if I put that up and
and refresh this, we get it a little bit nicer on its layout.
So we're starting to put together and structure our pages.
Once I've done all of that and I'm happy with all of that section, this is where I'm
going to start going into using those rows, those divs and things I was talking
about within Bootstrap.
So again, I'm going to go div class equals
row.
And inside that class of row, I'm going to go div class
call MD6.
Now on this section, you have
photo half a table.
six by six. So they each take up an equal proportion of my section.
On the one side, then I have my opening times, which is my table.
On the other side, I had my picture.
So I'm going to put in place a picture tag like we did in our
logo section. I'm going to put in its source
is a source set
equal to and I am gonna just simply
use the same set up as I did previously
like and put that in place I'm also going
to include the link to my image,
capital I,
and that's where my image property comes into place.
So if I save that and put that up and refresh this,
it's not finding that picture.
So have I not included that picture correctly?
What have I done wrong there then?
I said images, WebP, outside WebP.
Let's have images, WebP. Do I have, I have outside WebP.
Why is it not happy with that one?
I got images. That's why, I know why.
That says image, they say images.
Let's remove the pluralization,
save it,
reput it.
Make sure I'm putting the right thing.
And refresh this, and my picture appears.
slightly not indented there and it's missing the title for opening times.
My picture is there.
So I'm starting to put this in place before my row.
I'm simply going to put in my H2, which is my title and it's going to be class.
Let's see. We've got display.
I want it display 4.
and I want it in italic so fst italic and I want a margin
on the bottom of it which is a margin four and it's just going to say
open in times and save that now it's in this row it's in its
columns it's in that section there I didn't, as I did with Parkvale, put all of
this itself. So let's div that and say class
equals padding for, which is why I had that difference in size just now.
And all of this is going to be indented before
putting this section there. Now, put that file,
refresh it, and there we go.
Looking almost identical.
On the other side then, in this section here, we're going to start putting in our
table. Our table is just made up in a standard HTML format.
So I'm going to say table, and I'm going to close that off.
And then my table tag, I'm going to go into place and set my class for it.
So its class is going to be a type of table, surprisingly, and is the
table striped.
Now, again, if I come back into here and I go to Bootstrap,
in the Bootstrap documentation, you'll have a section.
If I search for it, just to show you how the search works, if I go to table borders,
we have our different table layouts and different styles.
tables, large tables, we've got all the different elements all to do with our tables
here and how they could possibly look.
If I go back to the very top of our table, we've got overview and we've got our
colors and this is the one we're using which is table table striped.
On our table striped then we're going to put in place the header section so t head.
Our t head doesn't have its own class.
we're going to have inside of our t head a tr for a table row and inside
of that a th for its own element for its header section
now this is going to have a class to it which is simply
call one
do we have column now just call one and that
is simply going to say in there Day.
And underneath. A second th.
That follows suit. Which is going to say.
Times.
Let me just copy that.
And with that in place then. That's all set up for our head section.
We then go into our table body.
T.
Body.
And we're going to do a separate row.
for each day of the week. So TR for table row.
Inside there, we're going to have a TD for each table element.
And the first one, obviously, you can say Monday.
Depends on how you start your week.
I always start with a Monday, not a Sunday.
I'm going to say TD then for my next section, which is going to be the times.
So I'm going to say 9.30 a.m. until
I say 5 p.m.
now if you copy that one two three four five six
seven depending if you want to have different times of the day that's where you
could specify it but you did put in Tuesday,
Wednesday,
the different
days of the week.
save that put that up and when i refresh this now we have our
days and times just like we have here
there's those elements i have in place about when it's closed i haven't included
that there but that would just be simply updating this here to say closed
so it specifies that difference.
And if I refresh that now, that now says closed.
We have that there. Last part is the location, the address and details.
I'm going to skip slightly over the location.
Now, where we to this table has taken up a lot of my space.
So we got a background there. We got that section there.
And let's bring that down.
Let's add some good practice in place and put in some comments.
so intro and let's say down here we're gonna
end intro
and then if I go down here this would be
table section
and underneath it I'm going to end my table section
just
so that that's all a little bit nicer a little bit neater and easier to manage
like I said I'm gonna jump over the actual
nav element here because this is gonna come in a bit more of an advanced video I'm
gonna jump straight to this address and contact details section so I'm gonna put
this in place here as address and then
end
address
and let's put that in place
so that works very much in the same way as our previous sections we have a div
that is going to be of class and it is
P4 for this section. So it's got its padding in place.
It's going to have a H2 for my secondary heading.
And that is going to have the same element.
So class is still going to be display 4.
I still want to have it in italic.
So FST italic. And I still want it to have its margin
of 4 in place.
And all I'm going to do in that section there then is a address and that's me
set up ready to go into that next section.
I'm going to put in a p tag and inside that p tag I'm going to put that as a class
lead
my3 and paste the address that I made up for Parkwood Vale.
It is a completely fictitious address and it will lead to nowhere.
I'm going to do the same thing.
So we've got that p4 there on that section.
I'm going to do the same in another div.
So I've got all of those there.
what I forgot to do somehow is put in my row.
So I want div class equals
row margin top five.
All of this is going to be indented.
I'm going to take that end div there dot there.
in a second because it's a div class call
md6
and
i'm going to repeat that just copy that and paste it and change it over so instead
of address i got contact details and then just use
again the made-up contact details that are in place.
Let's indent that P and save that.
And now if I put that in place, what I should get is on my local host, my
contact details are there as well, just like they are there.
But again, the only exception, the only difference being the font style.
So I've designed in this video, the homepage of my website,
that if I drag it down and put it side by side with Parkwood Vale, you can see they
look the same, slightly different on narrowing elements.
They both have the pop-up menus.
We haven't included the JavaScript for our image gallery, so I have not included an
image gallery. And we haven't gone over the advanced features for our API here for
Google location, so I haven't included that.
But there is my whole home section for my video.
That is one complete page rundown done.
If I wanted to go into, I'm going to go to facilities as my next page.
What I'd need to do is create a new page on the site here called facilities.
So let's go into my site. Let's minimize some of these folders.
And I'm going to right click, go to new file and call it facilities
.php.
and I'm going to go close this down and in fact actually I'm going to
take my include head there onto my facilities page I want to
include hair I also want to include the foot on my facilities page
include foot and I'm going to save those there and in
my head section just because we
to go through .htaccess i need in my nav bar where it says
facilities to do dot php
now if i put that up and put up my facilities page up there
i should be able to now go from here if i hover over
facilities in the bottom corner it says facilities.php if i click onto it it loads
my facilities php page no longer get that error saying it doesn't exist
Parkwood Vale, it takes me back home.
So I have those links in place.
And as you can see from those links, they look identical.
If I look on the actual Parkwood Vale facilities page, they do look identical.
And then this is just a combination of those div row sixes.
So I could steal code from my index page,
especially where I have my, say, address section here.
I could take the address section, copy it to my
facilities page and paste it there.
Now if I put that page and load it a second you'll see that it doesn't quite fully
work because I haven't included one other thing which is on my
index page my container and my background color so if
i my container my background color in place and then i finish off my div
and my main
elements and save and put those now when i refresh this
it does come into line ever so slightly
slightly gap a slight gap there because of the way that the top of this page is set
out it should come into place it's that p4 section there that i don't have on this
one so where's that that's div class p4 to start with so i want
that in there but we'll be replacing that with our image
gallery when we come to do it.
And then it's just a case of using our call sixes to invert back and forth between
pictures so we can put that in place.
Now this video itself has been about an hour and a half in length.
Hopefully that should be a nice in detailed in-depth guide on how to create your
homepage, how to include the elements you need, link your pictures and put
everything in place. If I very quickly jump back into inspect and
I go back to the lighthouse function,
in fact, where did that disappear to?
It's on this arrow here, lighthouse, and I analyze it again for desktop,
analyze my page. It should give me nice high values.
It may have one or two little issues with some of the accessibility features.
okay so we're still up in the high 90s 100 for some accessibility like i said
background image ratio color h my language doesn't exist little easily fixable
elements largest content there some other bits and pieces nothing
to be concerned about hopefully that code is easily
visible to you hopefully you can follow this through and see how to create that
template and your first
In the next session, we will go through how I created that image gallery so
we can add that element in place before we start looking at interactivity with PHP.
Any issues, by all means drop me an email, try and contact me and I'll do my best to
try and alleviate this. And if you need this broken down further, let me know and I
will do my best to do so there.
Thanks again for watching guys.