ZAMBAK_IT_ExpressionWeb2
.pdf
Insert a picture into the left page.
Moving a picture to the page
Right-click the picture and select Auto Thumbnail to make its thumbnail.
Making an
Auto
Thumbnail
When you click the thumbnail, the picture opens. You need to display the picture on the main frame.
Right-click the thumbnail and select Hyperlink Properties.
Click the Target Frame button in the Edit Hyperlink dialog box.
thumbnail size:
the Tools>Page Editor and click Auto tab.
Opening target frame
Click the main frame in the Current frames page section and click OK.
Choosing a target frame
Do the same actions for all pictures which you want to include in your photo gallery.
Enhancing Your Web Site 91
Insert the first picture of the photo gallery into the main page in order not to leave the page empty initially.
Save and preview the page.
When you save the page, you will be asked to save the images that are created for the thumbnails.
Saving thumbnail images
Preview - A frames page
Specify a folder to save the images in and click OK.
Click the thumbnails on the left page to see how the pictures change on the right.
92 Chapter 5
Subject: Create a web site about popular cities of your country
Required features: |
4. |
Multimedia – Video |
|
1. |
Lay out pages with CSS |
5. |
Multimedia – Page Transition |
2. |
Styling headings, hyperlinks, images with CSS |
6. |
Photo Gallery - Frames |
3. |
Multimedia – Flash |
|
|
2 1
2 |
3 |
|
5
6
4
Enhancing Your Web Site 93
Questions
1.What does CSS refer to?
a.Changing Style Sheets
b.Cascading Style Shapes
c.Cascading Style Sheets
d.Changing Style Shapes
e.Converting Style Shapes
2.Which of the following ways are the uses of CSS? (choose three of them)
a.Embedded Style Sheet
b.External Style Sheet
c.Internal Style
d.Inline styles
e.Merged Style Sheet
3.‘This style can be used many times on a page and starts with a dot.(.mystyle)’
Which CSS type is explained above?
a.Embedded Style Sheet
b.ID-based style
c.Tag-based style
d.Merged Style Sheet
e.Class-based style
4.Which style category options are used to locate your page at the center of the window?
a.Set the ‘text-align’ option to ‘auto’ in the ‘Box’ category
b.Set the ‘right’ and ‘left’ options to ‘auto’ in the ‘Position’ category
c.Set the ‘position’ option to ‘absolute’ in the ‘Position’ category
d.Set the ‘right’ and ‘left’ margins to ‘auto’ in the ‘Box’ category
6.Which sound format is NOT supported for the background sound in EW?
a.MP3
b.WAV
c.MID
d.RAM
e.AIF
7.Which one is a way to add a video to your page?
a.Insert>Picture>From File
b.Insert>Media>Windows Media Player
c.Insert>Media>Flash Movie
d.File>Import>File
e.Insert>Video
8.How can you create special effects that are displayed when a site visitor enters or leaves your site?
a.Insert>Symbol
b.Format>Background
c.Format>Behaviors
d.Insert>Bookmark
e.Format>Page Transition
9.Which one do you select in Frame Properties to resize a frames page in a browser?
a.Relative for Frame size
b.Show Borders
c.Resizable in browser
d.Percent for Frame size
e.If Needed for Show scrollbars
10.How can you specify a new thumbnail size for pictures?
e.Set the ‘float’ to ‘center’ in the ‘Layout’ category
5.How can you remove the background color from a Flash object?
a.Select Best for Quality in the Movie section
b.Select Automatic for the Background color in the Movie section
c.Select ‘keep aspect ratio’ in the Size section
d.Select Transparent for Background color in the Movie section
e.Select ‘No border’ for the Scale in the Movie section
a.Tools>Page Editor Options>AutoThumbnail
b.Tools>Page Editor Options>Picture
c.Tools>Application Options>AutoThumbnail
d.Tools>Customize>Toolbars
e.Tools>Customize>Options
94 Chapter 5
a Dynamic Web
Template
File>New>Page and Dynamic Web from General on the
tab.
You can select the division easily. When you see the mouse pointer like in the picture, click once and it is selected.
96 Chapter 6
Dynamic Web Templates
Dynamic Web Templates are used to create Web pages that share the same web design or layout and you can make some editable regions in a template while preventing changes to other regions in that template. Dynamic Web templates are pages that have been divided into parts that can be edited and parts that must remain unchanged. In this way, you can rest assured that the page's layout and design remain consistent, even when several people work on the site.
Most of the Web sites on the Internet today are each made up of pages that contain a lot of duplicated content. Dynamic Web Templates share an entire layout and offer much more control over the parts of your pages that are available for editing. You can easily attach the design to any number of pages that you want. You will have the advantage of updating the template in one single location and of having those changes immediately affect all of the pages attached to the Dynamic Web Template.
You can create and use any number of Dynamic Web Templates on a Web site and then change the look of the web site by switching the Dynamic Web Template attached to that page.
In this chapter you will create a Web site about Fascinating Animals.
Creating a Dynamic Web Template
Create an empty Web site and create Web pages in the Folder list.
You are going to use a CSS layout in your template page, so firstly create a new page with CSS layout.
Select File>New>Page and choose your CSS layout on the Page tab.
Page divisions are inserted into the page. You don’t need top_nav division, so you can delete it.
Select the top_nav division and press the Del key
Set a value for the division’s width, 800 and put a 10
pixel space from the left and top. |
The created Web pages |
|
Click the Save button on the common toolbar. The Save As dialog box opens.
Selecting the dynamic web template type
Select Dynamic Web Template for the Save as type and type a name template.dwt in the File name.
After saving the template page, the Save As dialog box opens again to save CSS file.
Type a name for the CSS file layout.css.
You have just created a dynamic web template. You need to make a web design that will be used and remain unchanged in all pages of the Web site and define some editable regions that can be modified in other pages.
Copy the images folder from the source in the Folder List and insert the objects that you want to share in the pages.
Create hyperlinks to pages.
Change the background color setting to the same color as the menu picture.
A picture for a banner prepared in Photoshop, inserted into the
Pictures for masthead division. prepared in Photoshop,
inserted into the left_col division.
A Web page design
Adding an editable region
Click on the page where you want to put an editable region, page_content division.
Select Format>Dynamic Web Template>Manage Editable Regions
or
Right click on the page and select the Manage Editable Regions from the popup menu.
The Editable Regions dialog box opens.
When you are in the editable region,
if you open the Editable Regions dialog box,
you will see the Rename button instead of the Add button
Remove is used to delete the editable region
Adding an editable region
Improving Interactivity 97
An added editable region
To select many pages
in the Folder list,
hold down CTRL and click each page you want.
Type a name for the region in the Region name text box and click Add.
The main region is added to the page and denoted by boxes with orange borders
You can add many regions in this way.
Click Close and save the page.
Any page created from this template is only editable in the regions that have been defined.
After creating a Dynamic Web Template, you can attach it to the pages which will be affected.
Attaching a Dynamic Web Template to the Pages
If you want to attach a page, open it. If you want to attach the dynamic Web template to more than one page, select the pages you want.
Select the pages which are listed in the menu picture.
Select Format> Dynamic Web Template> Attach Dynamic Web Template.
Selecting a DWT to attach
98 Chapter 6
Locate and click the dynamic Web template you want to attach and then click
Open.
It warns you that the template will be applied and make changes on the page, click Yes to continue.
The Dynamic Web Template is attached to the selected files and then the files are updated.
You can open any page and see that the dynamic web template has been applied to the page.
After a page has been attached to a dynamic Web template, any change to the template can be applied automatically to that page. Whenever you save the template file after making a change, Expression Web asks if the pages using the template should be updated.
Detaching Files from a Dynamic Web Template
Select the file or files that you want to detach from the Dynamic Web Template.
Select Format>Dynamic Web Template>Detach from Dynamic Web Template.
Although you detach files from the Dynamic Web Template, the formatting of the page stays. If you want to change the look, you need to edit the page.
Fill in the pages with text and pictures from a source.
Define the h2, h3 styles with the following settings:
h2
Improving Interactivity 99
h3
Layers and Behaviors
A layer is a container that you can place anywhere on your page. It can hold anything such as text, pictures, tables, or even a video.
A layer is defined as an absolutely positioned Division and is represented by the <div> tag.
You can overlap, nest, and show or hide layers on a page. You can also animate layers by using Behaviors which add script to any element in a page.
You will learn this subject on an example as shown:
Normal view |
Mouse over view |
In the left view there is no text in the middle, but in the right view when you move your mouse on to the picture, Ants, a text is displayed. The text is written in a layer and animating the layer is performed by behaviors.
Adding a Layer
Select Insert>HTML>Layer. The layer1 is added to the page.
Click the layer, resize, and move it where you want on the page.
An inserted layer |
Resizing a layer |
100Chapter 6