ࡱ> TVS !bjbj[[ 7<99[" +,,,,&,&,&,8^,L,$&,,>,(,, - ----=======$ CE=,-----=,, - -=111-d, -, -=1-=11C<h< -v9_.X<==0,><4VF.PVF <VF,<--1-----==1---,>----VF--------- *: CSCE 102 Lab 8 Advanced Layouts Absolute Positioning and the Box Model (Part I is due at the end of class) General information Read the entire assignment before you start. Always bring your book and lecture notes to lab. Use clean indentation so your code will be easy for you to read and also easy for your instructor to read. Include the closing tags when you enter the opening tags so you will not forget them. Always maintain backup copies of your work. Always work on your X drive and copy your work to your flash drive at the end of lab. Never share your password or memory stick with anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work. That means YOU wrote the code! Part I Create a Magazine Style Layout- Due Today at the end of class Using your template create an html file and save it as lab8Axx.html in your All_102Submissions folder, where xx are your first and last name initials. Create four div elements in the body of your html document. The first div will function as the banner across the top, the second as the first column, the third as the second column and the fourth as a banner across the bottom. Give each div an id attribute value that reflects its role. Using the Lorem Ipsum text generator, give each column a few paragraphs of filler text. Include an h3 element with some content at the top of each column. Include an h2 in the top banner. Include an h4 in the bottom banner. Using an internal style sheet, position the div elements using absolute positioning. Give each div a top, left, and width property, make sure they do not overlap, and make sure there is some space between them. The combined width of the columns should be between 600 and 800 pixels wide. For each column set the text-align to justify. Include an image related to USC football at the top of the first column below the banner in the first column. Do not use an image that is wider than the column. Be creative and add colors, borders, etc. An example of a magazine layout can be found at http://cl1.cse.sc.edu/102lab8/lab8a_example.png Your lab is different from the example shown above. ______________________________________________________________________ Part II Using the CSS column property Go to  HYPERLINK "https://www.w3schools.com/cssref/css3_pr_columns.asp" https://www.w3schools.com/cssref/css3_pr_columns.asp and look at the column property. You can click on try it yourself, change the code on the left and click the button again to run the code. Scroll on down the page and try the different sets of code. Change the code and click the button to see how it works. Create a new document and save it as lab8Bxx.html in your All102Submissions folder, where xx are your first and last name initials. Create a page with three columns using the column property as shown in the examples you just tried. Use Lorem Ipsum to generate dummy text to fill the columns. Insert a heading above the three columns (also shown in the examples you used on the web from W3Schools). Enclose the entire contents in a div. Apply style to the div Give it a width of 650px (Notice that the text no longer moves when you shrink the window size.) Give it a border Apply other styles Part III Create a structured HTML5 document Create a new document and save it as lab8Cxx.html in your All102Submissions folder, where xx are your first and last name initials. Inside the body element, create a container for the entire page with the article element. Inside the article element: give the page a banner with the header element, followed by the nav element, and then the section element. Inside the section element include another header element and two paragraph elements. Copy/paste this section element exactly three more times. Fill in the content of this page with whatever you want, but structure it precisely as described. Give the page a title by filling in the article header. For each section: fill in the paragraph, and fill in the header with a title for the section. Just as in part one you may use the Lorem Ipsum text generator to give content to the paragraphs. Inside the nav element add an unordered list with a list item (li) for each section you created in the previous step. Each list item should contain an internal link to the corresponding section. Do this by giving the header in each section a unique id, and then link to it internally with the anchor element (just as in lab 2 (fragment identifier)). I.e., the navigation element will contain list items that when clicked will cause the page to scroll to the corresponding location within the page (the particular section). Use an internal style sheet to accomplish the following: Set the display property of article, header, nav, and section to block using the group selector (comma). Set the margin of every element to be 0 using the universal selector (asterisk). I.e., *{margin:5px;} Set the width of the article to something other than the default 100%, e.g., 960px is a widely accepted standard width. Center the article by setting both margin-left and margin-right to auto. Set the list items to display inline (they are block-level by default). Set the text decoration property to none when you hover over the anchor elements in the unordered list (use a pseudo class). Create a CSS rule that will give the article header a large font. Create a separate CSS rule that will give the section headers a large font (but not as large as the article header). Hint: use nesting to apply the style to only header elements that are descendants of section elements (nested). Continue to customize the style of the document to make it look good. Use a color scheme ( HYPERLINK "http://www.colorcombos.com/" \h http://www.colorcombos.com/), add padding/margin to elements that you think may need it, add borders where you think they make sense, etc. When you have finished, your page should look something like: http://cl1.cse.sc.edu/102lab8/lab8b_example.png Apply style to make your page look good. Part IV Update All_102Submissions Add a link to lab8Axx.html to the list. Add a link to lab8Bxx.html to the list. Add a link to lab8Cxx.html to the list.  Go to  HYPERLINK "http://www.lipsum.com/" \h http://www.lipsum.com/ and select Generate Lorem Ipsum. Then copy/paste the text to the paragraphs in your html code.  The property bottom is not necessary if you use top, likewise the right property is not necessary if you use left.       "#IJmnN O  ( )   |n`RRh3CJOJQJ^JaJhRUhRU5>*B*phhRUh h5>*B*ph hq5\ h.5\ h h5\hqh hhqCJOJQJ^JaJh hCJOJQJ^JaJhq5OJQJ^Jh h5OJQJ^Jhq:CJ$aJ$nH tH hH:CJ$aJ$nH tH h6=u:CJ$aJ$nH tH h h:CJ$aJ$nH tH  #JnO ) E U $ & Fxa$gd6 $ & Fxa$ $^a$gdRU$ & Fa$#$d %d&d'dNOPQ$a$ D E Z  " % ; A P d p   ! T U a b Ӹܮөܤܸܓ܏ʏh6jh h0JCU hZ{|h h hZ{|\ hZ{|5h hOJQJ^Jh h5OJQJ^J h65\hq h h6 h h5hZ{|h hh shqCJOJQJ^JaJh hCJOJQJ^JaJ8  0<?BEGKQV_`$+,-8=>UVv+DGZ[Ķo!h10JB5>*B*nHphtH!heU@0JB5>*B*nHphtH!h0JB5>*B*nHphtH'h\heU@0JB5>*B*nHphtHhq0JBnHtHh2 h.h.heU@h6hHvh6hZ{|5hqjh h0JCU h h5h hh hOJQJ^J* -[h5M $ xa$gd< $ & Fxa$gd< $ & Fxa$gd^00 $ & Fxa$gd< $xa$gd1 $8x^8a$ $ & Fxa$FHI}~!ɿɣɿז}o\H'h.dh<0JB5>*B*nHphtH$h.dh<0JB>*B*nHphtHh^00h<5OJQJ^JhH5OJQJ^Jh<h<5OJQJ^Jh<h<OJQJ^JhWh<0JsOJQJ^Jhv\h<OJQJ^Jh<OJQJ^Jjh<OJQJU^Jhv\OJQJ^Jh1OJQJ^J!h10JB5>*B*nHphtHh1!$/>@Bhimx  eűة~m\mH\m'h^00h<0JB5>*B*nHphtH!h<0JB5>*B*nHphtH!h^000JB5>*B*nHphtH h#55 h^005 h^00h.d5B*nHphtH h.d5h.d h.dh.dh.dh.d5'h.dh<0JB5>*B*nHphtH$h.dh<0JB>*B*nHphtH$h.dh.d0JB>*B*nHphtH'h.dh.d0JB5>*B*nHphtH*+,.<M\^#+=@HW^fghsz} hwX5hwXhwX5 h h5h h5OJQJ^Jh hOJQJ^Jhq h h5\ h h6 h<5hL"h hhqCJOJQJ^JaJh1CJOJQJ^JaJh hCJOJQJ^JaJ'h\h10JB5>*B*nHphtH.hR]e&n-d $8x^8a$ $ & Fxa$ $ & Fxa$'x$d %d&d'dNOPQ QR]`H[\]dx Vdez  $%&<Jmnvh hOJQJh hOJQJ^JhqOJQJ^JhL"h hOJQJ^J h h5hqh h hL"5h(h(5J,-lmcdz}     0 1 ĺĺrmm h h6hqCJOJQJ\^JaJh hCJOJQJ\^JaJh7ECJOJQJ^JaJh hCJOJQJ^JaJh^00hq0JBnHtHh h0JBnHtHh2 0JBnHtHjhMz0JBU h h0JBhMzjhMzUhL"h hOJQJ^Jh hhq) 1 Y Z [ !|!}!!!!!!!!!!!d $h2^ha$ $2^a$gd1 $ & F2a$gd1 $ & F2a$#$d %d&d'dNOPQ1 B C D F Z [ \ d e !!!!!9!6666666666666666666666666666666666666666666666666hH6666666666666666666666666666666666666666666666666666666666666666662 0@P`p2( 0@P`p 0@P`p 0@P`p 0@P`p 0@P`p 0@P`p8XV~$OJPJQJ^J_HmH nH sH tH \`\ Normal*$1$-B* OJ PJ QJ ^J _HmH nHph sH tHJ@J Heading 1$<@&5CJ(\aJ(J@J Heading 2$<@&5CJ \aJ J@J Heading 3$<@&5CJ \aJ J@J Heading 4$<@&5CJ\aJJ@J Heading 5$<@&5CJ\aJJ@J Heading 6$<@&5CJ\aJDA D Default Paragraph FontRiR 0 Table Normal4 l4a (k ( 0No List 6o6 WW8Num1z0 OJQJ^J 6o6 WW8Num1z1 OJ QJ ^J 6o6 WW8Num2z0 OJQJ^J 6o!6 WW8Num2z1 OJ QJ ^J */1* WW8Num3z0*/A* WW8Num3z1*/Q* WW8Num3z2*/a* WW8Num3z3*/q* WW8Num3z4*/* WW8Num3z5*/* WW8Num3z6*/* WW8Num3z7*/* WW8Num3z8*/* WW8Num4z02o2 WW8Num5z0mH sH 6o6 WW8Num5z1 OJQJ^J*/* WW8Num5z2*/* WW8Num5z3*/* WW8Num5z4*/!* WW8Num5z5*/1* WW8Num5z6*/A* WW8Num5z7*/Q* WW8Num5z8*/a* WW8Num6z0*/q* WW8Num6z1*/* WW8Num6z2*/* WW8Num6z3*/* WW8Num6z4*/* WW8Num6z5*/* WW8Num6z6*/* WW8Num6z7*/* WW8Num6z86o6 WW8Num7z0 OJQJ^J6o6 WW8Num7z1 OJQJ^J6o6 WW8Num7z2 OJ QJ ^J 6o!6 WW8Num8z0 OJQJ^J6o16 WW8Num8z1 OJQJ^J6oA6 WW8Num8z2 OJ QJ ^J 6oQ6 WW8Num9z0 OJQJ^J6oa6 WW8Num9z1 OJQJ^J6oq6 WW8Num9z2 OJ QJ ^J J/J WW-Default Paragraph FontJ/J Absatz-StandardschriftartL/L WW-Default Paragraph Font16o6 WW8Num4z1 OJ QJ ^J P/P WW-Absatz-StandardschriftartN/N WW-Default Paragraph Font11P/P WW-Default Paragraph Font111R/R WW-Default Paragraph Font1111T/T WW-Default Paragraph Font11111V/V WW-Default Paragraph Font111111>o!> Internet Link >*B* ph:o1: Footnote AnchorH*6oA6 BulletsOJ PJ QJ ^J 8oQ8 Endnote AnchorH*FoaF WW-Footnote ReferenceH*DoqD WW-Endnote ReferenceH*HoH WW-Footnote Reference1H*FoF WW-Endnote Reference1H*JoJ WW-Footnote Reference12H*HoH WW-Endnote Reference12H*LoL WW-Footnote Reference123H*JoJ WW-Endnote Reference123H*NoN Visited Internet Link >*B* phJoJ Endnote Text CharOJ PJ QJ ^J NoN WW-Footnote Reference1234H*LoL WW-Endnote Reference1234H*Po!P WW-Footnote Reference12345H*No1N WW-Endnote Reference12345H*>oA> Source TextOJ PJ QJ ^J HoQH WW-Footnote Reference2H*FoaF WW-Endnote Reference2H*RoqR Balloon Text CharCJOJ PJ QJ ^J aJ2o2 ListLabel 1^J2o2 ListLabel 2^J2o2 ListLabel 3^J>/> Footnote Characters</< Endnote CharactersNON Heading ]$xCJOJPJQJ^JaJ8O8 Text Body ^d x(/@( List_^JH"@H Caption ` $xx6CJ]^JaJ.O. Indexa $^J6 "6 Footerb $z&@O@ partc$<a$5CJ(\aJ(8OB8 Footnote d $^`*R* Endnotee6b6 Headerf $;w <Or< Table Contentsg $@Oq@ Table Headingha$5\H@H Balloon TextiCJOJ QJ ^J aJ(/(WW8Num1j(/(WW8Num2k(/(WW8Num3l(/(WW8Num4m(/(WW8Num5n(/(WW8Num6o(/(WW8Num7p(/(WW8Num8q(/!(WW8Num9r6U`16 eU@0 Hyperlink >*B*phFV`AF ^p 0FollowedHyperlink >*B*phPK![Content_Types].xmlN0EH-J@%ǎǢ|ș$زULTB l,3;rØJB+$G]7O٭V$ !)O^rC$y@/yH*񄴽)޵߻UDb`}"qۋJחX^)I`nEp)liV[]1M<OP6r=zgbIguSebORD۫qu gZo~ٺlAplxpT0+[}`jzAV2Fi@qv֬5\|ʜ̭NleXdsjcs7f W+Ն7`g ȘJj|h(KD- dXiJ؇(x$( :;˹! I_TS 1?E??ZBΪmU/?~xY'y5g&΋/ɋ>GMGeD3Vq%'#q$8K)fw9:ĵ x}rxwr:\TZaG*y8IjbRc|XŻǿI u3KGnD1NIBs RuK>V.EL+M2#'fi ~V vl{u8zH *:(W☕ ~JTe\O*tHGHY}KNP*ݾ˦TѼ9/#A7qZ$*c?qUnwN%Oi4 =3N)cbJ uV4(Tn 7_?m-ٛ{UBwznʜ"Z xJZp; {/<P;,)''KQk5qpN8KGbe Sd̛\17 pa>SR! 3K4'+rzQ TTIIvt]Kc⫲K#v5+|D~O@%\w_nN[L9KqgVhn R!y+Un;*&/HrT >>\ t=.Tġ S; Z~!P9giCڧ!# B,;X=ۻ,I2UWV9$lk=Aj;{AP79|s*Y;̠[MCۿhf]o{oY=1kyVV5E8Vk+֜\80X4D)!!?*|fv u"xA@T_q64)kڬuV7 t '%;i9s9x,ڎ-45xd8?ǘd/Y|t &LILJ`& -Gt/PK! ѐ'theme/theme/_rels/themeManager.xml.relsM 0wooӺ&݈Э5 6?$Q ,.aic21h:qm@RN;d`o7gK(M&$R(.1r'JЊT8V"AȻHu}|$b{P8g/]QAsم(#L[PK-![Content_Types].xmlPK-!֧6 0_rels/.relsPK-!kytheme/theme/themeManager.xmlPK-!0C)theme/theme/theme1.xmlPK-! ѐ' theme/theme/_rels/themeManager.xml.relsPK] _!$<  !1 ! ! H } lXX 1H$XtL# @0(  B S  ?=@]`[}MY [}33  APab>UVvDG ~ O W      * , HSZ[ddzz}BCZsbD]IdO:mnb v8Oqv-ʐ^`OJQJ^Jo(88^8`OJQJ^Jo(%^`OJQJ^Jo(%^`OJQJ^Jo(pp^p`OJQJ^Jo(%  ^ `OJQJ^Jo(%@ @ ^@ `OJQJ^Jo(  ^ `OJQJ^Jo(%^`OJQJ^Jo(%P^`P@@^@`0^`0``^``^`^`^``^``00^0`^`.88^8`.h^`OJQJo(hHh^`OJQJo(hHpp^p`.  ^ `.@ @ ^@ `.  ^ `.^`.^`.88^8`.^`.^`.pp^p`.  ^ `.@ @ ^@ `.  ^ `.^`.^`.88^8`OJQJ^Jo(o^`.^`.pp^p`.  ^ `.@ @ ^@ `.  ^ `.^`.s:mndOv8OqD]I $!^p 2 RU&L"aF!&#^00#56;b=ce?eU@7EwX\.d1g h s6=uHvMzZ{|v\1m.<Hq(3[]@@UnknownG* Times New Roman5Symbol3. * Arial7@Cambria?= *Cx Courier NewiCourier 10 PitchTimes New RomaniLiberation SerifTimes New RomanODroid Sans FallbackY FreeSansTimes New Roman3*Ax Times_OpenSymbol;Arial Unicode MS;WingdingsI4DejaVu Sans Mono5. .[`)Tahoma_ OpenSymbolArial Unicode MS?DejaVu SansA$BCambria Math"qhuz'|zG8sG , .420OoCQHX $Pq!xx Original file was S10Lab3.texcmatthewMATTHEWS, CATHERINE      Oh+'0Pd      Original file was S10Lab3.tex cmatthewTCreated using latex2rtf 1.9.19 (released Nov 20 2007) on Mon Jan 25 00:53:25 2010 Normal.dotmMATTHEWS, CATHERINE7Microsoft Office Word@ @P&9@3@$ ՜.+,D՜.+,|8 px   University of South Carolinaen-US, O Original file was S10Lab3.tex Title 8@ _PID_HLINKSAtp&http://www.colorcombos.com/"/5https://www.w3schools.com/cssref/css3_pr_columns.asp),http://www.lipsum.com/  !"#$%&'()*+,-./0123456789:;<=>?@ABDEFGHIJLMNOPQRURoot Entry F9W1TablevFWordDocument7<SummaryInformation(CDocumentSummaryInformation8KCompObjr  F Microsoft Word 97-2003 Document MSWordDocWord.Document.89q