Subscribe or Login to watch video

Login or Subscribe to watch video

47 - Creating extra pages


Questions & Comments

Randy Barney - 1 year ago

I have enjoyed your tutorials regarding building a "bootstrap" website. Can you use the "template" and "library" functions in creating a "bootstrap" website? I have over 10 pages to create in my new site and really do not want to have to do each new page by copying or duplicating method as you suggest. The template and library functions that are available for a standard HTML site are great tools. When I went to save my newly created "bootstrap" page as a template the option was not available (i.e. greyed out). Thanks in advance for your help.

Andy - 11 months ago

I'd also like to know about saving pages as templates please. I have quite a few pages to design and this would be really helpful. Thanks.

Andy - 11 months ago

Does seem to let you 'Save as Template' once you're in design view (and not as Live view).

Administrator Tayla Coman - 11 months ago

Hi Andy, I'll pass this question to Daniel.

Administrator Daniel Scott - 11 months ago

Hey Andy,

I've never combined the 2. You can definitely create templates for normal HTML. I'm sure it's the same with Bootstrap. Take a look at this video series here. I go through creating & setting up templates. It's not with Bootstrap but I imagine the principals are the same. Let me know how you go - Dan.

https://www.bringyourownlaptop.com/courses/dreamweaver-templates-javascript-jquery-portfolio/How%20to%20add%20the%20HTML5%20footer%20tag%20to%20a%20website%20using%20Adobe%20Dreamweaver

Andy - 11 months ago

Thanks Dan. I'll check that out and let you know how I get on.

Thanks :)

William - 11 months ago

Hello, I am using Dreamweaver cc 2018 and not sure about finding metadata to fill in as you describe in video 47. Please see attached screen grab. A very useful course thank you.
Regards William.

Administrator Tayla Coman - 11 months ago

Hi William, sorry could you rephrase the question? 'Finding metadata' doesn't really make sense, do you mean you don't know what to put in something like the title or the description? Because those things are totally up to you, there's no right or wrong, but you should try and get as many good keywords in as possible.

William - 11 months ago

Hi There, thanks for they quick reply, no its not what to put in its "where do I put it in. Please see the three screen grabs, the layout seems different, am I using a different version to you?
In "your Grab" you have a large section of text highlighted, and in mine the box at the bottom is different (viewport) I expect its my lack of understanding that's making the problem, and I am finding it difficult to explain the question. Finally should I put my "meta data" in the meta name "viewport" put in between the inverted marks
Thanks Brian Ps I have tried to send 3 screen grabs did you get the 3 please

Administrator Tayla Coman - 11 months ago

Hi William, you can only post one photo at a time, just add each photo in a seperate comment

Administrator Daniel Scott - 11 months ago

Hey William, I think I understand what you mean. You want to where to put them in the code. The answer is - anywhere in between the <head> </head> tags. So there is loads of spaces for it. It's doesn't really matter where. You should have it on it's own line. And not inside the meta view port. This does something different. You can see on this example The are on their own lines. Let me know if this helps. - Dan.

William - 11 months ago

Hi there, thanks again, now I understand. You have just answered a question I asked by email, ref how to post more than one image. Thanks, I'll pop back to that one and add the other image.
Again great support.
William.

Phillip Ferguson - 10 months ago

I have a question. I have made workable links out of images and text under for each member of our team for our website, it links to a bio page for each person but my navbar at the top does not then link back to any other page unless I right clikc and tell it to open in new tab or window. What am I doing wrong?

Administrator Tayla Coman - 10 months ago

Hi Phillip, is the site live? Could you give me the link so I can check this out? If not - can you screenshot the HTML of the anchor tags so I can see how they're built.

Phillip Ferguson - 10 months ago

http://studentweb.kennesaw.edu/~pfergus4/index.html#about

I have gotten some of the links to work on the main but only by removing the piece of code that locks the navbar inplace you can see what i mean by going to various team member pages

Administrator Tayla Coman - 10 months ago

It all seems to be working for me, Phillip. What browser are you using?

Phillip Ferguson - 10 months ago

