联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-21:00
  • 微信:codinghelp

您当前位置:首页 >> Web作业Web作业

日期:2021-11-16 09:30

/4 Assignment 1

Due No due date Points 100

The aim of this assignment is to introduce you to some of the practical skills required to create a functional, standards?compliant web page using HTML and CSS. The assignment assesses your ability to implement a webpage from a given

textual and visual specification.

Objectives To create a cleanly structured, valid HTML web page from a plain text document (provided), based on a visual

representation of the end result

To correctly include specified images and other external page objects within the final document

To use clean valid, CSS3 to layout and present a HTML5 document

Getting started

Read through the specification carefully before starting.

Download the following files from the resources collection at


ocean_cleanup.txt

ocean_cleanup-HTML.png

ocean_cleanup-CSS-wide.png

ocean_cleanup-CSS-narrow.png

Part 1: HTML for Structure

Instructions

Use HTML tags and attributes to mark up the contents of ocean_cleanup.txt for display on the web, as shown in the

resource file ocean_cleanup-HTML.png . Save your file as ocean_cleanup.html .

Marking Criteria

Structure and organisation [5 marks]: Appropriate, content-specific, clean, semantic markup must be used throughout

the document for any headings, paragraph, list, etc.

Links images & media [3 marks]: Images and other external media objects must be appropriately marked up and

display correctly. All images should be linked using full absolute URLs to their location on the module resources (see

Assets & resources section).

Visual comparison [3 marks]: Your file ocean_cleanup.html should look like the screenshot example shown in the

resources file ocean_cleanup-HTML.png when the page is displayed without styles.


Add valid CSS to style your ocean_cleanup.html as shown in the resource files ocean_ cleanup-CSS-wide.png and

ocean_cleanup-CSS-narrow.png . All your CSS must be contained inside a single external file called ocean_cleanup.css . You

are not permitted to use any external CSS libraries (such as jQuery-UI or Bootstrap).

Marking Criteria

Overall page layout [4 marks]: The page content should be centered within the viewport, with the text not extending

approximately 80 characters in width.

Header and footer [3 marks]: The header font size should scale to ensure that the page title fits into a single line. On

wide displays, however, it should not significantly exceed the width of the main text body.

Navbar [3 marks]: The navigation bar should render as a single horizontal line on viewports of sufficient width. It should

toggle into a vertical arrangement on viewports that do not fit the horizontal layout. At no point should a horizontal

navbar break over multiple lines. Submenus do not need to be displayed. When hovering over a menu item, background

and text color should highlight the hovered item as in the following screenshots:

Figure 1: Header and navbar on wide display

Figure 2: Header and navbar on narrow display

Page elements [6 marks]: Page content (text, images, multimedia) and whitespace should render as close as possible

to the given visual specification.

Responsive content layout [3 marks]: The website should render nicely for any viewport width, including displays as

narrow as 300px. Images and other elements should scale down in size to fit the viewport if needed.

 1

 3/4

Colours and typography [3 marks]: You should be resourceful enough to find out the correct hexadecimal codes for

the colours used in the final version. Do so ... and use them correctly. The core typeface in use is 16pt “EB Garamond”,

with “Darker Grotesque” for the page title and navigation, and “Special Elite” for subheadings and figure captions. You

should not assume that they are installed on the viewer’s computer for the page to render as intended. A little research

should enable you to build simple font stacks to implement them correctly using CSS. Your font stacks should provide

appropriate alternatives if these typefaces are not loaded on the client.

Underlying framework [5 marks]: If the CSS is removed from ocean_cleanup.html , the content must appear exactly as

shown in the unstyled specification ocean_cleanup-HTML.png . This means you are not allowed to add, remove, or rearrange

the supplied content, but must instead achieve this using CSS alone. Your solution should be well structured and

commented CSS that employs reasonable selectors to achieve its effects.

Validation [1 mark]: Your finished ocean_cleanup.css must only use valid CSS level 3. You can use the W3C validator

http://jigsaw.w3.org/css-validator/ (http://jigsaw.w3.org/css-validator/) to test whether your solution is valid. Be

aware, however, that the validator does not support tthe full feature range of the CSS3 specification.

Hints

Redundant or extraneous mark-up will cost you marks. Think “lean and clean”. If you find yourself asking, “have I put

too many tags in here?”, then you probably have...

The final page layout and functionality should appear and behave identically in recent versions of Firefox and Google

Chrome. Your page will be tested in both browsers on a Windows platform. For the purposes of this exercise, other

browsers do not have to be explicitly catered for.

The screen shot ocean_cleanup-CSS-wide.png is taken from a browser window set to 1920 pixels width, while

ocean_cleanup-CSS-narrow.png is taken from a browser window of 360 pixels width. You can make measurements off it if

you wish, however this may not help you much beyond relative proportions for margins, borders etc. You do not have

to pixel perfect to pass. You should make sure that the page renders well on any viewport size, not only the two

provided in the visual specification.

In order to achieve some of the “special effects” employed in this design, you might want to do some research into

the following CSS directives: background-position, background-size, box-shadow, text-shadow, text-transform, transform in

addition to what has been presented in the lecture material.

A

ocean_cleanup.html Your HTML markup of the original document

ocean_cleanup.css

An external stylesheet, linked to ocean_cleanup.html ,

containing all the style information for the final

presentation.


Remember your submission is timed when it finishes, not when it starts, so allow time before the deadline to submit your

files.

Both parts of the assignment will be assessed together and you will receive a single mark returned.


相关文章

版权所有:编程辅导网 2020 All Rights Reserved 联系方式:QQ:99515681 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。