Web Design 1: Unit 5. Tutorial 5- KPAF Radio

Unit 5. Tutorial 5- KPAF Radio

Tutorial 5

KPAF Radio

1. Open the schedtxt.htm and kpaftxt.css files in your student data files. Enter your name and the date in the comment section of each file. Save the files as schedule.htm and kpaf.css, respectively in the same folder.

2. Open the schedule.htm file and insert the following link element directly above the closing </head> tag:

<link href= “kpaf.css” rel= “stylesheet” type= “text/css” />

3. Save your changes to the file and open the schedule.htm file in your web browser to view the appearance.

4. We are now going to learn how to insert a Web table. Return to the schedule.htm file. Directly above the closing </section> tag, insert the following code: (This will set up the table but you will still need to add the content)

<table class= “schedule”>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

5. To insert the table headings, insert the following th elements between the first <tr> </tr> tags:

<tr>

<th>Time</th>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>

<th>Friday</th>

<th>Saturday</th>

<th>Sunday</th>

</tr>

6. In the second row of the table, insert the following heading:

<tr>

<th>6:00</th>

</tr>

7. In the third row of the table, insert the following heading:

<tr>

<th>6:30</th>

</tr>

8. Now we have to add the table data. Within the second table row, add the following seven td elements after the initial th element:

<td>National News</td>

9. Within the third table row, add the following seven td elements after the initial th element.

<td>Local News</td>

10.By default, no gridlines are displayed in a Web table, making it difficult to see the table structure. We will now learn how to add a border and how to set the width of this border. To add a border, we will use the border attribute. Return to the schedule.htm file and add the attribute border= “1” to the table element as shown below:

<table class= “schedule” border= “1”>

11.Save your changes to the file and then reload the schedule.htm file in your Web browser to see the added border.

12.Some programs are longer than a half hour, and some are repeated across several days. Rather than repeat the names of programs in all of the half hour slots, you could stretch table cells across those hours and days so that the information can be entered only once. To do this, you create a spanning cell, which is a single cell that occupies more than one row or one column in a table. Spanning cells are created by adding either or both of the following rowspan and colspan attributes.

To create a table cell that spans several columns, add the colspan= “columns” attribute to the cell where columns is the number of columns covered by the cell.

To create a table cell that spans several rows, add the rowspan= “rows” to the cell where rows is the number of rows covered by the cell.

13.Return to the schedule.htm file and add the attribute colspan= “7” to the second table cell in both the second and third rows of the table. Then delete the remaining six cells in both the second and third table rows.

<tr>

<th>6:00</th>

<td colspan= “7”>National News</td>

</tr>

<tr>

<th>6:30</th>

<td colspan= “7”>Local News<.td>

</tr>

14.Save your changes to the file and then refresh the schedule.htm file in your Web browser. See the revised version of your Web table.

15. To make the cells for the hour-long shows on Monday through Thursday, you’ll need to span two rows, which lengthens the height of each cell. Return to the schedule.htm file and add the following row to the bottom of the schedule table:

<tr>

<td rowspan= “2”>Opera Fest</td>

<td rowspan= “2”>Radio U</td>

<td rowspan= “2”>Science Week</td>

<td rowspan= “2”>The Living World</td>

</tr>

16.Add the following code for the next row, which adds table cells only for the two programs that start at 7:30:

<tr>

<td>Brain Stew</td>

<td>Bismarck Forum</td>

</tr>

17.Save your changes to the file and then refresh the schedule.htm in your Web browser to view the added programs to the schedule.

18.The final part of the evening schedule includes the program The Classical Musical Connection, which spans two hours on Monday through Thursday. Return to the schedule.htm file and enter the following table row for programs airing starting at 8:00:

<tr>

<td rowspan= “4” colspan= “4”>The Classical Music Connection</td>

<td>Old Time Radio</td>

<td rowspan= “4”>Saturday Nite Jazz</td>

<td rowspan= “4”>The Indie Connection</td>

</tr>

19.The Inner Mind is the only program that starts at 8:30 during the week. Add the 8:30 starting time and the program to the table using the following row:

<tr>

<td>The Inner Mind</td>

</tr>

20.The only program that starts at 9:00 is Open Mike Nite. Add the following row to the table to display this program in the schedule:

<tr>

</tr>

21.There are no programs that start at 9:30, so you’ll add the table row but without any program listed. Add the following:

