Page Design with CSS using Microsoft Expression Web
Posted by: Minal Agarwal
in Category Expression Web
Abstract: This article assumes that you have a basic knowledge of CSS. CSS is the best approach of web design. This article would teach you how to create a CSS layout with the help of div tags and CSS elements and why is it such a preferred option.
Page Design Using CSS in Expression Web
This article assumes that you have a basic knowledge of CSS. CSS is the best approach of web design. This article would teach you how to create a CSS layout with the help of div tags and CSS elements and why is it such a preferred option.
Create a CSS layout
We would always create our layouts using tables, earlier we used frames. But both these techniques were tedious and tiring. Plus each one has limitations of its own. With CSS page design has become simpler and handy.
Go to File > New > Page… to open the New dialog box. Under the Page tab choose CSS Layouts.
You will notice a collection of pre-designed CSS layouts to choose from. And trust me you can go ahead and choose any of these layouts that either suit you or are closer to the design you want. The first three layout options give you a choice to create only columns. While the others offer a choice of header, navigation bar, logo, columns and footer. The right pane of the dialog box gives a description for every layout option with a preview. Notice the preview for every layout shows two small arrows defining which column expands or contracts when viewed in the browser depending upon the size of the browser window.
For instance in the above image, the right column is variable. If the browser window is small it will contract and when you stretch the window it will expand to fill the space. The left column is fixed.
Expression Web also has a collection of pre designed style sheets with fonts, colors and other options already specified. To view them just click on the ‘Style Sheets’ option in the left pane.
But you can always create a new CSS page from scratch by writing your own <div> and then creating styles or style sheets to control their appearance on the page.
In addition to these tools, the Apply Styles and Manage Styles task panes are there always to help you create, edit, apply and manage all your styles. If these panes are not visible in your default Expression Web layout, add them by choosing them from the ‘Task Pane’ menu. Similarly you could also need CSS Properties and Tag Properties task panes to play around with your styles. Let us take a look at each of these panes individually.
1. Apply Styles pane as the name suggests make it simple to apply a style to the page. It lists all the styles that you have created in your current page, including the inline styles and styles from external style sheet that you have applied in your current page.
Click on any of the listed styles in Apply Styles task pane for more options shown below.
Out of all these options, most handy one is ‘Modify Style’. Since ‘Modify Style’ lets you edit and add more style options in the ‘Modify Style’ window, saving the time and effort of coding the same.
2. Whereas Manage Styles let you manage the styles that are created in external style sheet and in the current page. Inline styles cannot be managed here. You can arrange, modify and get a quick preview of the styles.
Other tasks are similar to the Apply Styles options.
No matter in which task pane you are working, you can always create a ‘New Style…’ and ‘Attach Style Sheet’ from any of the Apply or Manage Styles task panes.
External Style Sheets enable you to save a bunch of styles in a separate ‘.css’ file. This is beneficial since you can attach the same style sheet to one or more pages in your web site. This would help you use the same style across multiple pages, giving it a uniform look and feel, saving your time and effort.
3. CSS Properties task pane in the left bottom corner lists all the CSS values you have set. When you click on any CSS style in the Manage styles task pane the defined rules appear here in the CSS Properties task pane. See image below:
You can always change the view to ‘Show categorized list’ or ‘Show alphabetized list’ along with or without ‘Show set properties on top’ view selected. CSS Properties is another neat place where you can set your styles.
4. Tag Properties task pane lets you view and set tag properties. So you can set properties for a tag in this task pane and define or edit styles for the tags with CSS Properties task pane.
This article was an introduction to CSS layouts and how to create them. We will explore more advanced features in our coming articles. I hope this article was helpful and I thank you for reading it. Subscribe to RSS to keep updated with our latest articles.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!