IntroductionPreviewing the final project| 00:04 | Hi! I'm Chris Converse, and this is a
course on creating a responsive web design.
| | 00:07 | I want to start by showing the final
project of what we're going to be creating.
| | 00:11 | We're going to be building this design that
we see here in the background, and I want
| | 00:14 | to point out some of the
features of this responsive design.
| | 00:17 | First, if I take the browser and open it up,
we're going to lock the design down to 980
| | 00:21 | pixels so that the design will center
in the available space on large screens.
| | 00:26 | And when we bring the browser size down under
980 the design is going to start to become fluid.
| | 00:31 | So we can see the columns wrapping.
| | 00:33 | In the center, we can see the typography
moving around. And when we get under certain break
| | 00:37 | points, like right here, we're going to start
shifting the design completely using CSS3 media queries.
| | 00:43 | So you'll notice here that we have a much
smaller heading at the top, a smaller logo.
| | 00:48 | We've even rearranged the promos to have the
type show up underneath of the graphics instead
| | 00:52 | of on the right-hand side.
| | 00:54 | So I'll extend this and open again to look
at the large screen, and down to medium.
| | 01:00 | Notice we have a navigation bar here
showing up under the header as well.
| | 01:04 | On medium screens we actually space the
navigation down a little bit. Assuming that we might be
| | 01:07 | on a tablet device,
| | 01:08 | we want to give users enough room
to tap these with their fingers.
| | 01:11 | And if we bring the design down even further under
500 pixels, we switch into a mobile screen view.
| | 01:18 | We have a much smaller heading
graphic at the top, a smaller logo.
| | 01:23 | We have our promos showing up as
vertically stacked items instead of in columns.
| | 01:27 | And also notice that we have the navigation now
shifted down to be underneath all of the content.
| | 01:32 | On mobile devices we want to have the content
show first so that users can see the content,
| | 01:36 | swipe down to the bottom with their fingers, and then
tap on individual links to go further into your site.
| | 01:42 | Now all of this is being achieved through CSS.
So if I open this up, we can see the navigation
| | 01:46 | will jump down from being from the bottom to
under the header, and then up to a large screen.
| | 01:52 | Now, during the course, we're going to be examining
a sketch, which is going to give us our content
| | 01:56 | strategy for how we're going to change our
design from large, medium, and small screens,
| | 02:00 | and give us an idea on where we're
going to position individual elements.
| | 02:03 | And once we know all of the individual
elements we have in place, we're then going to move
| | 02:07 | over to Photoshop where we can take a Photoshop
file, slice up individual graphics, and then
| | 02:12 | build an HTML file with individual containers,
and then have those individual graphics assigned
| | 02:18 | into the individual HTML containers using CSS.
| | 02:21 | This is going to give us two distinct
advantages in this particular approach.
| | 02:25 | One, we're going to have the
ability to have a CSS space layout
| | 02:29 | that can have its design
modified through media queries.
| | 02:32 | And secondly, we can offer something called
responsive delivery, meaning we can actually
| | 02:36 | send less data to people on small and
medium screens than on large screens.
| | 02:41 | And to illustrate that point,
I want to come back to Safari.
| | 02:44 | So inside of Safari here,
I'm in the large screen view.
| | 02:46 | I'm going to right-click, bring up an inspection tool,
come under Network Requests, and then hit Reload.
| | 02:53 | What I want to look at in here is all of the data
that's being downloaded for this large screen.
| | 02:57 | So here I can see we have the large banner
graphic, and if I look at the Size column,
| | 03:02 | I can see the size of every graphic that's
being requested at this particular size.
| | 03:06 | If we were to add all these up,
we'd come up with about 180 kilobytes of data.
| | 03:10 | So let's come back to Safari.
| | 03:12 | I'm going to move this down to the medium screen
view, come back to our diagnostic tool, hit Reload.
| | 03:18 | I can see now that we're bringing
in the medium-sized banner graphic.
| | 03:22 | And again, if we look at the Size column
here and added these up, we come up with about 73
| | 03:26 | kilobytes of data.
| | 03:29 | Come back to Safari.
Let's bring this down to the smallest screen.
| | 03:34 | Let's reload this.
Now we can see a few extra graphics.
| | 03:36 | We have a mobile link arrow to give us
those mobile links dials at the bottom.
| | 03:39 | We're using our small banner.
| | 03:41 | And again, if we were to add up all of the
sizes in that particular column, we would come
| | 03:45 | up with about 32 kilobytes.
| | 03:47 | So we're looking at approximately 83% less
data when somebody looks at the exact same
| | 03:52 | user experience on a small-screen
device versus a large-screen device.
| | 03:57 | So I hope this course sounds
interesting to you, and if so, let's get started.
| | Collapse this transcript |
| About the exercise files| 00:00 | When you download the exercise files,
there's going to be five folders inside of there.
| | 00:04 | If you're a Premium subscriber to the
lynda.com online training library, you'll have access
| | 00:08 | to all five folders.
| | 00:09 | If not, you'll have access
to folders 1, 2, and 4.
| | 00:12 | These are the minimum number of files
that you'll need to complete the course.
| | 00:16 | Inside of folder 1 is Files to add. This is
going to give us a series of blank CSS files
| | 00:21 | and a mostly empty HTML file.
| | 00:23 | I provided these just to make sure we're
all working from valid HTML and CSS files.
| | 00:30 | Inside of folder 2 is a Skip Photoshop folder.
| | 00:32 | Inside of the Images to add, we have a copy
of all of the final files we're going to be
| | 00:36 | making for graphics inside of Photoshop.
| | 00:38 | So if you want to skip the Photoshop aspect
and just continue with the HTML and CSS, you
| | 00:43 | can add the graphics from this folder here.
| | 00:46 | Inside of folder 3 are the art templates.
| | 00:48 | These are the source Photoshop files we're
going to be using to customize and complete
| | 00:52 | the individual slices.
| | 00:54 | Inside of folder 4 are two files we're going
to be using as snippets, so we can cut and
| | 00:58 | paste to some pieces of code into our project.
| | 01:00 | And then finally, inside of folder 5 is a
copy of the final project we looked at in
| | 01:05 | the introduction video, so you can use this file to
track how you're doing throughout the course.
| | 01:10 | Now that we're familiar with the exercise
files, next we'll talk about what software
| | 01:13 | you're going to need to complete the course.
| | Collapse this transcript |
| Exploring the software you'll need to complete this course| 00:00 | Now, throughout this course we're going to
be coding our HTML and CSS, so I recommend
| | 00:04 | using a text editor.
| | 00:05 | There is a whole series of available text
editors for both Macintosh and Windows. Some
| | 00:09 | are paid, some are free.
| | 00:11 | So here is a list of some of the
most popular ones on both platforms.
| | 00:14 | You can also use more visually oriented web
tools, like Adobe Dreamweaver for example.
| | 00:19 | You just need to have
access to the source code.
| | 00:21 | So no matter what tool you're using,
there has to be some area where you can get to the
| | 00:24 | source code of the HTML.
| | 00:26 | We're also going to be using Adobe Photoshop
to create some of our graphics, and you'll
| | 00:29 | need to have at least CS2 or later, since we
need to have access to the Slicing tool in
| | 00:33 | order to create some of
our optimized graphics.
| | 00:36 | Now, as a special note to Dreamweaver users,
we're going to be talking about how you can
| | 00:40 | set up Dreamweaver in the next chapter so that
you can actually follow along in Dreamweaver.
| | 00:45 | So once you have a text editor set up that
you can use for this course, we'll continue
| | 00:48 | by creating our project files.
| | Collapse this transcript |
| Beginning your project| 00:00 | To begin our project, let's
create a folder on the desktop.
| | 00:03 | We'll name this myWebsite.
| | 00:06 | I'm going to open this up and
put it over here on the side.
| | 00:14 | Now, with our folder created,
let's come back to the exercise files.
| | 00:17 | Let's go into folder 1.
| | 00:19 | Let's grab the CSS folder and the HTML file.
| | 00:22 | Let's drag a copy of these into
that folder we just created.
| | 00:24 | Now, as I mentioned earlier, most of
the content in these files is empty.
| | 00:28 | I just wanted to make sure that we all had a
properly formatted HTML and CSS file to work from.
| | 00:33 | Inside of our myWebsite folder,
let's create another folder, called images.
| | 00:37 | I'm going to open this up.
| | 00:41 | Let's come back to our exercise files.
| | 00:44 | Let's close up folder 1 and let's
go into folder 2, Skip Photoshop.
| | 00:49 | Let's open up Images to add, and let's come
in here and select all of these individual
| | 00:53 | graphics, and let's drag a copy of
these into the images directory.
| | 00:57 | So these will give us a series of images that
we can start from. And later on, if you want
| | 01:01 | to skip the Photoshop chapter, you can just skip
that and go right back to the HTML and CSS.
| | 01:06 | But if you want to follow along in the
Photoshop chapter, we'll actually customize some of
| | 01:09 | these graphics based on the images you
want to change inside of Photoshop.
| | 01:14 | So once all of these files are in place,
close up my exercise files. Now on the desktop we
| | 01:19 | have our myWebsite folder, we have the
CSS folder and then an index.html file.
| | 01:25 | Now in the next chapter we're going to talk
specifically about how to set up Dreamweaver
| | 01:28 | to follow along in this course.
| | 01:30 | So if you're not going to be using
Dreamweaver as your authoring tool, you can skip ahead
| | 01:33 | to chapter two and continue on.
| | Collapse this transcript |
|
|
1. For Those Using DreamweaverWhat to expect with Design view in Dreamweaver| 00:00 | For those of you who are going to follow along using
Adobe Dreamweaver, I want to point out a few things.
| | 00:04 | First of all, Dreamweaver CS5 and later have
full support for HTML5 and CSS3, but it has
| | 00:10 | this full support in the code area only.
| | 00:13 | So the preview area inside of Dreamweaver
doesn't have full support for rendering HTML5
| | 00:17 | and CSS3 while you're
actually working on your course.
| | 00:21 | So in this screenshot here, this is what Dreamweaver CS5
and 5.5 will look like when you finished your project.
| | 00:27 | You'll notice that you don't
see the heading area at all.
| | 00:30 | The logo is off to the right-hand side.
| | 00:32 | The navigation appears down below the footer,
and the navigation actually extends past the
| | 00:36 | outer page container.
| | 00:39 | Now, if we look at the copy of our final project
inside of Dreamweaver CS6, we'll see that this
| | 00:43 | actually looks a little bit closer.
| | 00:45 | We do see the heading area, we see the
navigation in the right position, but the logo is off
| | 00:49 | to the right and the width of the navigation
element still extends past the overall page container.
| | 00:54 | Now these rendering issues only affect
Dreamweaver inside of the design preview.
| | 00:59 | So if we come back to our final project,
I'm going to open up the index.html file up in
| | 01:02 | Dreamweaver CS5.5, and this is what we're
actually seeing here in the design preview.
| | 01:07 | But if I come up here and click on the Live
View, what Dreamweaver will do is use it's
| | 01:11 | built-in WebKit rendering engine and render this
page exactly as we would see it in our web browsers.
| | 01:17 | So once I turn on Live view, I can
see the design comes into place.
| | 01:21 | I can scroll down and see all of the
design elements are properly being rendered.
| | 01:26 | I can change my window size and see the
medium size, and then close this all the way down
| | 01:31 | and see the mobile size.
| | 01:33 | So while we're in Live view, Dreamweaver will
show us exactly what this design will look
| | 01:37 | like inside of our Preview mode.
| | 01:39 | But when I come out of Live view we'll go
back to Dreamweaver's default rendering for
| | 01:43 | the preview area.
| | 01:45 | So as you're working along in Dreamweaver,
don't take what you see in the design preview
| | 01:49 | area as the final rendering of your page.
| | 01:51 | Make sure you switch into Live view or preview in
a browser to see how your project is progressing.
| | 01:56 | And next, we'll talk about how to access code
inside of Dreamweaver for both HTML and CSS files.
| | 02:00 |
| | Collapse this transcript |
| Accessing code for HTML and CSS in Dreamweaver| 00:00 | Now inside of Dreamweaver, when you have your
HTML file open, you'll see in the top left-hand
| | 00:04 | corner you have three buttons here.
| | 00:06 | We have Design, which gives us our Design
view here; a split-screen view, where selecting
| | 00:11 | this will actually take
the HTML file and split it--
| | 00:14 | half the screen will be the HTML code, the
other half will actually be the design preview--
| | 00:18 | And then we have a Code view here which will give
us full code access to the file we're working on.
| | 00:24 | This is going to be the mode that you're
going to want to work in following this course.
| | 00:27 | There is another nice feature inside of
Dreamweaver and that is, at the very top of the document,
| | 00:32 | you can see all of the related files up here.
| | 00:34 | So as we hook in different CSS files, clicking
on these items here will then change Dreamweaver
| | 00:39 | to show you the source code
for the linked CSS file.
| | 00:44 | Now, this can be really handy because you can
jump through different CSS files rather quickly.
| | 00:49 | You can also go to the File menu and choose
Open and select the CSS files in addition.
| | 00:55 | If you do that, you'll see the individual files
opened up here next to the index.html file.
| | 01:00 | So inside of Dreamweaver, you can open the
individual files or you can get access to
| | 01:04 | them by clicking on the related files tabs.
| | 01:07 | And lastly, when you're coding inside of this
window down here, for example if I come in
| | 01:11 | here and try to access a CSS3 property,
something like border-radius, for example, you can see
| | 01:16 | that Dreamweaver's code
completion will come up.
| | 01:19 | And if I scroll through here, I can
actually see properties like border-radius.
| | 01:23 | So this is a CSS3 property, and we'll get the
same effect in the HTML window for HTML5.
| | 01:28 | So as I mentioned before, we do have support
for HTML5 and CSS3 inside of Dreamweaver, but
| | 01:33 | all of the access to those elements and the code
completion is built only into the code area.
| | 01:39 | So now that you know how to follow along with
this course while working inside of Dreamweaver,
| | 01:42 | next we'll start planning out our project.
| | Collapse this transcript |
|
|
2. Setting Up Your ProjectPlanning your layout| 00:00 | Now before we start building our HTML
and CSS, we need to plan our layout.
| | 00:04 | So what I have inside of folder 3
is a file called A-design.psd.
| | 00:10 | This is a source Photoshop file that will help
you sort of decide the colors in photography,
| | 00:14 | if you want to modify or change the design.
| | 00:18 | So over in the Layers panel here, we have
all of the content here broken into folders.
| | 00:22 | So Promo 3, for example, is this promo
area down here on the right-hand side.
| | 00:26 | And we also have done a few things in here which
will help you sort of style some of the content.
| | 00:31 | We have a link color block here,
and this is clip grouped into the text here.
| | 00:37 | So if I come up to the Layer menu, come down
and say Release Clipping Mask, you can see
| | 00:42 | that this is just a box.
| | 00:46 | Let's re-enable that.
| | 00:47 | Let's go to Layer > Create Clipping Mask. And we
took this box and actually wrapped it inside
| | 00:52 | of a Smart Object.
| | 00:53 | So if I double-click this link color, what
we've done is take the Smart Object, duplicated
| | 00:57 | it all around the canvas, and
used it as our linking color.
| | 01:00 | So if I came in here, for example, and changed
the orange to green and hit Save in the Smart
| | 01:05 | Object, notice in the background, all of the
individual links that we've clip grouped into
| | 01:10 | type now change to green.
| | 01:12 | This gives us a really quick way to sort of
mock up what our linking colors are going
| | 01:15 | to look like for our client.
| | 01:17 | Now, it is worth noting that if you're using
Photoshop CS6, they do have paragraph and
| | 01:22 | character styles in CS6, so you can create
the same linking effect using character styles
| | 01:27 | instead of this clipped-in Smart Object.
| | 01:31 | Inside of the heading area, you'll see that
we've used clipping groups for the main image
| | 01:34 | as well, so I can select this graphic here
and move this around and change to crop of
| | 01:39 | the photograph at the top.
| | 01:40 | So again, this file is here to help you
customize the photography and link colors and the promo
| | 01:44 | graphics for your project.
| | 01:47 | Now, I am going to be touching on more web
tools built into Photoshop when we get to
| | 01:50 | the graphics section.
| | 01:52 | But if you want to learn more about using
Photoshop for web design, I suggest taking
| | 01:56 | Justin Seeley's course in lynda.com online
training library entitled Photoshop for Web Design.
| | 02:02 | And now since this design comp gives us a
pretty good idea on the colors and the basic
| | 02:06 | structure, I want to bring up a sketch, so we
can take a look at how we're going to migrate
| | 02:10 | this design across different screen sizes.
| | 02:12 | We're going to start by
creating a main page container.
| | 02:15 | Inside of the page container, we're
going to have an area for the header.
| | 02:18 | This is going to have a background
graphic with our photograph at the top.
| | 02:21 | We're going to have a navigation area and
article area, a promo container, and inside
| | 02:27 | of the promo container, we're going to have
three individual promo containers for each
| | 02:30 | individual promo, and then our footer.
| | 02:33 | And as you can see, as the highlights are moving
around on the sketch, you can see where these
| | 02:37 | individual containers are going to be
placed based on the user's screen size.
| | 02:41 | And now that we know all of the main HTML
containers that we need, next we can start
| | 02:45 | working on our HTML file.
| | Collapse this transcript |
| Adding the main HTML containers| 00:00 | Now to create our HTML containers, we're going
to open up the index.html file in the myWebsite
| | 00:05 | folder up in your chosen text editor.
| | 00:08 | Now inside here, we have
just a standard HTML document.
| | 00:10 | We have the declaration here at the top.
| | 00:13 | We have our HTML tag, which contains
everything inside of the document.
| | 00:16 | Then we have the heading
area and then the body area.
| | 00:19 | So for right now, we're going to
focus on inside of the body area.
| | 00:23 | Select this comment here that says "content
goes here," delete that, and now let's create
| | 00:27 | the containers for our layout.
| | 00:30 | We're going to start by creating a div tag.
| | 00:32 | We're going to set a class="page."
| | 00:37 | Let's end that tag and then end the div.
| | 00:40 | Let's split this open.
| | 00:42 | This is going to be the main page container.
| | 00:44 | Now inside here, we're going to create the
individual containers to hold the content.
| | 00:49 | We're going to start by
creating a header element.
| | 00:51 | This is an HTML5 element.
| | 00:52 | Let's hit a few returns.
| | 00:57 | Let's add an article element.
| | 01:00 | That's another HTML5 element.
Let's hit a few returns.
| | 01:03 | Next, we're going to create a div that's
going to be our promo container. So type div.
| | 01:09 | Let's set a class of promo_
container and the tag and the div.
| | 01:17 | A few more returns.
| | 01:19 | Another HTML5 element called nav.
| | 01:24 | Let's end that tag.
| | 01:26 | And then finally,
one more element called footer.
| | 01:30 | So right now, the HTML5 elements here
are header, article, nav, and footer.
| | 01:35 | And then here we have the standard
div, with the class of promo_container.
| | 01:40 | Now that we have our outermost containers
created, next we'll create the individual
| | 01:43 | containers for each promo
inside of the promo_container div.
| | Collapse this transcript |
| Adding the promo containers| 00:00 | Next, we'll set a container
for each individual promo.
| | 00:03 | So let's get our cursor inside of the
div with the class of promo_container.
| | 00:06 | Let's split that open.
| | 00:09 | Inside, let's add another div, set
class="promo," end the tag and the div.
| | 00:19 | Next let's come in here and copy this.
| | 00:20 | Let's hit a few more returns,
and let's paste two more of these.
| | 00:27 | Now with all of our content containers in
place, next we'll start adding in some content.
| | Collapse this transcript |
| Adding links and the copyright| 00:00 | So now we're going to add some links
and texts into our content containers.
| | 00:03 | So let's come down here to the header element.
Let's split that open.
| | 00:07 | And we're going to create our
logo out of an anchor link.
| | 00:10 | So let's start by typing an
anchor tag. Let's hit a space.
| | 00:14 | Let's set a class of logo, then hit a space.
| | 00:19 | Let's add an href.
| | 00:20 | We're going to set that equal to a # sign,
which is a self-link, and then end the tag
| | 00:25 | and then end the anchor tag.
| | 00:27 | So again, this is just a standard anchor link,
and we're going to turn this into a logo by
| | 00:31 | giving it dimensions and giving it a
background graphic of the actual logo.
| | 00:35 | Next, we'll come down to
the navigation element.
| | 00:39 | Let's split that open, and in here we're
going to add four links for our main navigation.
| | 00:43 | So let's start with an anchor tag.
| | 00:44 | We're going to set href equal to a # sign.
| | 00:48 | Let's end the tag.
| | 00:52 | We'll type in "About Us" and the anchor tag.
| | 00:55 | I'm going to select this entire link.
| | 00:59 | I'm going to paste this a few more times.
| | 01:02 | And the second one, let's
change About Us to Services.
| | 01:10 | The next link we'll call Portfolio.
| | 01:17 | And then lastly, we'll
call this one Contact Us.
| | 01:22 | And then let's come down to the footer.
| | 01:25 | Let's split that open, and let's
just add a copyright for our website.
| | 01:29 | So ©, hit a space, and then just type
Your Organization Name.
| | 01:39 | Now that we have links in our heading and
navigation area and a copyright statement,
| | 01:43 | next we'll open up a snippet and put some
placeholder text in some of the other containers.
| | Collapse this transcript |
| Adding sample content into the HTML containers| 00:00 | Now, I've prepared a snippet of a bunch of
placeholder text that we can place into some
| | 00:03 | of these other containers.
| | 00:05 | So from your text editor, choose File > Open.
| | 00:09 | Locate your exercise files.
| | 00:11 | Let's go into folder 4 called Snippets,
and let's open Placeholder-Text.html.
| | 00:14 | Now, inside this file I have
groups of placeholder text.
| | 00:20 | So up here, on line five, we
have the article settings.
| | 00:23 | So let's come in here and select from the beginning
h1 tag all way out to the ending paragraph tag.
| | 00:28 | Let's copy this to the clipboard.
| | 00:31 | Let's switch back to index.html, and inside
of the article element, let's split that open.
| | 00:37 | Let's paste our content in here.
| | 00:38 | I'm also going to format this a
little bit so we can see the structure.
| | 00:43 | So inside of article we have
an h1 and a paragraph tag.
| | 00:46 | Let's switch back to our placeholder text.
| | 00:49 | Let's come down here under Promo 1.
| | 00:53 | Let's copy the content div and
everything inside of there.
| | 00:57 | Copy that to the clipboard.
Switch back to index.html.
| | 01:00 | I am going to scroll up here
and find the first promo div.
| | 01:05 | Split that open. Let's paste
our content inside of there.
| | 01:08 | I am going to format that a little bit.
| | 01:13 | Let's come back to our placeholder text.
| | 01:16 | Let's copy all of the content for Promo 2.
| | 01:19 | Copy that to the clipboard.
| | 01:22 | Let's find the second promo container.
| | 01:25 | Let's paste all of our content in here.
| | 01:27 | I'll format that. Back to our placeholder text.
| | 01:33 | Let's copy all of the content for Promo 3.
| | 01:37 | Copy to the clipboard. Back to index.
| | 01:40 | Let's find the third promo element,
| | 01:42 | split that open, and paste
our content inside up there.
| | 01:48 | So now we have a placeholder text inside of
the article element and we have placeholder
| | 01:51 | text inside of each one of the promo elements.
| | 01:53 | At this point, save your file.
| | 01:55 | Let's come back out out to the operating system and
let's open our index.html file up in a web browser.
| | 02:00 | So, in the web browser we'll see all
of the HTML content showing up here.
| | 02:04 | So this is a very well-
structured HTML document.
| | 02:07 | We don't have any CSS in place, so we're not
seeing any design aspect, but we have all
| | 02:10 | of our document structure in place.
| | 02:13 | Now, in the next chapter we're going to work
inside of Photoshop, creating our web graphics,
| | 02:17 | customizing some of our slices,
and saving those graphics out.
| | 02:20 | If you want to skip the Photoshop session,
you can go right from here over to chapter
| | 02:23 | four and continue with the HTML
and CSS portion of this course.
| | Collapse this transcript |
|
|
3. Creating Web GraphicsCreating and slicing multiple-sized banner images| 00:00 | Now the first set of graphics we're going to create
are going to be the three different banner sizes.
| | 00:04 | So let's come back to the exercise files.
| | 00:07 | Let's open up folder 3,
and let's open up banner-artwork.psd.
| | 00:09 | Now, if you take a look in the Layers panel,
on this file you'll see that we have three
| | 00:15 | different Smart Objects here.
| | 00:17 | Each Smart Object is clip
grouped into a black square.
| | 00:21 | So to see what the clipping group does,
I'll select the middle one here,
| | 00:24 | come up to the Layer menu, choose Release
Clipping Mask, and then you'll see the original
| | 00:29 | photograph here not clipped inside of the
black box that you can see in the background.
| | 00:33 | So this gives us a really nice way to
non-destructively crop our images.
| | 00:38 | So let's come back and
re-enable that clipping mask.
| | 00:42 | And if I move the photograph around while
it's clipped, you'll see that the photograph
| | 00:45 | will remain inside of that black box area.
| | 00:48 | So the black boxes I created on those
individual layers match the sizes of the graphics we
| | 00:53 | want to have in our final project.
| | 00:55 | Now, if you want to modify the artwork inside
of the banners, double-click on one of these
| | 01:00 | Smart Objects and Photoshop will bring up the
original graphic inside of that Smart Object.
| | 01:04 | So here we can see the original graphic here.
| | 01:06 | I'm going to come in here
and just make a change.
| | 01:09 | I'll just invert the image.
| | 01:11 | Once the image is inverted, I'll come up here
and choose File > Save, and then notice that
| | 01:16 | every instance of the Smart Object on the
background canvas will update based on the
| | 01:20 | changes I make here.
| | 01:21 | So I'm going to undo that change, hit Save.
| | 01:25 | So inside of here you can copy and paste your
own artwork and then again customize the banners
| | 01:29 | with whatever content you want.
| | 01:32 | Once that's complete, what we're going to
do next is create slices on here so that we
| | 01:35 | can save out individual graphics
from this one single Photoshop canvas.
| | 01:39 | So let's come over to the Cropping tool.
| | 01:42 | Let's click and hold, and let's come
down and select the Slicing tool.
| | 01:45 | So the Slicing tool allows us to click and
drag an area on this canvas that can be saved
| | 01:50 | out as a separate graphic from
the overall Photoshop file.
| | 01:54 | So let's bring our cursor to the upper
left-hand corner of the larger banner.
| | 01:57 | Let's click and drag and draw out a slice.
| | 02:00 | Now, the tool will be a little sticky so it
should stick to the actual black box underneath.
| | 02:07 | Once we've drawn the slice, let's double-
click and bring up the slice properties.
| | 02:10 | So inside here we can give our slice a name
and make sure of the dimensions as well.
| | 02:15 | So for the name let's call this banner_large.
| | 02:20 | Let's come down here and make sure that this is set to
980 pixels wide by 275 pixels tall, then click OK.
| | 02:28 | Back in our canvas, let's draw
a slice for the medium size.
| | 02:33 | Once the slice is drawn, double-click.
| | 02:38 | We'll call this banner_medium and make sure this
is set to 800 by 200 pixels. Let's choose OK.
| | 02:47 | Let's come down and draw one final
slice for the small banner, double-click.
| | 02:53 | We'll call this banner_small,
and this should be set to 500 x 75.
| | 02:59 | So this kind of stuck to 74 so I can
just type in 75 and click OK here.
| | 03:04 | Now that we've got our slices
drawn, let's come up to the File menu.
| | 03:08 | Let's choose Save for Web & Devices.
| | 03:10 | If you're using Photoshop CS6,
this menu will simply say Save for Web.
| | 03:17 | This is going to bring up a large dialog box
where we can pick individual slices and pick
| | 03:21 | compression settings and file
formats for each of our slices.
| | 03:25 | So in this main area here I'm just going to zoom
out a little bit so we can see all three slices.
| | 03:31 | So I'm going to select the top slice here,
and on the upper left-hand corner here I can
| | 03:34 | see I'm on my Slice tool.
| | 03:36 | With this slice selected in the right-hand
side, I can pick the file format, so I can choose
| | 03:40 | GIF, JPEG, two different PNG files, or a Windows
bitmap, and I can choose the quality over here.
| | 03:46 | So for this one we're going to come in
here and make sure we have JPEG set.
| | 03:49 | And for the Quality since this is the large
size on computers, what we're going to do is
| | 03:53 | set that to 80% quality.
| | 03:56 | Now, in the lower left-hand corner Photoshop
will show me exactly how big this file is
| | 04:00 | going to be when we save this out.
| | 04:02 | So this particular JPEG is
going to be 150.8 kilobytes.
| | 04:07 | Let's come into the canvas area
and select the medium banner.
| | 04:11 | We're going to make sure this is set to JPEG
as well, and in here we're going to set the
| | 04:15 | Quality down to 50%.
| | 04:18 | We're probably on a tablet device for this
particular size, and tablet devices have a
| | 04:22 | much higher pixel density on their screens, so we can
get away with compressing this a little bit more.
| | 04:27 | And this is going to be only 41
kilobytes if we look down in the file size.
| | 04:32 | Next, we'll come into the main
canvas, select the smallest banner.
| | 04:36 | Set that to a JPEG file.
| | 04:37 | These are going to be used mostly on phones,
which again have a higher pixel density and
| | 04:41 | much smaller screens as well, so we can get
away with even more file compression here.
| | 04:45 | So let's set this down to 30%.
| | 04:49 | That's going to give us a
7.3 kilobyte file size.
| | 04:53 | And once we're done here,
we're going to come down and click Save.
| | 04:58 | This next dialog wants to know where to
save the files and which particular slices.
| | 05:02 | So let's start at the bottom. Under Slices,
| | 05:04 | let's come down here and
choose All User Slices.
| | 05:06 | This tells Photoshop only the slices that you've
actually drawn are the ones we want to save.
| | 05:13 | And up in the file structure let's come in
and pick myWebsite, and let's pick the images
| | 05:16 | directory, and then we'll hit Save.
| | 05:20 | Now, we already have the graphics in there
because we added them at the beginning of
| | 05:23 | the course, but if you've made changes or
any customizations, we want to replace those
| | 05:26 | individual graphics.
| | 05:28 | So we'll come over here, click Replace, and
have Photoshop overwrite the graphics we added
| | 05:32 | with the new ones we just created.
| | 05:35 | Now, at this point, let's choose File > Save.
| | 05:38 | All of your slices are actually saved with
this Photoshop file, so we can always go back,
| | 05:42 | make additional changes, and just do a Save for Web
and update your slices as many times as you want.
| | 05:47 | And now I'll close this file.
| | 05:49 | Next we'll create the remaining artwork
for the rest of the elements in our design.
| | Collapse this transcript |
| Exporting content and template artwork| 00:00 | Next, we're going to create the graphics for
the promos or logos and the little arrows
| | 00:04 | that we're using for our links.
| | 00:06 | So inside of the Art Templates folder in the
exercise files, let's open up content-artwork.psd.
| | 00:10 | Now, if you have your Slice tool selected,
you'll see the individual slices here.
| | 00:17 | So this is a case where we have a
Photoshop file with the slices already saved.
| | 00:21 | So, as you can see, those slices are
actually saved with each Photoshop file.
| | 00:25 | Now over on the right-hand side, in the Layers
panel here, I have a layer at the bottom called fpo.
| | 00:30 | I'll just turn this on real quick so we
can see behind these individual graphics.
| | 00:33 | These are going to be saved out as
24-bit PNGs, so they are transparent.
| | 00:37 | So I have this gray layer here so
we can actually see the artwork.
| | 00:40 | So I'm going to zoom up in here.
| | 00:43 | With our Slice tool selected,
we can see the individual slices.
| | 00:46 | I can double-click on one of
these, for example, and see promo_1.
| | 00:49 | This is set to 60 pixels by 60 pixels.
| | 00:52 | Over in the Layers panel, I have all of
these areas grouped into different folders.
| | 00:57 | So inside promo images, we have each one of these
clip grouped into three squares at the bottom.
| | 01:02 | We have our background pattern, which I
can see over on the right-hand side here.
| | 01:08 | We have two styles of arrows.
| | 01:09 | I'll move the canvas over
here a little bit and zoom up.
| | 01:14 | This one right here we're going to be using
as a CSS sprite and we'll talk about that
| | 01:17 | a little bit later.
| | 01:18 | And this is our mobile arrow, so this is the
arrow we're going to use on small screen devices.
| | 01:23 | I'm going to zoom out a little bit.
| | 01:27 | Back in the Layers panel, inside of logo, I have
three different sizes of the logo as well.
| | 01:31 | So again, you can come in here and
customize any of this artwork.
| | 01:35 | So to save this out, let's make
sure we turn off the fpo layer.
| | 01:38 | I'm going to zoom out. Let's choose File >
| | 01:43 | Save for Web & Devices. And all of the
optimization settings are saved with these, so if I select
| | 01:48 | the large logo here, come over here to the
right, we can see that this is set to a 24-
| | 01:51 | bit PNG, which is going to give us 16 bits
of color, plus 8 bits of transparency, so
| | 01:56 | we'll get a nice gradient mask or
semi-transparent pixels on the drop shadow.
| | 02:01 | These graphics up here are all set to JPEGs.
| | 02:04 | The background pattern is set to a JPEG.
| | 02:07 | These small arrows here are
both set to PNGs as well.
| | 02:10 | So from here, let's come
down and choose File > Save.
| | 02:13 | Under Slices, let's make sure All User Slices
is selected. Up in the operating system, let's
| | 02:18 | choose myWebsite, the images
directory, and then hit Save.
| | 02:22 | Here we can see a list of all of the graphics
that are going to be modified from Photoshop
| | 02:26 | based on these individual slices.
| | 02:28 | So we'll come over here and click Replace and then
Photoshop will overwrite all of those graphics.
| | 02:34 | Once that's complete, we can
save and close this file.
| | 02:36 | Now that we have all of the graphics created
that we're going to be referencing with our
| | 02:39 | CSS files, next we'll work on
hooking the CSS files into the HTML file.
| | Collapse this transcript |
|
|
4. Preparing the HTML FileLinking CSS files for all screen sizes| 00:00 | Now, we're going to add two of our four CSS
files into our document using standard CSS links.
| | 00:06 | So inside of the index.html file
opened up in your text editor,
| | 00:10 | up in the heading area, we're going to
get our cursor after the Title tag.
| | 00:14 | Let's hit a return.
| | 00:16 | Let's start a new tag.
| | 00:18 | This is going to be a link tag.
| | 00:19 | Let's hit a space.
| | 00:21 | Let's set an attribute
of rel, for relationship.
| | 00:24 | We're going to set that equal
to "stylesheet," then a space.
| | 00:30 | The next attribute is called type.
"text/css" is the value, then a space.
| | 00:39 | Next, we'll set href, and here we want to point
to the screen_styles.css file that's inside
| | 00:45 | of the css folder,
| | 00:46 | so we'll type "css/screen_styles.css."
Then after that attribute, hit a space, forward slash,
| | 01:00 | and then end the tag.
| | 01:02 | And that screen_styles.css contains CSS rules that
we're going to use for all of the different layouts.
| | 01:09 | Next line, let's add another link.
| | 01:14 | Relationship is "stylesheet," type
| | 01:28 | is "text/css," href="css/screen_layout_large.
css," and then end that tag.
| | 01:34 | So now that we have links to our two base
CSS files, next we'll add links to the two
| | 01:38 | remaining files, but we're going to
put those inside of CSS media queries.
| | Collapse this transcript |
| Linking CSS files based on screen size with media queries| 00:00 | Now, we're going to link in two additional
CSS files, but we're going to put this inside
| | 00:03 | of CSS3 media queries.
| | 00:06 | So after our screen_large_
layout.css, let's hit a return.
| | 00:10 | Let's add another link tag.
We'll type rel="stylesheet," type="text/css".
| | 00:21 | The next attribute is going to be media="".
| | 00:28 | Inside of the quotes for media, we're going
to type "only screen and" Then we're going
| | 00:35 | to put a beginning and ending parenthesis.
Inside of the parentheses, we're going to
| | 00:39 | type min-width:50px, for 50 pixels.
| | 00:47 | Outside of the parentheses, we're going to
type "and," another of set of parentheses,
| | 00:52 | and inside of the second set of parentheses,
we're going to type, max-width:500px.
| | 01:00 | After the media attribute, let's hit a space.
| | 01:03 | We'll type href and in here we're going
to type "css/screen_layout_small.css".
| | 01:16 | Outside of the attribute, forward
slash, and then end the tag.
| | 01:21 | So basically, what's happening here is if the
screen size is between 50 pixels, all the way
| | 01:26 | up to a maximum of 500 pixels, the browser
is going to use the CSS rules located in the
| | 01:32 | screen_small_layout.css.
Now, let's copy this entire link.
| | 01:39 | Let's hit a return.
Let's paste it on the next line.
| | 01:41 | Let's come in here and let's select the 50
pixels here and change that to 501, so that
| | 01:47 | it's one pixel larger than the
largest screen for the small size.
| | 01:52 | And then for our maximum width,
let's change 500 to 800.
| | 01:55 | Now, if the browser's width is between 501 and 800,
we're going to change the screen_layout_small to screen_layout_medium.
| | 02:03 | And now that we have our small and medium
screens hooked in through media queries, next
| | 02:08 | we'll look at enabling Internet
Explorer 7 and 8 to understand HTML5.
| | Collapse this transcript |
| Enabling Internet Explorer 7 and 8 to understand HTML5| 00:00 | Now, we're going to add support for IE 7
and 8 so that they can understand HTML5.
| | 00:05 | So I have the snippet in the
Snippets folder to do this.
| | 00:07 | So let's choose File > Open.
| | 00:10 | From the exercise files,
let's go into folder 4 - Snippets.
| | 00:13 | Let's open up B-Google-...-Shiv.html.
| | 00:16 | Now, inside of here we have a link to a Google html5shiv,
and we have the conditional statement here for IE.
| | 00:25 | Let's select and copy
these three lines of code.
| | 00:27 | Let's come back to index.html, and after the
medium CSS media query, let's hit a return and
| | 00:34 | let's paste these in.
| | 00:37 | So basically, this entire item here is an HTML5
comment, but inside here, with the brackets,
| | 00:43 | this is a conditional structure that
only Internet Explorer understands.
| | 00:47 | So basically, this says if the browser is
less than IE 9, which means IE 7 and 8, we're
| | 00:54 | going to link in this
JavaScript here from Google.
| | 00:56 | So this JavaScript basically loads in to IE
7 and 8 and explains to IE 7 and 8 how to
| | 01:02 | render HTML5 elements, elements such as the
header tag here and the article tag that we're
| | 01:07 | using in our layout.
| | 01:10 | And since this entire instruction is inside
of an HTML comment, other browsers will just
| | 01:13 | ignore this altogether.
| | 01:16 | So now that we've added HTML5 support for IE
7 and 8, next we'll actually work on the
| | 01:20 | viewport scaling to make sure that the viewport
size doesn't scale on tablets and mobile devices.
| | Collapse this transcript |
| Setting the viewport scale| 00:00 | Now, one of the great things about mobile web
browsers is they have the ability to take
| | 00:03 | a full-size web page and scale them down
so that they fit on a very small screen.
| | 00:08 | This gives users the ability to pinch and
zoom onto the content in order to read it.
| | 00:13 | The idea behind responsive design is to take
that same content and rearrange the layout
| | 00:18 | so that they don't have to pinch and zoom, and the
layout actually fits or conforms to the screen size.
| | 00:23 | Now, in order to do this, we need to add a
line of HTML code to tell the browsers what
| | 00:27 | to do with the viewport on page load.
| | 00:30 | So back in our HTML file,
let's find the line for our meta tag.
| | 00:35 | At the end of the line, let's hit a
return and add in another meta tag.
| | 00:41 | So after meta, let's hit space, type name="".
| | 00:46 | Inside of the quotes, type viewport.
| | 00:52 | After that attribute, let's hit a space
and add a second one, called content.
| | 00:57 | So inside here, what we're going to do is
set "width=device-width, maximum-scale=1.0,
| | 01:21 | minimum-scale=1.0, initial-scale=1.0."
| | 01:35 | Outside of the attribute, space,
forward slash, and end the meta tag.
| | 01:40 | So this tag is going to target the viewport
here and then we're going to set the width
| | 01:43 | of the viewport to whatever the device is
and the initial scale, which is on page load.
| | 01:49 | Now, we have a minimum and maximum scale here.
| | 01:52 | These are optional, but they will make sure that on
some devices the scale won't change on orientation.
| | 01:58 | So when somebody rotates between portrait
and landscape, the scaling won't be modified.
| | 02:01 | So now with our viewport set, next we can
start working on some CSS rules for the content.
| | Collapse this transcript |
|
|
5. Creating CSS Rules Across All ScreensAdding the background pattern and the page container color| 00:00 | Now the first CSS file we're going to
work in is going to be screen_styles.css.
| | 00:04 | So from your text editor, choose File > Open.
| | 00:08 | From the myWebsite folder, let's go into the
css folder and open up screen_styles.css.
| | 00:14 | Now, the first rule we're going to
target in here is going to be the body tag.
| | 00:19 | So we'll type body, beginning and ending bracket.
Split those open.
| | 00:25 | First property, we're going to set color.
| | 00:27 | This is going to be the color of the type.
| | 00:30 | We're going to set that to #575c7A;.
Next line, we're going to set the line-height to 1.5 ems.
| | 00:45 | Next line, we're going to set
font-family: set that to Arial;
| | 00:53 | Next line, we're going to
set font-size to 14 pixels.
| | 00:59 | Next line, we're going to
set the background property.
| | 01:02 | Now, we're going to use shorthand style here,
which is first going to define the background
| | 01:06 | color, then a graphic, then the repeating settings,
and then the position settings for the graphic.
| | 01:11 | So we're going to start with background color,
which is going to be our sort of blue color.
| | 01:17 | So #515673, then a space.
| | 01:21 | Then we're gonna type url ().
We're going to use a background graphic.
| | 01:28 | Now inside of the parenthesis for url,
we're going to target the images directory.
| | 01:32 | Now, we're inside of the css directory, so we need ../ to
come out to root, then images/background_gradient.jpg.
| | 01:50 | Outside of the parentheses,
we're going to set the repeat settings.
| | 01:54 | We're going to set the repeat-x so
it only repeats on the horizontal.
| | 01:59 | Zero pixels for the X position and 0 pixels
for the Y position, then a semicolon.
| | 02:05 | Next CSS rule. .page, we're going to
target the overall page container.
| | 02:15 | Beginning and ending
bracket, split those open.
| | 02:18 | First, we're going to set a
maximum-width of 980 pixels.
| | 02:25 | That way when our browser gets wider than 980,
the size will lock down and then we can center the page.
| | 02:30 | Next line, we're going to set margin.
| | 02:34 | We're also going to use shorthand style here.
| | 02:36 | So the first property is top, then
right, then bottom, then left.
| | 02:40 | So for the top margin,
we're going to set 0 pixels, hit a space.
| | 02:44 | Next, we'll type auto.
That's for the right.
| | 02:47 | Zero pixels for the bottom
and then auto for the left.
| | 02:53 | Last property, we're going
to set position to relative.
| | 02:59 | That way anything that we position inside of the page
area will position itself relative to this object.
| | 03:05 | This is going to give us the
ability to position that nav bar.
| | 03:08 | Let's hit a return. And then finally, we're going
to set our background color to white, so #fff.
| | 03:15 | Then we'll hit Save.
| | 03:17 | To see what our work looks like so far,
let's come back out to the operating system.
| | 03:22 | Let's open this up in a browser.
| | 03:25 | Once you hit Reload, we'll see the
page area here defined in white.
| | 03:28 | We'll see the background gradient graphic.
| | 03:30 | We'll see the background
color down here at the bottom.
| | 03:33 | And if we open and close our browser, we'll
see that the design locks at 980 and just centers.
| | 03:39 | Now that we have our background and page container
styled, next we'll work on styling the headings.
| | Collapse this transcript |
| Styling the headings| 00:00 | Next, we're to create some
styles for our headings.
| | 00:03 | So after the page class, let's hit a return.
| | 00:05 | Let's start with an h1,
beginning and ending bracket.
| | 00:10 | First, we're going to set font-size.
| | 00:12 | We're going to set this to 2 ems.
| | 00:16 | So the reason that we're setting ems here is we
want all of the font sizes to be proportional
| | 00:21 | based on the base font.
| | 00:23 | So we're going to use a base font size of 14
pixels and then for every other font size
| | 00:27 | after this, we're going to set this with
ems, and these are proportional-based,
| | 00:31 | so 2 ems will be two times the base font.
| | 00:34 | So that will give us roughly 28 pixels.
| | 00:37 | Next, we're going to set font-weight.
We're going to set this to normal.
| | 00:41 | We don't want our h1s to be bold.
| | 00:44 | Next, we're going to set color, #a6430a;.
Next, we're going to set margins.
| | 00:55 | We're going to set 0 on the top, space, zero
on the right, space, .5 ems on the bottom,
| | 01:04 | space, and then 0 on the
left, then a semicolon.
| | 01:10 | Next line, we're going to set an h2.
| | 01:14 | Put in our brackets.
| | 01:15 | Font-size, we're going to set this to
1.7 ems, so 70% larger than the base font.
| | 01:22 | Next, we're going to set margin.
| | 01:25 | 0 on the top, 0 on the right, 1
em on the bottom, and 0 on the left.
| | 01:30 | Now, we're not going to set font-weight because by
default browsers will make heading text bold.
| | 01:35 | Next line, h3, beginning and ending bracket.
We're going to set font-size to 1.5 ems, so
| | 01:46 | 50% larger than the base font.
| | 01:49 | We're going to set margin to 0 on the top,
0 on the right, 1 em on the bottom, and 0
| | 01:54 | on the left, semicolon. Let's hit Save.
| | 01:58 | Let's come back out to our operating system.
| | 02:02 | Let's reload this in the browser.
| | 02:03 | So now, we can see the headings styled based
on the CSS rules, including the reddish-brown
| | 02:08 | color and the not-bold style of the
heading 1 tag here at the top.
| | 02:13 | So now with our headings styled, next
we'll work on the paragraph and anchor tags.
| | Collapse this transcript |
| Styling the body text and the links| 00:00 | Next, we're going to set rules
for our paragraph and anchor tags.
| | 00:03 | So on the next line, let's start
with a p tag. Put in our brackets.
| | 00:09 | We're going to set a margin for this: 0
on the top, 0 on the right, then .75 ems on
| | 00:16 | the bottom, and 0 on the left.
| | 00:19 | Next, anchor tags,
beginning and ending bracket.
| | 00:23 | Let's set color to # de9000;.
| | 00:34 | Next line, let's set the hover state, so we're
going to add a pseudo-class onto the anchor
| | 00:38 | tag, so :hover, space.
| | 00:42 | This will be the color of the links when
the user rolls over those text links.
| | 00:47 | We're going to set color to
#009eff;. Choose File > Save.
| | 00:55 | Let's come back out to our browser.
Let's reload this again.
| | 01:00 | Now, with the margin changed on the paragraphs, we'll see
that the .75 ems shows up here underneath each paragraph.
| | 01:06 | We see our link color showing up in orange
and when we roll over these, they show up
| | 01:09 | in a light blue.
| | 01:10 | Now, with our paragraph and anchor tags
styled, next we'll work on the footer.
| | Collapse this transcript |
| Styling the footer| 00:00 | Next we're going to style the footer.
| | 00:01 | Let's hit a return.
| | 00:03 | I'll type footer,
beginning and ending bracket.
| | 00:08 | The first property here is going to be font-size.
| | 00:10 | We're going to set that to .85 ems.
| | 00:14 | That's going to give us a 15% smaller
font size than the base font. Then a space.
| | 00:19 | We're going to set color to #9ba0bd; space.
| | 00:29 | We're going to set background-color, and we're going
to set the background color to the same as the body.
| | 00:33 | So let's come up here
and just copy that color.
| | 00:37 | Let's come down here and
paste it, then a semicolon.
| | 00:42 | That way the footer will actually look like it's
outside of that main content page container. Then a space.
| | 00:49 | We're going to set padding: 10 pixels on the
top, 10 pixels on the right, 10 pixels on
| | 00:57 | the bottom, and 0 pixels on the left.
| | 01:01 | Save our work, come back to the operating
system, and let's reload this in a browser.
| | 01:06 | On the browser, we can
see our footer down here.
| | 01:08 | Since we set the padding to 0 on the left,
the copyright lines up now with the page container
| | 01:13 | and we can see that background color.
| | 01:15 | Since the gradient is much taller than the
amount of content we have in here so far,
| | 01:19 | you can actually see that solid color here.
| | 01:21 | But once we add in more content and this gets
taller, the background color of the footer
| | 01:25 | will match the background down here.
| | 01:27 | If it turns out that your website doesn't
have enough content to go beyond this gradient
| | 01:31 | here, then you can always go back into Photoshop,
change the gradient on the background graphic,
| | 01:36 | and resave out that slice.
| | 01:39 | Now that we have the main content rule styled,
next we'll target these individual links that
| | 01:43 | are inside of the promo areas.
| | Collapse this transcript |
|
|
6. Preparing the HTML FileUnderstanding compound rules| 00:00 | Now, in order to style the anchor links inside
of the promo areas differently from the anchor
| | 00:04 | links that we've defined down here,
we need to add a custom class into the HTML.
| | 00:09 | So let's go back to the index.html file.
| | 00:12 | Let's scroll down.
| | 00:13 | Let's find our promo container, and let's find
the individual links that are inside of the
| | 00:18 | individual promo areas.
| | 00:20 | So for the first anchor link,
we're going to come in here and add a class.
| | 00:27 | Put in the letters CTA.
| | 00:28 | It just stands for call to action.
| | 00:30 | This is just the name that we're making up.
| | 00:32 | So let's come in here
and copy that class name.
| | 00:36 | Let's find the second link
inside of the second promo.
| | 00:39 | Let's paste that in here,
| | 00:40 | and then the same thing for
the third link, then hit Save.
| | 00:44 | Now, what we need to do is write a CSS rule
that's going to target this particular class
| | 00:49 | if it's on an anchor tag.
| | 00:52 | So we're basically going to create a CSS rule that's
going to combine this anchor tag and the cta name.
| | 00:57 | So let's come back to our screen_styles.css.
| | 01:01 | After the footer, let's hit a few returns.
| | 01:04 | The rule we're going to create is going to be
a.cta, then a space, put on our brackets.
| | 01:12 | So, again, what this is doing is targeting anchor
links that have a CTA class assigned to them.
| | 01:18 | That way this differentiates
these links from the ones up here.
| | 01:23 | Now, let's split this open.
I'm going to scroll up here a little bit.
| | 01:29 | So, what we're going to do for these links,
first, we're going to set a text-transform.
| | 01:33 | We're going to set that to uppercase so
that all of those letters will be capital.
| | 01:40 | That way we don't have to actually
have capital letters in our HTML.
| | 01:46 | Next line, we're going to
set font-size to 0.9 ems.
| | 01:53 | Since we're using all uppercase characters,
we want to make the font a little bit smaller.
| | 01:56 | So this is 10 percent
smaller than the base font.
| | 02:00 | Next, we're going to set font-weight.
| | 02:03 | We're going to set that to bold.
| | 02:08 | Next line, we're going to
set text-decoration to none.
| | 02:13 | That way those links won't be underlined.
| | 02:15 | Lastly, we're going to set margin: 0.5 ems on the top,
0 on the right, 0 on the bottom, 0 on the left.
| | 02:25 | Once that's complete, let's save our
work and let's reload this in a browser.
| | 02:30 | Now, in our browser, we'll see that all
these call-to-action links here are showing
| | 02:34 | up with all uppercase, and they're
10% smaller than the base font.
| | 02:39 | Now, one thing you'll notice is that the hover state
is still working and giving us that blue color.
| | 02:44 | This is because the hover state on the main
anchor links is cascading down through our
| | 02:49 | custom class that we've
assigned to these anchor links.
| | 02:53 | Now that we've styled the text aspect of these
links, next we'll add in a background graphic to put in the arrow.
| | Collapse this transcript |
| Styling the promo links with a CSS sprite| 00:00 | Now, to add the arrows to the anchor links,
we're going to add some more properties to
| | 00:03 | that call-to-action rule.
| | 00:05 | So after margin, let's hit a return.
| | 00:08 | First, let's set padding.
| | 00:09 | We're going to set 0 on the
top, 12 pixels on the right.
| | 00:14 | Because we're going to align the arrow to
the right, we want to make sure that the text
| | 00:17 | inside of the anchor link
never overlaps that arrow.
| | 00:21 | Zero on the bottom, 0 on the left.
| | 00:25 | Next line, we're going to set background.
| | 00:28 | First property is url.
| | 00:30 | Inside of the parentheses
for url../images/cta_arrow.png.
| | 00:42 | Next, for the repeat properties, we're
going to type in "no-repeat," then a space.
| | 00:47 | For the X position, we're going to set right.
| | 00:50 | That will align this graphic to the rightmost
edge of the anchor link. Then a space, then
| | 00:55 | 0 pixels for the Y position.
| | 00:56 | Let's hit File > Save.
| | 00:58 | Let's come out to our browser.
Let's hit reload.
| | 01:01 | And in our browser we will see the graphic
showing up inside of each one of the anchor links.
| | 01:07 | So it's aligned to the right-hand side.
| | 01:09 | And the 12 pixels is actually the distance
from the type here to the outermost area here.
| | 01:14 | So, again, that gives us a little bit of padding so that
the background graphic doesn't overlap with the type.
| | 01:18 | Now, the next thing we want to do is add in a
hover state, and we want to shift this background
| | 01:23 | graphic up so that we can have it turn
blue along with the type turning blue.
| | 01:28 | So now this technique is
commonly referred to as a CSS sprite.
| | 01:31 | And the idea here is that we have that
single graphic that we created in Photoshop, and
| | 01:35 | on the hover state, we're going to change
the Y position so that the graphic actually
| | 01:40 | shifts up inside of the anchor area, giving us the
illusion of that arrow changing from orange to blue.
| | 01:46 | So to do that, let's
come back to our CSS file.
| | 01:49 | We're going to start by typing
a.cta:hover, beginning and ending bracket.
| | 01:58 | The only property we're going to set in
here is going to be background-position.
| | 02:01 | We're going to set right for the X position
and -50 pixels for the Y position.
| | 02:10 | If we were to take that slice and measure
the top portion of the arrow that's orange
| | 02:15 | in that Photoshop slice and measure down
to the top of the blue area, we will come
| | 02:19 | up with 50 pixels.
| | 02:20 | So this is the amount we want to shift that
sprite when somebody rolls over one of those
| | 02:25 | call-to-action links.
| | 02:26 | So let's hit File > Save.
| | 02:28 | Let's come back out and
preview this in a browser.
| | 02:31 | So now when I roll over these links,
the illusion is that the arrow is actually changing color,
| | 02:35 | but in reality, what we're doing is taking
that background graphic and shifting it up
| | 02:38 | so that the position of the blue triangle
matches exactly where the orange triangle was.
| | 02:43 | Now that we have our call-to-action link styled,
next we're going to work on the styles inside
| | 02:47 | of the promo areas.
| | Collapse this transcript |
| Styling the promo text| 00:00 | Next, we're going to target the headings
and the paragraphs inside of the promo area.
| | 00:05 | So inside of our CSS file,
let's hit a few more returns.
| | 00:09 | Let's create a compound rule, .promo h3.
| | 00:13 | We want to target h3 tags that are
inside of an element with a promo class.
| | 00:21 | Add our brackets. Then we're
going to set font-size to 1.1 ems.
| | 00:26 | I'll bring the set margin to
0 and then a semi-colon.
| | 00:30 | If we just set one number in the margin,
it will set up for all four sides. Next, .promo p.
| | 00:40 | We're going to target
paragraphs inside of the promo area.
| | 00:43 | Put in our brackets.
| | 00:44 | First, we're going to set
line-height. 1.2 ems, space.
| | 00:52 | We're going to set font-size to .9 ems.
| | 00:57 | Next, we're going to set
margin-bottom to .5 ems, then save.
| | 01:03 | Let's come back out to our browser.
Let's hit reload.
| | 01:09 | So now we can see that these
headings are a little bit smaller.
| | 01:12 | We can see the font size
here for the paragraphs
| | 01:14 | is just 10% smaller than the base font, and
everything here is just locking up a little bit tighter now.
| | 01:19 | Now that we have the type styled for the
promo areas, next we'll add in images into
| | 01:23 | the background areas for
the individual promos.
| | Collapse this transcript |
| Adding the promo images with CSS| 00:00 | Now, we're going to add the promo
graphics to the promo areas using CSS.
| | 00:04 | But before we can do that, we need to put
some custom classes in the HTML so that we
| | 00:08 | can target each individual promo.
| | 00:10 | So let's come back to our index.html file.
| | 00:14 | Let's find our promo container, and let's find the
three promos that are inside the promo container.
| | 00:20 | On the first one, let's come up here
to the div with the class of promo.
| | 00:24 | Hit a space, type the number one.
| | 00:27 | We're using the actual name because
we can't use numbers as a class name.
| | 00:31 | Let's find the second one.
| | 00:33 | Type in two. And let's find the
third one and type in three. Let's save our work.
| | 00:40 | Now, we have custom classes on
each one of the individual promos.
| | 00:45 | Let's come back to screen_styles.css.
| | 00:48 | After our promo p rule,
let's hit a few returns.
| | 00:53 | Let's type in .promo.
| | 00:55 | This is going to target the outermost
container of each of the individual promos.
| | 00:59 | Let's set our brackets.
| | 01:01 | We're going to come in here and set background-
repeat to no-repeat so that that will be used for
| | 01:07 | all of the individual promos.
| | 01:09 | Let's hit a return.
| | 01:13 | Let's type .promo.O-N-E, so promo.one.
| | 01:20 | Put in our brackets.
| | 01:22 | In here, we're going to come in
here and specify background image.
| | 01:28 | Set url, set the parentheses,
| | 01:30 | ../ to come out the root,
images/promo_1.jpg, then a semi-colon, and you come in here
| | 01:44 | and copy this entire rule.
| | 01:47 | Let's paste it two more times.
| | 01:50 | For the second one, change
.one to .T-W-O for two.
| | 01:56 | Let's come over and change the file
name from promo_1.jpg to promo_2.jpg.
| | 02:05 | Change the last one to .three and then change
the 1, 2, or 3.jpg for the file name, then
| | 02:14 | choose File > Save.
| | 02:16 | Let's come out and look at this in a browser.
| | 02:18 | Now, what we see here is the individual
graphics are showing up inside of each container,
| | 02:24 | so inside of each individual promo we see the
individual graphics we created from Photoshop.
| | 02:27 | Now, of course, you'll notice that the text is
actually overlapping the individual graphics.
| | 02:33 | We're going to address this when we start
working on the CSS rules for our layouts.
| | Collapse this transcript |
|
|
7. Creating the Content and the Layout ContainersAdding CSS rules for layout| 00:00 | Now, at this point, we're ready to start
creating some CSS rules for our layout.
| | 00:04 | So in your text editor,
let's choose File > Open.
| | 00:06 | From the myWebsite directory, go into the css
directory and open screen_layout_large.css.
| | 00:11 | Now, inside of here, we're going to put our
CSS rules for our large screen, which is also
| | 00:17 | going to be used by default for
browsers that don't support media queries.
| | 00:22 | So under the comment here that
says "global rules for all sizes,"
| | 00:25 | let's come in here and add a body tag.
| | 00:29 | Beginning and ending bracket. What we're
going to do in here is set the margin to 0
| | 00:34 | and the padding to 0.
| | 00:36 | This will make sure that the page container can touch
the top, left, and rightmost areas of our window.
| | 00:43 | Next rule we're going to create is going to
target the anchor Link inside of the header
| | 00:46 | area that we put a logo class on.
| | 00:50 | So we're going to start with header, space,
a.logo, beginning and ending bracket.
| | 00:56 | Let's split that open.
| | 00:57 | So anchor links by default have a display
type of inline, which means the length or the
| | 01:01 | height of the actual link is only
as large as the content inside.
| | 01:05 | Now, we created an empty anchor link for our
logo, so we're going to give this dimensions.
| | 01:11 | So we're going to set the
display type to block.
| | 01:14 | This will make the anchor link behave
more like a paragraph or a div tag.
| | 01:18 | The next property we're going
to set is going to be position.
| | 01:20 | So we're going to set position to absolute.
| | 01:23 | This will give us the ability to position
the logo inside of the page container, which
| | 01:26 | has a position set relative.
| | 01:29 | Next property, we're going to set background-
position, 0 pixels on the X and 0 pixels on the Y.
| | 01:38 | Next rule, we're going to
set background-repeat.
| | 01:40 | We're going to set that to no-repeat.
| | 01:44 | Save your work. Let's come back
out and look at this in a browser.
| | 01:47 | When we hit reload, we'll now see that the page
container now touches the top area of this window.
| | 01:52 | If I come down here and collapse the window down,
we'll see that the page container actually
| | 01:56 | touches the rightmost area
and the leftmost area as well.
| | 01:59 | So taking off the margin and padding on the
body tag allows the elements inside to touch
| | 02:03 | the edge of the window.
| | 02:05 | So now with those rules in place,
next, we'll work on the heading area.
| | Collapse this transcript |
| Styling the header on large screens| 00:00 | Next, we're going to style the
heading area for large screens.
| | 00:04 | So inside of our layout_large css file,
let's come down here after the Layout Large Screens
| | 00:09 | comment and let's create a
rule that targets the header.
| | 00:13 | So we'll type header,
beginning and ending bracket.
| | 00:16 | Let's split those open.
| | 00:19 | The first property we're going to set here
is going to be a height of 275 pixels.
| | 00:23 | That matches the height of the slice we
created in Photoshop for the large banner.
| | 00:27 | Let's hit a return.
| | 00:29 | We're going to set background.
| | 00:30 | We're going to set url,
beginning and ending parenthesis.
| | 00:35 | Inside of the parentheses,
| | 00:36 | ../ to come out to
root, /images/banner_large.jpg.
| | 00:46 | Outside of the parenthesis, set no-repeat.
| | 00:51 | For the X position, we're going to
set right, and for the Y position
| | 00:54 | we're going to set 0 pixels.
| | 00:56 | Let's hit a few returns.
| | 00:59 | Next, we're going to type headerr, space,
a.logo, beginning and ending bracket.
| | 01:07 | Let's split those open.
| | 01:09 | So for the logo on large screens,
we want to first set a width.
| | 01:11 | We're going to set that to 150 pixels, again
matching the slice size of the large logo
| | 01:17 | in our Photoshop file.
| | 01:21 | Next we'll set height to 85 pixels.
| | 01:26 | Next we're going to set the top property.
| | 01:28 | This locks onto the position
absolute that we set up here earlier.
| | 01:32 | So for the top value,
we're going to set 28 pixels.
| | 01:36 | We're going to set a right value of 30 pixels.
| | 01:42 | This will make sure of the logo is always 30
pixels from the rightmost side of the screen.
| | 01:46 | Next, we're going to come down here and we're
going to choose background-image, url, beginning
| | 01:53 | and ending parenthesis,
| | 01:56 | ../images/logo_large.png,
then a semi-colon.
| | 02:08 | Let's choose File > Save.
| | 02:09 | Let's come back out to the operating
system and let's load this on a browser.
| | 02:12 | So now in the browser, we've given dimension
to our heading area so we can see that this
| | 02:15 | is now 275 pixels tall.
| | 02:17 | We have our large banner graphic in the
background and we have our logo over here on the right,
| | 02:22 | which also has new block property dimensions
and a background graphic referenced in from
| | 02:26 | that rule we just created.
| | 02:28 | So now that we have the header and logo links
working for the large screens, next we'll
| | 02:32 | work on the article and promo areas.
| | Collapse this transcript |
| Styling the article on large screens| 00:00 | Now the next element we're going to target
is going to be the article, so I'm going to scroll
| | 00:04 | up here a little bit.
| | 00:06 | So after header a.logo, let's add
article, beginning and ending bracket.
| | 00:11 | What we're going to do in
here is set the padding.
| | 00:15 | We're going to 60 pixels on the top, 20 on the
right, 10 on the bottom, and 20 on the left.
| | 00:23 | Let's choose File > Save. This is going to give
us some padding around the content inside of the article.
| | 00:27 | Let's come back out to our browser.
| | 00:30 | Let's reload our page.
| | 00:31 | So no we'll see that space, that
padding showing up around the article.
| | 00:35 | We also have 60 pixels here at the top,
because this is where we're going to position the
| | 00:38 | navigation that's lower in the page, so we
need to have a little bit of room between
| | 00:41 | the article and the heading area.
| | 00:43 | I'm going to leave the web browser
open but come back to my CSS file.
| | 00:48 | So after article, we're going to create another
rule that's going to target the promo_container.
| | 00:53 | So .promo_container,
beginning and ending bracket.
| | 01:00 | Here we're going to set padding as well:
0 pixels on the top, 0 on the right, 15 on
| | 01:06 | the bottom, and 20 on the left.
| | 01:08 | Let's hit a return.
promo_container .promo.
| | 01:17 | This is going to target the individual
promos inside of the promo container.
| | 01:21 | Put in our brackets.
Let's split that open.
| | 01:23 | The first rule we're going to set
inside of here is going to be our width.
| | 01:26 | We're going to set that to 33%.
| | 01:28 | Next, we're going to set a float of left.
So these two rules combined are going to make
| | 01:36 | sure that each promo is going to take up
one-third of the available space, and they're going to
| | 01:40 | allow our content to float to the right-hand
side of each one, giving us that three-column
| | 01:44 | effect. The next property for each promo,
| | 01:48 | we're going to set background-position.
| | 01:49 | We're going to set zero pixels on
the X and three pixels on the Y.
| | 01:55 | This is going to position each one of the
graphics down a couple of pixels so the top
| | 01:58 | of the image will match the top
of the x-height of our copy.
| | 02:01 | And then we'll create one more rule:
| | 02:04 | .promo_container .promo space .content.
| | 02:11 | We're going to target the content divs
inside of each one of the promos.
| | 02:16 | What we're going to do inside
of here is set padding.
| | 02:18 | We're going to set 0 pixels on the top,
30 pixels on the right, 0 pixels on the
| | 02:24 | bottom, and 70 pixels on the left.
| | 02:27 | This is going to make sure that the text
inside of the content container doesn't get within
| | 02:30 | 70 pixels of the left-hand side, so we can
actually see the background-graphic showing
| | 02:35 | without the type overlapping.
| | 02:37 | At this point, let's hit File > Save.
| | 02:39 | Let's come back over to our
browser and let's hit reload.
| | 02:42 | Now we'll see each of the individual promos
is taking one-third of the available space.
| | 02:46 | They're floating to the left of each
other, giving us that column effect.
| | 02:49 | And we can see that the text is now 70
pixels away from the left-hand-most edge of each
| | 02:55 | individual promo, allowing us to
see those background graphics.
| | 02:59 | So now with our article and promo areas styled,
next we're going to start working on the styles
| | 03:02 | for the navigation.
| | Collapse this transcript |
|
|
8. Styling the PromosStyling the navigation links| 00:00 | The next thing we're going to do
is start styling the navigation.
| | 00:03 | So here in the web browser, I can see the
navigation is showing up down here under the promo areas.
| | 00:07 | So what we want to do is create some styles
that are going to be global and then some
| | 00:11 | styles that are going to be
specific to individual layouts.
| | 00:15 | So let's come back to our text editor.
| | 00:17 | Let's come back to screen_style.css and after
our promo containers, let's add a few lines,
| | 00:23 | and let's add a rule that's going to target
the anchor links inside of the nav element.
| | 00:28 | So we'll type "nav a" beginning and ending bracket.
| | 00:32 | Let's split those open.
| | 00:34 | First we're going to set color.
| | 00:36 | We're going to set that to #F5A06E;.
| | 00:43 | The next property is going to be text-transform.
| | 00:44 | We're going to set that
to uppercase, semicolon.
| | 00:50 | Next we're going to set
text-decoration to none.
| | 00:54 | That way the links won't be underlined.
| | 00:55 | Let's hit a return.
| | 00:57 | We're going to set a
display type of inline block.
| | 01:01 | This way the anchor links will have more
dimensions, similar to that of an image tag. So they'll
| | 01:06 | have height and width proportions based on
how much room they need, but they won't have
| | 01:09 | the straight inline style like we get
with typical anchor tags and span tags.
| | 01:15 | Next property, we're going to set a
font-weight to bold, hit a return.
| | 01:22 | We're going to set font-size to .9 ems.
| | 01:27 | Next we're going to set our
hover state for the nav elements.
| | 01:30 | So nav a:hover, beginning and ending bracket.
| | 01:37 | All we're going to do is come in here and
set the color to white, by putting pound sign
| | 01:41 | and three Fs. Let's hit Save.
| | 01:45 | Let's come back to our browser.
Let's hit reload.
| | 01:48 | We'll now see the color change.
| | 01:49 | We'll see that the links are in all uppercase
and when I roll over these, they turn white.
| | 01:54 | So these CSS rules target the
text aspects of the links.
| | 01:57 | Next we're going to work on the
layout aspects of the navigation links.
| | Collapse this transcript |
| Styling the navigation for large screens| 00:00 | Now we're going to style
the navigation element.
| | 00:03 | Let's come back to our text editor.
| | 00:05 | Let's come back to screen_layout_large.
| | 00:08 | Let's scroll up to the top,
where we have our global rules.
| | 00:11 | After our a.logo, let's hit a
few returns. Let's type nav.
| | 00:16 | We're going to target the nav element.
| | 00:18 | First, we're going to set a width of 100%.
| | 00:23 | Next, we're going to set a display of block.
| | 00:26 | Next, we're going to set a position of
absolute, so we can position this inside of that main
| | 00:33 | page container as well.
| | 00:37 | And lastly, let's come down
and set background color to #a6430a;.
| | 00:46 | Let's choose Save.
| | 00:47 | Let's come back out to our browser.
Let's hit Reload.
| | 00:51 | So now we'll see that our navigation element
now takes 100% of the available space inside
| | 00:55 | of its container.
| | 00:57 | So if I open this up, the page container here
is conforming to 980 and the width of the
| | 01:01 | navigation is taking that full area.
| | 01:04 | And now we can better see
the hover states as well.
| | 01:07 | So at this point, we're seeing some overlap
because the navigation element has absolute-
| | 01:10 | position properties, but we haven't
actually positioned it at a specific spot.
| | 01:14 | So we're going to work on that next.
| | Collapse this transcript |
| Positioning the navigation for large screens| 00:00 | Now to position the nav bar,
let's come back to our CSS file.
| | 00:03 | Let's come back to screen layout large.
Let's scroll down.
| | 00:07 | And after our promo_container
content, let's hit a few returns.
| | 00:11 | Let's type nav, beginning and ending bracket.
| | 00:16 | Let's come down here and set a
top property of 275 pixels.
| | 00:21 | Now, the height of our heading is 275 pixels,
so if the top of the nav is set to 275, that
| | 00:27 | will be right after the ending heading area.
| | 00:31 | Next rule nav a. We're going to target the
anchor links inside of the nav element.
| | 00:35 | We're going to come in here and set a margin.
| | 00:39 | We're going to set 12 pixels on the top, 0 on the
right, 10 on the bottom, and 20 pixels on the left.
| | 00:47 | This will space out the navigation area so
that we have a little bit of space around
| | 00:50 | the anchor tags, and it also makes sure that
the anchor tags space from each other 20 pixels
| | 00:55 | on the left-hand side here.
| | 00:57 | Let's choose File > Save.
| | 00:59 | Let's come back out to our browser.
| | 01:01 | Let's hit Reload.
| | 01:02 | So now we can see the top position of this
item is now at 275 pixels, which again is
| | 01:07 | right under where the heading area stops.
| | 01:10 | We have our margin on these individual items,
which pushes the navigation element a little
| | 01:15 | bit taller to encompass that margin, and then
each one of these links is spaced out as well.
| | 01:20 | Now that our navigation properties are set,
we're going to focus on the float problem
| | 01:24 | we're having down here.
| | 01:25 | Since each one of the individual promos are
set to float, the outer page container is
| | 01:29 | not extending down to encompass all of the
content inside of each one of the individual
| | 01:33 | promos, and so that's where we're
going to focus our attention on next.
| | Collapse this transcript |
| Clearing the float for the promos| 00:00 | Now to get our outer page container to extend
down to encompass all of the content inside
| | 00:04 | of the individual promos that have a float
property, we're going to need to add another
| | 00:08 | element after the promos to clear the float.
| | 00:10 | So let's go back to our text editor.
| | 00:13 | Let's first go into index.html.
Let's scroll down.
| | 00:17 | And after our three promos here, let's add
one more div at the same level as the promos.
| | 00:26 | We're going to set a class of
"clear-fix." Let's end that div.
| | 00:34 | So this is a class name that we're making up.
| | 00:36 | You can call this anything you want.
| | 00:38 | Let's choose File > Save.
| | 00:40 | Let's come back to screen_styles.css.
After our navigation element here,
| | 00:46 | let's create a rule that
targets that class so ".clear-fix."
| | 00:52 | The property we're going to set in here is going
to be clear and we're going to set that to both.
| | 00:58 | The other thing I like to do is set a line
height of one pixel and then choose Save.
| | 01:05 | So now let's come back out to our browser.
| | 01:07 | Let's hit Reload and so now that div, if you
can imagine, is down here. It's got a clear
| | 01:12 | bulb set to it so the outer most page
container will now extend down to encompass that div.
| | 01:18 | And since that div appears after all of the
individual promos and doesn't have a float,
| | 01:22 | the outermost page container is forced to
increase its height to encompass that element.
| | 01:29 | Now that we have our float properties working,
next we want to add one final rule to our
| | 01:32 | footer for large screens.
| | Collapse this transcript |
|
|
9. Working with CSS RulesAdding CSS rules with inline media queries| 00:00 | Now we have all of the CSS rules in place
for our large screen, in addition to all of
| | 00:04 | the type styles, so if we come up here into
our browser and start collapsing this down,
| | 00:09 | we'll start seeing some of
those CSS rules take effect.
| | 00:11 | First is, as I close this down, you'll notice
that the banner, having the background graphic
| | 00:16 | aligned to the right, actually
collapses down from the left-hand side.
| | 00:20 | Even if I come over to the right-hand side
of the browser and collapse this down, it
| | 00:24 | always starts trimming
from the left-hand side.
| | 00:27 | You'll also notice that the promos down at the
bottom are taking one-third of their individual
| | 00:31 | space, because they're set to 33%, so
you can see those condense down as well.
| | 00:38 | But there is one additional
rule I want to add to our footer.
| | 00:41 | So you'll notice if I come down here and collapse
the browser down, when the edge of the browser
| | 00:45 | gets to the edge of the page container, notice that the
copyright actually touches the edge of the browser.
| | 00:52 | So what I want to do here is I want to create
an inline CSS property so that we can still
| | 00:56 | be on the large screen, but I want to have
that footer just move away a little bit so
| | 01:00 | it doesn't actually touch
the edge of the browser.
| | 01:03 | So to do this let's come
back to our text editor.
| | 01:06 | Let's come over to screen_layout_large.
| | 01:09 | After our nav a, let's
hit a return, and we're going to create a rule
| | 01:13 | for the footer inside of
an inline media query.
| | 01:16 | So we're going to start by typing an
@media screen and (max-width: 990px). Then outside of the
| | 01:36 | parentheses we're going to put our brackets.
| | 01:38 | Let's hit a return.
| | 01:40 | Inside here we're going to
put our rule for footer.
| | 01:43 | So footer space, put in our brackets.
| | 01:46 | We're going to put padding-left.
| | 01:48 | We're going to set that to
20 pixels and then hit Save.
| | 01:53 | So what this does is instead of bringing in a
separate CSS file, we just have this footer
| | 01:57 | rule inside of this media query.
| | 01:59 | So this single rule will be enabled
when our browser is under 990 pixels.
| | 02:05 | So I'll choose File > Save.
Let's come back out to our browser. Let's hit Reload.
| | 02:10 | And if I come down here and collapse the
browser down, as soon as we get with the 990 pixels,
| | 02:16 | notice that the padding-left takes effect on
the footer and the copyright symbol moves
| | 02:19 | away from the left-hand side of the browser.
| | 02:22 | Now, with all of our large CSS rules in place,
this is how the design will look for older
| | 02:27 | browsers as well.
| | 02:28 | So if we collapse this down, all of the
properties will condense down, and we'll see exactly the
| | 02:34 | same user experience in browsers
that don't support media queries.
| | 02:38 | So now what we're going to do for the
remainder of the course is target small- and medium-
| | 02:42 | screen-size rules and rearrange the
layout based on the size of the user's screen.
| | Collapse this transcript |
|
|
10. Styling for Medium ScreensStyling the header for medium screens| 00:00 | Now we're going to create some CSS rules
that are going to target medium screen sizes.
| | 00:04 | So let's come back to our text editor.
| | 00:06 | Let's choose File > Open.
| | 00:09 | From the myWebsite folder, I'm going to the css
folder, and let's open screen_layout_medium.css.
| | 00:16 | Now, this file is only going to be referenced when
the viewport is between 501 pixels and 800 pixels.
| | 00:24 | So inside of here, the first rule we're
going to target is going to be the header.
| | 00:29 | Let's add our brackets.
| | 00:30 | We're going to set a height of 200 pixels.
| | 00:34 | This matches the height of the
medium-sized banner graphic from Photoshop.
| | 00:38 | Let's hits a space.
| | 00:40 | Next we're going to set background.
| | 00:43 | Those properties are going to be url inside of
the parentheses ../images/banner_medium.jpg.
| | 00:55 | Outside of the parentheses
we'll set the repeat to no-repeat.
| | 01:01 | For the x position we'll set this to 90%, and for
the y position we'll set this to zero pixels.
| | 01:09 | Next rule, header a.logo. Beginning and ending bracket.
Let's put those open.
| | 01:19 | So what we're going to redefine for the logo
is going to be the width, so that's at 115.
| | 01:27 | Let's set the height to 70 pixels.
| | 01:30 | Again, this matches the dimensions of the
Photoshop graphic for the medium logo.
| | 01:36 | Next we'll set a top property of 20 pixels
and a right property of 20 pixels as well.
| | 01:43 | The last property we're going to set is going to be
background-image: url(../images/logo_medium.png);.
| | 02:01 | Now with these in place,
let's choose File > Save.
| | 02:02 | Let's come back to our browser.
Let's hit Reload.
| | 02:06 | Now in our browser we're
going to resize the window.
| | 02:09 | When we get lower than 800 pixels
we'll see that the logo now get smaller.
| | 02:13 | We'll see that the size of the heading now
stops at 200 pixels, and the actual graphic
| | 02:18 | in the background changes from the
large graphic to the medium one.
| | 02:22 | So if I resize this back, we'll see this
is the large and this is the medium.
| | 02:26 | So now that the header and logo are now being
styled between large and medium screens, we'll
| | 02:30 | work on the navigation next.
| | Collapse this transcript |
| Styling the navigation for medium screens| 00:00 | Now to position the nav bar for medium
screens, let's come back to our text editor.
| | 00:05 | Inside of the screen_layout_
medium after header a.logo,
| | 00:08 | let's hit a few returns.
| | 00:11 | Let's target the nav
element, add our brackets.
| | 00:16 | We're going to set a top
property here of 200 pixels.
| | 00:19 | Again, this matches the height of the
header that we see up here, set to 200.
| | 00:25 | Let's hit a return, nav a.
| | 00:30 | Let's target the anchor links
inside of the navigation element.
| | 00:32 | Put in our brackets. And we're going
to set a margin-right of 20 pixels.
| | 00:38 | So what we want to do here is space out the
navigation a little bit more. Since somebody
| | 00:42 | maybe on a tablet device,
| | 00:44 | we want to make sure they have enough room
between the links to tap them with their fingers.
| | 00:48 | So let's hit Save. Let's come back to
our browser, and let's hit Reload.
| | 00:52 | Now we'll see the navigation now aligned at
the top to 200 pixels and the navigational links
| | 00:57 | are spaced out just a little bit more.
| | 01:00 | So if I resize the browser, that's the
large size and then the medium size.
| | 01:05 | Now that we have the navigation styled for
the medium screens, next we're going to work on the promos.
| | Collapse this transcript |
| Styling the promos for medium screens| 00:00 | Now, the last thing we want to adjust on
medium screens is going to be the promo area.
| | 00:04 | If I come in here and resize the browser,
we'll see that having the text show up on the right-hand
| | 00:09 | side of the images leaves very little room
for the text, so what we're going to do is
| | 00:13 | rearrange the text inside up here to
show up underneath of the images.
| | 00:16 | Now to do that, let's come
back to our text editor.
| | 00:20 | After the navigation rules inside of our screen_layout_
medium.css file, let's start by targeting the promo_container.
| | 00:26 | So let's start with the
.promo_container, put in our brackets.
| | 00:33 | We're going to set a padding of 0 on the top, 20
on the right, 15 on the bottom, and 20 on the left.
| | 00:41 | Let's come in here and copy
the promo_container name.
| | 00:44 | Let's hit a few returns.
| | 00:49 | Let's paste promo_container .promo,
beginning and ending bracket.
| | 00:56 | We're going to set background-position
here to 0 on the x and 0 on the y.
| | 01:00 | Set another rule,
.promo_container .promo .content.
| | 01:09 | Now we're going to target the content divs
inside of each one of the individual promos.
| | 01:16 | In here we're going to set padding.
| | 01:18 | We're going to set 70 on the top, 30 on the right,
0 on the bottom, and 0 on the left.
| | 01:24 | So what's going to happen here is the text is
going to push away from the top 70 pixels,
| | 01:28 | but the left is going to be set back to 0
so the text will now align to the left-hand
| | 01:32 | side of the promo area.
| | 01:34 | Now there's one last rule I want to create,
and that's going to be for the body tag.
| | 01:39 | So let's add body, beginning and ending bracket,
and what I want to do here is take away the
| | 01:43 | background image.
| | 01:44 | Since we can't actually see the background
image on a medium screen, I don't want the
| | 01:48 | users to download that extra graphic.
| | 01:50 | So let's come in here and let's come down
to background-image and let's add none.
| | 01:56 | Let's choose File > Save.
| | 01:57 | Let's come back out to our browser.
| | 02:00 | Let's hit Reload, and now you see that the
text positioned itself 70 pixels down from
| | 02:05 | the top and aligns on the left-hand side to
give us the typography coming underneath of
| | 02:10 | the images instead of floating
over to the right-hand side.
| | 02:13 | Now we have all of these CSS rules in place
for the medium screens. Next we're going to
| | 02:16 | target the small screens.
| | Collapse this transcript |
|
|
11. Styling for Small ScreensStyling the header for small screens| 00:00 | Now to target small screens,
let's come back to our text editor.
| | 00:03 | Let's choose File > Open.
| | 00:06 | From the myWebsite folder, go into the css
directory and let's open up screen_layout_small.css.
| | 00:11 | Now, inside of here, we're going to start by
targeting the header, beginning and ending bracket.
| | 00:20 | We're going to set a height of 75 pixels.
| | 00:25 | We're going to set background:
url(../images/banner_small.jpg).
| | 00:42 | Set no-repeat, set right for the X
position, and 0 pixels for the Y position.
| | 00:49 | Let's hit a few returns.
| | 00:53 | Now let's target the logo,
so header a.logo.
| | 00:56 | Now we'll set the brackets.
| | 01:00 | Let's split that open.
| | 01:02 | The first property is going to be width.
| | 01:03 | We're going to set that to 105 pixels.
| | 01:06 | Next, we're going to set
the height to 40 pixels.
| | 01:12 | Next, we're going to set the
top property to 16 pixels.
| | 01:17 | We're going to set the
right property to 15 pixels.
| | 01:22 | And then finally, we're going to set the
background-image: url(../images/logo_small.png);.
| | 01:41 | After header, let's come in here and
let's quickly add in our article.
| | 01:48 | Put in our brackets.
| | 01:49 | For the padding here, we're going to set 20
pixels on the top, 20 on the right, 10 on
| | 01:56 | the bottom, and 20 on the
left, and then hit Save.
| | 01:59 | Let's come back out to our browser.
| | 02:02 | Let's hit Reload, and let's resize
the browser down to under 500 pixels.
| | 02:08 | So once we hit that threshold here, we can see the
difference between medium, which is here, and small.
| | 02:12 | So now our header is now
showing up at only 75 pixels.
| | 02:16 | We have the smaller version of our logo, and we
have the extra padding around the article area.
| | 02:21 | Now that we have the header and logo and
article styles for small screens, next we'll focus
| | 02:25 | on the navigation element.
| | Collapse this transcript |
| Styling the navigation for small screens| 00:00 | Now the first thing we need to do with the navigation
element is have it positioned after the content.
| | 00:05 | Right now we have an absolute-positioned for
large and medium screens. So to do that,
| | 00:09 | let's come back to our text editor.
| | 00:12 | After the article element, let's type
in nav, beginning and ending bracket.
| | 00:17 | We'll split those open.
| | 00:19 | The first property is going to be
position, and we're going to set this to static.
| | 00:24 | This means we're going to remove the position
properties of this element, and then it's going
| | 00:28 | to show up in the order that it appears in the
HTML code, which is right before the footer
| | 00:32 | in our HTML file. Let's hit a return.
| | 00:35 | We're going to set padding next.
| | 00:37 | We're going to set 10 on the top, 0 on the right,
10 on the bottom, and 0 on the left, and a semicolon.
| | 00:46 | Next we're going to set background-color.
| | 00:48 | We're going to set
background-color: #515673, same as the background
| | 00:54 | color of the body tag in the
footer, and then choose Save.
| | 00:58 | Come back out to the browser.
| | 01:00 | Let's hit Reload.
| | 01:00 | And if we scroll down, we can now see the
navigation is showing after all of the content.
| | 01:06 | So now, with the navigation in the proper place,
next we'll style the links to make them look
| | 01:09 | more like mobile navigation links.
| | Collapse this transcript |
| Styling the navigation links for small screens| 00:00 | Right now, on our small screen device, our
navigation links looks like text links.
| | 00:05 | So what we're going to do is write some CSS
properties to turn these into links that look
| | 00:08 | more like mobile link buttons.
| | 00:10 | So let's come back to our text editor. After
our nav element, nav a, beginning
| | 00:16 | and ending in bracket. Let's split that open.
| | 00:19 | The first thing we're going
to do is set the color.
| | 00:22 | That's going to be #a6abc5;.
| | 00:28 | Next, we're going to set display.
| | 00:29 | We're going to set this to block. So, we want
to have the anchor links on the small screen
| | 00:35 | behave like blocks, so they'll be more like
paragraph or div tags, rather than inline blocks
| | 00:39 | or inline elements from the large screen.
| | 00:43 | Next property, we're going to set
margin, 15 pixels for all sides.
| | 00:47 | Let's hit a return. padding we're
going to set 9 pixels for all sides.
| | 00:53 | Next, we're going to set border.
| | 00:56 | So border:, we're going to use shorthand
style here, which is the size, then style, then color.
| | 01:02 | So for the size it's going to be 1 pixel, hit a
space, solid, space, #a6abc5;.
| | 01:14 | Let's hit a Return.
| | 01:16 | We're going to set background, url beginning and
ending parenthesis, ../images/mobile_link_arrow.png,
| | 01:21 | space, set the repeat to no-repeat.
| | 01:36 | Let's set the X property to
right and the Y property to center.
| | 01:41 | Now the next property we're going to
create is going to be for rounded corners.
| | 01:45 | These are CSS3 properties, and some browser
still require special flags until the CSS3
| | 01:50 | specification has been finalized.
| | 01:52 | So we're going to target Mozilla and WebKit.
| | 01:54 | Mozilla powers Firefox and WebKit powers
Chrome, Safari, Android, and iOS devices.
| | 02:01 | So let's start by typing -moz-border-radius: 12 px.
| | 02:13 | Let's come in here and select
and copy that entire property.
| | 02:15 | Let's hit a return.
| | 02:17 | Let's paste on the next line
and replace the moz with webkit.
| | 02:25 | Let's hit a return.
| | 02:27 | Let's paste that rule again,
and let's remove the browser flags.
| | 02:30 | So the final CSS3 property will be
called border-radius, set to 12 pixels.
| | 02:38 | Now, the next rule we're going to
create is going to be for a hover state.
| | 02:42 | So nav a:hover, beginning and ending bracket.
| | 02:48 | We're going to set color of the type to
white, so #fff.
| | 02:54 | Next we're going to set background-color and
in here, instead of using a pound sign, we're
| | 02:58 | going to use a color space called rgba.
| | 03:03 | So let's type rgba,
beginning and ending parenthesis.
| | 03:06 | Inside the parentheses, we're going to specify
the values for red, green, and blue, and the
| | 03:10 | fourth property, which is the a, stands
for alpha, or the amount of transparency.
| | 03:16 | So to get white, we want to have 255 for the first
value, comma, 255 for the second, 255 for the third.
| | 03:24 | So red, green, and blue are all set to their
maximum values, which gives us white, then
| | 03:29 | a comma, and then .15
for 15% alpha, or 85% transparent.
| | 03:36 | Then outside the
parentheses, we'll hit a semicolon.
| | 03:38 | Let's save our work. Let's come back out to our browser.
| | 03:41 | Let's hit Reload.
| | 03:42 | Let's scroll down a little bit, and now we'll
see that our anchor links have changed from
| | 03:45 | looking more like text to now
looking like mobile link buttons.
| | 03:50 | Now, I do like to specify a hover state
on my mobile links, for two reasons.
| | 03:54 | One, if somebody condenses their browser down,
like we're doing here, they can get the hover
| | 03:58 | state with their mouse, and second, most
touch devices will activate the hover state when
| | 04:02 | somebody taps on that individual link.
So this will give the users feedback that they've
| | 04:06 | actually tapped on a specific link.
| | 04:08 | So now that our navigation is positioned and
styled for small screens, next we can work on the promo area.
| | Collapse this transcript |
| Styling the promos for small screens| 00:00 | Now we're on our small screen devices, we're
going to want to rearrange the content again
| | 00:03 | inside of the promos.
| | 00:04 | So what we want to do in this case
is have the promo stack vertically.
| | 00:08 | We still want to have the text to the
right-hand side, but we want to get rid of the columns.
| | 00:12 | So let's come back to our text editor.
| | 00:15 | Let me scroll up here.
| | 00:17 | After our navigation elements,
let's hit a few returns.
| | 00:21 | Let's target the
promo_container, space, add our brackets.
| | 00:29 | Let's set padding to 0 pixels.
| | 00:32 | Let's come over here and
copy the promo_container name.
| | 00:38 | Next rule. Let's place
promo_container .promo, beginning
| | 00:44 | and ending bracket. Let's split that open.
| | 00:46 | Now what we're going to do for each individual
promo, let's reset the width to auto, so this
| | 00:53 | overrides the setting we had
earlier, which set these to 33%.
| | 00:57 | Now setting this to auto means they'll take the
full width that's available by their parent.
| | 01:02 | Let's hit a return.
| | 01:03 | We're going to set the float to none,
so they're not going to float anymore either.
| | 01:09 | Next I'll set padding to 10 pixels on the top, 0
on right, 0 on the bottom, and 0 on the left.
| | 01:17 | Let's hit a return.
Let's set background-position.
| | 01:20 | We're going to set the background-position to 20
pixels on the X axis and 13 pixels on the Y axis.
| | 01:28 | What this is going to do is move the graphics
down a little bit from the top and a little
| | 01:32 | bit in from the left so that the images
don't actually touch the edge of the browser.
| | 01:35 | Next property is going to be border-top.
| | 01:41 | We're going to set that to 1 pixel, solid,
and for the color we're going to put pound
| | 01:48 | sign and three Cs (#ccc;) for a medium gray.
| | 01:51 | Let's hit a return and create one final rule.
| | 01:55 | Let's paste the promo_container name, space,
.promo .content beginning and ending bracket.
| | 02:03 | Let's come in here and set the padding to 0
on the top, 20 on the right, 5 on the bottom,
| | 02:11 | and 90 pixels on the left.
| | 02:13 | Now, the reason we're setting this to 90 is
we're using the background-position on the
| | 02:17 | X for the images at 20, so we need to take the
original 70 plus the 20 that we're offsetting
| | 02:22 | this one, to get a total of 90.
| | 02:26 | Let's come in here and hit Save.
| | 02:27 | Let's come back to our browser.
Let's hit Reload.
| | 02:30 | Now we'll see the individual promos will stack
vertically, because we took the float properties off.
| | 02:34 | The width is auto, so the width will be the
full width available by the browser, and then
| | 02:39 | each one of these items will stack.
| | 02:41 | The background-image is positioning 20
pixels on the left, 13 from the top. And the text is
| | 02:47 | positioning 90 pixels, to accommodate for
the new position of the background-image.
| | 02:52 | Now that we have the promo styled for
small-screen devices, next we'll work on the background
| | 02:55 | and the footer elements.
| | Collapse this transcript |
| Styling the footer for small screens| 00:00 | Now the last two things I want to do for the
small-screen device is to add a rule to the
| | 00:03 | footer and to get rid of the background-
image on small screen-devices as well.
| | 00:07 | So let's come back to our text editor.
| | 00:11 | After our promo rules,
let's hit a few returns.
| | 00:14 | Let's start by targeting the footer,
beginning and ending bracket.
| | 00:21 | Let's set border-top to 1 pixel, solid, and
the color is going to be #a6abc5;.
| | 00:36 | And then the final rule,
let's target the body element.
| | 00:41 | Let's come into background-
image and let's set that to none.
| | 00:44 | Just like we did for the medium screen,
I don't want to download any background-images
| | 00:47 | for small or medium screens, since the design
actually touches the edges of the browser.
| | 00:53 | Now with these rules in place,
let's come back out to our browser.
| | 00:55 | Let's hit Reload. We'll see the footer now
has a border across the top.
| | 00:59 | Now at this point we've completed
Creating a Responsive Web Design.
| | 01:02 | We've started from Photoshop, created a whole
series of images, and actually put these together
| | 01:06 | in such a way that we also get the advantage
of responsive delivery, so that people on
| | 01:10 | small and medium screens will download less
data than people on large computer screens.
| | 01:15 | Next, we'll talk about where
you might want to go from here.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Now, if this course was one of your first
experiences with HTML and CSS, then I would definitely
| | 00:05 | recommend some additional courses in
the lynda.com online training library.
| | 00:09 | First would be HTML5 First Look--
| | 00:11 | this will show you more of the HTML elements
that are available with HTML5--and CSS3
| | 00:16 | First Look, which will give you more
properties that are available with CSS3.
| | 00:20 | And for those familiar and comfortable with
HTML and CSS, I would definitely recommend
| | 00:24 | adding JavaScript and jQuery into the mix.
| | 00:26 | I have whole series of courses on the
lynda.com online training library that will walk you
| | 00:31 | step by step through creating
rich interactive user experiences.
| | 00:34 | We'll build things like a homepage promotional
marquee, an HTML5 video and photography gallery.
| | 00:40 | We'll create some rotating carousels, some dropdown
menus and tooltips, and even an interactive map.
| | 00:45 | And you'll want to check back in the section
often, because we're adding new and interesting
| | 00:48 | courses here all the time.
| | 00:51 | And with that, that concludes Creating a
Responsive Web Design, and as always, I really appreciate
| | 00:55 | you watching my course.
| | Collapse this transcript |
|
|
