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
Codeview view Design view Split
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. Insert a picture from your computer, digital camera, or scanner 2. Create smaller version of image linked to larger original 3. Rotate picture to left or right 4. Flip picture horizontally or vertically 5. Increase or decrease picture’s contrast 6. Increase or decrease picture’s brightness 7. 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. .Format Behaviors OR choose Task Panes Behaviors-2
Adding behavior to element
1- In Design view, click the element to which you want to add a behavior. .Format Behaviors OR choose Task Panes Behaviors-2
Create a popup massage windows 1- In Design view, click the element to which you want to add a behavior. .Format Behaviors OR choose Task Panes Behaviors-2
Create a status bar image 1- In Design view, click the element to which you want to add a behavior. .Format Behaviors OR choose Task Panes Behaviors-2
Hyper link
Hyper link
(frames)
)(frames
مناطق قديمة منطقة الهرم الميادين العامة الصفحة الرئيسية
Hyper link
Using jump menu 1- In Design view, click the element to which you want to add a behavior. .Format Behaviors OR choose Task Panes Behaviors-2
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 <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>
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 toolbar click New Style , and then in the New Style dialog box, set the Define in option to New style sheet.
To create an external CSS