เฉลย-Lab10 - Ans

User Interface Design and Development ปฏิบตั ิการที่ 10 CSS EP2
ปฏิบัติการที่ 10 CSS EP2

วัตถุประสงค์
• เพื่อให้นิสิตเข้าใจภาษา CSS
• เพื่อให้นิสิตสามารถพัฒนาเว็บไซต์ด้วย CSS
แบบฝึกปฎิบัติการ
1. จงแสดงผลลัพธ์จากโค้ด HTML ต่อไปนี้โดยให้นสิ ิตคัดลอกหน้าจอผลลัพธ์ลงในช่องแสดงผลลัพธ์
โค้ดโปรแกรม
ผลลัพธ์
2. จงแสดงผลลัพธ์จากโค้ด HTML ต่อไปนี้โดยให้นสิ ิตคัดลอกหน้าจอผลลัพธ์ลงในช่องแสดงผลลัพธ์

โค้ดโปรแกรม
3. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML
โค้ดโปรแกรมสมบูรณ์
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #e4bcbc;
padding: 20px;
text-align: center;
}
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 8; /* Stay at the top */
left: 5;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</body>
</html>
4. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML โดยการแสดงผลต้องรองรับทั้งหน้าจอ PC และ Mobile

ผลลัพธ์หน้าจอ PC ผลลัพธ์หน้าจอ Mobile
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
box-sizing: border-box;
}
body {
margin: 0;
}

