-١-

-٢-

Expression Web Lab Exercises Scenario

The exercises in this tutorial will introduce you to Microsoft Expression®

By the end of these exercises, you will have created a simple standards-compliant

Web site on the topic of Egypt & freedom.

In order to create this site, you will learn how to use the tools in Expression Web

to edit Web documents in Design view and to create a site that is ready for

publishing to the Web. In these lab exercises you will become familiar with Web-

based technologies such as cascading style sheets HTML .

Below is a sneak peek of the “Egyptian Revolution” Web site that you will

create with this tutorial.

-٣-

The Microsoft® Expression® Web Workspace

1. Common Toolbar

2. Folder List

3. File Tabs

4. Toolbox

5. Style and Layer Task Panes

6. View Tabs

7. Tag and CSS Property Task Panes

8. Bread Crumb Trail

-٤-

Task 1:-Open the program:- 1) Start

2) All program

3) Expression web

Task 2 :-Create a new Empty web site :- 1) From File menu choose new ,web site.

2) From web site tab select empty web site

3) Press OK .

Task 3 :-Create a new HTML page:- 1) From File menu choose new ,page

2) From page tab select HTML

3) Press OK .

-٥-

Task 4 :- Save a page:- 1) From File menu select save as.

2) Type index.HTML

3) Click save .

Note:- The page is named"index.html" because most web servers will

recognize this file name as the home page.

Task 5:- Change properties of page:- 1) Right click and select Page Properties .

2) From general tab in title "Freedom of Egypt".

3) In page description type "new Egypt" .

4) In keywords "Freedom,Egypt,25th January".

5) Under the formatting tab select the color you want .

6) Press OK .

-٦-

Task 6:-Creating page layout with layers :- A) Create a layer and add an image:-

1) In the tool box choose layer and drag it into the page.

2) From Insert menu select Picture from file .

3) Determent the location of the picture you want and choose it

4) Press insert .

5) In Accessibility properties dialog box write freedom in the Alternate text .

6) In the long description write new Egypt.

7) Press OK .

-٧-

B) Add text to a layer :-

1) In the tool box choose layer and drag it into the page .

2) Write the title "Freedom of Egypt"

3) In the tool box choose layer and drag it into the page

4) Write the paragraph

"Let us all hope that the dark clouds of racial prejudice will soon pass away, and

that in some not too distant tomorrow the radiant... stars of Love And Freedom will shine over our great nation with all their scintillating beauty.”

Task 7:-Preview the page in a browser -From File menu select preview in browser

OR

- Press F12 from key board

-٨-

Task 8:- Creating more page 1. File menu, New and click HTML. A blank page will open. DO NOT add anything to the page. 2. File menu, click Save. 3. File, Save As, File Name: Pictures.html , Then Save.

4. From Insert menu select picture from File .

5.Determent the location of the picture you want and choose it

6. Press Insert .

7. In Accessibility properties dialog box write freedom in the Alternate text . 8. In the long description write new Egypt. 9. Press OK .

-٩-

Task 9:- Creating hyperlink 1. Select the text " Love And Freedom".

2. From "Insert" menu, select "hyperlink"

3. Select the page you want .

4. Press "OK"

-١٠-

Task 10:- Creating Table : 1. From "Table" menu select "Insert table" . 2. Select the number of "Rows" and "Columns" . 3. Determine the size and color of the border . 4. Press "OK"

-١١-

By using Expression Web program

Create a web site containing that :- 1.Two pages the first page by name index. Html and the

second page by name egy.html .

2.Change the background of this pages to " gray " .

3.Insert Layer & Insert picture in the two pages .

4.Insert Layer & Add text .

5.Insert hyper link for picture in " page1 " to link it with " Page

2 ".

6. Insert table include two rows & two columns .

7. Browse your web site by Internet Explorer .

-١٢-

-١٣-

Day : ……………………………… Date : …………………………

Objects :

Open MS Access program .

Subject : * To start Access

• Select : start

• Choose: programs

• Choose : Microsoft Office

• Select: MS Access

* Close the Access program • Click on the Close icon .

• OR click on the Exit from the file menu .

• OR press Alt+F4.

-١٤-

* Open a file • Click on the Open icon .

• OR click on the Open from the File menu .

• OR press Ctrl + O.

H.W : Insert the right icon in the right space :

1. To open a document we click on ……….. icon .

2. To close anew document we click on ……….. icon .

3. To open access program we click on ……….. icon .

The drive or folder that contains the file

you want

Select the file name by clicking

on it

Click on the Open button

-١٥-

Day : ……………………………… Date : …………………………

Objects : Create a new database& save it .

* Create a new database :

• Click on the New icon .

• OR click on the New from the file menu .

• OR press Ctrl + N .