Yes I know that it is all working now, I was able to get help elsewhere to figure it out and was able to figure out my own workaround on it. However I have a ? does a server have to have any particular support for you to use a .php file to make a form work I haven't been able to get the contact form to work even though I am certain I coded the .php properly.

Administrator Malcolm Knott - 10 months ago

Most web servers would have php installed, to test it's running. Create a new file called test.php and put <?php phpinfo() ?> at the top. Visit the page directly in your browser, www.yourdomain.com/test.php

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hi, my name is Dan. In this video we're going to look at creating extra pages for our website. So far we've created just one page, our index.html, which is essentially our Home page. We've got buttons for our Contact Us page, or other pages. Down here, we've got our Print and App. But they don't go anywhere yet because we haven't created the pages.

So what you need to do when you are creating a website is you spend a lot of time creating the first page or the Main page for your website. Then once you've done that, you've created all your css Classes, and worked out lots of the bugs, once you've done that, then you can go off and duplicate that page and use it for other things. So it's best to design it first with one page, get it signed off by the client, then go off and make adjustments for other pages.

Now we've designed our Home page. Quite often, when I'm designing, I won't design the Home page first. What I might do is-- that's the kind of nice fun part of it, but most of the time, most effort should go into the Product page or the Services pages, the thing that people are going to be at most. So, if I go to bringyourownlaptop.com, one of my sites, the Home page, great, it's fine, but actually most people land on my actual video pages. So I'm going to go into one of these videos. These pages here are the ones that are most viewed. It's my product, these are the things that I sell, these video courses. So this page is where I spend most of my time working out the ui, and the design, and how it all works.

So, when you are designing for a client, maybe the Home page, and then one of these Product pages should be the two pages you work, in terms of concepts. It's because this is the one that people spend the most time on, and are potentially going to arrive on when doing a Google search. Funnily enough, so many people end more on to these pages then they do on the actual Home page.

So let's jump back into Dreamweaver, and let's say we finished the Home page, we want to make our Contact Us page. All you need to do is go up to 'File', make sure everything is saved. Then go to 'File', and go to 'Save As'. And what we're going to do is, we're going to call this one Contact Us. Now, the first page had to be called index.html because that's the page the browser goes and looks for. So if I go to our bringyourownlaptop.com, there is an index.html page, and that's the one that gets pulled up. Nobody has to type in index.html. It's kind of hidden to the user, it's just the basic Home page. You have to have him. All the other pages, you can name them yourself. You got to follow some naming conventions, you can't use spaces. I could join these up, I can have a hyphen or an underscore. They all work, I like hyphens better. But you just can't use spaces. The other thing to note when you are naming pages, it's best not to use any of these., any of the kind of non alphanumeric keys, like pound sign, dollar sign, and percentage in there. You use one of those, you're bound to run into problems. So just use the basics, numbers, letters, hyphens, or underscores.

I'm going to hit 'Save'. All it's done is made a duplicate. So, the exact same page. Now I need to adjust this to look like a Contact Us page. And the first thing you should do every time you make a new page is you're going to have to go and change that Meta data. We looked at it earlier, there was the page title, and the page description. To get to both of those, there's a couple of ways. The page titles, generally pretty easy, they’re on here. So if you have nothing selected, watch this, if I click things, it disappears. Some bits, it doesn't. But if I have nothing selected, I'm going to click up here, click on this. There he is, Page Title down here. So that was for my Home page. This is going to be the BYOL Contact page. 'BYOL - Contact Details'. And now I need to go and change the Meta description. The easiest way to go see the Meta description is to make sure you're on Page Source.

So looking at our HTML, go to Code view. At the top here in Code view, you will find eventually the Meta description. You click on it, you can type it down here or you can type straight into Code, it's up to you. So, this is going to be-- I should have about 180 characters here to fill up the description, but in this case I'm not going to put too much, it's just the Contact Us page. Often, it's not a search friendly one. If this was my training page, say this is the Home page for my Dreamweaver Bootstrap course, I would make sure I used all my 180 characters and explained that this is a tutorial series by Daniel Scott for Bring Your Own Laptop about Dreamweaver Bootstrap Responsive Design. So that you're using lovely good key words that people know what they're getting here. But around that 120-180 characters is all you need.

