Welcome to Web Design 2, an online class. This blog site will provide additional material for the course content from MS Virtual Public School. Our class begins October 12, 2009 and ends December 16, 2009. Please bookmark this blog and check back frequently for updates.
Welcome back from your holiday! I hope everyone had a wonderful time with your family and friends. (And did you have lots of turkey with all the trimmings also?)
It's always good to have a break from school. Did you know we will end this class on December 16, a little over 2 weeks from now? :) So let's get to work! Please note that we will not complete every lesson in Module 6. You will take screenshots of all work completed in KompoZer and paste them in MS Word to upload into your dropbox.
Lesson 6.01 Plan and Blue Print (200 points) 3 hours
You have successfully completed one Web site in this course and another one in Web Design I. You will continue to use all the tools you have to complete another Web Site. You have a broad choice of topics listed in the module. Once again, prior proper planning (with a storyboard) will enable you to design an effective Web site.
As for the topics, one more topic is available to you: Health. Narrow this broad topic with a specific disease (i.e., diabetes, asthma, alzheimers, etc), healthy eating habits, immunizations.
Please note: each student must select a different subtopic for his/her web site. No web sites will be the same subtopic.
Lesson 6.02 Templates (100 points) 3 hours
Templates make the web design process quicker and easier. A template is a sort of pattern that allows you to create multiple pages with the same basic design. One web site can be made up of one or more templates. Most templates have fixed areas that cannot be changed. When the web designer creates the template he/she pre-determines which sections will be editable. This ensures that each page created from the template has the same basic format and structure.
This lesson takes you through the process of making templates. Templates will work for you as long as you plan your pages carefully. Visualize how your pages will look before you make the templates. Follow the steps in the lesson to create your template. Take a screen shot of EACH STEP (4 screen shots) and paste them into a MS Word document for your dropbox.
Begin your search for information on the topic you selected in Lesson 6.01, by using Google's Advanced Search to properly narrow your search. Refer back to the storyboard you created (also in Lesson 6.01) to determine what information you will need on each of the five pages. Use CITATION MACHINE to document your sources in APA format.
NO IMAGES ARE REQUIRED YET. But you may select images and save them in your images folder.
Refer to the grading rubric to ensure you complete all requirements for a good grade! You will take a screen shot of each page of your web site. Paste the screen shots in MS Word. It's easier to read if you set the page orientation on MS Word to landscape BEFORE you paste the screen shots. T Bonus Points are available for responding with a comment to this question. How much time did you spend researching your topic for these web pages?
It's a very short week because you have Thanksgiving Holidays starting Monday. So let's get going. Your assignments are due this Friday, November 20. (You have 4 days to complete 4 assignments!)
5.01 The Lobby (100 point Quiz) 1.5 hours
This module is very important because it helps you plan your links for your own web site. You will add these links in 5.05, so plan wisely to save time later. Make sure you read all tutorials in this module. Note one change in the pages you will visit; here is the link for Smart Webby: http://www.smartwebby.com/web_site_design/website_navigation_tips.asp After you complete the KompoZer tutorials on "creating Links", review your storyboard and plan your links. (they will not be added yet--wait until 5.05.)
5.02 Ramps, Stairs, and Elevators (50 Point Dropbox) 1 hour
To assist people with disabilities who want to view your website, you must make them accessible. This module explains the laws and resources related to accessiblity.
Visit all the resource links and then test your web site (OR select another favorite web site to view on WAVE http://wave.webaim.org/).
Study the report and write 2 paragraphs based on your results. Include:
Types of errors, warnings, and other alerts
Summary of changes to correct errors
Select 1 warning or error and describe in detail the steps you would take to correct the issue.
5.03 Can't you Read the Signs? (100 point Dropbox) 1 hour Finally, you add your images on those web pages! NOTE: your images must be saved in your webdes2 images folder as either .jpg or .gif. Be sure to read the links in this section! Follow all the steps in this assignment to make your images assessible.
SPECIAL NOTE:You must take a screenshot of EACH KompoZer page to paste in a MS Word document.
MS WORD TIP: change the layout of MS Word from portrait to landscape so your entire screen shot is visible.
GRADING TIP: Review your grading rubric BEFORE you submit your document to the dropbox. SKIP 5.04
5.05 Moving Around (100 point Dropbox) 1 hour It's time to add links to your web site. Watch the video on how to customize your links with CSS. And this is cool: You can add links to images to move through your site!
Create your own site naviation.
Use the table you created in 4.04 to add working links to each page of your site.
Add links to / from pages 2 - 5 (they should go backwards as well as forward).
Add links back to index page from pages 2 - 5.
Add active links on each reference.
SPECIAL NOTE:You must take a screenshot of EACH KompoZer page to paste in a MS Word document.
MS WORD TIP: change the layout of MS Word from portrait to landscape so your entire screen shot is visible.
GRADING TIP: Review your grading rubric BEFORE you submit your document to the dropbox.
BONUS GRADE: Write a comment on the BLOG which gives at least 2 things for which you are thankful.
Now that you had an extra day to finish Module 3, it’s time to get moving into Module 4. Oh, did I mention that we have permission to post your web pages on the Shaw School District Web Site? Well, we have the OK, but you can only post your work if it is as good as the current District Web page. And all of you gave those pages very high marks in your discussion. So any spare time you have should be spent doing more research on your topic and “cleaning up” of your pages saved back in module 2. In this module we will finally be ready to have our pages ready to post! Get your research and information current, along with correcting your spelling, grammar, and punctuation. Hint: let someone else review your work to double check those web pages!
TODAY is a special day for our country.It is Veterans Day, formally known as Armistice Day. The Allied powers signed a cease-fire agreement with Germany at Rethondes, France on November 11, 1918, bringing World War I to a close. Between the wars, November 11 was commemorated as Armistice Day in the United States, Great Britain, and France. After World War II, the holiday was recognized as a day of tribute to veterans of both world wars. Beginning in 1954, the United States designated November 11 as Veterans Day to honor veterans of all U.S. wars.
Now let’s get going on Week 5—the assignments are due Monday, November 16, 2009. Please read the information for each module carefully. And remember to keep the BLOG handy so you can follow the revised instructions to complete your work and get credit for it.
As for placing work in dropboxes, take a screen shot of each KompoZer assignment you complete. Then you will create a new MS Word document and paste that screen shot. Finally, save your work as a CORRECT file name (no more than 8 letters) and upload it to your dropbox.
SPECIAL NOTES: if your assignment requires you to work on all 5 pages of your Kompozer web site, you will place all 5 screen shots on the same MS Word document. Be sure to place a page break between each screen shot. To do that go to Edit, insert page break OR press and hold CTRL and press Enter at each place you wish to have as a new page.
Now for a quick note on file names: review the rules are written below. (This information was covered in Web Design I.) Failure to follow the file-naming rules in your work, including your dropboxes and KompoZer, will result in NO GRADE until the file name is corrected!
File Naming Rules
Rule
Explanation of Rule
Use all lowercase letters.
On some servers, using capital letters in your filenames will not matter; however, there are servers that read a capital letter differently than a lowercase letter.
For example, naming a file Example.htm and then referencing it as example.htm on a UNIX server will not work. You will have a broken link.
Use only letters or numbers—no special characters.
Do not use apostrophes, colons, semicolons, bullets, or slashes. In other words, do not use /, \, &, *, <, >, ', " ;, :, or blank spaces.
Do not use a period except when separating the filename from the extension (example.htm not ex.mine.htm).
Do use the underscore character to separate words in a web page filename. For example, use 1900_39.htm
All web pages must end in .htm or .html.
The .htm extension is most common on PCs, and .html is most common on Macintoshes. Both are considered HTML files and either is appropriate.
The key is to be consistent throughout your site.
Do not switch between the two extensions within the same site.
Follow the eight-dot-three (8.3) file naming convention whenever possible.
This convention specifies a maximum of eight letters followed by a period and a three-letter extension. If using the 8.3 conventions, you will ensure that your files will be portable across the greatest number of operating systems.
4.00 Introduction and Task List (15 minutes)
You will learn to use some more tools in KompoZer. Stay up to date with the assignments! Concentrate on YOUR WEB DESIGN II work—now is not the time to chat with your classmates OR make up work in other classes!
4.01 Advanced Tool Usage (4 hours) 100 points
This is a very importance lesson on making an attractive web site while using Cascading Style Sheets (CSS).
Go through EACH step of both tutorials in the lesson. Pay particular attention to the Cook’s Style and Style Sheets in the first tutorial.Plan to spend at least 1 hour on this tutorial. Take notes and review your notes at the end of the tutorial. Ask yourself questions about the material.
Remember, you will see this material in a quiz at the end of the module.
Next, explore each of the tabs located in KompoZer’s CSS Stylesheet Dialogue Box. Take really good notes here because you will be using the dialogue box in the next exercise. Spend at least 30 minutes here.
Now, go to the Section listed as Understanding how Style Sheets work. Take good notes here—you will see this again. Then the section on 3 ways to attach a CSS shows you a bit about the next assignment. Another 30 minutes is needed here.
Finally, plan to spend at least 30 minutes on the last section of this page: Working with Text or Font Properties. This is a VERY IMPORTANT SECTION. DON’T Short-change yourself in this section. Spend the time now—you will thank yourself later!
Now to your 100-point assignment: after you complete all the steps required for 4.01, take a screen shot of the KompoZer page. Then paste it to a MS Word document; save the file correctly and place it in your dropbox. (Review the grading rubric and double check your work to make sure you get the full point value.)NOTE: DO NOT TRY TO DO THIS ASSIGNMENT UNTIL YOU HAVE SPENT AT LEAST 2 HOURS ON THE TUTORIALS.
4.02 As we Build (3 hours) 100 points
At this stage in the construction of your Web site, very little has been “built.” With a well written CSS you will establish a solid foundation for your site. Remember any Web site construction should always be considered a “work in progress.” Modifications and enhancements can always be made to both alter the appearance of your site and assist with site maintenance.
DO NOT RUSH THROUGH THIS ASSIGNMENT! You are now making your CSS for your website. Remember how nice the Shaw District Web Site looks? Well, this is how it’s done.SO MAKE SURE YOUR WEB SITE IS OF HIGHEST QUALITY.
As you go through the assignment using KompoZer, take screen shots and submit those screen shots for a grade. (You don’t have ftp capability yet; so to get a grade, you must take screen shots and paste them into MS WORD.)
4.03 Designing with Tables (3 hours) 100 points
The use of tables allows a Web designer to place the components of a Web page in a specified area (cell) which maintains Web page consistency across many browsers. At this point, you will put all text and images inside table cells. Read and take notes about the importance of tables and how to make the best use of tables (percent of window vs. fixed length/width).Note: rows go across a table; columns go up and down a table; cells are the intersection of a row and column (where data is entered).
Follow the directions to make a “CREATIVE” KompoZer document which uses a table. You will upload your images and text, then take a screen shot to paste into a MS Word document. Look at the grading rubric to see if you can get maximum points here.
4.04 (Basic Building Content (3 hours) 100 points
So far, your website from the storyboard you created is BLANK. But now it’s time to add the text to your website. You will also apply text styles to your site.
To make this easier, BEFORE YOU START TO DESIGN YOUR PAGES, read through the links at the bottom of the lesson. These sites will help you make choices about which design elements to include on your page.THIS LINK DOES NOT WORK: Ohio University's A Simple Guide to Creating Your Own Web Page.
Now that you have read the material, follow the steps at the beginning of the assignment to change your index pages and the other 4 pages of your web site. Take a screen shot AFTER YOU COMPLETE each page and place it on a MS WORD DOCUMENT. Your final MS Word Document will be 1 document with 5 different screen shots separated by a Page Break. Check your grading rubric so that you can get maximum points. And remember: content, grammar, punctuation, and spelling are all important!
BONUS POINTS AVAILABLE THIS WEEK: For extra bonus points this week, post a comment which contains the ACTUAL TIME you spent this week on the tutorials and whether you feel you spent enough time reading and studying the material.
That’s it for Week 5. Your assignments are due Monday, November 16, 2009! We will continue Module 4 next week with a really fun assignment!
Can you believe we will be midway through the class this Wednesday! The last day of class is December 16, 2009—I am already sad that it’s ending so soon and I won’t have my Shaw students to talk with every day.
Well, enough sadness! Let’s get moving into Module 3. There is a review of some of KompoZer features, but many new things are also introduced. Plan to spend about 10 hours on this work. Module 3 assignments are due Monday, November 9, 2009 and carry a total value of 550 points.
3.00 Module Introduction: First Impressions (15 minutes)
It’s been said that “you never have a second chance to make a first impression.” Module 3 gives you the tools to make that first impression with your web site. Pay particular attention to the tools you will use and how to make them work for you. Also notice the points on making an attractive and inviting web page.
ARE YOUR PLEASED WITH 2.03 WORK? It’s not too late to improve those pages you created in 2.03. You will learn some more pointers here, so before your pages go “Live”, why don’t you make them even better. Just remember the files must be in NOTEPAD (not MS WORD) for them to work on KompoZer.
irst we will review the web design tool, KompoZer. Visit every subject listed in the Tutorial. There is even a screencast video to help you get started. Caution: the video is just to get you started; it runs fairly quickly. After you view the video, go back and study the Basic Tutorial found on KompoZer. The following sections are covered on the quiz for 3.01. (If you want to score a good grade, spend the time on the tutorial!)
3.02 Naming the Web Site: 15 minutes (revised)
Before you begin, make sure your folders for this class look like the following screenshot. If not, GO BACK NOW AND CORRECT YOUR FOLDERS. Failure to do this will result in not being able to follow the directions later in this module. ADD YOUR INITALS TO THE MAIN FOLDER NAME: xxwebdes2 (This is NOT Shown in the screen shot!)
DO NOT FOLLOW THE STEPS IN MODULE 3.02 INSTRUCTIONS (I was not successful in getting your technical person to allow you to post your web pages to the school web site. Therefore, you will continue to ZIP your work for me to grade it. If you need a refresher on zipping files, refer back to Web Design 1, Module 3.03.)
This lesson gives you some more tools for you work in KompoZer. Study each feature listed because you will be tested on all of them.
The lessons include files that you will download for practice. Follow the directions in the module exactly as they are given to do this work. Then you will use these files as you go through the tutorials. Otherwise, you will miss some valuable information. Some of you requested videos to help you with the lessons. This module has those videos. Let me know if they help with the lessons.
This lesson covers items such as text, images, and CSS (Cascading Style Sheets) that will make your web pages more attractive for your viewers. There is NO SHORT CUT FOR YOUR COVERING EACH TOPIC. Failure to review and learn each topic will result in your web pages that you develop being less than satisfactory.
3.04 Construction Begins (3 hours) 100 points
Now for the fun part. You will begin to create your own web pages. But remember, you will not FTP your pages to your school web site. Follow the directions given, and then ZIP your pages and send them to me in your dropbox. NOTE: your pages will be blank at this point. The only thing listed will be your index page, the other 3 you made, plus your Resource page.
Although you cannot FTP your pages, go through the tutorials anyway, just in case we get permission to add your pages to the school web site. I am still trying to work on this with your technical person.
3.05 (First Impressions – Discussion) 50 points
You will learn more about how important it is to make a first impression with your web site. You will explore a tutorial that gives you some pointers on this subject. Then you will review Shaw School District’s web page. You then discuss your first impressions on this site with your classmates.
3.06 Meta Tags (1 hour) 100 points
This lesson introduces you to Meta tags, aka head tags. You get to practice with these tags and include them in your own site. Meta tags make things really easy for someone to find your web pages in search engines. This will give your site more readers.
After you complete the steps required, take a screen shot of your screen which shows you completed the work. Paste that screen shot into a MS Word document and send it to me in the dropbox.
3.07 Review and Oral Exam (30 minutes) 100 points
Review all the information presented in Module 3. Then call me during office hours at 601.810.4923 to complete an oral exam. You will file the results of our discussion in dropbox 3.07.
The Assignment: write a three to five paragraph response.
Identify the Web hosting service you feel is the best to use and discuss the pros and cons of this service. Be sure to indicate why you feel this is the best choice. Also, provide the full URL to the Web hosting service you are discussing.
Identify the Web hosting service you feel is the worst to use and discuss the pros and cons of this service. Be sure to indicate why you feel this is the worst choice. Also, provide the full URL to the Web hosting service you are discussing.
Be sure to cite two or more sources at the end of your posting. Remember to provide the full name and URL of the site. The URL should be an active link. Please use resources in addition to the resources found on the Spec page.
Respond to at least one other student's posting on this topic.
Here are some sites I found with Google's Advanced search to help with this assignment. (You may use these or find other ones.)
Web Hosting 101 Beginner's Guide (chose the Web Hosting information you want to read from the list on the right): http://hosting-101.blogspot.com/
You may "borrow" my outline to write your essay. (Remember each paragraph must have 4-5 sentences.) Use MS Word or Google Docs to key your essay.
Paragraph 1
Introduction of assignment.
How I found web hosting companies to evaluate.
What I consider important for a web hosting company.
THESIS STATEMENT: After reviewing numerous web hosting companies, I selected one company to highlight as the best company and the other as the worst company.
Paragraph 2
My choice for best web hosting company.
URL for the best web hosting company.
Why I think this is a good web hosting company (features, cost, etc.).
Paragraph 3
My choice for worst web hosting company.
URL for the worst web hosting company.
Why I think this is not a good web hosting company (features, cost, etc.).
Paragraph 4
Summary of my response to assignment.
What I learned from this assignment.
How I will use this information in the future.
HOW TO post your essay to the Discussion Board
Spell Check your work
Let a classmate read your essay and offer suggestions.
Review the Grading Rubric
Copy the Word or Google DOC
Highlight the entire essay, Press Ctrl+C;
Go to the Discussion Board 2.01, Click on Compose, Key in a Title (like Web Hosting Companies) Paste the essay (Ctrl+V), then click post.
Respond to another student's post. Extend their post by making comments and asking a question.
Place a file in Dropbox 2.01 which summarizes your work on this assignment.
Grading Rubric
Item
Total Points*
Included two specific Web hosts in the comparison
10
Included working URL for each Web host
10
Completely answered discussion topic/question with a three to five paragraph response
10
Used complete sentences, correct grammar/spelling
10
Responded to at least one other student on this topic
Welcome to the next phase of our web site design! There are so many things to consider in this module such as locating a host for your web site, obtaining a domain name, and learning the html codes required for a web page. This module requires a LOT of READING. Please do not try to short-cut this reading because you will definitely need the material in later modules. Also, there are some links in the reading which do not work. I noted these broken links in the sections below. If you find other non-working links, please email me with that information.
Hint: Keep this BLOG open in a tab on Firefox; open your course content in another tab so you can look back at the BLOG as you study your course material.
Do not print the course content materials except for the Task List. Do take good notes on each hyperlink that is presented. You may use MS Word or Notepad for your note taking. Or if you have a gmail account, you may use Google Docs to record your notes. (I'll give extra credit for google docs!) Take notes from each web site presented. Be sure to copy and paste the URL of the site you are studying along with the important information from that site. Save your work in a file or on Google Docs. You may print your notes--just DO NOT print the whole web page you study.
2.01 Site Exploration (2 Hours)
Under "What to Consider", the Link to WebSite Speed Test is incorrect. Use this link for Website Speed Test: Website Speed Test.
Under "Articles to Read" the link to Matt Lake's site Web Hosting 101: How to pick the right web host does not work. Use this link instead: http://hosting-101.blogspot.com.
Google's Advanced Search takes some time to learn. Spend that time in this module because you will be using the advanced search many times in the course. To help you understand how to use Google's search capability, read this article "Four NETS for Better Searching". Practice finding information for your research paper using these two new skills. (No more ask.com OR plain google searching!)
You will summarize information from all the web sites presented in the discussion area by writing a 3-5 paragraph essay. You must have at least 3 paragraphs--practice your writing skills and do 5! And a paragraph must be at least 5 sentences in length! Look at the grading rubric--grade yourself before you post. And be sure to Spell Check your work before you hit that post button. (Spell check can check your work, but it can't check your mind.)
Visit Copyright Kids for a review of copyright and fair use. http://www.copyrightkids.org/ (Click on all the selections to see a quick explanation of major points of copyright laws and how to apply them in school.)
Remember our Web Design 1 Class Blog on copyright and ethics? Well, just in case you forgot, here it is again!
In any research, it is important to properly cite your resources. For this course, please cite your resources in APA format and list them at the bottom of each text page.
Each citation must follow the APA formatfor the type document used (web page, book, periodical, etc.) This information will only be submitted with your text pages and is a requirement for each text file submitted.
Visit the following link for documenting sources in APA format: Son of Citation Machine (http://citationmachine.net/)
Notice that it is a “point and click” web site that allows you to key in information about your references. Then after the output is generated by the web site, you may copy (Ctrl+C) and paste (Ctrl+V) this information into your text document.
Practice using the APA documentation tool.
(Practice exercise: Follow the steps below to complete a reference in APA format taken from this page: Digital Etiquette) (To view a view on this practice exercise, go to: http://www.screencast.com/t/pF8h3scxyf.)
Enter the data requested for APA documentation and press submit.
Review your APA citation for accuracy; correct any mistakes, then Copy (Ctrl+C) and Paste (Ctrl+V) the citation into your work.
Use this web site to document references every time you write papers. Just be sure to ask in what style the references should be formatted: APA, MLA, Turabian, etc.
As a reminder, this class requires APA documentation for all references. Failure to document the references will result in major deduction of points from your work.
2.03 Gathering Material (3 Hours)
Once again, it's time to make your directory. Do you remember how many times you had to rework this assignment in Web Design I? Bet you get it just right the first time for Web Design II.
Next you get to practice those research skills you learned in the last module. You will develop 1 (one) Notepad or Google Docs file that includes ALL the pages you listed in your storyboard from Module 1. Record research notes about each subject you listed in your storyboard. You will also document the sources in the APA format using Citation Machine.
Hints:
You will have ONE DOCUMENT with all 5 web pages from your storyboard listed.
Under each web page you listed, record your research for that web page.
Your references will all be listed under Resources (probably your last page of your storyboard.)
You must make references using the APA format.
Proof read your document carefully; spell check it, and ask another classmate to check it over for you before submitting it.
Your grade depends on quality work!
2.04 Building Codes (3 hours) Please note: this module is not one to be ignored or rushed. Spend time learning the HTML codes. YOU ARE responsible for ALL the codes in the lessons.
Go to the W3Schools web site and complete the HTML tutorial.
At the end of the tutorial, there will be a quiz.
Print the certificate showing you have passed the HTML quiz.
Email me with your score on the HTML quiz. I will record your grade in the gradebook.
Add a comment on this Blog as follows: Which lesson was the easiest for you? Which lesson was the hardest for you to understand. What would you like to see in future editions of our CLASS BLOG? You can receive up to 6 BONUS POINTS for your comments!
