webexpration2007 ii
TRANSCRIPT
![Page 1: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/1.jpg)
![Page 2: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/2.jpg)
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.
![Page 3: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/3.jpg)
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 .
![Page 4: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/4.jpg)
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.
![Page 5: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/5.jpg)
Using the Main WindowUsing the Main Window
![Page 6: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/6.jpg)
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.
![Page 7: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/7.jpg)
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.
![Page 8: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/8.jpg)
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).
![Page 9: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/9.jpg)
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.
![Page 10: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/10.jpg)
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.
![Page 11: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/11.jpg)
To set page propertiesTo set page properties::
File Properties
![Page 12: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/12.jpg)
To save pageTo save page::
File save
File preview in browser
![Page 13: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/13.jpg)
Enter text on a Web pageEnter text on a Web page::
Write “ welcome to web site ”View page code
![Page 14: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/14.jpg)
Enter text on a Web pageEnter text on a Web page::
![Page 15: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/15.jpg)
Align text on a Web pageAlign text on a Web page::
![Page 16: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/16.jpg)
To insert a horizontal lineTo insert a horizontal line::
![Page 17: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/17.jpg)
To add an imageTo add an image::
Open a Web page, and click where you want to insert an image.Insert Picture
![Page 18: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/18.jpg)
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
![Page 19: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/19.jpg)
Editing of imageEditing of image::
![Page 20: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/20.jpg)
Hyperlink of imageHyperlink of image::
![Page 21: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/21.jpg)
TableTable Open a Web page, and click where you want to insert an table.
Table insert table
![Page 22: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/22.jpg)
Adding interactive behaviorsAdding interactive behaviors
![Page 23: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/23.jpg)
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
![Page 24: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/24.jpg)
Adding interactive buttonAdding interactive button
To add an interactive button:In Design view create new web site with four web pages
![Page 25: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/25.jpg)
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
![Page 26: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/26.jpg)
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.
![Page 27: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/27.jpg)
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.
![Page 28: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/28.jpg)
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.
![Page 29: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/29.jpg)
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.
![Page 30: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/30.jpg)
Hyper linkHyper link
![Page 31: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/31.jpg)
Hyper link (frames)Hyper link (frames)
![Page 32: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/32.jpg)
Hyper link (frames)Hyper link (frames)
مناطق قديمة
منطقة الهرم
الميادين العامة
الصفحة الرئيسية
![Page 33: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/33.jpg)
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.
![Page 34: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/34.jpg)
Cascading Style SheetsCascading Style Sheets
![Page 35: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/35.jpg)
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.
![Page 36: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/36.jpg)
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
![Page 37: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/37.jpg)
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.
![Page 38: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/38.jpg)
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.
![Page 39: Webexpration2007 ii](https://reader033.vdocument.in/reader033/viewer/2022052700/55c3d485bb61eb004c8b458a/html5/thumbnails/39.jpg)
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