Microsoft Expression Web - เค้าโครง HTML

ในบทนี้เราจะเรียนรู้อีกวิธีหนึ่งในการออกแบบเค้าโครงของหน้า ในบทสุดท้ายเราได้ใช้สไตล์ชีตเพื่อนำสไตล์ไปใช้กับส่วนหัวส่วนท้าย ฯลฯ แต่คุณยังสามารถระบุสไตล์ในหน้า HTML ได้โดยไม่ต้องใช้สไตล์ชีทเพิ่มเติม

นี่ไม่ใช่วิธีที่แนะนำในการออกแบบเค้าโครง แต่เพื่อความเข้าใจในจุดประสงค์เราจะกล่าวถึงเทคนิคนี้ที่นี่ ลองทำตามขั้นตอนที่ระบุด้านล่าง

Step 1 - เพิ่มหน้า HTML และเรียกมันว่า layoutdemo.html

Step 2 - ตอนนี้เพิ่มไฟล์ <div> tag จากกล่องเครื่องมือ

Step 3 - ในไฟล์ Apply Styles คลิกที่แผง New Style…

Step 4- เมื่อคุณเลือกตัวเลือกหน้าปัจจุบันจากรายการแบบเลื่อนลง“ กำหนดใน” รูปแบบจะถูกบันทึกไว้ในหน้า HTML เดียวกัน ตั้งค่าฟอนต์สำหรับเพจของคุณจากนั้นไปที่หมวดพื้นหลัง

Step 5- ตั้งค่าสีสำหรับพื้นหลังของคุณ คุณยังสามารถตั้งค่าประเภทเส้นขอบกล่องและตำแหน่งแล้วคลิกตกลง

layoutdemo.html

คุณจะเห็นว่ามีการเพิ่มสไตล์ในไฟล์ HTML เดียวกัน

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
      <style type = "text/css">
         #container { 
            font-family: Arial, Helvetica, sans-serif; 
            font-size: medium; 
            font-weight: normal; 
            font-style: normal; 
            font-variant: normal; 
            text-transform: capitalize; 
            color: #800000; 
            background-color: #C0C0C0; 
            padding: 8px; 
            margin: 8px; 
            width: 90%; 
         } 
      </style> 
   </head>  

   <body> 
      <div id = "container"></div> 
   </body> 
</html>

ในทำนองเดียวกันคุณสามารถเพิ่มสไตล์อื่น ๆ เช่นส่วนหัวส่วนท้ายเนื้อหาหลัก ฯลฯ ดังที่แสดงด้านบน