Chromebook Text Editor <txt> Link

---

Index:

1. Data Storage Assignment
2. Web Design Articles
3. Website Design Comparison
4. Photoshop Lesson
5. Imageready Lesson
6. HTML Introduction
7. Chapter 2 – HTML
8. Chapter 3 – HTML (attributes)
9. Chapter 4 – HTML (Images)
10. Web Site Review -Chapters 2-4
11. CSS
12. Dreamweaver Introduction
13. Chapter 5 – HTML (links)
14. Chapter 6 – HTML (Enhancement Tags)
15. Sound
16. Tables – HTML
17. Website Development Assignment

1. Data Storage  Click this link 

Essential Questions: Why is it important to learn about data storage when creating websites.

Objective:

• Students will be able to identify data storage vocabulary.
• Language Objective: To complete a data storage worksheet.

To the top

---

2. Web Design Articles

  Click this link

Essential Questions: Explain why web design concepts should be a major part of the planning process of a website?

Objective:

• Students will be able to identify web design concepts.
• Language Objective:  Students will read and complete a worksheet/Summary.

 To the top

---

3. Web Site Design Comparison Assignments Click this link:

Essential Questions:  Explain why web design should be a major part of the planning process of a website?

Objective:

• Students will be able to preview and identify good and bad website designs.
• Language Objective: To write out a list of pro’s and cons in a template on Google Classroom

 To the top

---

4. Photoshop Introduction

Essential Questions:

• How is learning a variety of different photo editing tools useful for future projects?
• What are the differences between web ready image formats

Objective(s):

• Students will be able to identify and utilize the basic operations of Adobe PhotoShop.
• Students will be introduce to image format.
• Language Objective: Students will create and manipulate images in Adobe Photoshop

• Introductions:

  • Image Formats:  https://1stwebdesigner.com/image-file-types/
  • Image Format Worksheet
  • Google Slide Presentation Link 
  • Layers Examples Video –  Layers Example – transparent-image-example
  • Layers in Photoshop

• Exercises:

  • Photoshop Workspace Introduction
    • https://arlington.instructure.com/courses/64908/assignments/43702?module_item_id=1177655
  • Photoshop Tools Worksheet:
    • https://arlington.instructure.com/courses/64908/assignments/43691
  • Lesson:  using tools on the tool bar in Photoshop
    • https://arlington.instructure.com/courses/64908/assignments/43693?module_item_id=1177648
  • Veggie Man Exercise
    • https://arlington.instructure.com/courses/64908/assignments/43702?module_item_id=1177655
  • Tutorial Assignment
    • Photoshop Tutorial Assignment – Place on Classroom
    • http://www.pegaweb.com/index.html

Extra:

• Landscaper Lesson-Photoshop

• Browse: Photoshop Tutorial-Beginner’s
• Tutorial # 1:  Complete one of these Photoshop Tutorials

• Photoshop Tutorial Assignment – Place on Classroom

• Extra:   Photoshop Lesson Selections

Image Formats:

• https://1stwebdesigner.com/image-file-types/
  • Image Format Worksheet
• https://www.sitepoint.com/gif-png-jpg-which-one-to-use/
• http://socialcompare.com/en/comparison/image-file-formats

To the top

---

5. Animation/Adobe Imageready

Essential Questions:

• How is animation used in everyday life?
• Explain how ANIMATION creates the illusion of movement?

Objective(s):

• Students will be introduced to Adobe Imageready for the purpose of creating web based animation.
• Language Objective: Students will be able to create animation from scratch using Adobe Imageready.

• Animation: Brings a picture to life.
  An Animated Gif contains 2 or more frames that are played back in sequence by an Internet Browser or other programs capable of displaying animated GIF’s.

