Unit Overview

   Name: Maria Vasiliu

Curricular Area:ITC

Topic or Theme: WebDesign

Grade Level:  10

Big Ideas:   At the end of this course, students will be able to create a useful and efficient website   

 Resources: Checking for Prior Knowledge:
Students need basic knowledge about computers, Internet, Graphics and typing skills. It is a plus if they already have some assests prepared for their "Portfolio" project
   
Lesson # Topic Objectives/Learning Outcomes Activities

Materials:

 Assessment/Criteria
1. Course Overview+ Planning and preparing for a web project

Students will understand:
1. the criteria which make thier site to be a good one
2. The importance of searching efficiently and safely the Internet
5. The Ethics of this issue

1. Course Overview
2..Criteria needed for a good webSite
3. How to search the Internet efficiently
4. Creating students'blogs

planning-sheet

PPS-evaluating websites

1. How students understand the criteria which define a good website
2. How students understand to search safely and efficiently the Internet

2. HTML basics

-Students will know how to :
Write the basic tags in HTML for creating a Web Page:
-title/headings/paragraph/links

1. Intro:Blog Entry
2. Teacher/Students discovery-work
2*Students work on their own-have tasks
3. Closure: Blog Entry

HTML guide

-blog entries
-Questions answered thoughtfully
-The assessment of students’ ability to create simple tags in HTML and understand how they work
3 HTML basics continue

use HTML for:

-formatting text, lists, rules

1. Intro:Blog Entry
2. Teacher/Students discovery-work
2*Students work on their own-on tasks
3. Closure: Blog Entry

HTML guide

-blog entries

-The assessment of students’ ability to format text, create lists, use rules, etc.
4 HTML basics continue

Students will know how to use HTML for images:

-sizing, resolution, interlaced, animation, images as hyperlinks, embedding Flash and Sound

1. Intro:Blog Entry
2. Teacher/Students discovery-work
2*Students work on their own -on task
3. Closure: Blog Entry

HTML guide

-blog entries
-Questions answered thoughtfully
-The assessment of students’ ability to use HTML for sizing images, control their resolution, animation, use them as hyperlinks, embedding flash and sound in HTML files.
5 HTML basics continue

Students will know how to use HTML for :
-Background Attributes
-Changing Font Size, Color, and Face
-Tables

1. Intro:Blog Entry
2. Teacher/Students discovery-work
2*Students work on their own -on task
3. Closure: Blog Entry

 

HTML guide

-blog entries
-Questions answered thoughtfully
-The assessment of students’ ability to control:
-BackgroundAttributes
-Changing Font Size, -Color, and Face
-Using Tables
6 HTML basics continue HTML Review

1. Intro:Blog Entry
2. Teacher/Students discovery-work
2*Students work on their own
3. Closure: Blog Entry

task criteria developed for this task
7 HTML basics continue HTML test test test criteria developed
8

Dreamweaver Basics

Students will know how to:
-Set up a new site
-Create a new page

*They will familiarize themselves with panels, inspectors, tools

1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handouts
3. Closure: Blog Entry

PPS-Developing your site

PPT-Dreamweaver Basics

-blog entries
-The assessment of students’ ability to use the new info critically -Teacher’s observation on how students :
-set up their own site and page
9 Dreamweaver-Adding content to a page

Students will know how to :
*place text on a page
*organize content into logical sections
*position and format text

1. Intro:Blog Entry
2.Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own -continue the Sangha Yoga project-handsout
3. Closure: Blog Entry

  • Assets: Yoga-Sangha project files
  • handouts
*blog entries
*The assessment of students’ ability to :
- structure the text by using headings and paragraphs
- incorporate line breaks and non-breaking spaces to control the flow of content
-create lists
- apply in-line character formatting
* Teacher’s observation on how students :
- Work on their own
10 Dreamweaver- Links-Part1

Students will know how to: -Create links in text to other documents
- Use anchors to jump to different parts of the page
- Create e-mail links

1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handouts
3. Closure: Blog Entry

-blog entries
- The assessment of students’ ability to :
* Create text links to pages within the project site as well a link to an outside site
* Target a link to open in a new window
*Insert named anchors for each section of a document and link the corresponding titles of those sections to each named anchor
- Teacher’s observation on how students :
* Learn to create e-mail links using the Insert  bar and manually using the Property inspector’s Link text field
* Work on their own
11 ?!!!!

Dreamweaver- Links-Part2

Site MAP-?!!!

 

1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handouts
3. Closure: Blog Entry

  • Assets: Yoga-Sangha project files
  • handouts

-blog entries
- The assessment of students’ ability to :
* create section folders and placeholder files
*use the Files panel and site map to create and view links

12 Dreamweaver- CSS-Part 1

Students will know how to :

  • set the background color of the page
  • apply text attributes including font, color, and size
  • create an external style sheet
  • add styles to an existing style sheet
  • edit a style

1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handouts
3. Closure: Blog Entry

-blog entries
- The assessment of students’ ability to :
* Specify a background color and font
* Create an internal style to use the same text formatting quickly and easily
* Create a class that can be applied to different kinds of text formats
* Convert internal styles to external ones so they can be used by other docs
13 Dreamweaver- CSS Part2

Students will know how to :

    • Link to an external style sheet
    • Create an internal style
    • Convert internal styles to external styles
    • Create a basic page layout
 Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handsout