• Blank database

• Create

1

2

3

4 5

-١٦-

* To Save a database :

• Click on the Save icon .

• OR click on the save from the file menu .

• OR press Ctrl + S .

-١٧-

Day : ……………………………… Date : …………………………

Objects :

Create, save and modify table.

* Create and save a table .

• Press new icon .

• Press blank database .

• Double click on the Create table in Design view option • In the Field Name section of the dialog box, enter the name of the first field and data types

.

• We can now save the table by clicking on the Save icon.

• You will see a dialog box in which you can enter your table name.

-١٨-

• Clicking on the OK button may display a further dialog box.

• You will see the table displayed within the Database dialog box.

H.W : Put ( ) or ( ) :

1. The data one type only . ( )

2. We can't delete records . ( )

3. To create table we press new icon . ( )

-١٩-

Day : ……………………………… Date : …………………………

Objects :

* Define a primary key

1. automatically when creating a table

When you create a new table part of the process will automatically assign a primary key to the table

Example

1. We created the following fields.

2. We then save the table, as illustrated.

3. A dialog box is then displayed, offering to create a primary index.

-٢٠-

4. Clicking on the Yes button will create a primary index using an AutoNumber Data Type.

2. Define a primary key (manually after a table has been created)

You can add a primary key to a table that does not already have a primary key set. In the following example we have a table with no primary key.

Click on the View icon, which will display the table in design view.

Press the Primary Key icon is visible within the Design View toolbar.

* Modifying the way a field is indexed

• In the Design View .

-٢١-

H.W : Put ( ) or ( ) :

1. We can't define a primary key automatically when creating a table .

( )

2. The Primary Key icon is visible in the Design View toolbar. ( )

3. The duplicated entries are allowed . ( )

-٢٢-

Day : ……………………………… Date : …………………………

Objects :

Create, save and modify table.

* Create and save a table .

• Press new icon .

• Press blank database .

• Double click on the Create table in Design view option

• In the Field Name section of the dialog box, enter the name of the first field and data types

.

• We can now save the table by clicking on the Save icon.

• You will see a dialog box in which you can enter your table name.

-٢٣-

• Clicking on the OK button may display a further dialog box.

• You will see the table displayed within the Database dialog box.

