1 / 39

Expression Web

Expression Web. 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.

thor-anderson
Download Presentation

Expression Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Expression Web

  2. 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.

  3. 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.

  4. 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.

  5. Using the Main Window

  6. 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.

  7. Design view Split view Code view 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.

  8. 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.)

  9. To modify a page size: View Page Size Modify Page Sizes. Setting Page Size To change the page size view: View Page Size

  10. 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.

  11. To set page properties: File Properties

  12. To save page: File save File preview in browser

  13. View page code Enter text on a Web page: Write “ welcome to web site ”

  14. Enter text on a Web page:

  15. Align text on a Web page:

  16. To insert a horizontal line:

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

  18. Editing of image: 6 2 11 12 4 9 1 7 3 8 5 10 • 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

  19. Editing of image:

  20. Hyperlink of image:

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

  22. Adding interactive behaviors

  23. Adding interactive behaviors • Adding behavior to element • Adding an interactive button • Create a popup massage windows • Create a status bar image • Using jump menu

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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. Hyper link

  31. Hyper link (frames)

  32. مناطق قديمة منطقة الهرم الميادين العامة الصفحة الرئيسية Hyper link (frames)

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

  34. Cascading Style Sheets

  35. 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.

  36. 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

  37. 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>

  38. 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.

  39. 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 On the File menu, point to NewCSS.

More Related