3. Closure: Blog Entry
  • Assets: Yoga-Sangha project files
  • handsout
-blog entries
- The assessment of students’ ability to :
* Link to an external style sheet from another doc to use the same font formatting
* Create external styles specifying text formatting that can be used to maintain consistency in the look of text throughout a website
* Add multiple styles to an existing style sheet by redefining HTML tags
* Edit a style in the external style sheet to affect all docs linked to it
* Create a basic box with a div and CSS class
14 Dreamweaver- Graphics -1

Students will know how to :
- identify graphics formats and explore their differences
- insert graphics into a page
- modify the properties of your image
- change the positioning of the graphics on a page
- give your images names and alt attributes

 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handouts
3. Closure: Blog Entry 		-blog entries
- The assessment of students’ ability to :
* Use background image
* Accessibility issue
* Resizing images and reset them to the original dimensions
* Positioned images
14' Dreamweaver- Working with graphics-2

Students will know how to: -Use assets panel to manage graphics
- Wrap text around an image
- Make use of image placeholder
- Use basic image-editing tools to adjust graphics

 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handouts
3. Closure: Blog Entry
  • Assets: Yoga-Sangha project files
  • handouts
 -blog entries
- The assessment of students’ ability to :
* use the Assets panel to manage images in the site
* adjust the space around an image
* insert an image placeholder
15 Dreamweaver-Tables

Students will know how to :

  • create tables to control the layout of  their pages
  • modify the table properties
  • create accessible tables
  • modify tables
  • sort
  • using Layout mode
 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handouts
3. Closure: Blog Entry
  • Assets: Yoga-Sangha project files
  • handsout
-blog entries
- The assessment of students’ ability to :
* create a table in standard mode
*import data from an external doc
* modify table properties
*sort the info
* inserting images
* nested tables
* use tables to lay out the pages in Layout mode
16 Dreamweaver- Templates

Students will know how to :

  • Create templates
  • Add editable regions to a template
  • Build multiple pages based on a template
  • Update a site by changing the template
 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handoust
3. Closure: Blog Entry 		-blog entries
- The assessment of students’ ability to :
* Create a template from an existing by saving the page as a template
* Add editable areas to the template to allow changes to be made on pages built from that template
* Build  multiple pages based on the template to create pages with the same layout
17 Project1-Group work see WebQuest page see WebQuest page see WebQuest page see WebQuest page
18 Project1 see WebQuest page see WebQuest page WebQuest page see WebQuest page
19 Project1 see WebQuest page see WebQuest page WebQuest page see WebQuest page
20 Project1 see WebQuest page see WebQuest page WebQuest page see WebQuest page
20 Project1-Group Presentation     see WebQuest page
22 Dreamweaver- Multimedia

Students will know how to :

  • Work with Flash text to quickly create text
  • Insert buttons and animations from Flash
Develop a slideshow using the image Viewer		 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handsout
3. Closure: Blog Entry
  • Assets: Yoga-Sangha project files
  • handsout

-blog entries
- The assessment of students’ ability to :

*create Flash text *modify Flash text
* add and modify Flash buttons
* add Flash animation
* use the Image Viewer to create a slideshow
23 Dreamweaver- Interactivity

Students will know how to :

  • create rollovers
  • add user interactivity to their pages by using behaviors
  • create a pop-up menu
 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handsout
3. Closure: Blog Entry 		-blog entries
- The assessment of students’ ability to :
*create  basic rollovers
* edit behaviors by choosing different events and adding actions while creating a pop-up message
* make multiple images on the page change when the user rolls over one by adding multiple behaviors to one user action
* create a Java script pop-up menu with multiple menu items
24 Dreamweaver- Creating Layers

Students will know how to :

  • Create layers
  • Name layers
  • Modify layer size and location
  • Nest and unnest layers
 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handsout
3. Closure: Blog Entry
  • Assets: Yoga-Sangha project files
  • handsout
-blog entries
- The assessment of students’ ability to: *create layers by drawing them in the Doc window and by inserting default presized layers
*name layers to keep track of them in the Layer panel
*select single and multiple layers, modify their size and location, and align them relative to each other
*use layers to control the placement and display of content on the page
* use nested and unnested layers to understand how layers can work in groups
25 Dreamweaver- Managing the site

Students will know how to :

  • Use the File panel
  • Perform site-management functions within the Files Panel

-Students will understand the difference between a local site and a remote site
Students will know how to:

  • set up a connection to a remote site
  • copy files to and from a remote site
 1. Intro:Blog Entry
2. Teacher/Students discovery-work on Sangha Yoga project file
2*Students work on their own-continue the Sangha Yoga project-handsout
3. Closure: Blog Entry 		-blog entries
- The assessment of students’ ability to : *Perform site-management functions within the Files panel, including creating new files, moving them, etc.
* Use the Update Files dialog box to ensure that their paths and links stay correct when they move the files
* Copy files to and from a remote site using the Select Newer Local command to save time
26 Project2- Individual work see Project2 page see Project2 page see Project2 page Criteria developed for Project2
27 Project2 see Project2 page see Project2 page Project2 page Criteria developed for Project2
28 Project2 see Project2 page see Project2 page Project2 page Criteria developed for Project2
29 Project2 see Project2 page see Project2 page Project2 page Criteria developed for Project2
30 Project2-Presentation     Criteria developed for Project2
   
back to the top