Module 2: Getting Started with Dreamweaver, HTML, & XHTML (Week 2, 1/23 – 2/1)
Module 2 Page
Rubric for plain 502 page URL
Assignment 2 & Discussion Forum
Assignment 2 Showcase Forum
Part of creating a community is learning from each other. Lots of studies indicated that learning can be improved through observing handicrafts and working examples. Please share your assignment to the class. Be sure to add your own thread of discussion by clicking on the button that says “add a new discussion topic”. Label it with your last name. If you would like to reply to your peers just click in the discussion box on their last name then you can reply!
Assignment 2 Help Desk Forum
Week 2: January 23 – February 1
Topic: Getting Started with Dreamweaver, HTML, and XHTML
Assignments Due: February 1
Thanks for sharing in the Introduction Forum. I enjoyed reading about all of you and meeting everyone. We have a very diverse online community spread across many countries! This week we begin working with Dreamweaver and basic XHTML code to create a simple Web page with a list of projects to be created in this class.
Next week we will apply CSS to format the basic Web page created this week.
List of Assignments
Dreamweaver CS5.5: The Missing Manual
Read pages 21 through 43: Dreamweaver CS5.5 interface
Read pages 713 through 725: Defining a Site
Skim pages 433 through 472: Under the Hood HTML
HTML, XHTML & CSS
Read pages 55 through 68: Basic (X)HTML Structure
Skim pages 399 through 408: (X)HTML Reference
Skim pages 419 through 429: (X)HTML Symbols and Characters
Create a Plain 502 Project List Web Page (50 Points)
The project this week is to create a Web page with a list of projects created in this class. Eventually, this will turn into a project list page used to link to your 502 assignments. We are starting off with XHTML only to ease into Dreamweaver and XHTML code. When you finish you will have something similar to the instructor example.
Instructor Example: http://edtech2.boisestate.edu/hungj/502/plain502.html or http://edtech2.boisestate.edu/evanouskil/502/plain502.html (Note: To view the XHTML code on the example open this page in Firefox, click the View menu, then click Page Source.)
As you can see, this is a very plain page with black text on a white background. Next week we will make it prettier with CSS. For now, let’s focus on getting Dreamweaver set up to connect to the server, build this basic page, and upload it to the server so that it can be opened from any computer with Internet access.
Dr. Snelson has prepared a series of videos designed to help you learn the skills needed to complete the assignment. Please do the reading first and then watch the videos.
You will need the free Flash Player to play the video.
- Dreamweaver CS5 Welcome Screen (5 Minutes, by Dr. Chareen Snelson): http://edtech.boisestate.edu/snelsonc/videos/dwcs4welcomescreen/dwcs4welcomescreen.html
- Dreamweaver CS5 Workspace (4 Minutes, by Dr. Chareen Snelson): http://edtech.boisestate.edu/snelsonc/videos/dwcs4workspace/dwcs4workspace.html
- Defining a Site in Dreamweaver CS5 (11 Minutes, by Dr. Andy Hung): http://edtech2.boisestate.edu/hungj/videos/dwcs5sitedef/dwcs5sitedef.html
- Basic File Management in Dreamweaver CS5 (9 Minutes, by Dr. Chareen Snelson): http://edtech.boisestate.edu/snelsonc/videos/dwcs4files/dwcs4files.html
- About the 502 Page Project (3 Minutes, by Dr. Chareen Snelson): http://edtech.boisestate.edu/snelsonc/videos/about502page/about502page.html
- About the XHTML on the 502 Page (15 Minutes, by Dr. Chareen Snelson): http://edtech.boisestate.edu/snelsonc/videos/xhtml502page/xhtml502page.html
- Validate Your XHTML Code (8 Minutes, by Dr. Chareen Snelson): http://edtech.boisestate.edu/snelsonc/videos/xhtmlvalidate/xhtmlvalidate.html
- Define a new site that will connect to the EDTECH2 server. You will use this site to store the files created in this class or other courses others taken in the program.
- Create a new folder and name it 502. This folder is where you will save the projects for the EDTECH 502 class.
- Create a new HTML page in Dreamweaver. I recommend using the default XHTML 1.0 Transitional doctype and .html file extension.
- Save the new HTML page as plain502.html and save it inside the 502 folder. When creating Web pages, folders, or other files for the Web please use lower case letters or numbers in the name. Avoid the use of spaces in file or folder names. Most of the time we will also avoid using characters such as #@$%&^* for Web page file or folders names.
- Add two or more div tags to the XHTML code on your page to create logical sections on the page. You can follow the instructor example, or do yours differently.
- Add one or more HTML comments to the code.
- Type a new browser title between the <title></title> tags in the head section of the XHTML code.
- Type a new page title in the body section of the XHTML code. The example uses “EDTECH 502: The Internet for Educators.” You can use this same text or something else if you wish to title your page. Format the page title as heading 1 (h1).
- Type your name and affiliation.
- Add at least one horizontal rule (Insert–>HTML–>Horizontal Rule). This is the <hr /> tag in the code.
- Type a description to explain the purpose of the page. The example uses “This page contains links to projects created as part of my course work in EDTECH.” You can use this same text or type something different.
- Type the text Project List to serve as a header for the list of projects and format it as a heading 2 (h2).
- Type the list of projects shown on the example page: Netiquette page, Accessibility hot links page, Copyright scavenger hunt, Interactive concept map, Jigsaw Internet search activity, m-learning activity, EDTECH home page, Virtual field trip, WebQuest. You can leave out the descriptions unless you want them included.
- Put the list of projects into a bulleted list.
- Add a copyright section with a copyright symbol, date, and your name.
- Save and upload your page to the EDTECH2 server. Try typing the address to your page to open it from the server. Your page should have an address similar to the example below. However, the “evanouskil” part of the URL will be changed to your own Bronco user name.
- Validate your code with Dreamweaver and also with the W3C Markup Validation Service at: http://validator.w3.org/
- After your code validates on the W3C site, copy and paste the code for the “Valid Icon” on your page just above the closing body tag.
- I would suggest spell checking your page. Click the Commands menu then Check Spelling.
- Save your page and upload it to the EDTECH2 server. Please make sure that it is saved inside the 502 folder.
- Post complete URL on the Assignment 2 Showcase discussion board to share with the class.
Assessment Rubric for the Plain 502 Page
||Excellent 90% – 100%
||Adequate 70% – 89%
||Insufficient 0% – 69%
|Required Code Elements 15 points
- 2 or more div tags
- 1 or more HTML comments
- Browser title
- h1, h2, horizontal rule
- bulleted list
- copyright symbol
- validation icon
|All of the required elements have been added to the page.
||Most of the required elements have been added to the page. One to four required elements are missing.
||Few of the required elements have been added to the page. More than four required elements are missing.
|Reqired Text Items 10 points
- Page title
- Name and affiliation
- Description of page content
- Project list heading
- List of projects
- Copyright section
|All of the required text items have been added to the page.
||Most of the required text items have been added to the page. One to four required text items are missing.
||Few of the required text items have been added to the page. More than four required text items are missing.
|XHTML Code Accuracy 10 points
||All of the XHTML code is written correctly and passes the W3C validation process.
||Most of the XHTML code is written correctly. One to four mistakes such as incorrect nesting, missing closing tag, or mistyped code.
||Little of the XHTML code is written correctly. More than four mistakes.
|502 Folder 5 points
- Create 502 folder on server
|A new folder named 502 has been created and uploaded to the EDTECH2 server at the top level within the root folder.
||A new folder has been created and uploaded to the EDTECH2 server, but it is either not named 502 -OR- it has been put in the wrong place (such as inside the images folder.)
||A new folder has NOT been created or uploaded to the EDTECH2 server, -OR- it is not named 502 and it has been put in the wrong place (such as inside the images folder.)
|Page Name 5 points
- Web page is on the server and named correctly
- Web page is saved inside the 502 folder
|The Web page is named plain502.html and it is uploaded into the 502 folder on the EDTECH2 server.
||The Web page is named plain502.html and it is uploaded to the EDTECH2 server, but it is not inside the 502 folder.
||The Web page is not named plain502.html and it is not uploaded into the 502 folder on the EDTECH2 server.
|E-Mail Link 5 points
||A link to the Web page is sent by e-mail to the instructor. The link is correctly written and successfully opens the correct page.
||A link to the Web page is sent by e-mail to the instructor. The link is not quite correctly written or does not open the correct page.
||A link to the Web page is not sent by e-mail to the instructor.
Introducing the EDTECH Portfolio: Please Review this Information
Students who were admitted to the Master of Educational Technology (M.E.T.) program in the 2008-2009 Graduate Catalog (or later) are required to create an electronic portfolio as the culminating activity for the program. This replaces the comprehensive exam that used to be taken at the end of the master’s program. If you have just been recently admitted to the M.E.T. program this applies to you. The following information will provide you with an overview of the portfolio. You should start working on it this semester and continue creating is as you pass through the program.
Video Presentation About the Portfolio: This presentation explains the portfolio for the M.E.T. program.
Handout of the Slides: Download this PDF document. It contains the slides from the video presentation describing the portfolio.
Links to Additional Information
Portfolio Template: When you assemble the portfolio you will be asked to match each assignment to the AECT standards. A template has been created to show one way to set this up. Please check the syllabus for each EDTECH course you take for information about the assignments and how they align to the standards. In EDTECH 502 there is a list of assignments and a table of standards and the assignments they correspond to. Save and use this information when creating your portfolio. In the portfolio course you will finish creating the final portfolio and then submit it for review. Link to template: http://edtech2.boisestate.edu/snelsonc/portfolio.html
Program Outline and Sequence: Here is the flowchart showing the program outline and sequence. The M.E.T. program in the middle branch. Link: http://edtech.boisestate.edu/web/outline.htm
Description of Culminating Activities for M.E.T.: This page describes the portfolio for the newer M.E.T. program and the comprehensive exam for the older M.E.T. program. Link: http://edtech.boisestate.edu/web/met-portfolio.htm
Ongoing Participation in Class Discussions (50 points at the end of the semester)
Participation in class discussions will be completed in a flexible manner. Your ten BEST posts will be graded at the END of the semester. Posts should be 50 to 150 words, contribute something of value to the discussion, and be written in a professional manner. A spell check tool is available in the discussion board. Please use it before submitting.
The ten graded discussion posts cannot be submitted during the same week. They need to be spread out over several weeks. You don’t have to post every week, but please distribute your participation posts over four or more weeks time. This will assure high quality ongoing discussions throughout the semester.
Participation includes the following:
- responding to a question or comment posted by the instructor;
- responding to a question or comment posted by another student;
- providing information and/or commentary about a great online resource with the link provided;
- Starting a new discussion thread on a topic consistent with what we are studying;
- Review an article on eSchool News or eCampus News and post your review and a link to the article;
- helping another student solve a technical problem and posting the fix.
Participation in the discussion board will be graded at the end of the course. The last day to submit posts that count toward participation is May 8.
Discussion Participation Rubric
|Number of Posts10 Points
||9 – 10
||6 – 8
||3 – 5
||0 – 2
|Quality of Information20 Points
||9-10 posts contain 50 to 150 words that contribute something meaningful to the discussion.
||6-8 posts contain 50 to 150 words that contribute something meaningful to the discussion.
||3-5 posts contain 50 to 150 words that contribute something meaningful to the discussion
||0-2 posts contain 50 to 150 words that contribute something meaningful to the discussion.
||90 to 100 percent of the posts are written in a professional manner, free from spelling errors and typos.
||60 to 89 percent of the posts are written in a professional manner, free from spelling errors and typos.
||30 to 59 percent of the posts are written in a professional manner, free from spelling errors and typos.
||0 to 29 percent of the posts are written in a professional manner, free from spelling errors and typos.
|Submission Dates10 Points
||Posts submitted on 4 or more separate weeks.
||Posts submitted on 3 separate weeks.
||Posts submitted on 2 separate weeks.
||All posts submitted on the same week.
This entry was posted in EdTech 502
and tagged 502
, Module 2
. Bookmark the permalink