Scribd Logo
Upload

Welcome to Scribd!

  • CS505-Web Engineering 2018-2019 AC Year Exercise 1.1 Design and Layout Using CSS

    Uploaded by

    Thet Htet Soe
    7 views2 pages
    The document provides instructions for Exercise 1.1 which asks students to recreate the design and layout of a news website using CSS based on mockups provided, following steps to structure the CSS stylesheet, start with outer wrapping components, and style and position elements as shown in the mockups using CSS properties. Students are given the HTML structure and images to complete the task and must submit their assignment by the deadline to the specified email.

    Original Description:

    Original Title

    CS505 Ex 1-1 CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides instructions for Exercise 1.1 which asks students to recreate the design and layout of a news website using CSS based on mockups provided, following steps to structure the CSS stylesheet, start with outer wrapping components, and style and position elements as shown in the mockups using CSS properties. Students are given the HTML structure and images to complete the task and must submit their assignment by the deadline to the specified email.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views2 pages

    CS505-Web Engineering 2018-2019 AC Year Exercise 1.1 Design and Layout Using CSS

    Uploaded by

    Thet Htet Soe
    The document provides instructions for Exercise 1.1 which asks students to recreate the design and layout of a news website using CSS based on mockups provided, following steps to structure the CSS stylesheet, start with outer wrapping components, and style and position elements as shown in the mockups using CSS properties. Students are given the HTML structure and images to complete the task and must submit their assignment by the deadline to the specified email.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    CS505-Web Engineering

    2018-2019 AC Year

    Exercise 1.1 Design and Layout using CSS


    In this Exercise 1, you are asked to recreate the design and layout proposed for We News site. To help you get started, you
    are provided with the bare HTML structure. Specifically, we included HTML for the main page (Figure 1). Your task is to
    implement the CSS and complement the HTML where necessary. Since this is the web designer job, you need to closely
    follow the mockup screens in your design and layout using css.

    To guide how you should approach this task, please consider the following steps.

    1. Make sure that your CSS stylesheet to increase reuse between pages.
    2. Start from those components that contain and wrap others to later focus on the details of each component.
    3. Use the available properties of CSS to size, position and style the components as illustrated in the mockup screens.

    Figure 1

    HTML structure
    <body>
    <div id="container">
    <div id="header">........ </div>
    <ul class="nav">...... </ul>
    <div id="primary">
    <div class="news">
    <div class="figure">
    <img src="img/skull.jpg" alt="skull Richard III"/>
    <p class="caption">Skull of Richard III</p>
    </div>
    <h2>Face of Richard III to be revealed</h2>
    <p>.......</p>
    </div>
    </div>
    <div id="secondary">
    <div class="news">.......</div>
    <div class="news">.......</div>
    <div class="news">....... </div>
    </div>
    <div id="footer">........ </div>
    </div>
    </body>

    Please submit your assignment on 6-1-2019 (Sunday) to the email webassignment@gmail.com.

    Late submission of assignment will not gain assignment marks.

    You might also like