You have been approached by Micro Building Design to create a website for their shed and concrete business. Your job is to come up with a brand new website that will promote their sheds and increase their sales. As of now, Micro Building Designs does not have a website and as such, they are open to almost any type of design/colour scheme as long as it promotes their products and services in a professional way. We are providing you with the content for creating each of the six required web pages.
Build a website to include ALL OF THE FOLLOWING things:
- A banner for your website made with Photoshop
- Size of banner must be EXACTLY 900 pixels wide.
- You can use any images you find on the internet that will add appeal to the banner but remember you need to save the urls for the images to reference the images on your references webpage.
- Should contain the company's name somewhere on the banner: Micro Building Designs
- Create a banner that is professional, appealing and appropriate for a shed business.
- The company is currently using this logo, you may incorporate this logo into the banner however the company is open to new ideas for logos/branding, so if you have your own idea for a logo/design/colours, please do not feel tied to the logo or the colours in it.
- Content for the web pages: (read carefully)
- The document http://www.csd.uwo.ca/~lreid/cs1033/assignment3/spring2014/website_content_spring_2014.txt contains the content to be used for creating the web pages. This is provided so that you don't have to come up with the content. Your job is to lay out the content in an appealing and professional manner. Note: The content file is a text file with no formatting so that you can copy and paste the information into your website and work with the layout and the attributes as you choose. We will be marking how nicely the information has been presented.Add images throughout every web page (Exception: you are not required to add images to the references page) to give more visual appeal but remember to reference all images used. Replace hyphens for lists with the numbered or bulleted lists.
- Number of Web pages: You need to create 6 webpages in total. Thus, you need to create a menu structure at the top of each webpage containing 6 links (buttons or text links) to each webpage.The text for the 6 webpages is contained in the content document
Listed below are guidelines for each of the 6 webpages
- Home --> Text for this web page is included in the content document.
- Have the words "Cabanons Fontaine, the builder of Perfect Sheds" (4th item in the list of reasons to purchase from Micro Building Designs) link to this website:http://www.cabanons.com/index.php/en/
- Have the words "Gravel Base" (8th item in the list of reasons to purchase from Micro Building Designs) link to the words "Example of shed with a gravel base" on the "Our Sheds" page
- Put the customer testimonials (i.e. their quotes) in italics.
- Make sure you have a neat, well organized design for the home page.
- Our Sheds-->Text for this web page is included in the content document.
- Make the words "Perfect Shed by Carbanons Fontaine" link to this page: http://www.cabanons.com/index.php/en/prestige-serie/models/cartier
- Make the words near the top of this page: "Sheds Installed by Micro Building Design" link lower down in this page to the section titled: "Sheds Installed by Micro Building Design:"
- Make the words near the top of this page: "Options and Installation Information" link lower down in this page to the section titled: "Options and Installation Information:"
- Make the words near the top of this page: "Discontinued and Discounted Sheds" link lower down in this page to the section titled: "Discontinued and Discounted Sheds:"
- Make the words near the top of this page: "Contact us for a free quote" link to the top of the "Contact Us" page
- Under the word "Models" include a table that contains the model name, dimensions and an image of each model. There is an image of each model in this area and you can tell which model and size each image represents by the filename of the image. Make sure you resize the images so that they work well with your design. Link each model image to the corresponding model url on the Carbonons Fontaine website. For example, link each of the Cartier models images to this page: http://www.cabanons.com/index.php/en/prestige-serie/models/cartier and link the Lafayette model image to this page: http://www.cabanons.com/index.php/en/prestige-serie/models/lafayette and link the Frontenac model image to this page: http://www.cabanons.com/index.php/en/prestige-serie/models/frontenac and link the Pentacle model image to this page: http://www.cabanons.com/index.php/en/elite-serie/models/pentacle. Thus your table might look something like this:
||Dimensions of this Model
||12 feet by 18 feet
- Make the words "Doors and Windows" link to this page: http://www.cabanons.com/index.php/en/prestige-serie/doors-and-windows
- Make the words "Colours" link to this page: http://www.cabanons.com/index.php/en/prestige-serie/colors
- Make the words "Features" link to this page: http://www.cabanons.com/index.php/en/prestige-serie/features
- Make the words "Special Options" link to this page: http://www.cabanons.com/index.php/en/prestige-serie/options
- Include the image: http://www.csd.uwo.ca/~lreid/cs1033/assignment3/spring2014/sheds/Frontenac1a9by12.jpg next to or below the words "Example of shed with a gravel base"
- Under the words "Check out some of our discontinued and discounted sheds:" add the following 4 images, try to lay these images out in a way such that they don't look too large or too small for the page:
- Concrete Work -->Text for this web page is included in the content document .
- Include the following 3 images just below the words "Samples of our work:" Make sure that you organize/layout the 3 images in such a way that they don't look too large or too small for this page.
- Our Team--> Text for this web page is included in the content document . Set this page up in a nice, well organized manner. Include a picture for each person. You can find fictitious pictures on the internet to represent each person but remember to reference the URLs for the pictures in your references page.
- Contact Us --> Text for this web page is included in the content document .
- References: --> This webpage must contain the URLs for each image you obtained from the internet and used within your website. Make sure this page is neatly laid out. You no longer have to place your image references in the Assignment Text box in Owl since they are now listed on this webpage HOWEVER you still must include a link to your website in the OWL assignment box, so the T.A. can find your website. NOTE: you do not need to put references for any images we supplied you with, just images that you use that were NOT supplied by us, images you search for on the internet and added to your site.
- A Table structure (NOT cascading style sheets): Fixed 900 pixels wide to control your overall website layout. You can use as many rows as you need to set up your layout, and as many tables, nested tables required to achieve the look.
- A Navigational structure: Create your menu links as button images, or as text. NOTE: If you decide to create button images, you MUST use Photoshop to create your buttons, you may not use button generating software. Navigational buttons/links that are very professional looking will get more marks than plain text links.
- Appropriate Images: Appropriate images MUST be embedded in each of your web pages to make the pages interesting. You can use the images from here or here or any images you find on the internet. All images used must be cited in your "References" web page. You can also use images from online stock photo companies such as http://www.bigstockphoto.com/,http://www.istockphoto.com/ but you will still have to cite these images as well.
- Color creativity: We will be looking to see whether colors co-ordinate and flow nicely with the overall look
- Clean Neat Layout: We are looking for a nicely laid out page as opposed to a cluttered, crowded page.
- Links We will be looking for several different types of links. You need an instance of each of the following link type in your website:
- e-mail links
- hotspots links
- link(s) pointing to another area within the same page (bookmark/anchor links) and control to the top of the page.
- link(s) pointing to a website on the Internet
- Structured List (ordered OR unordered): You must have some sort of bulleted list or numbered list in one of your pages using Dreamweaver (there should be no hyphens used as bullets for lists).
- An image map with hotspots: It is up to you to think of a way of using an image map in this website. Marks will be given for how the image and it's hotspots related to the content it links up to.Go back to your notes if you don't remember what this is.
- Well balanced text formatting. We will be looking for:
- Appropriate size -headings, body of text, balance, etc.
- Text Emphasis - use bold/italics as you see fit. There must be at least one example of both.
- Layout within page - should not be cluttered, should be easy to read, should have clean alignment (use what is appropriate: Left, Right or Centered Alignment)
- A well organized File/Folder structure to hold all your html files and images. Marks will be given based on how well you follow the instructions given in lectures and lab, how/where you stored your webpages in your folder and how/where you stored your images in your website folder/directory.
- An uppermost folder called assign3. You must keep your index.html home page in the upper most folder (the upper most folder must be called assign3). The sub-folders inside assign3 can be called whatever you wish. Note though, you will be given marks for appropriate file names and folder names. Also note: the home page called index.html MUST be located in the assign3 folder and NOT in a sub-folder of assign3. Thus, this is correct: assign3/index.html and this is incorrect: assign3/pages/index.html. The incorrect way will NOT display your home page initially so make sure you put index.html inside folder assign3 NOT in a sub-folder of assign3.
|Due By (Pacific Time)
||03/20/2014 06:00 pm