See how you can easily add a portfolio or carousel to your site using a Bootstrap component.
- [Instructor] Creating a portfolio would typically be very difficult but Dreamweaver makes it easy because there's one actually built in. So the first thing I need to do is to create a portfolio page. Taking this index html we're going to save it as portfolio in the same folder for my local site here. And then notice I need to toggle the Portfolio button on and turn off Home. So right down here, and I could always click on it. Right in here active, that is the class that turns it on.
So I'm going to cut that out and right down here for portfolio I'm going to paste it in. Right, so we can see it highlights it and then I actually need to change this href to index.html to make you can go back to the home button. Now for the content, I really, honestly need to clear a lot of this out and I can do that easily just by selecting it, delete. Again, aside left making sure I'm clicking on that section, clicking on that, expanding this out, I've removed it all, so really I just have the nav and the footer and then all of this space.
And now what I want to do, I want to insert my portfolio. So if you go over to the Insert panel, Bootstrap Components. Right in here, oh look, Carousel. That is the portfolio bootstrap component. Clicking once and it adds right in here. See it all here, there's actually some absolute paths, anytime you see something that says file that's not good, 'cause it's only going to work on my desktop. So what you want to do is just Save All. Usually get in the habit of doing that.
It says hey you know what? We're going to put that file in your images folder for your local site, I'll click okay and you can see that disappears, it actually puts this carousel placeholder image right in there. So far, so good. Now I want to dive into some of this content. But before I do that, I actually want to preview it. We'll take a look at it in my browser. Again there's that placeholder Carousel. This is, looks like a Header and then we have a Caption and then we can actually click through the three different images and we can even click on these little buttons as well.
This is pretty fantastic, I mean I love this. So all I really need to do is swap out these images and this text as well. So I'm going to close that. Now where are these images? Well if you have access to the exercise files, in the Assets folder you'll notice quite a few images right in here. We have these different Carousel images. One through five. I'm just going to take all of those, copy those and then going into my images folder and pasting them right in here.
So I want to make sure all of my assets are in the images folder. Make sure they are there. You can use your own. These might me roughly the same size, they can be different sizes, they're still going to work. I'm just going to remember this Carousel_1 jpeg name, but I'll tell you what, Dreamweaver does something really cool in that case. So I'm going to come in here, in fact I'm just going to select this file name, hit delete, in fact I'm going to delete that forward slash, now when I add that forward slash, it actually gives me code hinting for all of the images.
So I can find the Carousel_1 jpeg, adding that just like that. So it's really easy and honestly that's typically what the problem is, is your naming things wrong. It's just these little things that get in the way. In terms of breaking your site or not being able to set it up correctly. Just like that we can see again Carousel_1, there's the image. And from there I can start modifying some of this content. So this happens to be the box boy, and I can have the H3 tag or I could just eliminate it all together, because really all I want is a caption and really it's just going to be the title of the art.
So you can see that there. Just like that, sewing machine. Eliminating again H3, I can change that to a H2 or an H1, whatever I want to do. Last one in here. Success wall, taking that, pasting that right in here. So it's just changing content. Now, keep in mind that these are a different size.
So we're going to see what this looks like. In fact we can kind of take a peak right in here. Sure enough there is what I'm calling box boy and I have this gap right here. So we take a look at it, just kind of see what's going on. I want that to go clear up to the edge. So scrolling up, I can see there's padding from the top for the body style. I'm going to take that down to 50, just like that and what I'm going to do is I'm going to save everything, preview in the browser.
And you can see how big this is, but it fills the area. Because this is responsive, so even as I scale it down you can see obviously it changes. And it's actually automatically advancing. But lets take a look at some of those controls. Because I even still have that background image back there. So how do we add more images and how do we say for instance, remove that background. That's probably what I want to do in this case. And that's what I'm going to do right now. For removing that background I'm going to go to the CSS Designer panel, right up here at the top I want to add a new CSS Source, define it in the page.
Because I'm going to make this page specific. Defining it in the page, adding a Selector and in this case it's just going to be called body. So typing in body, hitting enter twice and then what's happening is there happens to be an image. So background image that's happening. So what I want to do is, I just want to put a pound sign right in there. So it's actually not going to show me anything but I can always replace that. But this is what's written. In fact I can save everything and just take a look in the browser.
Even as I scale it down, you can see there's no longer that image back there. And I can even just change that from a gray to something else. But all in all, that looks pretty good. Let's look at adding additional items, because as I scroll down I can see here are my data targets. So I have zero, one and two. If I want to add more, it's just a matter of copying that, pasting it and now I can have data three for instance. And I do want to just keep that as Carousel_1 and then right down here I want to make sure I'm selecting this div.
It's cool that as I select this div class, it gives me the start and the end, but essentially what I want to do is take this, copy it and then paste it below just like that. I can always indent that or bring that back, just like that. And then it's just a matter of changing this to four. There's that image. Change the alt tag. The alt tag is what actually gets displayed when you sort of roll over that image.
And then pasting that right there. Now there were five images that I pasted in, so I'm going to do this one more time. You could paste in as many as you want. Jumping in there, changing those numbers, making sure that data set looks good. And again that's just going to give me the ability to hit any one of those buttons below the image and toggle to that image. So here's five, collage and there.
And typically as you're working in this sort of scenario where you have all these various div's and everything's kind of like nested in, you may or may not have that right. Who knows. What you can do is you can come right over here and you can format the source code. So I'm going to Apply Source Formatting and that's going to indent everything where it needs to go and kind of clean it up and make it look nice and neat. So with that done, I think it looks fantastic. I can save everything. Previewing it in Chrome, as you can see there we have all of my different little buttons, I can click through those and you can see those again just jump to the appropriate one.
And so obviously you can see how easy it is to integrate a Carousel or a portfolio for your website.
- Understanding the Internet and websites
- Adding HTML content to a webpage
- Styling content with CSS
- Creating navigation
- Adding more pages to a website
- Creating a flexible layout
- Linking to other pages and websites
- Creating a contact form
- Creating a responsive site for mobile devices
- Uploading and testing the website