:W .H :) ( or ) ( Put

4. The data one type only . ( )

5. We can't delete records . ( )

6. To create table we press new icon . ( )

-٢٤-

Day : ……………………………… Date : …………………………

:Objects

Change between view modes in a table, form, report.

Switch between views when using tables, forms or reports

There are two views for tables, forms and reports.

• The Design View:

This view is used by the person that creates a database in the first place

-٢٥-

• The Datasheet View: This is used by the person entering data into a database.

* To switch between Design and Datasheet View

• Click on the View icon on the toolbar.

* Display or hide a toolbar

1. Open View menu

2. Select the Toolbars command

3. Choose the Toolbar you want to display by clicking on it .

:W .H :Complete

1. To display or hide a toolbar we choose ----------------- from view

menu .

2. There are two views for tables, forms and reports.

1. ----------------------------------

2. ----------------------------------

-٢٦-

Day : ……………………………… Date : …………………………

Objects :

Add, modify data in a record.

* Add records to a table.

• Double click on the name of the table that you wish to open.

• We can enter data by using the tab key to jump from field to field.

* Delete records within a table

• Select the entire record row as in the example shown.

• Press the Del key.

• A warning dialog box will be displayed.

• Click on the Yes button to confirm the record deletion.

-٢٧-

* Add data to a record

• Open the table containing the record that you wish to add data to.

• Click within the field you wish to enter your data into.

• Key in your data.

* Delete data within a record

• Open the table containing the records that you wish to modify.

• Delete the data within the record that you wish to remove select and then press the Del key.

* Use the Undo command.

• Click on the Undo icon in the toolbar.

* Navigate through a table :

• Current record.

Record is selected.

Record is being edited.

Last (empty) record.

To move from record to record using the scroll bar and mouse

• To move from record to record: to the next record to the previous record to the last record to the first record

-٢٨-

To delete a table

• Select the table that you wish to delete

• Press the Del key and you will see a warning dialog box.

• Clicking on the Yes button will delete the selected table.

-٢٩-

H.W : Match :

To Navigate through a table :

• Current record.

Record is selected.

Record is being edited.

Last (empty) record.

-٣٠-

Day : ……………………………… Date : …………………………

Objects :

Change field format

* Change field format attributes.

1.Open the table that you wish to modify. 2. Click on the View icon to see the table displayed in design view. 3. Click on the field that you wish to modify the attributes of.

1

2

-٣١-

We can modify :

1. Field Size

2. Number Format

3. Date Format

H.W : Complete :

We can modify :

1. ……………………………….

2. ……………………………….

3. ……………………………….

-٣٢-

Day : ……………………………… Date : …………………………

Objects :

Change table format

Change width of columns in a table.

1. Move the mouse pointer to the line at the right of the field (column heading). It will change to resemble a solid vertical bar intersected by a double-headed arrow.

2. Drag the column border to the size you want.

Move a column within a table

1. Select the column(s) and release the mouse button. 2. Click on the field selector and drag the column(s) to the new location. As you drag the

columns a solid bar between columns indicates the current position of the columns being moved.

-٣٣-

Day : ……………………………… Date : …………………………

Objects :

Create a relationship one-to-one .

* Create a one-to-one relationship between tables

• Click on the Tools menu and select Relationships.

• If the Show Table dialog box is not already displayed click on the Show Table icon on the

Relationships toolbar.

• Select the table you want to add from the Table list. Use the Ctrl key to add more than one

table or the Shift key to add a block.

• Click the Add button.

• Select a second table from the Show Table dialog box.

• Click the Add button. • Click the Close button.

-٣٤-

• To create a relationship link from a field in one table to a field in another table, simply drag

the field from the first table and drop it on top of the field in the second table.

• The Edit Relationships dialog box will be displayed.

• Click on the Create button to create the relationship.

• A line will appear in the Relationships window to represent the link.

-٣٥-

H.W : Put ( ) or ( ) :

1. We can create a relationship between a tables . ( )

2. Use the Shift key to add more than one table. ( )

3. We can select a One table only from the Show Table dialog box. ( )

4. To create Relationships we click on the Tools menu and select Relationships .

( )

-٣٦-

Day : ……………………………… Date : …………………………

Objects :

Create a relationship one-to-many .

* Create a one-to-many relationship between tables

• Click on the Tools menu and select Relationships.

• If the Show Table dialog box is not already displayed click on the Show Table icon on the

Relationships toolbar.

• Select the table you want to add from the Table list. Use the Ctrl key to add more than one

table or the Shift key to add a block.

• Click the Add button. • Select a second table from the Show Table dialog box.

• Click the Add button.

• Click the Close button.

• The Relationships window should now resemble the illustration below.

• In the example we have 2 tables, Customers and Orders. A customer may have placed

many orders; therefore the relationship between the tables is one-to-many. The field used

to associate an order with a customer is the CustomerID field.

-٣٧-

• Drag and drop the CustomerID field from the Customers table to the CustomerID field in

the Orders table.

• The Edit Relationships dialog box will be displayed.

• Notice that the Relationship Type area at the bottom of the dialog box states One-To-

Many.

• We need to ensure that any changes to the CustomerID in the Customers table are

replicated in the CustomerID field of the Orders table. To do this enable the Enforce

Referential Integrity option and then enable Cascade Update Related Fields.

• Click on the Create button. The relationship link will be shown as below:

To delete a relationship between tables

• Click on the Tools drop down menu and select Relationships. • Click on the relationship line that you wish to delete. • Press the Del key, and you will see a warning dialog box, asking if you wish to

permanently delete the relationship. • Click on the Yes button to confirm the deletion.

-٣٨-

H.W :

Put ( ) or ( ) :

1. To delete a relationship click on the relationship line that you wish to delete. And press

the Del key ( )

2. We can't create a relationship between a tables . ( )

3. Use the Ctrl key to add more than one table. ( )

-٣٩-

Training on Practical Exam First: Ordinarily Course

1. Searching for a file in your computer . 2. Searching for a hardware in your computer 3. Searching for person in the address book . 4. Install Printer . 5. Add or removing programs . 6. Add new hardware ( Camera) 7. Help & support

Second: By using MS-Access application Do the Following Project

1. Start Access Program 2. Create a new database 3. Save a database with name “Index” 4. Create table by using Design with following items:

Data type Item Choose the suitable data type First Name Choose the suitable data type Salary Choose the suitable data type Mobile

5. Choose the suitable item to be primary key 6. Switch between Design and Datasheet View 7. add following data :

Samy 500 0123456789 Hend 200 0102345678 Ali 300 0112345678

8. Move the column “Salary” after column “Mobile” 9. Insert new column with title “ Second Name” after field “ First Name” 10. Create new table by using Design with following items:

Data type Item Choose the suitable data type ID Choose the suitable data type Family Name Choose the suitable data type Home Phone

11. Choose the suitable item to be primary key 12. Switch between Design and Datasheet View 13. Change width of columns in a tableto be widethest. 14. Type the following data :

Gaber 2345678 Hashem 3456789

15. Save table with name “Information” 16. Make Relationship one to one between “first name “ and “ Home Phone “ 17. Make Relationship one to many between table “Index” and table “Information “ 18. Close the Access program.