| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/_Archive/MMDT1021/ |
Upload File : |
<?
// Lab05.php
$TRACK = "<b>".basename(__FILE__).'</b> <span class="pv_fl">('.__FILE__.")</span>\n<ol>\n";
ini_set('include_path',ini_get('include_path').PATH_SEPARATOR.$_SERVER['DOCUMENT_ROOT']."/"); // Add the DOCUMENT_ROOT to the include_path.
$skipAuthentication = true;
$thisFile=__FILE__; $thisLine=__LINE__; include('application.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('Course/courseInfo.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('classInfo.phpinc');
$assignmentNumber = 7;
$assignmentType = "Lesson";
$assignmentTitle = "Working with Style Sheet Files";
$evaluationNumber = 5;
$evaluationType = "Lab";
$evaluationTitle = "Working with Style Sheet Files";
if (!isset($evaluationNumber)) { $evaluationNumber = $assignmentNumber; }
if (strlen($assignmentNumber) == 1) { $assignmentName = $assignmentType."0".$assignmentNumber; $evaluationName = $evaluationType."0".$evaluationNumber; } else {
$assignmentName = $assignmentType.$assignmentNumber; $evaluationName = $evaluationType.$evaluationNumber; }
$title = $evaluationType." ".$evaluationNumber.": ".$evaluationTitle;
$headTitle = '_CST_ - '.$courseNumber.' '.$courseTitle.' - '.$title;
$pageTitle = $courseNumber.' '.$courseTitle.'<br>'.$title;
$pageMenu = 'Course/courseMenu.phpinc';
$smallTitle = true;
$thisFile = __FILE__; $thisLine=__LINE__; include('common/pageHeader.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('Login/authenticate.phpinc');
$sectionTitle = $courseNumber.' '.$courseTitle.' - '.$title;
$thisFile = __FILE__; $thisLine=__LINE__; include('common/sectionHeader.phpinc');
?>
<script type="text/javascript">
document.write ('document.compatMode='+document.compatMode+'<br>');
</script>
<p>
<fieldset><legend><?=$evaluationType?> Assignment</legend><span class="normal">
In this lab you are going to continue using Cascading Style Sheets (CSS). You will demonstrate competence in the use of the external style sheet; inline styles; and will use the <b>color</b>, <b>font-size</b>, <b>border</b>, and <b>background-color</b> property/value pairs.
<br />
Create a <b><?=$evaluationName?></b> folder and keep all files for this lab in that folder.
<br />
Please follow the instructions below to complete this lab.
<br />
<ol>
<li>Create a web page file named <b><?=$evaluationName?>.htm</b>.
<ol type="a">
<li>Specify a <b>DOCTYPE</b> as the very first line in the HTML document.</li>
<li>Insert a comment before the <b>head</b> section containing the text <b><?=$evaluationType?> <?=$evaluationNumber?> - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
<li>Set character encoding to UTF-8, UTF-16, or another character set of your choice.</li>
<li>Title the page <b><?=$evaluationType?> <?=$evaluationNumber?> - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
<li>Put an <b>h2</b> heading in the body containing the text <b><?=$evaluationType?> <?=$evaluationNumber?> - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
</ol>
</li>
<li>Place the following code into the <b>body</b> section:</li>
<ol type="a">
<li>Place a div with an id of <b>banner</b>. Place some text in it.</li>
<li>Place a div with an id of <b>announce</b>. Place some text in it.</li>
<li>Add 5-10 lines of text between the div above and the one following.</li>
<li>Place a paragraph with a class of <b>para</b>, and an inline style that sets the font-style to italic. Place some text in it.</li>
<li>Place a line break that sets clear="all".</li>
<li>Place a div with an id of <b>footer</b>. Place some text in it.</li>
</ol>
<li>Copy the file Lab05.htm to Lab05a.htm and make the following changes:
<ol type="a">
<li>Change the <b>5</b> in the comment, title, and h2 element to <b>5a</b>.</li>
<li>Add a <b>link</b> in the <b>head</b> section to the style sheet <b>style1.css</b>.</li>
</ol>
</li>
<li>Copy the file Lab05.htm to Lab05b.htm and make the following changes:
<ol type="a">
<li>Change the <b>5</b> in the comment, title, and h2 element to <b>5b</b>.</li>
<li>Add a <b>link</b> in the <b>head</b> section to the style sheet <b>style2.css</b>.</li>
<li>Remove the inline style from the <b>para</b> class paragraph.</li>
</ol>
</li>
<li>Create a style sheet file named <b>style1.css</b> and add the following styles:
<ol type="a">
<li>A <b>body</b> style with the following property/value pairs:
<ol type="i">
<li>Background color of #E8FFE8.</li>
<li>Font style of normal.</li>
</ol>
</li>
<li>An style id named <b>banner</b> with the following property/value pairs:
<ol type="i">
<li>Background color of #000000.</li>
<li>Double border that is 5px wide with a color of #FFFF00.</li>
<li>Font color of #FFFF00.</li>
<li>Font size of 24px.</li>
<li>This code exactly: <b>margin:0 auto;</b> (this will center the banner).</li>
<li>Bottom margin of 20px.</li>
<li>Padding of 3px.</li>
<li>Align the text to the center.</li>
<li>Width set to 400px.</li>
</ol>
</li>
<li>An style id named <b>nav</b> with the following property/value pairs:
<ol type="i">
<li>Background color of #FFFF00.</li>
<li>Font color of #0000FF.</li>
<li>Float it to the left.</li>
<li>Font weight of bold.</li>
<li>Right margin of 1em.</li>
<li>Padding of 3px.</li>
<li>Padding on the right of 10px.</li>
<li>Align the text to the right.</li>
<li>Width set to 100px.</li>
</ol>
</li>
<li>An style id named <b>announce</b> with the following property/value pairs:
<ol type="i">
<li>Solid border that is 1px wide with a color of #009900.</li>
<li>Font color of #009900.</li>
<li>Float it to the right.</li>
<li>Font weight of bold.</li>
<li>Margin of 3px.</li>
<li>Padding of 3px.</li>
<li>Width set to 21em.</li>
</ol>
</li>
<li>A style class named <b>para</b> with the following property/value pairs:
<ol type="i">
<li>Font color of #0000FF.</li>
<li>Font style of normal.</li>
</ol>
</li>
<li>A style id named <b>footer</b>
<ol type="i">
<li>Font color #000066.</li>
<li>Font size of 0.8em.</li>
<li>This code exactly: <b>margin:0 auto;</b> (this will center the footer).</li>
<li>Top margin of 20px.</li>
<li>Align the text to the center.</li>
<li>Width set to 400px.</li>
</ol>
</li>
</ol>
</li>
<li>Create a style sheet file named <b>style2.css</b> and add the following styles:
<ol type="a">
<li>A <b>body</b> style with the following property/value pairs:
<ol type="i">
<li>Background color of #FFFFCC.</li>
<li>Font color of #000099.</li>
<li>Font style of normal.</li>
<li>Align the text to the justify.</li>
</ol>
</li>
<li>An style id named <b>banner</b> with the following property/value pairs:
<ol type="i">
<li>Background color of #FFFF00.</li>
<li>Solid border that is 1px wide with a color of #FF0000.</li>
<li>Font color of #000000.</li>
<li>Font size of 18px.</li>
<li>Font style of italic.</li>
</ol>
</li>
<li>An style id named <b>nav</b> with the following property/value pairs:
<ol type="i">
<li>Background color of #000099.</li>
<li>Font color of #FFFF00.</li>
<li>Float it to the right.</li>
<li>Font size of 1.2em.</li>
<li>Font weight of bold</li>
<li>Margin of 3px.</li>
<li>Padding of 10px.</li>
<li>Width set to 150px.</li>
</ol>
</li>
<li>An style id named <b>announce</b> with the following property/value pairs:
<ol type="i">
<li>Background color of #009900.</li>
<li>Clear right</li>
<li>Font color of #FFFFFF.</li>
<li>Float it to the right.</li>
<li>Margin of 3px.</li>
<li>Padding of 10px.</li>
<li>Width set to 150px.</li>
</ol>
</li>
<li>A style class named <b>para</b> with the following property/value pairs:
<ol type="i">
<li>Font color of #009900.</li>
<li>Font style of normal.</li>
</ol>
</li>
<li>A style id named <b>footer</b>
<ol type="i">
<li>Background color of #FFFF00.</li>
<li>Solid border that is 1px wide with a color of #FF0000.</li>
<li>Font color #000066.</li>
<li>Font size of 0.8em.</li>
<li>Align the text to the right.</li>
</ol>
</li>
</ol>
</li>
<li>Submit this assignment for evaluation.
<ol type="a">
<li>Zip up the <b><?=$evaluationName?></b> folder into a file called <b><?=$evaluationName?>.zip</b>.</li>
<li>Send the <b><?=$evaluationName?>.zip</b> file as an attachment using email to <b>jim.martinson@ridgewater.edu</b> with a subject of <span style="white-space:nowrap;"><b><?=$courseNumber?> <?=$evaluationName?> submission</b></span>.</li>
<li>If you are not using Ridgewater's email system then enter your name as the first line of the message.</li>
</ol>
</li>
</ol>
Even though you have previously used CSS it is a complex language with many options.<br />
As an aid the property/value pairs that were used to complete the examples for this assignment are listed below:<br />
background-color:#000000;<br />
background-color:#000099;<br />
background-color:#009900;<br />
background-color:#E8FFE8;<br />
background-color:#FFFF00;<br />
background-color:#FFFFCC;<br />
border:1px solid #009900;<br />
border:1px solid #FF0000;<br />
border:5px double #FFFF00;<br />
clear:right;<br />
color:#000000;<br />
color:#000066;<br />
color:#000099;<br />
color:#0000FF;<br />
color:#009900;<br />
color:#FFFF00;<br />
color:#FFFFFF;<br />
float:left;<br />
float:right;<br />
font-size:0.8em;<br />
font-size:1.2em;<br />
font-size:18px;<br />
font-size:24px;<br />
font-style:italic;<br />
font-style:normal;<br />
font-weight:bold;<br />
margin-bottom:20px;<br />
margin-right:1em;<br />
margin-top:20px;<br />
margin:0 auto;<br />
margin:3px;<br />
padding-right:10px;<br />
padding:10px;<br />
padding:3px;<br />
text-align:center;<br />
text-align:justify;<br />
text-align:right;<br />
width:100px;<br />
width:150px;<br />
width:21em;<br />
width:400px;<br />
These property/value pairs are listed in alphabetical order and do not include the <i>selectors</i> which determine which elements are affected by a style rule declaration. Also, these are not the only solutions. For instance, <b>border:1px solid #009900;</b> could have been <b>border-width:1px; border-style:solid; border-color:#009900;</b>, etc.
</span></fieldset>
<fieldset><legend>Example <span class="normal">- Your result should look similar to the page below:</span></legend>
<p>
<?=$evaluationName?>.htm Example:<br />
<img src="<?=$evaluationName?>.jpg" alt="<?=$evaluationName?> Example" />
</p>
<p>
<?=$evaluationName?>a.htm Example:<br />
<img src="<?=$evaluationName?>a.jpg" alt="<?=$evaluationName?>a Example" />
</p>
<p>
<?=$evaluationName?>b.htm Example:<br />
<img src="<?=$evaluationName?>b.jpg" alt="<?=$evaluationName?>b Example" />
</p>
</fieldset>
<fieldset><legend>Notes</legend><span class="normal">
In <b>Lab05.htm</b> only the <b>para</b> class paragraph shows any style. This is because of the inline style that sets the font style to italic.
<br />
In <b>Lab05a.htm</b> even though the <b>para</b> class in the <b>style1.css</b> file has a font style of normal the <b>para</b> class paragraph has italic text. This is because the inline style of italic overrides the style in the <b>style1.css</b> file.
<br />
In <b>Lab05b.htm</b> with the inline style removed from the <b>para</b> class paragraph the style in the <b>style2.css</b> file now takes effect.
</span></fieldset>
<fieldset><legend>Grading Criteria</legend><span class="normal">
Demonstrated assignment effectively: 10 points.
<br />
There are some things I expect. If they are incorrect you will lose the following:
<br />
Incorrect attachment file name: -1 pt.
<br />
Work submitted incorrectly: -1pt.
<br />
Incorrect subject in email: -1pt.
<br />
Second and subsequent submission of work for grading: -1pt.
<br />
Work submitted late: -1pt.
</span></fieldset>
<?
$thisFile=__FILE__; $thisLine=__LINE__; include('ReferencesResources.phpinc');
$thisFile = __FILE__; $thisLine=__LINE__; include('common/sectionFooter.phpinc');
$thisFile = __FILE__; $thisLine=__LINE__; include('common/pageFooter.phpinc');
?>