InternetComputing-Lab-3

Posted on | In , | Visitors: | Readers 人

Lab 3 Teaching

TA Sophia has made a lab-tutorial page for you. This page is mainly for you to review the lab3 class. If you miss the class, I hope it will help you to remember.

First——Target:

First, let’s see the target together:

In this lab, you will try to make a responsive webpage using simple CSS rules.
The webpage contains the list of common core courses and their related information.

In the top, the webpagge has a top level menu to select the commonn core area that you want to show in the list of courses.

Your main task is to format the menu and make it responsive to the size of the device

There are totally 4 steps in this lab.

Step 1: The Common Core Course List

You are given a starting HTML file here and a few CSS files here, here and here. You can click it for download.

Let’s see what original HTML file looks like ; so open it with the sublime editor.

At the top of the HTML file, we can see the first three CSS style sheets are linked like this:

And we should know that among the three CSS files, top.css and course.css have been mostly complete.

Athough, the HTML file is very long, has 2500 lines. But inside the body of the HTML file, it contains only three components:

  • 1.A top-level menu for large screen displays:<ul id="main-menu-large">...</ul>
  • 2.A top-level menu for small screen displays:<div id="main-menu-small">...</div>
  • 3.The common core course list: <div class="course-list">...</div>

I will show you the three part in our target html.

First part is the large screen display top-level menu, its color is yellow

Second part is the small screen display top-level menu, its color is green

Last is all of the main course list and name .

So, now let me tell you the main tasks of the lab is to:

  • First, format the top-level menus, both for the large screens and small screens,
  • Write the necessary JavaScript code to filter the course list
  • Apply responsive instructions to the course list
  • Apply responsive instructions to the top-level menu

You will largely work with CSS in the lab and a little bit of JavaScriptfor the filtering of courses

So now we start:

Step 2: Formatting the Top-level Menus

[open the original webpage ] what we should do is that

  • There are two versions of the same menu in the HTML file.
  • You need to format the two menus in different ways because one is for large screens and another is for small screens.
  • After finishing the lab, you only have one of the two shown inside the webpage.

2.1 The Top-level Menu for Large Screens

So at first, let’s deal with the top-level menu.

  • first at the moment, the top-level menu for large screens is an unordered list like this:
  • [open the target] but you want them to look like this way.
  • how to deal with it ?
  • [open the code]

first you need to make the <ul> to be a box-like .

so [open the menu.css] i add width and height and background color to <ul> ‘s style. [build the code]

Then for the <li> elements. we should put the <li> element inside the ‘box’ you have created above.

Remember that in lab 2 you have arranged the holes in the game horizontally, even though the holes are block elements.The key is to use the float CSS property. the float property makes any block element ‘flow’ within its container. So you will need to do this for each list item:[build the code]

Last for the <a> elements. They look really like a hyperlink now, you need to change their default appearance so that they will look like a menu button.

Here is what i can do with the <a> [build the code]

After i give these changes, it is more button-like. You can then apply further changes to the hyperlinks such as borders, text and background colours so that they look more like the menu item that you would like to see

last but not least If you look at the HTML now, you will find the list item has been ‘selected’ with a selected class. This class is used to indicate that the menu item is the current filtering criteria. And the color of it will change from yellow to orange .

you can change the selected menu item to using bold text and orange background colour. [build the code ]

At this point, your top-level menu for large screens is ready.

2.2. The Top-level Menu for Small Screens

for the smaller one, how it is look like [show the target]

So first step, Similar to before, make a box for the outer div so that it occupies the top area of the page, like this (i give it green color to ensure the difference.)

Then The steps are just the same as what you have done for the previous large screen menu.

In this small screen menu, you don’t need to use float to arrange the menu items horizontally.

[build the code]

However, you will find that the menu is somehow ‘hidden’ behind some other elements in the webpage, like this:

One trick to put this menu to the top is by using this CSS position: absolute to the <ul> element.

If you do this, the entire list will be detached from the flow of the page and in front of all other elements.

Before writing the JavaScript, you can do all sorts of improvements to the menu:


1. Adding the :hover class to the hyperlinks so that you can highlight the current menu item.


2. Adding appropriate border(s) to separate the menu items

