working with web content in expression web supplemental material
TRANSCRIPT
Working with Web Content Working with Web Content
in Expression Webin Expression Web
Supplemental MaterialSupplemental 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 <body> formatting to class rules instead of inline CSS.
Set Formatting Preferences
Can change <body> 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 <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
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: <p> <h1>-<h6> <ul>, <ol>, <dl>, <dt>, <dd> <pre>, <blockquote>
Inserting Block-Level Tags
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
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 <strong> and <em> 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
3.
2.
1.
4.
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…
<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.
..
..
..
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.
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
PolygonHotspot
RectangleHotspot
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