Transcript To create an external CSS

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
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
3
4
5
6
7
8 9 10
11
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
Make one color in the picture transparent
Make a picture black and white or wash out the color
Add a bevel around a picture
Resample a picture
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)
‫)‪(frames‬‬
‫مناطق قديمة‬
‫منطقة الهرم‬
‫الميادين العامة‬
‫الصفحة الرئيسية‬
‫‪Hyper link‬‬
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 <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