Week Five (MGDP2050)

Lecture notes and exercises for Week Five of Web Design and Development II (MGDP2050).

No classes next two weeks!

• Next class session is March 8 (Week Six)

See also Week Four (MGDP2050) - Week Six (MGDP2050).

Your HTC email

Please make sure you receive and see your email at your HTC email account.

The class emailing list is based on D2L, which uses your HTC email.

Have your work online for technical assistance

See Technical support for students (MGDP2050).

When requesting technical assistance by email:

• Have your work online at your classroom website
• State the topic in the subject line of your email
• Describe the problem
  • Be concise, brief, clear, and thorough
• Give your best guess about the problem and how you might fix it
• Include a link to the page where the problem occurs

Review

Responsive images

A responsive img element resizes to fit its container.

The container is the nearest HTML element which encloses the img element.

Do not confuse container, as used here, with the Bootstrap .container class.

In Bootstrap, you use the .img-responsive class to make an image responsive.

See Bootstrap responsive image.

File Transfer Protocol

Use a File Transfer Protocol client of your choice. They all do the same thing, more or less.

Remember to exit your FTP client program after doing your file transfers.

• Applies specifically to this class, because of limited connections
• Not a problem in most real-world situations

See File Transfer Protocol.

Absolute paths

Absolute paths are one of several ways to specify a path from a web page to an external resource.

This applies to external style sheets, and external JavaScript files.

• Only style sheets and JavaScript files which you host on your own web site
• This does not apply to style sheets or JavaScript files you access via Content delivery networks

Absolute paths begin with a forward slash (/) character.

Example: making a link to an external style sheet:

<link href="/bootstrap/css/bootstrap.css" rel="stylesheet" />

Custom CSS:

<link href="/mgdp2050.css" rel="stylesheet" />

I recommend absolute paths as easier to use (as compared with relative paths).

A relative path looks something like this:

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />

Custom CSS (if in subfolder):

<link href="../mgdp2050.css" rel="stylesheet" />

Custom CSS (if in home page):

<link href="mgdp2050.css" rel="stylesheet" />

The "../" indicates "move one level closer to the root."

CDNs for web designers

Content delivery networks (CDNs) are commonly used in web design for libraries and frameworks, including:

• Bootstrap
• jQuery

CDNs are free, easy to use, and nearly always available.

You may wish to host your own web files, rather than using CDNs, in order to have more control over your files. Even if you choose to use CDNs, you should still know how to host your own files, because this is a basis skill.

Fundamental CSS Selectors

In CSS, a selector specifies the HTML elements which will be selected by the rule.

Fundamental selectors include:

HTML element selectors

HTML element selectors select elements based on element type.

An HTML element selector consists of the HTML element itself.

Example, CSS rule to make all paragraphs red:

p { color: red; }

ID selectors

ID selectors select elements based on the ID attribute of a single HTML element.

ID selector rules begin with a pound sign, or hash mark (#).

Example, CSS ID selector rule to set width of HTML element:

 #example { width: 1100px; }
 #example { color: green; }

The element itself might look like this:

 <div id="example">
   <!-- more content and HTML elements here -->
 </div>

Class selectors

Class selectors select elements based on the class attribute of one or more elements.

Class style rules begin with a period (.).

Example, CSS class selector rule to set colors:

 .example 
  {
   color: red;
  }
 .example2
  {
   background-color: yellow;
  }

The HTML elements might look like this:

 <p class="example">
   This paragraph has red text.
 </p>

 <p>
   This paragraph has default styles.
 </p>

 <p class="example class2">
   This paragraph has red text and yellow background.
 </p>

Note how the third paragraph has two class styles: red text, yellow background.

Other CSS selectors

Many other kinds of selectors exist, for a wide range of purposes.

We will discuss some of them in later class sessions.

Bootstrap grid

The grid is Bootstrap's web page layout structure.

It is built from units of twelve. Use it to create columns.

See:

• Bootstrap grid
• Examples @ getbootstrap.com
• Examples @ bootstrap.karljones.com

Exercises: in class

No in-class exercises.

Open lab after lecture.

Exercises: for next class session

Create folders

In your local root folder, create new folders named:

• bootstrap-2-column (Two-column bootstrap exercise)
• bootstrap-3-column (Thtree-column bootstrap exercise)
• bootstrap-nested-column (Nested column bootstrap exercise)
• bootstrap-custom-template (Custom template exercise)

Create web pages

For each new folder, create a web page named index.html.

• Each page must use your standard Bootstrap exercise styles and layout
• Also set page titles accordingly
• Give each page enough content to fill up the page
  • Both text and responsive images
  • May be actual content, or lorem ipsum

Two-column Bootstrap

Make this page display a two-column Bootstrap layout.

Three-column Bootstrap

Make this page display a Three-column Bootstrap layout.

Nested Bootstrap

Make this page display a nested Bootstrap layout.

Bootstrap custom template

Browse the Bootstrap example templates:

• Using the framework

Pick one of the examples:

• Your choice
• Something related to your project might be useful
• Be ambitious

Implement the example in your Custom Bootstrap Template page.

You will need to change the paths to external style sheets and external JavaScript files.

You may need to download additional files, and upload them to your own website.

• You can do this using View Source, and following the link to the file you need

Finishing up

Make a link from your Home Page to each of the individual exercise pages.

Upload all work to server.

• Instructor will review next class session.

No class, next two weeks

This means you have plenty of time to:

• Finish this week's exercise
• Finish or improve exercises from previous weeks
• Think about your project
  • As you work on the Bootstrap grid exercises, be thinking about how you will use the grid in your project

Reading

• Cascading Style Sheets
• Content delivery network
• JavaScript
• jQuery