For this lab, you will practice the Web site development process. We’ll
take baby steps by choosing a relatively simple site to develop: your
personal Web site for this Eng. 413 class. You’ll first follow
John Shiple’s advice and produce a design document. Then you’ll
complete a mock-up of your personal Web site, which should contain the
interface design elements discussed by Lynch and Horton (Ch. 2 of Web
Style Guide), and Shiple.
For this assignment, don’t worry about creating an elaborately
polished Web site. Your main goal is to brainstorm the site’s
information architecture, create all of the pages of your site, and
organize them in the right folders so that the site is actually working
and navigable by the end of the lab.
| Task |
Hint |
Sample |
1. Open a new blank Word file and save it
into your “public_html” folder.
|
Name the file “Lastname_design_doc.doc” |
|
| Type a main title, something like “Design Document for Lastname’s
Web Site.” |
|
|
| 2. In the Word file, brainstorm your goals for
your personal Web site. |
Type a heading called “Goals.” Consider your audiences
for this site and brainstorm what they’ll want from your site.
Turn their needs into a list of goals for your site. |
|
| 3. Next, define your audience more clearly. |
Type a heading called “Audience Definition.” List
each audience and then develop brief user scenarios for each audience.
These scenarios should spell out who the audience is and how they’ll
use your personal site. |
|
| 4. Complete a brief analysis of the following
two “competitor” sites: • Site 1:
Mitch McAllister
http://www.rpi.edu/
~mcallm/wwww/
• Site 2:
Michelle Monazym
http://complabs.nevada.edu/
%7Emonazym/ENGLIS%7E1/
index.htm
|
Type a heading called “Competitive Analysis Summary.”
Skip a space and type the words “INSERT SUMMARY HERE.”
Skip another space and insert the following table
(copy and paste the table from “layout” view in Word).
Complete your analysis of site 1 and then site 2 using the table.
When you finished with your analysis of sites 1 and 2, go back
and write a brief summary of the pros and cons of what the “competition”
offers.
(NOTE: If you’re following this in print form, the table
is below)
|
|
| 5. Identify your site’s content. You
must have at least three levels of information and at least six
pages.
|
In your design document, create another heading called “Site
Content.” Brainstorm your site’s main pages, or “nodes,”
and the site’s hierarchy of information. Create a “Site
Diagram” in this section using Word (You could keep it simple,
using decimal numbering or use the drawing tools for a more elaborate
hierarchical “site map.” See Shiple’s examples
--> |
See Shiple’s examples:
http://hotwired.lycos.com/
webmonkey/98/28/index3
a_page3.html?tw=design
|
| 6. Plan your site’s “backend,”
or file management system. |
After you figure out what pages you’ll have on your site,
determine how you’ll name the folders and files of your site.
Remember to keep the folder and file names of your site:
- Short
- All lowercase letters
- No spaces (but can use underscore “_” key)
- No questionable characters (like &, *, %, etc.)
Of course, your home page will be named “index.html."
|
See examples in Joshua Allen’s “Organizing Your
Site”
http://hotwired.lycos.com/
webmonkey/99/39/
index3a.html?tw=design
|
| 7. The final step of your design document is
planning the visual design. |
In your design document, create a heading called “visual
design.” On some scrap paper, make some “thumbnails,”
or sketches, of your site’s interface.
Remember, the main element of your interface is the navigation
or “button” bar, which are usually located
either at the left or top, occasionally at the right. Choose one
and create some type of representation of your planned interface
in your design document (again, this could be crude text or made
with Drawing tools).
|
|
| 8. Start building your site by first creating
a template of your navigation interface. |
Create a Dreamweaver file named “template.html”. You
can start from scratch (i.e., new blank page) or re-save your current
index.html page as “template.html” and re-work what
you have.
Layout your interface within a borderless table that includes
your navigation bar and space for content (see the example at
right).
|
In the following example, the Web page is set up within a liquid
table (using % value). To see how it’s done, I’ve left
the table border at “1”, but to create a borderless
table, you set the table border value to “0.” Example:
http://www.unlv.edu/
faculty2/jablonski/
413/lab2_example.html
|
| 9. In the navigation bar of your template page,
add the links to your other pages, following your file naming system
(step 6). |
The internal navigation of a Web site relies on “relative”
links, or just the name of the file and, possibly, the
directory (or folder) name.
To create a link to a “links” page, assuming it’s
in the same public_html folder, you simply highlight the “links”
text in your navigation bar and type “links.html”
in the property inspector.
Creating relative links to sub-directories is as simple as typing
the name of the folder and then the file name (e.g., “links/personal_links.html”)
To create a relative link up a directory level, you type the
symbol “../”. To link out of the links folder, back
to the main page, you’d have to type: “../index.html”
|
See “Linking” in Joshua Allen’s “Organizing
Your Site”
http://hotwired.lycos.com/
webmonkey/99/39/
index3a.html?tw=design
|
| 10. Make your template page “freestanding”
by ensuring that it has the five elements outlined by Lynch and
Horton. |
The authors of the
Web Style Guide. . .
|
|
| 11. Now that you have a template with a linked
navigation bar, you can quickly generate the rest of the pages of
your site, re-saving the template page as the file names you chose
in step 6. |
|
|
| 12. Build the “backend” by reorganizing
and/or adding subdirectories (sub-folders) to your public_html folder.
|
|
|
| 13. Add a link to your design document from your
home page. |
Linking to Word files is easy, just make sure you have the whole
file name in the “link” field of the property inspector.
The Word file must be in the directory location indicated by the
link (see step 1). |
|
14. Test your Web site. |
- Any broken links?
- Does each page have a title?
- Is there a way to get back to the home page from each node
(i.e., no dead-ends)?
- Did you add a link to your design document on your home page
and does it work?
|
|
| 15. E-mail Dr. J your new web page’s
address |
Dr. J’s e-mail address:
jablonsk@unlv.nevada.edu |
|
