How to Add Google AdSense to Your Website with Expression Web

Inserting Google Advertisements into a Web Page


by Christopher Heng, thesitewizard.com

This article deals with how you can add the Google AdSense code to your web page using the free Microsoft Expression Web editor. For those wondering, AdSense is the name of the advertising network that delivers the Google advertisements you see everywhere on the Internet, from the Google search engine's results page to ordinary websites like thesitewizard.com. It lets you earn some money from advertisements appearing on your site.

Prerequisites

Steps to Inserting the Google AdSense Code into Your Web Page

  1. Go to your AdSense account, and copy the HTML code for the advertisement. See my other article if you don't know how to do this.

    Note that by "copy", I mean do the first step of a "copy and paste" operation. This usually mean that you right-click the code in your Google AdSense account with your mouse, and click the "Copy" line from the menu that appears.

  2. Start up Expression Web and open the page into which you want to place the advertisement. If you have a Dynamic Web Template (ie, a DWT file), you will probably want to insert it there, so that all the pages derived from that template will automatically have the advert.

  3. I will assume that you are currently using the Design tab of Expression Web. Click to put your text cursor at the spot on the page where the advertisement should go.

    Note that if this is a DWT file, you should not put the cursor into an existing editable region, otherwise Expression Web will not update the pages derived from the template with the advert code. If you really want the advert to be in an editable region, first put it into a normal part of the page first, then make that area into a new editable region.

  4. Click the "Code" tab near the bottom of Expression Web's window to activate the Code view. You should now see the underlying HTML code.

  5. Look for the text cursor. Don't click the page itself (or you will accidentally move the cursor). If you need to move up and down the page, use the scroll bars on the right (or bottom).

  6. If your cursor was previously in an empty paragraph, it should now be in the middle of text that says "<p> </p>" (probably after "<p>" and before " </p>").

    If so, use your arrow keys and move the cursor to the end of the line, that is, immediately after "</p>". Otherwise, go to the next step.

  7. Click "Edit | Paste" from the menu. This inserts the code that you copied from your AdSense account.

  8. Click the "Design" tab at the bottom of the window to return to the Design view.

  9. You will probably not be able to see any advertisements from within the Expression Web window. It is, after all, an editor, not a web browser. Furthermore, AdSense needs to be able to retrieve the page content to find out what's on it before it can deliver a relevant advert. It can't reach into your computer and grab files from it. As such, you can only see if everything works properly after you upload your work to the Internet.

    Save the page. If this was a template, allow Expression Web to update all the pages dependant on it. Then publish it to your website.

  10. Go to the site in a browser. Note that JavaScript must be enabled in the browser before the advert will show. (If you don't know what JavaScript is, it probably means that it is already enabled.)

    Don't worry if the advertisement does not show up at first. When the page is loaded for the first time, the AdSense bot (ie, computer program) needs to grab a copy of it and "read" the content. It will then select ads that are relevant to it. As such, if you don't see any adverts, wait a while, then reload/refresh the page. If you have waited long enough (to give the AdSense bot time to retrieve and process everything), the adverts will appear.

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/add-google-adsense-to-website.shtml" target="_top">How to Add Google AdSense to Your Website with Expression Web</a>

It will appear on your page as:

How to Add Google AdSense to Your Website with Expression Web

Copyright © 2017 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 6 February 2017.


Read Entire Ad

How to Add an Automatically Numbered List to Your Website with Expression Web

Insert a list that automatically renumbers when you insert a new item


by Christopher Heng, thesitewizard.com

There are times when you need to add a numbered list to your web pages in Expression Web. While it's possible to manually number the items yourself, there's a better way using a built-in HTML facility.

With this facility, not only will your items be numbered without you having to manually insert the digits, they will also be automatically renumbered whenever you add new items to the beginning or middle of an existing list.

Prerequisites

This article assumes that you have already built a website, and know how to use Expression Web to maintain it. If not, please begin with the guides that I linked to in the previous sentence.

How to Add a Numbered List

(Incidentally, the steps below also use a numbered list.)

  1. Start up Expression Web and open your web page.

  2. Place the text cursor at the spot on the page where the list is to appear. You can do this by clicking your mouse at that location.

  3. Click "Format | Bullets and Numbering..." from the menu. That is, click "Format" on the menu bar, followed by the "Bullets and Numbering..." item in the drop-down menu that appears.

    A dialog box with the title "Bullets and Numbering" will appear.

  4. Click the "Numbers" tab near the top of the dialog box.

  5. Choose the type of numbering you want. You are given a choice of normal numbers ("1", "2", "3", etc), Roman numerals ("I", "II", "III", etc or "i", "ii", "iii", etc), or the letters of the English alphabet ("A", "B", "C", etc, or "a", "b", "c", etc).

    You can also choose to start the numbers at the beginning (eg, "1" for normal numbers) or some other number.

  6. Click the "OK" button at the bottom of the dialog box when you are done.

  7. The editor will immediately display the first number in the sequence and put your text cursor next to it so that you can type your content. When you want to move to the item, hit the ENTER key.

  8. To terminate the numbered list, just hit ENTER again. That is, if your cursor is currently at the final item on your list, and you type the ENTER key, Expression Web will create a new blank item. Just hit ENTER on this blank item and the editor will remove it and deposit you in a new paragraph below. You can then remove that blank new paragraph by hitting the Backspace key.

If you want to insert a new item somewhere in the middle of the list, just click to put your text cursor on the preceding item and hit ENTER. Expression Web will create a new blank item for your to modify and renumber the list accordingly.

Alternative Method

Another way to get a numbered list is to click the "Numbering" icon (or button) from the toolbar at the top of the Expression Web window (see picture below).

Doing so will immediately insert a new numbered list at the location of your text cursor. However, by default (unless you deliberately change your defaults by modifying your CSS file), this list will use the standard numbers ("1", "2", "3") beginning with "1". For the other numbering systems, use the method given earlier.

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/numbered-lists.shtml" target="_top">How to Add an Automatically Numbered List to Your Website with Expression Web</a>

It will appear on your page as:

How to Add an Automatically Numbered List to Your Website with Expression Web

Copyright © 2017 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 15 February 2017.


Read Entire Ad

How to Insert a YouTube Video into Your Website with Microsoft Expression Web

Embed a YouTube Video in a Web Page


by Christopher Heng, thesitewizard.com

As you surfed the Internet, you would have undoubtedly come across websites that had YouTube videos embedded (such as this page). That is, you could watch the video directly on that page, without needing to go to YouTube. This article shows how you can insert a YouTube video into a page on your site using the free Microsoft Expression Web editor.

Prerequisites

This guide assumes the following things.

  1. You already have a website into which you can insert a YouTube video. Those who don't should begin with How to Build / Create a Website.

  2. You already have Microsoft Expression Web, and more or less know how to use it to design web pages and upload them to the Internet. The Expression Web Tutorial is the place to look at for those who don't.

  3. You have a YouTube video to insert into your site. Note that this article only deals with the technical aspects of embedding. It doesn't address the potentially problematic issue of whether it's okay to insert other people's video, should the video in question not be your own 100% original production.

How to Embed a YouTube Video in Your Web Page

  1. Go to the YouTube video that you want to embed, and let it play.

  2. While it is playing, click your right mouse button on the video window. A menu should appear.

  3. Click the menu item that says "Copy embed code".

  4. Start up Expression Web and open the web page into which you want to put the video.

  5. I will assume that you are currently using the Design tab of Expression Web. Click to put your text cursor at the spot on the page where the video should go.

  6. Click the "Code" tab near the bottom of Expression Web's window to switch to the Code view. You should now see the underlying HTML code.

  7. Look for your text cursor. Don't click the page itself (or you will accidentally move the cursor). If you need to move up and down the page, click the scroll bars on the right side and bottom to move it.

  8. If your cursor was previously in an empty paragraph, it should now be in the middle of text that says "<p> </p>" (probably after "<p>" and before " </p>").

    If so, use your arrow keys and move the cursor to the end of the line, that is, immediately after "</p>". Otherwise, go to the next step.

  9. Click "Edit | Paste" from the menu. This inserts the "embed code" that you copied earlier.

  10. Click the "Design" tab at the bottom of the window to return to the Design view.

  11. Expression Web will say something like "Getting https://www.youtube.com/embed/[some string of characters here] from server". Eventually, there will be a black box on the screen where the video should be. As far as I can tell, the video itself does not play in Expression Web (at least not on my system), but it should in a real web browser when the page is uploaded (published) to your site.

    If your screen is narrow, the black video box may exceed the width of the displayed page. This is because the embed code specifies a fixed video width of 854 pixels (or it did at the time this was written). Since Expression Web has panels using up some space on the left and right sides of the window, the width remaining for the actual page is less than that in a normal web browser.

    The fixed width also means that the page embedding the video will not be mobile-friendly. This is the case even if you have used my Expression Web tutorial series to design your site. Although that tutorial series guides you to create mobile-friendly pages, the YouTube embed code, with its large fixed width, will exceed the screen sizes of some mobile devices.

  12. Save the page and publish it. Then test it using a web browser.

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/insert-youtube-video.shtml" target="_top">How to Insert a YouTube Video into Your Website with Microsoft Expression Web</a>

It will appear on your page as:

How to Insert a YouTube Video into Your Website with Microsoft Expression Web

Copyright © 2017 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 19 January 2017.


Read Entire Ad

How to Publish (Upload) Your Website to the Internet with Expression Web

Chapter 8: Transferring Web Pages to the Internet


by Christopher Heng, thesitewizard.com

With the completion of most of your website in chapter 7, we can now transfer the finished work to the Internet. This process of copying files from your computer to your web host's computer is known as "uploading". It is also sometimes referred to in layman's language as "publishing".

As usual, I will assume that you are already familiar with the things covered in the earlier chapters of this Expression Web tutorial. If you are a complete newcomer, and are looking for information on designing your own website, please start with How to Create a Website.

Goal of This Chapter

By the end of this chapter, you will have uploaded your web pages to the Internet.

Prerequisites

  1. A Web Host

    I mentioned in chapter 1 that you will need a web host. If you have delayed getting one so far, you can defer this task no further, since you will definitely need it here. For those who don't know where to start looking, there is a list of commercial web hosts on thefreecountry.com, and I also have a review of the web host that I am currently using for thesitewizard.com.

    Once again, by way of reminder, if you are a student following this tutorial as part of a course requirement, you may not actually need to sign up with a web host. Your university (or school) may have allocated space on their own web server (ie, a computer on the Internet) for your website. Get the details from your lecturer (or teacher).

  2. FTP or SFTP Details

    In order to upload your files, you need your website's FTP server address, the directory to place your website files and the FTP login name and password.

    When you signed up with your web host, they will probably have sent you a confirmation email with the above details. If you have lost that email, contact your web host. Note that there is no point emailing me for help here. Only your web host has the information you need.

    Don't be intimidated by the jargon above. "FTP" merely means "File Transfer Protocol". It is just the method that Expression Web uses to transfer a file from one computer to another, somewhat like the HTTP protocol of chapter 5 that browsers use to retrieve web pages. Some web hosts offer "SFTP", which is a secure version of FTP that encrypts everything so that (hopefully) no one can intercept your password. In any case, for Expression Web to transfer files, it needs to know the address of the FTP server on the other end that is waiting to receive those files.

Wait, What About My Contact Form?

I realise that, although you have finished most of your website, you have yet to create a contact form. As I said before, this will only be done in chapter 9. There is a reason for this.

In my experience with newcomers, if they are to find any part of web design difficult at all, it is usually at two points. One of them is the initial uploading of their site, and the other is getting the contact form to work properly. As such, I prefer to separate the learning of these 2 stages so that they don't take place at the same time. This lets the new webmaster solve the problems (if any) of each stage without the complications of the other confusing the issues.

Since getting the contact form to work properly depends, in part, on your being able to publish the pages correctly to the right location, it seems sensible to first deal with the former. Once you can publish your pages correctly, and view them in a web browser, you can sort out any additional issues a contact form poses.

Now some of you, at this point, may be concerned that visitors will arrive at your site immediately after you publish it, and make a beeline for your contact form, only to find that it doesn't exist. Don't worry. The reality is, since your website is new, and you have not yet advertised it to anyone, no one will know it exists, let alone visit it. Not even the search engines. It is not that easy to get visitors.

How to Set Up Expression Web's Publishing Settings

  1. If you have files open in Expression Web, save and close those files. Otherwise, you may accidentally publish an older version of your work.

  2. Click "Site | Site Settings" from the menu.

  3. Click the "Publishing" tab in the "Site Settings" dialog box that appears.

  4. Click the "Add..." button under the "Publishing Destinations" box. The "Connections" dialog box will appear.

  5. Type your web host's name into the "Name" field. Actually, it doesn't matter what you type here. The contents of this field is only used in the "Publishing Destinations" box. However, if you type some random thing here, you will only confuse yourself years down the road, when you have forgotten your own pranks.

  6. In the "Connection Type" field, select "SFTP" if your web host gives you SFTP access, or "FTP" if they only provide you FTP access. If your web host allows you to use both, choose SFTP, since it's more secure.

  7. For the "Location" field, you need the name of your FTP server (sometimes referred to as "FTP address" or "FTP hostname"). The actual name differs from web host to web host. For example, on some hosts, the server is a name like "ftp.example.com" (where "example.com" is your site). On others, it's your domain. There are also some hosts which supply a completely different name altogether. Use the name they give, without modification. Remember that you cannot use guesswork to figure out what to enter here. It has to be the name of the server that your web host has specifically set up for you.

    Type the name immediately after "ftp://". For example, if the FTP server address is "ftp.example.com", the field will now read "ftp://ftp.example.com".

    Note: leave the "ftp://" prefix as-is, even if you are using SFTP.

  8. The "Directory" field is where your web pages are supposed to be placed (on your web host's computer). Again, this information has to be provided by your web host. Do not enter some random directory here; ask them if you don't already have the information.

    Anything placed in this folder, or in the sub-folders within it, will be accessible to everyone on the Internet. If you put your web pages outside this directory hierarchy, your visitors will not be able to access them (under normal circumstances).

    (Web servers are set up this way to protect your private files from casual access. For example, things like your email are placed outside this directory and its descendants.)

    For those who don't know how to locate the relevant bit of information in your web host's email, look for where they say your web pages (or "HTML files") are to be placed. For example, some web hosts tell you to place the files in the "www" directory. If so, type "www" (without the quotation marks) into the Directory field. Other web hosts say that you need to use the "public_html" directory. If so, enter "public_html" (without the quotes). And so on. Remember to use the exact name they give to you. Do not change the capitalisation of the name. "WWW" is different from "www", as is "public_html" from "PUBLIC_HTML". If your web host says to publish your files in the default directory that you see when you connect by FTP, leave the "Directory" field blank.

  9. Enter your login name into the "User name" field and your password into the "Password" field.

    If you are using a computer which you share with others, you can also omit the "User name" and "Password" field for now. Expression Web will then prompt you for the information later. However, this tutorial assumes that you have entered the information as stated in the paragraph above.

  10. Click the "Add" button.

  11. The Site Settings dialog box will now show a new entry in the Publishing Destinations box. Click "OK" to dismiss the box.

How to Publish (Upload) Your Website

  1. Click "Site | Publishing" from the menu.

  2. The Site View tab will now show a blank page with a single link saying "Connect to the current publishing destination". Click that link.

  3. If Expression Web pops out an error message saying

    Cannot connect to "ftp.example.com". Check the server name and proxy settings. If the settings are correct, the server may be temporarily unavailable.

    it means either that you have typed the domain name incorrectly into the Publishing tab of Site Settings (the part after "ftp://" above), or that you have only just bought your domain name, and your local broadband (or dial-up) provider's systems have not been updated with information about it. When a domain name is new, it can take up to 2 days for the rest of the world to learn of its existence.

    To check your settings, click "Site | Site Settings" again and go to the "Publishing" tab. Click the "Edit" button under the "Publishing Destinations" box and check the domain name portion in the "Location" field against the information provided by your web host.

    If it's correct, and you have only bought the domain (say) a few hours before, then you probably have to wait a day or two before continuing. You can't speed up the process, and complaining to your web host or domain registrar won't help, since it's outside their control.

  4. When Expression Web successfully connects to the site, you will see two panels side-by-side. The left side lists the files on your computer, while the right shows you the files on your web host's machine.

    Right click the "index.dwt" file in the left panel and select "Exclude from Publishing" in the menu that appears. The "index.dwt" file, as you will remember from chapter 7, is your site's template, and does not need to be on the Internet.

  5. Now click 'Site | Publish All Files to "example.com"' (where "example.com" is whatever you have entered into the "Name" field of the Publishing tab earlier).

  6. Expression Web will proceed to upload your files to the web server (ie, your web host's computer). Depending on how many files you have, this may take some time, during which you can watch its progress in the bottom half of the Site View window. When it is completed, you should be able to see the files on the server in the right panel. It should include everything you have on the left, except for "index.dwt", which you deliberately excluded. (Note that the server may also have some additonal files placed there by your web host when it set up your account, such as a default "404 File Not Found" error file.)

How to Test Your "Live" Website

Although you have been testing your website in a browser in the last few chapters, there are some things that you can only test when your site is on the Internet.

  1. Check the default page

    Go to your website by directly typing "http://www.example.com/" (or whatever your domain name is) into your browser's address bar. Do not type it into a Google or Bing search field. Do not use "http://www.example.com/index.html", where the home page filename is added to the end of the address.

    When you do that, you should nonetheless see your "index.html" page. If you don't, take a look at the error message. If the message says "404 File Not Found", "Document Not Found", "Forbidden", "Directory has no index file", it means one of the following things.

  2. You may have named your file wrongly. For example, if you used a filename of "Index.html" (notice the capital "I"), you will get this error. The home page must be named "index.html" if you want this trick of typing your domain name to work.

  3. You may have uploaded your files to the wrong directory. Don't think that this possibility does not apply to you. As I said before, web servers will only display files placed in specific folders, for security reasons. Just because you successfully uploaded your files to your server does not mean that they are in the correct location.

  4. A more remote possibility is that your web host has not set up their server to show index.html as the default page. This is very rare nowadays, since most web hosts configure their servers to follow the conventions that the majority of webmasters are familiar with (if only to reduce the amount of technical support they have to give).

    To test this possibility, type "http://www.example.com/index.html" (yes, with the filename this time) into your browser's address bar. If this works, but "http://www.example.com/" doesn't, then you are in this boat. You can solve the problem either by asking your web host to set the default page to "index.html" for you, or you can find out from them how you can do this for yourself. Although I have a tutorial for changing the name of the default page for one commonly-used web server software (called Apache), your web host is probably using a different program for their system. I say this because Apache recognizes "index.html" by default.

    Another solution is to rename "index.html" to the name used by your web host's server software. However, this means that any links on your site pointing to the home page with "index.html" somewhere in the URL will break, and you will have to fix all those links. In addition, if you ever move your site to a different web host using the standard "index.html" convention, you will face this issue anew.

  5. On the other hand, if you get a "Domain not found", "No DNS for www.example.com" or words to that effect, it could be one of 3 reasons.
  6. You could be facing the domain name propagation issue I mentioned above, where your domain name is less than 2 days old.

  7. Alternatively, your web host may not have set up the "www" subdomain for your site. Not every web host does this automatically. To see if this is the case, type "http://example.com" (that is, your domain name without the "www" prefix) into your browser's address bar. If this works, but the "www.example.com" version doesn't, contact your web host to ask them how you can set up the "www" version. (For example, on some web hosts, you may need to log into your website's control panel and click a checkbox somewhere.)

  8. You made a typing error when entering your domain name into the browser. Before you scoff at this, check it. Typing mistakes afflict us all, whether you are a newcomer or an experienced webmaster.

  9. Check your links

    Check all the links on your pages, whether they are in the navigation menu or in your main content. Remember also to click your site logo to make sure that the link there is correct too.

    All your links should point to valid destinations except for the link to the Contact Form. The latter will, as expected, lead to a "404 File Not Found" (or words to that effect) error, since you haven't created it yet.

  10. Check your images

    Make sure that the pictures you placed on your page show up on your "live" site. They should, if you have followed my procedure in chapter 2 of always copying them into your images folder, and then using Expression Web's "Publish All Files..." to put everything online.

    Note that you should verify this even if you have been faithfully using "Preview in Browser" to check your site. Just because something works fine on your own computer doesn't mean that it will work correctly on the Internet.

Once you've fixed any outstanding issues, and everything works as it should, congratulations! With your site on the Internet, you are now a full-fledged webmaster.

Next Chapter

In the next chapter, you will complete your site with its final set of pages: a contact form and its supporting files.

Copyright © 2016 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-8.shtml" target="_top">How to Publish (Upload) Your Website to the Internet with Expression Web</a>

It will appear on your page as:

How to Publish (Upload) Your Website to the Internet with Expression Web

Copyright © 2016 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 29 December 2016.


Read Entire Ad

How to Create a Contact Form with Expression Web

Chapter 9: Create an Email Web Form for Visitors' Feedback


by Christopher Heng, thesitewizard.com

Many websites provide a way for their visitors to contact their webmasters. For example, some people put their email addresses on their sites. Others put up a web form, which visitors can use leave feedback. In this final chapter of the Expression Web tutorial, you will be creating such a form.

This chapter assumes that you know the things covered in the earlier chapters. If this is not true, please start at the beginning with How to Create Your Own Website.

Goal of This Chapter

By the end of this chapter, you will have a working contact form. In addition, if you have been following this tutorial from chapter 1, you will also have completed everything, and have a fully-functional multiple-page website "live" on the Internet. With this chapter, you will have acquired most of the commonly-used knowledge needed to design and maintain a site using Expression Web, and will be able to create more as and when you wish.

You Can't Just Design a Web Form and Expect It to Work

Web forms are tricky beasts for newcomers. Very often, a new webmaster will create a form using his/her favourite ("favorite" in US English) web editor, complete with bells and whistles, only to find that the form does absolutely nothing but look pretty.

A form is only one part of a complex machine. An analogy may serve to explain its place in the bigger scheme of things. Let's say that someone decides to create an intelligent computer that can chat with them on lofty matters. They get an empty cardboard box, paint it black, attach pretty buttons on the surface with different labels, such as "Discuss Philosophy", "Poetry", and "The Meaning of Life". But when they press a button, any button, they are greeted with silence. Creating the user interface (the sleek black exterior and buttons with weighty topics) is well and good, but without some actual engine working its magic beneath the surface, one can click the buttons till they are blue and not get the desired results.

In the same way, a web form is just the user-facing component of a bigger whole. The actual engine driving the form is a computer program that is custom built to process the stuff coming out of the form. Designing a form without having a program to handle its output is like putting buttons on a empty cardboard box and expecting those buttons to actually do something.

But don't panic. For the contact form that you'll be adding to your site, you don't actually have to write your own computer program, nor is programming knowledge necessary. You will be using the Feedback Form Wizard to do the hard work for you.

Components of the Contact Form System

Before you continue with this article, please go to the Feedback Form Demo and try it out. This will give you an idea of how your contact form system will work. Please do this even if you have a lot of experience using web forms. The demo form uses the exact same engine that yours will use, since it was created using the Feedback Form Wizard. And don't worry about spamming me with that form; email sent through it is automatically deleted, so feel free to test it to your heart's content. Do it now, before continuing with the next paragraph.

From that brief experiment with the form, you will probably notice that the contact form system comprises 3 user-visible parts. In actual fact, there many more, but you will only directly deal with the following 4 components.

  1. The Contact Form itself

    The web form itself is of course the most obvious part of the system. The Feedback Form Wizard will create this for you, and all you need to do is to plug it into your website. Its appearance (eg, the size of the fields, fonts used, colour, etc) can be customized from within Expression Web.

  2. The Thank You page

    This is the page your visitors will see after they successfully submit a message. You will be creating this yourself in Expression Web.

  3. The Error page

    If your visitors fail to enter important information into the form, such as their email address, this page will be displayed when they try to send the message. (You can see this page in the demo by simply clicking the "Send Feedback" button without entering anything into the form.)

    Like the "Thank You" page, you will create this page in Expression Web.

  4. The Feedback Form Script

    The Feedback Form Script is the behind-the-scenes "brains" of the form. It is actually a computer program that processes the stuff entered by your visitors and transforms it into an email message. (A "script" in this context means a computer program.) It then asks the other programs on your web host's computer to send the email.

    Yes, you read that right. The script doesn't actually send the email. It doesn't need to. There are programs on your web host's computer specially designed to handle email. Many programs on your web host's computer have specific functions, and they all work together to do complex tasks. It's like the division of labour you find in human organisations.

    After handing off the message to the other programs on the system, the script then tells your visitor's web browser to go to your "Thank You" page.

System Requirements

For the contact form to work, the following are required.

  1. Your web host must allow you to run PHP scripts

    The script generated by the Wizard is written in a computer language called PHP. (See What is PHP? if you want to know more.) For it to work, your website must be placed on a web server (ie, your web host's computer) that has PHP installed.

  2. Your PHP scripts must be allowed to send email

    Not only must your web server have PHP installed, it must be configured so that PHP scripts are allowed to send email. This is generally the case for commercial web hosts, but is not necessarily true for free ones. Many free web hosts that permit PHP disable its email-sending facility, presumably to prevent people from using their system to spam others. As such, if your site is on such a host, your form will probably not work correctly.

    Note that when I say "free web host", I include any situation where you didn't have to pay to have your website hosted. This include the free web hosting that sometimes comes with your Internet broadband connection and the "starter websites" that you get for free when you buy a domain name from some registrars.

    That said, the feedback form script has been successfully used by thousands of sites on many commercial web hosts, including the one used by thesitewizard.com itself.

How to Create a Contact Form

Please follow the instructions below meticulously. Do not skip any step. In addition, I recommend that you do not work from memory, even if this is the second or third time you're doing this. Keep this article open in a window (or tab) of your web browser while you work, perhaps even highlighting the step you're following (just drag your mouse over the relevant sentence to highlight it) so that you remember where you are. It's easy to lose your place in the article because you will be switching back and forth between windows repeatedly.

  1. Go to the Contact (or Feedback) Form Wizard.

  2. Read the information on that page, and select the "Create a PHP Feedback Form (Requires PHP 5.2 or above)" option by clicking the radio button. (Actually, that button should already be selected by default, but click it again if you're not sure.)

  3. Click the "Go to Step 2" button.

  4. You will arrive at Step 2 of the Wizard. Enter the following.

  5. Email Address

    Enter the email address at which you want to receive your visitors' comments. For example, enter "webmaster@example.com" (without the quotes) if that is your email address.

  6. URL of Feedback Form

    Enter "http://www.example.com/feedback.html" (without the quotes) into this field, replacing "www.example.com" with the address of your website. Be sure to use the filename "feedback.html" since you have already used it in chapters 6 (for your navigation menu) and 7 (site map) to link to this form. If you change the name now, all your links will be broken.

    Even if you have not followed my tutorial from chapter 1, it's easiest to just use "feedback.html" as the filename, since I will assume that you have used that name in the rest of this chapter. If you use a different name, you will have to make sure that all the rest of the addresses mentioned here match up, or your form will not work.

    Note that the use of "feedback.html" as the filename does not force you to call your form "Feedback Form". You can call it anything you like, eg, "Contact Form", "Contact Us", "Support", "Feedback", "Help", "Comments", "Drop a Note" or whatever. It's just a filename; it has nothing to do with what you call your form, or how you describe it to your visitors. That is, nothing stops you from naming the file "feedback.html" and calling it a "Support Form" or "Contact Form". As such, I strongly recommend that you just use "feedback.html" for the filename. The procedure in this chapter is already complicated enough without your having to mentally juggle a name that does not match the tutorial's instructions.

    If you choose to ignore my suggestions and change the filename anyway, please remember the recommendations given in How to Create Good Filenames for Your Web Pages and not to use capital letters or spaces.

  7. URL of "Thank You" Page

    Enter "http://www.example.com/thankyou.html" into this field, without the quotes and after replacing "www.example.com" with your site's actual web address. Once again, the same stuff about changing filenames that I mentioned above applies.

  8. URL of Error Page

    Enter "http://www.example.com/error.html" into this field. As usual, don't include the quotes, and use your actual web address in place of my "www.example.com" placeholder. And again, remember what I said above about changing filenames.

  9. Scroll down and read the "Terms of Use: Licence Agreement (Required)" section. If you agree to the conditions, indicate it in the form and click the "Generate script" button.

  10. The Wizard will then create a script and form for your site using the information you supplied. Do NOT close the page that is displayed. Leave it open as you work on the next few steps.

How to Save the Contact Form Script Without Introducing Problems

  1. If you have any file open in Expression Web, close it with "File | Close" from the menu. That is, for every file that is open, click the "File" menu followed by the "Close" item in the drop down menu that appears.

  2. Click "File | New | PHP" from the menu.

  3. A seemingly blank page will appear. Alas, the page isn't really blank, so we will have to fix it.

    Click the "Code" tab at the bottom of the blank page to switch to Expression Web's code view.

  4. You will see the default HTML code that Expression Web inserted into the page. Click "Edit | Select All" from the menu to highlight everything.

  5. Hit the Delete key on your keyboard. This will remove the text.

  6. Switch back to your browser. Click your mouse once in the box located in the "Feedback Form Script" section. This will automatically highlight everything there.

  7. Click your right mouse button while the pointer is hovering over the highlighted area. Click "Copy" in the menu that pops up.

  8. Switch back to Expression Web and click "Edit | Paste" from the menu.

    A whole bunch of seemingly gibberish text will appear on the screen. Do NOT change anything, not even to add blank lines. Although some of the words look like English words, the entire thing is a computer program. Modifying anything may lead to the script failing to work correctly later.

    For those of you concerned that your email address is embedded in this script, and that your visitors might see it, don't worry. As long as your site is on a system with PHP, nothing on this page will be visible at all. In fact, at no time will the script be even sent to your visitors' browsers. This is the case even if your visitors try to access it directly. They'll just end up being supplied your feedback form instead. If you don't believe me, you can test it yourself later when you've successfully installed everything. Instructions for this (as well as explanations why this is the case) are provided in the section on testing below.

  9. Click the "Design" tab at the bottom of the window. You should again see a blank page. Do NOT type anything here. Although it looks blank, it's still the feedback form script you just saw. Anything you type here will break the script.

  10. Click "File | Save As..." from the menu.

  11. Type "feedback.php" (without the quotation marks) into the "Save As" dialog box that appears.

  12. Click the "Save" button.

  13. Immediately click "File | Close" from the menu to close the file before you accidentally alter something.

How to Insert the Contact Form

The contact form proper is simply the user interface that your visitors will interact with. It should be placed on a normal web page, like those that you have created in the previous chapters. As such, the initial few steps will be very familiar to you, since you have repeatedly used them to create the other pages of your site in the last few chapters.

  1. Click "File | New | Create from Dynamic Web Template..." in Expression Web.

  2. Click "index.dwt" or whatever your template file is called.

  3. Click the "Open" button.

  4. Click the "Close" button in the "(1 of 1) files updated" dialog box that appears.

  5. Click "File | Properties" to bring up the Page Properties dialog box.

  6. Change the Title field to whatever you want to call the page. For example, if you want to call the page "Contact Form", type the latter (without the quotes, of course) into the Title field.

  7. Click the "OK" button.

  8. Remove the content in the right column and put "Contact Form" (or "Feedback Form" or "Support" or whatever you like) at the top of the page as a heading.

  9. Switch to your browser and scroll down the page to the section with the heading "HTML Code".

  10. Click once in the box in that section. As before, the contents of the box should be immediately highlighted.

  11. Click your right mouse button and select "Copy" from the menu that appears.

  12. Switch back to Expression Web. Put the text cursor at the spot on the page where you want the form to appear, by clicking your mouse pointer there.

  13. Click the "Code" tab under your page to switch to Expression Web's code view.

  14. Look for your text cursor. (Don't click on the page itself to scroll up or down, or you may accidentally relocate the text cursor. Instead, click the scroll bars on the right side and at the bottom to move the page up and down.)

    If your cursor was previously in an empty paragraph, the text cursor will probably be somewhere in the midst of "<p> </p>" (probably after the "<p>" and before " </p>", and the whole line will be underneath your heading (eg, "<h1>Contact Form</h1>"). However, since your page design is different from mine, don't worry too much if it isn't exactly as I describe here. I'm just stating the most probable scenario, to help you spot that elusive cursor.

  15. If your text cursor is within "<p> </p>", move it to the end of the line, so that it is just after the "</p>" on that line. Otherwise, go to the next step.

  16. Click "Edit | Paste" from the menu. The code you copied earlier from your browser should appear.

  17. Click the "Design" tab at the bottom of the page to return to the Design view.

  18. You should see the form on your page.

    If you find that the fields are too low on the page, with too much space between your title and the form, it means that there is an empty paragraph in-between. Click the empty space above the form fields to put your cursor in the empty paragraph and hit the Backspace key on your keyboard to get rid of it.

How to Customize the Appearance of the Form

If you like, you can customize the appearance of the form so that it fits in with the existing design of your web page. This is OPTIONAL. You don't have to do this if the form already looks fine on the page. The code created by the Feedback Form Wizard is designed to work out-of-the-box without needing any further tinkering. If you don't want to change anything, just skip to the next section.

The form obeys the same CSS rules as the rest of your web page. As such, you can use the techniques taught earlier to change the font, text size, and colours. I will not repeat those steps here, since you can easily return to the earlier chapters if you've forgotten how to do them. Instead I will focus on things you haven't learnt yet, like how to adjust the widths of the various fields in your form and how to change the words appearing on the button at the bottom of the form.

Another thing that you should know is that the widths and heights of the form fields are merely visual gimmicks. They do not affect how much information your visitors can enter. Even if you are parsimonious with space, and create extremely narrow fields, your visitors can still type entire novels into the name, email and comments fields. The web browser will automatically scroll to allow them to insert more text. Nevertheless, it's still useful to know how to adjust the field widths so that you can make the form blend aesthetically with the rest of your page.

How to Change the Width of the Fields

Click the field in question once to select it. For example, if you are changing the Name field, click the box for Name once.

Look at the Tag Properties panel on the left of the Expression Web window (see picture).

Click the "Style" line in that panel once to select it. This will bring up the clickable "..." on the rightmost portion of that line. Click it to invoke the "Modify Style" dialog box.

Click the "Position" line in the left column.

If you want the field to occupy (say) 70% of your right column, enter "70" (without the quotation marks) into the "width" field, then click the drop down box beside it and select "%". Click the "OK" when you are done. Note that if you want your form fields to resize automatically to different browser window sizes, you should use the "%" unit of measure and not "px" (pixels) or any of the other units.

If you find that the field is still too short, or perhaps it's now too long, just redo the above steps and change "70" (or whatever you used before) to another number. You probably shouldn't use too large a number though, since there needs to be space for the words "Name" or "Email" on its left.

How to Adjust the Height of the Comments Field

The procedure for changing the height of the Comments field is similar to that for modifying its width. Bring up the Modify Style dialog box as before (see the above section) and click the "Position" line in the left column.

You should not use "%" as a unit for the height. Instead, use a unit like "em". For example, if you want your comments box to occupy approximately 15 lines of text, enter "15" (without the quotes) into the "height" field, and select "em" from the drop-down box beside it. Then click the "OK" button.

How to Change the Text on the "Send Feedback" Button

To change the words displayed on the button below your form, click it once to select it.

Notice that the "Tag Properties" panel now has a field called "value" with the words "Send Feedback" in the space beside it. Click to put your text cursor into that field, and change it to say whatever you want, then hit the ENTER key. For example, if your form is called "Contact Form" or "Support", you may want the button to read "Send Message" or something like that.

How to Change the Displayed Labels for the Name, Email and Comments Field

There's nothing special about the words "Name", "Email" and "Comments" that come before the various fields on the page. They are just normal text and can be modified the usual way to whatever you want. For example, if your form is called "Technical Support", and you feel that "Comments" is not the appropriate term to use here, feel free to change it to "Message" or something else.

Things You Should NOT Change

As you clicked the various fields to select them, you may have noticed the "id", "name" and "type" fields in the Tag Properties panel. Do not change any of the values in those fields. I know that the "name" field, particularly, says things like "email", "fullname" and "comments", which may awake in the hearts of obsessive compulsive customizers the overwhelming urge to change them, so that they match the labels displayed on the page. However, these are internal values used by the form to interface with the script. If you alter them, things will go awry. In any case, you shouldn't need to change them, since they are not actually visible on your web page.

How to Save the Feedback Form Correctly

When you are done tinkering with the form's appearance, click "File | Save As..." from the menu. In the "Save As" dialog box that appears, type "feedback.html" (without the quotation marks) into the "File name" field and click the "Save" button.

Now click "File | Close" from the menu.

(Optional) If you wish, you may switch back to your web browser and close the tab containing the Feedback Form Wizard's results page. At this point, you have finished integrating the Wizard's output into your site, so you don't need it any more. Your job is still not done, though. You still need to create the "Thank You" and "Error" pages. This will be done next.

How to Create the Thank You and Error Pages

As you have probably already realised, from experimenting with the feedback form demo earlier, the "Thank You" and "Error" pages are just straightforward web pages, much like your home page, site map and "About" page.

The "Thank You" page is displayed after your visitors click the "Send Feedback" button. Its main purpose is to reassure your visitors that their message has indeed been sent. Otherwise they'll think that nothing has happened and click the button again, with the end result that you'll get multiple copies of the same message. Most webmasters also take this opportunity to thank their visitors for their comments.

Create the page the usual way based on your site's template. Remember to replace the Title field in "File | Properties" with something like "Message Sent" or "Thank You" or the like. Then in the main visible portion of your web page, put a message like the following:

Message Sent

Your message has been sent to the webmaster. Thank you for your comments.

Actually, you can say whatever you want. The above is just to give you an idea of what to write. There are no rules as to what you must say.

Save the page with a filename of "thankyou.html" (without the quotes). Do not accept the default name that Expression Web suggests for that file. Like all the filenames mentioned in this chapter, it must match exactly what you supplied to the Feedback Form Wizard, without even any difference in capitalisation (case). Otherwise your visitors will receive an unfriendly "404 File Not Found" error when they click the "Send Feedback" button.

Once you've finished with the "Thank You" page, create the "Error" page from your site's template. This page is displayed when your visitors click the "Send Feedback" button without entering anything into one or more of the form fields. For example, if they leave the "Email address" field blank, they will arrive here instead of the "Thank You" page.

As such, your Error page should have a message telling your visitors to return to the form to complete all the fields before clicking the "Send Feedback" button. For example, you can say something like the following:

Error Sending Message

Please complete all the fields in the form before clicking the "Send Feedback" button. Click the "Back" button in your browser to return to the form to fix the error.

As before, remember to change the Title field in "File | Properties" to something like "Error" or "Error Sending Message". Save the file as "error.html" (without the quotes).

Publishing the Feedback Form, Script, and Support Pages

  1. Save and close all the files in Expression Web.

  2. Although you can click "Site | Publish All Files to [your web host name]" like you did in chapter 8, it may be faster to use "Site | Publish Changed Files to [your web host name]" instead. The first option forces Expression Web to upload all the files, both old and new, to your web host. The second causes it to check if the file already exists on your site, and only upload them if it doesn't.

    In most cases, since you have already done the initial upload of your files, you can probably get away with using "Site | Publish Changed Files [etc]". If you have a lot of files, this may save you time. However, if you suspect that Expression Web thinks that your web server's copy is the same as what you have on your disk, but you know it isn't, you can always force it to re-upload everything with "Site | Publish All Files".

    For now, just click "Site | Publish Changed Files to [your web host name]" from the menu.

    If both "Publish All Files" and "Publish Changed Files" are disabled (greyed out), it probably means that you did not set up Expression Web's site settings in chapter 8. Return to chapter 8 and get that sorted out first.

  3. Note that using this shortcut procedure, where you directly invoke "Publish All Files" or "Publish Changed Files" without first using "Site | Publishing" means that you won't get to see the list of files on your web server on the right hand side, the way you did in chapter 8.

    For the purpose of this chapter, since publishing a feedback form script and its supporting files is often tricky for newcomers, we really do want to make sure that all the files have been transferred correctly.

    As such, invoke "Site | Publishing" now, and click "Connect to the current publishing destination" link.

  4. Look in the right column and make sure you see the following files:

  5. error.html
  6. feedback.html
  7. feedback.php
  8. thankyou.html
  9. You should also see your other website files, like "index.html", "sitemap.html", "style.css" and "tswnavbar.css" in that same directory. If one or more of the above files are not present, you have made a mistake somewhere. Your contact form will not work correctly in such a state. Check your left column to see if you have actually saved the files in the proper location on your computer. If so, publish using "Site | Publish All Files [etc]" this time. On the other hand, if you do not see one or more of those files in either the left or right column of the Site View's Publishing tab, go back and follow my procedure above to create them. Note that you can leave this "Publishing" tab and return to your normal Site View panel by clicking the "Folders" tab at the bottom of the window (see picture).

How to Test the Contact Form

Since a feedback form is more than just a normal web page, there are many additional things you need to test before you can be sure it works as it should.

  1. Check that your navigation menu button links correctly to your form

    Go to the home page of your website. Click the "Contact" button (or "Feedback" or "Support" or whatever you called it) in your navigation menu . You should arrive at the form page. If you get an error message saying 404 File Not Found (or words to that effect), it means that you gave your contact form a different name from that used in your navigation menu button. Either fix the link in your navigation menu so that it points to the actual file you created (see chapter 6 for this), or redo this chapter and give your feedback form page the same filename you used in the menu.

  2. Check that your site map links correctly to your form

    If you have put a link to your contact form in your Site Map, go to the latter and click that link. You should end up at the form again. If you don't, you have a mismatch between URL you used in the Site Map and the one you actually used when you created the file. Fix it so that they both refer to the same address. And make sure that it matches the one you gave to the Wizard too.

  3. Check that you named the Error page correctly

    You are now ready to test the contact form. Click the "Send Feedback" button. Yes, I know you haven't entered anything into any of the fields. That's the whole point.

    Since all the required fields on the page were empty, you should end up at the Error page you created earlier. If so, all is fine. That is the way the form is supposed to work. Go to the next test.

    If you get a File Not Found error, it means that the URL you gave to the Feedback Form Wizard did not match the URL of your Error page. This may mean that you gave your Error page a different filename from that which you specified to the Wizard. Or you may have made a typographical error when you typed the URL of your Error page into the Wizard. Unfortunately, this error probably means that you have to redo this chapter again.

  4. Check that you named the Thank You page correctly

    Return to the contact form. Now complete all the fields there and click the "Send Feedback" button.

    You should end up at the "Thank You" page. If so, go to the next test.

    If you get a File Not Found error, it means you have a URL mismatch. The address you furnished the Wizard did not match the actual address of your Thank You page. Redo this chapter to fix the error. This time, check carefully that the URLs you type into the Wizard are correctly entered with no typos. (Really check, letter for letter.) In addition, use the filenames exactly as I suggested in this chapter; don't even vary the names by putting spaces or capital letters in the names. Those are the causes of many problems with URLs not matching.

  5. Check that you actually receive the mail you sent

    Just because the Thank You page is shown does not mean that your email will arrive safely. As mentioned earlier, the Thank You page merely indicates that the script has handed the message to the specialised email programs running on your web host's computer. It doesn't mean that those programs have delivered your message or anything like that. In fact, you will even get the Thank You page if you made a typing error in your email address and your message goes nowhere because nobody can deliver emails to a non-existent address.

    Different web hosts also deliver email sent from web forms at different rates. On my current web host, emails sent from my web forms appear instantly. Unfortunately, not all web hosts are equally prompt. On one of the web hosts where I have tested the script, messages sent using forms take many hours before arriving. If you are using such a host, I guess you will just have to be patient.

    If you do not get your test message after waiting at least a few hours, see the checklist of things to do when you don't get your email. You may also want to try the obvious step of making sure that you entered your email address correctly into the Wizard.

  6. For the suspicious: how to verify that visitors cannot see your email address from the script code

    Remember that I said earlier that the email address that you saw in the script will not be displayed in your visitors' web browsers even if they specifically put its URL in the address bar? Well, if you didn't believe me then, now is your chance to verify that claim. Actually, even if you believe my statement, please try the following experiment anyway, for your own peace of mind. Don't worry, you won't break anything.

    If your contact form is at "http://www.example.com/feedback.html", the PHP script that you uploaded should be at "http://www.example.com/feedback.php". That is, take the URL of your contact form, and change the part at the end that says ".html" to ".php". Type that new address into a tab (or window) in your browser's address bar and hit the ENTER key.

    You should be magically transported to your contact form. That is, you will not see the program code. In fact, the script code was never at any moment transmitted to your browser.

    Explanation: a web server that has PHP installed distinguishes between normal web pages and PHP scripts. If it sees a normal web page, like your home page, it sends that document to the browser. If it sees a PHP script, it doesn't send anything. Instead, it runs the script, since it knows that PHP scripts are computer programs to be run on the web server itself, not documents to be sent. It's then up to the PHP script to send something to the browser if it wants to. When run in this way, the script created by the Feedback Form Wizard notices that it was accessed directly (instead of through the "Send Feedback" button). Since it's twiddling its thumbs, having no email to send, it simply tells your visitor's browser to go to the form instead. That's why you ended up at your contact form.

    (If you encountered a "404 File Not Found" error instead of the form, you've either typed the wrong URL into the browser, or you supplied the wrong address for the "URL of Feedback Form" field in the Wizard when you first created your script.)

Congratulations and Where to Go From Here

Congratulations! You have not only successfully installed a feedback form on your website (a task considered one of the most difficult among new webmasters), you have also completed the design and creation of your entire website. And it's not some trivial play site, but a multi-page, fully functional website with a professional looking navigation menu, a working contact form and site map.

Before you go and celebrate your latest accomplishment, I would appreciate if you would take the time to tell others about thesitewizard.com by linking to it. Some linking suggestions can be found here, but, frankly, feel free to link to any page you like. For example, if you like my guide on creating a website, go ahead and link directly to that. Please don't forget thesitewizard.com as you move on from here with your newfound skills as a webmaster (and your new site).

There is more to website creation than simply designing its pages. A few of the other things to do are mentioned in the guide on How to Create a Website, but you can also take a look at my Site Map to see the list of other articles that deal with frequently required webmaster tasks.

All the best for your site!

Copyright © 2016-2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-9.shtml" target="_top">How to Create a Contact Form with Expression Web</a>

It will appear on your page as:

How to Create a Contact Form with Expression Web

Copyright © 2016-2017 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 1 January 2017.


Read Entire Ad

How to Create and Manage Multiple Pages on Your Website with Expression Web

Chapter 7: How to Use Dynamic Web Templates (DWT) for a Multi-Page Site


by Christopher Heng, thesitewizard.com

Now that you have completed your home page, it's time to create the rest of your site. To do this, we will take advantage of the facilities provided by Expression Web to simplify the creation and maintenance of multiple pages.

As implied by the previous paragraph, this article assumes that you have done the earlier chapters of the Expression Web tutorial. Complete newcomers to web design should probably start at the beginning, with How to Create Your Own Website.

Goal of This Chapter

By the end of this chapter, you will have created most of the pages of your site. You will also have learnt ("learned" in US English) how to use Expression Web's Dynamic Web Templates to efficiently create and update those pages.

Introduction to Expression Web's Dynamic Web Templates

Up until now, your website has only one page. As such, any time you wanted to change its design, you only had to make it in one file. Things are not so simple when your site grows beyond that single page: for example, what happens if you want the navigation menu to have an additional button? Does it mean that you have to go through every single page to add that button?

This is where Expression Web's Dynamic Web Template (or "DWT" for short) comes in. It is a "template" in the normal English meaning of the word, with some additional features. When you create a new page based on that template, it will take on the appearance of the latter, so that all you need to do is to add the content that is specific to that page. Even better, when you have a change of heart, and want to modify the design, all you need to do is to modify the template. Expression Web will automatically notice that your site's design has changed, and update all the relevant pages with that new design.

How to Create a Dynamic Web Template (DWT)

  1. Open your home page in Expression Web, if it is not already open.

  2. Click "File | Save As..." from the menu.

  3. In the familiar "Save As" dialog box, click the drop-down box for the "Save as type" field and select "Dynamic Web Template (*.dwt)" from the list offered.

  4. The "File name" field will now read "index.dwt". This DWT file will be the template for your entire site. You can either leave its name to "index.dwt" or change it to some other name, but with a ".dwt" extension. For example, if you want to change it to "mydesign", type "mydesign.dwt", without the quotation marks. The name doesn't really matter though, since you are not going to put this file onto your website. It's just an internal file used by Expression Web.

    For the purpose of this tutorial, so that I can concisely refer to the file, I will assume that you left the name at "index.dwt".

  5. Click the "Save" button.

  6. Look at the tabs just above your page. Instead of the usual "Site View" and "index.html" tabs, you should now see "Site View" and "index.dwt", with the latter being the current tab (see picture below). Your "index.html" is not gone; it's still on the hard disk, but you are now working on your template file.

    Bear this in mind as you work from now on. That is, be conscious of which file you are actually working on. When you want to change the design of your entire site, you need to modify the DWT file. When you want to add content to an individual page, it needs to be done on the HTML page itself.

  7. By default, Expression Web assumes that every part of the page in a template is part of the design. This is of course not correct. You only want the basic two column layout, the navigation menu and the top horizontal strip containing your logo to be standard across all your pages. The bulk of the right column (where your content lives) will probably vary from page to page (unless you really want every page to be an identical copy of your home page).

    In order for Expression Web to know which region of your page is part of the site's design, and which portion contains unique content, you need to specifically indicate it in your template. Otherwise, the editor, being unable to read your mind, will default to treating everything as the invariant part of the design.

    Essentially, what you will be doing now is setting up what Expression Web calls "editable regions". These are the sections of your page that will have different content on different pages of your site. You can have multiple editable regions on each page, and they can be separated by portions that is part of the fixed design, or they can be contiguous with other editable regions.

  8. To mark a region of your web page as editable, first drag your mouse over that section to select it.

    Note that if you want the entire content column to be editable, that is, if it is to be completely different on every page (as is quite likely), it may be simpler to select the entire column instead of individually highlighting each paragraph, one at a time. To do this, click to put your text cursor somewhere in the right column. Then look at the series of tabs just underneath the "Site View" and "index.dwt" tabs. Click the "div#tswcontproper" tab (see picture below). The entire right column should now be selected.

    Some of you may be wondering what the difference between div#tswcontproper (used above) and div#tswcontent (used in chapter 3 to change the background colour) is. Although both refer to the right column, div#tswcontproper only holds the content in the right column, while div#tswcontent holds both div#tswcontproper and a narrow border around the latter. It provides a sort of margin, an area of blank space, so that your words don't go right up to the edge of the screen, making things difficult to read.

  9. Click "Format | Dynamic Web Templates | Manage Editable Regions..." from the menu.

  10. A dialog box with the title "Editable Regions" will appear. You will be required to give this region a name. Presumably, this name is meant to jog your memory in the future so that you know what the region is supposed to contain. The name can be anything you like. For example, if you have selected the entire right column, type into the "Region name" field the words "Page content" or "Content" or "Page-specific stuff" or whatever you want. (Yes, you can use spaces in the name.) This name will be displayed when you edit the page, but will not be shown to a visitor when he/she sees your site in a browser.

    Having said that, the names of your template file (ie, "index.dwt") and all editable regions will also be embedded into your web page. It will just be invisible to your visitors when browsing your site normally. However, if they take the trouble to use their browser's "View Source" facility, they can see the names you have chosen. In other words, don't put secret things (like your bank password) as the names of your editable regions. Things like "Content", "Product Description" or "Price" are fine. It should be obvious from your page that it's the "content", "product description" or "price" that they're reading anyway, otherwise you have bigger problems than dreaming up these names.

    To summarize, type in some word or words into that field that describe the section. Or, if naming things gives you a massive headache, just type in "region 1", "region 2", "region 3", etc.

  11. After you type in the name, the "Add" button will be enabled. Click it. The name will be added to the list of names in the box below. If this is the first time you're adding a name, this will result in two names being in the list: the one you just added and "doctitle".

  12. Click the "Close" button to dismiss the dialog box.

  13. Notice that the section that you previously selected will now be marked with the name you entered.

  14. Repeat the process for the other parts of the page that should be changeable. For example, if you have placed a copyright notice in the footer, you may want to make the year portion an editable region, since it's possible that you will create new pages in future years too. Yes, you can select a single word and add it as an editable region if you like.

  15. You don't need to make your logo (in the masthead) and the navigation menu (in the left column) editable regions. These are after all supposed to be part of the design that is the same across your site. Not making a part of the page an editable region has the following effect:

    1. That portion of the page cannot be changed on the individual pages derived from this template. It will be the same on every page. That's what you want, since it is supposed to be part of the design.

    2. If you want to change those sections, you will need to change it in the DWT file itself.

    3. Whenever you change these non-editable regions in your template, Expression Web will automatically update all the pages derived from it with the new design.

  16. When you have finished adding editable regions to your page, click "File | Save".

How to Associate Your Home Page with the Template

You now have a template from which you can derive new pages. However, before we do this, we have to deal with your home page. Remember that the latter was manually created by you, independent of any template. As such, Expression Web does not view that page as having been derived from your new DWT file. If we don't do something about this, in the future, when you change your site's design, the editor will not automatically update the home page, since as far as it is concerned, it is not connected with the template at all.

The simplest way to associate the home page with the template, is to replace your old "index.html" file with a new one that is made from the template. This doesn't require much work, since the template is based on your home page, and when you created it, you didn't make any change to its appearance or content. All you did was to mark certain sections as editable regions. Any page made from it will therefore look exactly like your home page by default. This similarity, however, is only skin deep. Under the hood, it has invisible markers that tell Expression Web that it was made from your template, which is what we want.

  1. Close the template with "File | Close". This avoids confusion later where you might accidentally end up changing the wrong file, since both your template and home page look identical.

  2. Click "File | New | Create from Dynamic Web Template...".

  3. Click your template file (eg, "index.dwt") in the "Attach Dynamic Web Template" dialog box that appears.

  4. Click the "Open" button to accept your choice.

  5. A new page that looks exactly like your template and old home page will appear, along with a dialog box that says "(1 of 1) files updated." Click the "Close" button in that dialog box.

  6. Without making any changes to the page, immediately click "File | Save As..." from the menu.

  7. In the "Save As" dialog box that appears, click your home page (ie, "index.html") to select it. Yes, as mentioned above, you are overwriting your existing home page.

  8. Click the "Save" button.

  9. Click "Yes" in the "Confirm Save As" dialog box to allow Expression Web to replace your old index.html with the new one.

  10. Since this is the same page that you have already completed in chapter 6, there is nothing more to do here. Just click "File | Close".

That's it. As of now, whenever you change the non-editable sections of your template file, Expression Web will automatically update your home page as well.

How to Create Additional Web Pages from the Template

The process of creating the other pages of your website is similar to that of recreating your home page, except that there are a few extra steps to take.

We will start with the site map.

How to Create a Site Map

A site map is essentially a comprehensive index of all the pages on your website. You can see an example of it by looking at thesitewizard.com's Site Map. As you can see, the entire page consists of links pointing to all the articles on my site. It is the web equivalent of an exhaustive table of contents that you find in a physical book. Visitors looking for something, but don't know how to get to it, can consult this map. In other words, it serves to improve your your website's usability. Another benefit is that it helps search engines discover all the pages on your site.

Incidentally, don't be distracted by the 3 columns that I used in my site map. Since I had hundreds of pages to list, I put it into multiple columns to make the page appear shorter. (It seemed a good idea at the time.)

I realise that you don't have many pages at this point to list. However, you should still create this, since you will eventually have more. If you don't do it now, when the job is easy, and put it off till you have hundreds of pages, you'll decide at that time that it's too hard to do. If you create the map at the very beginning, you can simply add a new link to it every time you add a page, making it a trivial and doable task.

  1. Click "File | New | Create from Dynamic Web Template...".

  2. Select your template file and click "Open".

  3. Click the "Close" button to get rid of the pointless dialog box telling you "(1 of 1) files updated".

  4. Click "File | Properties" from the menu. The "Page Properties" dialog box that you first met in chapter 1 will appear.

  5. Change the "Title" field to say either "Site Map", "Site Map (Example Co)" or "Example Co's Site Map" (of course replacing "Example Co" with the name of your site). Although no one will stop you from saying whatever you want, it's best to have the words "Site Map" somewhere in the title field here, since, by convention, that is the term used for the kind of page you are about to design.

  6. Click the "OK" button.

  7. Now replace the content of the page. Since you made the content into an editable region, Expression Web will let you modify it without issue.

    Start by putting a heading of "Site Map" somewhere at the top of the page, replacing whatever heading you had previously.

    Then create a link to each page of your site on a separate line. Since you don't have many pages at this time, just create 2 or 3 links. Start by putting a link to the Home page on one line. Then put one to the Contact (or Support or Feedback) Form on another. The link to the Contact form should point to either "feedback.html" (if you are using relative URLs) or "http://www.example.com/feedback.html" (if you are using absolute URLs; remember to replace "example.com" with your own domain), otherwise when you actually create your feedback form in the last chapter, your site map will not link to it correctly. If you want an About Us page, create a link for that too (eg, with "about.html" for the filename portion).

    Note that unlike your navigation menu, the link to the home page does not have to be at the top. In fact, you can arrange your links in any order you want, eg, alphabetically or grouped by topics or whatever.

    Since hitting the ENTER key after each line creates a new paragraph, leaving far too much space between each link, you will want to use a different method for moving each link to a new line. One way is to use Shift+ENTER on the keyboard after each line, that is, hold down the Shift key while hitting ENTER. Whatever you type next will go onto a new line in the same paragraph.

  8. When you have finished populating the page with links, click "File | Save As..." and type "sitemap.html" into the "File name" field. Remember that this is the name you used in your navigation menu (see chapter 6), so if you enter something different here, your navigation menu button will lead nowhere.

  9. Click the "Save" button.

You should return here to add a new link each time you create another page. You will probably not appreciate the site map very much since, as the webmaster, you are already intimately familiar with your website. But your visitors will find it helpful, especially when your site grows to have many pages.

Creating the About Us Page

The "About Us" page is used by webmasters to tell their visitors a bit about the company or people behind the site. If you are running a business, selling either products or services, you probably should create one. The page is optional for people running personal or hobby websites. Whatever your situation may be, remember that the things you write here can be read by anyone, from lunatics and criminals living in your neighbourhood to your future employers, so be circumspect as to what you reveal.

If you don't want to have an "About Us" page, just skip to the next section.

  1. Click "File | New | Create from Dynamic Web Template...".

  2. Select your template file and click "Open".

  3. Click the "Close" button to dismiss the message telling you "(1 of 1) files updated".

  4. Click "File | Properties" to get the "Page Properties" dialog box and change the "Title" field to "About Us (Example Co)", "About Example Co", "About Us", "About Me" or words to that effect.

  5. Modify the content in the editable regions to say the things you want to say. If you are adding photos to this page, remember that you have to copy them into the images folder as you did in chapter 2.

  6. Save the file as "about.html" or whatever name you used earlier in your Site Map and navigation menu.

Create the Other Pages of the Site

Now that you're familiar with creating new pages from the template, having already done it 2 or 3 times, you should proceed to create the rest of your site. Remember to set the title field of each page you create. In addition, you may also want to read my article on how to create good filenames for your web pages to avoid long term problems.

Note: do not create the contact form yourself. I will deal with that at length in chapter 9. Forms are a bit more complicated than the usual web page.

If the page you are creating is an important one, consider putting a button in your navigation menu pointing to it. As mentioned before, whether a page is important or not depends on the purpose of your site. However, since you probably didn't put the navigation menu in an editable region of your web page (for good reason), you will need to modify the template itself to insert the button. This is the subject of the next section.

How to Modify the Template

If you are changing your website's design in some way, whether to accommodate a new button on the navigation menu or to alter its colour scheme or some other thing, you will need to make your changes in the template itself.

  1. Save and close all open files in Expression Web.

  2. Open your template file by doubleclicking the "index.dwt" line in Expression Web's Site View pane.

  3. Make your changes to the non-editable regions.

  4. Click "File | Save" from the menu.

  5. You will get a dialog box saying "There are [number] files attached to index.dwt. Would you like to update them now?", where [number] is some numeral depending on how many files you have created based on the template.

    Click "Yes".

  6. Expression Web will then proceed to change all the files derived from the template. When it is done, it will report on the number of files that it has modified. If you like, you can click the "Show Log" checkbox to see the list of files affected.

    Click the "Close" button when you are done with the report.

  7. Click "File | Close" to close the template.

  8. If you open one or more of your other pages, you will see that the changes you made to the template have indeed percolated to all the dependant files.

Next Chapter

In the next chapter, you will transfer your website onto the Internet. (Don't worry. I know that you still haven't created your contact form. The reason for doing things in this order will be explained in the next chapter.)

I am in the process of writing the next chapter at the moment. If you want to be informed when the article is ready, please subscribe to the news feed (RSS feed). It's free and you don't have to give me your email address or anything like that. See this article if you don't already know how to do this. Alternatively, you can also check my home page from time to time. I announce all new articles in the What's New column when they are published.

Copyright © 2016 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-7.shtml" target="_top">How to Create and Manage Multiple Pages on Your Website with Expression Web</a>

It will appear on your page as:

How to Create and Manage Multiple Pages on Your Website with Expression Web

Copyright © 2016 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 15 December 2016.


Read Entire Ad

How to Change the Background of a Website with Expression Web

Chapter 4: Changing the Background Colour and Adding a Background Picture


by Christopher Heng, thesitewizard.com

Unless you like the default colour ("color" in US English) scheme of white, chances are that you will want to change the background colour of one or more portions of your web page. Alternatively, you may want to use a picture as a backdrop. This is the subject of the current chapter.

Goal of This Chapter

By the end of this chapter, you will have either changed the background colour of one or more sections of your web page, or added one or more pictures to form the backdrop, or both. You will also find out more about identifiers in CSS.

As before, I will assume that you know the material covered in the previous chapters of the Expression Web tutorial. If you have arrived at this chapter from outside thesitewizard.com, and are a new webmaster, you may want to start with my guide on how to create a website.

How to Change the Background Colour

  1. Open your web page in Expression Web, if it is not already open.

  2. Click to put your text cursor somewhere on your web page. It doesn't matter where. All that matters is that there is a text cursor on the page.

  3. Look at the "Manage Styles" panel at the bottom left side of Expression Web. If the "Apply Styles" tab of the panel is currently selected, click the "Manage Styles" tab to activate it.

    You should see the following names in that panel (probably below "body" and "img", and not necessarily in that order, or consecutively). Each of these names are labels for different sections of your page. (You may have to scroll down the panel to see all of them.)

    div#tswsidecol — refers to the side (or left) column
    div#tswcontent — refers to the content (or right) column
    div#tswfooter — refers to the footer
    div#tswheader — refers to the masthead or header section
    div#tswcontainer — contains the header, footer, left and right columns (more on this later)

    Unlike the CSS classes which you met in chapter 3, these labels do not start with the full stop (".") nor can you label multiple parts of your page with them. Instead, they start with a hash ("#"), and are called ids. (Ignore the "div" prefix to the "#" for now.)

    Apart from the difference in its technical name, that is "id" instead of "class", and the fact that they can only be used once on a page, ids behave the same way as classes, and are customized in exactly the same manner. The only reason why ids are used here instead of classes is because they refer to unique sections of your page: that is, on a two column site, there is only one left column, one right column, one header and one footer. In fact, if I really wanted to, I could have made the Layout Wizard use classes instead of ids, but I thought this way was more logical. As I said before, CSS does not compel you to use any specific feature, so the decision of what to do lies completely with the web designer.

    Note that I will often refer to the labels in the "Modify Style" panel as "selectors". Classes and ids (among others) are collectively referred to as "selectors" in technical lingo.

  4. Look for the line that begins "@media". If the small box on its left says "-", click it once so that it becomes "+" (see picture below). The "@media" section shows the styles that only come into effect when your site is viewed on a small screen (like a smartphone), which is why it shows duplicate "div#tswsidecol" and "div#tswcontent" selectors. If we leave it in its expanded state (ie, with the "-" showing), you may accidentally configure the wrong selectors in the following steps.

    (Yes, this step is just a precaution, but I recommend that you do it anyway, since mistakes are easy to make.)

  5. To change the colour of the background of a particular portion of your page, right click its selector in the "Modify Styles" panel and click "Modify Style..." in the menu that appears.

    For example, if you want to change the background colour of the content column, right click "div#tswcontent" and select "Modify Style...". Likewise, if the side column is what you want to modify, right click "div#tswsidecol" and invoke the "Modify Style" dialog box from there. And so on. The list of selectors matching the different parts of your page is mentioned above.

  6. In the "Modify Style" dialog box that appears, make sure that the name in the "Selector" field is the one you want to modify. If not, it probably means you clicked the wrong line, and you should use the "Cancel" button to dismiss the window and try again.

  7. Click the "Background" line in the left column.

  8. Locate the "background-color" field on the right side. By default, it should say "#fff" (which means white), unless you have changed the colour in the Layout Wizard when you generated the page. There should be a rectangle to the right of this field that shows the current background colour. Click this rectangle. (Yes, it's clickable.)

  9. A dialog box with the title "More Colors" will appear. Click the hexagon with the colour you want followed by the "OK" button. If you can't find anything you like there, clicking the "Custom..." button will bring up another dialog box with more choices.

  10. You will be returned to the "Modify Style" dialog box, where your new colour will be shown in the rectangle you previously clicked. Click the "OK" button.

  11. The appropriate section of your page will now sport the new colour.

    This may or may lead to results you like. The page will probably look worse if you have changed the colour of the side column, since the background colour ends abruptly where the text ends, making the left column shorter than the right.

    There is no single method that can solve this for every site. (Actually, there is, but if you use that, your site will only be compatible with the state-of-the-art web browsers and not the older ones that are still used by some people today. And since Expression Web's rendering engine is also old, it probably won't be able display the modern method correctly, leaving you to work on your site blind.)

    Below are some possible solutions. You will have to choose the method that works best for your particular design.

  12. Giving the left and right columns the same colour

    One solution is to make the left and right columns the same colour. That way, the fact that your two columns are actually uneven won't stand out quite so much. This is the method adopted by thesitewizard.com for its pages.

  13. Giving the container the same colour as the side column

    Another method is to change the colour of the "div#tswcontainer" selector to the same colour as the side column. This selector functions a bit like the "body" tag you met in chapter 3. It is a container that holds everything in the header, footer and both columns. Setting it to the same colour as your side column causes everything behind that column to have that colour, hiding the fact that your left column is actually quite short.

    A side effect of doing this is that if your header contains a logo that is narrower than the width of the browser window, the background to that header will remain white (the default colour set by the Layout Wizard). If this leads to the page appearing ugly, you may want to change the background colour of "div#tswheader" as well.

    In addition, if you change the "div#tswcontainer" colour, you will notice that there is a white border around your page. To change that border to the same colour as the rest of the background, modify the colour of the "body" selector too.

    You can see an example of these changes on the Two Column with Header and Footer demo page, although it will not look exactly like your page since I did not put an actual logo on the page, but used a white background with black words in the masthead to mimic it. Note that the demo page was not specifically created for this Expression Web tutorial, but it nonetheless shows the result of making the background of the container and body the same colour as your left column.

  14. Giving the container the same colour as the content column

    If your content column is shorter than your side column, rather than the other way around, you may prefer to give "div#tswcontainer" the same colour as "div#tswcontent" instead. This works the same way as the option above: masking the shorter column by making the background behind it the same colour.

  15. Save your work with "File | Save all". You definitely need to use "Save all" instead of "Save" because changing the background colours of your page modifies the "style.css" file.

How to Set a Background Image

It's also possible to put a picture as the backdrop to your words.

  1. Copy the picture to the "images" folder the way you did your logo and foreground pictures. See chapter 2 if you have forgotten how to do this.

  2. Follow the same procedure above to get the "Modify Style" dialog box for the appropriate section of your page. For example, if you want to set a background picture for your right column, right click the "div#tswcontent" line in the "Modify Styles" panel and select "Modify Style...".

  3. Click the "Background" line in the left column.

  4. Click the "Browse..." button for the "background-image" field.

  5. This opens the "Picture" dialog box. Doubleclick the "images" folder to open it, select the relevant picture, and click "OK".

  6. Decide how you want the picture to appear if it is smaller than the space available. This is done with the "background-repeat" field. By default, if you don't set anything here, and the picture is smaller, the web browser will tile your picture both horizontally and vertically throughout that section so that it covers the entire surface. If this is not desirable, click the drop down arrow for that field and select "no-repeat" to get the picture to appear only once, "repeat-x" to get the picture to only tile horizontally, or "repeat-y" to get it to tile vertically.

  7. If you chose "no-repeat", you can specify the position of the picture using the "(x) background-position" (for the x-axis) and "(y) background-position" (for the y-axis). Either choose "center", "left" or "right" from the drop down box or enter a number. In the latter case, 0% indicates that the image is to be flushed to the left for the horizontal position (x-axis) or aligned at the top for the vertical position (y-axis), and 100% means to flush right (x-axis) or to the bottom (y-axis). Numbers between these two values will cause the image to be positioned proportionately at a spot between the two extremes.

  8. The "background-attachment" field determines what happens to the picture when your visitor scrolls the page. If nothing is selected, it will be as though you chose "scroll", where the picture moves along with your foreground words. The alternative is "fixed" where the image remains at its specified location in the window even when the page is scrolled. Note that you won't be able to see the effect of selecting "fixed" in Expression Web. You can only see it in a real web browser.

  9. Type the word "contain" (without the quotation marks) into the "(x) background-size" field. This will cause the web browser to scale the image so that it can fit into the width of the column should the picture ever be larger than the column itself (as it might be on a smartphone).

  10. When you're done, click "OK". The picture you inserted should appear on your page.

  11. Save your work with "File | Save All".

Testing in a Web Browser

As always, check your work in a web browser using "File | Preview in Browser". For this chapter, you will want to make sure that your background (either colour or picture or both) does not hinder your visitor's ability to read your page. Resize your window to mobile phone sizes and check your page there too.

Next Chapter

In the next chapter, you will learn how to make words and pictures into clickable links.

Copyright © 2016 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-4.shtml" target="_top">How to Change the Background of a Website with Expression Web</a>

It will appear on your page as:

How to Change the Background of a Website with Expression Web

Copyright © 2016 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 29 November 2016.


Read Entire Ad

How to Make Pictures and Text into Clickable Links with Expression Web

Chapter 5: How to Insert Hyperlinks into Your Website


by Christopher Heng, thesitewizard.com

Hyperlinks, or "links" for short, are one of the characteristic features of a website. You use them to link to pages or files on your own site, as well as to other websites on the Internet. They are probably the reason why the "World Wide Web" is so-named, since the sites on the Internet directly or indirectly connect to each other like the threads in a spider's web.

Goal of This Chapter

By the end of this chapter, you will have added links to your site. You will also have made your site logo into a link that points to your home page, and learnt ("learned" in US English) more about URLs.

If you have arrived at this chapter from outside thesitewizard.com, and are new to Expression Web, you may want to start with the first chapter, since I will assume you know the things that were covered earlier. Those who are first-timers at building websites should probably go to the very beginning, with my article on How to Create a Website. There's more to making a website than designing a page.

The Structure of a URL

Since you're a webmaster, and no longer just a casual user of the Internet, you will need to have a slightly deeper understanding of web addresses if you are to avoid simple mistakes when creating your own links.

Let's take the address of this article that you're reading, https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-5.shtml, as an example. The complete address, as given here, is known as a "URL", short for "Uniform Resource Locator".

It's possible to look at the URL as comprising 3 parts.

The "http://" or "https://" portion contains technical information that tells a web browser how your web page is to be retrieved. A web browser, seeing this string of letters, knows that it is to use a predetermined series of steps to get the page. This sequence of steps is known in technical lingo as a "protocol", and the specific protocol used to get a typical web page is called HTTP (where "HTTP" stands for "Hypertext Transfer Protocol") for "http://" addresses, and HTTPS (where the extra "S" is probably meant to suggest "secure") for "https://" URLs. There are other protocols in use on the Internet as well, and you will encounter one of them in a later chapter when you transfer your website from your computer to the Internet.

The next part of the URL, the "www.thesitewizard.com" portion, tells the browser which website it is to get the file from. For the purpose of this article, so as not to confuse you any further, I'll just loosely refer to it as the domain name portion.

The last bit of the address is the actual location of the file on your website. In this case, "/expression-web/expression-web-4-tutorial-5.shtml" tells the browser that the file in question is called "expression-web-4-tutorial-5.shtml", and it is located in the "/expression-web/" directory (ie, folder).

Relative vs Absolute URLs

URLs occuring in links on your website can be specified in 2 ways.

The first way is to state the entire address, such as "https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-5.shtml". This full address, containing the protocol, domain name and location of the file, is known as an absolute URL. Such an address gives the web browser, from the very outset, all the information it needs to locate and retrieve the file.

The second way is to use something known as a relative URL. For example, if I were to put a link on this page that simply says "index.shtml" and nothing else, I'm using a relative URL. Notice the missing protocol and domain name. Before a web browser can display that address, it has to construct an absolute URL from it. It does this by taking the following steps:

  1. It looks at the address of the page containing the link, which in this case is "https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-5.shtml".

  2. It then strips away the filename of the current page, leaving "https://www.thesitewizard.com/expression-web/".

  3. Next, it appends the relative URL given in my link, "index.shtml", resulting in an absolute address of "https://www.thesitewizard.com/expression-web/index.shtml".

As you can see, the shorter form is called a "relative URL" because the address is relative to the page doing the linking. In view of this, relative URLs can only be used to link to pages within your own website, since browsers will always assume that a relative URL uses the same protocol and domain as the linking page.

Expression Web allows you to use either a relative or an absolute URL when creating links pointing to pages within your site. For such links, it's up to you which you want to use. Links to other websites will of course have to be specified in full.

How to Make a Text Link

Do the following to make any piece of text into a clickable link.

  1. Open your page in Expression Web.

  2. Select the word or words that you want to make into a link. That is, drag your mouse over those words so that they are highlighted.

  3. Click "Insert | Hyperlink..." from the menu. A dialog box with the title "Insert Hyperlink" will appear.

  4. By default, "Existing File or Web Page" will be highlighted in the left column.

    If you want to use an absolute URL, just type the full web address into the "Address" field. For example, type "https://www.thesitewizard.com" (without the quotation marks) if you are linking to thesitewizard.com.

    In the future (starting from chapter 7), if you are linking to another page on your website, and the page already exists, you can also click to select the page you are linking to from the list of files displayed. This is of course not possible now, since at this point, you are still working on your first page. In any case, if you do this, Expression Web will create a relative link, that is, a link that uses a relative URL.

    If you want to link to a page that you have not yet created, click "Create New Document" in the left column, then type the filename of that page into the "Name of new document" field. Click the "Edit the new document later" radio button as well; we will create the other pages of your site only in chapter 7. Note that if you are intending to insert links to future pages, I recommend that you read my tutorial on creating future-proof, robust filenames for websites before you decide on the name of that new page. In addition, remember give the page a file extension of ".html".

  5. When you are done, click the "OK" button. The words on your page should now be underlined, and be in blue.

How to Make a Picture Into a Clickable Link

The procedure for making pictures into links that point to other pages or files is not much different. The only difference is, instead of highlighting words, click your picture once to select it. Then proceed to use "Insert | Hyperlink..." as before.

Do this now: I recommend that you use the above method to make your site logo into a link pointing to your home page. If you were to hover your mouse pointer over thesitewizard.com's logo at the top left hand corner of this page, you will notice that the logo is actually a clickable link that takes you to my home page. This is true not only of thesitewizard.com, but also of most (if not all) websites on the Internet, so much so that Internet-savvy users automatically expect to be able to go to the home page of any site by clicking its logo. Since you want your website to be as user-friendly as possible, it's a good idea to implement this on your site as well. You can use either a relative or absolute URL. For reasons alluded to elsewhere, I personally prefer to use an absolute URL to point to the home page, so that those links give an unadorned domain name, that is, a plain "https://www.thesitewizard.com/" without any filename at the end.

Linking to Other Things

Although we have talked only about linking to other web pages, links can point to anything you like.

For example, you can also link directly to another picture. Let's say you have a small thumbnail picture on your current page, and you want your visitors to be able to see a bigger, higher resolution version when they click it. One way to do this is to make the thumbnail into a link pointing to the bigger image. You will of course have to copy the both pictures into your "images" folder. (See chapter 2 if you have forgotten how to do this.)

Save and Preview

Save your work and preview the page in a web brower. Move your mouse so that it hovers over the links you made, and check the URLs that they point to by looking at your web browser's status bar.

If you have used a relative URL in your link, your browser's status bar will show something like "file:///C:/Users/Christopher Heng/Documents/My Web Sites/thesitewizard/some-file-or-other.html" instead of a link like "http://www.example.com/some-file-or-other.html". Don't worry. As I said before, relative URLs are resolved by browsers based on the current page's location. Since the home page is on your computer at the moment, and not on the Internet, the link will point to another file on that machine. It is, after all, a relative URL. Once your page is online, browsers will see the link as pointing to another file on your domain.

Absolute links (links that use absolute URLs) should display as-is. So if you link to (say) "https://www.thesitewizard.com/", the link should show up correctly wherever your page may be.

Next Chapter

In the next chapter, we shall make use of the knowledge you acquired here to add a navigation menu to your website's left column.

I am in the process of writing the next chapter at the moment. If you want to be informed when the article is ready, please subscribe to the news feed (RSS feed). It's free and you don't have to give me your email address or anything like that. See this article if you don't already know how to do this. Alternatively, you can also check my home page from time to time. I announce all new articles in the What's New column when they are published.

Copyright © 2016 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-5.shtml" target="_top">How to Make Pictures and Text into Clickable Links with Expression Web</a>

It will appear on your page as:

How to Make Pictures and Text into Clickable Links with Expression Web

Copyright © 2016 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 29 November 2016.


Read Entire Ad

Expression Web Tutorial: How to Design a Website with Microsoft Expression Web

Chapter 1: How to Create a Mobile Friendly Two Column Web Page


by Christopher Heng, thesitewizard.com

Expression Web is the latest of Microsoft's brief foray into the world of WYSIWYG ("what you see is what you get") web editors, succeeding its obsolete FrontPage software. Although it's now available free of charge, it was formerly sold by its developer, and thus sports the spit and polish and extra features that are usually only found in commercial web editors.

Overall Goals of This Tutorial Series

By the end of this tutorial series, you will have designed and published a fully functional and multi-page website, including a home page, a site map, a feedback form and other pages that you choose to create.

Goal of This Chapter

In this chapter, you will create a two column web page that will serve as your website's home page. The web page will work on both desktop/laptop computers as well as smartphones and tablets.

Prerequisites

  1. Microsoft Expression Web 4

    Download and install Microsoft Expression Web 4 if you have not already done so. Don't panic if the name of the downloaded file says it is a "trial"; it's not. After you install it, you will find that it is the fully featured version that does not expire.

    Note that since the software is no longer supported or updated (which is why it's free now), I'm not sure if Expression Web will work in future versions of Windows. At the time I wrote this, their site says that it works in Windows XP, Windows 7 and 8, and other Expression Web users have said that it works fine on Windows 8.1 as well. It supposedly also works on Windows 10 if you don't change your system display settings to show text at a size larger than 100% (otherwise a part of the software, namely the Design pane, apparently won't work correctly).

  2. A Web Host and a Domain Name

    You will also need to get a domain name and sign up with a web host. A domain name is essentially the address of your website. For example, the domain name of the website you're reading is "thesitewizard.com". A web host is a company that has one or more computers specially configured so that a website placed on it can be viewed on the Internet by anyone connecting to your domain.

    If, at this point, you don't have the above two things, please read the article How to Create a Website for more information on how you can get them.

    If you are a student reading this tutorial as part of a course, you may not need to get a web host or a domain name. Your lecturer or teacher will probably give you details about the web host that you should use. Often, this will not be a commercial web host but some space on your university's (or school's) computer where you are to publish your site. As such, you can ignore this particular requirement, although I still recommend that you read How to Create a Website to get a bird's eye view of the whole web creation process.

How to Set Up Your Website in Expression Web's Site Manager

Before you start designing anything, you should first set up your site in the Site Manager.

  1. Start up Microsoft Expression Web.

    If this is the first time you have run the program, a dialog box with the words "Microsoft Expression Web is not currently your default Web page (HTML) editor. Would you like to make it your default editor?" Click either "Yes" or "No" according to your preference, likewise checking or unchecking the "Always perfrom this check when starting Expression Web". In other words, just do whatever you want here. Your action has no impact on this tutorial. (If you're afraid of changing things, then click "No", which will leave things at their current settings, whatever they may be.)

  2. You will then see a blank web page in the centre of the editor and a number of panels on its left and right. Ignore all these for now.

    Click "Site" on the menu bar, followed by "New Site..." in the drop-down menu that appears.

    From this point onwards, for the sake of brevity, I shall refer to this sequence of clicking menu items as clicking "Site | New Site...". For example, if I were to say, click "File | Save", it means to click "File" on the menu bar, followed by the "Save" item in the menu that drops down. (Note: don't click "File | Save" at this moment. It's just an illustration.)

  3. A dialog box with the title "New" will appear. By default, the word "General" should be selected in the leftmost column. If not, click the "General" line. (If you're not sure, click it anyway.) In the centre column, click the line "Empty Site". The "Description" box on the right will say "Create a new site with nothing in it".

    The "Location" field near the bottom of the dialog box should say something like "C:UsersChristopher HengDocumentsMy Web Sitesmysite". (The exact words will differ depending on which version of Windows you have and your user name, so it will not be identical to what you see on your computer.)

    This is where your website files will be saved (on your own computer). Change the "mysite" portion to your website's domain name. For example, I changed mine to "C:UsersChristopher HengDocumentsMy Web Sitesthesitewizard" since thesitewizard.com is my site's name. Note that you don't actually have to do this if you don't want to, but it's handy in the long run (for your sanity) if you create multiple websites. You don't want to have to spend time, in the future, looking at the name "mysite" and wondering which of your many sites it refers to.

    If you change "mysite" to something else, that name will also appear in the "Add to Managed List" field below.

  4. When you're done, click "OK".

  5. A message will briefly appear saying that the editor is creating the website files. When it is done, the screen will change to show you the files in your website folder. At the moment, it should be empty.

  6. Click "Tools | Page Editor Options...".

  7. A dialog box with the title "Page Editor Options" will appear. You should see a row of tabs at the top of the dialog box. Click the tab with the word "Authoring".

  8. The content in the main portion of the dialog box should change. Look for the words "Add a byte order mark (BOM) when creating or renaming UTF-8 documents with these file extensions" (see picture below).

    Remove the ticks for ".htm", ".html", ".css", ".js", ".txt" and ".xml" in the box directly below those words. The byte order mark is unnecessary for such files, and may cause problems with some software.

  9. Click the "OK" button to accept the changes and dismiss the dialog box.

Introduction to the Home Page

The first page that you will be creating is known as the "Home page". This is the front page of your website. It is what your visitor sees when he/she types your domain name into their browser without any additional filename. For example, you can see the home page of this site by typing "thesiteward.com" into your browser's address bar.

In terms of function, the home page of a website is analogous to both the cover of a magazine and its "Contents" page. Like the cover, it should give your visitors an idea of what your website is all about. And like the "Contents" page, it should provide links to the important pages or sections of your site. It is the means by which you help your users get to the parts of your website where they want to go.

What this means in practice is that if you are running an online shop (ie, you're selling goods and services on your site), you should probably mention your most important products (or even all your products if you only sell a few things) on that page. You should also link to the other pages on your website where your visitors can find out more about those products and place an order.

The same principle also applies if you're creating some other sort of website, such as a personal or hobby site. While you may not have products to sell in such a case, you should nonetheless give your users an idea of what they can find or do on your site, and link to the interior pages where they can do what you want them to do. Otherwise visitors reaching your main page will be at a loss as to how to proceed from there.

How to Create a Two Column Web Page

For the purpose of this tutorial, your home page (and the rest of your site) will have a two column layout. This layout is used by many webmasters because it is both space-efficient and familiar to visitors. It allows you to put less essential (but useful) information in the side column while concentrating your main content in the main column. The familiarity of the format to your visitors means that it is automatically user-friendly since they know how to find their way around the page. You can see an example of this layout in action on thesitewizard.com, indeed on this very page you are reading, where I put the site logo, search engine and main navigation menu in the left column and the article proper on the right.

While Expression Web can generate such a layout from its "File | New | Page..." menu, the page generated is not mobile-friendly. By this, I mean that your web page will not automatically adapt to a modern smartphone's small screen, with the result that your visitors will have to zoom into the different parts of your web page just to be able to read your content.

Since this is not really desirable in a modern age where more and more people surf the Internet using a mobile phone, we will instead use the Two Column Layout Wizard to produce the page we need. Don't worry. It's free.

Generating a Two Column Format

  1. Using your web browser, go to the Layout Wizard. Do not close Expression Web — just leave it running while you surf to that page in your browser.

  2. Scroll down to "Step 1 of 2", and click on the button for "Side column on the left, main content on the right, a header on top, and a footer at the bottom" in the "Choose a Layout" section. If you have trouble finding it, it's the bottom-left entry in that section (see picture below).

    (Nothing, of course, prevents you from choosing whichever layout you like. However, for the purpose of this tutorial, I will assume that you have selected the one I mentioned above. If you choose a different one, you will have to adapt my instructions to your site in the chapters that follow. For complete novices, you may want to just follow my instructions for now, since it will be less confusing for you. You can always go back and redo things when you are more familiar with Expression Web and website designing.)

  3. Click the "Go to Step 2" button.

  4. The wizard will show its "Step 2 of 2" page. Most of the items here can be left at their default values, since you can change things you don't like later in Expression Web itself. However, to align the choices here with that created by Expression Web's default choices, click the down arrow beside the "HTML version to use" box and select "XHTML 1.0 Transitional".

    In reality, this step is probably unnecessary for most people. However, it will make it easier for you if you happen to create some pages directly with Expression Web in the future, and mix and match them with pages generated by this wizard. By selecting "XHTML 1.0 Transitional", both sets of pages will use the exact same version of HTML/XHTML, allowing you to copy and paste code between them without having to modify anything. As I said, it's just to simplify things for you in the future. Note, though, that this tutorial assumes that you have done this step.

  5. Scroll to the section "Terms of Use: Licence Agreement (Required)". Read the condition(s) there, and if you agree, click the checkbox to indicate it.

  6. Click "Generate code".

  7. The Results page will appear. Switch to Expression Web. Do not close the browser window containing the results. We're not done with it yet.

  8. In Expression Web, click "File | New | HTML" from the menu.

  9. A blank page will appear. You should see a series of tabs at the bottom of the blank page saying "Design", "Split" and "Code". Click the "Code" tab.

  10. The editor will now show you the underlying HTML code for that blank page. Click anywhere on that page. (It doesn't matter where. For example, click the blank space between "<body>" and "</body>" if you can't figure out where to click.) You should see a blinking text cursor at (or near) the spot you clicked.

  11. Select everything on that page by typing "Ctrl+A" on your keyboard. By this, I mean that you should hold down the "Ctrl" key on your keyboard, and while that key is still held down, type "a". If you do it correctly, you will find that everything on the page is highlighted. Now hit the delete key on your keyboard.

  12. Everything should be erased and the portion of the screen that used to show the HTML code should now be completely blank.

    Switch back to the browser window (or tab) showing the Layout Wizard's Results page.

  13. Click somewhere in the box under the "HTML Code" section of the Wizard. The code should automatically be highlighted. Right click the section (that is, click your right mouse button while the mouse pointer is hovering over the highlighted text). A menu should appear. Click the "Copy" line in that menu.

  14. Switch back to Expression Web.

    Click "Edit | Paste" from the menu. The HTML code that you copied from the box in the Wizard should now be pasted into the blank space.

  15. Click the "Design" tab near the bottom of Expression Web window. You will see a one column page instead of the expected two columns. That is because we have not completed copying and saving all the required code from the Wizard.

  16. While still in Expression Web, click "File | New | CSS". A new blank page will appear.

  17. Switch back to the Wizard in your browser. Scroll down the page and click somewhere in the box in the "CSS Code" section. The code should be automatically highlighted.

  18. Right click the highlighted text, and select "Copy" from the menu that appears.

  19. Switch to Expression Web and click "Edit | Paste" from the menu. The code you copied should appear in what was previously a blank area.

  20. Click "File | Save As..." from the menu.

  21. A dialog box with the title "Save As" will appear. Type "styles.css" (without the quotation marks) into the "File name" field. Make sure you type it exactly as I stated, with no spaces or capital (uppercase) letters. And remember, it's "styles.css" not "style.css".

  22. Click "Save" at the bottom of the dialog box. When the dialog box disappears, you will see that the tab at the top of your code has changed to say "styles.css".

  23. Click "File | Close" from the menu. You will now be returned to the HTML page you copied earlier.

  24. Click "File | Save As..." from the menu.

  25. Type "index.html" (without the quotation marks, as before) into the "File name" field of the "Save As" dialog box, replacing the default name given there. Make sure you type it as I said, without capital letters or spaces. That is, it's "index.html" and not "Index.html" or "INDEX.HTML" or anything else.

    Then click the "Save" button.

  26. When you do that, you will be returned to your web page. It should now be formatted as two columns with some placeholder text and a heading of "Welcome". Don't worry about the plainness of it all. We will replace the dummy text with your real content and spruce up its appearance over the course of these few chapters.

  27. If you like, you can close the Layout Wizard tab in your browser. You won't need it any more.

The Layout of Your Web Page

Before you do anything else, let me explain some of the common terms that webmasters use to refer to the different sections of your web page. This will make it easier for you to understand me when I refer to those things throughout this tutorial series.

At the top of your page, you should see the words "Placeholder content for your header section [etc]". This section, which spans both the left and right columns, is sometimes referred to as the header section or the masthead. In chapter 2, you will be placing your website's logo here.

Below that are the two columns of your site. The left column is narrower, and functions as the "side column". It is also variously referred to as the "side bar" or "navigation column". You will be placing your navigation menu (like the buttons you see at the side of thesitewizard.com) here in a later chapter.

The right column is where your main content will be placed. It is sometimes referred to as the content or main column. You will be working on this portion of the page in this chapter itself.

At the bottom of the page is another section that spans both columns. This is the footer of the page. Webmasters typically place their copyright notice here. Websites that don't put a navigation menu in the side column also sometimes put a list of links here that function as a navigation menu. You will also be replacing the words in the footer in this chapter.

Note that although the page looks similar (but not identical) to how it will appear in a web browser, with the links underlined in blue, remember that Expression Web is not actually a browser but a web editor. As such, even if you are curious about the things mentioned in the placeholder text, clicking the links there will not take you to the destinations of those links. You'll only be placing your text cursor at those locations. Try it now. (That is, click one of the links.) Don't worry. Nothing bad will happen. In fact, it's a good idea to get familiar with how the editor works even if you think this is very trivial exercise.

Changing the Title of Your Page

Before you start writing your actual content, the first thing you need to do is to set the title.

Click "File | Properties" from the menu.

A dialog box with the title "Page Properties" will appear.

Notice that the "Title" field has the words "Insert web page title here". Replace this with the title that you want for your page. Since this is your home page, it should start with the name of your site. You can also, if you wish, append a brief phrase about what your site is all about after that name. For example, at the time I write this, Amazon.com's home page has its name in its title, followed by "Online shopping" and a brief list of the types of things they sell.

Note that this "title" is not actually displayed in the user-visible portion of your web page. It is, nonetheless, very important that you set it, since it is used by the search engines to list your page in their results. If you don't change it, Google and Bing will list your site as "Insert web page title here". The title is also displayed in the web browser's title bar or tab (depending on which browser you use and how you configure it).

For those who don't know what to write here, just type the name of your website. For example, if your site is called "Example Co", type "Example Co" (without the quotation marks) into the "Title" field, replacing the existing text. Alternatively, you can also put your domain name there.

The other useful field in the dialog box is the "Page description" field. It is optional, but if you like, you can put a brief description of your page there. The text is not displayed on your page, but may be shown by the search engines underneath your page's title in the results.

Ignore the other fields, including the useless Keywords field, and click the "OK" button when you're done.

Writing the Content for Your Home Page

The technical aspects of writing your content is actually easy. In this respect, Expression Web works a lot like Microsoft Word and other word processing software. Whatever you type will appear at the location where your text cursor is, and the Backspace and Delete keys on your keyboard do the expected thing of removing text. You can also move the text cursor around with the arrow keys on your keyboard.

The more demanding task is actually figuring out what to say on your page. I suggest that you start by replacing the word "Welcome" at the top of the page, which at present functions as a sort of heading for the entire page. Change it to the name of your site. For example, if your website is called "Example Co", replace "Welcome" with "Example Co". As implied by the first paragraph of this section, you can replace the word by clicking your mouse pointer somewhere within the word "Welcome", using your arrow key to move the text cursor to the end of the word, and then hitting the Backspace key to delete the letters one by one. Then type in your new heading.

This will be the first appearance of the name of your website in the user-visible portion of your web page. Remember that the Title field that you set earlier only appears in the browser's title bar or tab, so if you don't put the name of your site somewhere on your home page, your website will appear to have no name to your human visitors.

Note that if you plan to have your site name appear in your logo (which you will create and insert into the header section in the next chapter), it's possible to get away with not repeating it here. In this case, either replace "Welcome" with some other word (or words), or just get rid of it.

Once you have settled this user-visible title, move on to replace the text in the rest of the right column. Review what I said earlier about some of the things that should go into a home page if you're not sure how to proceed. Those who are completely stuck can take a look at my example for a fictitious company in the box below. You won't be able to use the words verbatim, since your company is unlikely to be selling the same goods, but it can serve as a framework to get you started on the sort of things you may want on your own page (eg a list of your products).

Example Co.

Example Co. is the planet's leading business selling examples. If you have heard, seen or read an example somewhere, or even just dreamt about one, we probably have it in our stock. Our selection of examples is so extensive that we even have examples of examples. For example, this example that you're reading about this very moment is available in our online shop too.

Featured Products

Expression Web Website: Get your very own example website, carefully created using thesitewizard.com's Expression Web tutorial. As you know, thesitewizard.com's guide takes the new user through all the steps needed to create a fully-functional website. Think of all you can do with your own example website!

Rejected Manuscripts: Are you a budding author, faced with the unrelenting barrage of rejection slips from potential publishers for your magnum opus? Now you can comfort yourself by getting examples of rejected manuscripts from other wannabe authors. As you know, misery loves company.

Don't worry about changing fonts, putting words in bold or italics, changing the text size, or adding pictures for now. These will be dealt with in later chapters. For now, just work on your content. If you are experiencing writer's block, it may be because you're subconsciously trying to come up with the perfect set of words. One possible solution is to just dump your words unceremoniously onto the page, even if they sound utterly mundane. You can always polish it later. In fact, many people find it easier to start with a rough copy and modify it over time than to stare at a blank page, hoping for inspiration to strike, so that they can wax lyrical about their products.

Leave everything in the left column alone. You will come back to it in a later chapter when you have acquired the additional knowledge you need to change it correctly.

How to Make a Sub-Heading in Expression Web

If you want a sub-heading for some of the sections on your page, like the "Featured Products" in my example text above, you'll need to do the following.

Type your sub-heading on a line of its own. (Use the ENTER key on your keyboard to make a new paragraph, and type the words that will become the sub-header on that new line. You may need to hit the ENTER key again after typing the header so that the line stands on its own and is not joined to the next paragraph.) Then select the line that you just typed. In computer jargon, selecting a line means to highlight it. You can do this by dragging your mouse pointer over the words on that line.

With the highlighted text still on the page, click the drop down box that currently has the word "Paragraph" in it. It should be next to the drop down boxes with the words "Arial, Helvetica, sans-serif" and "(Default Size)". You can find these boxes among the line of icons just underneath the menu bar. See the picture below if you can't locate it.

A list of options will appear. Click "Heading 2" from the list.

The words you selected will now probably look bigger and use a bold font.

For those wondering, "Heading 1" is meant to be used for the title of your entire page, while "Heading 2" is for the sub-headers. If you have sub-sections within your main sections, you can use "Heading 3" for those sub-sections. As you may have guessed, if you have sub-sections to those sub-sections, you can use "Heading 4" for those. And so on, until "Heading 6".

Do not use these headings as a way to put your text in bold. Use them only to mark headings. You will learn how to put text in bold and italics, as well as change text size and fonts in chapter 3.

Changing the Footer

Click somewhere in the footer among the words "Placeholder content for the footer [etc]" to place your text cursor there. Delete the dummy text and type instead whatever you want.

As mentioned earlier, many webmasters use this space to put their copyright and other notices. I also put the date I wrote (or updated) the page here. But you are under no obligation to follow this. Write whatever you like.

If you are wondering about how you can copyright your page, see my article Copyright Issues Relevant to Webmaster. You can insert the copyright character, "©", by clicking "Insert | Symbol..." from the menu. In the dialog box that appears, click the "©" symbol followed by the "Insert" button. Then click the "Close" button to get rid of the dialog box.

Save Your Work

Now save your page. You can do this by clicking "File | Save" from the menu. In fact, you should make it a habit of saving your work frequently as you work on your page, so that an unexpected power failure or software crash will not cause you to lose everything you have done so far.

Testing Your Page in Your Browser

Even though you have not actually finished designing your home page, you can and should take a look at your progress so far in a real web browser.

A simple way to do this is to click "File | Preview in Browser" from the menu, and select a browser from the list that appears. If you only have one browser, select that browser. If you have multiple, it is probably a good idea to take a look at your site in all of them. Note that this is not overkill, as some of you may be thinking. As your web page becomes more complex, you may find that different browsers may display it in slightly different ways, either because of bugs in the software, or because of mistakes you make in designing your page that cause it to be interpreted differently by those browsers.

The absence of lines (dotted or otherwise) around your columns on your actual web page is neither a bug in the browser nor a mistake you made. Expression Web added those borders to its workspace so that you can see the outer limits of each column (and paragraph) as you design your site, so that you don't have to work blind. There are no lines on the real page by default, unless you add them.

Don't be disappointed that your page looks plain. That is to be expected. After all, you have only just started, and this chapter's focus was on getting a basic two column layout and putting your content onto the home page. You will get a chance to polish its appearance from the next chapter onwards.

In the meantime, take the opportunity to proofread your page: it's sometimes easier to spot mistakes on a page displayed in a web browser than in a web editor.

If you are curious as to how your site looks on a smartphone, resize the horizontal width of the browser window. Once it drops below 630 pixels (horizontally), your page will appear in a single column.

If you use Firefox, you will need to use "Tools | Web Developer | Responsive Design Mode" from its menu since that browser will not otherwise allow you to resize the window to mobile phone sizes. Select "320x480" in the Responsive Design Mode to see your page as displayed on models of Android phones that have that resolution. To return Firefox back to its normal mode, click "Tools | Web Developer | Responsive Design Mode" again.

Note that this resizing trick will only work in a real web browser. Expression Web's internal rendering (ie, display) engine is slightly dated and does not support some of the modern features which websites use to adapt to mobile screens (namely, the facility known as "media queries" in technical parlance). It doesn't really matter though, since you can always fire up a browser to look at your page.

Next Chapter

In the next chapter, you will begin the process of making your home page look presentable, by adding pictures and a site logo.

Copyright © 2016 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/expression-web/expression-web-4-tutorial-1.shtml" target="_top">Expression Web Tutorial: How to Design a Website with Microsoft Expression Web</a>

It will appear on your page as:

Expression Web Tutorial: How to Design a Website with Microsoft Expression Web

Copyright © 2016 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 16 November 2016.


Read Entire Ad
1 2 3 4 5 6 7 8 »