This tutorial explains how to create your first site using
Microsoft Expression Web. If you are new to web development or even if you are
new to Microsoft Expression Web, you probably are a little overwhelmed when you
start the Expression Web program. There are a ton of choices.
If you've used other Microsoft products you probably have a
natural instinct to go up to File and Select New in the menu bar. This instinct
is correct. However, stop there! Instead of selecting and HTML page, you
actually want to create a new site. This will allow you to organize things
correctly and will serve you much better in the long run. So click on the Web
Site tab. Next lets use one of Expression Web's built in templates to get us
started. Down the road, once you've learned more about Expression Web, you will
probably want to simply create an empty site and then design everything from
scratch. But for right now, lets click the Templates choice in the left pane
and select Personal 7 in the right pane.
Lastly, lets change the location our website is stored at.
By default Expression Web will give you a not very helpful name. Change the
last part of the location to something meaningful like HelloWorld, since this
is going to be our first site we say Hello to the world with.
Press OK and Expression Web will automatically create for
you a very nice looking site. Of course you won't be able to tell that yet
because it will show you a view that is your site structure.
Now, double click on the default.htm page. You can now see
the power of using a built in template that ships with Microsoft Expression
Web. It has created for us a very nice looking page already. Now lets see what
it will look like in a web browser. You can test this by select File ->
Preview In Browser from the menu bar at the top. This will bring up a list of
browsers and resolutions. You can use this to test your page in different size
windows and in different browsers. For now just select the first browser in the
Wow, if you haven't ever written a website by hand using
HTML you probably don't fully appreciate all the Expression Web has done for
you, but trust me this would normally take a lot of time to create a site that
looks this nice. Still, you probably aren't ready to post this on the web and
start telling all your friends to check it out. You need to customize it so it
is your own personal site.
Close out of the web browser and head back into Expression
Web. Close out of your default.htm page and get back to the main window where
our site structure is shown. Now double click on master.dwt. This is the main
Dynamic Web Template file for our site. You can think of it as the general
framing that is around every page of your site. By customizing this we can
start making this site be yours. First click on the My Website header in the
upper right corner of the page. Delete that text and put your name there. Then
click below it on the Website Description heading. Erase that text and put in
something fun like "Saying Hello To the World!". Now save this page (ctrl-s).
When you do so a message box will pop up saying that there are files attached
to this page would you like to update them.
Select Yes and all of your other pages will automatically be
updated to look like this template. Once again Expression Web saves us a ton of
time as we don't have to go fix all our individual pages. Once the dialog box
is gone close out of your master.dwt file, then open the default.htm file. If
you notice in the upper right corner our text we changed in the template file
has also changed in this file.
Now lets change the content for our start page. This page
(default.htm) will be the first page that visitors see when they come to your
site. Click on the Heading 2 heading in the top center of the page. Change this
to Hello There. Then click on the gibberish below this heading - delete all of
it and type your own paragraph there. Maybe something like:
Hi, you've stumbled upon my personal web site. I designed
this page using Microsoft Expression Web. This page is all about me - John Doe!
Above you can select different links to see my resume, my photo gallery, or to
contact me. I'd love to hear from you so why don't you drop me a line. Thanks
for visiting my little corner of the World Wide Web.
Now save this page, and then choose File->Preview in
Browser again to view it.
Well that's a great start - already this site is starting to
be way more personal. You can continue to edit the default.htm page to replace
the picture with one of your own and the text under the picture with something
clever. Than open the .htm files under the folders contact, links, resume, etc.
to edit the other pages on your site. When you are done you will have a fully
functional great looking website all designed using Microsoft Expression Web.