Date Assigned: Monday, June 1, 2009 Date Due: Monday, June 8th, 2009 GART 2512 Publishing on the Internet • Web Design Exercise Assignment: In this exercise, you will assist a client in the initial stages of planning, budgeting, and designing a web site for his or her business or other entity. Client description: Your client is the founder and chief executive of Memphis Metal Fabricators, a small manufacturing firm. The firm manufactures two product lines: (1) metal woodworking tools like hand saws, chisels and screw drivers and (2) garden tools like shovels and rakes. He has 57 employees. His 18 clerical, administrative, and managerial employees all use Windows PCs networked to the same servers and printers. All have internet access. Your client would like to have a web site (MemphisMetalFabricators.com) highlighting his company’s accomplishments, personnel, products and services. You have been asked to investigate the steps and costs involved in getting this web site up. You will respond by presenting your findings in a meeting. You will also produce a written report. Your Tasks: 1. Recommend a hosting company and a specific plan. Explain your recommendation in terms specifically applicable to this company. For example, you chose a host that uses a Windows server because the employees all use Windows PCs. Justify expenses, i.e. Set-up costs, monthly fees, number of email accounts, server disk capacity, 24/7 service, shopping cart availability, credit-card purchases, and any other relevant factors you think relevant. 2. Is your client’s preferred domain name available? If not, recommend alternatives. Indicate the cost of registering the domain name for two or more years. 3. Draw a flow chart to show your initial plan for implementing the needed HTML to produce the site. Your plan should describe a web site consisting of at least four separate pages: Introduce the CEO and other key personnel, Company financial information, wood working products, garden products. (You do not have to create any HTML at this point—just show that you understand this will be needed to complete the project. 4. Provide a preliminary budget that shows all costs identified above as individual line items. Estimate your costs for completing the project as follows:

Client consultations: $300. Web design: $300. HTML coding: $1200. (24 hrs/$50 per hour) Working with host company: $300. (this includes uploads to server, domain name registration and any other needed interaction with host company) Total estimate cost: $2100.

Requirements: You will turn in your completed word processed report Monday, June 8th, 2009. Use a graphics program to make the flow chart. Do not turn in anything hand written.

Date Assigned: Monday, June 8, 2009 Date Due: Monday, June 15th, 2009 GART 2512 Publishing on the Internet • What Makes A Great Website? What are your three most favorite web sites? What makes them great? This exercise is designed to give you some perspective in web site design. As you learn how to create web pages using HTML and CSS, you may have a tendency to jump right in. Resist that impulse. Before you begin, study sites similar to the one you are starting to design. Instructions. 1. Choose three web sites that (to you) represent good web site design. One way to begin is to make a list

of from five to ten sites that you visit often and stay for some time. Why do you go to that site? Why do you stay? What makes you come back?

2. Pare your list down to your three top favorites. One way to do this is to delete the ones you like least

until only three remain. 3. Write a short paragraph for each of your three sites. Give the site’s URL and tell why you like the site.

Concepts to consider include: originality, regular updates, is the text easy to read, are the graphics appropriate, do pages load quickly, is the site well-organized, easy to navigate, etc.

Due date. Monday, June 15, 2009 References. What Makes A Great Web Site? http://www.webreference.com/greatsite.html. 10 Great Web Site Designs http://news.cnet.com/8301-17939_109-9835960-2.html Great Web Sites http://www.vanderbilt.edu/spiders/nov19/greatsite.html Or search the web for great web sites

Date Assigned: Wednesday, June 10, 2009 Date Due: Monday, June 15th, 2009 GART 2512 Publishing on the Internet • eMemphis Auctions Home Page

Textbook Exercises (Chapter 3, p41) In each exercise, use comments to identify files as your own. The comment should include your name, the exercise number and the date.

1. Create an HTML document for the eMemphis Auctions home page accoring to the following specifications:

title bar: eMemphis Auctions

background color: black

text color: white

text on page: eMemphis Auctions (on a line by itself)

links on page: (on separate lines)

Elvis Memorabilia (elvis.htm)

Beale Street (beale.htm)

Mississippi River (river.htm)

Save the file and use your browser to display the file on the screen.

Text Classics

68

5 Questions & Exercises8. Create the Links Page web document below. Use a size 6 sans-serif font for the company name, underline the size 5 page description, apply a contrasting color to the size 4 section headings. Test each link.

Date Assigned: Monday, June 15, 2009 Date Due: Wednesday, June 17th, 2009

JANICE ELIZABETH JONES 5920 Macon Cove, Memphis, TN 38134, (901)222‐2222 

e‐mail: jjones221@gmail.com 

 

PROFESSIONAL EXPERIENCE 

 

MANUFACTURING COMPANY, New York, NY 

Technical Specialist 1994‐present 

 

Promoted to provide Novell Netware Operating Systems planning, consultation, 

hardware/software installations and upgrades and technical support to 50 field and 

headquarters locations. 

 

Key projects & Accomplishments 

Planned, built and managed implementation of Novell Directory Services which 

included design of multiple project plans. 

Developed test plans and managed Y2K compliance upgrades. 

Designed documented and implemented standards. 

Coordinated, planned and installed over 75 local Netware servers 

 

DISTRIBUTION COMPANY, Chicago, IL 

Technical Training Manager 1991‐ 1994 

 

Promoted to provide leadership and guidance in all phases of technical support. 

 

Key projects & Accomplishments 

Designed, planned and implemented a technical training center. 

Developed curriculum for all types of computer software training. 

Hired and managed technical trainers. 

 

EDUCATION 

 

BS, Computer Science, 2003, Honors 

University of Illinois‐Champaign, Urbana 

 

AA, Information Technology, 1999 

Southwest Tennessee Community College 

Memphis, Tennessee 

 

 JANICE ELIZABETH JONES 

5920 Macon Cove, Memphis, TN 38134, (901)222‐2222 

e‐mail: jjones221@gmail.com 

 

TECHNOLOGY PROFESSIONAL 

 

Certified Network Engineer experienced in providing network 

operating systems support, including file server installations, troubleshooting 

and technical consulting for multiple networks in an 

intensive networked environment (home office and 140 field locations). 

 

Technical Expertise: Well versed in Novell NetWare 4x, NDS, DOS 

and client tools; familiar with Netware DHCP and DNS administration. 

 

Project Planning and Management: Proven ability to plan, organize and lead 

technical projects/teams in both small groups and large corporate areas.<BR> 

 

Technical Support and Training: Demonstrated skill in training and supporting 

end users as well as developing technical staff to achieve performance objectives. 

 

Effective communicator with proven ability to build strong working relationships 

 

TECHNICAL EXPERTISE 

Operating Systems: Novell Netware 3x and 4x, Novell Directory Services, Windows 

 

HARDWARE & APPLICATIONS 

All major server platforms, MS Word, MS Excel 

 

CSS Online ResumeUsing the files in the Online Resume folder on the server, create an HTML document that uses CSS to replicate Janice Elizabeth Jones’ resumé (see images at below). In the folder, you will find an HTML document containing all of the text. Create classes in the <STYLE> section of the document for all needed text requirements. The two pdfs in the folder show the original printed resumé.

Date assigned: Wednesday, June 17, 2009 Date due: Monday, June 22, 2009

GART 2512-101 Publishing on the Internet Summer 2009

body { background: #99ff99; margin-left: 25px; margin-right: 25px; font-family: sans-serif; line-height: 16pt; }.storytitle { font-family: serif; font-size: 24pt; line-height: 36pt; }.author { font-family: serif; font-size: 10pt; font-style: italic; line-height: 36pt; }

CSS External StylesheetsUsing the files in the CSSExternalStylesheets folder on the server, create two HTML documents that link to the same external stylesheet and to each other. Select two poems from the folder (or choose your own poems) and develop a two-page poetry site of the type shown below.

Create an external stylesheet poetry.css and link to both HTML documents.

Specify the body as follows: left and right margins of 25 pixels, line spacing 16 points, body text in a sans serif font on a background color other than white, poem title in a larger serif font, author’s name in a smaller italic serif font.

Create two classes for the story title and the author’s name. In the HTML documents, use <DIV class=”classname”></DIV> to format the title and the author’s name.

Date assigned: Monday, June 22, 2009 Date due: Wednesday, June 24, 2009

GART 2512-101 Publishing on the Internet Summer 2009

poetry.css

poem1.html

poem2.html

137

Adding ImpactWith Images

10Exercises

1. Using images supplied by your instructor, create the page below. If any image is not in a suitable web format, use an image editing program to make the appropriate conversion. The following information is provided.

a. Each thumbnail is an inline image linked to an external image. Clicking the inline image displays the full size image. Position each image 15 pix-els from the top of the browser window. Position the first image 50 pixels from the left. The space between each image is 25 pixels.

b. Use your image editing program to create a thumbnail sized copy of each original image. Set the width of each thumbnail to 100 pixels. Size each image proportionally.

c. Use CSS to position the text 170 pixels from the top of the browser win-dow (below the images) with 50 pixel left and right margins.

d. Create a style for the left-aligned title that uses a sans-serif font in small caps. Create a style for the body text that uses a 14 point, serif font, line-spacing 16 points. Justify the text.

e. Use dummy file names to create the horizontal menu across the bottom. Separate menu items with a vertical bar.

f. Choose a color scheme for the background and text.

Date Assigned: Monday, June 29, 2009 Date Due: Wednesday, July 1, 2009

139

Adding ImpactWith Images

10Exercises 3. Using images supplied by your instructor, create the page shown using

HTML and CSS. If any image is not suitable for web format, use an image editing program to make the appropriate conversion. Use any desired CSS techniques to position the text and images. Several techniques will work. The following specifications are required:

a. Each thumbnail image is linked to a full size image. Clicking a thumbnail displays the larger image.

b. Set the left and right margins to 0px and the top margin to 0px.

c. Set a light-blue background color for the text section. Set the pad-ding for all four sides to 20px.

d. Create a class for the title that displays a cursive font, 24pt.

e. To avoid clutter in your HTML, use an external stylesheet.

GART 2512 101 Summer 2009

Date assigned: Monday, July 6, 2009

Date due: Wednesday, July 8, 2009

Image Links HTML automatically creates a link from the text placed before the </A> tag. To create a picture link, use the bracketed IMG SRC tag. To create a picture link and a text link, place the bracketed IMG SRC tag before the link text.

<html><head><title>aesop’s fables</title> <style type=”text/css”> ... </style></head><body>

<h1>aesop’s fables</h1><a href=”aesop2a.html”> <img src=”cock.gif”></a><p><a href=”aesop2b.html”> <img src=”dog.gif”></a><p><a href=”aesop2c.html”> <img src=”lion.gif”></a>

<p>other aesop’s sites<a href=”http://www.worldvillage.com/ wv/school/html/reviews/ aesop.htm”> danny glover tells aesop’s fables </a></body></html>

p91

GART 2512 Publishing on the Internet Summer 2009

Assignment

Complete the Aesop Fables web site shown here using the rectangular GIF files for picture links. You will need to create four HTML files. Use the files created in class as templates for your completed assignment. Use the files in the Chapter_07 Folder 91: Image Links

Chapter_07

Folder: 91