Loading...

04-02 Creating Navigation Menus

This week I am going to do some code review. I will show you how I used pseudo-classes and pseudo-elements to style a table. Then I give you a demonstration of three different navigation bars that utilize different styling options. We will want to step back and talk about how these different options may affect the accessibility of our site. The final step to completing this course is the completion of the peer-graded project. You will have the chance to demonstrate the ability to follow styling guidelines while still putting your own personal touch on the project. Just remember, you need to validate your work for proper syntax and accessibility.

Introduction to CSS3

Universidad de Míchigan

Curso 2 de 5 en Web Design for Everybody (Basics of Web Development and Coding) Programa Especializado

The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits. When done correctly, the styling of a webpage can take enhance your page. When done incorrectly the result can be worse than no styling at all. To ensure that your sites do not put up barriers for people with cognitive and/or physical disabilities, you will learn how to evaluate pages using the standardized POUR accessibility guidelines. Upon completion of the course, learners will be able to sketch a design for a given HTML page. Using that design they will use CSS to implement the design by adding fonts, colors, and layouts. This is the second course in the Web Design For Everybody specialization. Subsequent courses focus on adding interaction with JavaScript and enhancing the styling with responsive design. It will be difficult to complete this course if you do not have access to a laptop or desktop computer for the homework.

Destrezas que aprenderás

Web Design, Style Sheets, Cascading Style Sheets (CCS), Web Development

Impartido por:

Colleen van Lent, Ph.D.
Lecturer
Charles Severance
Professor

Transcripción

Hi, everybody.

Welcome back.

Since it's week four and

you're working on your final project, what I want to do is kind of show you

some of the different options that you can use when you're styling your pages.

And in this video,

I want to show you what happens when you try to make a vertical navigation bar.

So over here in my browser,

I have what the page is going to look like when we're done.

But let's go ahead and I'll hit refresh and first see what it would look like

if I tried to make a navigation bar using four simple links.

Again, links are inline, so they go next to each other.

There's no color.

There's nothing going on.

And it's really horrible.

So let me put that style back in.

Refresh the page.

And I’m going to show you how I created this navigation bar.

Let’s start by talking about the body.

I just put in some background color, padding, and margin.

That’s not really important here.

What’s important is talking about our navigation section.

One of the things I wanted to do is to show you the idea of

using that box-sizing border-box.

What this is going to do is it takes away the need for

you to count up how much width, how much padding, how much border.

You don't have to do the math.

The browser will do it for you.

I put in some simple border, color, background color, etc.

The first thing I did, though, is I made it inline-block,

because I want my navigation to be next to the other parts of my page.

And since nav is block, it won't happen unless I kind of throw it in there.

So I said I wanted it to be about 20% of the page and then added some margin.

Now, something new you may not have seen before is this idea of height

equals 100vh.

That's your viewport height.

So this means I want the navigation to take up the whole height of your page.

I'm not hard-coating it to 400 pixels or 200 pixels,

cuz I don't know how big the screen is that you're looking at.

Next, let's talk about the actual lengths themselves.

What I've gone in and done is I've taken away the regular boring links and

I've really styled them to make them something a little more original.

So I put in a height of how high I want each one of my links to be.

And then I put in a little bit of a trick and

I said I want the line height to be 45 pixels.

So why would I do that?

The reason would be I want to center home photos or

I want to center the words within it and this is how I can do it.

The next kind of cool thing I've done is I've added a background image.

I added these little arrows.

And the cool thing that I had to do that I want to really point out to you is

I couldn't just link to the folder and then the file.

Because of the way I set up my code, first I need to say, oh, I know I'm in the CSS

folder right now, so I'm going to go back up to my main folder and then find images.

If this is confusing for you, don't worry.

It's a brand-new concept, but it's something that a lot of you are going to

run into as you try to link images from your style sheet.

All right.

The last thing I did was just add in a little padding, so there's room for

the picture, and then add some margin.

So using these different things we've already talked about, position, sorry,

display, line height, background URLs, we were able to make something

that I think looks really cool for a simple, vertical navigation bar.

Go ahead and try it.

Good luck.

Videos recomendados

Acerca de Coursera

Courses, Specializations, and Online Degrees taught by top instructors from the world's best universities and educational institutions.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play