Web 2 - Opening Activities (Min. Days)

Day 1 - (Min. Day)

Document: Activity 1
PowerPoint: Welcome to Class

Day 2 - (Min. - Day)

Document: Web Design Syllabus

Document: Activity 2

Web 1 Video: What is the Internet?

File Extensions (notes)


Day 3 - (Min. - Day)

Go to Online Notes:

Web 1 Video: What is the Internet?
Web 2 Video: Meet the Father of the Internet: Vinton (Vint) Cerf
Web 2 Video: Who Invented the Internet and Why?


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

File Extensions (notes)

Classifications - Animal

Classification - Target

Animal Sort Zip - Download and Extract

Target Sort Zip - Download and Extract

Day 4

Go to Online Notes:

Keyboard Shortcuts (notes)

  • ctr+-c = copy
  • ctrl+x = cut
  • ctrl+v = paste
  • ctrl+z = undo
  • ctrl+y = redo
  • ctrl+f = find
  • ctrl+a = select all items
  • ctrl+n = create new folder
  • ctrl+w = close current window
  • alt+tab = navigate programs
  • alt+up arrow = go up one level
  • alt+left arrow = go back
  • alt+right arrow = go forward
  • F1 = access the help feature
  • F2 = rename current selection
  • F5 = refresh current window
  • window logo key + d = minimizes all windows and show desktop
  • window logo key + up arrow = maximize current window
  • window logo key + down arrow = restore current window
  • window logo key + left arrow = place window left
  • window logo key + right arrow = place window right
  • window logo key + m = minimize all windows
  • window logo + l = lock windows
  • esc = cancel
  • backspace = up a folder
  • enter = open folder (when selected)
  • shift + F10 = right click menu

File Extensions (notes)

  • .xls = MS Excel (old)
  • .xlsx = MS Excel
  • .mdb = MS Access (old)
  • .accdb = MS Access
  • .doc = MS Word (old)
  • .docx = MS Word
  • .ppt = PowerPoint (old)
  • .pptx = PowerPoint
  • .mov = Apple Quicktime
  • .mp4 = Movie file
  • .gif = image file
  • .jpg = image file
  • .png = image file
  • .svg = image file
  • .mp3 = audio file
  • .wav = audio file
  • .html = web file
  • .css = web style file
  • .js = javascript file
  • .rtf = rich text format

Classifications - Animal

Categorization - Target

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

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

Creating a Compressed File

Emailing a Compressed Folder (to teacher)


Day 5

Complete Activity 0

Server Permission Forms

Link to CHS File Server - \\fs01-chs\Classroom

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 Server Setup

What is JavaScript | Tiobe Index

Web 2 Examples

SGarza
AForrest
RCarlson

Target Sort Zip - Quick Review (practice and apply keyboard shortcuts)


Day 6

Complete Activity 0

Complete Activity .25

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

Create Folder Structure on CHS file server

Review - Build Index Page (Code with Teacher)


Day 7

Complete Activity 0

Complete Activity .25

Review - Build Index Page (Code with Teacher)

Day 8

Complete Activity 0

Complete Activity .25

Demonstration - External CSS
<link rel="stylesheet" href="masterstyles.css">

Demonstration - External JavaScript
<script src="scripts.js">   </script>

Review - Build Index Page (Code on your own)


Day 9

Complete Activity 0

Complete Activity .25

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

Configure workstation:

  • Setup browsers - homepage to CHS, chagoyan.com, and online web page (Firefox)
  • Unhide fie extensions
  • Set Dreamweaver preferences
    • Fonts
    • Code Coloring - theme
    • Preview in Browsers
    • Workspace Customization
    • Local Server - \\fs01-chs\classroom | Mac
    • Web Server FTP - chsserver01.org

Review - Build Index Page (Code on your own)

Examples:

Upgrade throughout the year...

medina | delacruz | droberts | mfertig


Day 10

Complete Activity 0

Complete Activity .25

Test FTP connection (upgraded to 60 concurrent connections)

Relative, Absolute, and Root Relative Paths

Whiteboard Lecture

Online Notes:

  • Relative Path
  • Absolute Path
  • Root Relative
  • ../ - Go up a folder
  • foldername/ - Go into folder
  • filename.ext - Get the file
  • / (go to the root where the index.html file lives)
MonkeyTrail-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.

Example: biography.html | Image | Nested Path

  • /css/masterstyles.css
  • /scripts/slideshow.js

Read w3schools.com - html file paths


Day 11

Video - CybarWar Threat (site)

Take Notes


Day 12

Relative, Absolute, and Root Relative Paths

  • Absolute Path
  • Root Relative
  • ../ - Go up a folder
  • foldername/ - Go into folder
  • filename.ext - Get the file
  • / (go to the root where the index.html file lives)

Hands On: - Jared.zip

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.

Example: Biography.html | Image | Nested Path

  • /css/masterstyles.css
  • /scripts/slideshow.js

Read w3schools.com - html file paths


Day 13

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 14

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 Practice Assignments