1. CSS OverviewReviewing CSS linking and setup| 00:00 | CSS stands for Cascading Style Sheets.
| | 00:03 | This is the technology that's used
to format and position web pages.
| | 00:07 | In this first part of our course,
we are going to have an overview of CSS so
| | 00:10 | that we are on the same page and we have
a good foundation in the syntax and the
| | 00:15 | features of CSS in general.
| | 00:17 | We'll finish off this first part of
the course with a good overview of the
| | 00:21 | positioning techniques, in particular in CSS.
| | 00:25 | For this part of the course we are
going to have our screen setup like this,
| | 00:29 | with a text editor at the top
and a Web browser at the bottom.
| | 00:32 | And in the text editor at the top we'll
have this style sheet, we'll have some
| | 00:36 | XHTML, and in the Web browser
we'll have that same document.
| | 00:41 | So here we have XHTML, and it links this
style sheet in, using this link statement.
| | 00:48 | And this is how the link statement works.
| | 00:50 | It has the link keyword, it has the
relationship of the linked document, which
| | 00:54 | is a stylesheet, it has the type, which
is text/css, and it has href, which is the
| | 01:00 | location of the document, external.css.
| | 01:03 | Here we have external.css and
this has the actual CSS style sheet.
| | 01:08 | So if we change something in this
style sheet, like for instance here the
| | 01:11 | background-color, if we want to
make that white, put in the code for white,
| | 01:16 | which is fff.
| | 01:17 | Let's save it and reload in the browser, now
we have that white background in the browser.
| | 01:23 | So this is the setup we'll be using
during the overview of CSS in the first
| | 01:27 | part of this course.
| | 01:29 | Let's go ahead and get started.
| | Collapse this transcript |
| Understanding levels of inheritance| 00:00 | The word Cascading in the name
Cascading Style Sheets refers to inheritance.
| | 00:05 | This is how one element inherits its
properties naturally and organically from
| | 00:10 | the elements that surround it.
| | 00:12 | In other words, here in this
Cascading Style Sheet, we see that we have the
| | 00:15 | background color is this yellow color,
the text color is this brown color, and
| | 00:22 | so all the text in the document is brown,
and all the background in the document
| | 00:27 | is yellow, because the heading, choose
these elements here, and the paragraphs,
| | 00:33 | these elements here, they inherit their
properties from the body and then they
| | 00:39 | override whatever it is
that's specified in their styles.
| | 00:43 | And so the body has this Helvetica font.
| | 00:46 | But both the heading and the paragraphs,
they overrides this with their own fonts.
| | 00:51 | For example, if I wanted to change the
background color for just the headings,
| | 00:58 | I would insert a background color
property here and that will now override the
| | 01:06 | background color from the body.
| | 01:08 | Without that, it was inheriting
the background color from the body.
| | 01:11 | So if I save this and reload it in the
browser, we'll see that the headings now
| | 01:15 | get their own background color, which
is distinct from the body, because that's
| | 01:20 | being overridden now, just
like the font is being overridden.
| | 01:23 | Without this, it inherits that
property from the background.
| | 01:27 | Go ahead and save and reload,
and now it's yellow again.
| | 01:30 | You can do this on a smaller level of
granularity by changing just a word in a paragraph.
| | 01:36 | All of the words in this paragraph
are inheriting their properties from the
| | 01:39 | surrounding paragraph, but I can change the
properties of one word using the <span> tag.
| | 01:51 | <span> and close that there.
| | 01:53 | The <span> tag is an inline level element
that's used to apply style to something
| | 01:59 | in an inline context.
| | 02:01 | We'll talking more about span and
div later, and how they're used.
| | 02:05 | But here I can insert a style,
and I can say font-weight: bold,
| | 02:08 | and so this will override the natural
normal font-weight of the rest of the paragraph.
| | 02:14 | Then it'll keep all of the other properties.
| | 02:17 | It will keep the font family.
| | 02:19 | It will keep the color from the body.
| | 02:21 | It will keep the background color from the body.
| | 02:23 | It will keep the font-family from the paragraph.
| | 02:25 | Go ahead and save that and reload in the
browser and you see that that word is bold.
| | 02:29 | Everything else is just as it
is in the rest of the paragraph.
| | 02:33 | So this is in a nutshell how inheritance works.
| | 02:36 | Elements inherit their properties from the
other elements that they're enclosed within.
| | 02:41 | So the body is wrapped
around the entire document.
| | 02:43 | Everything inherits from the body.
| | 02:45 | The words in a paragraph inherit from
the paragraph and you can use other
| | 02:48 | elements like span and div to create
your own context for properties to inherit.
| | 02:54 | We'll see more about that in a later lesson.
| | 02:56 | So this is in a nutshell
how inheritance works in CSS.
| | Collapse this transcript |
| Understanding levels of style sheets| 00:00 | There are three major levels of Style
Sheets in CSS and one is applied first,
| | 00:06 | and then another, and then another.
| | 00:07 | So the external style sheet is applied first.
| | 00:11 | And so here we have a document with an
external style sheet that's specified
| | 00:15 | here in this link element.
| | 00:19 | And if we wanted to, we could have
another Style Sheet in the document inside
| | 00:23 | the head element using the <style> tag.
| | 00:29 | And we could put a style in here for
example, if we wanted another style for
| | 00:33 | paragraphs, say we want our
paragraphs to be a bluish color.
| | 00:38 | We could put that in here.
| | 00:39 | Say color and that will make our
paragraphs a little bit bluish.
| | 00:47 | But that's applied on top of the styles
that are already in the external style sheet.
| | 00:51 | You have the font, you have the line-
height, those are already in the style sheet,
| | 00:55 | and then this color
blue is applied on top of that.
| | 01:00 | So first the external style sheets are
applied and then any style sheets that
| | 01:06 | are inside the head element.
| | 01:08 | And finally, if we wanted to apply
style down here, we could apply style to a
| | 01:14 | particular element using the style attribute.
| | 01:17 | This is not to be confused with the <style> tag.
| | 01:19 | The <style> tag goes in the head element.
| | 01:22 | The style attribute can be an
attribute to any element in XHTML.
| | 01:27 | And so maybe I'll use a different color
just for this paragraph here, make it a
| | 01:33 | little bit green, I'll save that and reload.
| | 01:38 | Now this paragraph down here is
green and this one is still blue.
| | 01:42 | And so the styles are applied in order.
| | 01:44 | First the external style sheet and
then the <style> tag inside the head
| | 01:51 | element and then any styles that are
applied to particular elements using
| | 01:56 | the style attribute.
| | 01:58 | So these are the levels of style sheets in CSS.
| | Collapse this transcript |
| Apply styles with SPAN and DIV| 00:00 | There are two special elements in XHTML
that are used specifically for applying
| | 00:05 | style to parts of a document.
| | 00:07 | These are span and div.
| | 00:11 | We've seen span already.
| | 00:12 | Let's look at it again here.
| | 00:14 | If I wanted to change the style of just part
of this paragraph, I would use a <span> tag.
| | 00:20 | Span is a container, and so it has a
beginning tag and an end tag, like that.
| | 00:27 | And then you can apply style using
the style attribute like this and
| | 00:33 | say font-weight: bold,
| | 00:36 | and that applies the style
to this portion of the paragraph.
| | 00:43 | And there we have some bold text there.
| | 00:46 | <span> is an inline level tag and what
that means is that it works inline with
| | 00:53 | other inline level elements. For example, text.
| | 00:57 | Span is usually used inside of a
paragraph or some other inline context.
| | 01:03 | Div is a block level element.
| | 01:06 | And so if I want to apply a style to a
block, say for instance both of these
| | 01:12 | elements here this heading and
this paragraph, I would use <div>.
| | 01:21 | Div is block level.
| | 01:22 | It is not inline level.
| | 01:24 | You cannot use a div inside of a paragraph.
| | 01:28 | It will break the paragraph
apart because it's block level.
| | 01:32 | It's not really legal inside of a paragraph.
| | 01:34 | Inside of a paragraph only
inline level content is allowed.
| | 01:37 | Div is block level.
| | 01:39 | It can enclose other block level
elements like headings and paragraphs.
| | 01:43 | And so, if I want to say change the
color of this entire block, I can say
| | 01:48 | <div style= "color:
| | 01:52 | #006"> make it bluish.
| | 01:57 | And save that and reload over here,
and now this block including this heading
| | 02:04 | and this paragraph are both blue, and
that's because of this <div> around them.
| | 02:10 | It's a block level element and you're
able to change the style for a block.
| | 02:15 | So that is, in a nutshell, span and div.
| | 02:17 | <span> is inline level, <div> is block
level, and these are two tags that are
| | 02:22 | specifically designed just for applying style.
| | Collapse this transcript |
| Relating styles to the HTML document with selectors| 00:00 | selectors are used in CSS to apply
a style to elements in the document.
| | 00:06 | For example, this is a selector here,
this is the Body selector, this is h1
| | 00:11 | selector, and these selectors
select tags in the XHTML document.
| | 00:17 | So this Body selector will select the
body element here and everything within
| | 00:24 | that body element, all the way to the
end of tag at the bottom of the document,
| | 00:28 | will be covered by this style and
will have this style applied to it.
| | 00:32 | So, that's why the background color
is yellow and the text color is brown.
| | 00:38 | This h1 tag applies to all the h1
elements and so these h1 elements have that
| | 00:43 | font to them, because that selector is a
tag selector, and it selects all the h1
| | 00:48 | tags in the document.
| | 00:51 | There's another type of selector here,
this is called a class selector, and
| | 00:56 | you see that it has this
period at the beginning of it.
| | 00:58 | And that's what makes it a class selector.
| | 01:01 | This is applied by using the class
attribute on an element in the document.
| | 01:05 | For example, if I use this class here,
I can say class="first", and save that.
| | 01:13 | When I reload the document, we'll see
that that paragraph gets an indent there,
| | 01:17 | because this first style has its text
indent set to 2 ems and we apply this
| | 01:25 | class selector to that element.
| | 01:28 | A class selector can be
applied over-and-over in a document.
| | 01:31 | I could apply it to this h1 element here,
and that h1 element will now also get
| | 01:39 | an indent, and there we see
that h1 element also got indented.
| | 01:46 | If I take this class selector and
make it more specific, I can combine tag
| | 01:50 | selector with the class selector.
| | 01:52 | Let's say p.first and now this will only
apply to p elements that have the first class.
| | 02:01 | So if I reload now, this h1 element
won't get it anymore, but the p element still does.
| | 02:07 | So that's combining a tag
selector with a class selector.
| | 02:12 | So class selectors can be more
specific by applying them to a particular tag.
| | 02:18 | I could make a different class
selector for the h1 element and give it a
| | 02:25 | different attribute entirely.
| | 02:27 | I could say color blue.
| | 02:30 | And if I save that then this one here,
which is h1 with the first class, will
| | 02:39 | become this blue color.
| | 02:41 | So those are class selectors.
| | 02:44 | On the other hand we have
something called ID selectors.
| | 02:48 | ID selectors can only be used once.
| | 02:52 | So now, we have this h1 element
with an ID selector that says amtp and
| | 02:57 | that makes it blue.
| | 02:59 | So if I save this, of course, this won't
be blue anymore because we're not using
| | 03:04 | that selector over here.
We're still using that first class.
| | 03:08 | Instead, if I say id="amtp", now
this heading will get the blue color.
| | 03:18 | More commonly, the ID selectors are used
with div, and they are used for sections.
| | 03:23 | So, I can say here I can say div id="amtp",
and come down to the end of the amtp
| | 03:31 | section and say close div and save that.
| | 03:36 | But my ID selector has this h1 next
to it, so now I need to make this div.
| | 03:42 | Now, this entire section will be blue,
because I've used a div with an ID selector.
| | 03:48 | ID selectors can only be used once.
class selectors can be used over-and-over.
| | 03:53 | Like for instance this highlight here,
I can use this highlight in several
| | 03:57 | places in the document if I want to.
| | 04:00 | I can highlight this word using a span.
| | 04:14 | Now then I can copy this
and use it in several places.
| | 04:19 | Using that copy and paste feature on
my keyboard, Ctrl+C and Ctrl+V on a PC, or
| | 04:25 | Command+C and Command+V on a Mac.
| | 04:28 | Highlight this word here, and I can even
highlight a word maybe down in this paragraph.
| | 04:40 | When I save that and reload it in
the browser, we've applied this style on
| | 04:44 | different places, using the class selector.
| | 04:48 | So that's what class selectors are for.
| | 04:49 | Class selectors are for something
that's going to be used over-and-over.
| | 04:53 | For something that's just going to be
applied once, you want to use an ID selector.
| | 04:58 | ID selectors get used once, class
selectors can be used multiple times, and
| | 05:02 | tag selectors are for selecting
all like tags in a document.
| | Collapse this transcript |
| Understanding units of measure in CSS| 00:00 | There are several different units of
measure available in CSS and we are going
| | 00:03 | to cover the most common of them here.
| | 00:06 | First one I want to talk about is color,
and so here we have a color specified.
| | 00:11 | This # sign means that it's going to be
a hexadecimal color and it's in three parts,
| | 00:16 | Red, Green and Blue, RGB,
and these are hexadecimal numbers.
| | 00:21 | There are two ways to specify
hexadecimal numbers. There is the three-digit way
| | 00:26 | and there is the six-digit way.
| | 00:28 | The six-digit way is probably more common.
| | 00:30 | I tend to like to use the three-digit version.
| | 00:33 | The six-digit version looks exactly
like this and so the three-digit version is
| | 00:39 | just the six-digit version
with the numbers doubled.
| | 00:42 | This is exactly the same color.
| | 00:44 | If I reload the document, you will see
no change, but if I wanted to, I could
| | 00:48 | say 6f3005, and we would get a
slightly different color, not much.
| | 00:59 | And it's hard to see the difference,
and so that's why frankly I tend to use the
| | 01:03 | three-digit version.
| | 01:04 | The six-digit version has more
resolution and it might be more accurate if
| | 01:09 | somebody is designing something
and wants a very specific color.
| | 01:12 | I tend to use the three-digit version.
| | 01:14 | I'll call this 630 and save that.
| | 01:18 | Another way to specify color of course
is to name the colors. There are a number
| | 01:23 | of named color that are built into CSS,
and there are even more that are built
| | 01:27 | into most browsers, and you can pretty
much specify any color you can think of,
| | 01:31 | and the browser would
probably know what it means.
| | 01:34 | But if you want to just keep it to the
major ones, you can say red and save that
| | 01:39 | and you will get a red, or you can
say green, and save that and we'll get a
| | 01:46 | green, and you can say blue of course.
| | 01:52 | And reload and get blue, and black and
white are also universally supported.
| | 02:00 | There is white. It's hard to see.
| | 02:02 | And black, should be a little bit easier.
| | 02:07 | And there we go.
| | 02:12 | So, those are the units of measure for
color. Put this back the way that it was,
| | 02:17 | and save and reload, and there we are.
| | 02:20 | Another type of unit of measure is when we
talk about text, and this is commonly used.
| | 02:26 | If I come over here and specify a font
size, I can specify this in points, I can
| | 02:33 | say 12 points, and we'll get a more or
less 12 point size on my screen here,
| | 02:39 | which looks like pretty
close to what I had already.
| | 02:42 | Actually 12 points is the default on
most browsers, so I'll say 10 points, so
| | 02:46 | we can see a difference, and
reload, so that's ten points.
| | 02:50 | You can also measure it in pixels, and
say 10 pixels, save that and reload it,
| | 02:58 | and so that's 10 pixels which is very
small, or I can measure it in percentage
| | 03:03 | where I can say 110% or 120%.
| | 03:08 | And that will make it 120%
larger than the default.
| | 03:13 | Reload and that's 120% relative to the
default, which is apparently 12 points.
| | 03:20 | Likewise, the line-height is measured in
percent here, relative to the size of the font.
| | 03:25 | I could put that line-height instead in
points and say it's going to be 20 points
| | 03:31 | and get a different line-height.
| | 03:33 | Oh, that's probably about the same.
It moved a little bit, but let's do
| | 03:37 | something so we can see a little better.
| | 03:39 | Say 25 points, and we'll
see there it gets bigger.
| | 03:44 | And so these things can be measured
in points, they can be measured in
| | 03:48 | percentages, or they can be measured in pixels.
| | 03:53 | It's also common to measure line-height
in exs. I can say 3ex and an ex refers to
| | 04:02 | the height of a lower case letter x,
so that's the 3ex height there and
| | 04:08 | I'll make my font size the default
again and save that and reload.
| | 04:13 | So when speaking of text,
it's often common to use exs and ems.
| | 04:17 | em is the width of a capital letter em,
which is about twice the size of an ex,
| | 04:27 | so if I reload here, we
have a much larger line-height.
| | 04:29 | em and exs are often used for text.
| | 04:33 | They are often actually
used for both height and width.
| | 04:37 | Although exs in typography, they are
more commonly used to measure height, and
| | 04:41 | ems are more commonly used
to measure horizontal space.
| | 04:45 | And finally, we can use pixels and put this
back to where it was, which I think was 140%.
| | 04:53 | Save that and reload.
| | 04:57 | And we can talk about pixels a little bit here.
| | 05:00 | Of course, you can specify your font
size in pixels. What I'm going to do here
| | 05:05 | is I'm going to put a border around
the paragraphs, so that we can see the
| | 05:08 | dimensions of the paragraph a
little bit and work with that.
| | 05:16 | This will create a one pixel
thick, solid, black border.
| | 05:20 | It's nice and easy to see, and so we now
have that border around the paragraph,
| | 05:26 | and I'm going to set the width
of the paragraph using pixels.
| | 05:33 | I will go ahead and save that and reload,
and now we have a 300 pixel wide paragraph.
| | 05:39 | And this will allow me to talk a
little bit about some different dimensions
| | 05:42 | that we have. Of course, you have seen
the measurement with pixels and we can
| | 05:46 | see how that works.
| | 05:47 | I want to talk about
margins and padding real quick.
| | 05:51 | The margin happens on the outside of
the box and the padding happens on the
| | 05:55 | inside of the box, so this black line
represents what's called the content box.
| | 05:59 | For a paragraph, it's
really simple to understand.
| | 06:02 | It's the width and height of the paragraph.
| | 06:04 | Now, if I add some padding to this,
and let's say I want to add padding of 15
| | 06:12 | pixels, we'll be able to see that.
| | 06:13 | That will add 15 pixels to the inside
of the box pushing out the box all around.
| | 06:23 | There we go.
| | 06:24 | The margin adds space to the outside
of the box, so if I say margin, well,
| | 06:30 | we have a margin up here already.
| | 06:32 | Let's just use that and I'll just
change this to say 15 pixels all around.
| | 06:38 | Go ahead and save that and reload.
| | 06:41 | Now we have 15 pixels on the
outside of the box as well.
| | 06:44 | So, added space on all
four sides around the box.
| | 06:49 | So, margins are outside of the content box,
and padding is inside of the content box.
| | 06:54 | So, one thing worth noting here, and
I'm going to go ahead and undo, put my
| | 06:58 | margins back to the way it was, save that.
| | 07:02 | Margins and padding are specified in
four directions and so if I say I want
| | 07:08 | 5 pixels on the top and 10 pixels on
the right and 15 pixels on the bottom,
| | 07:15 | and 20 pixels on the left, so they
are always specified clockwise,
| | 07:20 | top, right, bottom and left.
| | 07:23 | Clockwise starting at the top with four numbers.
| | 07:26 | So, I'll save that and reload and
we see that now we have this 5 pixels at the
| | 07:31 | top, 10 pixels on the right, 15 pixels
on the bottom, and 20 pixels on the left.
| | 07:36 | So, there are two shortcuts that are common.
| | 07:38 | One we have already seen, which is to
just say one number, and then that will
| | 07:43 | happen all the way around, and so
now it will be 20 pixels all the way
| | 07:46 | around, all the same.
| | 07:48 | Another is to use two numbers and the
first number represents top and bottom,
| | 07:53 | and the second number represents left and right.
| | 07:55 | So, let me say 40 pixels left and right.
| | 07:57 | We'll save that and reload and now we have
wider on the sides and narrower on the top.
| | 08:03 | So, these are shorthands.
| | 08:05 | You have the one number shorthand, which can
just make the same amount all the way around,
| | 08:10 | and the two number shorthand,
which is the same top and bottom, and
| | 08:13 | then another number for right and left,
and then using four numbers you can
| | 08:17 | specify them all separately.
| | 08:19 | Top, right, bottom and left,
clockwise around the box.
| | 08:24 | So, that's our units of measure and
that's also about margins and padding and
| | 08:29 | this is good to understand. We'll be
using these techniques a lot later on.
| | Collapse this transcript |
|
|
3. Building a Web Site with CSS PositioningExploring the finished web site| 00:00 | So in this chapter, we are
going to build this website.
| | 00:04 | This is a website that was designed by
a guy named James Williamson, who also
| | 00:08 | wrote all of the clever and witty copy.
| | 00:11 | It's a mock up of what would be a
surf shop website and it has a number of
| | 00:16 | features here that we'll be coding
up in CSS and using positioning for.
| | 00:21 | We have this header up here, which has
a Contact button and has this main menu,
| | 00:28 | and then it's got all
these images along the right.
| | 00:33 | It has a main content area on the
left and a sidebar content area on the right
| | 00:38 | and down here at the bottom, it's got
a little bit of copyright text and legalese.
| | 00:45 | And then there is a product page
called Gear and it has a sub-menu for the
| | 00:50 | different types of gear, and it has a
little This month's special, and so this
| | 00:54 | all gets laid out with CSS and a Lifestyle page.
| | 00:58 | It has another type of menu up here,
and it's got some ordered list text down
| | 01:03 | there and a Videos page, we'll get a
little warning from Flash. I'll explain
| | 01:09 | that when we get to it in the website.
| | 01:11 | And this has a video that's linked in
from YouTube, which I think is a great way
| | 01:15 | to post a video on your website.
| | 01:17 | If you don't have another way of
delivering the content. They'll give you
| | 01:20 | this lovely little Flash Player and
they'll host the video content on the
| | 01:24 | website, saving you money.
| | 01:26 | And so this is the website. Like I say,
it's been designed for us, all of these
| | 01:30 | assets, all of these images
and everything has been provided.
| | 01:34 | Often times, when I'm asked to build a
website, all of the assets will already
| | 01:37 | be built for me, or at least most of
the design work will be done and I'll just
| | 01:41 | have a little bit of Photoshop jockey work to do.
| | 01:44 | This is not an unusual way to do it.
We'll have all of the text provided for us,
| | 01:48 | and all of these different graphical
assets, and we'll build up the website, and
| | 01:52 | this is really the focus of this course,
concentrating on how to do the layout in
| | 01:55 | CSS, in places where otherwise,
you might have used the tables.
| | 01:59 | So that's our task, if we choose to
accept it. Let's go head on and get started.
| | Collapse this transcript |
| Building a document header| 00:00 | Okay, so we are going to go
ahead and build this website now.
| | 00:03 | I want to take a moment and talk about the
process that we are going to use to do this.
| | 00:07 | We have on the screen here is the
finished website and I'll keep this up in this
| | 00:12 | tab here so we can refer back to it.
| | 00:14 | We're using this as a reference
so that we can build something that
| | 00:18 | looks exactly like this.
| | 00:21 | And in the other tab here,
there is nothing there now.
| | 00:23 | That's the tab that we'll be working in as
we build the various elements of the website.
| | 00:28 | In the text editor, we have our
beginning place and we have our beginning.css
| | 00:34 | and in the Exercise Files folder, there
is a separate folder for each lesson in
| | 00:40 | the chapter and each lesson is on its
own video, and within each lesson folder,
| | 00:47 | you'll see there is usually a beginning place
for the HTML and a beginning place for the CSS.
| | 00:53 | And this will change a little bit as we
go on and I'll discuss how and why it
| | 00:57 | changes as we go on.
| | 00:59 | But this is what you need to know for now.
| | 01:01 | This beginning.html is where we are
starting and this beginning.css is where
| | 01:05 | we are starting in the ending.css.
| | 01:07 | And the ending.html is more or
less where you are going to end up.
| | 01:11 | Your HTML should be functionally identical
to what you see, though if there's a little bit
| | 01:15 | of spacing difference here and there
that is not going to break the bank as they say.
| | 01:19 | But you want your ending place to be
functionally the same or as what is in that file.
| | 01:24 | So we're going to begin here now and
you'll be able to see the process as we do
| | 01:28 | this first lesson, which
doesn't really have a lot of code.
| | 01:31 | It's mostly about the process.
| | 01:33 | So the first thing we are going to do,
every single time, is we're going to save
| | 01:36 | out the file using Save As in your
text editor, and in this case I'm going to
| | 01:41 | save it as header.html because that's
what we are going to end-up with at the
| | 01:47 | end of these first few lessons.
| | 01:49 | And that will go in the same folder where
the existing beginning.html and ending HTML is.
| | 01:54 | So this is this 02-header folder.
You'll notice our path up here at the top
| | 01:58 | of the text editor.
| | 02:00 | It's Exercise Files/03-
Website/02-header/beginning.html.
| | 02:05 | So you want this to be in the same folder.
| | 02:07 | There is the Exercise Files, Website,
02-header, save that file out, and then
| | 02:13 | with the CSS, it's always
going to be called main.css.
| | 02:19 | So I want to Save As the css
and do the same thing with that.
| | 02:25 | And now we have main.css and header.
html and so the first thing we are going to
| | 02:30 | do here, this is our starting place
template, and this is our XHTML template,
| | 02:37 | and so it's just a starting place.
| | 02:39 | And I use this template so I don't have
to type all the stuff out every time I
| | 02:42 | create a new document and it's
all there and it's all correct.
| | 02:45 | I want to start up here and I'm
going to create a link tag in the head.
| | 02:51 | So this goes within the head element
and I'll create a link tag and this is to
| | 02:55 | link into our external CSS.
| | 02:57 | link and so href is the location
of the CSS file and then rel is the
| | 03:08 | relationship, which is stylesheet,
and the type is always text/css.
| | 03:19 | And so we'll save that and
then we'll change the title.
| | 03:23 | So it says Welcome to Groundswell.
| | 03:32 | And save. I'd like to save as I go along.
| | 03:35 | And in the body, there is going to be
a div. This is our outer div for the
| | 03:43 | entire document and that will end
down here for the ending body tag.
| | 03:53 | I'd like to put in a comment.
| | 03:56 | So as the document gets big,
it's easy to see what's what.
| | 04:02 | So you'll be able to find that at
the top and know which is which.
| | 04:06 | And then instead of this here, I'm
going to have a div id = header and a
| | 04:14 | div for that and likewise a comment.
| | 04:19 | And so that is what we are
going to put our HTML file for now.
| | 04:22 | I'll go over here to the CSS.
| | 04:24 | We'll put in some starting styles.
| | 04:27 | I'd like to have some comments.
| | 04:36 | So these are global default styles.
| | 04:39 | I'll start with the body style.
| | 04:44 |
| | 04:49 | That's just a starting place. I don't
typically ever use the default font family
| | 04:54 | but I'd like to have one in there just in case.
| | 05:10 | And so that's our background and you'll
notice that the path has this dot dot at
| | 05:14 | the beginning of it.
| | 05:15 | That's because image paths in a CSS
style sheet are relative to where the style
| | 05:20 | sheet is located, not relative
to where the document is located.
| | 05:24 | And you'll notice when main.css is in
the CSS folder, if we want to reference
| | 05:28 | the images folder, you have to go up a
level first and then to the images folder
| | 05:32 | and so this dot dot does that.
| | 05:38 | And so the margin 0 and padding 0.
| | 05:41 | That allows the content in the body to butt
up against the boarders of the Web browser.
| | 05:47 | Now I'll default for the
paragraphs and other text elements.
| | 06:00 | Just give them a reasonable margin.
| | 06:04 | Likewise, I don't usually use those but it's
nice to have them just as a starting place.
| | 06:11 | And now the outer div and this wraps
around the rest of the page.
| | 06:45 | And this creates our space for the outer page
and it also puts our banner at the top of
| | 06:50 | the page so we can position things over it,
and so our banner at the top of the page
| | 06:54 | is actually in a background.
| | 06:55 | Let me go ahead and save
this and show you on the page.
| | 06:58 | This graphic up here, this says
Groundswell and it has all of the navigational
| | 07:02 | elements on top of it.
| | 07:04 | That's actually the background image
and that's the background image right there,
| | 07:08 | and we also have this fff to
give us a white background for all of our text
| | 07:13 | and the no-repeat means that
the banner image will not repeat as a
| | 07:18 | background normally would.
| | 07:19 | It'll only get displayed that once,
and so we have the white background which
| | 07:24 | will go over the rest of the space.
| | 07:26 | So if we go ahead and load this
document in the browser now, in this tab, which
| | 07:30 | has nothing in it. I'll go ahead and
take this header.html and drag it out
| | 07:34 | there at the browser.
| | 07:36 | And there we have our background, and
you don't see the background image yet
| | 07:40 | because the div doesn't have any vertical size.
| | 07:43 | So there isn't anything
there yet to be able to see.
| | 07:46 | If I go in here in the CSS and I just
give this temporarily just give it some
| | 07:50 | vertical height and we know
that that image is 110 pixels high.
| | 07:55 | So I'm just going to say 200 pixels, so
you can see the end of the image and you
| | 07:59 | can also see the white comes into play
there and we'll reload in the browser
| | 08:04 | and there you have it.
| | 08:05 | And so this background here, that's the
background image in the body, and this
| | 08:11 | is that outer div and it has that
banner in it at the top. I guess we'll take
| | 08:16 | out that height and go ahead
and put in the header here.
| | 08:22 | I am going to make another
section and say div#header.
| | 08:34 | And so the header div is going to
have some height and position relative.
| | 08:42 | Now position relative without any other
positioning information, that makes it
| | 08:48 | qualify as a containing block, so that
we can do some other positioning relative
| | 08:54 | to its fixed position on the page.
| | 08:57 | So we'll go ahead and save here and
reload the document and now we should just
| | 09:01 | see the header because that header div
now has height and it has the width based
| | 09:06 | on the containing block, which is the outer div.
| | 09:10 | So this outer div gives it the width and
because this header is contained within
| | 09:14 | and inherits that width and
then its height is 110 pixels.
| | 09:17 | So 770x110 is the size of that
image, and so we can see that image.
| | 09:22 | The image is the background of the outer div.
| | 09:24 | The header does not have
any content at this point.
| | 09:27 | So that is what we are doing in this
lesson and so we have our outer div,
| | 09:32 | we have our div for the header, we are
ready to start putting elements on the
| | 09:36 | header and we have setup our basic CSS.
| | Collapse this transcript |
| Placing a contact button| 00:00 | Continuing in the process of building
our website, in this lesson we are going
| | 00:04 | to setup this Contact button up here at the top.
| | 00:06 | So let's get started.
| | 00:08 | Here we have our beginning.html in the
contact lesson folder and our beginning.css.
| | 00:14 | So we'll start by doing
our Save As. File > Save As.
| | 00:19 | We are going to save this as header.html,
and our CSS we'll save as main.css.
| | 00:29 | So we are going to be working inside
this header div container and we'll start
| | 00:35 | with the div for the Contact button.
| | 00:37 | So we have div id=
"contactButton" and we'll close that div.
| | 00:49 | Inside of that we'll put the contact link:
| | 00:52 | a href= and have the mail to link.
| | 01:04 | title="contact us" and it will say Contact Us.
| | 01:13 | This is all very interesting because
the way this is done, it's just a regular
| | 01:17 | text link, and if we go look
at this now in the browser...
| | 01:20 | So we drop this into the browser.
| | 01:22 | You will notice that it's just a regular link.
| | 01:26 | It's got text, it's blue, and it's got
the underline, and that's what it looks
| | 01:30 | like without the style.
| | 01:32 | When we apply the style, it's
going to look like this with the image.
| | 01:34 | So the reason for that is that for
browsers that are text-oriented browsers and
| | 01:39 | don't have graphics and don't support
CSS, they'll still see a link and they'll
| | 01:43 | be able to click on it.
| | 01:44 | When we do our style, we won't
see it and it will look all cool like
| | 01:49 | it's supposed to look.
| | 01:49 | So let's go ahead and do that.
| | 01:50 | So we are going to put in the
contact link in the style sheet.
| | 02:04 | We'll start by selecting the contactButton div.
| | 02:32 | And so we'll go ahead and save that and
now when we look at it, we'll see that
| | 02:37 | that contact link gets moved over.
| | 02:40 | And there it is and that's
where it's going to belong.
| | 02:42 | Now we'll set it up so
that it displays the image.
| | 03:01 | These kinds of selectors are called
pseudo-element selectors and what they
| | 03:05 | are is they are special selectors that just
select for an element in a particular state.
| | 03:10 | So these are special states for anchor
elements, so link and visited are the
| | 03:14 | default states for a link that
has or has not already been visited.
| | 03:18 | So this is its default state when
it doesn't have a hover over it.
| | 03:23 | We'll set up the hover and active next.
| | 03:32 | So those were the dimensions of the image.
| | 03:37 | This changes it from an
inline element to a block element.
| | 03:47 | That text-indent, that takes the text
and moves it off to the left 1000 ems,
| | 03:52 | which is way off to the
left so it'll never be seen.
| | 03:55 | So just for browsers that support CSS,
which is most visual browsers, that link
| | 04:01 | will become invisible.
| | 04:24 | Okay, let's talk about this
background property at this point.
| | 04:27 | You notice there is an URL and
this is for the image and it says
| | 04:31 | contact_icon_dual.gif, no-repeat left top.
| | 04:36 | So what we've done here is we set this up so
that it aligns at the left and top of the image.
| | 04:41 | So when I save this and we go look
at it in the browser, you'll see the
| | 04:45 | image will show up.
| | 04:46 | And because our viewport window is just
that size, it's the size of half of the
| | 04:50 | graphic, but it's the full size of
this image, we aligned it at the left top,
| | 04:54 | all we see is that part of it.
| | 04:56 | When I do the hover selector, you'll
see that when you hover over it, it will
| | 05:01 | show the other image.
| | 05:02 | This is really clever, and you'll
see what I mean here in a moment.
| | 05:07 | So I'm going to go ahead
and copy and paste here.
| | 05:11 | Copy and paste, and then I can just
change this to active and this to hover.
| | 05:19 | So these are the two
other states of the a element,
| | 05:23 | so these are the pseudo-element
selectors for the hover state and the active state.
| | 05:27 | And I'll just say background-position:
| | 05:32 | left bottom.
| | 05:36 | So all that does is in that hover state is
it changes this left top to be left bottom.
| | 05:42 | So when I save that, we bring it up in
the browser, reload, when I hover over this,
| | 05:47 | you see that it changes the
image and looking at the image,
| | 05:51 | that's the bottom half of the image.
| | 05:54 | So we see the top half of the image in
its normal state and when I hover the
| | 05:57 | mouse over, we see the bottom-half of the image.
| | 06:00 | So that's just a clever way to
make rollovers work using CSS.
| | Collapse this transcript |
| Laying out a main menu| 00:00 | In this lesson, we are going to
go ahead and set up this menu here.
| | 00:05 | This is our main menu for the whole site.
| | 00:08 | You see it has these lovely little rollovers
and it's positioned over here on the header.
| | 00:13 | So we'll go ahead and get started.
| | 00:15 | In our text editor, we have where we
left off in the last lesson and we have
| | 00:19 | there beginning.html and beginning.css out
of the 04-menu folder in our Exercise Files.
| | 00:26 | So we'll start by doing our Save As.
| | 00:28 | I'm just going to save this as header.
html, and our CSS, we'll save as main.css.
| | 00:37 | All right, the first thing we are going
to do here is we are going to insert the
| | 00:43 | HTML for our header.
| | 00:58 | So there is the div for positioning our
mainMenu and inside here we have an unordered list.
| | 01:07 | Again, this is so that it looks nice
for browsers that don't support the
| | 01:12 | graphical or the CSS.
| | 01:18 | There's four line items.
| | 01:20 | So I'm going to go ahead and
paste that into four places.
| | 01:25 | So I use copy and paste a lot.
| | 01:28 | This saves a lot of typing.
| | 01:37 | Put in this home.html here and this one
is going to have class equals current.
| | 01:45 | That's the way that we specify which
one of these links is the current page.
| | 01:52 | So we are going to start
by laying out the Home page.
| | 01:54 | On the Gear page, that one will be the
current and on the Lifestyle page, that
| | 01:58 | one will be the current.
| | 01:59 | Here, the Home is the current.
| | 02:01 | So it's just a place to start.
| | 02:03 | So I'm going to do my copy and paste here again.
| | 02:07 | Copy and paste and this one will be
Gear, and this one is not current.
| | 02:14 | This is gear.html.
| | 02:22 | So that is going to be a lot like the other two.
| | 02:24 | So I'll go ahead and paste
that into the other two places.
| | 02:30 | So we have Lifestyle and that's
lifestyle.html and videos, and so save.
| | 02:45 | So this is the HTML for our main menu.
| | 02:48 | If we go ahead and look at this in
the browser now, drag this header.html
| | 02:54 | into the browser, you see that it's all in
text and it even pushed the whole div down.
| | 02:59 | So what we are going to do is we are
going to change the way that works in the CSS.
| | 03:04 | So for browsers that don't
have the CSS, they will see this.
| | 03:07 | We are going to go ahead
and change it using CSS.
| | 03:11 | So the first thing we are going to do
is we are going to create our main menu
| | 03:15 | section using a comment.
| | 03:30 | We'll set up our mainMenu div.
| | 03:41 | This is position: absolute, and
| | 03:46 | left: 320px, and bottom: 0.
| | 03:54 | So this lines it up 0 pixels from
the bottom whereas our contact link is
| | 04:00 | lined up at the top.
| | 04:02 | Then our unordered list is going
to be set up for no list style
| | 04:15 | and no margin and no padding.
| | 04:22 | The line items likewise are going to
float left and have no margin or padding.
| | 04:44 | So what this does is very interesting to see.
| | 04:49 | Reload this in the browser.
| | 04:51 | This is still the unordered list, but
it's not acting like a list, because it
| | 04:55 | has no list of style and each of these
elements is right up against each other,
| | 05:00 | because we have taken out
all their margin and padding.
| | 05:02 | We've positioned it 320 pixels from the left.
| | 05:05 | The style's none, so there
is no bullets or anything.
| | 05:08 | The line items are each floating
left and remember what happens when you
| | 05:11 | float items next to each other,
floating them left, is they are just all
| | 05:15 | right up against each other.
| | 05:17 | So this sets it up for
what we are going to do next.
| | 05:21 | Now this is a selector that selects the a
| | 05:29 | element in its link state when it's inside of
an li, when it's inside of this mainMenu div.
| | 05:35 | So that targets just this one set of links.
| | 05:40 | So in our XHTML that targets these a
hrefs, because they are inside of the
| | 05:46 | context of this mainMenu.
| | 05:50 | So that's how that selector works.
| | 05:52 | We'll go ahead and copy and paste,
because our next one is going to be
| | 05:57 | visited pseudo-element.
| | 06:02 | So just like up here, we are setting
up for the link and the visited for our
| | 06:08 | main style for this.
| | 06:10 | So we have the font-family,
which is Trebuchet MS or sans-serif.
| | 06:20 | So this will select this Trebuchet MS
font if you have it and if you don't,
| | 06:25 | it will select whatever your
default sans-serif is. Display:
| | 06:29 | block makes it into a block element.
| | 06:31 | Color is white, text-decoration:
| | 06:39 | none and that turns off the underlining
that's normally done on links. Padding:
| | 06:47 | 0 15px 0 30px.
| | 06:53 | So that's starting at the
top and going clockwise.
| | 06:56 | It's top, right, bottom, and left.
| | 06:59 | That's our padding.
| | 07:00 | It just lines up the text to match
the image that's going to be in the
| | 07:05 | background of this element.
| | 07:07 | We have margin-right: 10px
| | 07:14 | and line-height: 25px.
| | 07:19 | So all that's about lining
up the text in the image.
| | 07:22 | We are already done all of these
measurements so I know that it works.
| | 07:43 | All right, so this finishes
setting it up and we are using a very
| | 07:47 | similar technique here.
| | 07:49 | This nav_rollover has the two images in it.
| | 07:52 | Let me go ahead and show you that.
| | 07:53 | We will create a tab here by
pressing Ctrl+T on my browser.
| | 07:58 | It'd be Command+T if you are on Mac.
| | 08:00 | I'm going to go ahead and find
this nav_rollover right there.
| | 08:04 | You see that it's got the two images in it.
| | 08:07 | It's got the top image and
it's got the bottom image.
| | 08:09 | So in this case, we are
starting with the bottom image.
| | 08:12 | So we are lining at the left bottom and
we'll use the top image for the rollover version.
| | 08:17 | We'll go ahead and take a look at this
in the browser right now, reload, and
| | 08:21 | there is our images.
| | 08:22 | So it loads those images and it uses
them as a background and then we just have
| | 08:26 | the text from the unordered list.
| | 08:30 | So the image is this one and it's got
the little flower and the text is just
| | 08:34 | showing up right there. There it is.
| | 08:36 | Now our rollover will use the
other image and it will dim the text.
| | 08:43 | So let's just ahead and
do our copy and paste here.
| | 08:52 | So this will change the color of
the text to this mustard color.
| | 09:00 | And background position,
we know this trick already.
| | 09:03 | It will now be left and top.
| | 09:10 | We have to change these pseudo-
element selectors to be hover and active.
| | 09:17 | Hover is when the mouse is hovered
over and active is when you are actually
| | 09:20 | clicking on the link.
| | 09:21 | So go ahead and take a look
at this in the browser now.
| | 09:25 | We have, see, it uses the darker
image and the mustard colored text.
| | 09:33 | So that's exactly how it is in here.
| | 09:36 | So now all that's left is to
make this current style, and that is
| | 09:41 | accomplished like this.
| | 09:59 | So that moves our margin up by 5 pixels.
| | 10:04 | It changes the height to 30 pixels.
| | 10:24 | And that selects that different image
| | 10:30 | and the different text color, the grey text
color and a little bit of text positioning here.
| | 10:37 | So go ahead and save that and when we
reload, you will see that the current one
| | 10:46 | now has this other look to it, but
you will notice that my cursor is still
| | 10:49 | changing to a pointer, like it's a link and
when we look at this one, it doesn't do that.
| | 10:54 | So we have one more style to
add which will make that happen.
| | 10:59 | Go ahead and copy this selector and
paste it down here and add the hover
| | 11:06 | pseudo-selector
| | 11:10 | and cursor: default.
| | 11:14 | That makes the cursor not change on the link.
| | 11:18 | Reload and now we see the
cursor doesn't change on the link.
| | 11:21 | It actually does have a link,
but it links to its own page.
| | 11:27 | So that's okay, but that makes
that all work just like that.
| | 11:32 | So now we've created our main menu and
we can go ahead and work on the rest of
| | 11:38 | the page that we are going to use for
our template in creating all of the rest
| | 11:42 | of the pages in the site.
| | Collapse this transcript |
| Creating a layout template pt. 1: Main body area| 00:00 | Continuing in the development of our
website, in this lesson we are going to
| | 00:04 | insert this middle banner, I call this
the ID banner, and we are going to set up
| | 00:10 | the styles for this left hand side.
| | 00:11 | Where we are going to towards at this
point is we are going to towards creating
| | 00:15 | our template that we'll use for
creating the rest of the site.
| | 00:18 | So I'm not going to put content in here.
We are going to set up the main styles
| | 00:21 | for it, and then in the next
lesson we'll do the Sidebar.
| | 00:25 | Here in the text editor, we have the
beginning.html and beginning.css from the
| | 00:31 | 05-layout-left folder in your exercise
files, so we'll go ahead and start with
| | 00:36 | our Save As, and we are going to call
this one template.html, because that's
| | 00:40 | what we are going to end up with at
the end of these few lessons here.
| | 00:46 | And in the CSS we'll go
ahead and Save As, main.css.
| | 00:57 | And we'll start by putting in the XHTML.
| | 01:00 | This is the simple part, and under the
header, we need to go ahead and make a
| | 01:05 | <div> for the middle banner,
| | 01:12 | close the <div>, and then do for the content.
| | 01:28 | Go ahead and make a comment for that one.
| | 01:34 | There will be some distance there.
| | 01:36 | And a <div> for the main content.
| | 01:48 | So that's the left column.
| | 01:49 | It's the main content.
| | 01:56 | And we'll just put
in some default text here.
| | 02:06 | We're using our template.
| | 02:16 | So indent this a little bit. I'm using a
feature in my editor that will indent a
| | 02:22 | block of code for me.
| | 02:24 | Most good editors have something like this.
| | 02:26 | In this editor it's the Tab key, so I
can tab over and it will indent and I can
| | 02:32 | Shift+Tab and it will move back.
| | 02:34 | I like to indent things in my code so I
can tell what is related to what and so
| | 02:41 | I find that to be a useful practice, all right.
| | 02:46 | Now, let's go ahead and
position this using CSS.
| | 02:51 | Scroll down here to the bottom, and
create a new section with a comment.
| | 03:03 | All right, that's a little space to work,
and so that selects the main content
| | 03:15 | ID selector, and this is going to
float left, and we'll have a width of 430 pixels,
| | 03:25 | and a margin of 0, and a
padding of 0 on the top and bottom,
| | 03:36 | and 15 pixels on the left and right.
| | 03:39 | I will talk a little bit more about that later.
| | 03:43 | What my reasoning is for setting
this up this way, and then main content,
| | 03:47 | p, this would be our default paragraph style
for everything within the left hand column.
| | 03:55 | Font family, it's Georgia, and Serif.
| | 04:01 | So we'll use the Georgia
font if that's available.
| | 04:03 | Otherwise it will pick the default
Serif font, which is usually Times
| | 04:07 | Roman looking thing.
| | 04:09 | font-size is .9 em,line-height is 1.4
em, color is black, and margin is 1ex and 0.
| | 04:29 | So that's up and down, top and the
bottom margins will be 1ex and the left
| | 04:36 | and right will be 0.
| | 04:38 | So what we are doing here is we're using
this padding from the main content div.
| | 04:42 | This padding on the right and left of
15 pixels, we are using that in place of
| | 04:47 | margins in the paragraph.
| | 04:49 | My reasoning there is that as we set up
other elements like Heading elements and
| | 04:54 | things like that, we also give them a 0
margin, especially on the left and they
| | 04:59 | will line up perfectly every time.
| | 05:02 | This just is an easy little shortcut to
having your margins look right on the page.
| | 05:07 | So I'm using the padding of the outer
content box to set up what looks like a
| | 05:13 | margin for the text elements.
| | 05:15 | So a little trick I do, and I
find that it works very, very well.
| | 05:19 | So I'm going to set up my Heading elements.
| | 05:21 | I'll go ahead and use my copy and
paste feature here to duplicate that a few
| | 05:29 | times, so I don't have to type it over
and over and over, and there is our 1
| | 05:35 | through 4 Heading levels, and they
will have a font family of Trebuchet MS,
| | 05:45 | Sans-Serif, and so that will use
Trebuchet MS if it's available on the client
| | 05:55 | system, and otherwise it will pick the
default Sans-Serif font, and now finally
| | 05:59 | I'm going to set up the header elements, and
these are just from what I know I'm going to need.
| | 06:11 | So the h1 is going to have a
font size of 1.6 em, font weight:
| | 06:18 | bold of course.
| | 06:22 | So our main headings, color is 1b9d95,
and these colors were picked for me
| | 06:30 | by the designers, margin, and that often
happens, the designers will pick colors for you.
| | 06:36 | It's a good thing too.
| | 06:38 | Programmers should not be
allowed to be pick colors.
| | 06:42 | Bad things happen if the
programmers pick the colors.
| | 06:44 | I am kidding of course, because like most
programmers, I consider myself a designer.
| | 06:53 | And here is our h2 element,
font size 1.2 em, color 3c3809.
| | 07:08 | Actually I'm very impressed
with the design of this site.
| | 07:10 | I like it very much.
| | 07:14 | Margin .4 ex and 0.
| | 07:16 | So here in both of these cases you
will notice that our margins, top, right,
| | 07:23 | bottom and left, so the
right and the left here is 0.
| | 07:27 | In this case, the top and bottom is
the 4 ex and the right and left is 0.
| | 07:31 | So that's just going to make these
heading levels all line up perfectly on the
| | 07:36 | left hand side with this
padding from the outer div.
| | 07:39 | I have got one more to do here,
which is the Main Content, h4.
| | 07:43 | I'm just going to copy and paste
this one, and change it a little bit.
| | 07:50 | This will be h4, font size is 1.1 em,
and the color is gray, the font weight
| | 08:01 | will be bold, and the margin is 1 ex on
the top, 0 on the right minus .2 ex on
| | 08:15 | the bottom, and 0 on the left.
Get rid of this extra semicolon there.
| | 08:20 | It shouldn't hurt me anything.
but it's messy. Save that.
| | 08:23 | So that's the upper styles for the
left column content on our website.
| | 08:28 | Let's go ahead and take a look
at what we've got so far here.
| | 08:31 | Go ahead and drag this template.html
into our browser, and there we have it.
| | 08:37 | Now you will notice that the
background here is still gray.
| | 08:41 | What's happened is that our main
content box did not extend out over the text
| | 08:49 | here, and the reason for that is that
this is a floating block, and so what we
| | 08:54 | have to do is a little trick to get that
Main Content box to extend out, so that
| | 08:59 | we have the white background.
| | 09:01 | There is a couple of things that
will happen as a result of that.
| | 09:04 | One is that the left and right
columns will both extend to the same link.
| | 09:09 | We want them both to extend to the same place.
| | 09:11 | So here is the trick.
| | 09:13 | This works really well, and you will
run into this whenever you are using
| | 09:16 | floating columns is that at the end of
this outer content box, and this is part
| | 09:23 | of the reason for this outer content
box, I'm going to put in the paragraph.
| | 09:27 | It's going to be an empty paragraph.
| | 09:29 | It will be like that and it will have
a class = clear, and so I'm going to
| | 09:35 | create a class now in the CSS.
| | 09:38 | And you will see what I mean when I do this.
| | 09:41 | I'm going to create a little
section here that will go at the bottom.
| | 09:47 | Call it my favorite words, miscellaneous styles.
| | 09:57 | It's fun to say and fun to spell.
| | 10:01 | .clear, clear both, and so all the
style does is it clears floating objects at
| | 10:11 | the bottom and that's what this is for.
| | 10:13 | And we are going to use it actually just
once in this document, and there it is.
| | 10:16 | We have an empty paragraph.
| | 10:18 | So we are using this XHTML shortcut
for an empty element, and class = clear.
| | 10:24 | So all this does is it creates that
anchor at the bottom of the floating objects.
| | 10:31 | So we'll go ahead and reload now, and viola!
| | 10:35 | Our outer content box now extends,
pass our content, and we have content all
| | 10:42 | styled exactly how we set it up.
| | 10:44 | There is one more piece
missing here, isn't there?
| | 10:47 | If we look here, we have this middle
banner, and we just want to make sure
| | 10:50 | we get that in there.
| | 10:51 | That's very quick and easy to do, and
here is our div that we created for it.
| | 10:56 | We just want to put in the image now.
| | 11:21 | Save that and go ahead and look at it
in our browser now, and there we have it.
| | 11:28 | So we have now we're matching well,
we have our middle ID banner, and that
| | 11:34 | changes with each page.
| | 11:35 | That's why I call it the ID
banner, and we have our main content.
| | 11:39 | So that's our left column and we'll set
up our right column in the next lesson.
| | Collapse this transcript |
| Creating a layout template pt. 2: Sidebar area| 00:00 | Continuing in our development of
this website, I'm going to now setup the
| | 00:05 | right-hand column and that
will become a part of our template.
| | 00:10 | So here is our text editor again
and we have our beginning HTML and
| | 00:14 | the beginning.css from the layout-right folder.
| | 00:18 | We'll go ahead and do our Save As,
which will save this as template.html and
| | 00:26 | the CSS will become main.css.
| | 00:34 | We'll go ahead and put in the right
column in the XHTML. This is real easy.
| | 00:41 | So it gets its own div inside of the
content and outside of the main content.
| | 00:50 | So I call this sideBar.
| | 00:54 |
| | 00:58 | You'll notice that I capitalize the
second words in my selectors.
| | 01:02 | This type of capitalization is called
CamelCase where the first letter is lower
| | 01:07 | case, and then each
succeeding word has a capital letter.
| | 01:11 | The reason I do this is because in CSS
selectors can have letters and numbers
| | 01:17 | and underscores, but they cannot have
dashes or spaces or anything like that.
| | 01:21 | And I personally dislike underscores.
| | 01:23 | A lot of people like them.
| | 01:24 | They think they look like
spaces that are just underlined.
| | 01:26 | I just don't like them, and so I use
CamelCase instead, and this allows me to
| | 01:31 | have multi-word identifiers, and have
a clear distinction between the words.
| | 01:38 | So this is my personal style,
different people do this in different ways.
| | 01:42 | So inside of the sideBar here, we have h3.
| | 01:44 | h3 is used for the headings in our
sideBars and h3 is not used in the main
| | 01:54 | content, and this allows us to keep
that distinct and it also allows the search
| | 01:58 | engines to prioritize the blocks of
text in the document, giving the sideBar
| | 02:04 | lower priority and the
main content higher priority.
| | 02:11 | And that's placeholder for our content
in the sideBar and I'm going to go ahead
| | 02:16 | and indent that a little bit, and that
is-- it goes in the template.html file.
| | 02:22 | Now in the main.css, let's scroll down
here towards the bottom and right in here
| | 02:28 | we'll setup for our sideBar.
| | 02:38 | And we'll go ahead and put some styles in here.
| | 02:44 | The sideBar div will have the
float: right and width: 265 pixels.
| | 02:56 | Padding. So it's same trick with the padding,
10 pixels from the right, and the left, 0
| | 03:03 | on the top and bottom,
margin 0, and border-left:
| | 03:12 | solid, gray and 1 pixel.
| | 03:20 | So what this does, there is a couple
of things in here I want to talk about.
| | 03:23 | First of all, I'm floating
right and not floating left.
| | 03:25 | We know that we can't float left, and
it will show up right next toward to the
| | 03:30 | other one, but by floating right, I
ensure that the right margin is lined up
| | 03:34 | with the right side of the
containing block. Width is 265.
| | 03:39 | That was calculated before, with
padding and margin we understand, and this
| | 03:42 | border left, this is lovely.
| | 03:44 | Let me show you this in the browser.
| | 03:47 | You'll notice that this vertical line
extends down to the bottom of the sideBar
| | 03:52 | no further, and that's because that
border is attached to the sideBar and not
| | 03:57 | attached to the main content.
| | 03:58 | If I made a right border on the main
content, it will go all the way to the
| | 04:01 | bottom of the page, and so I wanted it
to come just to the bottom of the sideBar
| | 04:06 | and I think that looks good.
| | 04:08 | So that's why that
border left is on the sideBar.
| | 04:13 | I'll go ahead and setup
our paragraphs and headings.
| | 04:17 | So this selects our paragraphs and the
sideBar only and we can have font family.
| | 04:25 | We use the Trebuchet Sans-serif
| | 04:32 | for the sideBar of main body text.
| | 04:40 | Font-size is .8 em, the line-height is
1.2 em, the color just a little bit off white,
[00:04:53.8]
margin 0 0 3 ex and 0, and so what
this does is the margin at the top
| | 05:05 | is zero, the right is zero, the bottom is 3 exs.
| | 05:10 | So I put some space between the
paragraphs and the left is zero and so that left
| | 05:15 | again will lineup nicely with
the padding on the sideBar div.
| | 05:21 | And sideBar h3, this is our heading
level that we use for our sideBar mostly.
| | 05:28 | This is going to have the same font family.
| | 05:31 | So I'm going to go ahead and just
copy all of this, pressing Ctrl+C, you'll
| | 05:35 | press Command+C on a
Macintosh, and there we have that.
| | 05:41 | And I'll just go and modify things
instead, so it's 1 em for the heading, and
| | 05:46 | the line-height, we don't have that.
| | 05:49 | The color is this 1b9d95, and the
margin is 1 ex on the top, 0 on the right,
| | 06:04 | half an ex on the bottom, and zero on
the left, and that will make it nice and
| | 06:09 | tight against the paragraph.
| | 06:10 | We give some space before the heading.
| | 06:12 | So go ahead and save that, and load
it up in the browser, and take a look.
| | 06:17 | So I'll drag template.html from our
layout-right folder into the browser, and
| | 06:24 | there we have our sideBar.
| | 06:25 | Now the ruler is going all the way to
the bottom, because we don't have much
| | 06:30 | difference in the height between the
sideBar content and the main content.
| | 06:34 | But when we do, that ruler will
not go all the way to the bottom.
| | 06:38 | So that setup, and in our next lesson
we'll do the footer with the copyright
| | 06:43 | information, and our template will be complete.
| | Collapse this transcript |
| Creating a layout template pt. 3: Footer content| 00:00 | In this lesson, we're going to setup
the bottom of the page, which has this
| | 00:06 | copyright notice, and the privacy
and terms links, and then we'll be ready
| | 00:10 | with our template, and then we'll be ready to
build the four separate pages of the website.
| | 00:18 | So here in our editor, we have the
beginning.html and the beginning.css.
| | 00:24 | I'll go ahead and do our Save As,
call this template.html, and this will
| | 00:29 | actually be the template when
we are done with this lesson.
| | 00:33 | And the CSS will be called main.css,
| | 00:42 | and we'll start by typing in
the footer information down here.
| | 00:48 | So this is way outside the outerDiv.
| | 00:52 | We'll have a div with the footer.
| | 01:02 | And this has a paragraph in it
| | 01:06 | and that paragraph has a copyright
notice, so that is XHTML entity that
| | 01:12 | inserts a copyright symbol.
| | 01:21 | You'll notice I have a couple of non-
breaking space entities too. This is
| | 01:26 | because the browser will take all
the spaces that it encounters and fold
| | 01:31 | them into one space.
| | 01:32 | I actually want a little bit of space here.
| | 01:35 | I want a little bit of air between
this and the elements following it.
| | 01:38 | You'll notice down here that there is
some extra space in there between that
| | 01:43 | and the privacy policy, and then there is a
vertical bar, and the terms and conditions.
| | 01:49 | It's hard to see the white, but
that was intentional, because this
| | 01:53 | isn't meant to be read.
| | 01:54 | It's not suppose to compete with the
content, and so it's there and it's
| | 01:58 | readable, but it kind of fades
out if you are not looking for it.
| | 02:01 | Now we are going to have the links,
a href, equals, and it would be Privacy Policy.
| | 02:15 | The vertical bar and another
link for the terms and conditions.
| | 02:26 | And then I'll go ahead and put something in here.
These pages aren't actually going to exist
| | 02:32 | when we are done.
| | 02:39 | Perhaps creating them is an
exercise for the viewer, and there we go.
| | 02:43 | That's our bottom content there.
| | 02:45 | We'll go ahead and look at this in the
browser, so you'll need some formatting,
| | 02:52 | drag the template onto the
browser, and there we have it.
| | 02:55 | There is the text at the bottom. You
can see that extra space there, after the
| | 02:58 | copyright Groundswell Surf, and now
let's go ahead and format it with the CSS.
| | 03:02 | So we'll go down here to the bottom
and we'll create a section in here.
| | 03:15 | We have div, which has clear both,
| | 03:22 | so that it's always at the bottom
outside of the floating elements.
| | 03:29 | Background is transparent. Again, we
don't want any white background on this div.
| | 03:35 | We want the background of the
site to show through, margin, 0 auto, and
| | 03:40 | that will center it, and padding is 5 pixels.
| | 03:46 | That will give it a little bit of air around it.
| | 03:50 | And the paragraph, and this will
have the Trebuchet MS font, so we'll go
| | 04:00 | ahead and insert that.
| | 04:08 | font-size .75 em, so
it's small but still readable.
| | 04:13 | Color is white and the margin and
padding are zero and we'll do that.
| | 04:26 | And finally the anchors.
| | 04:32 | We'll have this teal color,
and no text declaration.
| | 04:39 | Now save that and go ahead and reload
in the browser, make sure it's what we want.
| | 04:49 | The only thing missing
is that it's not centered.
| | 04:51 | So we'll go ahead and center that.
| | 05:00 | And look at it in the
browser and there we have it.
| | 05:04 | So that's the footer information,
we have the copyright notice, and that
| | 05:09 | extra little space there.
| | 05:11 | We have the privacy and the terms and
conditions and now we have our template.
| | 05:16 | We can go ahead and start building the website.
| | Collapse this transcript |
| Building a main home page pt. 1: Main body content| 00:00 | So now we're going to
start building the website.
| | 00:02 | I'm going to start with the Home
page, and this one is called home.
| | 00:05 | You see it's called home.html, and
we're going to start by filling in the
| | 00:09 | content, on the main content
panel, the left column on the page.
| | 00:18 | Over here in our text editor, we have
template.html because we're starting with
| | 00:23 | the template and we have beginning.css.
| | 00:26 | We also have home.txt, which is the
text file that has all of the content
| | 00:32 | for the left-hand side.
| | 00:32 | So let's go ahead and do our Save As.
| | 00:36 | This is going to get saved as
home.html in the home-pt1 folder.
| | 00:42 | We're in the home-pt1
folder in the Exercise Files.
| | 00:46 | And the CSS will, of
course, get saved as main.css.
| | 00:55 | And we don't need to do a Save As on
the text file, because we're not going
| | 00:58 | to be changing that.
| | 01:00 | So our first order of business is to
go ahead and get the content in here.
| | 01:05 | Now in this one, we're going to
start with plain text and it's not
| | 01:09 | HTMLified yet.
| | 01:11 | And we're going to do the HTMLification.
| | 01:14 | In later lessons, it's going to already
be HTMLified because we only really need
| | 01:19 | to see that process once.
| | 01:21 | This is something that I commonly have
to do when I'm given content by a client
| | 01:24 | that has to go to a website.
| | 01:26 | So I would like to show you to the
process once but for the rest of the lessons,
| | 01:29 | just for the sake of illustration,
they will already be HTMLified.
| | 01:33 | Go ahead and select all of this
text, and on pressing Ctrl+C on my PC
| | 01:38 | keyboard to copy it into my copy
buffer and if you're on a Mac, you'll use
| | 01:43 | Command+C. Over here in the XHTML file,
we'll press Ctrl+V or Command+V on a
| | 01:50 | Mac and there's the text.
| | 01:53 | So I'm going to come up here to the
top of it and start putting in the XHTML.
| | 01:58 | Use h1 in the mainContent
column and it's a paragraph.
| | 02:05 | We have to close paragraph here.
| | 02:07 | So I'm going to go ahead and copy
and paste these to all the places where
| | 02:11 | they belong.
| | 02:12 | So we need one here and we need
one here and we need one here.
| | 02:18 | Scrolling down, this is a
paragraph and this is a paragraph.
| | 02:25 | These are the end paragraphs, copy
that and paste here and paste here and
| | 02:33 | here and here and here.
| | 02:37 | So I'll use copy and paste a
lot because it saves me effort.
| | 02:46 | This is h2 and end h2 there.
| | 02:52 | And this is h4 because
h3 is used in the sidebar.
| | 02:58 | So these will also get copy and
pasted because these were all h4.
| | 03:04 | I'll show you that in the browser in a moment.
| | 03:09 | Close h4, copy, paste and paste.
| | 03:17 | Save this and take a look at the browser here.
| | 03:20 | So this is h1, this main heading
here, and down here, we have an h2.
| | 03:27 | This is h2 and all of these are h4,
because h3 is used in the sidebar.
| | 03:38 | Now we're going to do the unordered list.
| | 03:41 | So this is <ul> and here is the
closed ul down here, and each of these
| | 03:48 | lines gets a <li>.
| | 03:49 | We'll do a copy and paste,
| | 03:56 | and do the end tag at the
end there and copy and paste those.
| | 04:07 | And that's the major HTMLification.
| | 04:12 | We have some links we need to do though.
| | 04:15 | Here's the link and do the end of the link.
| | 04:21 | I get a little bit tricky here
but hopefully, you can follow along.
| | 04:27 | Select the actual URL and I'll cut
that with Ctrl+X or Command+X on a Mac
| | 04:35 | and paste it in there.
| | 04:37 | So that's the quick and easy way to do that.
| | 04:39 | A href equals quote, quote and close the tag.
| | 04:44 | And the end tag here, but I select all
of this part while I do that because I
| | 04:47 | don't need that part.
| | 04:50 | So that goes away when I
start typing, and then this.
| | 04:53 | I do a cut and a paste.
| | 04:57 | We have one more link.
| | 05:08 | Cut and paste, and so that gives us
all of the XHTMLification that we need.
| | 05:16 | Go ahead and select all of this
| | 05:23 | and tab in and there we have it.
| | 05:32 | So I'll save this and we'll go
ahead and look at it in the browser.
| | 05:40 | This is our template in the browser here.
| | 05:42 | We'll go and drag the home.html into
the browser and there we have it, and that
| | 05:48 | is looking pretty good.
| | 05:50 | There's a couple of things we need to do.
| | 05:52 | We are going to start with the links.
| | 05:55 | These are not how they're supposed to be.
| | 05:58 | We'll look at the links in the target site.
| | 06:04 | See that they have this lovely mustard
color and they get the dashed underlines
| | 06:08 | when we hover them and that looks pretty cool.
| | 06:11 | We want that and so we're
going to go ahead and do that.
| | 06:14 | So we'll bring up our CSS.
| | 06:19 | Now these links are going to be
this way for most of the site.
| | 06:24 | So we're going to put
them in our global section.
| | 06:28 | So this is our global style
section and they're selected like this.
| | 06:32 | #outerDiv a:link, #outerDiv a:visited
and they have no text-decoration and
| | 06:51 | they have this color.
| | 06:57 | In the hover version,
| | 07:04 | this is hover and active
and this has a color of 566440
| | 07:17 | and bottom border one pixel,
dashed and also that color.
| | 07:28 | So we'll save this.
| | 07:29 | Our links should look how
they're supposed to look.
| | 07:34 | Reload and there we have our links
exactly what they're supposed to look like.
| | 07:39 | And look at them in the
target site and there they are.
| | 07:44 | Now the next thing we need to
do with is this, unordered list.
| | 07:49 | So here it is in ours and
there it is on the target.
| | 07:55 | You see it's a little smaller and
the spacing is little different.
| | 07:59 | So go ahead and put this in our CSS
and that goes down at the bottom of our
| | 08:06 | mainContent section, and about here.
| | 08:11 | It has the ul for unordered list
| | 08:17 | and it has the font-family of Georgia and serif.
| | 08:26 | So if Georgia isn't found on the target
machine, the default serif font will be used.
| | 08:30 | It's of font-size of 0.9em and a margin:
| | 08:37 | 0 0 1.4ex 0.
| | 08:43 | I'll save this and we'll
reload it in the browser.
| | 08:47 | And then we see that this looks exactly
how it's supposed to look, just like that.
| | 08:54 | Now here's the problem.
| | 08:57 | You didn't know there was a problem, did you?
| | 08:58 | Well, there is one.
| | 08:59 | If you're using Internet Explorer, you
have already seen this problem and if
| | 09:04 | you're not using the Internet Explorer,
you need to know about it, because a lot
| | 09:08 | of your audience is going to
be using Internet Explorer.
| | 09:11 | So here I've got Internet Explorer and
I'm going to go ahead and load our page
| | 09:19 | in Internet Explorer.
| | 09:21 | See there. It looks lovely,
except for that unordered list.
| | 09:25 | So that unordered list is off against the side.
| | 09:29 | It's actually even a
little bit left of the side.
| | 09:31 | And this is because Internet Explorer
has a bug in the way that it deals with
| | 09:36 | lists that are formatted by CSS and
it is always had this bug in all of the
| | 09:42 | versions that I can remember
that support CSS up until now.
| | 09:46 | As I record this, am in the year 2009
and Internet Explorer still has this bug
| | 09:51 | many years after it's being supporting the CSS.
| | 09:54 | So what we have to do because it's the 800-
pound gorilla in the market, we have to support it.
| | 10:00 | So here's what we do.
| | 10:01 | We'll go ahead and on this left margin,
which is the last one here, remember
| | 10:07 | it starts at the top and goes
clockwise, top, right, bottom, left, we'll go
| | 10:12 | ahead and we put in 1em.
| | 10:16 | And I'll save that and bring it up in
Internet Explorer and we'll reload and we
| | 10:23 | see that now it's reasonable.
| | 10:25 | It's not as far over as maybe we
would like but it's reasonable.
| | 10:29 | And if we look in our Firefox and
reload that, it's a little farther
| | 10:35 | than we would like it off to
the right, but it's okay.
| | 10:37 | So what you have to do
with these is just compromise.
| | 10:40 | If you are going to style, the
unordered lists and the ordered lists have
| | 10:43 | the same issue, then you are just
going to have to compromise on your formatting.
| | 10:48 | So we have now built the main content
column of our home page and in the next
| | 10:54 | lesson, we'll go ahead and we'll do the sidebar.
| | Collapse this transcript |
| Building a main home page pt. 2: Sidebar content| 00:00 | So now that we've built the main
content for the homepage, we're going to work
| | 00:05 | on the sideBar content.
| | 00:08 | So here in our text editor,
we're in the home-pt2 folder.
| | 00:12 | Our Exercise Files. We have beginning.
html, which has our main content in it,
| | 00:18 | and still has a placeholder for the sideBar.
| | 00:20 | And we have our beginning.css.
| | 00:23 | So we'll go ahead and do our Save As,
so this will be home.html,
| | 00:33 | and in the beginning.css
we'll call this main.css.
| | 00:43 | We'll go ahead and copy and paste
our content from the sideBar,
| | 00:51 | pressing Ctrl+C on the PC keyboard.
| | 00:54 | That would be Command+C on a Mac.
| | 00:57 | And selecting a space where it's
going to get pasted to in the home.html,
| | 01:02 | pressing Ctrl+V or Command+V on a Mac.
| | 01:05 | And I'll go ahead and put in our HTML.
| | 01:09 | This is an image, and has
width and height and alt text.
| | 01:23 | And so this is the URL.
| | 01:25 | So I'll go ahead and just I'm going to
drag it with my mouse. A lot of editors
| | 01:31 | allow you to do that.
| | 01:33 | Other editors, you'll have to
do a cut and paste, and the alt
| | 01:40 | is going to say surfer.
| | 01:48 | And we use h3 for the headings in sideBar
| | 01:55 | and here we got a P and I'll go
| | 02:00 | ahead and copy that into all
the places where it needs to be.
| | 02:11 | And I'll do an end <p> down here.
| | 02:15 | Copy that in all the places that it needs to be.
| | 02:20 | And then we have another image.
| | 02:32 | And we have the image source, and the width.
| | 02:43 | And the height.
| | 02:46 | And the alt, we'll say surfboard.
| | 02:55 | And this is going to be h3.
| | 03:00 | And I'll go ahead and copy
and paste that where it belongs.
| | 03:04 | Copy and paste, and copy and
paste, and we have one more image.
| | 03:26 | I'll drag that, and drag that, and drag that.
| | 03:34 | I'll go ahead and get rid of that.
| | 03:38 | Now, all of these images
are in the images directory.
| | 03:41 | So I'll go ahead and put that in like
that and I'll copy and paste all the
| | 03:49 | places where that goes.
| | 03:53 | And we should have content here. Oops!
| | 03:56 | This doesn't belong there.
| | 03:57 | It belongs there, and alt here is surfer.
| | 04:01 | I'm just betting these are pictures of surfers.
| | 04:03 | We'll look at them, and
see if that needs to change.
| | 04:08 | You can see that over here
that's a surfer and that's a surfer.
| | 04:12 | So that works out good.
| | 04:19 | Looks like we also have
a couple of links in here.
| | 04:22 | I'm going to want to do our links.
| | 04:24 | Yes, here is a link.
| | 04:27 | It says check it out and that looks
like it should be a capital C.
| | 04:37 | I'm going to put the closing </a> there.
| | 04:39 | Make that inside of the period,
because that just seems to be the right way
| | 04:43 | to do it, and cut and paste for that link,
and let's see. Where do we have another link?
| | 04:51 | Yeah, that link was already in there.
| | 04:54 | All right, and here we have another link.
| | 05:07 | I'm going to cut and paste
and there we have it.
| | 05:12 | So that is our HTML for the sideBar.
| | 05:15 | We'll go ahead and tab that in,
and take a look at it in the browser.
| | 05:21 | Save, go into our browser, and drag
the home.html into the browser,
| | 05:34 | and there we have our sideBar content.
| | 05:36 | Look at that, and notice that our
links have picked up that styling, because
| | 05:40 | we put it in the whole content <div>, and
it looks like our image is neatly formatting.
| | 05:47 | If we look over here in our reference
website, we'll see that the images that
| | 05:51 | are photographs have a border
around them and they're all indented.
| | 05:56 | And there is a border on
this photograph down here too.
| | 05:58 | So I want to put those
styles in the style sheet.
| | 06:07 | So coming over here to our style sheet,
we'll go down to the bottom of the sideBar.
| | 06:11 | There is the sideBar and I want to
put this in at the bottom down here.
| | 06:15 | And I'll say sideBar, which is our
id selector for the sideBar, and we'll say image.
| | 06:23 | So this will affect all images within
the sideBar and we'll give them a little
| | 06:27 | bit of a left margin 0 and 25 pixels.
| | 06:33 | So that will make it 0 top to bottom,
and 25 pixels on the left and the right.
| | 06:38 | And if we save that, we'll see that all
of our images are now indented properly.
| | 06:45 | And there they go.
| | 06:47 | Now what we want to do is put a
border on these photograph ones.
| | 06:52 | So I'll go first into our XHTML and
we'll create a class selector here
| | 07:00 | and call it photo.
| | 07:03 | And I'll go ahead and copy that and
we'll put it in this one down here too.
| | 07:10 | So we have class="photo" on the ones
that are photographs, but not on the one
| | 07:15 | that's a product picture, and we'll save.
| | 07:22 | We'll go into our CSS and we'll create
another selector sideBar image.photo.
| | 07:33 | And this will have the border 1px
solid and it will be this dark gray.
| | 07:43 | And then we want a little bit of
padding on the inside of the border.
| | 07:46 | Remember that padding is on the inside of
the border and margin is on the outside.
| | 07:53 | We've already created our margin, and
now we just need a little padding to give it
| | 07:57 | that air between the image and the border.
| | 08:02 | If we look over here, we'll see there is
a little bit of space between the image
| | 08:05 | and the border and we reload here,
and we'll see that we have exactly that.
| | 08:11 | So that's our sideBar.
| | 08:13 | That was pretty easy, wasn't it?
| | 08:14 | Now that we have that template and we
have all these styles already in the style sheet,
| | 08:18 | it's getting to be
easier and easier to build the pages.
| | Collapse this transcript |
| Creating a page with a menu, graphics, and formatted links| 00:00 | So now we are going to build the Gear
page and this is the product page for the
| | 00:06 | Groundswell surf shop.
| | 00:08 | You will notice it has this menu here
with the different types of products that
| | 00:14 | are available and it has this month's
specialties and it has got a sidebar.
| | 00:22 | The sidebar is pretty much setup. We
have had all of these types of elements
| | 00:26 | before, so there won't be
much work to get that going.
| | 00:31 | So let's get started.
| | 00:32 | Here we have our text editor
and we are in the gear folder.
| | 00:36 | We have the template and the
beginning.css and the text.
| | 00:41 | So in the template we'll go ahead and Save As.
| | 00:44 | This will be gear.html and the
css we'll save that as main.css.
| | 00:57 | There is a couple of things
we are going to do start with.
| | 01:00 | We are going to change the title,
which is going to be Groundswell Gear.
| | 01:06 | So we'll just take out that part and
we'll put in the word Gear and save.
| | 01:12 | Now, in our menu, we are going to
change the current from the Home to the gear,
| | 01:23 | and so that will update the menu.
| | 01:26 | Then our middle banner here is going to
change from home to gear, and over here
| | 01:33 | it will say check out our gear and the alt.
| | 01:40 | So we'll save this and let's go take a
look in the browser and see how we are doing.
| | 01:44 | Go ahead and drag the gear.html,
| | 01:52 | and we have the middle banner
and our menu looks right.
| | 01:57 | We have the ID banner there.
| | 01:59 | It looks like we are all ready to go.
| | 02:01 | It matches what's over here. Excellent!
| | 02:06 | Now, we'll take our content and
all of this part here and copy.
| | 02:15 | Ctrl+C on the PC, Command+C on the Mac,
over here, and paste that in right here.
| | 02:23 | I'm going to go ahead and indent that.
| | 02:28 | So this is already HTML-ified.
| | 02:30 | We don't need to go through
that exercise more than once.
| | 02:33 | There are some elements
here that are worth noting.
| | 02:36 | So we'll save this and we'll go ahead
and take a look at this in the browser and
| | 02:40 | see what we are talking
about and there we have it.
| | 02:43 | Now, there is a little bit
of formatting work to do here.
| | 02:46 | We have the main content.
| | 02:48 | This part here looks fine.
| | 02:50 | This is supposed to be the menu with the
images and so we'll see how to do that.
| | 02:56 | Down here, this is supposed to be side by
side with the formatting for that part.
| | 03:02 | So let's go ahead and first we'll
start with the menu here that's got some
| | 03:07 | trickery involved, over here to our
css, and down at the bottom of our
| | 03:15 | main content for the sideBar,
go ahead and enter a new section
| | 03:22 | called gear subnavigation.
| | 03:31 | We have a ul called gearSubNav.
| | 03:39 | We'll see that in our XHTML here.
| | 03:42 | That's this ul here.
| | 03:48 | So we'll select that and we'll give
it a width, and again, I have already
| | 03:55 | measured some of this stuff, so it
makes it go a little quicker in the movie.
| | 03:59 | The margin, this is to
center it, and list-style: none,
| | 04:08 | so it makes it no longer a
list. We have seen that trick before.
| | 04:20 | I will select the li and it floats
left and margin and padding set to 0.
| | 04:29 | We have seen this trick before.
| | 04:31 | Here comes the good stuff.
| | 04:40 | Copy the selector, so we don't have to
type it again, and make this the a and
| | 04:47 | so this will select these anchor
tags in here, these links.
| | 05:00 | width: 70 pixels.
| | 05:04 | That's the size of the image.
| | 05:06 | Height is 20 pixels, font-family.
| | 05:13 | This is one we haven't seen before.
| | 05:15 | Orator, Std, Orator, sans-serif.
| | 05:25 | So this Orator Std actually does
exist on a lot of PCs out there and
| | 05:30 | that's this font here.
| | 05:37 | font-size: .9em, text-align: center,
| | 05:45 | padding-top: 100 pixels.
| | 05:50 | So that gives us room for the image up here.
| | 05:54 | So this is formatting the text now
and this gives us room for the image up there.
| | 05:59 | Margin-right is 20 pixels, and
that gives the space in between them.
| | 06:12 | Border: none, and display: block.
| | 06:20 | So that it makes it a block element.
| | 06:22 | All right. So we'll go ahead and save this
and you will see what we have done so far.
| | 06:30 | There are some other steps to this,
but there we have the space for them.
| | 06:36 | See that this one wrapped around and
that's because it doesn't fit, because it
| | 06:39 | has this margin on the right of it.
| | 06:41 | We have a selector in the last one
that says last, and so we are going to go
| | 06:48 | ahead and use that selector to
get rid of that margin on the right.
| | 07:04 | So that's the class selector, .last,
and we just say margin-right: 0.
| | 07:13 | Save that and reload in here,
and now we have this formatting.
| | 07:18 | We have space for the images.
| | 07:20 | We look over here on the site as it's
supposed to be, we have space for the
| | 07:24 | images there, and now all we
have to do is put in the images.
| | 07:28 | Now, the images go like this.
| | 07:34 | Go ahead and copy this selector,
because we are going to use it, and instead of last,
| | 07:40 | I'm going to have boards,
and copy it and make four more of them.
| | 07:48 | So we have boards and
swimwear and wetsuits and etc.
| | 08:02 | Save that and if you will notice
we have all this classes. We have boards,
| | 08:06 | swimwear, wetsuits and etc.
| | 08:08 | You see this one has got two and
that's how you do two classes in a
| | 08:12 | class attribute in XHTML.
| | 08:19 | Now, inside of this,
we are going to put the image.
| | 08:24 | So in this one we are going
to put background url..images.
| | 08:32 | We know about that. rollovers,
because there is a subdirectory in there for these,
| | 08:37 | board-off.jpeg and no-repeat,
center top, semicolon.
| | 08:47 | So we are going to copy all of this
and I'm going to paste it in these.
| | 09:00 | Just change the name from board
to swim and wetsuit and sandals.
| | 09:15 | Because this is what
the images are called.
| | 09:18 | Go ahead and save that.
| | 09:20 | If we look at that in the
browser now, there is our images.
| | 09:24 | We don't have the rollovers yet,
but you can see we are getting there.
| | 09:28 | Now for the rollovers, this is really
easy. We simply take all of this and copy it
| | 09:35 | and paste it there.
| | 09:42 | And we put in the hover pseudo selector.
| | 09:52 | I'll paste that into each of these places.
| | 09:55 | Then all of these that say off, I'm
going to change them to on, on, on,
| | 10:02 | on, and on.
| | 10:06 | So when I save this and we reload,
we see that this now looks exactly how
| | 10:13 | it's supposed to look.
| | 10:14 | You see the rollovers?
| | 10:21 | And looking at it over here,
that's exactly how it is.
| | 10:26 | So that's how we do those rollovers.
| | 10:29 | Next, we are going to setup this sales
box and that's pretty straightforward.
| | 10:39 | First, we have the floating image and
we'll notice here that, get down here,
| | 10:47 | we have this floating image, which has a
class leftFloatImage, and so we'll create
| | 10:53 | a section here for the gear sales box.
| | 11:02 | All right. So it's img.leftFloatImage
| | 11:10 | and float: left, padding:
| | 11:16 | 15 pixels.
| | 11:18 | I'll go ahead and save this
and take a look in the browser.
| | 11:23 | There we have that image floating to
the left and now we just need to do the
| | 11:26 | style for this part and we are done.
| | 11:32 | So we have this div id of gear
description and that's going to float to the right.
| | 11:40 | DivgearDesc, and that will float right.
| | 11:47 | It has a width:
| | 11:50 | 260 pixels and a top padding of 20 pixels.
| | 11:56 | So we'll save there and go ahead and
look at it in the browser and that's
| | 12:02 | exactly what it's supposed to look like.
| | 12:05 | See it's down a little bit from the image.
| | 12:07 | Now we need to format that heading.
| | 12:20 | div#gearDesc h3.
| | 12:27 | We have a font-family
of Georgia, serif.
| | 12:33 | font-size: 1.2em.
Color is this color here, c47500.
| | 12:45 | It has a bottom border.
| | 12:53 | And padding on the bottom,
.2em, and margin of 0.
| | 13:02 | So we'll save here and reload in the browser.
| | 13:06 | Now it's really starting to get
to where we need it to get to.
| | 13:11 | So the paragraph has to be in this font,
all of these paragraphs get in this font,
| | 13:16 | and then we have this
pricing piece that looks like about it.
| | 13:24 | div#gearDesc, this will be p and
this simply has the font-family:
| | 13:38 | Trebuchet MS, and sans-serif,
| | 13:44 | and a font-size: 0.8em.
| | 13:50 | Then the price paragraph,
copy the selector.
| | 14:00 | It has a price class selector.
| | 14:06 | text-align to the right
and font-size: 1.2em.
| | 14:15 | Go ahead and save.
| | 14:21 | Yes, there we go.
| | 14:22 | So that looks exactly like what
it's supposed to look like here.
| | 14:29 | Line this up at the bottom of the page,
we should have -- yeah, there we go.
| | 14:33 | So now we just need to do the
sideBar content and that should be
| | 14:40 | really straightforward.
| | 14:41 | I don't think there is any
special formatting there at all.
| | 14:43 | Go ahead and copy that and
paste it in the document.
| | 14:55 | Indent it, save, and load, and
there we have our sidebar content.
| | 15:06 | Now we are looking pretty much
exactly like we are supposed to look.
| | 15:10 | We have our rollovers here.
| | 15:15 | We have our this month's special and that
looks exactly like it's supposed to look.
| | 15:23 | So that's our Gear page, and it was a
bit of doing, but that's how it's done.
| | Collapse this transcript |
| Creating a page containing an ordered list| 00:00 | So now we're going to setup the
Lifestyle page for the Surfing Lifestyle.
| | 00:06 | This is what it looks like.
| | 00:08 | It has this little menu at the top.
| | 00:10 | It has this ordered list down here.
| | 00:12 | We'll be sure to check
that in Internet Explorer.
| | 00:15 | So, let's go ahead and get started.
| | 00:18 | Here's our template and this is all
in the lifestyle folder in the Exercise Files,
| | 00:23 | and our beginning.css and the
lifestyle.txt, so we'll do our Save As.
| | 00:28 | This will be lifestyle.html and our
beginning.css that becomes main.css and
| | 00:42 | lifestyle.txt that doesn't need
to get saved as anything.
| | 00:45 | I can go ahead and put this in our
copy buffer now, pressing Ctrl+C or
| | 00:50 | Command+C on a Mac.
| | 00:51 | Now before we do anything else, we're
going to change the title, Groundswell
| | 00:58 | Lifestyle, and we'll come down here
and we'll move our current down to
| | 01:06 | lifestyle, <class="current">, I'll
need that other quote also, there it is.
| | 01:16 | We'll change the banner to the
lifestyle_banner. Go ahead and save.
| | 01:24 | Let's load this up in the
browser and see where we are.
| | 01:26 | We still have our Gear page there.
| | 01:29 | Drag the lifestyle.html and there we have it.
| | 01:36 | Now we have the banner. We might
want to change the alt text on the banner.
| | 01:41 | That should say, live the lifestyle.
| | 01:52 | Now let's paste in our content, which
we already in our copy buffer, pressing
| | 01:57 | Ctrl+V, or Command+V on a
Mac, and there's the content.
| | 02:05 | We'll tab that in and save and go
ahead and take a look in the browser.
| | 02:17 | Most of this is good.
| | 02:18 | We just need to format this menu here.
| | 02:27 | So, go up in here and take a look,
and that is leftMenu, a class called leftMenu.
| | 02:33 | So come over to our CSS and
that's in the mainContent.
| | 02:43 | Come down here and
we'll put in a little section.
| | 02:49 | main content left menu.
| | 02:54 | In case we ever want to use it again.
| | 03:00 | There is our selector, and it
has the Trebuchet font-family.
| | 03:16 | We'll set the margin-top to 0.
| | 03:19 | It gets a styling for the anchor.
| | 03:32 | So the color of that
would be this color here.
| | 03:38 | We used that color before.
| | 03:39 | Then the hover changes the color.
| | 03:43 | Copy and paste, hover and the color
becomes b36b00 and border none, because
| | 03:57 | otherwise it gets a border by default.
| | 03:59 | That dashed border at the bottom.
| | 04:01 | Just save this and look in the browser,
and there we have our menu looking just
| | 04:07 | how it's supposed to look there.
| | 04:09 | That's for the left side.
| | 04:10 | Let's go ahead and do the right side now.
| | 04:11 | It's in our sideBar text.
| | 04:17 | We'll copy, using Ctrl+C or Command+
C on a Mac, and put this down here in
| | 04:23 | the sideBar.
| | 04:26 | And the indent. Looks like we missed
the end of the ol, so I'll just go ahead
| | 04:31 | and add that here now.
| | 04:34 | Be sure to have selected all of
that when you select it, and see that
| | 04:37 | I didn't select it in there.
| | 04:38 | So I'll just type it in and we'll
save, and go ahead and look at it in
| | 04:45 | the browser.
| | 04:46 | So, all this is fine except this
ordered list here and so that needs to
| | 04:50 | get formatted.
| | 04:52 | So we'll go into the CSS and come down
here in to the sideBar section, get to
| | 04:57 | the end of the sideBar section, and
we'll put in the sideBar ordered list
| | 05:06 | formatting, and sidebar li formatting.
| | 05:14 | So the ordered list is going to get this
Trebuchet font-family, so I'm going to
| | 05:17 | go ahead and copy that from up
there, because that is easy to do.
| | 05:23 | We have a font-size: 0.8 em, color.
| | 05:30 | This is all supposed to be in the li,
so I'll just move it down there.
| | 05:34 | My mistake, it goes there.
| | 05:37 | So, it's got the gray color, and
the margin of 0.2 em up and down,
| | 05:43 | and 0.5 em right and left.
| | 05:46 | Then in the outer ol element. There's
just a margin here, 0.5 em, 0, 1.5 em, and 0.
| | 05:57 | So top is 0.5 em, then right is 0,
bottom is 1.5 em, and the left is 0.
| | 06:05 | That lines things up on the left
margin with that padding in the sideBar
| | 06:11 | outer container.
| | 06:12 | So go ahead and save this
and take a look in the browser.
| | 06:16 | There we have it.
| | 06:17 | It looks just lovely.
| | 06:20 | We really want to see is what it looks
like in IE. Let's compare it to how it is
| | 06:24 | in our reference site,
and that looks about right.
| | 06:27 | So let's go ahead and load up
Internet Explorer, and see what we get there.
| | 06:37 | Drag the lifestyle.html file into
Internet Explorer, scroll on down, and yes,
| | 06:45 | there the numbers are missing
entirely; all we have are those periods.
| | 06:49 | So, we can see that those numbers
are entirely missing and we just have
| | 06:53 | the periods.
| | 06:54 | So the problem is that Internet
Explorer and in the way that it uses CSS to
| | 07:00 | format ordered list and unordered lists,
| | 07:04 | it doesn't follow the specification.
| | 07:06 | It has a bug and this bug has
existed in every version of IE that I've
| | 07:10 | tried that supports CSS.
| | 07:13 | People talk about it on the Internet.
| | 07:15 | It's a very well known bug.
| | 07:17 | For some reason Microsoft
has never chosen to correct it.
| | 07:21 | So what you have to do is you have to
satisfy the formatting requirements of
| | 07:25 | Internet Explorer without
making the other browsers too ugly.
| | 07:29 | All the other browsers follow the
standard and they all look exactly like
| | 07:32 | Firefox does here, with this formatting.
| | 07:35 | So what we have do is we just need to
push this over to the right a little bit
| | 07:39 | and make sure that it's not too far
for Firefox, so that it looks reasonable
| | 07:44 | in both browsers.
| | 07:45 | It's never going to be exactly
what you want in both browsers.
| | 07:48 | So I'm going to go ahead
and go back into our CSS.
| | 07:53 | In this ordered list, in the right-
hand number, which is the left margin,
| | 07:59 | remember they're clockwise from the top,
so it's top, right, bottom, and left.
| | 08:04 | I'm going to put in one and a half ems.
| | 08:06 | So I'll save that and come over here
into Internet Explorer and load it up.
| | 08:14 | Now, we can see the numbers,
and it looks reasonable here.
| | 08:18 | So I'll go over into Firefox and reload that.
| | 08:24 | We can see that it moves over to the
right a little bit farther than as I had liked,
| | 08:28 | but it's still reasonable.
| | 08:29 | So this is a reasonable solution here.
| | 08:32 | We had to do the same thing you
remember on the homepage, with this
| | 08:35 | unordered list.
| | 08:37 | So here we are on the Lifestyle page,
dealing with this issue again with
| | 08:41 | an ordered list.
| | 08:42 | So our page is now done
and that's our Lifestyle page.
| | 08:46 | We have formatted all the
pieces we have to format.
| | 08:49 | You can see as we move along here,
it gets easier and easier, because we're
| | 08:52 | reusing a lot of the same styles.
| | 08:54 | This is one of the powerful features of
CSS is that as you go along building the site,
| | 08:59 | you build up a library of styles,
and those are reused over and over,
| | 09:03 | saving you a lot of work and
creating a consistent look for the website.
| | Collapse this transcript |
| Creating a page containing video| 00:00 | Our final page in the website is the
video's page and it looks like this.
| | 00:04 | It has an embedded video in it
that's embedded from YouTube.
| | 00:08 | This is a very common way to do
videos on websites these days.
| | 00:12 | I want to show you how to do this well.
| | 00:15 | You can embed videos with a
number of different technologies.
| | 00:17 | The advantage of using a service
like YouTube is that they do the video
| | 00:21 | hosting and they have this lovely
player, this Flash Player, which has
| | 00:26 | different features.
| | 00:28 | It will do full screens.
| | 00:30 | It works very, very well, and it's
embeddable on your site with a minimum of
| | 00:34 | trouble, and so it saves you the
trouble of paying for the hosting of your
| | 00:38 | videos and saves you the trouble of
building or acquiring in some sort of a
| | 00:43 | player that will work on a variety of
platforms that YouTube player works on.
| | 00:48 | All the different platforms
that you need it to work on.
| | 00:51 | So, this is the technique
that we'll be showing you here.
| | 00:54 | Let's go ahead and build the page.
| | 00:59 | Here is our text editor and we have
template.html, which we're going to save as
| | 01:05 | videos.html and beginning.css,
which we'll make main.css and the videos.txt,
| | 01:11 | which has the text for the content
on the main and sideBar, which is very
| | 01:15 | little trouble, because we have
created all these styles already.
| | 01:18 | So let's go ahead and do our Save As.
| | 01:20 | So we'll save the template as videos.
html and the CSS gets saved as main.css
| | 01:34 | and in the videos.txt, we
don't need to do a Save As.
| | 01:36 | So, we'll go ahead and change the title,
which is Groundswell TV, and we make our
| | 01:46 | current videos like that so that our
menu works right, and the banner gets
| | 01:54 | switched to videos,
| | 02:02 | and the alt text says Groundswell TV.
| | 02:07 | So we'll save all of that and take a
look in the browser and make sure it's
| | 02:13 | what we want, and grab the videos.
html and drag it into the browser
| | 02:23 | and there we have it.
| | 02:24 | So, we have the main menu looking
right and we have the ID banner all set up,
| | 02:31 | and we are ready to go with the content.
| | 02:33 | So, let's go to the videos text and copy
and paste, pressing Ctrl+C on my PC keyboard.
| | 02:40 | That will be Command+C if you are on a Mac.
| | 02:43 | And pressing Ctrl+V or Command+V to
paste and I'll go ahead and tab this in and
| | 02:50 | then we'll go ahead and get the sideBar
content, because there is just really very
| | 02:54 | little involved here on either of these.
| | 02:54 | The fun part is going to be the YouTube part.
| | 03:01 | Tab that in, go ahead and save, and
load it up in the browser and take a look,
| | 03:07 | and there we have it.
| | 03:09 | Now, we just want to paste in that
YouTube, so I have it loaded up here in my
| | 03:13 | YouTube channel on YouTube.com, and
over here is the Embed link and I'm going
| | 03:19 | to bring up the Customize for the options.
| | 03:22 | I'm going to show the options
I had selected. These are not
| | 03:24 | the default options.
| | 03:26 | You want to uncheck the Include related
videos unless you really want that and
| | 03:30 | what that does is at the end of your
movie it displays related videos in the
| | 03:35 | browser and you want Show Border Off,
which I think is the default, and
| | 03:40 | I checked this Enable delayed cookies.
| | 03:42 | Normally, YouTube will give your
clients cookies and whenever they come to the
| | 03:47 | site and they view an embedded video,
they will get cookies in their browser,
| | 03:50 | and some people don't like that and
they don't really benefit them anyway.
| | 03:54 | They benefit YouTube in many ways,
but that's not my concern here.
| | 03:58 | And so, what I do is I check this box
and that means that the cookies will not
| | 04:02 | be put in their browser until they
actually get to the YouTube.com site.
| | 04:06 | So, if they bring up YouTube.com,
YouTube will give them cookies and
| | 04:09 | they are expecting that.
| | 04:10 | On your website, they don't really
expect to get YouTube cookies and so
| | 04:14 | they won't.
| | 04:15 | Then I select the size. Now we would
select the smallest size. You will notice
| | 04:18 | that the embedding code here
changes as I select different sizes.
| | 04:23 | I select the smaller size and
we are actually going to change that after
| | 04:25 | we embed it.
| | 04:26 | So, I'll go ahead and press Ctrl+C to
copy and again that's Command+C on a Mac
| | 04:33 | and then come over here to our text
editor and it's going to go right here,
| | 04:39 | and press Ctrl+V or Command+V, and
look at the size of that thing that
| | 04:43 | it pastes in there.
| | 04:44 | This is gigantic. It's 456 columns out
here and so we are going to fix that.
| | 04:50 | Now you don't have to do this.
| | 04:51 | This actually will work fine the way that it is.
| | 04:54 | I find it unweildy and I do want
to make some changes, so I'm going to go
| | 04:58 | ahead and reformat this a little bit.
| | 05:00 | This doesn't affect how it works, but
it makes it easier for me to work with.
| | 05:06 | So, I'm going to come out here and
I'm going to take this end tag here,
| | 05:10 | because there is no content at all,
and I'm just going to make that an XHTML
| | 05:14 | ending like that.
| | 05:15 | I'm going to do that on
each of these param end tags.
| | 05:20 | Now, the space between the tags, this
new line between the tags, gets ignored by
| | 05:27 | the browser entirely.
| | 05:28 | That doesn't put anything on the screen.
| | 05:30 | It doesn't affect how it works at all.
| | 05:33 | Go ahead and indent that a little bit,
and likewise any formatting on the
| | 05:40 | insides of these tags.
| | 05:42 | I want to do that there and then close
the object, and that is a container, and
| | 05:51 | we'll go ahead and indent all of this,
because that's a sweet thing to do and
| | 05:55 | now this is all reformatted
and it's still fully functional.
| | 05:59 | Go ahead and save this and load
it up in the browser and make sure
| | 06:03 | it's working.
| | 06:04 | Go to our page and reload. You will get
this Flash Player security warning
| | 06:11 | and this won't happen when you
upload your website to a server.
| | 06:14 | It's only happening because you are
running it on your local computer.
| | 06:17 | It's going out to the Internet to
get the content, so Flash gives you the
| | 06:22 | security warning and you can just say
OK, and now because I waited so long to
| | 06:27 | say OK, the Flash Player wants to make
sure that there is not a problem and so
| | 06:32 | it's giving you this warning here,
because it says the script is running too slowly.
| | 06:36 | But it's not really. We just
waited a while to press that button.
| | 06:38 | So, you can say no, you don't want to
abort the script, and there we have it.
| | 06:43 | So, you will notice that it's too big
for the space, so we are going to fix that
| | 06:48 | and also going to give it just a
little bit of formatting around the video to
| | 06:53 | make it look more like this, which is
very nice and fits nicely in the space,
| | 06:57 | and it's got a little margin at
the bottom, and that's what we want.
| | 07:01 | So, we'll go ahead and do this with some
CSS and this will just go down here in
| | 07:08 | our miscellaneous section,
and say div#youtubeVideo,
| | 07:18 | and we'll just put in a margin around it.
| | 07:23 | 20 pixels and zero, and 20 pixels
and 30 pixels, and that will
| | 07:29 | put some margin around that.
| | 07:32 | Then in the XHTML,
we'll put in a div around this
| | 07:41 | with an id=youtubeVideo.
| | 07:46 | I'm going to put in the end div
down here and indent a little bit.
| | 07:54 | And then finally I want to make the
video a little bit smaller, so it fits on
| | 07:57 | the screen, so I'm going to use
some different dimensions here.
| | 08:00 | I'm going to change this in the YouTube.
This is the code that we copied and
| | 08:04 | pasted from YouTube.com.
| | 08:06 | I'm just going to change this
to be 420 wide and 260 high.
| | 08:10 | I have done this math already
for you, so I know this fits.
| | 08:18 | You have to change it in two places,
and so we do that and then save, and
| | 08:27 | go ahead and reload this in the browser.
| | 08:29 | We'll get the security warning again,
and just say OK, and there it is.
| | 08:37 | See that fits just perfectly.
| | 08:44 | I'm going to pause that.
| | 08:45 | It looks exactly like it does in
the reference site and we are done.
| | 08:49 | So, that is our website.
| | 08:52 | We have formatted all of the pages.
| | 08:55 | They all look and work exactly like
we need them to do and we have used CSS
| | 09:00 | positioning instead of tables, so that
our site will work well across platforms,
| | 09:06 | and it will load up quickly, and
it's easy to format and change around.
| | 09:10 | A lot easier than working with tables.
| | 09:12 | So our site is complete.
I want to take a moment and thank
| | 09:15 | Mr. James Williamson who designed the
original version of this site, and wrote all
| | 09:20 | the clever copy that you see here as well.
| | Collapse this transcript |
|
|
