| 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 : |
<?
// Lab08.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.
$thisFile=__FILE__; $thisLine=__LINE__; include('application.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('Course/courseInfo.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('classInfo.phpinc');
$assignmentNumber = 10;
$assignmentType = "Lesson";
$assignmentTitle = "Layout with Styles";
$evaluationNumber = 8;
$evaluationType = "Lab";
$evaluationTitle = "Layout with Styles";
if (!isset($evaluationNumber)) { $evaluationNumber = $assignmentNumber; }
if (strlen($assignmentNumber) == 1) { $assignmentName = $assignmentType."0".$assignmentNumber; } else { $assignmentName = $assignmentType.$assignmentNumber; }
if (strlen($evaluationNumber) == 1) { $evaluationName = $evaluationType."0".$evaluationNumber; } else { $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');
?>
<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 understanding the use of CSS for page layout. You will use background, background-color, border, border-bottom, border-top, clear, color, float, font-size, font-weight, margin, max-width, min-width, min-width, min-width, padding, padding-left, text-align, and width properties.
<br />
Start 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 /><br />
<ol>
<li>Start 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>In the head section place the following:
<ol type="I">
<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>Place a link to a <b><?=$evaluationName?>.css</b> style sheet.</li>
</ol>
</li>
<li>In the body of <b><?=$evaluationName?>.htm</b> place the following:
<ol type="I">
<li>Put an <b>h2</b> heading containing the text <b><?=$evaluationType?> <?=$evaluationNumber?> - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
<li>Start a div with an id of <b>wrap</b>.
<ol type="a">
<li>Start a div with an id of <b>frame</b>.
<ol type="i">
<li>Start a div with an id of <b>header</b>.
<ol type="1">
<li>Add some text inside the div.</li>
</ol>
<li>Close the <b>header</b> div.</li>
<li>Start a div with an id of <b>container</b>.</li>
<ol type="1">
<li>Start a div with an id of <b>panel</b>.
<ol type="A">
<li>Add some text inside the div.</li>
</ol>
<li>Close the <b>panel</b> div.</li>
</ol>
<ol type="1">
<li>Start a div with an id of <b>main</b>.
<ol type="A">
<li>Add some text inside the div.</li>
<li>Add an anchor with an href to Lab08b.htm.</li>
</ol>
<li>Close the <b>main</b> div.</li>
</ol>
<li>Close the <b>container</b> div.</li>
<li>Start a div with an id of "\<b>footer</b>.</li>
<ol type="1">
<li>Add some text inside the div.</li>
</ol>
<li>Close the <b>footer</b> div.</li>
</ol>
</li>
<li>Close the <b>frame</b> div.</li>
</ol>
</li>
<li>Close the <b>wrap</b> div.</li>
</ol>
</li>
</ol>
</li>
<li>Finish the <b><?=$evaluationName?>.htm</b> page.</li>
<li>Copy <b><?=$evaluationName?>.htm</b> to <b><?=$evaluationName?>b.htm</b>
<ol type="A">
<li>Change the comment, title, and heading to reflect that this is <b><?=$evaluationName?>b.htm</b>.</li>
<li>Change the link to the style sheet so it points to <b><?=$evaluationName?>b.css</b>.</li>
<li>Change the href of the anchor inside the "main" div so that it links to <b><?=$evaluationName?>.htm</b>.</li>
</ol>
</li>
<li>Finish the <b><?=$evaluationName?>b.htm</b> page.</li>
<li>Start a style sheet file named <b><?=$evaluationName?>.css</b>.
<ol type="A">
<li>Apply the following style to the body:
<ol type="I">
<li>Set the background color to midnightblue.</li>
</ol>
</li>
<li>Create id named <b>wrap</b> and apply the following styles:
<ol type="I">
<li>Set the background url to BlackAndBlueStarrySky.gif with repeat.
<br />Download the <b><a href="BlackAndBlueStarrySky.gif">BlackAndBlueStarrySky.gif</a></b> file and save it in your <b>Lab08</b> folder.</li>
<li>Set the border to 2px wide, solid, mediumblue color.</li>
<li>Set the margin to 10px auto.</li>
<li>Set the max width to 800px.</li>
<li>Set the min width to 400px.</li>
<li>Set the padding to 30px 120px 30px 120px.</li>
<li>Set the width to 60%.</li>
<li>.</li>
</ol>
</li>
<li>Create id named <b>frame</b> and apply the following styles:
<ol type="I">
<li>Set the border to 2px wide, solid, mediumblue color.</li>
<li>Set the padding to 2px.</li>
</ol>
</li>
<li>Create id named <b>header</b> and apply the following styles:
<ol type="I">
<li>Set the background color to navy.</li>
<li>Set the border to 1px wide, solid, mediumblue color.</li>
<li>Set the bottom border to 1px wide, dotted, blue color.</li>
<li>Set the color to goldenrod.</li>
<li>Set the font size to 2em.</li>
<li>Set the font weight to bold.</li>
<li>Align the text to the center.</li>
</ol>
</li>
<li>Create id named <b>panel</b> and apply the following styles:
<ol type="I">
<li>Set the background color to mediumblue.</li>
<li>Set the color to gold.</li>
<li>Float it to the right.</li>
<li>Set the padding to 5px.</li>
<li>Set the width to 140px.</li>
</ol>
</li>
<li>Create id named <b>main</b> and apply the following styles:
<ol type="I">
<li>Set the background color to moccasin.</li>
<li>Set the color to gold.</li>
<li>Set the padding to 10px.</li>
</ol>
</li>
<li>Create id named <b>footer</b> and apply the following styles:
<ol type="I">
<li>Set the background color to navy.</li>
<li>Set the top border to 1px wide, dotted, blue color.</li>
<li>Clear both.</li>
<li>Set the color to goldenrod.</li>
<li>Set the padding to 2px 5px 2px 5px.</li>
</ol>
</li>
</ol>
</li>
<li>Finish the <b><?=$evaluationName?>.css</b> file.</li>
<li>Copy the <b><?=$evaluationName?>.css</b> style sheet file to <b><?=$evaluationName?>b.css</b>.
<ol type="A">
<li>Make the following changes to the body style:
<ol type="I">
<li>Change the background color to moccasin.</li>
</ol>
</li>
<li>Make the following changes to the <b>wrap</b> id:
<ol type="I">
<li>Change the background url to tansplotchypapaer.gif.
<br />Download the <b><a href="tansplotchypapaer.gif">tansplotchypapaer.gif</a></b> file and save it in your <b>Lab08</b> folder.</li>
<li>Change the border to 1px wide, brown color.</li>
<li>Change the margin to 34px auto.</li>
<li>Change the padding to 30px 30px 30px 30px.</li>
<li>Change the width to 90%.</li>
</ol>
</li>
<li>Make the following changes to the <b>frame</b> id:
<ol type="I">
<li>Change the border to 10px wide, moccasin color.</li>
<li>Change the padding to 10px.</li>
</ol>
</li>
<li>Make the following changes to the <b>header</b> id:
<ol type="I">
<li>Change the background color to burlywood.</li>
<li>Change the border to 1px wide, moccasin color.</li>
<li>Change the bottom border to brown color.</li>
<li>Delete the color style.</li>
<li>Delete the text alignment style.</li>
<li>Add a style setting the left padding to 155px.</li>
</ol>
</li>
<li>Make the following changes to the <b>panel</b> id:
<ol type="I">
<li>Change the background color to moccasin.</li>
<li>Delete the color style.</li>
<li>Change the float to left.</li>
<li>Add a style setting the left padding to 0px.</li>
<li>Add a style setting to align the text to the right.</li>
</ol>
</li>
<li>Make the following changes to the <b>main</b> id:
<ol type="I">
<li>Change the background color to antiquewhite.</li>
<li>Delete the color style.</li>
</ol>
</li>
<li>Make the following changes to the <b>footer</b> id:
<ol type="I">
<li>Change the background color to burlywood.</li>
<li>Set the top border to brown color.</li>
<li>Delete the color style.</li>
</ol>
</li>
</ol>
</li>
<li>Finish the <b><?=$evaluationName?>b.css</b> file.</li>
</li>
<br />
<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>
<br />
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:antiquewhite;<br>
background-color:burlywood;<br>
background-color:mediumblue;<br>
background-color:midnightblue;<br>
background-color:moccasin;<br>
background-color:navy;<br>
background:url(BlackAndBlueStarrySky.gif) repeat;<br>
background:url(tansplotchypapaer.gif) repeat;<br>
border-bottom:1px dotted blue;<br>
border-bottom:1px dotted brown;<br>
border-top:1px dotted blue;<br>
border-top:1px dotted brown;<br>
border:10px solid moccasin;<br>
border:1px solid brown;<br>
border:1px solid mediumblue;<br>
border:1px solid moccasin;<br>
border:2px solid mediumblue;<br>
clear:both;<br>
color:gold;<br>
color:goldenrod;<br>
float:left;<br>
float:right;<br>
font-size:2em;<br>
font-weight:bold;<br>
margin:10px auto;<br>
margin:34px auto;<br>
max-width:800px;<br>
min-width:400px;<br>
padding-left:0px;<br>
padding-left:155px;<br>
padding:10px;<br>
padding:2px 5px 2px 5px;<br>
padding:2px;<br>
padding:30px 120px 30px 120px;<br>
padding:30px 30px 30px 30px;<br>
padding:5px;<br>
text-align:center;<br>
text-align:right;<br>
width:140px;<br>
width:60%;<br>
width:90%;<br>
</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" />
<br />
<?=$evaluationName?>b.htm Example:<br />
<img src="<?=$evaluationName?>b.jpg" alt="<?=$evaluationName?> Example" />
</p>
</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');
?>