Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 1 of 24 MODULE NAME: MODULE CODE: WEB DEVELOPMENT WEDE5010 ASSESSMENT TYPE: ASSIGNMENT 2 (PAPER ONLY) TOTAL MARK ALLOCATION: 100 MARKS TIME ALLOWANCE: 10 HOURS STUDENT NAME: STUDENT NUMBER: INSTRUCTIONS: 1. Research component must be typed and adequately and correctly referenced. 2. Where images are used as reference, they must accompany the submission and must be compiled in a separate document. 3. No more than 25% of the assignment may be copied from original source(s) used, even if referenced correctly. 4. Check the allocation of marks in the assessment criteria in order to make sure you understand what is required for submission. 5. This is an individual project unless stated otherwise in the brief. 6. Keep a clear copy of your project in the form of a digital back-up; a clear photocopy or a photograph. 7. Pay careful attention to submission format and additional requirements as stated in the brief. Make sure your submission is neat and presented professionally. 8. All submissions must include a stamped cover sheet, your name and student number. 9. Follow all instructions on the brief front page including the additional instructions added below. Additional instructions: 1. Read your brief carefully. 2. Submit your 'artefact'/ 'evidence' in a garment bag. Ensure that all your personal details are present. The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 2 of 24 Referencing Rubric ___ ____ Providing evidence based on valid and referenced academic sources is a fundamental educational principle and the cornerstone of high quality academic work. Hence, The IIE considers it essential to develop the referencing skills of our students in our commitment to achieve high academic standards. Poor referencing will result in a penalty of a maximum of five (5) marks against the percentage mark awarded to a student according to the following guidelines. Please note that this will not hold for assignments in which referencing is not required. Required Subtract 1 Subtract 2 Subtract 3 Subtract 4 Subtract 5  Consistent, in-text referencing style  Quotation marks, page numbers, years, etc. applied correctly  Only one or two minor mistakes made  All sources academically sound and included in reference list  Accurate recording of references.  Consistent in- text referencing style  Quotation marks, page numbers, years, etc. applied correctly  Fewer than five minor mistakes made  More than 90% of the sources are academically sound and included in reference list  Mostly accurate recording of references.  Consistent in-text referencing style  Quotation marks, page numbers, years, etc. not always applied correctly  Not all paraphrased content referenced  At least 80% of the sources are academically sound and included in reference list  Generally accurate recording of references.  Consistent in-text referencing style  Quotation marks used for direct quotes but page numbers missing  Fewer than 50% of the sources are academical ly valid  Reference list incomplete  Inaccurate recording of references.  Referencing style inconsistent  Paraphrased material not referenced in text  Quotation marks and/ or page numbers for direct quotes missing  Fewer than 25% of the sources are academically valid  Reference list incomplete.  Exceptionall y poor and inconsistent referencing  None of the sources academicall y valid. The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 3 of 24 Template Development Before you start Expression Web settings If you are doing this assignment on your own PC rather than in the computer lab, it is essential that you set up Expression Web to match the settings in the computer lab. If you don't, your code will be incorrect and your assignment mark will be impacted. Refer to the beginning of the WEDE5010 manual for the necessary settings (See Software Preparation/ Computer labs). If you paste from Word into Expression Web in Design View, the text from MS Word will contain a large amount of rubbish code. This will affect your layout and your marks! You must only paste from Word into the Code View of Expression Web. Code Conventions As explained during the course, there are several coding practices that are used in web development. A portion of the assignment marks are assigned to your consistent use of these conventions. If you are in any doubt about these, refer to the course manual.  All folder names, file names, class and id names are in lower case and are a single word, or series of words joined using a dash;  Containers nested inside other containers are indented to show their relationship;  Attributes and parameters are surrounded by double quotes;  Images are located in the images folder, CSS files in the css folder and JavaScript files in the js folder;  All internal links are relative;  Image references are to the images folder, not to the assignment brief folder. The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 4 of 24 Overview Developing a website involves a logical set of steps:  Step 1: Review requirements;  Step 2: Create a "site";  Step 3: Create a webpage framework;  Step 4: Turn the framework into a template;  Step 5: Test the template;  Step 6: Copy the template for each webpage;  Step 7: Add the content and features to each webpage;  Step 8: Test the local website;  Step 9: Prepare the hosting account;  Step 10: Publish the website;  Step 11: Launch the website. The details of these steps are covered in Learning Unit 8 in the manual. Step 1 was completed in Assignment 1. You should review any feedback that you received for that assignment before starting this one. The client has supplied all the content (text and images), and you are ready to start building the website. Assignment 2 covers Steps 2 — 5. Steps 6 – 11 will be done as part of your Portfolio of Evidence submission. The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 5 of 24 Review the Project Requirements View the design preview again: WEDE5010/ Waverly Guest House/ Waverly Guest House Design Preview.pptx Read through all the documentation in the WEDE5010/ Waverly Guest House folder to refresh your memory:  Waverly Guest House Website Contract;  Waverly Guest House Website Budget;  Waverly Guest House Design mock-up. Check that you have the preloads. For Assignment 2, there are images and other content provided. These are in the WEDE5010/ Waverly Guest House/ content folder. Code Requirements The code and styling requirements for this assignment are written in normal English. You will have to translate the English instructions into suitable code. For example: margin Top and bottom 0px, left and right 10px Translates to: margin: 0px 10px 0px 10px The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 6 of 24 Client Approval The template is now ready for you to start making the rest of the pages. However, it is a really good idea to get the template approved by the client before you proceed. The client would not test or comment on the code, but rather the overall visual appeal and functionality (both according to the brief that was given to you originally). Your lecturer will take on this client role when they mark this assignment. You will need to take their comments into account, and adjust your template before you make the rest of the pages. The rest of the pages will be created when you do your Portfolio of Evidence. How to Submit this Assignment You will need to submit the whole of the studentnumber-Assignment2 folder. This folder must contain the following:  template.html  The images, css and javascript folders, with all of their content The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 7 of 24 Question 1: Project Preparation (Marks: 10) Each website that you build needs a separate project folder, so that the files for each project are separate. In ExpressionWeb, the project folder is known as a Site. Q.1.1 Create a new Site  Use ExpressionWeb to create a new Site;  The instructions are under "Working with multiple files" in the manual;  The new folder must be called studentnumber-Assignment2 (e.g. 1212345- Assignment2);  The new Site should also be called studentnumber-Assignment2 (e.g. 1212345- Assignment2). (1) Q.1.2. Create the Site folders Once you have created the Site, you will see the Site view tab, and a message that says "There are no files in this folder". Use Right click/ New/ Folder to add the folders for the project. The folders are:  images  css  javascript Remember that all the files names must be in lowercase. (3) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 8 of 24 Your site view should look like this: Q.1.3. Move the supplied files into the Site folders In the WEDE5010/ Waverly Guest House folder you will find folders containing all the text and images that the client supplied, as well as the JavaScript files for the form and gallery. Using Windows Explorer, move the content from these folders into the Site folders — images in the images folder, the gallery folder to the images folder, and the JavaScript files to the javascript folder. In Expression Web, open the images folder and you should see the following. If not, press the F5 key. Likewise the javascript folder should look like this: (6) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 9 of 24 Question 2: Template Preparation (Marks: 5) The first webpage that you will make for the project is the template file. This is an example page, in which you code the structure of the page, and display dummy content to ensure that the code is correct. Q.2.1 Create the HTML template file The Waverly Guest House Design mockup file shows you what the final template will look like. In the Site View, make sure that you are in studentnumber-Assignment2 and not in images, or css, or javascript. Create a new HTML file and save it as template.html: 1. Go to File/ New/ HTML. 2. Go to File/ Save As/ template.html. In the Design view, the page will look blank. In the code view, you will see the standard HTML page structure. (1) Q.2.2. Create the HTML containers You will need the following page containers. The first three (3) were created automatically as part of the standard HTML structure. Refer to the Template HTML structure Word document in WEDE5010/ Waverly Guest House for more details. Hint: It is simplest to type the code rather than inserting them using the program interface. Switch to the Code View to do this. 1. Html — holds everything. (4) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 10 of 24 2. Head — holds the style sheet links, and site description. 3. Body — holds all the visible content. 4. Wrapper — holds the whole page inside a fixed-width, centred space. 5. Logo — holds the logo. 6. Headergraphic —holds the big image at the top of the page. 7. Nav — holds the menu bar. 8. Content — holds all the text and images on the page:  Sidebar — holds the whole sidebar: o Testimonial — holds the photo, comment and name; o Bookings — holds the booking now button; o Grading — holds the 3-star badge. 9. Footer — holds the copyright information. Question 3: Placeholder content (Marks: 35) Once you have created the HTML structure, you add the placeholder content. This is text and image content that demonstrates where the final content for each page will be placed. Q.3.1 Page title Change the title to PAGENAME — Waverly Guesthouse (1) Q.3.2 The logo Insert the logo in the logo container (i.e. between and ) Image name logo.png Alt tag Waverly Guest House, Boulder Beach, Cape, South Africa Turn the logo into a link to index.html (which is the home page). Hint: You will probably find it easier to simply type in the link code rather than use Expression Web tools to do it. (3) Q.3.3 Header graphic Insert the large image in the headergraphic container (i.e. between and ) (2) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 11 of 24 Image name header.png Alt tag Boulder Beach, Cape, South Africa Q.3.4 Menu Enter the following text in the nav container (i.e. between and ). The vertical line between each item is called a Pipe. It appears on the keyboard above the Enter key. The symbol on the key is often a broken vertical line. There are no spaces between the menu items and the pipes. Home|Accommodation|Facilities|Gallery|Things To Do|Rates|Booking Enquries|Contact Us Now you need to turn each into a link. In Assignment 1, you prepared a spread sheet called "Project Tracking". Column B contains the file names for each page. Use this information to link each menu item to the correct file name. Make sure that you don't include the pipe in any of the hyperlinks. Correct: Home| Incorrect: Home| (15) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 12 of 24 Q.3.5 Sidebar image The sidebar image is inserted inside the sidebar container: (2) Q.3.6 The testimonial is wrapped in a div, and consists of a heading, an image and the text. Pay close attention to the paragraphs. Testimonial Testimonial text goes here. - Name (4) Q.3.7 Book now button The button is wrapped in a div, and consists of an image only. Link the button to booking-enquiries.html (3) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 13 of 24 Q.3.8 Grading icons The button is wrapped in a div, and consists of an image only. (2) Q.3.9 Add the dummy text ExpressiveWeb (the company you work for) has created a standard block of HTML code which is always added to template.html for use during the styling process. The text contains HTML code for headings, links, lists, tables etc, so that you can quickly apply CSS formatting and see the results. 1. Open WEDE5010/ Waverly Guest House/ Content/ dummy-text.html in Expression Web. 2. Switch to the Code View. 3. Copy all the text. 4. Go to template.html, also in Code View. 5. Paste the code after 6. Save. (1) Q.3.10 Add the footer content The text should be typed as a single line, inside the footer div (It will be easiest to do in Code View): © 2014 Waverly Guest House - Design by ExpressiveWeb (2) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 14 of 24 The copyright symbol is added as follows: 1. Place the insertion point in the right place. 2. Go to Insert/ Symbol. 3. Select the © symbol. 4. Press Insert. 5. Press Close. Link ExpressiveWeb to www.expressiveweb.co.za and set the target to open in a new window. Notes: The company name is ExpressiveWeb, not ExpressionWeb Use the hyperlink format for an external link. The link must start with http:// Note: The page will look terrible because it is pure HTML (structure). Only once you start to add the CSS will it look better. Question 4: CSS styling (Marks: 50) Once you have created the HTML structure, you add the placeholder content. This is text and image content that demonstrates where the final content for each page will be placed. Q.4.1 Create and link the CSS file 1. Go to File/ New/ CSS. 2. Save. 3. Go to the CSS folder (this is essential). 4. Save the file as template.css. 5. Open template.html. 6. Go to Format/ CSS Styles/ Attach style sheet. 7. Browse to the css folder. 8. Select template.css. 9. Open. 10. OK. 11. Go to the code view and you should see . (1) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 15 of 24 Q.4.2 Add the HTML containers to the CSS file You will need to add CSS blocks for all containers except . Remember that IDs use #, classes use . (a dot) and HTML 5 containers have no prefix. For example: template.html contains: template.css contains: #headergraphic { } The CSS file is going to become quite long, so use CSS comments to create a structure. This will make it easier for you to scan through the CSS code. /* ----------------- Main containers ---------------- */ body { } #wrapper { } #logo { } #headergraphic { } nav { } #content { } #sidebar { } (1) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 16 of 24 #footer { } Q.4.3 Style each container All of the template styling is done inside template.css html No styling needed. head No styling needed. body The sand texture is a repeating background. It is added to the CSS file, and is associated with the body tag (so that the entire screen has the sand background. The subsequent containers then hide the sand (e.g. the logo container has a white background). The sand image is called sand.jpg margin 0px padding 0px font Tahoma,Verdana, Geneva, sans-serif background image repeating in all directions sand.jpg wrapper width 960px margin 0px top and bottom auto left and right background #F2E6C2 logo padding 15px top and bottom 20px left and right background #ffffff (32) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 17 of 24 headergraphic Height 236px nav padding 10px background #734636 text color #ffffff font size 14px Note: This styling will not complete the formatting of the menu bar – you will do more later content padding top 0px The other sides all 20px font size 14px overflow auto Note: This styling will not complete the formatting of the content – you will do more later. sidebar The sidebar is going to hold the main image, testimonials and a booking button. The sidebar is a container which floats to the right. The text from the main content area flows around the sidebar. width 300px float right margin Top 20px Left 20px padding 8px background #D9BF8F The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 18 of 24 footer background #734636 padding 5px text alignment right text color #ffffff font size 10px Note: This styling will not complete the formatting of the footer – you will do more later. Q.4.4 Styling the contents of the containers At this point, you have styled the containers, and applied some default formatting to the contents of each container (e.g. font-size). The next stage is to style the containers within the main containers. For example, a heading inside the content container, or a link within the nav container. Styling the menu links The links within the menu have a different style to links within the content or footer. As a result, you cannot style the link globally. a {color: #ffffff} sets all links to white nav a {color: #ffffff} sets only links inside to white. At the end of the style sheet, add the following: /* ------------------- Navigation ------------------- */ nav a { } nav a:hover { } (10) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 19 of 24 Then add the following styling to nav a Underline none Text color #ffffff margin Top and bottom 0px, left and right 10px Then add the following styling to nav a:hover Text color #0089af Note: This styling will not complete the formatting of the menu – you will only see the final formatting when you turn the menu items into actual hyperlinks. Styling the Headings At the end of the stylesheet, add the following /* ------------------- Headings ------------------- */ All the headings (h1 – h3) have the same formatting: Text color #0089af Font weight Normal (i.e. not bold) margin Top 20px, bottom 10px, left and right 0px Note: You need to create a CSS container that styles all three headings at once. You should not repeat the above formatting code three times. Each heading level has a different size. Create three more CSS containers (one each for h1 to h3). Apply the following sizes H1 28px H2 22px H3 16px Styling the Paragraphs At the end of the style sheet, add the following: /* ------------------- Text ------------------- */ Alignment justified The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 20 of 24 Styling the Bulleted lists Bullet style circle Styling Tables At the end of the style sheet, add the following: /* ------------------- Tables ------------------- */ Apply the following global settings for all tables: border solid 1px #D9BF8F border-collapse collapse The border-collapse property prevents each cell's border from doubling the thickness of the overall line when two cells are adjacent. Table headings Apply the following to the table heading (th) Font weight bold Background colour #734636 Text color #ffffff Text alignment Left Padding 5px Table cells Apply the following to the table cells (td) border solid 1px #D9BF8F border-collapse collapse vertical-align top Padding 5px Styling cells containing Rand amounts The content of these cells is aligned to the right td.currency { text-align: right } The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 21 of 24 Styling the Gallery At the end of the style sheet, add the following: /* ------------------- Gallery ------------------- */ #gallery img { float left padding 5px margin 5px border solid 1px #734636 Styling Forms At the end of the style sheet, add the following: /* ------------------- Forms ------------------- */ Label width 100px display block float left margin Top 1px, rest 0 Form input, select and textarea tags border solid 1px #D9BF8F margin Top 1px, rest 0 input, select, textarea { } Submit button margin Left 100px The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 22 of 24 Error messages during validation The following code causes the form field to go red if the user submits the form without filling in a required field. .error {color: #f00; } .error-highlight {border: 1px solid #f00; } Styling the Sidebar content At the end of the style sheet, add the following: /* ------------------ Sidebar content ------------------ */ The sidebar contains common content that needs styling. Main image in the sidebar margin bottom 10px Testimonial div padding bottom 5px Testimonial image float left margin right 10px padding 0px Testimonial paragraph Font size 10pt Text alignment left Bookings div padding Top and bottom 10px Left and right 0px The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 23 of 24 Q.4.5 Styling links At the end of the style sheet, add the following: /* ------------------- Links ------------------- */ Styling Content area links Links in the content container are styled differently from links in the menu or footer: Use #content before each selector in order to apply the styling to just the links inside the content container. Normal links Text color #734636 Font weight bold Visited links Text color #D9BF8F Hover links Text color #0089af Styling footer links The hyperlink in the footer is blue, and this clashes with the background. Style the link (link, visited and hover) to: Text color #ffffff Underline none Again, use #footer in the selector so that the formatting is only applied to the footer. (4) The Independent Institute of Education 2015 © Independent Institute of Education (Pty) Ltd 2015 Page 24 of 24 Q.4.6 Content images The images inside the content div all need to be styled in the same way. #content img Float Left Padding 10px on the right (1) Q.4.7 Cross-browser compatibility checking Cross browser compatibility checking is quite complex. For this introductory course we will proceed on the assumption that the template has been thoroughly tested. We only found one problem — in some browsers only, the logo image and the Book Now buttons have border around them, and others do not. Internet Explorer 9 Chrome 25 Using inline CSS, style the logo so that the border is set to zero. Do the same for the Book now button