Create Markup using XHTML
The Project - Joe's Website
Your first task is to develop a prototype for Joe's (a fruit and vegetable retailer) website using a "Text Editor" to produce some basic XHTML. For this website you should set the document type to "transitional". Before you start the project you will need to read through the project brief.
Resources
All the images required for this assignment can be downloaded from the Create Markup home page. If you are unable to download them, please contact your lecturer. Also there are some example screen shots included which illustrate what each page should look like when it is finished.
The design specifications of Joe's website are as follows:
Pages
The website will contain the following 5 pages and an email link:
Home Page
Produce Page
History Page
Copyright Statement
Privacy Statement
Styles
Using a simple internal style definition, create the following web page styles:
Body: background colour should be pale green (ensure you use a hexadecimal number and a web safe colour). The font on the whole page should be specified as Verdana, but allow it to degrade to Arial, Helvetica or any sans serif font and be set at size 12pt. The font colour can remain black (as default).
H2: Each page should contain a heading for the page which should be centred. The text for each page is as follows: Joe's Fruit Shop (Home Page), All produce at Joe's (Produce Page) and Joe's History (History Page).
Table: the height and width of tables in your website should be set in the style section to meet technical requirements. Hint: check the screen resolution specified in the project brief.
Infrastructure
The layout of your page should be contained in a table as demonstrated below:
<table summary="page layout table">
<tr>
<td colspan="2">header image</td>
</tr>
<tr>
<td valign=”top”>
Navigation Objects
</td>
<td valign=”top”>
Content
<div style=”style definition;”>links</div>
</td>
</tr>
</table>
Other site requirements are as follows:
Each page MUST include an appropriate DTD (Transitional) and <title> which includes both the website and page names.
At the top of each page, the header image should be aligned in the centre.
Place a navigation bar on the left side of each page which uses three text links and three images of the same strawberry. Each links connects to a main page in the website. These pages are: Home, Produce and History.
Ensure that your navigation and content areas are vertically aligned.
Each active page requires the link on navigation bar be plain text (i.e. no hyperlink).
Ensure that all images and links are captioned using "alt" and "title" respectively.
--------------------------------------------------------------------------------
Page Content
Home Page Content
The content of your home page should be formatted and laid out actually as shown here: home_example.jpg. Use a horizontal rule <hr> to separate the text as illustrated.
Insert the following text:
At Joe's we are dedicated to selling the freshest, finest fruit, vegetables and cut flowers. We will deliver anywhere in the metropolitan area for only $10 (including GST).
We've been in business for the past 20 years in one location and now we've moved into the 21st century by moving on to the World Wide Web, where we can provide services we never dreamed of when Joe first opened the store way back in the 1980s.
Take a look at our special fruit and vegetable baskets. We've collected the freshest, most succulent fruit and vegetables and packaged them in quantities to suit many different sized families. Because we buy in bulk, you get the benefits in low prices and fresher produce. All fruit and vegetables are guaranteed to be be delivered to you less than a day after they go on sale in the produce markets.
We can provide the baskets in "organic" produce too!
Ideal for the busy family - takes out all the agonising decisions about menus for the family and how to please everyone! And we can even provide menus to go with the basket!
Ensure you wrap the text around the images as shown.
Produce Page Content
At the top of the page there should be an unordered list as follows:
Benefits of shopping at Joe's online:
It's convenient because the website is available 24 hours per day
You don't have to leave home to have the best produce available
Your phone call to order produce is free
Beneath the unordered list there should be a horizontal rule and then a two column table, with a border. This table is nested within the content cell of your page layout table and includes the "summary" attribute e.g. summary="Joe's product listing". One column is headed Item, the other is headed Price. The items to include in the table and their prices are listed in the following text file: produce.txt. Please ensure that you include all items listed in this file.
Ensure you include a "Back to Top" link after the table, as there will be scrolling on this page.
History Page Content
Insert the following text:
Joe’s Fruit and Vegetables started out as a traditional store selling fruit and vegetables, along with other commodity items such as milk, soft drinks, sweets etc. Joe’s has been in business for 27 years and has a reputation for the quality of their goods.
The proprietor, Joe Bashir, has discovered that there are many people who, through work schedules and home lifestyles, don’t have the opportunity to shop in person.
For convenience, they did fruit and vegetable shopping at supermarkets, but were not happy with the quality of the produce from the supermarkets. Joe wants to tempt these customers back by taking his store to them, in their homes.
Copyright and Privacy Statements
There should be three links across the bottom of all three main pages: Copyright, Privacy and Web Administrator. These links should be separated by a "|" and open a new window. Create a <div> within the content cell of your layout table which uses positioning to centre the links and reduce the font-size to 10pt. These pages should only contain the text, but have the same formatting as the rest of the website.
Copyright Page
Insert the following text:
All rights reserved. No part of this material may be reproduced or transmitted, in any form or by any means, electrical, mechanical, photocopying, recording or otherwise, or stored in any retrieval system of any nature other than pursuant to the terms of the Commonwealth Copyright Act (1968) or without the written permission of the Arachnoid Web Services.
Privacy Page
Insert the following text:
Personal information collected by Joe's Fruit Shop is treated as confidential and is protected by the Privacy Act 1988 . Personal information is information relating to an individual whose identity is apparent, or can reasonably be ascertained, from the information or opinion provided.
When visiting this site, a record of your visit is logged. The following information is recorded for statistical purposes and is used by Arachnoid Web Services to help improve the site. The following information is supplied by your browser:
the user's server address;
the user's operating system (for example Windows, Mac etc);
the user's top level domain name (for example .com, .gov, .au, .uk etc);
the date and time of the visit to the site;
the pages accessed and the documents downloaded;
the previous site visited; or
the type of browser used.
No attempt will be made to identify users or their browsing activities except in the unlikely event of an investigation, where a law enforcement agency may exercise a warrant to inspect the Internet Service Provider's logs.
Web Administrator Link
Create an email link to your email. Add the following text "Joe's Website Query" to the subject line.
--------------------------------------------------------------------------------
Check that the Website Functions Correctly
Once you have completed your website, check to see if it meets some of the W3C guidelines outlined by Dave Raggett's More Advanced Features. Make any changes that you feel necessary to make your website compliant with these recommendations.
Submission
Once you have completed the first part of the website, submit the entire website in one zip file to your lecturer for marking. If you would like some feedback on your progress it might be useful for you to send through the home page, in the first instance, for comment from your lecturer.
Final Checklist
Please ensure that your assignment adheres to all of the following items:
Appropriate directory structure, file referencing and file naming conventions have been followed, as outlined in your study guide;
All XHTML code is validated to Transitional Standards using
http://validator.w3.org/; Your website has been checked in at least two popular web browsers which may include Internet Explorer, Firefox and Opera;
Your website displays correctly at the screen resolution specified in the project brief; and
Any sources used for reports, content and images have been referenced appropriately.
Lớp mình nên kết hợp cả hai mà làm cho nó đủ-
Tiêu đề: Mẫu đặc tả ( dài ) cho môn XHTML ------------ 
Tue Jul 22, 2008 11:53 pm
Cả Ngắn lẫn dài. Thế là thế nào hả a? Cái đặc tả này nghĩa là gì và để làm gì?
