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