Opening and Closing Expression WebOpening and Closing Expression Web

To open the programTo open the program:: -Click the Start menu

-Choose Microsoft Expression Web

To close Expression Web: -Choose File -Choose Exit.

Create a Web Create a Web sitesite

To create a new blank Web site:Choose File New Web Site

.In the New dialog box that appears,

General is automatically selected

Tip ■To help you build a full-styled Web site

more quickly, Expression Web includes avariety of CSS-based templates and style

sheets .

Creating Template-based SitesCreating Template-based Sites

To select and customize Web site templates:Choose File New Web Site.

.In the New dialog box that appears, select Templates.

Using the Main WindowUsing the Main Window

Using the Task PanesUsing the Task Panes

By default, Expression Web displays four task panes:

Folder List, Tag Properties, Apply Styles ,Toolbox .

You can, however, displayany of the 18 task panes

To open a task pane: From the Menu bar, choose Task Panes

and the drop-down menu highlights the

panes already open.

To close a task pane:Click the button in the top-right cornerof any tab or pane. The pane closesimmediately.

To switch Editing window viewsTo switch Editing window views::

By default, Expression Web opens in the Split view, with Code view at the top of the

Editing window and Design view at the bottom.

Split viewDesign viewCode view

Choose View Page

To switch among open pages:At the top of the Editing window, click the tab of the page you want to see

OR cycle through the tabsusing the keyboard shortcuts: ctrl + taband ctrl + shift + tab.

Working with pagesWorking with pages

To create a new blank page: -Open the Web site in which you want to work

-Choose File New Page- Click OK

When the New dialog box appears,HTML is selected automatically

( To change that, see last tip on the next page).

Setting Page SizeSetting Page Size

To change the page size view:View Page Size

To modify a page size:View Page Size Modify Page Sizes.

To set page propertiesTo set page properties::

File Properties

If you want to use a Background sound, click that pane’s Browse button to navigate to the sound file.

To set page propertiesTo set page properties::

File Properties

To save pageTo save page::

File save

File preview in browser

Enter text on a Web pageEnter text on a Web page::

Write “ welcome to web site ”View page code

Enter text on a Web pageEnter text on a Web page::

Align text on a Web pageAlign text on a Web page::

To insert a horizontal lineTo insert a horizontal line::

To add an imageTo add an image::

Open a Web page, and click where you want to insert an image.Insert Picture

Editing of imageEditing of image::

1. Insert a picture from your computer, digital camera, or scanner2. Create smaller version of image linked to larger original3. Rotate picture to left or right4. Flip picture horizontally or vertically5. Increase or decrease picture’s contrast6. Increase or decrease picture’s brightness7. Crop picture 8. Make one color in the picture transparent 9. Make a picture black and white or wash out the color10. Add a bevel around a picture11. Resample a picture12. Create hyperlinked hotspots in picture Restore image to its appearance before

changes

7 83 4 5 61 2 9 10 11 12

Editing of imageEditing of image::

Hyperlink of imageHyperlink of image::

TableTable Open a Web page, and click where you want to insert an table.

Table insert table

Adding interactive behaviorsAdding interactive behaviors

Adding interactive behaviorsAdding interactive behaviors

Adding behavior to element

Adding an interactive button

Create a popup massage windows

Create a status bar image

Using jump menu

Adding interactive buttonAdding interactive button

To add an interactive button:In Design view create new web site with four web pages

To add an interactive button:In Design view, click on the page where you want to add a button.Choose Insert Interactive Button

Adding an interactive buttonAdding an interactive button

Adding behavior to elementAdding behavior to element1- In Design view, click the element to which you want to add a behavior.

2-Format Behaviors OR choose Task Panes Behaviors.

Adding behavior to elementAdding behavior to element1- In Design view, click the element to which you want to add a behavior.

2-Format Behaviors OR choose Task Panes Behaviors.

Create a popup massage windowsCreate a popup massage windows

1- In Design view, click the element to which you want to add a behavior.2-Format Behaviors OR choose Task Panes Behaviors.

Create a status bar imageCreate a status bar image1- In Design view, click the element to which you want to add a behavior.

2-Format Behaviors OR choose Task Panes Behaviors.

Hyper linkHyper link

Hyper link (frames)Hyper link (frames)

Hyper link (frames)Hyper link (frames)

مناطق قديمة

منطقة الهرم

الميادين العامة

الصفحة الرئيسية

Using jump menuUsing jump menu1- In Design view, click the element to which you want to add a behavior.

2-Format Behaviors OR choose Task Panes Behaviors.

Cascading Style SheetsCascading Style Sheets

Cascading Style SheetsCascading Style Sheets

• Cascading style sheets )CSS( give you control over the presentation of your web pages. Using CSS, you can precisely position and set the appearance of elements on a web page.

• A CSS can be external, internal, or inline, relative to a web page and a web page can use one or more of these types of CSS simultaneously.

• In general, styles that are defined in an inline CSS take precedence over those in an internal or external CSS, and styles in an internal CSS take

precedence over styles in an external CSS.

Inline CSSInline CSS

• Use an inline style to apply cascading style sheet properties to individual elements on a page and don't need to reuse the style. An inline style is defined within the start tag of an HTML element in the web page.

An example of an inline style

inline style

Internal CSSInternal CSS

• Use an internal CSS, sometimes referred to as embedded CSS, when you want to define styles only for the current web page and also when you want to override the styles that are defined in an external CSS attached to the current web page.

• An internal CSS is contained within the <head> tags of a web page.

Example of an internal style sheet<style type="text/css">.alert {    font-weight: bold;    color: #FF0000;}h1 {    font-size: 16pt;    font-family: Arial, Helvetica, sans-serif;}#headlines {    border-color: #000000;    border-width: thin;    border-style: solid;}</style>

To create an internal CSSOpen the web page you want to contain the CSS .

In the Apply Styles or Manage Styles task panes or, click New Style.

External CSSExternal CSS

• Use an external style sheet when you want to apply the same styles consistently across some or all web pages in your website.

• By defining styles in one or more external style sheets and attaching them to web pages, you can ensure your entire website has a consistent appearance.

• If you decide to change a style, you need to make only one change — in the external CSS — and the change is automatically reflected in all web pages that reference that style and CSS.

• An external CSS is contained within a .css file Such as global.css.

• The syntax of an external CSS is the same as an internal CSS.

To create an external CSSOn the File menu, point to New CSS.

To create a new external CSS and create a new style for the style sheetIn the Apply Styles or Manage Styles task pane or the Style toolbar click New Style  , and then in the New Style dialog box, set the Define in option to New style sheet.

External CSSExternal CSS