Mr. Winchester’sCreating Web Content

Using Microsoft Expressions Web 3

(Part 1)

THEN CHANGE IT FROM “GENERAL” TO “FRAMES PAGES” AND CHOOSE THE “HEADER,FOOT AND CONTENTS”

THEN “SPECIFY THE LOCATION OF THE NEW WEBSITE:” –THIS IS WHERE YOU SAVE THE FILES ON YOUR COMPUTER TO LATER BEPUBLISHED/SENT TO THE SERVER(INTERNET). CALL THIS FIRST PAGE “ INDEX”, THEN PRESS “SAVE”.

NOW NOTICE THAT THERE ARE TWO TABS. ONE TAB SHOWS THE CURRENT OPEN PAGE AND THE OTHER SHOWS THE “SITE WEB” TAB. THE CURRENT OPEN PAGE DISPLAYS THE WORD “INDEX” AT THE TOP. THIS IS THE MAIN PAGE OF THE SITE.

The next thing that we need to do is to create a new page for each one of our frames. There are currently four frames.

Select the “New Page” button in the Head portion of the Index page.

In the Header section type “Welcome to My Web Page

Let’s first format the Text. Center Align the text using the Alignment tool.

Next, enlarge the font to the largest size possible using the “increase font size” tool.

Next, Change the font style to any style that you would like.

Change the Font Color using the Font color tool.

Next we will need to save the project. Because our Header frame is a completely different web page we will need to give it a name. Let’s name it “Header”.

Now let’s preview what our page will look like when it is displayed on the internet and viewed with the Internet Explorer. This will launch your page in the browser so you can see exactly how the page will appear.

We will do this often because, “what you see isn’t always what you get”!

To return to Expressions Web close the browser.

Next let’s change the background color of this first frame/page. To do this we will need to place our curser on the frame and right mouse click. Select “Page Properties”.

Select “Formatting”

Select “Background” and choose a color that is contrasts well with your font colors.

Next we can change the “Highlighted” text background color. First Highlight the title. And then select the color from the icon shown below.

Remember to use contrast. You may need to change the individual font colors as you experiment with the different background colors.

Now we will work on the Navigation portion of your site.

Here we will create Action buttons that take you to different pages within your site. To start, select “New Page”.

Once the new page is displayed within the left hand frame we can now begin to create our action buttons.

Select the “Insert” Menu, and choose “Interactive Button”

The button design dialogue box appears now and we can choose the style of button that we would like to create. For this activity we will all use the same button style.

The first button will link us to our “Biography” page. You will need to type the title, Biography here and then select the okay button at the buttom.

Now we will an Interactive Button for Each of our sections using the same method. We will make a new button right under the biography button. To do this we will need to move down one space below the biography button. This is accomplished by holding down the “shift” key on your keyboard and selecting the Enter key at the same time.

Now insert the new Interactive Button using the same method that we used for the Biography button.

We will make a button for “Interests”, “Favorite Sport”, “Family”, “Friends”, “Pets”, “Movies”, “Music”, “Bibliography”.

After you have created all of the buttons select “save” and name the page “Contents”.

Your Site should look like this. Later we will add links to the Interactive buttons.

Let’s change the background color of this frame/page using the same method that we used for our “Header” section. Remember that we right clicked on the page and selected page properties.

Select the Formatting tab. Then Change the background color. Once again, remember to use contrast.

Select the color and then choose “OK”.