Assignment One
Due Date and Readings
Assignment one is due no later than the beginning of class on Tuesday, October 20 (day) or Wednesday, October 21 (eve). Your Assignments should be posted on the Web by this time for access during class that day. All readings listed as preparation for this assignment are linked via icons, created by, and property of, the destination sponsor.
Review Marshal Brain's "How Web Servers and the Internet Work." |
 |
Review Scott Finnie's "How the Net Works." |
 |
Review "Surf the Web: How the Web Works," "Web Browsers," and "Top Ten Tips." |
 |
Trellix: "A Web-site that discusses how to create good business documents in the linked, on-screen environment of Intranets and the Internet." Explore "Techniques, Samples," and "Related Sites." |
 |
Read about what to do and what not to do when designing a page. |
|
Read "Writing for the Web" by Jakob Nielsen |
|
The W3 Schools tutorials on Cascading Style Sheets (CSS) will give you a leg up on creating interesting styles for the Web. |
|
Use the HTML Code Tutorial when you need to check out a detail or two. |
|
Review Steve Mulder's "Stylesheets Tutorial" at Web Monkey. |
 |
Explore this amazing graphics and typography resource as you design your own Web pages. If you use this material, be sure to link to and credit Boogie Jack. |
 |
Assignment Purpose: to Create the Functional prototype of Your Portfolio Web Site
Produce a functional prototype home page that links to placeholder pages for assignments 2 and 3. You will create a well-designed template (using XHTML and CSS), Web folders, files, external hyperlinks, and internal hyperlinks using text and graphics. In short, this assignment will launch the first phase of your portfolio Web site containing all the semester's work. The better assignments will demonstrate a solid and functionally correct design approach.
Minimum Tasks to Accomplish
- Review all pertinent readings and tutorials.
- Create Web directories (folders) and
files on your C: drive to copy to your M: drive and flash drive or CD/DVD,
ultimately to be FTP'd to the server:
- Five folders : Using lower case letters and no spaces, name these folders: assign1, assign2, assign3, exercises, and images. Note: these folders must be named exactly the same on your local drive and on the server.
- index.html: For the first assignment, this will be a placeholder page that will provide a title, brief description of your site, and links to the other pages of your site. Summarize the goals and objectives of this page; offer some quoted material from the assignment requirements. Be sure to provide a link to the assignment on the IDCC 370 class Web site. Use the template and css file to build this page. Provide a meta Description line in the XHTML head, and supply 5-10 key words. All of this is for search engine optimization.
- Template page: Design a page template that will govern the layout, colors, and text of all your site pages. This template will reside in the assign1 folder. Provide a meta Description line in the XHTML head and supply 5-10 key words. All of this is for search engine optimization.
- CSS file: Create a well-organized and fully commented Cascading Style Sheet (CSS) file for style rules. All pages of your site will link to this file. This css file will also reside in the assign1 folder.
- Site Map: Your site map will reside in the assign1 folder and be named sitemap.htm. Provide links to all pages, with brief descriptions, as illustrated in my IDCC 370 site map page. This page should have a brief introductory paragraph indicating the purpose and scope of the Web site. Also include the top-tier overview graphic of your Web with a short introductory paragraph about the structure of your Web site. Following this, present your site sections and all their pages with a phrase or two explanation of each. These areas of your page should be preceded with appropriate subheadings <h2>. Title page <title> and graphics for browser readability (meta and alt tags). Provide a meta Description tag in the XHTML head, and supply 5-10 key words. All of this is for search engine optimization.
- Three placeholder files: For folders assign2 and assign3, create placeholder files, using your site template, for each assignment. Name these files in lowercase and use no spaces: about.htm, essay.htm and survey.htm. Summarize the goals and objectives of these pages (check out Assignment 2 and Assignment 3 for details). Offer some quoted material from these assignment requirements. Be sure to provide a link to the appropriate assignment on the IDCC 370 class Web site. Title page <title> and graphics for browser readability (alt and title attributes in the img tag). Provide a meta Description tag in the XHTML head, and supply 5-10 key words. All of this is for search engine optimization. Note These placeholder pages will eventually become the two assignments.
- Exercises gateway page: This page, exercises.htm, will be a gateway or entry page to your class exercises. Provide an introduction to the exercises and hyperlinks to all of them. Also write an introduction to the page itself, and then briefly describe the purpose of each exercise and hyperlink to each exercise. Eventually, as you work on the design of your template, this page will become very attractive and will participate fully in the thematic unity of your site. Title page <title> and graphics for browser readability (meta and alt tags as well as "title" attributes). Provide a meta Description line in the XHTML head, and supply 5-10 key words. All of this is for search engine optimization.
- Here is how your
Web directory should look inside Dreamweaver's files panel:
- Template and CSS: Start to think of a visual theme for your site (colors, graphics, and layout). For assignment 2, you will take this further from a visual design perspective, but for now, create a site template file named template.htm and a 370.css file to reside in the assign1 folder. This template file, styled using CSS (organized effectively and commented liberally to explain all the rules) will serve as the ultimate design source for all the pages in your site this semester. While the template must be of your own design, you must also fulfill the following minimum requirements:
- Create a wrapper layer: 40em width; centered in the browser window; padded 1em, top, right, left, and bottom; light or white background color.
- Design other layers as appropriate. You may occasionally use a table for formatting, but keep table formatting at a minimum.
- Style the page body using a dark background color or interesting gradient graphic or other appropriate background graphic.
- Create hyperlinks that tastefully and effectively exhibit active, hover, and visited states.
- Supply styles for body, p, ul, ol, h1, h2, h3, h6, and any other selectors you choose. Be sure to set h1, h2, and h3 font colors, a paragraph indent of 1em. All text sizes must be set using % or em (not pixels or points). Use IDs to identify your layers for styling, and create class rules where necessary.
- Provide a page footer that includes a text-based global navigation bar, appropriately styled using css, and a complete signature. On each gateway (especially top-tier) page of your site, adjust this template so that the page hyperlink is inactive. In other words, "gray the link out" — kill the actual link — as you almost never want a page to link to itself (there are exceptions, which I will explain in class).
- Link all pages in your site to 370.css, the commented and appropriately organized cascading style sheet file.
- Validate all site pages in Dreamweaver and at W3C.org's HTML Validator
. - To review: your assignment will consist primarily of at least ten pages or more: your index.html, template.htm, 370.css, about.htm, essay.htm, survey.htm, exercises.htm, sitemap.htm and the exercise pages themselves. All pages must be linked properly and reside inside the site root or in their appropriate folders: assign1, assign2, assign3, exercises, and images. Navigation should be clear, logical, and consistent from page to page. Review the IDCC 370 Web Model if you need to see how all of these pages work together. Remember, this is just a model, so don't simply copy text ver batim.
- Ensure that all pages are well-written and error-free. Should you need help with your writing, schedule some one-on-one time with a peer tutor in the Writing Center or at the ESOL Center in the Library.
- FTP all your files to the server. Save your complete Web to an external medium (disk, flash drive, CD or DVD).
- From the Internet, browser test your assignment to make sure that all elements function correctly. Do not simply test your pages in Dreamweaver; they must be tested on the Bentley server. Make your assignment printer-safe from the browser; that is, make sure that the entire page will print (no chopping off the right side).
- At class time, hand in a printed copy of the entire
assignment as it appears rendered in the browser on the Internet (not out of Dreamweaver on your C: drive). Also hand in a copy of the XHTML source,
printed from the browser (On the Internet, view source, and print from Notepad). Make sure to place the rendered printout on top of the XHMTL printout for each page of your site and staple them together.
Here is the order of your assignment packet:
- The first sheet will be a title page with only your full name and assignment one in the upper right corner. I want this page largely blank so that I can write comments on it; the screen shot below shows the title page followed by the home page rendered view and home page markup or source view (click on the picture for an enlarged view):
- After the title page, here is the order or your assignment packet:- home
- css
- template
- about
- essay
- survey
- exercises
- site map
- exercise 1
- exercise 2
- screen shot from Dreamweaver of the files and folders view of your entire site to date
- To conclude the assignment, please fill out the interactive response form for assignment one.
