Expression Web Tutorials: Learn How to Build Web Sites with CSS & HTML ~ A Place For Beginners
Expression Web 4: PreMade CSS Layouts
Expression Web 4 comes with several different PreMade CSS Layouts. Each layout consists of several <div> tags, each of which is styled with one CSS Style.
How to Access the PreMade CSS Layouts in Expression Web 4
Click File --> Hover over New --> Click on Page.
A Dialog Window will open. In the far left column, look for CSS Layouts and click on that. In the Middle column you will see all the various CSS Layouts. click on each one to see a preview in the far Right column.
Below you can see all the available PreMade CSS Layouts.
When you choose a Layout, and Click OK..... You will see that an HTML web page and 1 CSS Style Sheet was automatically created for you.
Keep reading below....
Above is a partial screenshot of what the HTML page will look like. Be sure to have Visual Aids turned on so that you can see the outline of the divs.
What you are looking at is just a bunch of divs laid out on the page in the form of a layout. Each div is empty, therefore, we need to modify each div by modifying the CSS Style that comes pre-made for each div. See below....
The actual style sheet is on the left, and the Manage Styles Panel is on the right. You simply have to right click on a style in the Manage Styles Panel and choose Modify style to open the Style Builder and begin to modify the style.
I suggest that you start by adding background colors to each div so that you can see each div clearly.
Keep in mind, do not set a height on the columns. This will allow the columns to expand open as you add content. And, in turn, this will permit each web page to take on its own size.
Likewise, do not specify a width on the header, top nav or footer. Doing so may cause some issues for you.
Soon, I will have a brand new video to show you how to work with these CSS Layouts.