Garfield Public Schools Fine & Practical Arts Curriculum Web Design

Transcription

1 Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and also basic skills for designing and creating websites using Google Sites. Students will use these skills and knowledge to create personal fully functional websites that display their interests. Students will have the opportunity to discover a special interest in web design as a possible future career. Prerequisite Students who plan to enroll in Web Design must have successfully completed Computer Applications II.

2 Content Unit Title: Garfield Public Schools Web Design Unit Map Google Sites... 5 Blocks Overview: The primary objective of this activity is for students to create a website using Google Sites and other Google Apps. Create a Gmail Account and Learn to use it Create a Google Calendar Account and learn to use it Create a Google drive account to save all of your files for this class Create a Picasa account and learn to use it Create a Google Site o Insert and edit site headers o Insert pictures and use Picasa to edit them o Add different types of pages o Edit site layout o Change themes and colors o Insert Google gadgets o Publish your site Unit Title: Creating a website using HTML.. 1 Block Overview: The primary objective of this unit is for students to have the proper basic tools and understanding of what HTML is and what is needed to create one. HTML and how it works Directory s Browsers Word processors Saving a file as HTML Web Hosts Domains Unit Title: Learning the HTML language. Using tags to create a site. 14 Blocks

3 Overview: The primary objective of this unit is for students to learn the code and proper procedures for creating a HTML website Basic Tags Code organization Correct coding Emphasizing text Headers Indenting and spacing Symbols and characters Lists Bookmarks and Hyperlinks Images Color Box model Border properties Outlines Margins padding Unit Title: Cascading Style Sheets Blocks Overview: The primary objective of this unit is to learn about and how to use basic CSS in an HTML website. During this time students will begin working on their final project, a fully functional website using HTML along with CSS on a topic of their choice. Syntax ID and Class Inserting Style sheets Background Text Font Links Lists Tables Unit Title: Advanced Cascading Style Sheets 10 Blocks

4 Overview: The primary objective of this unit is to learn more advanced concepts of CSS. During this time students will continue working on their final project. Grouping selectors Dimension Display and visibility Positioning Floating Block elements Pseudo-classes Navigation Bars Image gallery Opacity / Transparency Image Sprites Attribute selector

5 Content Area: Career and Technical Education Unit Title: Google Sites Target Course/Grade Level: Web Design Blocks Unit Overview Description : Learn how to use Google Sites to create a fully functional website Concepts Gmail Google Drive Picasa Google Calendar Google Sites Concepts & Understandings Learning Targets CPI Codes A.4, D.1, D.2 Understandings Create a Gmail Account and Learn to use it Create a Google Calendar Account and learn to use it Create a Google drive account to save all of your files for this class Create a Picasa account and learn to use it Create a Google Site Insert and edit site headers Insert pictures and use Picasa to edit them Add different types of pages Edit site layout Change themes and colors Insert Google gadgets Publish the site 21 st Century Themes and Skills Life and Career Skills; ICT Literacy; Communication and Collaboration; Information Literacy Guiding Questions How can Google Apps help you in your everyday life? Why use Google Sites over other free web site templates? Why is a professional address important? What are the advantages to using cloud storage? Does anyone use a calendar? What for? How can the use of a Google Calendar improve your life? Does anyone use a calendar? What for? Unit Results Students will be able to use the above Google apps in a professional manner. Proper etiquette, file storage, photo editing and organization, daily planning, and basic web design will all help students in college, their chosen career and their personal life. Suggested Activities The following activities can be incorporated into the daily lessons:

6 Create a Gmail account Students will send themselves s with attachments to show how it is done. Create a Google Calendar account Create a Picasa account Create a Google Drive account Students will share a folder with the teacher. This is where all student work will be check from. Create a Google Site Using Picasa create a site banner for the Google Site

