Philadelphia University

Computer Science Department

Computer Skills - 0761111

Web Design Using Microsoft Expression Web 4

Part 2 – Adding Contents to a Website

Prepared by: Eman Al Naji

3. Adding Contents to a Website

To start adding contents on your website, double-click on the desired web page from "Folder List".

The page will be displayed as below.

3.1. Adding text to a website.

The simplest content, but the most important one though, is text. You use text to add information you need in your website.

You can add text directly to your web page, by clicking on it, and start writing your paragraph.

Note the HTML tag displayed above <p>, indicating that you are inserting a new paragraph. Whenever you press "Enter" button, a new paragraph will be started.

Another way to add a quick text, is by copy and paste. You can copy a text from a word document, PowerPoint presentation, a browser, or any program that displays text, then just Paste it in your web page.

1

After you paste your copied text, this icon will be displayed to provide Paste options, you can choose to keep your source formatting, but in case you will use CSS, as will be described later, remove formatting, will be your best choice. Since, CSS provides your website with customized formatting for all contents of your page, by your own design.

3.2. Adding an Image to your webpage.

Earlier, it was advised to arrange your "Folder List", by adding special folders for the resources that you will use in the website. An "image" folder can be created to store the images you will need.

The first step, is to physically copy the needed images from your PC, to the Local Site Folder images.

Go back to the "Folder List" Panel, and expand the "images" folder. The new added images should be displayed as follows.

If the images are not displayed in the "Folder List", you will need to refresh it. From "View" menu Refresh.

2

The final step now, is only to drag the desired image from "Folder List" panel to your displayed web page. Before displaying the image, a dialogue will be displayed to enter information about the image.

The alternate text, is usually used for two purposes. First, it could contain the key words used by a browser when searching, and if an internet user is searching for a certain key word that you used in this text, your web site will be found in the search results.

The second purpose for this text, is that it is displayed in case of a problem occurred in displaying your image, such as slowness in internet, or pressing "Stop" on your browser before the page is fully downloaded.

Press Ok, and the image will be added to the webpage.

3

You can resize your image to the size your desire.

Another way to insert an image into your webpage, is by selecting "Insert" menu Picture From File

Then select the image you desire from your PC. Press "Save", to save your web site, the following dialogue will appear, to help you save your new image in "images" folder, or any folder in your website.

4

3.3. Adding Hyperlinks to your webpages.

As explained before, Hyperlinks are active links, that does certain action when clicking on it. Hyperlinks can be text, or images, and are used to link your web page with other web pages in your site, with other web sites, or even to download certain files.

3.3.1. Adding new web pages other than the home page

The first step is to other pages to the web site, so that you can link between them. To add a new page, either by right-click on your local site folder in "Folder List" or from "File" menu.

5

In both cases, select "HTML" file. To create a web page with ".html" or ".htm" extensions.

You can name your new page any name you desire. The new page will be added to the "Folder List" as displayed below.

3.3.2. Adding a hyperlink to a web page within your site.

Now, return to the index.html, page and add the following text:

Home | About | Contact us

Now, each part of this text will be a hyperlink to a certain page in the website.

Select the first word "Home", and then from "Insert" menu, select "Hyperlink"

The following dialogue will appear:

6

In the "Text to display" textbox, you can find the same text that you highlighted, and you can change it if you like.

From "Link to:", make sure that you have chosen, the "Existing File or Web Page" option. Your local site folder will be displayed and all the web pages in it. Select the page you want the hyperlink to lead you to. The selected page will be displayed in the "Address" box.

Press OK, and the text format will look this way.

Now, add other hyperlinks on "About" and "Contact us" to link to the other pages.

7

Now, copy this text, and open the other pages and paste it there. Now, you can use the links to navigate between the webpages in your site.

To open any of the other pages, just double-click on it from "Folder List".

Important Note: Check the * next to the page name on the tabs, this means that you have updated these pages, but you haven't saved them yet. Press save, and the stars will disappear.

3.3.3. Adding a hyperlink to another web site.

Add a text to your web page, "Philadelphia University". Select this text, and press Insert Hyperlink. In the "Insert Hyperlink" dialogue, add the URL of the website.

8

3.3.4. Adding a bookmark, and a hyperlink to it.

Go to the first line in your page, place your cursor there, and then select "Bookmark" from "Insert" menu.

Give a certain name for the book mark, and press OK. This will add a bookmark (label, a pointer) to this position.

Whenever you like, you can press "Insert" "Bookmark" again, the dialogue will appear this way.

9

You can select the bookmark, and press clear to remove it.

Now, go to the end of your web page, and write "Go to top". Select this text, and select Insert hyperlink.

From "Insert Hyperlink" dialogue, press the "Bookmark" button.

Select the bookmark "Top" and press OK.

10

The Address in the "Insert Hyperlink" dialogue will be filled like this:

Indicating that the hyperlink will lead to a bookmark

3.3.5. Adding a hyperlink to an email.

You can also add a hyperlink to a certain email address, so that when the user clicks on the hyperlink, the default email program (ex: Microsoft Outlook) will be opened, and a new message is created, and the destination is the email you specified.

To do so, add a text on "Contact us" page, name it "Email me:".

11

Select this text, and select "Insert Hyperlink" from "Insert" menu.

Click on "E-mail Address" button, and the dialogue will be changed to the following:

In "E-mail address" box, add a full and correct email address, where you want the user to send his/her email.

12

In "Subject" box, you can add the subject that should appear in the message.

Press OK, and then run your page and test the link.

3.3.6. Using Images as Hyperlinks

You can insert a hyperlink as described earlier on images. All you need to do is to select the image, then from "Insert" menu, select "Insert Hyperlink" and do the same steps described.

But, this will cause converting the whole image area to a hyperlink. Sometimes, you need to select several areas in one image, and link each one with different target. These areas are called "Hotspots". To do so, you need first to view the "Pictures" Toolbar.

Select the image, then from "View" menu "Toolbars" "Pictures". The Pictures toolbar will be viewed on the screen.

From this toolbar, you can change some aspects of your image, such as the brightness, the contrast and the rotation. But, what we need here are the icons that create hotspots

(Rectangular Hotspot, Circular Hotspot, Polygonal Hotspot).

To add a hotspot to an image:

1. Click on one of the icons that represent a hotspot. 2. Draw the shape you selected on the area you desire on the image.3. The same "Insert Hyperlink" dialogue will be displayed to allow you add the

link (page, website, bookmark, or any file) to this hotspot.4. You can add different hotspots on your image, so that each one links to a

different target.

3.4. Running your website.

13

Now, you will need to run your website, so that to check the behavior of the hyperlinks, or to check the design of your webpages on the web browser(s).

Make sure that you have saved your website first, then from button in the toolbar, you can select the browser that you want to run your website in it. Or you can select "Preview in Multiple Browsers" and the web page will be opened in all web browsers installed on your PC. This is useful, to check the design of your webpage on different browsers.

3.5. Viewing web pages' code.

Now, all contents added till now, is added in "Design View". Check the bottom of your page, you will find three tabs. (Design, Split and Code).

Press on "Code", to view the HTML code generated during your design.

This code has been generated with every update you did on your webpage. The code is written in HTML language, which is run using the web browsers.

You can select "Split" view, so that you can view both the design and the code at the same time.

14

15