Tutorial 4: Pumpkins
The purpose of this exercise is to build a page layout in Dreamweaver Live View and continue working with creating and applying CSS Styles.
You can use the mockup, reference_pumpkins.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
- Insert Images
- 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 folder named Pumpkins on your local machine.
- Open reference_pumpkins.jpg and identify the html elements needed to structure your page (Note the headings, paragraphs, lists and links)
- Create the document layout using Dreamweaver Live View
- Using the mockup as a guide, format the text using the properties panel
- Import the images a shown in the mockup into a figure, making sure to add your alternate text.
- Create a new CSS style sheet named styles.css and attach it index.html
- Use the following Google Fonts for your page:
- Headings – Lily Script One
- Body Copy – Open Sans
- Save your changes
- Upload your completed work to GitHub