Join Bill Weinman for an in-depth discussion in this video Creating a layout template: sidebar area, part of XHTML and HTML Essential Training.
Continuing with the building of our example website, we are going to fill in the…default content and styles for the right- hand side of the content portion of the…page in this lesson.…So we have the beginning HTML and CSS files, from the Layout-right folder in…the Exercise Files.…So we'll go ahead and do the Save As and save these as template.html and…beginning.css we'll save that as main.css.…
So you are all set up there and we are going to go ahead and set up the…contentRight portion of the page.…This is actually pretty straightforward here and I put in a div id="sideBar".…Like that and go ahead and put in a comment here.…And then inside of the div we are going to put, just like we did in the other…program, I'm going to put in h3 because we use h3's in the sidebar,…Sidebar Here, and sidebar content will go here.…
Go ahead and save that.…As we load this up in the browser, drag our template file into the browser there, …we see our sidebar content on the right-hand side of the page and that's…because it's in this table cell here.…
- Understanding the structure of an HTML or XHTML document
- Creating and using templates
- Controlling white space and line breaks
- Making effective use of tables and frames
- Flowing text around an image
- Formatting tables with CSS
- Creating web pages that work properly across platforms and devices
- Reviewing a case study of a complete web site
Skill Level Beginner
Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?<br />
A: This course will be updated to include CSS-based layout techniques within<br /> the next few months. In the meantime, please see Bill's <a href="<br /> http://www.lynda.com/home/DisplayCourse.aspx?lpk2=52341">CSS for<br /> Developers</a> title for more information on coding with CSS.<br />
Q: In the "Understanding the structure of an XHTML document" movie in Chapter 1, where does the "Roses are red," etc, text come from? I don't see it in the code.
<div>A: Notice the <frame src="??"> tags. These reference other .html files that contain the content of the various frames. Details about how frames work can be found in Chapter 6 of the course.</div>
Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?
A: This course will be updated to include CSS-based layout techniques later in 2012. In the meantime, please see Bill's <a href="http://www.lynda.com/home/DisplayCourse.aspx?lpk2=52341">CSS for Developers</a> title for more information on coding with CSS.
1. Introducing XHTML and HTML
2. Text Tags
3. Image Tags
Using inline images3m 17s
4. Link Tags
9. Creating a Simple Web Page from Scratch
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.