Step 3: Writing JavaScript to Do the Filtering

After decorating the menus, you will find that some of the interactions are already working. For example, you can click on the ‘menu button’ to open or close the menu for small screens. This is done by simply using toggleSlide() on the <ul> element in the common_core_course.html

  • When you click on a menu item, you are activating the link href.
  • The click event handler has been created for your in the code too [open the code to show line47 53]
  • The only missing piece of the code is the content of the filterCoursesfunction

So now we need to fill up the whole filterCourses function in the line 18-35 [build the code]

Getting the Area Code:

The ‘course area code’ has been added to every menu item as an href value
For example, the area code ar is added to the menu item like this:

<li class="menu-ar"><a href="#ar">Arts</a></li>

  • The area code is useful to control the rest of the elements because most of the elements are named according to the area code
  • Once a menu item is clicked, the click event handler extracts the href attribute (i.e. #ar) and sends it to the filterCourses() function
  • Then in the function, you can further extract just the area code
  • Since the area code is always behind the # symbol, you can easily extract the code using split(“#”)

[build the code]

Filtering the Courses:

  • If the area code is ready, you can write the code to show/hide the courses
  • For a start, if you click on the ‘All’ menu item, you should show all courses to the page
  • This can be done by simply selecting all .course-container and show them
  • This should just be one simple line of JQuery code, i.e.:

$(".course-container").show();

[build the code]

  • On the other hand, if the area is not ‘all’ but one of the course areas, you will need to:
  • Hide all courses first
  • Show the courses inside the selected area
  • Hiding all courses is simple, which is again one simple line of JQuery code
  • If you look at the HTML, you can see all course containers have their corresponding area listed inside the class attribute, like this:
  • To show the courses within the area you can select the elements with the area-code class
  • Therefore, you can show one area of the courses by using just one line of code again

<div class="course-container area-ar">

Updating the Menu Items:

  • When the filtering of the courses is done, the corresponding menu item should be highlighted with the selected class
  • You can do that easily using the toggleClass() function
  • For example, you can toggle the selected class on the Arts area:

$(".menu-ar").toggleClass("selected");

  • If you do this, both the menu items in the large and small screens’ menu will be affected by the selected class
  • Certainly, before you apply the selected class to the new filtered area, you have to remember to take away the selected class from the previously filtered area, which can be easily obtained using JQuery
  • Here is an example of filtering the courses by clicking on the English Communication area:

[build the code]

Step 4. Making the Webpage Responsive:

  • If you read know how to use the @media rule in CSS, you will find that it is extremely easy to make this webpage responsive
  • It is always a case of finding a certain display width and applying appropriate CSS properties
  • In this lab, you will work on two parts:
  1. Making the top-level menu responsive
  2. Making the course list responsive

Step 4.1. Making the Menu Responsive:

I mean what is the last part of this lab, is that we need to make the two top-menus show at the appropriate time.

  • Rather than making it complicated by using the word responsive, simply speaking, we want to show only one of the menus at any one time
  • The decision to choose one menu over another is then based on the size of the screen display
  • To determine the screen size that help you select which menu to use, you can experiment it using the Chrome device emulator
  • Inside the emulator, you can render the page using Responsive rather than a particular mobile device
  • You will then be able to adjust the width of the screen display so that you can find the breakpoint, i.e. the width that is going to break the style of your page
  • For instance, the above image shows that the width (=480px) breaks the larger top-level menu so that the menu items cannot be shown correctly
  • You can then use two @media rules to hide the menu for large screens and small screens appropriately, i.e.

[build the code]

so now let’s come to the last final steps

Step 4.2. Making the Course List Responsive

  • Finally, you need to make the course list responsive
  • As you can see from the webpage, there are always four courses shown in each row of the list
  • This is controlled by setting the width of each course container to 25%, which you can find inside the style sheet
  • Similar to what you do for the menus, you can use the Chrome emulator to help you find breakpoints
  • This time, you can find several breakpoints so that you can have 4 courses per row, 3 courses per row and so on
  • To make the list to have, say, 3 courses per row, you simply adjust the width of the course container to 33%
  • Therefore, you can have three @media rules to control the number of courses to show for each row, like this:

[build the code]