We're doing a little bit shorter here for the Contact Us page because I can't think of anything else we need to add to the Contact details. So we've done those, we've done the Page title, and we've done the Description. Go into Live view. Hit 'Save'. I'm going to 'File', 'Save All'. Now what can we change? There's bits in this we can change, bits that we can't. We can, but there are ramifications. So the HTML, we can change, with no ramifications to the other pages. So if I go to Code view, anything that's in my Body tag, that I go and change now, I can go and change, and it won't affect my original Home page, which is called Index. They're all separate, so the HTML is separate. What they share though, is everything else here. They share the Bootstrap css, which is not a big problem because we don't edit that.

The Main css though, we do share that. So it just means that, if I go through now, and decide that on the Contact Us page, I'm going to make this Heading smaller, if I make the H1 smaller in Global, that's going to make the Heading smaller on the Home page as well, because they share that css style on the Main css. Same with these bits of javascript, you probably won't be messing about with these. So they're fine, but just know that css is shared between pages. And the Source code, or the HTML is unique for the pages. So I can go through, and do stuff like this now. I can go through and say-- this is the-- were we using caps before, it was. My Contact Details. And the nice thing about that is that it will be separate for this page.

What's not separate is, if I want to go and change the Styling for this. So if I am out in my Large view, if I want to change the Styling, I don't like the Contact details being so large, I got to go to CSS Designer and let's say I want to change this H1. So I'm going to go a little smaller, so it jumps back to its old level. And I go to Main css, I find Global, and I find H1. And I decide to go through and change it because I don't like it on the Contact Us page. 'Show Set', I'm going to change it down to '20. 'Enter'. Nice and small, but the ramifications are because they share this Main css page, you can see back here, this has gone small as well, so just know that if you change the css, it has to go across the whole site. And the HTML is unique for the page. So I'm going to 'undo' that change. Let's go back, go back to what it was. If I need to adjust this on a specific page, I can add a special Class. I can make a new Class, and maybe call it Contact Details, or I could use my smaller one that I might have created before. But I make my own Class here, and apply it to this specific bit of text. And I could adjust it, and it will only appear on this particular page. Let's do that.

So, I've got a H1, and I want it to be smaller on this page. So I'm going to add a Class. But I don't want to affect the overall H1 because that's been used in the other page. I'm going to make a new Class, call it 'text-smaller'. And I'm going to call this one 'text-smaller2'. Actually, it's the other way around, I do it sometimes. I need to do this, I'm going to put it in Global. And I'm going to put it in, it's already appeared there. Because I was messing around with it over here I can just use this one that's been made, or I can bin it, and start again. The way we've been doing at first in this Class. I'm going to call this one 'text-smaller'. I've already got a text-smaller, I'm going to use another one, '2'. And his job is going to be—

I'll make this 'font-size'. Go to 'pixels', and I'm going to make it '30'. Now I need to apply it over here. You, '.text-smaller2'. The cool thing about is that, even though it's using css, it's only applied to my Contact Us page. Let me show you what I mean. So, in Split view, you can see, I've got this one called Heading1. And there's my Contact details, there's text for it, but I've also applied this extra Class, whereas on this first page-- let's have a look at it. Let's go to Split view. 'Save'. Click 'Split view'. And if I highlight that first bit of text, there he is there. He is just the H1. He doesn't have that extra Class that I've applied to this guy. So that's how I've kept them separate. Let's hit 'File', 'Save All', and go back to Live view.

Now what I need to do is I need to hook up the Navigation. The Navigation here, if I go to my Index page at the moment, if I test it in a browser you'll notice that it doesn't connect to anything. Watch this, if I click 'Home', Home doesn't go anywhere, Contact Us doesn't go anywhere. So what I need to do is update the Navigation. So I'm going to jump back into Dreamweaver. I'm at my index.html, I'm going to go to Live view, I'm going to click on this word 'Home'. At the moment it's going to #. I need to click this folder here, and say actually, when that Home button is clicked, is to go to Index. Don't worry if they're all on Index, it's fine. Click on 'Contact Us' page, and I have to say, when you're clicked-- we can get rid of the # now, we don't need him. I'm going to use 'Contact Us'. So remove the place holders and now when it's clicked, it's going to jump to this page here.

