ZAMBAK_IT_ExpressionWeb2
.pdf
Select the options which you want to apply to h1, click OK. Also make similar changes for Heading2.
Selected options for h1 |
Selected options for h2 |
After changing the HTML tags with CSS, apply them to your pages.
To apply a tag-based style:
Select the text and choose the style that want to apply.
Choosing a style
The style is automatically applied to the selected text.
Applied h1 style
Create new pages and add text and pictures. egg.html, caterpillars.html, pupa.html and imago.html. Create a new style app.css to format their background and headings and attach the multimedia.css file to style pictures.
Open the lifecycle.html page and create hyperlinks by setting the New Window to Target Frame.
To create Hyperlink style:
Click the New Style button in the Apply Styles task pane, and select a for Selector by defining in existing style sheet text.css.
Choose the font and background colors for a link style.
Do the same actions for a:hover by selecting different colors.
The hyperlinks have the view as shown in the figure:
Normal view |
Mouseover view |
Select none in the textdecoration column so that the will not be underlined.
Enhancing Your Web Site 81
|
|
a style from an |
|
|
|
an external style sheet |
|
|
an external style sheet |
|
|
|
|
|
|
|
|||
element: |
|
|
multiple pages: |
from a page: |
|||||
Select the element whose style |
|
|
Folder List, to select all the |
|
Manage Styles tab, right- |
||||
|
|
to remove. |
|
pages from which you want to |
click the external style sheet |
||||
|
Apply Styles tab, click the |
|
detach an external style sheet |
listing and choose the Remove |
|||||
|
|
|
|
|
|
from the drop-down menu. |
|||
Clear Style button… |
|
Choose Format > CSS Styles > |
|
||||||
|
|
|
|
||||||
Manage Style Sheet Links
Select the style sheet you want and click Remove.
Working with Multimedia
Inserting a Flash Object
You can add animations games, and other interactive programs to your Web pages. The most popular way is to use Flash used on graphical programs and multimedia presentations. Flash requires special player software to run within a web browser.
Click the place on the page where you want to display a Flash object.
Select Insert>Media>Flash Movie. The Select Media File dialog box opens.
Find the flash file and click Insert button.
The flash object is added to the page.
Flash object file extension which displayed in your browser
You may want to change the flash object size, remove its background color and make some other changes.
Double-click on the flash object. The Flash SWF Properties dialog box opens.
Making a flash object transparent
To remove the flash background color, select Transparent for Background color in the Movie section.
To change the flash object size, specify new values for the Width and Height properties in the Size section
Make other desired changes and click OK.
Preview - a
Flash pbject
Create a new page video.html by right-clicking the default.html and selecting New From Existing Page. Create a hyperlink from the banner picture to the video page.
Inserting page background sound
Background sound starts as soon as the page loads. Expression Web supports a variety of sound formats, including WAV (.wav), MIDI (.midi), AIFF (.aif, .aifc and
.aiff) and AU (.au and .snd). You can also choose to loop the sound a specific number of times or infinitely. It is not recommended to play a background sound since most people find them annoying.
Enhancing Your Web Site 83
Right click on the page and select Page Properties. The Page Properties dialog box opens.
Opening Page
Properties
Select the sound file using the Browse button on the General tab.
Selecting a
sound file
Loop is used to specify how many times the sound will repeat. If Forever is selected, it plays continuously. When you save the page, the sound file will be added into the web site folder.
Saving the embedded sound file
Inserting a Video
You can add a video to your web site. Video clips are usually saved as WMV, AVI (Audio Video Interleave), FLV and MOV files. Click the place on the page where you want to display the video.
Select Insert>Media>Windows Media Player. The Select Media File dialog box opens.
Find the video file and click the Insert button.
The video object is added to the page.
The added video object
Double-click on the video object to see its properties.
84 Chapter 5
Changing video object properties
You can change many options in the General tab. Auto start starts the movie automatically when the page is loaded. Play count specifies how many times the video will repeat.
You can resize the movie by changing the width and height options on the
Object Tag tab.
Changing movie size
•After making changes, save and preview the page.
Note: If you cannot watch the movie in Mozilla Firefox browser, you have to install the Windows Media Player plugin for Mozilla Firefox.
Another popular video file format is FLV. The .flv video file is usually inserted into a flash file .swf, so it is a flash object which contains a .flv video.
Copy all files from source\multimedia\flash_movie into your site.
Insert a picture butterfly.flv.jpg into your page.
Click the picture to select and create a hyperlink to the butterfly.html page with by setting New Window to Target Frame.
Save and preview the page.
Preview - a
Flash video
Enhancing Your Web Site 85
Page Transition
You can create special effects that are displayed when a site visitor enters or leaves your site or browses to or from a specific page.
Open the page that you want to create a page transition.
Select Format>Page Transition. The Page Transitions dialog box opens.
Choosing a page transition
In the Event combo box, select a page event (Page Enter, Page Exit, Site Enter or Site Exit) that will trigger the transition.
In the Transition effect list box, choose a transition effect (or choose No Effect to remove an existing transition from the page).
Enter the amount of time that the effect should last by typing a value from 1 to 30 in the Duration text box.
You can add different transition effects for different events. Keep in mind that choosing longer transitions slows down people who are using your site.
Save the page and preview it in a browser.
Preview - Page transition on the page
86 Chapter 5
Using Frames
A frames page is a type of Web page that divides the browser window into different areas called frames, each of which can display a different page.
A frames page itself contains no visible content— it is just a container that specifies which other Web pages to display in a frame and how to display them in one browser window.
You are going to create a photo gallery by using frames.
Create a new folder gallery and copy images that will be used in the photo gallery.
Copied images
Select New>Page. The New dialog box opens.
Creating a frames page
Select a frames page Contents that is favorable with your web site on the Frames Pages tab and click OK.
The selected frames page creates a contents frame on the left containing hyperlinks that change the page shown on the right.
Enhancing Your Web Site 87
The frames page
The frames page template actually shows three pages simultaneously in the browser: the frames page, which is the container, and the two pages shown in each of the two frames.
Create new pages by clicking the New Page button on each frame.
The created new pages
88 Chapter 5
Click the Save button to save three pages.
Saving the left page
First you are asked to type a name for the left page.
Type a name and click the Save button.
Saving the main page
Enhancing Your Web Site 89
Second you are asked to type a name for the main page.
Type a name and click the Save button.
Saving the frames page, container
Third you are asked to type a name for the frames page that contains the left and the main pages.
Type a name and click the Save button.
Now you have a frames page, gallery.html that contains two pages, left and main.
Right click on the left page and select Frame Properties.
Resizable in browser
It is possible to resize the page in the browser
if it is checked.
Show Borders
You can show or hide frame borders
Show scrollbars
You can make scrollbars visible, hidden, or visible when needed.
90 Chapter 5