Transcript Slide 1
Opening and Closing Expression Web
To open the program:
- Click the
Start menu
- Choose
Microsoft Expression Web To close Expression Web:
- Choose
File
- Choose
Exit.
Create a Web
site
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 a variety of CSS-based templates and style sheets.
Creating 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 Window
Using the Task Panes
By default, Expression Web displays four task panes:
Folder List, Tag Properties, Apply Styles , Toolbox.
You can, however, display any 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 corner of any tab or pane. The pane closes immediately.
To 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 .
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 tabs
using the keyboard shortcuts: ctrl + tab and ctrl + shift + tab.
Working 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 Size
To change the page size view:
View Page Size
To modify a page size:
View Page Size Modify Page Sizes.
To 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 properties:
File Properties
To save page:
File save File preview in browser
Enter text on a Web page:
Write “
welcome to web site
” View page code
Enter text on a Web page:
Align text on a Web page:
To insert a horizontal line:
To add an image:
Open a Web page, and click where you want to insert an image.
Insert Picture
Editing of image:
1 2 3 4 5 6 7 8 9 10 11 1.
2.
3.
4.
5.
6.
7.
Insert a picture from your computer, digital camera, or scanner Create smaller version of image linked to larger original Rotate picture to left or right Flip picture horizontally or vertically Increase or decrease picture ’s contrast Increase or decrease picture ’s brightness Crop picture 8.
Make one color in the picture transparent 9.
Make a picture black and white or wash out the color 10. Add a bevel around a picture 11. Resample a picture 12. Create hyperlinked hotspots in picture Restore image to its appearance before changes 12
Editing of image:
Hyperlink of image:
Table
Open a Web page, and click where you want to insert an table.
Table insert table
Adding interactive behaviors
Adding interactive behaviors
Adding an interactive button
Adding behavior to element
Create a popup massage windows
Create a status bar image
Using jump menu
Adding interactive button To add an interactive button:
In Design view create new web site with four web pages
Adding an interactive button To add an interactive button:
In Design view, click on the page where you want to add a button.
Choose Insert Interactive Button
Adding behavior to element
1- 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 element
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 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 image
1- In Design view, click the element to which you want to add a behavior.
2-Format Behaviors
OR
choose Task Panes Behaviors.
Hyper link
Hyper link (frames)
Hyper link (frames) ةميدق قطانم مرهلا ةقطنم ةماعلا نيدايملا ةي سيئرلا ةحفصلا
Using jump menu
1- In Design view, click the element to which you want to add a behavior.
2-Format Behaviors
OR
choose Task Panes Behaviors.
Cascading Style Sheets
Cascading 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 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 CSS
To create an internal CSS
Open the web page you want to contain the CSS. In the
Apply Styles
or
Manage Styles
task panes or, click
New Style
.
• 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
tags of a web page.Example of an internal style sheet
External 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.
External CSS
To create a new external CSS and create a new style for the style sheet
In the
Apply Styles
or
Manage Styles
task pane or the
Style Define in
toolbar click option to
New Style New style sheet
. , and then in the
New Style
dialog box, set the
To create an external CSS
On the
File
menu, point to
New CSS
.