<tr>

</tr>

22.Complete the schedule table by adding the last table row for the World News Feed occurring every night from 10:00 to 10:30. This single program occupies a single row and spans seven columns. Add the following:

<tr>

<td colspan= “7”>World News Feed</td>

</tr>

</table>

23.Save your changes to the file and then reload the schedule.htm file in your Web browser to see the completed schedule.

24.We are now going to add a Table Caption that indicates that all times in the schedule are based on the Central Time Zone. Return to the schedule.htm file and insert the following caption element directly below the opening <table class= “schedule” border= “1” tag:

<caption>All Times Central</caption>

25.Save your changes to the file and refresh the schedule.htm file in your Web browser to view the centered caption above the Web table.

26. You can combine sections of rows into Row Groups in which each row group represents a different collection of table data or information. HTML supports three row groups: one to mark the header rows, another for the body rows and a third for the footer rows. The syntax to create these three row groups is:

<table>

<thead>

table rows

</thead>

<tfoot>

table rows

</tfoot>

<tbody>

table rows

</tbody>

</table> where table rows are rows from the Web table. The purpose of row groups is to allow you to create different styles of groups of rows in your table. Return to the schedule.htm file and enclose the first row of the table within an opening and closing set of <thead> tags. Then enclose the remaining rows of the table within an opening and closing set of <tbody> tags as follows:

<caption>All Times Central</caption>

<thead>

<tr>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>

<th>Friday</th>

<th>Saturday</th>

<th>Sunday</th>

</tr>

</thead>

<tbody>

<tr>

<td colspan= “7”>National News</td>

</tr>

<tr>

<td colspan= “7”>Local News<.td>

</tr>

<tr>

<td rowspan= “2”>Opera Fest</td>

<td rowspan= “2”>Radio U</td>

<td rowspan= “2”>Science Week</td>

<td rowspan= “2”>The Living World</td>

</tr>

<tr>

<td>Brain Stew</td>

<td>Bismarck Forum</td>

</tr>

………………………………………..

<tr>

<td colspan= “7”>World News Feed</td>

</tr>

</tbody>

</table>

27.Marking Column Groups gives you the ability to assign a common format to all of the cells within a given column. Column groups are defined using the <colgroup></colgroup> element. Once you create a column group, you can add id or class attributes to identify or classify individual columns. Also, you can use the span= “” attribute to determine the number of columns spanned by the column element. Return to the schedule.htm file. Directly below the caption element, insert the following colgroup element:

</colgroup>

28.Save your changes. Creating row groups and column groups should not alter its appearance. Refresh the schedule.htm file in your browser to verify that your table layout is the same.

29.Now that the schedule is completed with its content, we are going to format the table’s appearance using HTML Attributes. Web tables were developed before CSS so HTML supports several attributes for controlling the layout and appearance of a table. The attribute <table cellspacing= “” controls the amount of space between the table cells. The attribute <table cellpadding= “” controls the spacing between cell contents and the cell border. Return to the schedule.htm file. Within the opening <table> tag, insert the following attributes:

<table class= “schedule” border= “1” cellspacing= “3” cellpadding= “5” >

30.Save your changes to the file and then reopen the schedule.htm in your Web browser to see the spaces between and within the table cells have increased.

31.You can also use HTML to align the contents of each table cell. The default is to place the text in the middle of the cell. To choose a different placement, you apply the valign= “position” where position is top, middle, bottom or baseline. Return to the schedule.htm file. Within the opening <tbody> tag, insert the following attribute:

32.Save your changes to the file and then reload the schedule.htm file in your Web browser. The text should be aligned at the top of the cells.

33.We have just learned how to format tables with HTML. Now we are going to learn how to format Web tables with CSS. Open the tabletxt.css file from your student data files. Enter your name and the date in the comment section and save the file as tables.css in the same folder.

34.Return to the schedule.htm file and insert the following link element directly above the closing </head> tag:

35.Because you’ll be replacing the HTML attributes with CSS styles, delete the border, cellpadding and cellspacing attributes from the opening <table> tag.

36.Delete the valign attribute from the opening <tbody> tag.

37. Save the changes to the file.

38.The first styles that you will apply to the program schedule are the border styles. Return to the tables.css file and add the following style to apply a border to the entire Web table:

/* Styles for the schedule table */

