ZAMBAK_IT_ExpressionWeb2
.pdf
Adding XML Data to the Page
It is very easy to add XML data to your page.
Copy the catalog folder from source to the web site folder in the Folder List. The catalog folder contains an XML file and images folder.
Create a new page from the Dynamic Web Template.
Move the xml file to your page.
Moving the XML file to the page
All information in the xml file is carried to the page and shown in a table.
An xml file shown in a table
Formatting the Data
Editing Columns
You can specify which fields will be displayed.
Select Data View>Edit Columns. The Edit Columns dialog box opens.
Improving Interactivity 111
You can add fields to the table.
Adding fields to table
Select the instock field in the Available fields section and click the Add button.
It is added to the Displayed Columns. You can also remove the fields from the table if you need.
You can change the positions of the fields.
Click the image field in the Displayed Columns section and click the Move Up button to carry it up.
Moving a field up
Also its position has been changed in the table. Now the image field comes after the item field.
Sorting
You can sort the data in the table by a field or fields.
Select Data View>Sort. The Sort dialog box opens.
112Chapter 6
Sorting by price in an increasing order
Select the price(number) field by which the data will be sorted and choose
Ascending in the Sort Properties and click OK.
Ascending is increasing order, Descending is decreasing order.
The data is sorted by price in the increasing order.
Filtering
You can user the filter to determine which list items will be displayed. You are going to display only the fish that are available in stock.
Select Data View>Filter. The Filter dialog box opens.
Improving Interactivity 113
Specifying filter criteria
Select instock in the Field name and type yes for the Value and click OK.
Only the list items that have the ‘yes’ value for the instock field are displayed.
Changing the Layout
You can change the layout to give a good appearance to the table.
Select Data View>Change Layout. The Change Layout dialog box opens.
Changing the layout
114Chapter 6
Choose which style you want to apply to your table and click OK.
The selected style is applied to the table.
You see that for the image only its path and name is written. To place the picture:
Select the path to the picture.
Select Data View>Format item as and click Picture.
Click Yes in the Confirm dialog box to continue.
Improving Interactivity 115
The pictures are now displayed instead of their path and names.
You can make some formatting changes here to have a good appearance.
You can also give a currency format to the price.
Select the price.
Select Data View>Format item as and click Currency.
116Chapter 6
Formatting an item as currency
Make the changes that you want and click OK.
Now the price format has been changed.
Conditional Formatting
In this table you display only the list items that have the ‘yes’ value for the instock
field. If you want to show all fields, but the fields that have the ‘no’ value for the instock field will have a different background color. So if you want to change
some formatting options depending on some conditions, you can use conditional formatting. Firstly, remove the filter to show all list items.
Select the area where you are going to apply the conditional formatting in the table.
Select Task Panes>Conditional Formatting to open it.
Applying a conditional formatting
Click the Create button and choose Apply formatting.
Improving Interactivity 117
Specifying a condition criteria
Select instock in the Field name, type no for the Value and click OK.
Specifying a background color
Specify a background color and click OK.
Now if the fish is not available in stock, it can be recognized easily since its background color is different.
Save the page and preview it in a browser.
When you save the page, two new files (.js and .xsl) will be added to your site.
When you preview the page in different browsers, you may see some warning messages for security because you use html files, and they are browser-based. To make sure that your web site will work in all browsers, you need to make server-based web sites. That is the subject of the next chapter.
118Chapter 6
Subject: Create a web site about your favorite animals.
Required features: |
|
|
|
|
|
|
|
1. |
Dynamic Web Template |
|
3. Actions; Play sound, open |
4. |
Greetings |
||
2. |
Layers and Behavior |
|
browser window, jump menu |
5. |
Flashing |
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2 |
|
|
|
|
|
|
|
|
|
|
|
|
1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
3
3
3
6
4
5
Improving Interactivity 119
Questions
1.Which one is not a feature in Expression Web?
a.Sophisticated CSS-based layouts and templates
b.Standards-based Web sites
c.Powerful PHP-based technology
d.Extensive CSS formatting and management
e.Rich data presentation
2.Which one is not true for Dynamic Web Templates?
a.DWT share the same web design
b.You can not use any number of DWT in a web site
c.You can attach a DWT to many pages
d.You can make some editable regions in DWT
e.DWT offers more control over the pages
2.How can you create an editable region? (Select two of them)
a.Select Format>Dynamic Web Template>Update All Pages
b.Right click on the page and select Manage Editable Regions
c.Select Format>Dynamic Web Template>Attach Dynamic Web Template
d.Select Format>Dynamic Web Template>Detach from Dynamic Web Template
e.Select Format>Dynamic Web Template>Manage Editable Regions
3.Which tag is a layer represented by?
a. |
td |
b. |
style |
c. |
link |
d. |
script |
e.div
4.How can you add a layer?
a.Right click on the page and select Layers
b.Format>Layer
c.Click the Insert Layer button on the standard toolbar
d.Insert>HTML>Layer
e.Format>Add layer
5.Which properties of a layer can be changed? (choose three of them)
a.Style
b.Shading
c.Position
d.Bullets and Numbering
e.Borders
6.Which behavior is used to change a picture with another picture when a mouse passes over it?
a. Swap Image |
b. Preload Images |
c. Change Property |
d. Jump Menu |
e.Popup Message
7.What is the code to write a text on the status bar?
a.prompt(“…”)
b.alert(“…”)
c.newwindow.document.write(“…”)
d.window.status=”…”
e.status.write(“…”)
8.What does XML stand for?
a.EncryptionMultimediaLocalhost
b.Extensible Markup Language
c.EncryptionMediaLink
d.ExpansionMediaLink
e.EmulationMemoryLatency
9.How do you specify which fields will be displayed?
a.Data View>Manage Data Sources
b.Data View>Change Layout
c.Data View>Edit Columns
d.Data View>Sort
e.Data View>Insert Formula
10.After applying conditional formatting in XML, which new files will be added to your site?
a. dwt and css |
b. js and xls |
c. js and css |
d. html and css |
e. js and xsl |
|
120Chapter 6