Intro to Web Design

TQS11QW5

Embed Fonts in CSS

~ Web design

9Objectives

  • 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
Google Fonts

Fan Site – Code

~ Web design

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 Friday, January 18, 2019 before 10 pm.

  • 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

~ Web 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 an 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 Thursday, January 10, 2019
  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 18, 2019
I will not be accepting anything after the deadline.

MP3 Exam – January 17, 2019

Fan Site – Wireframes

~ Web design

Objectives

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

  • Create a multi-page fan website
  • Create  wireframe options for your webpage

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.

Requirements

  1. Layout 1 – Create wireframes for the home page and one secondary page (2 pages).
  2. Layout 2 – Create wireframes for the home page and secondary page (2 pages).
  3. Once you have complete and we (teacher and student) have chosen one, you will complete the remaining pages (3 pages) in that specific layout option.
  4. Resources/references needed. (Place URL into the comments)
  5. Format: Google Docs, WIreframe.cc, Photoshop.

Folder name: Last Name_First Name-Wireframes

You will submit 7 (minimum)pages into the folder.

Upload sharable link to the Google Classroom > FanSite – Wireframes

Due Thursday, January 3, 2019