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 One you should change is the formatting to class rules instead of inline CSS.

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

Entering Text on a Page In Design View, entering text will default to placing it in a Hitting Enter will create a new Using Shift Enter will add a 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

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

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: -,,,,,

Inserting Block-Level Tags

Inserting HTML Tags using the Toolbox You can use the Toolbox task pane to insert HTML tags like:, Layers or Frames

Inserting HTML Tags using the Toolbox

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

Choose a Font (font-family)

Choose a Font Size (font-size)

Choose a Font Color (color)

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

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.

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

Find and Replace HTML Tags

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.

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

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

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

Spellcheck as You Type Misspelled words Quick fix list

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

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.

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

Converting Graphical Formats Change default format here

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…

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

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

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

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)

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

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

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

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

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

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

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

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

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

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…

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

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

Adding a Transparent Color

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

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

Inserting a Hyperlink

Bookmarks in Expression Web Expression Web calls named anchors bookmarks but this method for linking within a page is being deprecated… Heading Return to Top 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

Fragment Identifiers and Linked Fragments Change to Code View in Expression Web… First create your fragment identifiers where you want them on your page. Heading Next, add an anchor tag to create the linked fragment. Return to Top Remember to use the # with the href attribute to link to the fragment.

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)

Adding Hotspots Select the graphic to use for the ImageMap Open the Pictures toolbar Click the hotspot shape you want For circles and rectangles, drag the mouse in the shape you want For polygons, click the mouse around the shape and double-click to complete Provide the URL for the link and a Screen Tip for the hover text.

Adding Hotspots Polygon Hotspot Rectangle Hotspot

ScreenTip Expression Web calls a title for a hotspot a ScreenTip You can right-click on the hotspot and select Hyperlink to bring up the Edit Hyperlink dialog Go to the ScreenTip button and enter the title text you want on the hotspot When the user points to a hotspot, this message will be displayed

Add Default Hyperlink When working with an ImageMap, you may want to associate the entire image itself with a default hyperlink Right-click on the whole image, and click the choose Hyperlink from the smart menu Select the URL you want for image hyperlink Also add a ScreenTip (title attribute)

Highlight Hotspots If you have more than one hotspot on an ImageMap, you may need to see the ones already completed as you add a new one You should be very careful to not overlap hotspots as this will frustrate your users Click on the Highlight Hotspot button on the Pictures toolbar When you are finished, click again to hide hotspots

Highlight Hotspots

Summary Microsoft’s Expression Web provides an environment where familiar operations like copy, cut, paste as well as find and replace and spellchecking are supported Integrated support for CSS also helps create a standards-based web site Managing and formatting of graphics and creation of ImageMaps will become often used features Finally, inserting and management of hyperlinks adds functionality and ease of use for users