table.schedule{

border: 10px outset rgb(153, 0, 153);

}

39.Add the following style to apply borders to each table cell:

table.schedule th, table.schedule td{

border: 1px solid gray;

}

40.Save your changes to the style sheet and then reload the schedule.htm file in your Web browser to see the borders that have been added to the entire table and to each table cell.

41. The default for table borders is to draw separate borders around the table cells and the entire table. The other approach is to collapse the borders in upon each other using the border-collapse: type; style. Return to the tables.css file and add the following style to the table element:

border-collapse: collapse;

42.Save your changes and reload the schedule.htm in your Web browser to see the revised table design with the collapsed borders layout.

43. Next we are going to change the table text to a sans-serif font that is 0.75 em units in size. Also, we will change the text in the header row to be displayed in a semi-transparent white font on a purple background and that the first column of the schedule, which contains the program times to appear on a light yellow background. Return to the tables.css file and add the following styles to the style rule for the table.schedule selector;

font-family: Arial, Helvetica, sans-serif;

font-size: 0.75em;

44.At the bottom of the file, add the following style rule for the header of the schedule table:

/* Table header styles */

table.schedule thead{

background-color: rgb(203, 50, 203);

color: white;

color: rgba(255, 255, 255, 0.5);

}

45.Finally, add the following style for the first column of the schedule table:

/* Styles for the first column */

table.schedule col.firstCol{

background-color: rgb(255, 255, 192);

}

46.Save your changes to the style sheet and then reload schedule.htm in your Web browser to see the revised table design.

47.Reducing the font size and changing the font family have resulted in a more compact table and could be difficult to read. We are going to change the width of the table to 100% to use the page space efficiently. Return to the tables.css file and add the following style to the table element:

width: 100%;

48.Save the changes to the file and reload the schedule.htm in your Web browser to see the layout of the enlarged table.

49.You will notice that the column widths are inconsistent because the columns with more text are wider than those with less text. We will set the column widths to the table itself. Return to the tables.css file and add the following style to the style rule for the firstCol selector:

width: 7%;

50.Directly below the style rule for the firstCol selector, add the following style rule to set the widths of the columns in the dayCols class to 13%:

/* Styles for the remaining columns */

table.schedule col.dayCols{

width: 13%;

}

51.Save your changes to the file and reload schedule.htm in your Web browser to see the revised layout of the table.

52.We will also increase the heights of the table rows to provide more visual space for the table contents. Return to the tables.css file and add the following styles directly below the style rule for the table.schedule thead selector:

table.schedule thead tr{

height: 50px;

}

/* Table body styles */

table.schedule tbody tr{

height: 40px;

}

53.Save your changes to the file and then reload schedule.htm in your Web browser. Verify that the heights in the table header and table body have changed.

54. We are now going to align the program names in the schedule with the tops of the cell borders with the vertical-align property. We will also increase the padding within each cell to add more space between the program names and the cell border. Return to the tables.css file and add the following style rule:

table.schedule tbody td{

padding: 5px;

vertical-align: top;

}

55.Save the changes to the file and then reload the schedule.htm in your Web browser to see the changes.

56. The table design is looking good; however, we are going to align the table caption with the bottom-right-corner of the table. Return to the tables.css file and add the following style rule to the bottom of the file:

/* Styles for the table caption */

table.schedule caption{

caption-side: bottom;

text-align: right;

}

57.Save your changes and then reload the schedule.htm file in your Web browser to see the caption positioned in the bottom-right corner of the table.

58. The last change that we will make to the Web page is to break up the introductory paragraph into columns. We will have to use browser extensions with this style rule. Return to the tables.css file and add the following style rule to the bottom of the file:

/* Two column layout for the introductory paragraph */

section#main p{

-moz-column-count: 2;

-webkit-column-count: 2;

column-count: 2;

-moz-column-gap: 20px;

-webkit-column-gap: 20px;

column-gap: 20px;

-moz-column-rule: 2px solid rgb(153, 0, 153);

-webkit-column-rule: 2px solid rgb(153, 0, 153);

column-rule: 2px solid rgb(153, 0, 153);

}

59. Save your changes and reload the schedule.htm file in your Web browser to see the completed design of the nightly schedule.

Web Design 1

Thursday, June 26, 2014

Unit 5. Tutorial 5- KPAF Radio

No comments:

Post a Comment