std.csit.sci.tsu.ac.thstd.csit.sci.tsu.ac.th/592021167/backup/it.docx · web...
TRANSCRIPT
แบบฝึกปฏิบติั
หลังจากท่ีเรารูจ้กั HTML CSS Form มาบา้งแล้ว ต่อไปน้ีจะเป็นแบบฝึกเพื่อใหนิ้สติสามารถมคีวามรูค้วามเขา้ใจมากยิง่ขึ้น
1. Download Zip file จาก http://mis.csit.sci.tsu.ac.th/kanida/index.php/modules/web-programming/ เมื่อได้มาแล้วให ้Upzip จะได้ File ต่าง ๆ ตามภาพ
2. เปิดไฟล์ dogworld.html ด้วย Browser จะได้ผลลัพธดั์งภาพ
3. เราจะปรบัแต่งไฟลนี้ใหไ้ด้รูปแบบน้ี
ใน Folder ได้แนบไฟล์ mystyle.css มาใหแ้ล้วด้วย ใหนิ้สติตรวจสอบการเชื่อมโยงระหวา่ง File Html & CSS วา่ถกูต้องหรอืไม่
เรามาเริม่กันเลย
1. ใหเ้ปลี่ยนชื่อ File dogworld.html เป็น dogworld1.html ทัง้น้ีเพื่อป้องกันการผิดพลาดท่ีอาจจะเกิดขึ้น เพราะฉะนัน้เราต้องเก็บต้นฉบบัเอาไวก้่อน
2. ปรบัปรุง mystyle.css ดังน้ี/* --------------- Page Background ---------------*/body{
font-family: arial, sans-serif;background-color: #8cad9a;
}*** ทกุขัน้ตอนให้นิสติทำาการบนัทึกผลลัพธท่ี์เกิดขึน้ในเอกสาร Word***
3. สรา้ง Wrapper เพื่อใหจ้ดัเน้ือหาอยูด้่วยกัน /*---------------- Page Wrapper ---------------- */
div#wrapper{width: 960px;background-color: #fff;
}
ก่อนจะดผูลลัพธ ์ใหไ้ปที่ไฟล์ dogworld1.html เพื่อเพิม่เติม <div id=”wrapper”> ในสว่นของ <body> ดังภาพ
<body><div id="wrapper">
<!-- Header --><header><h1 class="head">dog world</h1>
และเพิม่ </div> ในสว่นท้าย
</div>
</body></html>
ดผูลลัพธ์
ตอนเริม่ทำาจะมแีค่เนื้อหาและสพีื้นหลัง หลังจากเพิม่ <div id="wrapper"> ในสว่นของ Body ทำาให้มเีสน้ขอบพื้นหลังสขีาวคลมุทั้งเนื้อหา
ต่อไปหากเราต้องการเพิม่ 3 คำาสัง่นี้จะเกิดอะไรขึ้นdiv#wrapper{
width: 960px;background-color: #fff;margin-left: auto;
margin-right: auto;
border: solid thin black;
}
เขยีนอธบิายผลลัพธด้์วย
หลังจากเพิม่ <div id="wrapper"> ในสว่นของ Body ทำาให้มเีสน้ขอบคลมุทั้งเนื้อหาเมื่อเพิม่ 3 คำาสัง่ ทำาให้กรอบท่ีอยูท่างซา้ยเลื่อนมาตรงกลาง
กำาหนดรูปแบบของ Page Header
1. ใน CSS file สว่นของ /*----------------------- Page Header ------------------------------- */ใหก้ำาหนด Style ของ header ดังน้ีheader{
width: 960px;height: 95px;
background-image: url(headerbkg.jpg);margin-top: -24px;
}
2. ใน HTML file ใหเ้พิม่ <header> ดังน้ี<!-- Header --><header><h1>dog world</h1><h3> Sit. Stay. Browse!</h3></header>
3. Save และดผูลลัพธ ์
มภีาพลายเท้าสนุัขท่ีสว่นของหัวขอ้ dog world
กำาหนดรูปแบบของ ขอ้ความของ Header (H1 & H3)
1. ใน CSS file สว่นของ /*----------------------- Header Text ------------------------------- */ใหก้ำาหนด Style ของ h1 และ h3 ดังน้ีกำาหนด Selectorh1.head, h3.subhead{
}
กำาหนด Style rulesh1.head, h3.subhead{
font-family: georgia, serif;margin-left: 20px;color: #613838;
}
กำาหนด Style rules เฉพาะของ h1.head h1.head{
font-size: 2.25em;padding-top: 15px;
}
กำาหนด Style rules เฉพาะของ h3.subhead h3.subhead {
margin-top: -20px;letter-spacing: 1px;
}
2. ใน HTML file ใหเ้พิม่ class สำาหรบั h1 และ h3 ดังน้ี<!-- Header --><header><h1 class="head">dog world</h1><h3 class="subhead"> Sit. Stay. Browse!</h3></header>
3. Save และดผูลลัพธ ์
ในสว่นของ header ท่ีเป็นหัวขอ้มกีารเปลี่ยนแปลง คือสขีองตัวอักษรจากดำาจะเป็นสนีำ้าตาลอ่อน
กำาหนดรูปแบบของ Navigation Bar
1. ใน HTML file ใหเ้พิม่ id=”navlist” ดังน้ี<!-- Navigation -->
<ul id="navlist"><li><a href=" ">Editorial</a></li><li><a href=" ">Advice</a></li><li><a href=" ">Reader Emails</a></li><li><a href=" ">Training Tips</a></li><li><a href=" ">Puppy Central</a></li><li><a href=" ">Breeder List</a></li><li><a href=" ">Adopt</a></li><li><a href=" ">Site Map</a></li><li><a href=" ">Contact Us</a></li></ul>
2. ใน CSS file สว่นของ
/*----------------------- Navigation Bar------------------------------- */ใหก้ำาหนด Style ของ <li> ภายใต้ ul ท่ีม ีid = navlist ดังน้ีกำาหนด Selectorul#navlist li{
}
กำาหนด Style rulesul#navlist li{
display: inline;list-style-type: none;padding-right: 30px;
}
3. Save และดผูลลัพธ ์
ในสว่นของ Navigation Bar จากท่ีอยูแ่นวด่ิง ถกูจดัรูปแบบเป็นแนวนอน
กำาหนดรูปแบบของ List Container
1. ใน CSS file สว่นของ /*----------------------- Navigation Bar------------------------------- */ul#navlist li{
display: inline;list-style-type: none;padding-right: 30px;
}
เพิม่เติม property สำาหรบัการกำาหนดสพีื้นหลังดังน้ีul#navlist {
}ul#navlist{
background-color: #613838;margin-top: -5px;padding: 5px 5px 5px 20px;
}
2. Save และดผูลลัพธ ์
ในสว่นของ Navigation Bar ถกูจดัรูปแบบเป็นแนวนอนและเพิม่กรอบสนีำ้าตาล
กำาหนดรูปแบบของ Link ใน Navigation Bar
1. ใน CSS file สว่นของ /*----------------------- Navigation Bar------------------------------- */ul#navlist li{
display: inline;list-style-type: none;padding-right: 30px;
}ul#navlist{
background-color: #613838;margin-top: -5px;
}
เพิม่ Selector ดังน้ีul#navlist li a { }
ul#navlist li a{
color: #c6b29e;
text-decoration: none;
font-size: .85em;
}
เพิม่ Selector hover ดังน้ีul#navlist li a:hover {
color: #fff;
}
2. Save และดผูลลัพธ ์
ในสว่นของ Navigation Bar มกีานเปล่ียนแปลงจากตัวอักษรสนีำ้าเงินเปลี่ยนเป็นสขีาว
เมื่อมาถึงขึ้นตอนน้ี นิสติควรจะได้ผลลัพธดั์งภาพต่อไปน้ี
การแบง่ Page เป็น Column ซึง่ประกอบด้วย 3 Colomn ดังน้ี
- leftcol มขีนาด 190 pixel และ 2-pixel left margin- maincol มขีนาด 580 pixel และ 15-pixel left and right
margin- rightcol มขีนาด 156 pixel และ 2-pixel left margin
เมื่อกำาหนด Style เสรจ็จะได้ผลลัพธดั์งภาพ
การกำาหนดรูปแบบ Left Column
1. ใน CSS file สว่นของ /*----------------------- Page Columns ------------------------------- */กำาหนด Selector aside ท่ีม ีid = leftcol ดังน้ีaside#leftcol{}
กำาหนด Style rules ดังน้ีaside#leftcol{
float: left;width: 190px;margin-left: 2px;
}
2. ใน HTML file ใหเ้พิม่ <aside> ดังน้ี<!-- Left Column --><aside id="leftcol"><h4>Editorial</h4><p><img src="smfeature1.jpg" width="64" height="63" alt="Editorial Image" border="0" />Lorem ipsum dolor sit ame, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Aenean commodo ligula eget dolor.</p>
<h4>Dog Advice</h4><p><img src="smfeature2.jpg" width="64" height="79" alt="Dog Advice Image" border="0" />Lorem ipsum dolor sit ame, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Aenean commodo ligula eget dolor.</p><h4>Reader Emails</h4><p><img src="smfeature3.jpg" width="64" height="83" alt="Reader Emails Image" border="0" /> Lorem ipsum dolor sit ame, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Aenean commodo ligula eget dolor.</p></aside>
3. Save และดผูลลัพธ ์
ภาพหมาจากท่ีอยูด้่ายซา้ยล่าง เลื่อนขึน้มาอยูท่ี่ตรงกลางคอลัมบน และการค้นหายา้ยมาอยูต่รงกลางคอลัมล่าง และหัวขอ้ของการลิ้งไปท่ีต่างๆๆ
การกำาหนดรูปแบบ Main Column
1. ใน CSS file สว่นของ /*----------------------- Page Columns ------------------------------- */กำาหนด Selector section ดังน้ีsection{}
กำาหนด Style rules ดังน้ีsection{
float: left;width: 580px;margin-left: 15px;margin-right: 15px;
}
2. ใน HTML file ใหเ้พิม่ <section> ดังน้ี<!-- Main Column --><section><img src="dogs_at_work.jpg" width="580" height="158" alt="Dogs at Work Image" title="Dogs at Work Feature Story" /><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. </p>
<p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p>
<hr/>
<p><img src="featureimg2.jpg" width="100" alt="Dog photo" border="0" class="feature2"/>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. </p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></section>
3. Save และดผูลลัพธ ์
ภาพหมาจากท่ีอยูด้่ายซา้ยล่าง เลื่อนขึน้มาอยูท่ี่ตรงกลางคอลัม และขอ้ความคำาวา่ Search the Site เล่ือนอยูค่อลัมท่ี 3 แบง่ทั้งหมดเป็น 3 คอลัม อาจารยใ์ส ่bug ไว ้คือ <p ไมม่ ี> ปิด
การกำาหนดรูปแบบ Right Column
1. ใน CSS file สว่นของ /*----------------------- Page Columns ------------------------------- */กำาหนด Selector aside ท่ีม ีid = rightcol ดังน้ีaside#rightcol{}
กำาหนด Style rules ดังน้ีaside#rightcol{
float: left;width: 156px;margin-right: 2px;
}
2. ใน HTML file ใหเ้พิม่ <aside> ดังน้ี<!-- Right Column --><aside id="rightcol"><div id="searchbox"><h4>Search the Site</h4><form method="get" action=" "><p><input type="text" value="Enter search text..." maxlength="25" size="15" /></p><p><input type="submit" /></p></form></div>
<div id="links"><img src="links_img.jpg" width="148" height="106" alt="Sponsored Links" Title="Sponsored Links" border="0" /><p><a href=" ">Pet Supplies</a></p><p><a href=" ">AKC</a></p><p><a href=" ">Westminster</a></p><p><a href=" ">Dog Blogs</a></p><p><a href=" ">Veterinarians</a></p><img src="next_month.jpg" width="121" height="176" alt="Next Month Image" border="0" class="nextmonth" /></div>
</aside>
3. Save และดผูลลัพธ ์
ขอ้ความคำาวา่ Search the Site เล่ือนอยูค่อลัมท่ี 3 ท้ังหมดแบง่เป็น 3 คอลัม อาจารยใ์ส ่bugs ไว ้คือ </form> </div> ต้องลบ </div> and </aside> อยูบ่น <img
src="next_month.jpg"
กำาหนดรูปแบบ Footer
1. ใน CSS file สว่นของ /*----------------------- Footer ------------------------------- */กำาหนด Selector footer ดังน้ีfooter{}
กำาหนด Style rules ดังน้ีfooter{
background-color: #613838;height: 20px;clear: both;
}
2. ใน HTML file ใหเ้พิม่ <aside> ดังน้ี<!-- Footer -->
<footer></footer></div></body></html>
3. Save และดผูลลัพธ ์
สว่นของ Footer อยูท่างด้านล่างสดุเป็นแถบสนีำ้าตาล
กำาหนดรูปแบบการแสดงผลของขอ้ความใน Left Column
1. ใน HTML file ใหเ้พิม่ <article> ดังน้ี<!-- Left Column --><aside id="leftcol"><article><h4>Editorial</h4><p><img src="smfeature1.jpg" width="64" height="63" alt="Editorial Image" border="0" />Lorem ipsum dolor sit ame, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Aenean commodo ligula eget dolor.</p></article>
<article><h4>Dog Advice</h4><p><img src="smfeature2.jpg" width="64" height="79" alt="Dog Advice Image" border="0" />Lorem ipsum dolor sit ame, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Aenean commodo ligula eget dolor.</p></article>
<article><h4>Reader Emails</h4><p><img src="smfeature3.jpg" width="64" height="83" alt="Reader Emails Image" border="0" /> Lorem ipsum dolor sit ame, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Aenean commodo ligula eget dolor.</p></article>
</aside>
2. ใน CSS file สว่นของ /*--------------Small Feature for Left column---------------------*/กำาหนด Selector article ดังน้ีarticle{}
article{width: 190px;height: auto;border: thin solid #613838;margin-bottom: 10px;
}
กำาหนด Style rules สำาหรบั h4 ท่ีอยูใ่น <article> ดังน้ี
article h4{font-family: arial, sans-serif;font-size: 85%;color: #fff;background: #613838;text-align: center;letter-spacing: 2px;padding: .5em;margin-top: 0px;
}
กำาหนด Style rules สำาหรบั p ท่ีอยูใ่น <article> ดังน้ี
article p{font-family: arial, sans-serif;font-size: 75%;color: #000;margin: 10px;
}
กำาหนด Style rules สำาหรบั img ท่ีอยูใ่น <article> ดังน้ี
article img{float: left;margin-right: 5px;
}
3. Save และดผูลลัพธ ์
เพิม่กรอบในสว่นของคอลัมด้านซา้ย แบง่ตามหัวขอ้ของ Editorial ,Dog advice and
Reader Emails
กำาหนดรูปแบบการแสดงผลของขอ้ความใน Main Column
1. ใน CSS file สว่นของ /*------------------------Fecture main Section-------------------*/กำาหนด Selector section ดังน้ีsection p {}
กำาหนด Style rules สำาหรบั p ท่ีอยูใ่น <section> ดังน้ี
section p{font-size: 85%;line-height: 1.25em;
}
img.feature2{float: left;margin-right: 5px;
}
2. ใน HTML file ใหเ้พิม่ class = feature2 ใน Tag <img> ของรูปท่ีชื่อวา่ featureimg2.jpg ดังน้ี
<img src="featureimg2.jpg" width="100" alt="Dog photo" border="0" class="feature2"/>
3. Save และดผูลลัพธ ์
เนื้อหาของภาพสนัุขสดีำาจากท่ี เริม่ต้นขอบล่างสดุ เปลี่ยนเป็นเริม่บนสดุขอบบนขวา
กำาหนดรูปแบบการแสดงผลในสว่นของ Search และ Link Section
1. ใน CSS file สว่นของ เพิม่สว่นของ Search box /*------------------------Search box-------------------*/div#searchbox{
width: 155px;height: auto;border: thin solid #613838;margin-bottom: 20px;background: #93d4cd;text-align: center;
}
กำาหนด Style rules สำาหรบั h4 ของ class seachbox ดังน้ี
div#searchbox h4{font-size: 85%;color: #fff;background-color: #613838;letter-spacing: 2px;padding: .5em;margin-top: 0px;
}
/*------------------------Links Section-------------------*/
div#links{width: 150px;height: auto;border: solid thin #613838;
}
div#links p{padding-left: 20px;
}
div#links p a:link{color: #613838;
}
div#links p a:visied{color: #613838;
}
div#links p a:hover{border-bottom: solid #613838;
}
div#links p a{text-decoration: none;
}
img.nextmonth {padding-left: 15px;
}
2. ใน HTML file ใหเ้พิม่ <div id=”searchbox”> ดังน้ี<!-- Right Column --><aside id="rightcol"><div id="searchbox"><h4>Search the Site</h4><form method="get" action=" "><p><input type="text" value="Enter search text..." maxlength="25" size="15" /></p><p><input type="submit" /></p></form></div>
และเพิม่ <div id="links"> ดังน้ี
<div id="links"><img src="links_img.jpg" width="148" height="106" alt="Sponsored Links" Title="Sponsored Links" border="0" /><p><a href=" ">Pet Supplies</a></p><p><a href=" ">AKC</a></p><p><a href=" ">Westminster</a></p><p><a href=" ">Dog Blogs</a></p><p><a href=" ">Veterinarians</a></p>
และเพิม่ class="nextmonth" สำาหรบัภาพ next_month.jpg ดังน้ี
<img src="next_month.jpg" width="121" height="176" alt="Next Month Image" border="0" class="nextmonth" /></div>
3. Save และดผูลลัพธ ์
มกีารเปล่ียนแปลงคอลัมขวาคือมกีรอบในสว่นของ Search the Site and Sponsored Links และมสีพีื้นหลังในกรอบ Search the Site
สดุท้ายนิสติจะได้ชิน้งานดังภาพน้ี