Difference between revisions of "Week Five (MGDP2050)"
Karl Jones (Talk | contribs) (→CDNs for web designers) |
Karl Jones (Talk | contribs) (→Reading) |
||
| Line 132: | Line 132: | ||
* [[Cascading Style Sheets]] | * [[Cascading Style Sheets]] | ||
| + | * [[Content delivery network]] | ||
| + | * [[JavaScript]] | ||
| + | * [[jQuery]] | ||
Revision as of 11:21, 16 February 2016
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).
Contents
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-response 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.
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
I recommend absolute paths as easier to use (as compared with relative paths).
CDNs for web designers
Content delivery networks (CDNs) are commonly used in web design for libraries and frameworks, including:
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.
Cascading Style Sheets
Reading: Cascading Style Sheets.
Selectors
In CSS, a selector specifies the HTML elements which will be selected by the rule.
Fundamental selectors
Fundamental selectors:
HTML element selectors
HTML element selectors select elements based on element type.
ID selectors
ID selectors select elements based on the ID attribute of a single HTML element.
Class selectors
Class selectors select elements based on the class attribute of one or more elements.
Other selectors
Many other kinds of selectors exist, for a wide range of purposes.
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
Exercises: in class
...
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
Make this page display ...
