1) This top image is 663 pixels wide by 201 pixels high. The font on the picture is Bell Gothic, 24 point.
The file name should follow this convention: sectionname_home_topic_number.jpg.
This caption is in the class="padding" with the background color #EEEEEE.
Δ See HTML Code for 1) Picture and Caption Δ
<img src="TrainingImages/x_home_toppic_number.jpg" width="663" height="201">
<div class="padding" style="background-color:#EEEEEE;">
1) This top image is 663 pixels wide by 201 pixels high. The font on the
picture is Bell Gothic, 24 point. The file name should follow
this convention: sectionname_home_toppic_number.jpg.
This caption is in the class="padding" with the background color #EEEEEE.
</div>
2) For the home page sections with three images use the code below. Between each column is a <td width="3" /> cell to keep the spacing:
Each image is 220 pixels wide by 200 pixels high and linked to the same location
as the "More>" links.
|
The text below is in <div class=padding"></div>
|
Each table cell is valign="top" with a background color of #EEEEEE.
|
<table summary="for layout only" width="663" border="0" cellspacing="0" cellpadding="0" hspace="0" vspace="0">
<tr>
<td width="220" height="200" valign="top" bgcolor="#EEEEEE">
<a href="varsity_sports/Football/index.asp">
<img src="images/AthleticsHome/04Bodor1.jpg" alt="Bob Bodor" width="220" height="200" border="0">
</a>
<div class="padding">
Each image is 220 pixels wide by 200 pixels high and linked to the same location
as the "<a href="news/index.asp#studentathletes" >More></a>" links.
</div>
</td>
<td width="3" />
<td width="220" height="200" align="top" bgcolor="#EEEEEE">
<a href="varsity_sports/Football/index.asp">
<img src="images/AthleticsHome/ScholarAthletes05.jpg" alt="Scholar Athletes" width="220" height="200" border="0">
</a>
<div class="padding">
The text below is in <div class=paddding"></div></div>
</td>
<td width="3" />
<td align="top" width="220" height=200 bgcolor="#EEEEEE">
<a href="varsity_sports/Football/index.asp">
<img src="images/AthleticsHome/04Abel1.jpg" alt="Cassie Abel" width="220" height="200" border="0">
</a>
<div class="padding">
Each table cell is valign="top" with a background color of #EEEEEE.
</div>
</td>
</tr>
</table>
3) Here is an example of each of the different headlines. Each headline automatically adjusts to the greatest possible width unless a width is specifically set (style="width: 50%"). Between each column is a <td width="3" /> cell to keep the spacing:
|
headline
Above is a typical headline. It is in in the class="headline".
This text in a <div class=padding"></div>
|
grey headline
The headline above is in in the class="greyheadline".
This table cell has a background color of #E2E2E2 with the text in a
<div class=padding"></div>
|
dark headline
The headline above is in in the class="darkheadline".
This table cell has a background color of #FFF9E9 with the text in a
<div class=padding"></div>
|
||
<table summary="for layout only" cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td width="219">
<div class="darkheadline">headline</div>
<div class="padding">
Above is a typical headline. It is in in the class="headline".
This text in a <div class=paddding"></div>
</div>
</td>
<td width="3" />
<td width="219" bgcolor="#E2E2E2">
<div class="greyheadline">grey headline</div>
<div class="padding">
The headline above is in in the class="greyheadline".
This table cell has a background color of #E2E2E2 with the text in a
<div class=paddding"></div>
</div>
</td>
<td width="3" />
<td width="219" bgcolor="#FFF9E9">
<div class="darkheadline">dark headline</div>
<div class="padding">
The headline above is in in the class="darkheadline".
This table cell has a background color of #FFF9E9 with the text in a
<div class=paddding"></div>
</div>
</td>
<tr>
</table>