STARROLL.GIF: 8,086 bytes, 59 by 59 25 frames of animation. Blue star spins 360 degrees. No pauses in this one. Color rediction to 2 bit could save some. (http://members.aol.com/royalef1/gifstogo.htm)	A dozen frames. Colorful notes float out of pumping speaker. Ideal for a WAV/AU download button. (http://members.aol.com/royalef1/gifstogo.htm)

1. 1. • ImageReady Introduction:
      • RIPPLE Effect Lesson
      •  expanding animated image.
      • Creating an animated banner
      • OK assignment

1. 1. • Online Gif Animators
        • Go Online and find a Gif Animator website you can use for free. (Example: http://gifmaker.me/)
        • Create an animation
        • A website for ideas: http://www.techsupportalert.com/best-free-animated-gif-maker.htm
      • Assignment:  In Classroom
        • DOC: Online Animation- Name of site, url, directions to make the animation, and your opinion of the site.
        • Attach: Your online animation
        • Attach: Your own creation/animation
        • Save both animations

 To the top

---

6. HTML INTRODUCTION

• Peanut Butter and Jelly Sandwich
• HTML Reference Chart

 To the top

---

7. Chapter 2:

Essential Questions:

• What is the structure of HTML?
• Why is it important to follow the W3C coding standards when creating and marking up Web content?
• What are the necessary steps in order to create a basic HTML document?
• What is HTML?

Objective(s):

Students will be able to:

• identify, hypertext, hyperlinks, hypermedia, HTML, web browsers, transfer protocols, and the HTML structure.
• identify HTML tag syntax, document section tags, text formatting tags, layout tags, and logical tags.
  • Language Objective: Students will complete the exercises in chapter 2 and preview their exercises in a browser.

Google Slide Link

save name:  firstname-Last name-5cp-chapter2exercises.html

• Open Notepad
  • Start
  • All Programs
  • Accessories
  • Notepad
    • o File Open
    • o Find your folder – chapter exercise folder
    • o Change the type to ALL FILES
    • o Click on your chapter 2 assignment

  Select the Computer Icon

  • Select the your folder
  • Select Webapp folder
  • Select Chapter Exercise Folder
  • Select the chapter 2 assignment

  Have the book open to chapter 2

• Quizlet Review
• Chapter 2 Quiz

To the top

---

8. Chapter 3:

Essential Questions:

• What are the necessary steps in order to create a basic HTML document?
• What is HTML?
• How do you control page layout?

Objective(s):

After completing Chapter 3, students will be able to identify general tag attributes for the and  tags and Character Reference tags.

• Language Objective: Students will complete the exercises in chapter 3 and preview their exercises in a browser.

• Chapter 3 Quiz

To the top

---

9. Chapter 4:

Essential Questions:

• How and why are images used on web pages?
• How does the computer utilize the binary and hexadecimal number systems to represent colors?
• Why is it important to consider the color scheme when designing a website?

Objective(s):

After completing Chapter 4, students will be able to identify inline image formats, image tags with attributes, and background images and color tags.

• Language Objective: Students will complete the exercises in chapter 4 and preview their exercises in a browser.

Image Formats:

• https://1stwebdesigner.com/image-file-types/
• https://www.sitepoint.com/gif-png-jpg-which-one-to-use/

• Icons http://www.freeicons.dk/
• BACKGROUND TAGS
• Background Colors
  • http://www.imagitek.com/bcs.html
  • http://www.rapidtables.com/web/color/RGB_Color.htm
  • http://www.htmlhelp.com/cgi-bin/color.cgi
  • http://instant-eyedropper.com/info/html_color_code/
• Background Images
  • http://www.freebyte.com/gallery/background_images.html#backgroundsstone
  • http://www.sfsu.edu/~jtolson/textures/textures.htm
  • http://www.grsites.com/archive/textures/category/7/texture/0/?bare=

• Chapter 4 Quiz

Images:

tractor.gif 

truck.jpg

barn

plane.png

To the top

---

10. Web Site Review-Chapters 2-4

Essential Questions:

• How is HTML formatting used to create visually appealing Web Pages?
• What are the common HTML tags (and their attributes) that are used for controlling color, formatting text, page layout, and graphics?

Objective(s):

• Students will be able to create a website based on their knowledge of html tags taught in chapters 3 and 4.
• Language Objective: Students will complete the chapter 2-4 MHS Assignment as a webpage.

Chapters-2-4-Review Assignment 

To the top

---

11.  CSS Introduction

Essential Questions:

• Why is the formatting of a website important?
• What are ways to make formatting a website easier?

Objective(s):

• Students will be able to identify CSS code and structure.
• Language Objective: Students will be able to practice incorporating CSS into a sample/tutorial file.

Activities:

1. CSS Intro Sample: 
2. Try Editor Samples:
3. CSS Syntax: 
4. Another live practice: 
5. CSS Element Selector: 
6. Style Sheet Examples/editor/preview: 
7. Complete and watch as many items on this website: 
8. Add CSS to your chapter 2-4 review,   How many of these css elements can you add to your chapter 2-4 review?

CSS Reference websites:

• https://www.beginnersguidetohtml.com/references/css
• https://lucas221.files.wordpress.com/2014/08/html-css-cheat-sheet-color.pdf

Online resources:

• http://www.beginnersguidetohtml.com/guides/css/introduction/what-is-css
• Slide Intro:https://www.teaching-materials.org/htmlcss/lesson4/slides#slide1
• http://css.maxdesign.com.au/selectutorial/rule.htm
• shortcuts http://css.maxdesign.com.au/selectutorial/rules_shorthand.htm
• External, Internal and Inline CSS Styles http://www.beginnersguidetohtml.com/guides/css/styles/external-internal-inline-styles

To the top

---

12. DREAMWEAVER INTRODUCTION

Essential Questions:

• Why would someone want to use an HTML editor instead of coding directly?

Objective(s):

• The student will be introduced to Dreamweaver
• Language Objective:  Students will utilize the functions in Dreamweaver.

flower1.jpg

flower2.jpg

• Step by Step Dreamweaver Tutorial
• Simple Dreamweaver Exercise
• Intro pages 2-8:  Exercise: Pages 9-24 http://www.yorku.ca/jjenson/gradcourse/gamecourse/Dreamweaver.pdf

Reference:

• http://web.wellesley.edu/Computing/Dreamweaver/dreamweaverMXbasics.html#text
• https://apps.state.or.us/tech/htdocs/dreamweaver/dwmx_tutorials.pdf

To the top

---

13. Chapter 5

Essential Questions:

• Why are links useful in web design?
• How is the navigation structure designed to be consistent across all of the pages in the website?

Objective(s):

After completing Chapter 5, students will be able to identify hyperlink action results, hyperlink formatting, and hyperlink tags with attributes.

• Language Objective: Students will complete the exercises in chapter 5 and preview their exercises in a browser.

Links Examples

Images

children.gif 

truck.jpg

mhs.jpg 

To the top

---

14.  Chapter 6

Essential Questions:

• Why is it important to take time to format your web page correctly?
• Why should someone incorporate code to make their website more accessible to different technological devices?

Objectives:

• After completing Chapter 6, students will be able to identifytag attributes,ordered list attribute tag, new browser tag, tag, and HTML Semantic Tags.

• Language Objective: Students will complete the exercises in chapter 6 and preview their exercises in a browser.

To the top

---

15. Sound

Essential Questions:

• Why is it important to incorporate music on a website?
• Why would someone pick one music format over another one?

Objective(s):

• Students will be introduced web sound formats.
• Language Objective: Students will be able to find and incorporate sound clips into a webpage.

• https://www.w3schools.com/tags/tag_audio.asp
• How to Add Background Music to Your Web Page: https://www.thesitewizard.com/webdesign/backgroundmusic.shtmlBgsound src only works in IE use
• Audio File Formats: http://www.makeuseof.com/tag/audio-file-format-right-needs/

HTML CODE: Background Music:

HTML CODE: User Controls:

or

Sound Clips:

• http://www.jlstudios.ca/free_sound_effects.html
• http://www.grsites.com/archive/sounds/
• http://www.flashkit.com/soundfx/

Sound Assignment  Notes 

To the top

---

16.  Tables

Essential Questions:

• Explain ways that information can be organized on a web page?
• Why would a table format be used on a web page?

Objective(s):

After completing  (Tables), students will be able to identify the table tags, as well as, table tags with attributes.

• Language Objective: Students will complete the exercises in the table chapter and preview their exercises in a browser.

Table Quiz

tables explanation

Table Exercise Worksheet

• HTML Cleaner Table-Div
• Div-Table Generator

To the top

---

17. Web Site Development Assignment

Essential Questions:

• How is website content organized?
• What constitutes a “good” web site?
• What are the various “hats” worn by a webmaster?
• How do I maintain a website?
• What type of information is found on a personal website?
• Why should informational websites be updated regularly?
• Why is it important to develop a plan before creating your website?

Objective(s):

• Students will be able to understand the website development process, by way of completing the Web Site Development Assignment.
• Language Objective: Students will be able to create a web site utilizing the Web Site Development Assignment.

To the top

---