Search

Exercise 4: Neutron Stars

Due: 11/07

The purpose of this exercise is to build a page layout in Dreamweaver Live View and continue working with creating and applying CSS Styles. Please read all instructions before you begin.

You can use the mockup, reference_neutron_stars.jpg, as a guide to help you identify different elements on the page.

In this exercise, you will:

  • Identify html tag structure
  • Format Text using Dreamweaver
  • Work with new HTML elements like <header>, <nav>, <main>, <section> & <footer>
  • Insert Images and work with the <figure> element
  • Create Links
  • Create and attach a new CSS style sheet
  • Create and apply CSS styles to a webpage
  • Use a Google Font
  • Create a CSS based page layout
  • Create a navigation bar with CSS

Instructions:

  • Download the zip file from Github and save to your Student Exercises folder
  • Open reference_neutron_stars.jpg and identify the html elements needed to structure your page (Note the headings, paragraphs, lists and links, header, nav, sections, figures)
  • Create a new HTML page and save it as index.html
  • Create a new CSS style sheet named styles.css and attach it to index.html
  • Using the mockup as a guide, begin to layout you page as we did in class. Draw the container div first, then add the header, nav, content, sidebar and footer inside it. Look at the CSS references below for class names.
  • Using the mockup as a guide, copy/paste the text and format using the properties panel. Refer to the Assets > Neutron-Stars-Copy.
  • Create your navigation list. Enter the following and then format as a bulleted list using the properties panel. Link to the following:
    • About – Link to #about
    • Pulsars – Link to #pulsars
    • Magnetars – Link #magnetars
  • Import the images a shown in the mockup, making sure to place them inside a <figure> element and make sure to add your alternate text and captions.
  • Create <sections> with a class of container, like we did in class. Make sure to give each section an ID. (about, pulsars, magnetars)
  • Create Links as shown in the mockup:
  • Use the following Google Fonts for your page:
    • Headings – Abril Fatface
    • Body Copy – Source Sans Pro
  • Save your changes
  • Upload your completed work to GitHub

Accept the Assignment

Related