7 Content Area: Career and Technical Education Unit Title: Getting to know HTML Target Course/Grade Level: Web Design 1 Block Description : Creating a Website using HTML Concepts What is HTML What is needed to make a website CPI Codes A.4, D.1, D.2 Unit Overview Concepts & Understandings Understandings HTML and how it works Directory s Browsers Word processors Saving a file as HTML Web Hosts Domains Learning Targets 21 st Century Themes and Skills Life and Career Skills; ICT Literacy; Communication and Collaboration; Information Literacy Guiding Questions What is HTML? Why not use a web design template? How could others see the site on the World Wide Web? Do you think it is expensive to host a site? How much do you think it costs? Unit Results Students will understand what is needed to create a HTML website. Suggested Activities The following activities can be incorporated into the daily lessons: Students will research different web hosts and find what they think may be the best deal. Students will also research sites to purchase a domain Students will create their first HTML file in a directory

8 Content Area: Career and Technical Education Unit Title: HTML Tags Target Course/Grade Level: Web Design 14 blocks Unit Overview Description : Learning the HTML language. Using tags to create a site. Concepts 1. Basic Tags 2. Code organization 3. Correct coding 4. Emphasizing text 5. Headers 6. Indenting and spacing 7. Symbols and characters 8. Lists 9. Bookmarks and Hyperlinks 10. Images 11. Color 12. Tables Concepts & Understandings Understandings 1. Breaks 1. Horizontal rules 1. HTML tag 1, Titles 1, The Head tag 1, The Body tag 2, Last in first out 2, indenting and spacing code 3, Container elements 3, Opening and closing tags 4, centering 5, H1 H6 tags 6, non-breaking space character 7, using the net to find characters and symbols 8, unordered lists 8, ordered lists 8, definition lists 8, nested lists 8, type, start and value attribute 9, Links on page (bookmarks) 9, Links to other pages 9, links to other sites 9, link buttons 9, links to 10, inserting pictures 10, saving images 10, image formats 10, image attributes (border, align, height width, hspace, vspace, alt, 10, images as links and thumbnails 11, Hexadecimal vs. Decimal 11, RGB

9 13. Formatting text 14. Forms 11, Background color 11, text color 11, color block of text 11, image as a background 12, Table attributes (border, cell spacing and padding, width, 12, Table header 12, aligning data 12, coloring cells 12, images in cells 12, spanning rows and columns 13, marquees 13, super and sub script 13, blink 13, preformatted text 14, text boxes 14, drop/scroll box 14, radio and checkboxes 14, submit and reset 14, text area, 14, password 14, attributes (Method, Action, name, size, maxlength, multiple, selected, value Learning Targets CPI Codes A.4, D.1, D.2 21 st Century Themes and Skills Life and Career Skills; ICT Literacy; Communication and Collaboration; Information Literacy Guiding Questions Why should everyone that writes code organize it the same way? Why is it important to test code frequently? What are some ways to utilize tables? Why is contrast important when choosing colors for your site? Why do you think it is important to cite where you obtained a photo or clip art from? Why do you think it is important to site where you obtained a photo or clip art from? Unit Results Students will be able to use HTML code to create a fully functional website on a topic of their choice.

10 use proper coding, have well organized code, and use appropriate colors and photos to compliment their site. understand the importance of citing. Suggested Activities The following activities can be incorporated into the daily lessons: Create a calendar using a table. Inserting colors, images, hyperlinks, and use row span Demonstrate organization and proper coding when creating a nested list. Color the background of a webpage using the hexadecimal code. The instructor will say a color and the class will write the code for that particular color. Bold, Italicize and underline text, showing correct use of the Last In First Out rule Recreate a form found on the internet. Create a marquee using animated clips as if one is chasing the other.

11 Content Area: Career and Technical Education Unit Title: Cascading Style Sheets Target Course/Grade Level: Web Design 10 Blocks Unit Overview Description : Learning about and how to use basic CSS in an HTML website. Concepts 1. Syntax 2. ID and Class 3. Inserting Style sheets 4. Background 5. Text 6. Font 7. Links 8. Lists 9. Tables 10. Box model Concepts & Understandings Understandings 1, selector 1, declaration 1, property 1, value 1, comments 2, ID selector 2, class selector 3, External 3, internal 3, inline 3, multiple style sheets 4, color 4, image 4, image repeat 4, image position 5, color 5, alignment 5, decoration 5, transformation 5, indentation 6, families 6, style 6, size 7, styles 8, list item markers 8, style 9, borders 9, width and height 9, alignment 9, Padding 9, color 10, width and height

12 11. Border properties 12. Outlines 13. Margins 14. padding 11, style 11, width 11, color 11, sides 12, outlines 12, properties 13, values 13, sides 14, sides 14, values Learning Targets CPI Codes A.4, D.1, D.2 21 st Century Themes and Skills Life and Career Skills; ICT Literacy; Communication and Collaboration; Information Literacy Guiding Questions Why use CSS rather than just HTML? What advantages does CSS give you while coding? Why is using comments to explain code important? What are the advantages of a class selector over an id selector? Can you explain each of the three ways to insert CSS into an HTML website? What is the difference between background images when using HTML and CSS? How can font-family help while styling your site? What could happen without it? Does HTML allow use of photos as bullets in a list? Does CSS? Can you explain how? What advantages does CSS have over HTML when it comes to tables? Unit Results Students will Understand the syntax of CSS code Learn different ways to insert CSS into HTML sites Be able to use CSS to style the background of a site style text and change font styles using CSS Style lists and tables Create borders, outlines and margins and style them Suggested Activities The following activities can be incorporated into the daily lessons: Update an existing site with CSS styles Create a new website using CSS style sheet as the base for all styling/formatting Style a block of text to the teachers specifications Create an advanced table using CSS to style it. Also include photos outlines borders and margins within the table.

13 Content Area: Career and Technical Education Unit Title: Advanced Cascading Style Sheets Target Course/Grade Level: Web Design 10 blocks Unit Overview Description : Learning about and how to use Advanced CSS in an HTML website. Concepts Grouping selectors Dimension Display and visibility Positioning Floating Block elements Pseudo-classes Navigation Bars Image gallery Opacity / Transparency Image Sprites Concepts & Understandings Understandings 1, nesting selectors 2,height (max-min) 2, width (max-min) 3, hiding elements 3, block inline elements 3, changing display 4, static 4, fixed 4, relative 4, absolute 4, overlapping elements 5, how 5, two elements together 5, turn off float 6, aligning 6, using margins 6, using position 6, using float 7, syntax 7, anchor 7, first-child class 7, matching elements 7, language class 8, list of links 8, horizontal 8, vertical 8, inline list 8, floating list items 9, how to create an image gallery 10, making transparent images 10, hover effect 10, transparent box

14 Attribute selector 11, sprites 11, navigation lists 11, hover effect 12, selectors 12, value selector 12, multiple values 12, styling forms Learning Targets CPI Codes A.4, D.1, D.2 21 st Century Themes and Skills Life and Career Skills; ICT Literacy; Communication and Collaboration; Information Literacy Guiding Questions What are the advantages of grouping or nesting selectors? In what case would you use pixels to size a photo? In what case would you use percent? Which properties allow overlapping of elements? What are some advantages of using Pseudo classes? What type of properties can be added to a HTML navigation bar to improve it look? What should opacity be set at to make an image transparent? Why are images sprites used? Unit Results Students will... Know how to group selectors Change the dimensions of elements Hide elements Overlap elements Use hover for different types of elements Float elements Align elements Be able to identify and use pseudo classes and elements Style navigation bars to make them more attractive Create an image gallery Create a transparent element Use image sprites Suggested Activities The following activities can be incorporated into the daily lessons: Insert two elements into a webpage and have them overlap, also change the dimensions of each. Use float properties to align three images on a single line vertically and them horizontal Create or edit a navigation bar. Use CSS to style it using table, transparency, hover and color Create an image gallery with at least 5 images and captions for each. Use transparency of an element to show text over a picture. Use an image sprite as a navigation bar.