Web 2 - Opening Activities (Min. Days)

Day 1 - (Min. Day)

Start Document: Activity 1
Start PowerPoint: Welcome to Class

Video - PowerPoint Class Lecture - Part 1


Day 2 - (Min. - Day)

Finish Document: Activity 1

Finish PowerPoint: Welcome to Class

 

Discuss Document: Web Design Syllabus

Start Document: Activity 2

Learn Student Login or Use personal school gmail account



Day 3 - (Min. - Day)

Finish Document: Activity 2

Go to Online Notes:

* Web 2 Video: What is the Internet? - Vinton Cerf (father of the Internet)

Web 2 Video: Meet the Father of the Internet: Vinton (Vint) Cerf

Alternate View:
Web 2 Video: Who Invented the Internet and Why?

Web 2 Video: What is the Internet? BBC - What's New


* Web 2 Video: Discover the Physical Side of the Internet



Day 4

* Web 2 Video: Wires, Cables, and Wifi

Review

File Extensions (notes and change PC settings)

Classifications - Animal (explore)

Categorization - Target (explore)

Animal Sort Zip - Download and Extract

Target Sort Zip - Download and Extract

Always use FireFox Developer Edition

Map Network Drive: \\fs01-chs\classroom

Go to Online Notes:

Keyboard Shortcuts (notes)


Day 5

File Extensions (create text files and change extensions)

Categorization - Characters (explore)

Categorization - Web File Extensions (explore)

Characters Zip - Teacher led review. Sorting Character Images (practice and apply keyboard shortcuts)

Web File Extensions Zip - Sorting Common File Extensions (practice and apply keyboard shortcuts)

Target Sort Zip - Sorting Product Images (practice and apply keyboard shortcuts)

Server Permission Forms

 


Day 6

Collect Permission Forms

Complete Activity .25

Build File Extensions Advanced (Hidden) - Fake Files

Setup Dreamweaver (connect to CHS Local Server and CHS Online Server via FTP)

Create Folder Structure on CHS file server

How FTP Works (white board lecture)

GoDaddy FTP Video

FTP Setup
School Year: 2017-2018
Student:Oscar Toad
Period: 7
SID: 123456

Username: otoad072017@chsserver01.org
Password: Otoad123456!

Dreamweaver FTP Client Setup

FTP Server option: 142.4.2.162 or ftp.chsserver01.org



Day 7

Example FTP Setup

Complete Activity .25

Review DreamWeaver FTP Client Setup options

Option: 142.4.2.162 or ftp.chsserver01.org

IP Addresses - Check Your IP Address

DNS Servers - Video up to 2:30

Domain Names Explained - Video

Search for a Domain Name - Go Daddy Search

Domain Name Extensions

.com, .net, .org, .info

.gov, .mil, .edu, .us

Extension Release Timeline

Explain and Research Web Hosting (Shared, VPS, Dedicated)

BlueHost | GoDaddy | HostGator | DreamHost

Hosting Video

Setup School Email Account on Workstation

Search for a Domain Name - Go Daddy Search

Email Domain Name to Teacher


Day 8

Create Seating Chart

Kahoot Etiquette

Kahoot - History of the Internet

Setting Up - Students must be able to setup multiple workstation, Dreamweaver, and FTP connection on multiple workstations

Configure workstation:

  • Setup browser - homepage to CHS, chagoyan.com, and online web page (Firefox DE)
  • Unhide fie extensions
  • Set Dreamweaver preferences
    • Font
    • Interface - theme
    • Real-time Preview (F12 Browser)
    • Workspace Customization
    • Local Server - \\fs01-chs\classroom | Mac
    • Web Server FTP - chsserver01.org

      FTP Client Setup

      Option: 142.4.2.162 or ftp.chsserver01.org


Day 9

Activity - Zip and Email File

Creating a Compressed File (me.zip) - Create a folder with 5 Images(things about you)

Emailing a Compressed Folder (to another student in class)

Open and Extract Received Compressed File

Setting Up - Students must be able to setup multiple workstation, Dreamweaver, and FTP connection on multiple workstations

Configure workstation (setup videos):

  • Setup browser - homepage to CHS, chagoyan.com, and online web page (Firefox DE)
  • Unhide fie extensions
  • Set Dreamweaver preferences
    • Font
    • Interface - theme
    • Real-time Preview (F12 Browser)
    • Workspace Customization
    • Local Server - \\fs01-chs\classroom | Mac
    • Web Server FTP - chsserver01.org

      FTP Client Setup

      Option: 142.4.2.162 or ftp.chsserver01.org


Day 10

Linking Paths

Whiteboard Lecture

- Relative and Absolute Paths

- ../, foldername/, filename.ext

- Review exernal stylsheets - Code

<link rel="stylesheet" href="masterstyles.css">

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


Day 11

Relative, Absolute, and Root Relative Paths

Online Notes:

  • Relative Path
  • Absolute Path
  • Root Relative
  • ../ - Go up a folder
  • foldername/ - Go into folder
  • filename.ext - Get the file
  • Z:\\Images\Cars\Toyotas\
  • http://yahoo.com/news/politics/
  • / (go to the root where the index.html file lives)
MonkeyTrail-Jared | Handout - Jared

Relative Path is the path from the current file location. No starting point is given.

  • Images/
  • Clipart/dog.jpg
  • ../../Images/Cats/Dead

Absolute Path is the path from a given starting point

  • C:\MyDocuments\Photos\me.jgp
  • http://yahoo.com/sales/discount.html
  • http://chswebdesign.com/critchie022014/index.html

Root Relative is the path from the root directory where your index.html is stored. It starts from the domain name and only works when online (on the web server).

Example: biography.html | Image | Nested Path

  • /css/masterstyles.css works the same as http://domainname/css/mastersytles.css
  • /scripts/slideshow.js works the same as http://domainname/scripts/slideshow.js

Read w3schools.com - html file paths


Day 12

Part 1

HTML5 and CSS - What Colors Mean 
Download and markup 
image - screenshot -  HTML5code (Use Sublime)

 Web Design Syllabus 
Download and markup with HMTL5 
image - 1 : 2 : screenshot - HTML5code (Use Sublime)
* You may use your own images to create a syllabus for Mr. Chagoyan (or for you, if you were a teacher).


Day 13

Part 2

The purpose of the meta charset: <meta charset="utf-8"> -

HTML5 and CSS - What Colors Mean 
Download and markup 
image - screenshot -  HTML5code (Use Sublime)

 Web Design Syllabus 
Download and markup with HMTL5 
image - 1 : 2 : screenshot - HTML5code (Use Sublime)
* You may use your own images to create a syllabus for Mr. Chagoyan (or for you, if you were a teacher).

Begin Q1 Section of website (Activity 6)