.header {
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.sidenav {
left: 5;
padding-top: 20px;
}
.sidenav a {
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
/* Create three equal columns that floats next to each other */

.column {
float: right;
width: 29.83%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of
next to each other */
@media screen and (max-width:900px) {
.column {
width: 60%;
}
}
/* Style the footer */

.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Header</h1>
</div>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium
urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam
orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<h2>Column</h2>
</div>
<h2>Column</h2>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
5. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML โดยการแสดงผลต้องรองรับทั้งหน้าจอ PC และ Mobile

ผลลัพธ์หน้าจอ PC ผลลัพธ์หน้าจอ Mobile
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
}
body {
margin: 0;
}

.header {
padding: 20px;
text-align: center;
}
.sidenav {
left: 5;
padding-top: 20px;
}
.sidenav a {
font-size: 20px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}

.column {
float: right;
width: 45%;
padding: 15px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of
next to each other */
.column {
width: 60%;
}
}
/* Table */
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {

border: 3px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h1>ระบบทะเบียนมหาวิทยาลัยบูรพา</h1>
</div>
<a href="#">เข้าสู่ระบบ</a>
<a href="#">วิชาที่เปิดสอน</a>
<a href="#">ตารางเรียนนิสิต</a>
<a href="#">ตารางการใช้ห้อง</a>
</div>
<div class="row">
<h2>รายวิชาที่เรียน</h2>
<table id="customers">
<tr>
<th>ลาดับ</th>
<th>รหัสวิชา</th>
<th>หน่วยกิต</th>
</tr>
<tr>
<td>1</td>
<td>88612547</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>88635359</td>
<td>3</td>
</tr>
</table>
</div>
<h2>ประกาศเรื่อง</h2>
<p>กาหนดการประเมินการเรียนการสอนปีการศึกษา 2565 ภาคปลาย</p>
</div>
</div>
</body>
</html>
6. กาหนดให้นิสิตสร้างหน้าจอเมนูหลัก (Main Menu)
ส่วนประกอ หน้าจอเมนูหลัก (Main Menu)

บหน้าจอ
หน้าจอเมนู
หลัก
Layout ประกอบด้วย 4 ส่วน

1. Header
2. Menu
3. Main content
4. Footer
Logo แสดงอยู่บริเวณมุมซ้ายด้านบนสุดของหน้าจอ
ร้านค้า
ชื่อ: แสดงชื่อและนามสกุลของบุคคลทีเ่ ข้าใช้งานระบบอยู่
เมนู“จัดการ ลิ้งค์ข้อความ “จัดการข้อมูลผู้ใช้” เมื่อนาเมาส์ไปวางที่ตัวอักษรสีของตัวอักษรจะเปลีย่ นไป
ข้อมูลผู้ใช้”
เมนู “ข้อมูล ลิ้งค์ข้อความ “ข้อมูลสมาชิก” เมือ่ นาเมาส์ไปวางที่ตัวอักษรสีของตัวอักษรจะเปลี่ยนไป
สมาชิก”
เมนู “ออก ลิ้งค์ข้อความ “ออกจากระบบ” เมื่อนาเมาส์ไปวางที่ตัวอักษรสีของตัวอักษรจะเปลี่ยนไป
จากระบบ”
Footer -แสดงข้อความ “D-coffee”

-ตัวอักษรสีดา
-ตัวเอียง
-จัดตาแหน่งกลาง
-พื้นหลังสีเขียว
Main ประกอบด้วยข้อมูล 3 ส่วน
Content 1. VDO แนะนา
2. ข้อมูลตารางสินค้าขายไม่ดี
3. ข้อมูลตารางสินค้าขายดี
การใช้งาน หน้าจอแสดงผลได้ทุกอุปกรณ์ทั้ง PC และ Mobile
หน้าจอ
Code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
}
body {
margin: 0;
}
p{
font-size: 20px;
font-style: italic;
}
.header {
background-color: rgb(255, 255, 255);
padding: 25px;
text-align: center;
border: 1px solid rgb(5, 5, 5);
}
.sidenav {
left: 5;
background-color: rgba(255, 255, 255, 0.849); /* Black */
padding-top: 20px;
border: 1px solid rgb(5, 5, 5);
}
.sidenav a {
font-size: 20px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
/* Create table*/
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {

border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
/*VDO display*/
video {
max-width: 100%;
height: auto;
}
/*Image */
img {
max-width: 80%;
height: auto;
}
.column {
float: right;
width: 29.80%;
padding: 15px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
.column {
width: 60%;
}
}
/* Style the footer */

.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Main Menu of Staff</h1>
</div>
<img src="logo.jpg" width="460" height="300">
<a href="#">จัดการข้อมูลผู้ใช้</a>
<a href="#">ข้อมูลสมาชิก</a>
<a href="#">ออกจากระบบ</a>
</div>
<div class="row">
<h2>สินค้าขายดี</h2>
<tr>
<th>ชื่อสินค้า</th>
<th>ยอดขายรวม (บาท)</th>
</tr>
<tr>
<td>1</td>
<td>Maria</td>
<td>5,600</td>
</tr>
<tr>
<td>2</td>
<td>Christina</td>
<td>5,600</td>
</tr>
<tr>
<td>3</td>
<td>Francisco</td>
<td>5,600</td>
</tr>
<tr>
<td>4</td>
<td>Roland</td>
<td>5,600</td>
</tr>
</table>
</div>
<h2>สินค้าขายไม่ดี</h2>
<tr>
<th>ชื่อสินค้า</th>
<th>ยอดขายรวม (บาท)</th>
</tr>
<tr>
<td>1</td>
<td>Yoshi</td>
<td>0.0</td>
</tr>
<tr>
<td>2</td>
<td>Giovanni</td>
<td>0.0</td>
</tr>
<tr>
<td>3</td>
<td>Simonr</td>
<td>0.0</td>
</tr>
<tr>
<td>4</td>
<td>Marie</td>
<td>0.0</td>
</tr>
</table>
</div>
<h2>VDO แนะนา</h2>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<div class="footer">
<p>D-coffee</p>
</div>
</body>
</html>

เฉลย-Lab10 - Ans

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

เฉลย-Lab10 - Ans

Uploaded by

Copyright:

Available Formats

User Interface Design and Development ปฏิบตั ิการที่ 10 CSS EP2

ปฏิบัติการที่ 10 CSS EP2

2. จงแสดงผลลัพธ์จากโค้ด HTML ต่อไปนี้โดยให้นสิ ิตคัดลอกหน้าจอผลลัพธ์ลงในช่องแสดงผลลัพธ์

4. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML โดยการแสดงผลต้องรองรับทั้งหน้าจอ PC และ Mobile

/* Style the header */

/* Style the top navigation bar */

/* Create three equal columns that floats next to each other */

/* Style the footer */

5. จากผลลัพธ์หน้าจอต่อไปนี้ให้นิสิตแปลงเป็นโค้ด HTML โดยการแสดงผลต้องรองรับทั้งหน้าจอ PC และ Mobile

/* Style the header */

/* Style the top navigation bar */

/* Create three equal columns that floats next to each other */

#customers td, #customers th {

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

6. กาหนดให้นิสิตสร้างหน้าจอเมนูหลัก (Main Menu)

ส่วนประกอ หน้าจอเมนูหลัก (Main Menu)

Layout ประกอบด้วย 4 ส่วน

Footer -แสดงข้อความ “D-coffee”

/* Style the top navigation bar */

#customers td, #customers th {

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

/* Style the footer */

You might also like