okay so let's go ahead and talk about how to actually make
the pages for your site now you need to make sure that your
designed
HTML page is totally done
it looks good in the browser and everything is correct
so what I'm gonna do here is I will click on each on my CSS rules
and I have the show set properties so you can see
what properties have been set for each rule and so you'll need to pause this video at
each step
just in case you have any questions so the body rule
H1 rule for all the H1's on the page
H2, H3 and those are all just personal preferences
and then I styled all the text to look the same
the table header, the regular links
what they look like when you hover over what they look like
after they've been visited a class called image border
a class called image align-right then we have the wrapper
the logo, the contact info
paragraph with in the contact info
slideshow navigation
the unordered list in the navigation
the list items in that unordered list, the links
in those list items and then the hover
in that list item in the link within the list item
the sidebar the heading 4 for the sidebar
scroll down here, the section
and the footer now to see my
code I'll move over here so again I'm gonna go
down the screen and you can pause it as needed
see you can see how everything's been coding
so one thing in make sure
is that your slideshow all the content or the code for the slideshow
that was created by Wow slider you will need to move it back into this
Div ID
scroll down
so before I think my last
time you could have seen line 41
so here's 42 and down and then pause it again here for the navigation the start of the
aside
and then we have the section which is our main content
then we have
all of our content in here including a Table
and YouTube video and then we ever further with coppery
in the end of the Div and then don't forget you can write notes yourself if I click
at the end of the Div for the wrapper
I can click on no in choose apply each HTML comment
say end of wrapper Div so these don't show
anywhere they're just notes for you in here see you can put whatever notes you want in there
so let's look at the design one more time
and preview it in the browser, okay so we've got
everything is sitting correctly everything has good spacing
the slideshows working well
if I click that button that button it goes to index.html
all the rollovers work we have good spacing between
the sidebar in the content we have good roll over functions
for our links which can see can I have already been to those pages
and then again this isn't showing because the site isn't live
and then we have the regular
copyright which includes a link to the multimedia program
and shutterstock.com, so we are ready to make our
actual site here's how we're gonna do it first of all we have this design
HTML page this page once we make it into a template we won't need this page in
anymore
but it's good back it's good to go back and have that just in case something goes
wrong with your template
so notice and I have a content.html it has all of our content for the site
and then Data1, and Design.html
baka 01 engine one those all have to do with the wow slider
then I have my images folder the CSS there's my WoW slider the original
actual build file so I can fix it and get in there if I need to
and then we have structured design notes that I don't need anymore but I'm gonna
keep it in there anyway
alright so here you go, File
oops, click on this page first
file save as template and its gonna say what site we want to put it in the
Trekker's travel site
so remember here's a list some all my sites
and then amnesty this template
should be used on all
main pages for instance
or I can just keep it short and simple layout for all
pages, so I'm in a call this main
template again if my site has more than one template
then I wanna be descriptive with that but I only have one template for this
so I'll hit save
so it'll ask if you want to update links, make sure you say yes
if you don't say yes then you're gonna have a problem
because then it's not gonna write to all these links again
so I'll click Yes if you accidentally clicked No, you're gonna
have to delete this
templates folder go back to design. HTML
and create a new template again, so now you see a templates
folder, it does have a capital T don't change that don't rename that folder
in your template is inside of that templates folder
don't move that don't rename it don't do any of that stuff
so in our templates we need to make sure
that we can have editable areas on all our
pages, the contact info, slideshow
navigation sidebar and footer
are going to be the same on every single page so I'm gonna leave those as is
but on every single page I'm gonna change the logo
and I'm gonna change all the content in this main content area
so when I click on the logo its gonna select the image
I don't wanna make the image editable I want to make its container and double
so in this little breadcrumb trail I'm going to click this Div
and that's going to select the entire container and making editable
so now we'll go up to insert, template
editable region, and I'm going to call this logo
and if it messes it up a little bit don't worry about it it has a name logo
that we just typed
and its kinda highlighting that area if it
shoves things are the way it should still be okay
so I'm going to come down here to the main content again I'm not going to highlight
the content
I'm gonna go back here and click the container tag which is
section and go up to insert
template editable region
so I'll do main content
and that makes I'll that all editable
save and when you're working on the template
it's the only thing that you want to have open if you wanna start creating new
pages make sure you have the template closer
basically when you're working on a template it should be the only thing
open
when you're done close it before you open in your view other pages
so now we need to create a bunch of pages based off this template
so we're gonna go to File new
and now we go to site templates and go to the Trekker's travel site
we should see a template for that site and hear it is
so will click create and
I do a couple things when I first create a new page, so this is gonna be my
Trekker's
travel home so I always change the title first
and it doesn't matter order but it helps me to see what I'm changing
so if I come to this heading I can do welcome to Trekker's
travel and I usually don't keep on this fake
content that was just for the clients to see
as we're building the actual site now that it's fully built they want to see
the actual content
so what I'll do is I will delete all of that and I'll say
and the homepage content here
so that gives me an idea that this is the home page
and the titles changed so I need to go to File, save as
and in my root folder I'll type index.html remember that's the one page
that needs to have index HTML
okay so let's do it again File New
and from the template create new page so this ones gonna be services on the
Trekker's
and then do a little dot or a little slasher
dasher whenever and I'm gonna call this service
okay so again I changed that first title
come in change the heading
and then get rid of all this generic content, my mouse is kinda being weird right
right now so
bear with me
oops, so we'll get rid of all that stuff
and say add services content
here dot dot dot alright so do file save as
and call this services.html
so you just repeat the same for the testimonials
about as and contact page now it's important that whatever you save so this
one says
services.html I wouldn't want it to be
our-services.html because that's not the page they created in the
navigation
now you can updated leader but this is a good idea to make the page names the
same first time around so your not trying to have to do but to troubleshooting
so when I go to preview this in Firefox
now if I click, I'm on services right click on
that it's gon take me back home i click services
it's gonna take me back services if I click testimonials though see how it doesn't work?
and that's because I haven't created a testimonials page
or it could be that my testimonials page that I saved
I'm is not the same name is whatever main avocation
so let's talk about how you can update
that template update all your pages
in the next video