- PDF Free Download

Size: px

Start display at page:

Download ""

Brett Thomas Holmes
5 years ago
Views:

1 Page 1 of 11 Units: - All - Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: Introduction to the World of Web Standards Why do web development standards play a key role in the proliferation of the Internet and the World Wide Web? (literature, information, 1.1.C - Use knowledge of root words as well as understand specialized words accurately in 1.1.F - Understand the meaning of and apply key vocabulary across the various subject areas. essential and nonessential propaganda techniques where present. History of the Internet and the Web The Evolution of Web Standards How Does the Internet Work? The Web Standards -, CSS, and JavaScript Compare and Contrast Web Browsers List browsers available for mobile devices Identify W3C web standards that are widely accepted by major browsers Define and HTTP the function of a web browser static and dynamic web pages List and describe HTTP error codes ARPANET Gopher Spider Web Crawling CERN World Wide Web Web Browser W3C CSS HTTP Server Internet Protocol IP Addresses Uniform Resource Locator Static Web Site Dynamic Web Site X Validation why web standards came to be. the Internet and the World Wide Web. Lesson 1: Web Standards (I) Comprehensive Concepts and Lab Assignments 10/1/2012

2 Page 2 of 11 established criteria for making decisions and drawing conclusions. media for research and evaluate the quality of the information received. the role of X, CSS and Scripting play on a web site products, or processes. employing a variety of digital environments and media. NETS.6.b - select and use applications Web Design Concepts Why is the planning stage important step in the development of a web site? products, or processes. employing a variety of digital environments and media. NETS.6.b - select and use applications (literature, information, 1.1.C - Use knowledge of root words as well as Planning Out a Web Site What does a good web page need? Color Theory Color Schemes and Design Mockups Typography on the Web Develop site maps for a web site Brainstorm site content Compare and contrast similar web sites to your planned web site Compare and contrast web sites - looking for consistency in headers, footers and naviagation areas Compare navigation areas as you move through a web site Site Map Home Page Navigation Header Footer Headings Usability Accessibility Hue Tint Shade Monochromatic Color Scheme Complementary Color Scheme Triadic Color Scheme Tag Line Logo Branding Domain Name Layout font Serif Sans-Serif Readability Typography Kerning Leading Hyphenation Line Lenght Follow the rules of color theory to add interest to a web site. Identify what is needed before building a site wire frame. Create a design mockup for a website. Use photoshop to create a design mockup Create a design mockup for a personal homepage. Comprehensive Concepts and Planning a Website (D) Lab Assignments 10/31/2012

3 Page 3 of 11 understand specialized words accurately in 1.1.F - Understand the meaning of and apply key vocabulary across the various subject areas. essential and nonessential propaganda techniques where present. established criteria for making decisions and drawing conclusions. media for research and evaluate the quality of the information received. Identify confusing navigation features of a web site and determine what the intention of the site should've been the relationship primary and secondary colors how a tint, a tone, and a shade are made. List and describe complementary, triadic, tetradic, and monochromatic color schemes Determine the typeface for headings, subheads and body copy, along with any other typographical issues. Plan different colour combinations for the web site. Build a mock-up for the client to decide on the colour and graphics. Line Height Drop Cap Small Caps Hanging Punctuation Pull Qotes Consider how to test the web site before it goes "live". the difference kerning and tracking Name the four different types of

4 Page 4 of 11 capitalisation available through CSS the difference a serif font and a sans-serif font the difference hanging punctuation and regular punctuation Basics How are web pages created? (literature, information, 1.1.C - Use knowledge of root words as well as understand specialized words accurately in 1.1.F - Understand the meaning of and apply key vocabulary across the various subject areas. The Basics of The <head> element Choosing the Right doctype for your documents Define the function of the history of document structure Understand the syntax of Syntax Block Level Elements Inline Elements Doctype Setup the head element on your course homepage. Use block level and inline to add content to a web page. Creating Pages with (D) Comprehensive Concepts and Web Design I Midterm 12/1/2012 Lab Assignments 12/1/2012 Class Homepage 12/1/2012 CSS Design 12/1/2012 Website Project 12/1/2012 essential and nonessential propaganda techniques where present. block-level and inline Define doctype and explain its function browser "standard"

5 Page 5 of 11 established criteria for making decisions and drawing conclusions. media for research and evaluate the quality of the information received. products, or processes. employing a variety of digital environments and media. NETS.6.b - select and use applications and "quirks mode" various doctypes Choose the correct doctype for your site's purposes. Set a document's primary language Set a document's character encoding Define the <title> element Add keywords and a description to a page for search engine indexing Add an embedded style sheet to the <head> section of a web page Add client side scripts to the <head> section Explalin the importance of placing style sheets and scripts in seperate files Link to an external style sheet using the <link> element

6 Page 6 of 11 Apply the of the <link> element The Body How can the content of a web page be manipulated (literature, information, inside of the body element? 1.1.C - Use knowledge Images in of root words as well as Links understand specialized Tables words accurately in Forms essential and nonessential propaganda techniques where present. 1.1.F - Understand the meaning of and apply key vocabulary across the various subject areas. established criteria for making decisions and drawing conclusions. media for research and evaluate the quality of the information received. Marking up textual content in Lists Lesser-known semantic Generic Containers - the div and span Creating Multiple Pages with Navigation Menus Validating your the syntax and usage of common block-level the syntax and usage of common inline ordered and unordered lists understand the syntax and usage of lists Choose list types Nest lists Understand the <img> element and it's attributes Apply images with CSS <a> element to link to other resources Character References Character Encoding Keywords Unordered List Ordered List Nesting Lists Alternative Text Background Image Background Repeat Hyperlink Anchor Attribute Tables Forms Checkbox Radio Button Hotspots Pagination Image Map Use lists to group relevant information Use lists to create site navigation. Create nested lists of information <img> element to add graphics to web pages. Add hyperlinks to a web page using the anchor <a> element Add navigation links to a homepage. Creating Pages with (D) Comprehensive Concepts and Lab Assignments 12/31/2012 Class Homepage 12/31/2012 CSS Design 12/31/2012 Website Project 12/31/2012

7 Page 7 of 11 products, or processes. employing a variety of digital environments and media. NETS.6.b - select and use applications Cascading Style Sheets How can the appearance of a web (literature, information, page be changed? 1.1.C - Use knowledge of root words as well as understand specialized words accurately in 1.1.F - Understand the meaning of and apply key vocabulary across the various subject areas. Inheritance and Cascade Text styling with CSS The CSS layout model - boxes, borders, margins, padding CSS images Styling lists and links Styling Tables Styling forms Floats and Clearing CSS Static and Relative Positioning CSS absolute essential and and fixed nonessential positioning propaganda techniques where present. the benefits and problems of inline styles Write style rules with correct syntax Create an external style sheet Print a style sheet the similarities and differences inheritance and cascade Adjust the line height of a text passage Apply the text-transform property font-family property to list fonts to be used on a web site Cascading Style Sheet Selector ID Selector Attribute Descendent Selector Pseudo-classes Pseudo- Inline Styles Embedded Styles External Style Sheet Inheritance Cascade Specificity Font Legibility Readability Em Pixel Percentage Style Weight Margin Border Padding Negative Margins Collapsing Margins Overflow CSS Box Background Color Background Image Sprites Background Repeat Background positiion Unordered List Ordered List Nested List Link State Float Clear Change the style of hyperlinks using CSS inline, embedded and external style sheets Evaluate the appropriate situation for each of the types of style sheets Use CSS to change the appearance of text on our webpage. Evaluate the appropriate situation for each of the types of style sheets Apply a image via CSS, adjust its placement, tile it vertically or horizontally Apply the float poperty to informational lists to create horizontal navigation menus Students will create and apply CSS to their course homepage html file. Intro to CSS (D) Comprehensive Concepts and Lab Assignments 1/31/2013 Class Homepage 1/31/2013 CSS Design 1/31/2013 Website Project 1/31/2013

8 Page 8 of 11 established criteria for making decisions and drawing conclusions. media for research and evaluate the quality of the information received. products, or processes. employing a variety of digital environments and media. NETS.6.b - select and use applications ems, percentages and points Control whitespace on a web page using the margin property Add borders around an object using a variety of border properties Use the padding property to insert negative space teh margins or borders of an element and its content. Manipulate the dimensions of using the width and height properties float property to allow to flow around others Understand the CSS box model property to display images on a web page. Control repeat

9 Page 9 of 11 Position a image Change the list style type of a list item Create custom bullets using images Nest a list inside of another list Understand the various link states Change the look and feel of links using pseudo classes Create a navigation menu using lists and links float property to control page layout clear property to shift a page element below a floated object Understand relative and absolute positioning Advanced CSS How can the layout of a web page influence the content of the page? (literature, information, Headers, footers, columns, and templates Create single column layouts Header Footer Column Create web pages that have multiple columns of information. CSS (D) Lab Assignments 3/3/2013

10 Page 10 of C - Use knowledge of root words as well as understand specialized words accurately in Create double column layouts Create triple column layouts Use absolute and relative positioning strategies to control the layout of page. Comprehensive Concepts and Class Homepage 3/3/2013 CSS Design 3/3/2013 Website Project 3/3/2013 Web Design I Midterm 3/3/ F - Understand the meaning of and apply key vocabulary across the various subject areas. essential and nonessential propaganda techniques where present. established criteria for making decisions and drawing conclusions. media for research and evaluate the quality of the information received. products, or processes. employing a variety of digital environments and media. NETS.6.b - select and use applications

11 Page 11 of 11 Semester course. See September. Semester course. See October. Semester course. See November Semester course. See December. Semester course. See January.

Website Development with HTML5, CSS and Bootstrap

Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on