When are you are doing names this way, you need to add a Title. It's kind of like the alt text we did for images. It helps people that are visually impaired to know what you are clicking. This one's going to be particularly easy because it has the word Contact Us. Now we're going to add it any way. Especially really useful if you're linking using an image. Say you've decided to use an image as your link, rather than a button, like we did over here. There's my alt text, it's the same with links. So let's go into our Contact Us page. This one here, we go to 'BYOL Home'. Lovely.

The one thing we haven’t talked in earlier videos is that this target down here, well I'll slip it in here, and just do not think of it. By default, we've done something called Self. By leaving a blank, we've picked Self, because that's the default. If you want the link to open up in another window, say this is, down the bottom here, I want this link-- he was going out. Let's say I don't have a link for Terms & Conditions. I want it to go to a separate page. So I'm going to add a Hyperlink. And this is going to go to http:// That's why I wanted to go to Google. What I wanted to do is, I wanted is this, google.com, is I've got a title, so it's going to go out to Google, but I want it to go up to 'blank'. So if I leave it as 'self'. What's going to happen is, when I click the link-- Let's put it at 'self' first, to test it. I've got this one, I'm going to load him up in the browser. Down the bottom here if I click on this, what's going to happen is, this page is going to disappear. And we're going to move out to Google.

Why isn't that working? It's because we're using this weird testing server here. It's not allowing me to link out something else. So let's try it this way. Go to 'Preview in Chrome'. Hit 'Save'. So this is the other way of testing a browser. Watch this, if I click on this guy, it jumps out. So we didn't leave that page, can you see? It's still the same tab, but we've jumped out to Chrome. Whereas, if you use the other way of blinking, so if I click on him, and if I use 'blank' and I hit 'Save', and I preview in Chrome, when I click this, watch, this is our tab that we're up to up here, in the top right, and if I click on this, a second tab opens, a blank tab. So there was my original, he's still there. So that's really good for external links if you want to jump out into separate little tabs here.

That was a long winded explanation, sorry about that, but we're getting there with our two links here. Now, if I preview this in a browser, which I've got open here, watch this, if I click on Home, it's awesome. It's going to stay where it is. But if I go out to Contact Us, it's going to jump to our Contact Us page. Now if I want to go back Home, it's not working. Why is it not working? It's because I duplicated this page. So there's Index, and we've updated the Home in the Contact Us, but I haven't, in a separate page, gone through and updated Home and-- let me re-size this one.

So this one here has still got our old links so we need to update it both. It's a bit of a chicken and egg moment where you don't have the pages yet when you're designing this page, so when you duplicate them to make the other pages, you have to then go back to every page and update the Navigation. So 'Home', what I'm going to say is-- I can use my drop-down here, if this is just recently used links, or I can click on this folder here, and go to 'Index'. Remember the title? Home page. And I'm going to leave it at Self. It's only the Contact Us, we need to update this one as well.

What we could do is, go into 'Code', under 'Index', and we can find our Navigation, so I'm going to the top there. And I'm going to grab this whole navigation. And I'm just going to copy that, so I'm going to grab say - let's click inside here - I'm going to grab Container, I'm going to grab this top Level1, with everything. Copy it, I can jump to this page. Go to Code view, click inside here, click the Top Level. Tag, and paste in here. And let's bring everything I did in that Home page along to this Contact Us page. So now, if I go to 'File', 'Save All', and I go up to browser, and I go to Home, Contact Us, back to Home, back to Contact Us. So my Navigation is working.

Every time we make a new page you're going to have to move that Navigation. Anything that links to it, you're going to have to update all the links. So go through and do lots of testing when you are building it to make sure you have remembered to update all of your links.

That will be it for this video. In the next video we'll go off and fix our Contact Us page. We'll do a production video on that.

ALL ACCESS: $19.95 per Month + Cancel anytime