Creating Web Pages In Microsoft Expression Web
Posted by: Minal Agarwal
in Category Expression Web
Abstract: We have already learnt how to create websites. Now we will learn how to create web pages and working with pages. In this article we will look into creating web pages, the different categories and types of pages you can create and a creating CSS pages.
Creating Web Pages In Microsoft Expression Web
Steps for creating web pages:
1. Go to File menu > Choose New > Page to open the New dialog box.
Alternatively you can open the New dialog box from the shortcut on the toolbar as shown below:
New Dialog box:
The Page tab is selected. The left pane in the dialog box displays the list of categories for pages. Each category when selected, displays a list of pages that can be created in that category, in the center pane. The rightmost pane gives a description of every page type you choose and a Preview of the page. You can also set the Page Editor Options over here.
To create a page, choose the type of page that suits your need and click on OK. Simple!
As we can see in the New dialog box, there are many categories to choose from, so let’s take a look into each of these categories.
General category is selected by default in the New (Page) dialog box. As you can see in the above image there are various types of pages that can be created in this category. They are explained below:
1. HTML: Creates a new standard blank HTML web page with an extension of ‘.htm’.
2. ASPX: Creates a new ASP.NET 2.0 Web Form. You also have an option to choose a programming language from C#, VJ# and VB. The extension of this page is ‘.aspx’.
3. CSS: Creates a blank Cascading Style Sheet with extension ‘.css’.
4. Master Page: Creates an ASP.NET 2.0 Master Page for Web applications. This master page can be used as a template to create other ASP.NET web pages. The option to choose the programming language is available here too. The extension of this page is ‘.master’ and the extension of pages based on the master page is ‘.aspx’.
5. Dynamic Web Template: Creates a Dynamic Web Template with extension ‘.dwt’. You can use this template to create new pages to maintain the same look of all the pages in the website. These pages based on the dynamic web template will have a ‘.htm’ extension.
7. XML: Creates an eXtensible Markup Language file with extension ‘.xml’.
8. Text File: Creates a blank text file. The extension of the text file is ‘.txt’ as always.
9. Create from Dynamic Web Template: Creates a new page based on an existing Dynamic Web Template. After you choose to create a new page with this option, you will be prompted for a Dynamic Web Template on which the page would be based. The extension of this new page will be ‘.htm’.
10. Create from Master Page: Creates a new ASP.NET web page based on the ASP.NET Master Page. After you choose to create a new page with this option, you will be prompted for a Master Page on which the page would be based. This page will have an ‘.aspx’ extension.
The page types that are available in this category are explained below:
1. ASPX: Creates a new ASP.NET Web Form. This is the same option that is available in General category too.
2. Master Page: Creates an ASP.NET Master Page for Web applications. This option is also available in the General category.
3. Web User Control: Creates a new ASP.NET server control that can be used into an ASP.NET Web Form that has an extension of ‘.ascx’.
4. Web Configuration: Creates a new Web Configuration file that can be used to configure the settings for ASP.NET web applications. This configuration file is called ‘Web.config’.
5. Site Map: Creates a site map as ‘Web.sitemap’. This ASP.NET site map can be in combination with ASP.NET navigation controls.
6. Create from Master Page: Creates a new page based on an existing ASP.NET Master Page. This is the same option that is available in the General category.
This category is a little different from the two we saw above. You have a series of page layouts to select from. When you choose a particular layout Expression® Web creates a new CSS file as well as a new HTML page, and links that CSS file to the HTML page. So the code will be added to both the CSS file and the HTML page. The CSS file has an extension of ‘.css’ and since an HTML page is also created along with it, the HTML page will have its extension as ‘.html’ only.
The layout names are self explanatory like ‘Two columns, Left fixed’, ‘Header, nav, 1 column, footer’ and so on. You can preview each of these layout designs in the Preview box in the rightmost pane of the dialog box. This will help you choose a layout that matches you requirement.
After selecting the desired layout you can amend the CSS file to customize the look of the page.
This category has a collection of pre-built CSS files that you can use in your website. These styles have different names such as Blank, Arcs, Bars, Sweets and so on, but there is very little you can really make out from these names since there is no preview available for these styles. So the only option is to choose a style, apply it to your website to see what kind of layout and design it provides.
You can easily modify these style sheets after applying them to your website if you don’t get the desired output, for example colors that are applied by these CSS files. You may want to use these CSS files if you don’t have enough knowledge about creating style sheets, but once you gain knowledge or if you get familiar with them you can think of creating your own style sheets.
Frames category provides a collection of frame layouts. Expression® Web creates a frame layout for you when you choose a layout. The names of the layouts are self explanatory like ‘Banner and Contents’, ‘Header, Footer and Content’ and so on. A preview in the window helps you choose the correct frame layout for your website.
1. Choose the appropriate page type and click OK, a new page is added to your website and is visible in the Editing window. The extensions of the web pages depend upon the type of page created.
NOTE: You can also create a new page from the Folder List. Click on the New Page icon in the Folder List (highlighted in the figure below) and the new page will be created with an extension that is set as Default Document Type in the Page Editor Options.
The default document type also decides what type of document is created when the ‘New’ icon on the toolbar (shortcut) is selected. You can change the default document type in the Page Editor Options window, which can be opened from the Tools menu.
2. After a page is created you need to add content to it, to make it useful.
Creating CSS-based page
We have already seen how to create web pages in general. Out of the various types of pages you can create, the most useful one is creating CSS pages. So I thought of explaining the process of creating CSS pages as another short topic.
The steps for creating new CSS based page are as follows:
1. Open the website in which you want to create or add a page and choose File > New > Page.
2. In the New dialog box, select CSS Layouts in the left pane and choose a suitable layout from the list in the middle pane. See figure below:
You get an idea of how each of these layouts looks like from the Description and the Preview in the rightmost pane.
3. Once you select the right layout and click OK, two pages are created. One is the CSS file and the other is the HTML page. The ‘untitled_X.htm’ page is opened in the Editing window. In the Design window, you can see a rough layout of the page resembling to what you previewed in the New dialog box. In the Code window, you can see the related code. In the Split window you will be able to view both.
The layout sections are coded as ‘div’. When you select a particular section in the layout in the Design window, the corresponding code gets highlighted in the Code window.
NOTE: If you are unable to view a rough layout in the design window, and instead can see only a blank page, you need to turn on the Visual Aids to make it visible. Go to View menu > Visual Aids and then check all the options except for the two shown in the figure below
The CSS file is named as ‘untitled_X.css’ and is opened as another tab in the Editing window.
All the styles applied to the layout are defined in this page. As you add or modify the styles in the layout this page gets updated. If you are acquainted with writing styles, you case write your own CSS.
4. Now you can start adding the content to your layout. When you first save your changes, Expression® Web will ask you to give a name and title to your HTML as well as CSS file.
5. You can always preview your page by going to File menu > Preview in Browser and choose the correct browser else use the shortcut F12.
I hope this article will prove helpful for you to create web pages in your website. In the coming articles we will learn more about working with web pages.