Embed Fonts in CSS

Objectives

  • Apply CSS3 standards to embed fonts to a website with the use of @font-face rule
  • Apply steps to embed a viedo

@font-face Rule

In the @font-face rule, you must first define a name for the font (e.g. myFirstFont) and then point to the font file.

Note: Use lowercase letters for the font URL.
Uppercase letters can give unexpected results in IE!

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Demo – Accessed from an External URLfont-face-demo1


Demo – Accessed from the Root folder


Adding Youtube Videos to a Web Page


Placing videos on our web pages is not complicated.

  • Videos can make our pages more interesting and engaging.
  • Most video-hosting services, such as YouTube, will provide us with HTML code ready to copy and paste into our web page.

Click here for step-by-step instructions


References
Using @font-face
CSS3 @font-face Rule

CSS3 Background Properties

Objectives

  • Create a fully constrained background fullscreen
  • Manipulate the opacity/transparency of a background color

Background

The background-size property specifies the size of the background images.
The size of the image can be fully constrained or only partially in order to
preserve its intrinsic ratio.

If the background-size is contain or cover:
The image is rendered, preserving its intrinsic proportion, at the largest
size contained within, or covering the background positioning area.
If the image has no intrinsic proportion, then it is rendered at the size of
the background positioning area.

fullscreen-bkgd


Opacity/Transparency

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color. An RGBA color value is specified with rgba(red, green, blue, alpha). An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

transparency


References
CSS background-size
CSS Background
CSS3 Colors

Fan Site – Code

Objectives

  • Create a vertical navigation or horizontal navigation
  • Use the background property
  • Nested and float elements
  • Create layers within CSS

Overview:

Create a fan website containing a home page and four additional pages.

Requirements

  • Directory structure
  • External Style Sheet

Instructions

Begin creating your personal website that complies with the following:

  1. The page is 960 pixels wide and centered on the screen, no matter the screen resolution.
  2. All pages have a header section, nav section, content section, and footer section.
  3. All pages have a navigation menu that includes links to all pages on the site.
    The navigation menu can be horizontal (between the header and main content area) or vertical (left side of the main content area) but must be consistent for all pages.
  4. All pages use the same color scheme/palette and consistent fonts and text colors.
  5. All styling is accomplished via an external CSS style sheet.

HTML and CSS  – DUE Tuesday, January 16, 2018

  • Homepage (index.html)
  • Second page (e.g. boi.html)
  • Third page (e.g. boi.html, name the files accordingly)

Upload sharable link to Google Classroom > Fan Site – Website

Folder name: Last Name_First Name-FanSite.

If you submit after the deadline it will be an INCOMPLETE

Fan Site – Design

A Fan Website

Objectives:
At the end of this project, you will be able to:

  • Design multiple pages for a fan site
  • Optimize images for the web in a photo editing application (Adobe Photoshop)
  • Crop and or re-size image

Website Overview

Create a fan website containing a home page and four additional pages.
This site can be about your passion for music, movies, books, games or other types of entertainment. Let it be something you are interested in.

Requirements

  1. Design (Photoshop/Image editor file)  – DUE Tuesday, January 9, 2018
  2. File names: projectName-home.PNG or JPG, projectName-gallery, etc.
    (eg boxing_home, boxing-gallery)
  3. Folder name: Last Name_First Name-Design

Setting up the Photoshop Document

Choosing a Color Palette/Scheme

Dates are subject to change.

Project DUE – January 17, 2018
I will not be accepting anything after the deadline.

MP3 Exam – January 11, 2018