Hi guys, Welcome to Expression Web. In this
article I will demonstrate how to create a simple website in Expression Web.
Expression Web is a wonderful platform to create highly fascinating and eye
catching website. Whatever you can think of is possible to include in your
website through Expression Web and this is possible because of the superfluous
collection of tools and features richly embedded with Expression Web. To know
more about Expression Web tools refer to my last article
So here we start with creating the first website with Expression Web. Follow
the steps below.
Step 1 : First of all open Microsoft
Expression Web, what you see is a blank screen, this is the default webpage you
get with Expression web. Now to create own website go to Site from the main menu
bar--> New site.
Step 2 : When you click on the new site
menu you find a window opens up showing two things :
General : On selecting the general option
three parts become visible
(i) One page site : If you want to create a single page site you can select this option.
(ii) Empty Site : This option lands you on a entirely new site for you to work upon. In this you can add your own Folders, images , files etc and start creating in your own fashion.
(iii) Import site wizard : This
option is Very useful for those who want to work on a site that is present on the remote server or on the local disk. In this method of opening a site all the files and folders from the site are imported at the present location.
Template : Selecting this you will see a
number of templates available with Expression Web by default. You can also
select any of these available templates and include in your website also you can
edit these templates. Here in this website we will be using the "Organization1"
template and edit this in our website. Select this template and change the name
to whatsoever you would like to save it with.
Step 3 : Now As soon you click Ok button
you find that a page name Site View is opened in the webpage and contains a list
of files and folders.
Step 4 : From the list of folders and
files find the "Default.html" file and double click to open this file and
template or your site front page opens up like this:
When the site view tab opens up you will see
few tabs at the bottom screen Named Folder, Publishing, Report and Hyperlinks.
Now lets discuss what's these tabs. By default the site view shows the Folder
tab content so click on the Publishing tab and the a page, with single hyperlink
asking you to add publishing destination, opens up. When you click on the
hyperlink then new window opens up. In this window select the destination
wherever you wish the website to get published.
On selecting the Report tab the page shows the
complete list of all the files and folders hyperlinks, unlinked files, linked
files, images etc i.e. this tab gives you the complete report of the webpage.
On selecting the Hyperlink tab the page show
all the parts the default.html page is linked to even whichever page has links
or hyperlinks they are show here. A complete net of links is visible and also
you can directly navigate to the respective page or link by clicking on the link
in this page.
Step 5 : You can see this page on the
browser, for this go to toolbar and select preview tool and select the browser.
The figure below makes it more clear.
Step 6 : On selecting the preview tool
the browser displays the page as this. It is quite good to see that all the
buttons and hyperlinks in the page works well so we just have to edit their text
and links etc.
Step 7 : Another way to see how the page
is looking in the browser is by selecting the snapshot option, to do this go to
panel and select snapshot and the snapshot of the browser appears at the bottom
of the design page. Drag this snapshot window to the right side under the manage
style panels. Here you can see every changes you make in the design
instantaneously alongside on the snapshot window.
Step 8 : Now double click and open the
Master.dwt page from the site view page and start editing the context of the
page. This can be done in two ways either in the design mode
Editing through the code.
Step 9 : After this we will edit the css
for this but first open the master.dwt page and then go to Format menu--> select
CSS Styles --> Manage Style Sheet Links. Now a window opens up.
Step 10 : Here you can add styles and
remove styles applied to the master page. I selected style 3 and applied it on
the masterpage and the masterpage look like this:
Applying style3 to the master.dwt page.
Step 11 : After you apply the style to
the master.dwt page you need to save the changes you have made so far and then
open the Default.html page and view the change applied in the browser. you will
find that the default.html page has also acquired the changes from the
master.dwt page. Similarly you can apply changes in styles to all the pages
After Changing the style
That was all for this article. Hope you find
this helpful knowing the Expression Web. Do post your views.