Build a new website and integrate diverse content and layouts into a pure HTML website.
Required Knowledge & Skills
- case study background information
- HTML tags
- embedding media content
- external CSS
A colleague of Chris who is running a small yacht brokerage wants to have a website as well. However, he does not like the use of online tools as he feels that this would restrict his ability to create the website he wants. He also feels that it slows down the website and locks his design into the vendor's tool set. Therefore, he wants you to create the website using pure HTML that can be edited from any editing tool, even simple notepad.
Part 1 (15 Points)
Use AwardSpace or any other hosting platform to host your newly created website. When your files are uploaded and you have tested your site is accessible, submit a clickable URL of the website to Blackboard -- you can do this even before you complete Part 2.
- Create a free web hosting account on AwardSpace; when creating your account do not register an optional domain -- you will set up a subdomain later (watch the AwardSpace Video Tutorial below to show you how to do this)
- Publish the website under the subdomain URL is1500-studentID.atwebpages.com. Your student ID can be either your numeric student ID starting with 000 or your user name. Never delete the subdomain as that will remove the folder and all your files in it.
- Watch the AwardSpace Video Tutorial showing you how to create a subdomain and build a simple website. Follow along and actually build the same code. Stop the video while you do the examples. Here's the full code for a simple web site that shows stretched images, external CSS, embedded videos, and the HTML page setup. You can download the code, unzip it and then simply click on index.html -- this will load the code into your browser locally. Explore it and use it as a template for Part 2. Remember that you can view the code for any web page by clicking the right mouse button and choosing "View Page Source" on Google Chrome or similar on other browsers (except Safari which does not allow you to easily view web pages.)
Part 2 (85 Points)
After reading the requirements below in full and checking all the links, particularly the link to the code for a simple web site and the lecture notes, use the online HTML editor built into AwardSpace to create an HTML web site for researching boats. Be sure to create separate HTML files for each page. Save the pages frequently. Be sure to have a .html extension for your HTML files and a .css extension for your style files. Test your files frequently. Use the interactive SquareFree HTML editor to try code fragments if you are not sure.
Specific requirements for your web site:
- Your website must have four pages: Home, Boats for Sale, Blog, Contact Us. Each page is a separate file with the .html extension. The names for the files are not important but may not contain spaces or special characters (-,.* etc.). The only restriction is that the home page must be named index.html.
- The home page should have a layout that approximately follows this mockup sketch and must be named index.html. The menu bar should have clickable links to each of the pages.
- The "Boats for Sale" page should have the layout shown in this mockup sketch.
- The "Contact Us" page should have a similar layout to the home page shown in this mockup sketch. However, contact information should be listed clearly.
- The "Blog" page should only have the header but no content..
- You must have a minimum of four boat vendors: Carver, Sea Ray, Edgewater, Sabre. For each boat vendor you must display a scaled down animated thumbnail picture containing an animated GIF image of at least four of their flagship boats. The images must be clickable and take the user directly to the manufacturer's website. Use Picasion (or another tool of your choice), to create an animated GIF of various boat pictures you find on the web. Use an online picture editor such as resizr to crop and resize the pictures before you create the animated GIF to minimize download overhead.
- Your pages must have titles as shown in the mockups. For example, the home page's title is "BoatBrokers -- Home".
- You must have a breadcrumb control on each page, which is created as simple text using the ">" character (use the > entity)
- Use tables and other formatting directives to approximate the layout designed in the mockups as closely as possible. The lecture notes contain some code fragments that might be helpful.
- You must use custom RGB colors, properly scaled images, and a custom font (use the Google Font Roboto Condensed) for your paragraph text (using an external CSS style sheet).
- Make sure that your header images span across the entire width of the page and stretch as you resize the page.
Resources Required & Notes
- Picasion or GifCreator or MakeAGIF for creating animated GIFs
- Resizr for image cropping and resizing
- AwardSpace account (FreeHostingEU is an alternative should this not work); there are a few low-cost hosting platforms that are better and more stable: BlueHost ($3.95/mo with PHP and MySQL), JustHost ($2.75/mo with PHP and MySQL).
Grading Rubric | Submission Instructions