Microsoft Expression Web - หน้าเว็บเปล่า

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

Microsoft Expression Web สามารถสร้างเพจประเภทต่อไปนี้ -

HTML
ASPX
ASP
PHP
CSS
มาสเตอร์เพจ
เทมเพลตเว็บแบบไดนามิก
JavaScript
XML
ไฟล์ข้อความ

ในบทนี้เราจะสร้างเพจ HTML และสไตล์ชีตที่เกี่ยวข้อง

สร้างหน้าว่าง

ในการสร้างหน้าว่างคุณสามารถไปที่เมนูไฟล์แล้วเลือก New → Page… ตัวเลือกเมนู

จากกล่องโต้ตอบใหม่คุณสามารถสร้างหน้าว่างประเภทต่างๆเช่นหน้า HTML, หน้า ASPX, หน้า CSS เป็นต้นและคลิกตกลง

ดังที่คุณเห็นที่นี่รหัสเริ่มต้นถูกเพิ่มโดย Microsoft Expression Web แล้ว

<!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> 
   </head>  

   <body> 
      <h1> 
         This is a blank web page 
      </h1> 
   </body> 
</html>

อย่างที่คุณเห็นหน้าที่สร้างขึ้นใหม่ของคุณมีชื่อไฟล์ Untitled_1.html หรือ Untitled_1.htm. คุณจะต้องบันทึกเพจโดยกด Ctrl + S แล้วระบุชื่อ

เนื่องจากเว็บไซต์ของเรามีไฟล์ index.htmlหน้าเราไม่ต้องการอีก อย่างไรก็ตามหากคุณสร้างเว็บไซต์ว่างเปล่าให้ตั้งชื่อหน้านี้index.html.

หากต้องการดูเว็บของคุณในเบราว์เซอร์ให้ไปที่เมนูไฟล์แล้วเลือกไฟล์ Preview in Browser → Any browserสมมติว่า Internet Explorer

สร้างหน้า CSS

มาดูขั้นตอนการสร้างหน้า CSS ทีละขั้นตอน

Step 1 - ในการสร้างหน้า CSS ให้ไปที่เมนูไฟล์แล้วเลือก New → Page… ตัวเลือกเมนู

Step 2 - เลือก General → CSS แล้วคลิกตกลง

Step 3 - บันทึกหน้าและพิมพ์ชื่อสำหรับสไตล์ชีต

Step 4 - คลิกไฟล์ Save ปุ่ม.

Step 5 - ตอนนี้ไปที่หน้า index.html

Step 6 - ในไฟล์ Manage Styles Panelคลิก Attach Style Sheet.

Step 7 - เรียกดูสไตล์ชีตของคุณและเลือกหน้าปัจจุบันจาก“ แนบไปยัง” และลิงก์จาก“ แนบเป็น” แล้วคลิกตกลง

Step 8 - ตอนนี้คุณจะเห็นว่ามีการเพิ่มบรรทัดใหม่โดยอัตโนมัติในหน้า index.html

<link href = "sample.css" rel = "stylesheet" type = "text/css" />

Step 9 - bodyองค์ประกอบกำหนดเนื้อหาของเอกสาร เพื่อจัดรูปแบบ<body>เราต้องสร้างรูปแบบใหม่ ขั้นแรกเลือกแท็กเนื้อหาในมุมมองออกแบบจากนั้นคลิกที่สไตล์ใหม่ ... ในแผงใช้สไตล์หรือแผงจัดการสไตล์ซึ่งจะเปิดกล่องโต้ตอบสไตล์ใหม่

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

Step 10 - จาก URL ให้เลือกไฟล์ sample.cssไฟล์. ทางด้านซ้ายจะมีรายการหมวดหมู่เช่นแบบอักษรพื้นหลัง ฯลฯ และในปัจจุบันแบบอักษรจะถูกไฮไลต์ ตั้งค่าข้อมูลที่เกี่ยวข้องกับฟอนต์ตามความต้องการของคุณดังที่แสดงในภาพหน้าจอด้านบนแล้วคลิกตกลง

Step 11- ตอนนี้คุณสามารถเห็นในมุมมองการออกแบบว่าสีพื้นหลังและแบบอักษรเปลี่ยนไปตามที่เราเลือกไว้ ตอนนี้ถ้าคุณเปิดไฟล์ sample.css คุณจะเห็นว่าข้อมูลทั้งหมดถูกเก็บไว้ในไฟล์ CSS โดยอัตโนมัติ

มาดูหน้าเว็บของเราในเบราว์เซอร์ คุณจะสังเกตว่าสไตล์ถูกนำไปใช้จากไฟล์ CSS