Philadelphia University
Computer Science Department
Computer Skills - 0761111
Web Design Using Microsoft Expression Web 4
Part 4 – Adding other contents on web pages
Prepared by: Eman Al Naji
7. Adding Horizontal Lines
Sometimes you need to add a "horizontal line" to separate several sections in your web
page. To add such a line, you either add it from "Insert" menu, or from "Toolbox" panel.
Specify a certain location on your web page, by placing the cursor, then insert the
"Horizontal line" at that location.
You can change the settings of any Horizontal line, but right-click on it, and select
"Horizontal Line Properties", or merely double-click on it.
1
From the displayed dialogue, you can change the width and height of the line by pixels.
Or you can change the width by a percentage according to the whole window. You can
also set the alignment of the line according to the window. For example, if you choose
the width 50 Percent of window, and the alignment "center", the horizontal line will
look as following:
From Color list, you can display the color palette and choose the appropriate color of
your line.
8. Inserting an Interactive Button
An interactive button, is a Hyper button or tab that you can add in your page and link it
to another web page in your website. You have many options of button shapes, colors
and fonts that you can choose from.
Usually interactive buttons are added at the top of your page, or at the right or left side.
They are used as menu of options that can be clicked by the user.
To insert an Interactive Button, go to "Insert" menu, and select "Interactive Button".
2
The following dialogue will appear:
From "Button" tab, you can select the shape/style of your button from "Buttons" list,
specify the text you want to display on it and the link you need. (ex: link to another web
page on your web site). Using "Browse" button, the dialogue "Edit Hyperlink" will be
opened, so that you can choose any type of the hyperlinks described earlier.
3
From "Font" tab, you can specify the font name, style and size of the text displayed on
the button. Also, you can set different colors for the button, the original color, hovered
color (appears when you hover over it with the mouse) and the pressed color (appears
when you press on the button). Other settings such as alignment and direction can be
set in this tab.
4
When pressing OK, an image file(s) is created for this button. So, in "Image" tab, you
can set the size of the image file using "Width" and "Height" values. Also, you can
determine wither you want to create separate files for hover and pressed images (in case
you want to use different styles for the button). Finally, you can determine the type of
image file created (JPEG or GIF).
When pressing OK, the interactive button will be displayed on the specified location.
Now, when creating the first interactive button, you can copy and paste any number
you like, so that all button will have the same shape and settings, but take into
consideration that you have to change the button text and link, for each one.
The following image is an example of created interactive buttons:
Now, since these buttons are created as images, when saving the web page, the dialogue
"Save Embedded Files" will be displayed to allow you to choose the location where the
images will be displayed.
5
Note that 9 images are created for the 3 buttons (original, hover and pressed).
Press OK, and you can find the files in the "Folder List".
9. Inserting Videos into a Web Page
To insert a video into your web page, you can either use the "Insert" menu, or the
"Toolbox" panel.
6
You can add videos of several types, as shown in the Media part of both the "Insert"
menu and the "Toolbox" panel.
Let's use the "Windows Media Player" option, which will display the following
dialogue, which will enable you to choose the desired video.
Select the video, and press Open/Insert. The video will be added to the design view of
your web page.
7
Double-click on the video, the properties dialogue will appear to enable updating its
settings.
From "General" tab, you can change the video you already selected from "Browse"
button.
The "Controls Layout" mode, enables you to select what controls (volume
control/stop/pause and play) are displayed.
Check "Auto Start", to force starting the video automatically when you load the web
page.
8
"Play Count" specifies number of times you want your video to be automatically
repeated.
"Mute", when checked, the video will be started with mute voice, but the user can
increase the volume if desired.
You can also, set the default value of the volume, using "Volume" scale.
When saving the web page, the dialogue "Save Embedded File" is displayed to enable
you choose the proper location of the video.
10. Inserting Tables in Web Pages.
Sometimes you need to add data into your web page organized as a table. To insert a
table, use the menu "Table"  "Insert Table".
The following dialogue will appear.
9
From this dialogue you can initialize the table settings, and you can re-show it again
later by right-click on the table, and choose "Table Properties".
First, you have to specify number of rows and columns you want to display in the table.
Now, you can fill the table with the desired data.
While adding the data, you may need extra rows, new rows are created automatically
when you press tab after the last cell you fill.
10
You will note that the sizes of cells are changing while you are entering data, don't
worry about it. At any point, you can change the sizes of cells using the mouse.
From Table Properties, you can change the following properties:
-
Layout  Alignment: Specify the alignment of the page according to the whole
page.
Layout  Specify width: enables you to change the width of the table. Then,
you can specify the width in pixels or percentage according to the page.
Layout  Specify Height: enables you to change the height.
Layout  Cell Padding: increases the spaces from the cell borders and the
contents.
Layout  Cell Spacing: increases the spaces between cell borders and the cells
next to it.
Layout  Table Direction: Changes the direction of table "right-to-left" or
"left-to-right".
Borders  Size and Color: enables you change the outside border of the table
size and color.
Background  Color: Changes the background color of the whole table.
Background  Use background picture: enables you select a picture as the table
background.
Set  Set as default for new tables: enables you to save the settings, so that
whenever a new table is inserted, will have the same settings.
After you have inserted a table, the "Table" menu options are enabled as follows:
From "Insert" sub menu: you can change the layout of the table, by inserting new row(s)
and column(s), in the place you require.
11
From "Delete" sub menu: You can delete the selected table, column(s), row(s) or cell(s).
From "Select" sub menu: You can select a table, column(s), row(s) and cell(s).
From "Modify" sub menu: you can "split" a selected cell, of "Merge" selected cells.
12
Split Cells: Select one cell, then choose "Split Cells" option, in the displayed dialogue,
you can specify number of columns and rows that should result after the splitting.
Merge Cells: Select two or more cells, then choose "Merge Cells", this will merge the
selected cells into one cell.
13
From "Table Properties" sub menu, you can choose the "Table Properties" window, that
was discussed earlier. Or "Cell Properties" window, that enables you to change some
setting for specify cell(s), not the whole table.
14