More on styles, hotspots, frames

More on styles

1. Styles and fonts

   Fonts can be defined using px (pixels), pt (point), in (inches), cm (centimeters), mm(millimeters), em (emspace, the hight of the letter m), ex (xheight), and %. The basic rules are:
   1. use px for items that need as fixed size (images, certaintables,fancy headings, menus, etc).
   2. use em for content that may be resized for improve viewing.

   We can set the font for the whole document by clicking on New styles in the right, bottom pane, selecting the body tag from the selector drop down menu and choosing the font attributes we want. Please note that we set the style to be saved in external style file, morestyles.css. We can always modify the styles by selecting one of them, e.g.body, right-clicking and selecting modify styles.

   We can also use font properties to remove the blue underline from a link. In our example we added three links to the navigation, as shown here. Lets now remove the blue underline and do something better.

   1. right-click in the navigation area of the index.html page, click on New Style, in the right, bottom pane, name the style #top_nav a (select #top_nav from the selector and add a), select Font, text-decoration: none and text color to black; be sure to select to save in the external style sheet, as shown in this image.
   2. this removed the underline and changed the text color to black, but we need to let the users know we have some sort of button links. therefore lets select the #top_nav a in the CSS styles in the right, bottom side, right-click, choose Modify Style and add a background color, border style:solid,width: thin, color: black; box padding 4 to all, as shown in this example.
   3. the final product is a button-like effect of the links in the navigation bar, as shown in this image. Do not forget to Save All (both the page and external CSS were changed.

2. Style classes

   . When we select page elements such as body, a, h2, p and create styles they apply to the whole page. We saw an example where we defined the element a style to apply to the navigation bar, only. Style classes apply effects in parts of a page It is defined by using a . ( dot) in front of a style name, as for example: .alignCenter. Lets work on an example: copy and paste an image (cgis.gif) in the site we have been using, then drag and drop this image in the right column, as shown here Please note that the name of the right column division is #page_content.

   1. lets create a class to center the image: Click on New style (right.bottom pane), name it .alignCenter, select Box: margin right and left to auto (others leave blank) as in this image.
   2. then select Layout and set display to block -- this will box the content we apply the class.
   3. to continue our example click on the image and click on the .alignCenter class (see here) to have the image centered in the right column. Of course to center the paragraph we could just use the center symbol in the toolbar, like we did as shown in this splitview.
   Of course we could have created other classes very similar as .alignRight and .alignLeft. The only difference would be that the Layout category would be inline and float to either left or right, respectively, as shown here for .alignLeft I added an image at left and used the .alignLeft class. In addition I also added another image at the top and used .alignRight class. The dog was just for fun ... Finally, a disclaimer was added as the footer, as shown in design view and in the browser.

3. Pseudo classes

   There are elements, primarity links, that have additional class attributes:

   1. a:active => clicked, clicking link, default color red.
   2. a:focus => element can receive mouse or keybord input.
   3. a:hover => mouse over link or other element
   4. a:link => unvisited link, default color blue
   5. a:visited => clicked link, default color purple
   You can Add New Styles for each one of them, and also modify later to fit your design. This is an example to changing the visited link a:visited to gray.

There are many additional topics on styles in expression web 3 that you may learn by yourself, but between last class materials in CSS layout and today's class we have seen its main features.

Images and imagemaps (hotspots)

1. use File Import, file, add file, then browse and select an image -- in our example chip.gif
2. lets start by selecting how the image and text should flow in a page: right-click and select picture properties, appearance, and position the image to the left allowing the text wrap around it, by clicking on the wrapping style left, as shown in this example.
3. lets add beveled borders to to image: click on the image, then select the Bevel symbol as shown in this example.
4. for the sake of demonstration lets rotate the image 90 degrees right: click on the image, then select the Rotaste clockwise symbol as shown in this other example. Of course flipping is very similar.
5. lets now import an image saved in PowerPoint as a gif with a small area of text and lots of blue background, as shown in this image.
6. The first thing we want to do is to crop the image to get rid of most of the blue: click on the image, then on the pictures toolbar, click Crop and drag the handles of the cropping box to resize and include the part of the picture that you want to keep, finally click on the crop symbol again, as shown here. We need to save the page to see the result.
7. lets now make the image transparent, hiding the blue background: click on the image, then select the transparent symbol on the picture toolbar and click on the color in the image you want to make transparent, in our case blue, and you can see the result. If we change the page background to ligh-yellow, as in this example the blue is still gone.
8. we can also create thumbnails of images so that a page is not "heavy" to load: click on the image, then select the Auto Thumbnail from the picture toolbar, as shown here, and you can see the result.
9. finally, you can also create graphical buttons to link to other sites or pages: click on Insert, Interactive buttons, and choose a button, type a text to the button, and a enter the link to go when the button is pressed, as shown here, of course selecting image in the button dialog can change the size of the button, etc, the result of the example is here.

We also have seen imagemaps previously. Lets create an imagemap (hotspots) in expression web:

1. As usual to create a new site, select Site, New site, General and Empty Site and we call it hotspots2.
2. next copy an image to the site (it is a good practice to create a folder with images for the site and place all the images in this folder), in our example we copied selection.gif.
3. click on File, New, Html, save the file as index.html, and change the title to choices, as shown in this image.
4. select View, Toolbars, Pictures to add the pictures toolbar, as shown here.
5. type in the top of the page: Please select a destination:
6. drag and drop the destination.gif in the page as shown in this image.
7. using the picture toolbar, click on the select symbol and in the image, as shown in this example.
8. again, using the picture toolbar, select the rectangle symbol and draw it around Merrick School of Business as shown here.
9. when the rectangle is finsihed we are asked to enter an URL for the hotspot, as shown in this other image.
10. we repeated the rectable drawing around University of Baltimore and State of Maryland, and added the urls for them, as shown in the image with split code and design.
11. we are almost finished, but for the annoying blue border around the image.
    • select the img symbol on top of the image and right-click, to choose picture properties,
    • then select the appearance tab, and make the border thickness equal to zero to remove the border, as shown in the page without the blue borders.
12. the expression web help for hotspots is also available.

Revisiting frames

1. once we save index.html as left.html we are ready to edit each link in a frame context
2. right-click on the Merrick School area of the picture and select Picture Hotspot Properties.
3. in the Edit Hyperlynk dialog click on the target button and type right.
4. repeat what was done to Merrick School for University of Baltimore and State of Maryland and all links will now target a right frame, as shown in this split view of the left.html
5. we are ready to create the frame definition (the frameset) -- File, New, Frames Pages, Contents ,as shown here (of course we could have selected many other formats, but this is the simplest).
6. when you click OK a new file will be open as untitled_1.html, with two pages to be defined, either by creating them new (new page), or inserting an existing page (set initial page).
7. we will use the left.html page in the left frame in our example, selecting set initial page, left.html, as shown here.
8. in the right side we will choose New Page, and type a simple message, as shown in this image.
9. then we save the file as frameset.html, and use destinations as its title.
10. the frameset and the frames pages are done, but we may need to set some properties:
    • set the left frame to 20% of the screen
    • do not show frames borders, selecting the frames button and unchecking Show Borders.
11. finally, we need to be sure that the right frame id called right like we used in the left.html page, if not we can change directly in the code, like we did in the example.
12. here it is working on a browser,
13. please note that expression web also creates text for noframes browsers.

Frames are sometimes confusing to viewers when they create bookmarks of pages shown in the frames, when they may be in fact bookmarking the frameset page. The main reason to use frames is to separate navigation from content: one or more frames are used for navigation and the other pages just contain content, without navigation, as if the pages were developed individually. An example of this are the Microsoft MSDN pages.