Website Design

HTML: The Basics

• Introduction to HTML

  • Authoring Software

  • Adobe Dreamweaver

  • Notepad

  • Komposer

    • Online

    • Google Sites

    • Facebook

    • Myspace

    • wikispaces

    • pbwiki

    • WordPress

      • etc.

  • Content Management Systems (CMS)

  • Lets check Wikipedia!

• File Manager

  • Browsing Software

  • Internet Explorer

  • FireFox

  • Opera

  • Chrome

  • Safari

  • other

• HyperText Markup Language (HTML) HTML and CSS in Pictures

  • Tags and Attributes

• Basic Document Creation

• Hex Codes and Colours

• HTML Questions and www.w3schools.com

• http://www.w3schools.com/html/

• Work on "HTML Practice Exercises"

• Graded Exercise: Exercise

  • CSS Instruction (w3schools)

    • Inline

    • Internal

    • External

• CSS Question Sheet

  • Timed Graded HTML Exercise

• Graded Project: Fan Website

Google Sites

• Google Sites: Old and New

  • Parts of the Screen

  • Google Sites Skills

    • Create Account

    • Create Site

    • Create Pages

    • Edit Pages

    • Edit Navigation

    • Add Sidebar Items

      • Navigation

      • Text

      • Countdown

    • Share Settings

    • Modify Themes

    • Add and Modify Text

    • Formatting: bullets, fonts, headings, etc.

    • Add Media: images, video, etc.

    • Edit HTML tags

    • Manage Page Layout

    • Add and Modify Tables

    • Attachments

    • Comments

    • Gadgets

    • Video

    • Calendar

    • Fav Icon

    • etc.

Google Sites: Sports Team

• • Google Sites Sports Team Web Site

  • Brainstorming

  • Content

  • Navigation

• Design Process

• Google Sites Sports Team Web Site

• Security: Ethics and Legalities

Other Online Development Sites

• WordPress

• Wix.com

• Additional Online Web Development Options

Online Portfolio

• • Instructions provided in class

Site Design

• Site Planning

  • • Content Outline

    • Site Diagram

    • Page Description Diagrams

    • Wireframes and Page Layout

    • Navigation and The Flow of Information

    • Aesthetics

      • Colour Scheme

      • Graphics: Dimensions and Sizes

    • Typography

• The Design Process

• The Web Site Design Process

Introduction to Adobe Dreamweaver

• Adobe Dreamweaver

  • • Screen

    • Features

• Image Map Exercise

• Favicon Exercise

• Dreamweaver Investigation Exercise

• • CSS

  • http://www.w3schools.com/

  • http://www.w3.org/

  • CSS Navigation Exercise

  • DIV Tags

  • Introduction to <DIV>

  • HTML Layout and the DIV tag

  • Try it yourself!

  • DIV Tags and CSS with Adobe Dreamweaver

  • DIV - CSS The Box Model

• http://960.gs/

Trip Planning Website with CSS

• Instructions

  • Trip Website Template

    • Brainstorm Ideas

    • Basic Navigation and Structure

  • Trip Website Template

  • Functionality

  • Aesthetics

  • Sharing

The Restaurant Website

• • The Restaurant Website Exercise (See Handout)