In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes
Responsive grid
Loading...
來自 University of London 的課程
响应式网站基础：HTML、CSS 与 JavaScript
2851 個評分
從本節課中
CSS
Welcome to the second module of 'Responsive website basics'. <p>In this section of the course we will have a look at linking external CSS files to your HTML documents, controlling fonts with CSS and using CSS to customise hyperlink formatting and to control text layout. We will also install the bootstrap library and implement a responsive grid layout- Enjoy! <p> - Matthew, Marco and Kate
與講師見面
Dr Matthew Yee-KingLecturer
Computing Department, Goldsmiths, University of London
Dr Marco GilliesSenior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate DevlinSenior Lecturer
Department of Computing, Goldsmiths
[MUSIC]
Right, so we've added bootstrap to our site.
And we've neutralized all of those sort of default styles that the browser applies,
and applies a more modern set of default styles using that library.
What we're going to do now is use another aspect of bootstrap, which is,
allows us to very easily create what we call responsive layouts.
And so, we're just going to get a bit of an intro to responsive layouts now.
But if you go to the second course in this specialization,
we sort of deal with responsive layouts in a little more depth, and
explain more how you can gain control over those.
But for now, let's just sort of get a brief idea of how they work.
So the basic idea is that I have a grid like this.
And I think of my webpage as being a grid which has 12 columns in like that.
So you got 1 through 12.
And if I've got some content in my webpage,
I can choose how much of that grid it takes up.
So I might want to have, say,
two panels which take up six grid
squares each, for example.
So let's say I decided I want the design for my webpage is gonna be two panels.
And each of those panels therefore is gonna take up half of the complete space,
so that would take up six grid spaces per panel.
How do we write that in code, in Bootstrap?
Well let's just go through and sort of code that up.
All right, so first thing is, there's my sort of neutralized Bootstrap webpage.
And the code is here.
So I've got the Index file, and I'm gonna start just by editing index and
sort of creating two panels to show you how that works.
And, I do that by, first of all,
you wrap everything in div tags in the Bootstrap.
So you'll get used to writing the div tag really quickly, the more Bootstrap you do,
because you're gonna write a lot of them.
And the div tag is a sort of interesting tag in HTML.
It isn't really used to sort of signify that anything has any particular purpose.
It's more used to separate different parts of the document, so
that you can deal with them in different ways, for example, in your CSS.
So unlike an h1 tag, which means you know this is a heading or an a tag,
which means this is a link.
A div tag doesn't really instruct the browser to do anything in particular.
It's a way of us connecting maybe a set of CSS styles to a particular thing or
sort of showing and hiding different bits of our page.
So in Bootstrap they use divs for really structuring things and
applying different styles.
And the style we want to apply here is the concept that this div, so
this page is gonna have two columns.
All right, and so first of all we wrap everything in a container div which is,
which does this.
You see it move the page across a bit.
And now we're using this sort of proper Bootstrap layout.
And then we create another div which has the class of row,
and row signifies one of these things here, okay?
That's a row.
And inside the row, when you create another div,
and the class of this div is going to be col-md-6.
Okay, and I can put some content in,
content here, For
panel 1, for panel 2.
So effectively what I've done there is I've defined two panels,
one of which is taking up six.
Another one of which is taking up six as well.
So there we have it.
Two six wide, so
six just signifies how may of these kind of grid squares this panel takes up.
And you can see we've got a row, and then columns inside the row.
We can have as many rows and columns as we like, as long as
we sort of consider the fact that each row has to add up to 12 columns in total.
So let's have a look at that page.
Okay, so you can see that one panel's gone there, and one panel's gone there.
And if we really want to clearly see what's going on,
let's just draw a border around those two things so we can see what they're doing.
So I'm gonna define a new style called, which gives a border to things.
So I'm gonna put my old style sheet back in, okay.
So I'm back in the head part the document here, and
my style sheet is called styles.css.
So you can see, you can actually include lots of style sheets.
It's fine. You can add as many as you'd like.
And the idea of that is that they cascade into each other.
So the bootstrap.css, we looked at that earlier, and
it had loads and loads of different styles.
So that's our starting step styles.
And then we add styles.css to that, and if it has anythings that have the same class,
then it will override what's going on.
So each style sheet you add can kind of override things that happened
in the previous styles sheet, or indeed add new ones.
And again that's quite a common thing, so
you might start with a default style sheet and then modify it a bit.
So when we're modifying the way that Bootstrap displays things,
we might, we put that in a separate file.
We don't edit bootstrap.css.
Okay, so there's style.css.
First, let's open up style.css Oops.
And, drop it into the text editor there.
And I don't need any of these styles anymore,
because I'm now letting Bootstrap style up my page,
but I would like to create a new class called thin_border, right?
And thin_border is just gonna create a border on whatever you set it to, so
border: 1px solid black, okay?
So that would create a thin border on whatever you set it to.
So then I can go into here, so just reminding you of the syntax there.
So full stop thin_border means I'm defining a new CSS class, and
then everything in the brackets, that's the CSS class properties, okay.
And then I can put a comment in just to explain what it's doing, use this to put
borders around things.
Okay, so that's a CSS comment.
So you notice there's different types of comments for CSS and HTML.
Okay, then I just need to add that class, so it's called thin_border, right.
That's my custom class, and
then when I reload the page, I should now see that I've got a border, right.
So I just added a border around so I could see the layout.
And so let's just play around with that a bit.
What happens if maybe one of them is 3 and one of them is 9?
So if we think about the grid, then that's the equivalent of shrinking that
one down to three and putting that one up to nine.
So that should look like something like this, right?
So let's go back.
There we are.
So now we've got that one sort of shorter, and that one's bigger.
So that we can control sort of how much of the grid,
as long as it adds up to 12, it's fine.
So that last thing that I want to see,
is what happens when someone looks at this on a browser of a different size window.
And that's responsive, right?
That's the responsive thing.
Because you can see this page is quite wide, imagine looking at that on a phone.
It's gonna be difficult, because you have to kinda pull it across and go over there.
You've probably done that if you've tried to, I don't know, book tickets on one of
those old websites where they haven't updated it properly yet.
And you're kind of sweeping around all over the place.
Well, responsive is a solution to that.
So let's see what happens when I simulate looking at this on a thinner browser.
Right there you go, so did you see what happened?
You can see each, there's kind of several steps where it kind of lays out
the page in a slightly different way.
And so at one point it steps down, and boink, it goes down to two rows instead.
And that's built into the sort of gridding functionality that we get with Bootstrap,
the idea that the grid automatically lays itself out properly.
And so now,
if I'm looking on the phone in my grid, it doesn't look exactly how I laid it out.
But it means it's more usable on the phone.
It's making the best possible use of that kind of long and thin display.
Okay, so that's our first real bit of responsive web programming.
So well done to get this far, and please go and
try those code examples out for yourself.
[MUSIC]
