Grouping and Listing Information in Expression Web4

Hi Guys, In this article I will be demonstrating how to group information in Expression Web 4. In day to day life we often need grouping things up,for example :

Going market for getting kitchen things your mother would group pulses, Snacks, Cleaning materials etc in groups and then categorizing these groups by including related items under the group.

This is not only a quick and easy technique to remember but also helps managing things perfectly without missing items. All this is what we apply to things while grouping in applications. Here we Group things like Site maps, Softwares, Tutorials etc into a well defined group and thus listing the items thereafter. The Next term is LIsting Items, Yes listing Items is bring the items of same category in one group.

In our application we list things in three ways :

Ordered List <ol> : This list include Numbered Items for example line no in coding

Unordered List <ul> This List in clude bulleted items.

Definition List <dl> This List include Term and Definition arrangement.

Lets see how to make :

Unordered List :

Step 1 : Add a ASPX page from the File--> New--> Page--> Aspx.

Step 2 : Now you have a form in the design panel. Select split from the bottom tab and include the Group names in the code like this :

Step 3 : You will see here the tag used for unordered List is <ul></ul> and If you look in the design view the groups has been added

Step 4 : To add Items to the group you have to write the item names in the form and write the code below:

Step 5 : This same thing can also be done from the design view itself without wring the code. For this write the item names in the form select the Bullet (unordered list) button from the tool. The fig below makes it more clear:

Step 6 : Now the list is also visible in the design panel. You can add more items similarly in your group. Here the thing you'll notice is that the list of items hence added has dark rounded bullet in their starting and this is what we call unordered list because you can change the order of the items is not defined here and any item can be placed anywhere in the list.

Ordered List :

Step 1 : In the form, in design panel, Select split from the bottom tab and add the Group names in the code.

Step2 : You will see here the tag used for ordered List is <ol></ol> and If you look in the design view the group has been added

Step 2 : To add Items to the group you have to write the item names in the form, For listing items tag used is<li><li/>, ,write the code below:

Step 3 : This same thing can also be done from the design view itself without wring the code. For this write the item names in the form select the numbering (ordered list) button from the tool. The fig below makes it more clear:

Step 4 : Now the list is also visible in the design panel. You can add more items similarly in your group. Here the thing you'll notice is that the list of items hence added has numbers in their starting and that is why we call unordered list because you cannot change the order of the items here, as all the items hold specific position in the list which cannot be altered.

You can also create odrered list within an ordered list this is called nested ordered list.

For example:

1 List item1
2 LIst item 2
1 Item 1
2 Item 2
3 Item 3
3 List item 3

Step 5 : Click Save and then click Preview on the Common toolbar to preview the page in a browser. Verify that it appears as it should.

Definition list

Step 1 : In the form, in design panel, Select split from the bottom tab and add the Group names in the code.

Step 2 : You will see here the tag used for ordered List is <dl></dl> and If you look in the design view the group has been added

Step 3 : In this type of listing there are two tags used to add the items one is the <dt></dt> this tag is used to define the term which need explanation or definition for example:

Douglas Adams

I may not have gone where I intended to go, but I think I have ended up where I needed to be.
Sir Francis Bacon

Death is a friend of ours; and he that is not ready to entertain him is not at home.
J.K.Rowling
It takes a great deal of courage to stand up to your enemies, but even more to stand up to your friends.

Now in the coding part write these( in the figure below) lines to add the Items to the Definition list.

Step 4 : Now look at the code you will see a tag<dd></dd>. This tag is used to show the definitions under the main terms defined in the <dt></dt> tag. The final Definition list appears in the design panel:

Step 5 : Now save the application and see it in the browser. The output in he browser looks like this:

Output :