Exercise 5: The Grand Tour

Due: 11/27

The purpose of this exercise is to work with creating CSS based layouts in Dreamweaver and exporting assets from XD. Please read all instructions before you begin.

Use the mockups, reference_space_tourism_grand_tour.jpg and reference_space_tourism_posters.jpg, as a guide to help you identify different elements on your page.

In this exercise, you will:

• Identify html tag structure
• Format Text using Dreamweaver
• Insert Images
• 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 using the Box Model Math Concepts
• Create a navigation bar with CSS
• Sizing Images using Photoshop

Instructions – Home Page:

1. Clone a copy of the Grand Tour code into the Student Exercises folder on your computer.
2. Begin processing your images. Using Adobe XD, export the images. Save your processed images into the images folder.
3. Open reference_space_tourism_grand_tour.jpg and identify the html elements needed to structure your page (Note the headings, paragraphs, lists and links)
   
4. Create a new HTML file and save it as index.html.
   
5. Create a new CSS style sheet named styles.css and attach it index.html
   
6. Using the mockup as a guide, begin to layout you page as we did in class. Draw the container first, and create divs inside the container for the header, nav, content, sidebar and footer. Look at the CSS references below for class names.
7. Using the mockup as a guide, copy/paste the text and format using the properties panel. Refer to the folder Assets > Copy for text.
8. Create your navigation list. Enter the following and then format as a bulleted list using the properties panel. Link to the following:
   • Home – Link to index.html
   • Destinations – Link to https://www.jpl.nasa.gov/visions-of-the-future/
   • The Future – Link to https://www.jpl.nasa.gov/visions-of-the-future/about.php
   • Posters – Link to posters.html (you will have to type this manually).
   • NASA – Link to https://www.nasa.gov/
   • JPL - Link to https://www.jpl.nasa.gov/
9. Import the images a shown in the mockup, making sure to add your alternate text.
   • Header Image Alt = A Once in a Lifetime Getaway – The Grand Tour
   • Content Image = Planet Illustration
   • Visions of the Future Image = Views from Titan
   • Galactic Travel Destinations = Geysers on Enceladus
10. Embed the Youtube video: https://www.youtube.com/watch?v=Kn54NZZiuEY
    Sized at 640x360, uncheck show suggested videos.
    
11. Use the following Google Fonts for your page:
    • Headings – Anton, 400
    • Body Copy – Lato, 400 + 700 weights
12. Figure out your Box Model Math for your index page with the following information:
    • Container – 1280px
    • Gutters – 54px
    • Sidebar – 385px
    • Content - ???
13. Style your page elements using Adobe XD to pull the colors, font sizes and associated styling.
14. Save your changes

Instructions – Posters Page:

1. Do a File Save As from the index page and name it posters.html. Use reference_space_tourism_posters.jpg as a reference.
2. Remove the sidebar as we did in class by selecting it with the tag navigator.
3. Remove all content form the content div except the heading 2 and enter text from the mockup.
4. Select the content div using the tag navigator. In the properties panel change the class form ‘content’ to ‘content_wide’
5. 3. Create the gallery like we did in class using flexbox.
6. Add your poster images as shown in the mockup. Making sure to add your alternate text to each image using the image file name.
7. Save your changes
8. Upload competed project to github

Accept the Assignment