| 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 : /nginx/html/JimMartinson/CST1021/Labs/Lab07/ |
Upload File : |
<?
// JimMartinson/CST1021/Labs/Lab07/Lab07.phpinc
$css .= ',colorCode.css';
require('Gradebook/EvaluationSubmission_BEGIN.phpinc'); // Replaced.
$disabled = '';
$disabled = ' disabled'; // Comment this line to enable lab.
require('common/Browser/Browser.phpinc');
?>
<fieldset><legend>Description</legend>
The purpose of this lab is to demonstrate your ability to use css layout on a web page.<br>
<span class="note">Review <a href="https://www.w3schools.com/css/css_dimension.asp">CSS Height and Width</a> and <a href="https://www.w3schools.com/cssref/pr_dim_min-width.asp">CSS min-width Property</a> for help with css min-width declarations.</span>
<?=$gradeNote?>
<span class="bold warning">Do not perform this lab until you have a working Lab 1!</span>
<? if ( $disabled ) { ?><span class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</span><? } ?>
</fieldset>
<? if ( $disabled ) { ?><span class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</span><? } ?>
<fieldset><legend><?=$evaluationType?> Instruction</legend>
<ol id="main" class="count">
<!-- 1 -->
<li>Create a folder for this <?=strtolower($evaluationType)?> named <b class="copyText"><?=$evaluationName?></b> and keep all documents used for <?=$evaluationType?> <?=$evaluationNumber?> in that folder.</li>
<!-- 2-->
<li class="page">Create a web page named <b class="copyText"><?=$evaluationName?>.html</b>.
<br><span class="note normal">All needed css must be in the external <b><?=$evaluationName?>.css</b> file.
If there is internal or inline css in your <b><?=$evaluationName?>.html</b> file, remove it.</span>
<ol>
<!-- 2.1 -->
<li>Copy the content of your Lab01.html document into the <b><?=$evaluationName?>.html</b> file.</li>
<!-- 2.2 -->
<li><b>Fix any errors you had in Lab 1 so this lab will display correctly.</b></li>
<!-- 2.3 -->
<li>Change the Lab <b>1</b> references to Lab <b>7</b>. <span class="note">They should be in the title and h1 tag content.</span></li>
<!-- 2.4-->
<li>
Change the <b>Lab01</b> reference to <b>Lab07</b>. <span class="note">This should be in the link tag href attribute value.</span>
<br>
<span class="note normal">
<ins>11/02/2023</ins>
Do not add any new block elements to the document. The only block elements in the body should be the header, two article/aside pairs, and the footer.
</span>
</li>
</ol>
<span class="note">
You may need to add extra content to your first <b>aside</b> so that it has more text than the first <b>article</b>.
This is needed to ensure your article/aside pairs align vertically. You need enough content so the bottom of the first aside is below the bottom of the first article as the page gets narrower.
This aside will display below the article when the page becomes narrow enough; This is expected.
</span>
</li>
<!-- 3 -->
<li class="css">Create an external style sheet named <b class="copyText"><?=$evaluationName?>.css</b>.
<br><span class="normal note">In this style sheet put all the styles needed to produce the desired effects on <?=$evaluationName?>.html.
<br>Document your style sheet using comments.</span>
<ol>
<!-- 3.1 -->
<li>Copy the content of your Lab01.css document into the <b><?=$evaluationName?>.css</b> file.</li>
<!-- 3.2 -->
<li>Change the comment to: <comment class="copyText">/* <?=$evaluationType?> <?=$evaluationNumber?> External Style Sheet - <?=$userFullName?> */</comment></li>
<!-- 3.3 -->
<li>Create styles to:
<ol>
<!-- 3.3.1 -->
<li>Display the content of the page:
<ol>
<!-- 3.3.1.1 -->
<li>Limited to 90% of the window width.</li>
<!-- 3.3.1.2 -->
<li>Centered.</li>
<!-- 3.3.1.3 -->
<li>With a solid border 1 px wide colored black.</li>
<!-- 3.3.1.4 -->
<li>With 1 em of space between the border and all content. <note>Warning: This includes the h1 heading.</note></li>
<!-- 3.3.1.5-->
<li>With 1 em of space between the top border and the top of the page.</li>
<!-- 3.3.1.5-->
<li>With 1 em of space between the bottom border and the bottom of the page. <span class="note">Their may be more if the browser window is tall enough or the content short enough.</span></li>
</ol>
</li>
<!-- 3.3.2-->
<li>Color the background of the <span class="highELE">header</span> and <span class="highELE">footer</span> elements to silver.</li>
<!-- 3.3.3-->
<li>For the <span class="highELE">article</span> elements:
<ol>
<!-- 3.3.3.1 -->
<li>Color the background to a color of your choice.</li>
<!-- 3.3.3.2 -->
<li>Display on the left at 70% of the content width.</li>
<!-- 3.3.3.3 -->
<li>Set a minimum width of 350 px.</li>
</ol>
</li>
<!-- 3.3.4 -->
<li>For the <span class="highELE">aside</span> elements:
<ol>
<!-- 3.3.4.1 -->
<li>Color the background to a color that is a shade darker than the one for the <span class="highELE">article</span> elements.</li>
<!-- 3.3.4.2 -->
<li>Display on the right at 30% of the content width.</li>
<!-- 3.3.4.3 -->
<li>Set a minimum width of 150 px.</li>
</ol>
</li>
<!-- 3.3.5 -->
<li>Each <span class="highELE">article</span> and <span class="highELE">aside</span> pair must display aligned vertically if the page is wide enough for them to be beside each other. (Display with the tops aligned.)</li>
<!-- 3.3.6 -->
<li>Display 1em of space between the <span class="highELE">header</span>, each <span class="highELE">article</span>/<span class="highELE">aside</span> pair, and the <span class="highELE">footer</span>.</li>
<!-- 3.3.7 -->
<li>The <span class="highELE">footer</span> element must display below the second <span class="highELE">article</span> and <span class="highELE">aside</span>.</li>
<!-- 3.3.8 -->
<li>
<ins>11/02/2023</ins>
Style the <span class="highELE">h1</span> element so it has a 1px solid silver border.
<span class="note">This is needed to see the spacing of the <span class="highELE">h1</span> element. Despite the note on step <b>3.3.1.4</b>, you could not see that the spacing of the element from the border and first <span class="highELE">article</span> element was incorrect. You will need to change the margin of the <span class="highELE">h1</span> element to correct this.</span>
</li>
</ol>
<span class="note">I used a <span class="highATT">float</span> for my <span class="highELE">article</span> and <span class="highELE">aside</span> layouts but there are other (more complex) ways to do this with CSS.</span>
</li>
</ol>
<? showBegin('See a wide example'); ?>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="images/exampleWide.png" alt="example">
<? BrowserEnd(); ?>
<? showEnd(); ?>
<? showBegin('See a narrow example'); ?>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="images/exampleNarrow.png" alt="example">
<? BrowserEnd(); ?>
<? showEnd(); ?>
<? showBegin('See a too narrow example'); ?>
<? BrowserBegin($evaluationType.' '.$evaluationNumber.' - Jim Martinson','file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html'); ?>
<img src="images/exampleTooNarrow.png" alt="example">
<? BrowserEnd(); ?>
<? showEnd(); ?>
</li>
<!-- 4 -->
<li>Turn in your assignment:
<ol type="a">
<li>Ensure the following files are in your <b><?=$evaluationName?></b> folder:
<ul>
<li><?=$evaluationName?>.css</li>
<li><?=$evaluationName?>.html</li>
</ul>
</li>
<li>Zip up your <b><?=$evaluationName?></b> folder into a file named <b class="copyText"><?=$uploadFilename?></b>.</li>
<li>Browse and select your <b><?=$uploadFilename?></b> file: <input type="file" name="fileUpload" id="inpFileUpload"<?=$disabled?>><div id="divFileploadError"></div></li>
<li>Then <input type="submit" name="f_subtask" id="inpSubmit" value="Submit"<?=$disabled?>> for grading.</li>
</ol>
</li>
</ol><? if ( $disabled ) { ?><span class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</span><? } ?>
</fieldset>
<?
$PartialGradingCriteria = '
<b>Total possible points: assignmentPoints</b>
<br>
-assignmentPoints if the <a href="https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input">CSS Validation Service</a> or <a href="https://validator.w3.org/#validate_by_input">Markup Validation Service</a> report errors.
No further grading will be done.
<br>
Deductions for any elements required by the lab that are not present or correct:
<br>
-10 if the article/aside pairs do not align vertically on a wide enough browser window.
<br>
-5 for each incorrect width.
<br>
-5 if the footer does not stay below the last aside.
<br>
-3 for each missing declaration, element, or like group.
<br>
-2 for each incorrect declaration, element, or like group.
<br>
-1 for any additional css declarations or html elements that have errors.
<br>
<span class="note">Do not add any additional code or styling other than what is required by the lab.
<br>I will deduct points for additional code or styling that are incorrect or cause problems.</span>
';
?>
<fieldset id="notes"><legend>NOTES:</legend>
<b>We will be using the following in every html page throughout this class:</b>
<ul>
<li>The HTML 5 <b>!DOCTYPE</b>.</li>
<li>An <span class="tag">html</span> tag with the <att>lang</att> attribute set to <val>en</val>.</li>
<li>A <span class="tag">title</span> tag with the title directed above.</li>
<li>A <span class="tag">meta</span> tag with the <span class="att">charset</span> attribute set to <span class="val">utf-8</span>.</li>
<li>A <span class="tag">link</span> tag to the <span class="val"><?=$evaluationName?>.css</span> file.</li>
<li>An <span class="tag">h1</span> heading tag as the first element in the body with the same content as the <span class="tag">title</span> tag.</li>
</ul>
</fieldset>
<script src="/js/colorCode.js"></script>
<?
require('Gradebook/EvaluationSubmission_END.phpinc'); // Replaced.
#require('../../ReferencesResources.phpinc');
#require($Instructor['Path'].'/ContactInformation.phpinc');
if ($TRACK != '') $_SESSION['TRACK'] .= "<li>End ".basename(__FILE__)."</ol>\n";
?>