Spring 2013
Web Design - INF 240
Lab Session 2
Location: Niki’s restaurant.
Niki came to you while you were eating and asked you if you would develop a nice looking website for him, so
that other students can go online and check out what dishes his place offers. Being a nice person, you agreed
to help and here the story begins …
Technical part: you need to use HTML for generating
a List:
Display a list of ingredients for a recipe, and a
a Table: Advertise what meals are available on different days.
You are provided with some setup for the Web page – Start Lab 2.html
1)
Add an image or the logo of your website. You may use the logo, title_welcome.gif, provided with this
tutorial or find and prepare another image using the Windows Paint application.
To add an image, provide the image name for src attribute of the img html element:
<img src="image_name_goes_here" style="margin-left: 24%; width: 52%;"/>
The result so far should be
Note: The reason for providing a skeleton with sizing and proportions of the page is to let you focus on the
design of the page. You are free to change positioning of any element or add more elements as you wish.
2)
Create a menu list to navigate between different menu items
To create the food menu as shown below:
-
The header menu is just an unordered list of items, which are also hyperlinks
Look in the body section to find the div with the “navcontainer” id
Create an unordered list inside this div with five items
Here is an example of how one of the list items should look like:
<li><a href="#">Musaka</a></li>
The <a> element creates a hyperlink which is set to # - this link will not go anywhere! But for this tutorial that is
OK.
Use the following items for the list: Musaka, Shopska Salad, Cheese, Vegetables, Fruit
After you have added the list items, refresh your page in the browser and you will see the list as follows
Once you have created the list with five items/hyperlinks, you will need to style it. Look for the empty
“#navcontainer ul li a” in the style tags inside the head section.
Here add the styles that will be applied to navigation menu as follows.
Remove text decoration, i.e. the link underline
Set padding as follows: padding: 0.2em 1em;
Set the font color to white
Set the background color to #036;
Now move on to the next item under “#navcontainer ul li a”, which is “#navcontainer ul li a:hover” here we will
specify list items’ styling that should take place when a user hovers a mouse cursor over the list.
Set the font color as white
Set the background color to #369
You should get the following result
3)
Now add a table with two columns and three rows.
-
The first row will contain two headers: Ingredients and Picture
The second row will contain a list of ingredients in the first column and an image of the dish in the
second column.
The ingredients should be: grated cheese, cucumbers, tomatoes, cheese, pepper, onions, olives.
The last row will contain the price and some text. This row will span to columns, thus we will need
to use colspan="2" in the <td> tag. You could add this text here: <p>The price is very affordable,
just 20 leva :)</p>
You should get the following result:
Note: to add a text before the list items of unordered list, just put the text in the column before <ul> tag.
We almost there - we just need to add some styling and footer information and we are done 
Set the border attribute for the table to be 1
Locate the .table item in the style block in the head section and add the following styling properties:
margin-left: 15%; /* so that the table is well positioned in the browser window, change if needed*/
margin-top: 1%;
padding: .3em; /*so that the table has a nice borders*/
width: 52%; /*adjust the width if needed so that all elements on the page look unified*/
background-color: #F0F0F0;
Now let us change the bullet points to a custom image. You may use the star image provided star, or you could
use any other image.
All you need to do is to add one line to the “.table ul” element in the style block
list-style-image:url('GoldStarGif.gif'); /*this will apply an image specified as a style for the list*/
4)
Now, let us also add a list to the footer. Locate the div element with id footer in the body section and
add the following. (Again, this creates an empty hyperlink.)
<ul>
<li><a href="#"> </a></li>
</ul>
You should add three list items: About Niki, About Main Cook, Contact US
Now, let us add some styling to the footer. Locate the #footer in the style block in the head section and add the
following (This contains CSS3 styling which will be explained later in the course.):
border: 2px solid black;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-khtml-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
Now below #footer is a styling for the ul HTML tag which is inside the footer. Add also styling to “#footer ul” as
follows:
list-style-type: none; /*to remove the bullet point*/
text-align: center; /*to place the lists text in the center*/
5)
Now we need to add the final touch, which is a styling and the background for the body div that wraps
the whole content within the page.
Locate the #body element in the style block and add the following:
border: 2px solid black;
border-radius: 10px 10px 0 0; /*the border radius adds a nice curve to the edges of the page content*/
-moz-border-radius: 10px 10px 0 0; /*different browsers require different adjustments*/
-khtml-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
background: url('SetWidth1300-RestaurantGallery2.jpg'); /*we also adding the background image*/
More information on the topics discussed can be found here:
For Lists: css.maxdesign.com.au/listutorial/horizontal_master.htm
For Tables: http://www.tizag.com/htmlT/tables.php