Web Page Design

Course Rationale: Rapid technological advancement by businesses to reach global markets, greater focus on industry certifications and national skill standards, expansion of responsibilities of office workers, portability of employee skills—all these increase the need for business students in career education programs to have skills in Web design and maintenance.

Web Design & Development I - Web Based Student Version

DESE Workshop - Pat's Pizza Web PDF - Assignment for

Assignment 4 - TextWrangler Basic HTML Coding Recreate this image. Assignment for
Print the source coding from the web page.

Getting Started - You are to create a series of folders in you documents folder on the Mac side of your computer. The format of the folders should be as follows:

Web_page_design

TextWrangler
Pats Pizza
Dreamweaver

Unit 1: Introduction to Web Development

  1. ***Link to basic HTML codes - HTML Cheatsheet
  2. Basic html Coding
  3. html Hyperlink Coding
  4. HTML Coding Validation Always check your page coding!
  5. Awesome for images - GRSites or CoolText Serif font have curlies on them [a slight projection finishing off a stroke of a letter, as in T contrasted with T] where as Sans Serif fonts are more block [a style of type without serifs.
  6. How Web Servers Work
  7. Key terms review for TextWrangler assignments
  8. ***HTML Starters Web - Image, PDF
  9. Basic HTML Coding
  10. Web page bullets - link

Assignments

  1. Review of HTML/CSS - Head of Class Download assignment as PDF Assignment for

 

Assignments

  1. Create a Folder In Your WebPage/TextWrangler folder called Beginning Web Design assignment for 8-25-14
  2. Lesson A Check-Up Time A - TextWrangler PDF assignment for 8-29-14
  3. Review of Lesson A Web, PDF- assignment for
  4. Lesson B: Block Level Elements, Inline Elements and Styles
    1. Watch ScreenCast Video - Tonya Skinner assignment for 9-2-14
    2. pages 11-14 PDF
    3. p11 PDF review Test Page
    4. p12 PDF type Cool Examples Coding
    5. p13 PDF assignment for
      • Save in your Beginning_Web_Page folder as LB_Math_Elements
      • Print Validation, Page Source and Web Page
      • Don't want to type? Source file: math.txt
      • Or you can find the math text using the following path. Open/macserver/RuckerShare/Students/Student_Files_Web_Page_Design/practice/math.txt
    6. p14 PDF
    7. p15 - Quiz over Lesson B
      • Download the Quiz
      • Complete on your computer
      • You can use 11-14 to complete your quiz.
      • Print Validation, Page Source and Web Page (30 Points Possible)
  5. Lesson C: Three Types of List
    1. Watch ScreenCast Video - Tonya Skinner assignment for 9-8-14
    2. pages 18-20 PDF Type Bullets on p20 as practice.
      • Save in your Beginning_Web_Page folder as LC_Bullets
      • Print Validation, Page Source and Web Page (30 Points Possible)
    3. p21 - Quiz over Lesson C assignment for 9-9-14
      • Download the Quiz
      • Complete on your computer
      • You can use 18-20 to complete your quiz. (I expect all A's! Whoop! Whoop!)
      • Print
    1. REVIEW p23 PDF assignment for 9-10-14
    2. REVIEW p24 PDF assignment for 9-12&15-14
      • Download data file
      • Save as LC_hail_facts_yourname.html
      • Print Validation, Page Source and Web Page (30 Points Possible)
    1. REVIEW p25 PDF assignment for 9-15-14
      • Download data file
      • Save as LC_messy_html_yourname.html
      • Print Validation, Page Source and Web Page (30 Points Possible)
  6. Lesson D: Hyperlinks
    1. Watch ScreenCast Video Basic Hyperlinks, Advanced Hyperlinks- Tonya Skinner assignment for 9-17-14
    2. pages 26-30 PDF
    3. p31 - Quiz over Lesson D assignment for 9-22-14
    1. p33 Performance Quiz lesson D assignment for
      • Download the Quiz PDF
      • Download the data file linkdown.html (copy the data source to TextWrangler if you have to). assignment for
      • Complete in Textwrangler
        • Save in your Beginning_Web_Page folder as LD_link_down_yourname.html
      • You can use any of your resources to complete this quiz (except your neighbor).
      • Print Validation, Page Source and Web Page

    Lesson E: Entity References

    1. p35 & 36- Read and complete together. Take Quiz over Lesson E assignment for

Lesson F: Image Filetypes

    1. p38-44 Read and complete together. Take Quiz over Lesson F assignment for
      • Complete Practice F, p41 in Textwrangle together
        • Save in your Beginning_Web_Page folder as LF_image_knock_knock_yourname.html
        • copy/paste the Tonya_Skinner_student_data_files folder to your Beginning_Web_Page folder in a folder called images. We will do this together.
        • Print Validation, Page Source and Web Page and staple to the back of the quiz.
        Download the p42, Quiz PDF
      • Complete in blue or black pen or pencil.
      • Complete Practice F, p44 in Textwrangle together
        • Save in your Beginning_Web_Page folder as LF_pigs_yourname.html
        • Print Validation, Page Source and Web Page and staple to the back of the quiz.

Lesson G: Image Filetypes assignment for

    1. p46-53 Read and complete together. Take Quiz over Lesson G assignment for
      • Complete Practice G, Stylin HTML, p49 in Textwrangle together
        • Save in your Beginning_Web_Page/Practice folder as LG_styling_yourname.html
        • Save the css page as LG_nice_yourname.css
        • Print Validation, Page Source and Web Page.
      • Complete Practice G, Rainy Days, p50 in Textwrangle together
        • Save in your Beginning_Web_Page/Practice folder as LG_rainy_yourname.html
        • Save the css page as LG_rainy_yourname.css
        • Print Validation, Page Source and Web Page
      • Complete Practice G, Page with Links, p51 in Textwrangle together assignment for
        • Save in your Beginning_Web_Page/Practice folder as ps.html
        • Save the css page as ps.css
        • Print Validation, Page Source and Web Page
      • Check-up Time the p52, Quiz PDF assignment for
      • Complete in blue or black pen or pencil.
      • Complete Practice G, p54 in Textwrangle
        • Save in your Beginning_Web_Page/Skittles folder as LG_Skittles_yourname.html assignment for
        • Print Validation, Page Source and Web Page and staple to the back of the quiz
      • Project HTML Do It--funtimes.html p.55 assignment for
        • Read the Requirements Carefully!!! Refer to p.56 for an example of the assignment.
        • Create a new folder in your Beginning_Web_Page folder called Project_HTML_Do_It
        • Save your webpage as funtimes.html
        • Save your Cascading Style Sheet as movie.css
        • Print Validation, Page Source, CSS, Check-off list, and Web Page with Web Page on top
      • Project HTML Classy Fun.html p.57 assignment for
        • Read the Requirements Carefully!!! Refer to p.57 for an example of the assignment.
        • Save your webpage as classyfun.html in your Practice Folder
        • Save your Cascading Style Sheet as classyclass.css in your Practice Folder
        • Print Validation, Page Source, CSS, Check-off list, and Web Page with Web Page on top

Lesson H: Making Prettier Pages with Divisions assignment for

    1. p58-59 Read and complete together. assignment for
      • Complete Practice H, Div Tags, p59 in Textwrangle together
        • Open/Save in your Div Intro Keys/as the name given for it
        • Complete Try it Out! on p60 on your own assignment for
        • Print Validation, Page Source, CSS and Web Page.
    1. p62--63 Read and complete together. assignment for
        • Complete Practice H, Div Tags, p62-63 in Textwrangle together
          • Copy coding to your html
            • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          • Open/Save in your Div Intro Keys/as the name given for it
        • Complete Try it Out! on p64 on your own assignment for
          • Print Validation, Page Source, CSS and Web Page. - 4 Print outs!
  1. Dreamweaver Assignment 1 - Friday assignment for
  2. Dreamweaver Assignment 2 - How to Be Awesome assignment for
  3. Go over saving backgrounds and text. assignment for
  4. Go over saving buttons and text. Open DW Assignment 2. assignment for
  5. Dreamweaver Assignment 3 - css assignment for
  6. Dreamweaver Assignment 3-2 - css Text Wrangler File assignment for
  7. Dreamweaver Assignment 4 - classes assignment for
  8. HTML Review -Source Doc / Word Doc - Open on Windows Side assignment for
  9. Review: Assignment 13 - TextWrangler wiz.html/square bullets assignment for
  10. Review: Assignment 14 - TextWrangler table coding assignment for
  11. Dreamweaver Pat's Pizza Place Project assignment for
  12. Dreamweaver DIV Challenge 1 - Web PDF assignment for
  13. Dreamweaver DIV Christmas Assignment -Web PDF assignment for

Misc. Don't want to get rid of yet.

  1. Assignment 1 - TextWrangler PDF file assignment for 8-22-14
  2. Assignment 2 - TextWrangler assignment for 8-25-14
  3. Assignment 3 - TextWrangler assignment for
  4. Assignment 4 - TextWrangler Basic HTML Coding Recreate this image. Assignment for
    Print the source coding from the web page.
  5. Assignment 5 - TextWrangler assignment for - Print the source coding from the web page (after I view it).
  6. Assignment 6 - TextWrangler assignment for
  7. Assignment Monday - TextWrangler assignment for
  8. Assignment 7 - TextWrangler assignment for
  9. Assignment 8 - TextWrangler assignment for
  10. Basic html Coding Test #1 assignment for
  11. Basic html Coding Test #1 Redo assignment for
  12. Google Docs HTML Checkup #1 assignment for
  13. Messy html #1: Copy page source to a new TextWrangler File. Save it as messy_html.html assignment for . We will work this together.
  14. Review of HTML list and coding for ul, ol, and def list - QuickTime Video Assignment for
    Watch Video with Headphones (no laughing at my video voice! LOL!).
    Assignment 9 - TextWrangler assignment for
  15. Assignment 10 - TextWrangler assignment for
  16. Assignment 11 and 11-2- TextWrangler - watch video first: QuickTime Video coding example for Absolute/Relative Hyperlinks and jpg images
    assignment for
  17. Assignment 12 - TextWrangler 3 hyperlinks assignment for
  18. Assignment 13 - TextWrangler wiz.html/square bullets assignment for
  19. Assignment 14 - TextWrangler table coding assignment for
  20. Assignment 15 - TextWrangler - Testing Acronyms assignment for

 

Dreamweaver CS3 Textbook

Dreamweaver is a What You See Is What You Get (WYSIWYG) text editor. A WYSIWYG text editor allows a user to view a document as it will appear in the final product and to edit the text, images, or other elements directly within that view.

Dreamweaver Introduction: Web Site Development & Adobe Dreamweaver CS3

  1. You will need to read DW2 to DW23.
  2. You are to complete a practice test on the textbook website. You can only miss two questions. If you miss more than two, you can take it over. You can use your book to look up answers, not your neighbor. This is a review, not a test.
  3. You will need to complete flashcards also.

Dreamweaver Chapter 1: Creating a Dreamweaver Web Page and Local Site

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW105-DW106 Assignment for
    In step 12, after you enter the date, put in another line break and put your assignment
    (DW Apply Your Knowledge).     Figure 1-87, Table 1-5
  2. In the Lab 1 DW107-DW108 Assignment for
    In step 10, after you enter the date, put in another line break and put your assignment
    (DW In the Lab 1    ) Figure 1-88, Table 1-6a, Table 1-6b
  3. In the Lab 2 DW109-DW111 Assignment for
    In step 10, after you enter the date, put in another line break and put your assignment
    (DW In the Lab 2) Figure 1-89, Table 1-7
  4. In the Lab 3 DW111-DW112 Assignment for
    In step 8, after you enter the date, put in another line break and put your assignment
    (DW In the Lab 3) Figure 1-90, Table 1-8
  5. As a review for creating web pages - complete Cases and Places 1 page DW 113. Follow the instructions.
    After you enter the date, put in another line break and put your assignment (DW Cases and Places 1) Assignment for
  6. Complete a practice test with 2 or less errors. Be sure to print and score your own test.
  7. Complete Ch1 Flash Cards. You are to complete 15 questions without missing more than three. You are to print your results.
  8. PLANS FOR TUESDAY, SEPTEMBER 14: We will grade papers first and then you will finish Cases & Places 1. I am to view it and then you are to print.

Dreamweaver Chapter 2: Adding Web Pages, Links, and Images

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW186-DW189
  2. In the Lab 1 DW190-DW192 Assignment for
  3. In the Lab 2 DW192-DW195 Assignment for
  4. In the Lab 3 DW195-DW198 Assignment for
  5. Complete a practice test with 2 or less errors. It will be a hard copy. Put your name at the top.
  6. Complete Ch2 Flash Cards. You are to complete 15 questions without missing more than three. You are to print your results.

Dreamweaver Chapter 3: Tables and Page Layout

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW301-DW302
  2. In the Lab 1 DW303-DW304 Assignment for
  3. In the Lab 2 DW304-DW308 Assignment for
  4. In the Lab 3 DW308-DW309 Assignment for
  5. Complete a practice test with 2 or less errors.

Dreamweaver Chapter 4: Forms

Go through chapter together.
Assignments:

  1. Apply Your Knowledge DW385-DW387
  2. In the Lab 1 DW388-DW390
  3. In the Lab 2 DW390-DW392
  4. In the Lab 3 DW392-DW394
  5. Complete a practice test with 2 or less errors.

Class Web Page Assignment (FBLA)

Design Document Assignment
Design Document - What will be on my web page
Design Document - Example
Assignment

 

iWeb

Learn to use iWeb Assignment Assignment for

iWeb Assignment - My Favorite ??? Assignment for

Student sites:

2012 - Claire FBLA Contest Site Student Government

2011 - Abbie, Dillion, Martha, Sara

2010 - April, Clayton, Dale, Darcy, Dillon, Tanner, Whitney, Zach.

Personal Portfolio Development:

You will be required to complete a portfolio for you. You will design the entire site and "brag" about you!

Electronic Career Portfolio Assignment for

Grading Rubric html format Download PDF format Rubric

Sample Portfolio - Excellent Example

Sample Portfolio 2

Electronic Portfolio Rubric

2013 - Rachael, Marie, Brooklynn, Elizabeth

2013 - Elizabeth's Pat's Pizza, Elizabeth's Do It!

2012 - Claire, Noah, Brooke

2011 - Sara, Martha, Drew, Jake

2010 - Whitney's Portfolio

 

iMovie

Garage Band

Cool Websites:

http://phs.parkhill.k12.mo.us

http://schoolweb.missouri.edu/districts.html

http://www.grandpajunior.com/Mo.shtml

http://www.chillicotheschools.org/

Helpful websites for color scheme:

**HTML Color Codes - Highlights Color For Code For You

**HTML Color Codes and Names - good resource

Color Codes matching Chart HTML

**Color Schemer On-line

Mandarin Design

Web Colour Generator

Web Safe Colours

Helpful websites to use when designing your web page:

Great Resource for Web Page Design: Houston Business Class

http://3dtext.com/

http://www.coolarchive.com/

http://www.fg-a.com/gifs.html

http://www.artistic-designers.com/bkgds/

http://www.cln.org/themes/clip_art.html

http://www.animationlibrary.com/a-l/

http://dragonneo.com/

http://hometown.aol.com/sunstar253/a-dragons.html