Styling Web Pages Using CSS Designer in Dreamweaver
In this series of videos, we will learn how to style our web pages using the CSS Designer and Extract panels within Dreamweaver. Software required: Dreamweaver CC 2015.
What you'll learn
In this series of videos, we will learn how to style our web pages using the CSS Designer and Extract panels within Dreamweaver. We will start by going over the basic workspace set up and interfaces of the CSS Designer and Extract panel. We'll learn how to upload a Photoshop document through the extract panel and also how to go about navigating through each of these sections within Dreamweaver. We'll go over how to style the entire web page, section by section, using only the CSS Designer panel, while extracting style information and assets from PSD comps through the extract panel. We'll finish by styling the footer section of the web page and taking a look at the final CSS code that is generated through the CSS Designer panel. This course goes over the process for creating an external style sheet using the CSS Designer panel and is intended for individuals who already have a basic knowledge of CSS properties and selectors. So throughout this course, we'll be making some really impressive styling changes to our page in a very visual and straightforward way. Software required: Dreamweaver CC 2015.
Table of contents
- CSS Designer Overview and Workspace Set Up 8m
- Getting Familiar with the Extract Panel in Dreamweaver 9m
- Defining the Font-family and Basic Text Settings 11m
- Inserting the Logo Image Using the Extract Panel 7m
- Setting Styles for the Top Navigation 8m
- Styling Individual List Items in the Top Navigation 6m
- Adding a Hero Image and Styling the Banner Text Section 11m
- Adding a Container Div Class and Styling the Body Text 9m
- Styling the Locations Table 9m
- Adding Styles to the Footer Section 8m
About the author
Amy is a web design author at Pluralsight. Her teaching passion comes from the desire to show that you don’t need to hit reset to start a new career doing something you love. She understands the struggle of breaking pages quite often in the beginning stages of learning how to code, and also the joy that’s experienced when finding the simple solution that makes everything work perfectly again. When she’s not challenging the potential of her website designs in the office, Amy is challenging her... more