Expression Web 4/Adding pages

Creating pages in Expression Web can be done quickly. However, adding formatting while possible needs to be done with caution. For this tutorial four pages are created (index.html, cats.html, dogs.html, and fish.html ), and hyperlinked. Standard tags are used for formatting, but do not format sentences or paragraphs individually, this is done using style sheets and will be covered later.

In this activity you will create the four pages with some Headings


 * In Expression Web Click on the New Document button, this will create a new blank page in the center panel called Untitled_1.html
 * Type in the following


 * Click on the first line (Pet Home Page) and using the Paragraph drop box choose
 * Use your mouse to highlight Cats, Dogs and Fish.
 * Choose the Bullets button on the tool bar. (Note: if it is not showing you may need to use the drop arrow at the end of the toolbar to show the buttons that are missing)
 * Lets save the page.
 * Click on the Save (disk) button
 * As this is an Untitled page, Expression Web will do a Save As and ask for a file name - change from default.html to index.html (all lowercase).
 * Click on and confirm the title is "Pet Home Page" (change if it is not)
 * Click on
 * Finally, lets view the page in a Web Browser.
 * Click on the Preview in Windows Internet Explorer button.

Understanding the "Magic" of Expression Web
So what has Expression Web really done. In the HTML/XHTML tutorials I covered the three areas used to author web pages,
 * 1) File storage - to save your html web pages
 * 2) Web browser - to view your html web pages
 * 3) Html editor - to create or modify your html pages

As you can see Expression Web contains:
 * a File Manager (Shown in Folder List Panel on the right and on the "Site View" tab)
 * a link to open your page in a web browser (If you use the small drop arrow to the right of the Preview button you can see what your page will look like with different browser sizes or if installed other browsers on your computer), and
 * a "What you see is what you get" (WYSIWYG) editor for an HTML web page.

Let's just explore the HTML


 * Click on the Button at the bottom of the middle panel. What you will see is the HTML Code created by Expression Web

So behind Expression Web is just a plain old HTML page - pretty neat aye!. This is important to understand, as it means a page created in Expression Web can be edited by any other text editor (even Notepad!) or HTML Editor (like DreamWeaver).

So, if you find Expression Web is doing something strange, or you need to add some code (like connecting to a YouTube Video, or adding some JavaScript) you can revert to the Code view.

Lets create the other three pages
 * Click on the New Document Button
 * Another Untitled html page will appear
 * You may need to change back to the Design view
 * Type in the following


 * Click on the first line (Cats) and using the Paragraph drop box choose . Using heading 2 on a page linked from the home page makes it obvious to a user of your web site that you are going deeper into your site. If you link a page from the cats page you could always use a Heading 3 for the title.


 * Save the page.
 * Click on the Save (disk) button
 * As this is an Untitled page, Expression Web will do a Save As and ask for a file name - with luck this should be cats.html as it worked this out for you !! The Page title should be "Cats"
 * Click on

.. now create the two pages for dogs and fish

All going well Expression Web should look something like...



Finally we will get the pages to link up (hyperlink)


 * With index.html selected, double click on cats (this should highlight the word cats)
 * Right click and frm the selection choose Hyperlink (or Use the Hyperlink button on the toolbar - you may need to extend the toolbar as before) click on the cats.html file in the list. In the Address Expression Web should put "cats.html". Click.
 * Have a look at the code behind the page and you will see Expression web has added the hyperlink code


 * Repeat for the dogs and fish.
 * Test that alls working by previewing index.html in your browser.
 * Finally, add a link to the index page to each of the cats, dogs and fish pages.