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.
