Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
If you're a Premium number of the lynda.com Online Training Library or if you're watching this tutorial on a disc, you have access to exercise files used throughout this title. The exercise files for this title are arranged by chapter and are located in folders that are named based on the movie number they represent. Now since each exercise is self-contained, you will want to work with those folders individually; however, I recommend copying the entire exercise files folder to the desktop and then working on the files from the appropriate location.
I will call out the location of the exercise files for each movie and you should see a brief overlay that will also tell you where to find those files. Now this course focuses on common page- layout techniques with CSS, and not on any one authoring tool. As such, it doesn't matter which authoring tool you use. If you're comfortable with an existing HTML editor, simply continue using that one for this course. I'll be using Aptana Studio for the course for a couple of reasons. First, it's free. It's cross-platform, it's very lightweight, and it allows me to focus solely on the code itself.
I am going to give you a brief tour of how I am going to set up Aptana in case you want to use it and have your workspace look a little like mine, but in the end it really doesn't matter which tool you use. So here I am, in Aptana, and I'm just going to run through a very brief setup. The first thing I am going to do is create a new project so that I can have quick access to my exercise files. So I am just going to go up to File and choose New, and I am just going to do a new web project. I will just go ahead and call it CSS Page Layout. And instead of using the default location for root folder, I will just browse out to my desktop and find those exercise files right there.
I will open that up and I will finish it. Now I have access to all of my exercise files right from this panel and I can just click and open them up. Now the next thing I want to do is make life a little bit easier for you guys that are trying to read my code. The default code in Aptana is pretty small, and I will just make it a little bit larger, maybe change font up a little bit to make it easier for you to read. So I am going to go up to Aptana Studio and go to Preferences, and I am going to click on the Aptana Studio category and then click on Themes.
The first thing that I want to do is just make the text a little bit easier for you guys to read, so I am going to go down to Font and just choose Select. I will go up and choose, I will do Arial, and I will take it up to about 24 points. Now again, you guys don't have to do this with me. The only reason I'm doing this is to make life a little bit easier on you guys and make it easier for you to read my text. I will go ahead and apply that, and I can see right away that that's happening. Now in terms of the themes, I am just going to use the default Aptana Studio theme, but feel free to use any of these. Notice they even have one that mimics Dreamweaver. So if there's a coding environment you're more comfortable in and you're not actually using that program, feel free to choose that particular theme.
The one last thing I want to check is I am going to go up to Editors here and I am going to make sure that Enable word wrap is selected and then just click OK. From time to time I might resize some of my dialog boxes, but for the most part that is all I'm going to do with Aptana Studio. I am just going to keep the settings as basic as possible. Now it's also crucial that you're going to be using the most recent versions of Chrome, Firefox, Safari, Opera, and Internet Explorer if you're on a PC. So go ahead and download and install those, and of course throughout the course we are going to make it a habit of testing our pages with multiple browsers. All right! So now that we are all set, let's go ahead and dive in and get started with CSS page layouts.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.