Subtitles of the Movie

Beyond the equipment that we might need, we also need to get our computers set up to follow along with the exercises. Now go ahead and locate the Exercise files that accompany this course and extract them to a convenient location. I have already extracted mine to My Documents. In the folder that I extracted we will see that there are three other folders, so I'll go ahead and go into the css2 exerciseFiles and I'll see the three different folders. We have openSparks, openSparks-finished, and Sandbox. The openSparks folder houses the different files that we will need as we work throughout this course to build our simple but fully featured CSS-based web site. The Sandbox provides additional documents that we will be using to try things out that will not be part of our web site in the end. We'll be using that folder when we want to just try something out without possibly harming our design for our main project. The last folder is the openSparks-finished. Now, as the name suggests, this is the finished version of our web site. So let's go ahead and let's take a look at that web site that we will have by the end of this course. Now I already have that pulled up in my browser and as you can see it's a pretty fully-featured web site. Now of course there's a lot of things going on here and this may not be exactly a design that you would want to implement but we do have a lot of the elements that you would be manipulating if you were going to build your own design. Now this web site is a fictitious web site and the design for this is just a clearinghouse for different tutorials for Open Source software. So it's openSparks Kindling for Open Source Creativity. So I'm going to walk through the different elements here and talk a little bit about them. Now we do have image manipulating going on here where I have this image showing up here. Now all of the images that you end up seeing here were created inside of Gimp or Inkscape and exported out as pngs or gifs or jpegs, depending on what type of image they were, so this course does not cover the creation of web graphics and once those graphics do get created you can't pull them into your layouts. In addition to this graphic here in the header I also have a diagonal striped pattern going on throughout the background of our documents. I also have a gradient here, and the web page as a whole is designed to scale down and scale up depending on the size of the browser window. Now overall this is doing a pretty good job of making it usable down to a certain size. Also, here in the top we have some nice little roll-overs for our images and if I hover over any of my links up here at the top I see that we get a little rollover effect. Not only do we get a rollover effect, but we also have a simple drop-down menu here, so this is the little section that we will be covering with CSS and JavaScript. We also have Rounded Corner elements here, and if you notice on the left-hand side here we have a column followed by another column in the middle and then on the right-hand side we have a much smaller column, but still a column. So we have Rounded Corners on both of our columns. We have graphic headers. We have little content sections for each one of our different Tutorials. Now, of course, if you're trying to read the tutorial information here, it's not making any sense to you, that's because it's the standard filler text of nonsense Latin. Down at the bottom I do have a footer. So I'm going to go ahead and go over here to say, the Tutorials, and we see that we have what looks to be a table Layout here, but in fact that's our pure CSS tables. Now once I have gone to a location we'll end up seeing next to the item that we've gone to a little checkmark. That's another rollover effect. So if I go to my Reviews I'll end up seeing checkmarks here and there. Then I also end up seeing down here at the bottom we've got a table, and this is an actual table but this table has been stylized so that we have odd and even background colors. Our table cells are showing stars in terms of ease of use power and overall ranking of these pieces of software, and of course, these are more or less my personal opinion but, you know, feel free to check those out and see if you like those as well. Now if we take a look at the About page we'll see that we have some information in a single-column layout, and down below that we have a form, so this form has been stylized to get information from a user, and we have various html elements set up, a nice little background, and we are controlling the layout of this without having to resort to either a table or a pure CSS table, so pretty cool stuff there as well. And we've got one last thing in our Tutorial section with Gimp here, and that's going to be our actual Tutorial. We will be manipulating this with our CSS for Print documents, so that we're going to control the Layout of our document, and we'll see that whenever we get into that Section. However, I just wanted to spend a little bit of time going over what we would end up doing in our Course so that you have an end-goal in mind as to what we're doing because sometimes the one piece that we're working on might not make a whole lot of sense in the overall scheme of things unless you see what the end product is. So if you want to, you can actually go into the finished file, look at the styles for both print and for the main web design view and just learn and see what all I've done altogether and see where we're moving along throughout the Course. And of course, this is the finished product that we will have at the end of this course, and I know that it's a lot of stuff but don't feel too overwhelmed because we take it one step at a time. Now that concludes this Introductory Section to this course. We've seen what we will cover, what we need for the Course, and what we will build throughout the course. And like I said before, I hope you're ready to go and I want to thank you for taking the time to check out this Training Course by VTC. So, let's get down to business.