1 / 57

Working with Web Content in Expression Web

Working with Web Content in Expression Web. Supplemental Material. Set Formatting Preferences. Expression Web makes decisions on whether to add some formatting as inline CSS or embedded CSS. Use the Tools=>Page Editor Options dialog to change these defaults

leigh
Download Presentation

Working with Web Content in 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. Working with Web Content in Expression Web Supplemental Material

  2. Set Formatting Preferences • Expression Web makes decisions on whether to add some formatting as inline CSS or embedded CSS. • Use the Tools=>Page Editor Options dialog to change these defaults • One you should change is the <body> formatting to class rules instead of inline CSS.

  3. Set Formatting Preferences • Can change <body> styles to class rules (embedded CSS for a body selector) • Try to use CSS classes when possible

  4. Entering Text on a Page • In Design View, entering text will default to placing it in a <p> • Hitting Enter will create a new <p> • Using Shift Enter will add a <br /> • You can turn on formatting marks using the View=>Visual Aids=> Show • You may always choose to use the Code View or Split View and enter HTML tags the old fashioned way

  5. Entering Text on a Page • Showing Formatting Marks • Split View • Code View on top • Design View below

  6. Inserting Block-Level Tags • You can use the Styles drop down list in the Toolbar to insert common block-level HTML tags on your page: • <p> • <h1>-<h6> • <ul>, <ol>, <dl>, <dt>, <dd> • <pre>, <blockquote>

  7. Inserting Block-Level Tags

  8. Inserting HTML Tags using the Toolbox • You can use the Toolbox task pane to insert HTML tags like: • <div>, <span> • <p>, <br /> • <hr /> • <img> • Layers or Frames

  9. Inserting HTML Tags using the Toolbox

  10. Setting Font Styles • You can use the Toolbar to quickly set these font styles: • font-family • font-size • color • These will be placed as embedded CSS styles

  11. Choose a Font (font-family)

  12. Choose a Font Size (font-size)

  13. Choose a Font Color (color)

  14. Bold, or Italics from Toolbar • Avoid using the Toolbar to add bolded, or italicized text • This will insert HTML formatting tags <strong> and <em> tags into your code • This should be done as CSS as part of well planned styles for your site

  15. Make Plan for CSS Styles • If you are not careful, you can generate meaningless, scattered CSS styles (i.e. .style1, .style2,.style47) by choosing formatting options from the Toolbar • It is better to plan for reusable CSS styles to be used on your web site • Use CSS selectors and well named CSS classes.

  16. Find and Replace HTML Tags • Open the Find and Replace dialog from the Edit=> Find menu option • Click the HTML Tags tab • Choose the tag from the Find Tag drop down list • Choose what you want to Replace it with from the Replace drop down list • Use Find All or Find Next to search

  17. Find and Replace HTML Tags 1. 3. 2. 4.

  18. Adding New CSS Styles • You can use the New Styles dialog to add CSS styles to a web page. • This link is found in the Apply CSS task pane. • Choose the selector like body, p, or h3 from the drop-down list. • Choose to add the style to the Current Page (Embedded) or in an external Stylesheet.

  19. Adding Styles to a Page • Choose a selector or create a class • Add different style properties • See preview

  20. Spellchecking • The credibility of a web site can be adversely affected if content is misspelled. • Expression Web has a built-in spellchecker • Words thought to be misspelled are underlined in a wavy red line • You can right-click on the misspelled word for a quick list of spellings

  21. Spellcheck as You Type • You can check spelling as you type • Tools=>Spelling=>Spelling Options • Other spelling options include: • Ignore words with all uppercase • Ignore Internet and file addresses

  22. Spellcheck as You Type Misspelled words Quick fix list

  23. Using the Thesaurus • The built in Thesaurus can help find alternative words • Select this from the Tools=>Thesaurus menu option • Make a choice and then hit the Look Up button • Choose to Replace or Cancel

  24. Working with Graphics • Expression Web not only allows you to insert and align graphics on your web pages but also: • Resize and resample • Crop, rotate, and flip • Change brightness and contrast • Convert color and add transparency • Change graphical formats • Etc.

  25. Converting Graphical Formats • By default, Expression Web requires all graphical formats to be converted to one of two formats: • GIF for formats with 256 or less colors • JPEG for formats with more than 256 colors • You can change these defaults with the Tools=>Page Edition Option dialog • Go to the Picture Tab and modify defaults

  26. Converting Graphical Formats Change default format here

  27. Inserting Graphics • There are many ways to insert a graphical image on a web page • Use the Insert=>Picture=>From File • Click the Image icon in the Toolbox or Toolbar • Find the image file in the Folder List and drag and drop it on your page • Copy a file from the Internet using copy and paste • And more…

  28. Accessibility Properties • With the XHTML 1.0 Transitional standard, you will be required to add alternate text to each image you insert • A long description is optional

  29. Picture Properties • You can double-click on an image or the image icon on your page to bring up the Picture Properties dialog • The General tab allows you to Browse for an image, set the alternate text or a link • The Appearance tab allows you to align an image, change its dimensions, and layout

  30. Picture Properties Dialog • Browse to find the image • Edit the image in Paint • Set Alternate Text • Add a Hyperlink or Target Frame

  31. Picture Properties Dialog • Set the wrapping style • Layout and border style • Resize the image as it will be displayed (will not change the actual file size)

  32. Resizing an Image Directly • You can resize an image directly on your web page • Click on the image to see the resize handles • Hold down the Shift key as you drag a corner handle • Click on the Picture Actions button to choose to resize or resample

  33. Resizing an Image Directly • Click on the image to get the resize handles • Hold Shift to maintain the aspect ratio as you drag the corner

  34. Resize or Resample??? • Resizing modifies how a picture is displayed on a web page, but retains the original file size • Only the Width and Height HTML attributes of the image are modified • Resampling changes the physical size of the picture on the page and in the file • Both the Width and Height HTML attributes and actual filesize are modified

  35. Resize or Resample??? • Which is the best choice? • If making the picture smaller, resampling will help it to load faster. • Resampling a picture larger will cause loss of resolution. This should be avoided if possible. • With minimal resizing, resampling is not necessary

  36. Picture Actions Button • The Picture Actions button allows choosing to resize or resample • First option – only resizes • Second option – resamples and resizes

  37. Cropping, Rotating and Flipping • These graphical manipulation operations are usually only available in a graphical application like GIMP, Fireworks or Photoshop • But because they are such common operations, Expression Web allows these to be done just-in-time within this environment • With cropping, rotating or flipping in Expression Web, you can save a new file by renaming the file or else it will overwrite the existing file

  38. Cropping • Show the Pictures Toolbar • Click the Crop icon once – the cropping rectangle appears • Set your cropping area • Click the Crop icon again to complete cropping, Esc cancels

  39. Rotating or Flipping • Show the Picture Toolbar • Choose to: • Rotate Left 90°Rotate Right 90 ° • Flip Horizontal • Flip Vertical • Save the page and rename or overwrite the existing file

  40. Using Layers • Use the Format=>Layers menu option to show the Layers Task Pane • You can Insert a layer or Draw a layer • You should always name the layer • The name is the id of the layer • If elements have the same parent, the z-index controls what layer is on top • The highest z-index is the top layer

  41. Working with Layers • You can insert graphics or text content inside a layer • Click the eye icon to hide or show a layer • Nested layers are attached and move together • More on layers later…

  42. Changing Graphic Positioning • You can use the Format=>Position menu option to open the Position dialog • Can set the wrapping style • Can set the Positioning style • Also set the Location and size information

  43. Adjusting Graphics • You may also use the Pictures Toolbar to: • Adjust brightness and contrast • Wash out the color • Make a color transparent • Add a bevel edge • When you close or save the page, you will be prompted to save the graphic or rename it

  44. Adding a Transparent Color

  45. Change Margins and Padding • Drag beige lines around the image to change the margins • Hold down Shift and drag blue lines to change the padding • As you drag, a ScreenTip indicates size in pixels

  46. Inserting Hyperlinks • Expression Web has several ways you can quickly insert a hyperlink • Select the text you want to become the hypertext • Click the Insert Hyperlink button from the Common Toolbar • Click on “Existing File or Web Page” • Select the file and click OK

  47. Inserting a Hyperlink

  48. Bookmarks in Expression Web • Expression Web calls named anchors bookmarks but this method for linking within a page is being deprecated…<h1><a name=“Top”></a>Heading</h1> <a href=“#Top”>Return to Top</a> • Do not use bookmarks but use fragment identifiers with anchor tags as we did in Project 3 to create linked fragments. • You will need to add these yourself in Code View. ...

  49. Fragment Identifiers and Linked Fragments • Change to Code View in Expression Web… • First create your fragment identifiers where you want them on your page.<h1 id=“Top”>Heading</h1> • Next, add an anchor tag to create the linked fragment.<a href=“#Top”>Return to Top</a> • Remember to use the # with the href attribute to link to the fragment.

  50. Creating an ImageMap • A hotspot is an invisible region on a graphic that has an assigned hyperlink • An graphic with one or more hotspots is called an ImageMap • Hotspots should not overlap and cannot extend beyond the edges of the image • Hotspots can have three shapes: • circle • rect (for rectangles) • poly ( for many sides shapes)

More Related