Assignment 2: Web page with static page layout
Unit: DGTL11005 Web Design, 2020 Term 1
Due date: 9:00 pm AEST, Friday of Week 9
Weighting: 30%
Objectives
This assessment item relates to the unit learning outcomes 1, 2, 3, 4 and 5, as stated in the unit profile.
Task
You are required to design and build a single web page that provides information about a specific neighbourhood or suburb for new residents and visitors. The web page must be implemented using HTML5 and CSS code, and it must have a static layout with a fixed width of 960 pixels. No front-end web frameworks such as Bootstrap may be used to build your solution because the web page should demonstrate your own mastery of HTML and CSS.
Purpose and target audience
The purpose of the web page is to provide information about a specific neighbourhood or suburb that will be of interest to new residents and visitors. The chosen neighbourhood or suburb must be a real place, not a fictitious one. The target audience for the web page includes individuals and families who are planning to move to your chosen neighbourhood or suburb to live. Consider building a web page about your own neighbourhood or suburb to make the process of gathering content more convenient.
Content
The content of the web page should address topics that will be of interest to the target audience. Examples include climate, housing, employment, schools, hospitals, shops, transport, entertainment, sporting activities, recreation areas, and places of interest. Note that these are suggestions only. The content of the web page should be genuine and accurate. Do not include fictitious information. The text that appears on the web page should amount to between 400 and 600 words.
Design
The design of the web page should reflect the character of your chosen neighbourhood or suburb. For example, a web page about an inner-city apartment block might have an urban theme. A web page about a coastal seaside community might have a beach theme. A web page about a familyoriented suburb might have a family theme. A web page about a rural farming community might have an agricultural theme. These are suggestions only. Think about the distinguishing characteristics of your chosen neighbourhood or suburb. Choose images, fonts, colours, lines, shapes, textures and other design elements that suit this theme.
It is not necessary to design a logo for the web page, but it would be appropriate to give your web page some kind of header graphic that possibly incorporates the page title.
The website should consist of a single page, not multiple pages, so no navigation menus are required.
Static page layout required
The web page must have a static layout with a fixed width of 960 pixels. The page layout should conform to the 960 grid system, which is described in Study Guide module 3. The grid provides a structure upon which blocks of text, images and other page elements can be positioned in an orderly way. You may not use front-end web frameworks such as Bootstrap or Foundation in your solution because the web page should demonstrate your own mastery of HTML and CSS.
Original content required
No content (text, photographs, illustrations, etc) will be supplied to you for this assignment. You must produce your own content for the website, using the design brief as a guide. This may involve activities such as conducting research, writing text, taking photographs, or editing images.
Images
You must own the copyright in any images (photographs, illustrations, animations, etc) that you use in your website. In others words, you are restricted to using images that you have created yourself from scratch. You may not use clip-art or royalty-free images. You may not download someone else’s image from the Web. You may not scan someone else’s image from a printed publication. You may not capture a screenshot from software that someone else has created. You may not take someone else’s image and alter it to create a new image.
Text
The text in your website should be suitable for the intended purpose and target audience. You must own the copyright in the text that you use in your website. In other words, you are required to write the text yourself. If you need to quote, paraphrase or summarise the words of another author for some reason (e.g. to substantiate your statements), references must be provided in a section at the end of the web page.
Technical constraints
The following technical constraints apply to this assignment.
• You are encouraged to build your website with Dreamweaver, but almost any plain text editor, HTML editor or web authoring software may be used.
• You are encouraged to create your images with Photoshop, but almost any image-editing software may be used.
• Your website should display correctly in the latest versions of Mozilla Firefox and Google Chrome on a PC. Your target screen resolution is 1024 ? 768 pixels, but ensure that your page design also looks good on screens with a higher resolution (e.g. 1920 ? 1080 pixels).
• Your website must be constructed with HTML5 and CSS, not other technologies.
• Your website must use a linked external CSS file to control the appearance of the text and the layout of the pages.
• The page layout of your website should conform to the 960 grid system.
• Your website must not be built from a template such as a Dreamweaver template. It is acceptable to study existing web pages, templates and other sources for ideas, but the code and content in your assignment solution must be your own. As a general guide, you should be able to explain the workings of any HTML or CSS code that appears in your website. If you dont know what an HTML tag or CSS property does, then you shouldnt use it in your solution.
• Your website must not contain any audio clips, video clips or other elements that require browser plug-ins.
• You are not required to upload your website to a web server. Your website must not contain any server-side scripts such as CGI, PHP, ASP or ColdFusion code. It should be possible for the marker to view your website from the submitted files without connecting to the Internet.
• The files that make up your website must come to a total of no more than 3 MB, and may be considerably smaller. If your files exceed that limit, you should reduce the size of your image files. Use your image-editing software to reduce the bit depth or dimensions of your images while preserving image quality.
Report
After creating your web page, write a report that explains your design choices. The report should be prepared as a Microsoft Word document with a professional appearance. Use left-justified alignment for the text. Provide a heading for each section. Check your spelling. grammar and punctuation before submitting the assignment. Ideally, have someone else proof-read your assignment.
Report structure
The following outline explains how to structure your report. It lists the headings for each of the sections of your report, and the topics that should be discussed.
Title page
The title page should display the unit code, the unit name, the assignment number, the assignment name, the assignment due date, your student number, your name, and the word count. Microsoft Word has a feature for counting the number of words in a document.
Introduction
The introduction should tell the reader that this report will explain the design choices you made for the web page.
Typography
This section should discuss the fonts that you used in your web page, and how your choices enhance the design.
Colour
This section should discuss the colour scheme that you used in your web page, and how your choices enhance the design.
Images
This section should discuss the images that you used in your web page, and how your choices enhance the design.
Page layout principles
This section should discuss the page layout principles that you used in your web page, and how your choices enhance the design.
References
This section should provide a complete list of references to any works that are cited in your report, such as books, journals, periodicals, newspapers and websites. References must be provided whenever you quote, paraphrase or summarise the work of another author. You might not have any references since this report is primarily reflective and does not involve research. This section may be omitted if you have no references.
Word count
The length of the report should be between 600 and 800 words. The word count is considered to be from the first word of the introduction to the last word of the conclusion. It includes in-text citations, direct quotations and words contained within any tables that are in the body of the report. It excludes any title page, abstract, table of contents, list of references or appendices. No abstract, table of contents or appendices are required for this report.
Writing style
The report may be written in either the first-person style or the third-person style. Writing in the first-person style means using personal pronouns in your writing (e.g. ‘I chose this typeface because ...’). In contrast, writing in the third-person style means removing personal pronouns from your writing and using alternatives (e.g. ‘This typeface was chosen because ...’). Academic reports are commonly written in the third-person style because avoiding personal pronouns (such as I, me, mine, we, us, or our) creates the impression of an objective, unbiased point of view. However, some students might feel that approach is inappropriate for this report because they are providing a personal reflection on their work. For that reason, the report may be written in either style. Similarly, it is acceptable to write the report in either the past tense or the present tense, but please try to be consistent.
Referencing
The prescribed referencing system for this unit is the Harvard system, which is also known as the author-date system or the name-year system. An Abridged Guide to the Harvard Referencing Style can be downloaded from the following address: https://www.cqu.edu.au/student-life/services-and-facilites/referencing
There are two parts to the Harvard system of referencing: (1) citing the author, date and page numbers in the text or main body of your writing; and (2) referencing the source of the information in the reference list at the end of the assignment. Read the first part of the referencing guide carefully to ensure that you understand how to perform both of these steps correctly. The Academic Learning Centre (ALC) at CQUniversity can provide assistance with referencing. Please contact the ALC through the following website if you would like help: https://www.cqu.edu.au/student-life/services-and-facilities/academic-learning-centre
Submission
This assignment must be submitted electronically through the unit website. You must submit the following two files:
• a zip file named webpage.zip containing the directory of files (HTML file, CSS file and image files) that make up your web page; and
• a Microsoft Word file named report.docx containing your report.
Instructions for submitting assignments electronically are available on the unit website. Before you submit your solution, copy the website from your development computer to another computer to test it. If you have inadvertently used absolute URLs instead of relative URLs in your code, or if you have used fonts that are not widely available, these problems will quickly become apparent. Also check the assessment criteria to ensure that you have covered everything that is required.
Help with creating a zip file
If you are a Windows user, you can create a zip file by right-clicking on the file(s) or folder(s) that you want to compress, selecting Send To Compressed (Zipped) Folder from the pop-up menu, and finding the newly created zip file in the same directory. To rename the zip file, rightclick it, choose Rename from the pop-up menu, and type the new name.
If you are a Mac user, you can create a zip file by right-clicking on the file(s) or folder(s) that you want to compress, selecting Compress Items from the pop-up menu, and finding the newly created zip file in the same directory. To rename the zip file, click the icon of the zip file, press the Enter key, and type the new name.
Academic integrity
The work that you submit for this assignment must be your own. You may not collaborate with other people to complete this assignment. You must not store your assignment solution in a location where others might access it. You must not request help with this assignment in any online forums outside the unit website. You may ask for help with this assignment through the online forum on the unit website, but do not post fragments of your code there. Refer to the Universitys Student Academic Integrity Policy and Procedure for more information.
Assessment criteria
The assessment criteria for this assignment are presented in the following table. Penalties will be applied for late submission and for failing to comply with the assignment’s requirements.
Criteria Marks
Content
• communicates the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• is informative, accurate, up-to-date and complete
• uses appropriate and inclusive language
• uses correct spelling, grammar and punctuation
• presents an appropriate amount of information on each page
• uses headings and lists where appropriate to aid scanning
• correctly references any works of other authors that have been used
• identifies the site with a descriptive title, logo or signature graphic
• has an appropriate page title within the title tags
• has appropriate page headings 6
Type
• enhances communication of the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• uses appropriate choices of typeface, size, weight, colour and texture
• avoids jagged edges with anti-aliasing
• can be read easily
• uses font combinations with sufficient contrast
• limits the number of fonts in use
• is appropriately aligned
• uses emphasis techniques such as boldface, italics and capitalisation sparingly
• uses Cascading Style Sheets correctly 6
Graphics
• enhance communication of the site’s key message
• support the site’s objectives
• are appropriate for the target audience
• display creativity and originality
• have a consistent and appropriate colour scheme
• use design elements such as line, shape, value, colour and texture appropriately
• are high quality with no unwanted halos, dithering, distortion or jagged edges
• aid fast downloads with small file sizes
• use appropriate file formats for photographs and line art and lettering
• have no missing image files
• have valid href and alt attributes in img tags 6
Page layout
• enhances communication of the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• works within different screen sizes, particularly the target screen size
• uses design principles such as balance, contrast, unity, proximity, alignment and repetition appropriately
• balances text and images
• has adequate margins
• conforms to the 960 grid system
• uses a static layout with a width of 960 pixels
• uses Cascading Style Sheets correctly 6
Report
• adequately addresses the required topics
• has appropriate formatting and presentation
• has a word count within the specified limits
• demonstrates correct grammar, punctuation and spelling
• demonstrates appropriate written expression and style
• demonstrates correct referencing, if appropriate 6
Total 30