วิธีสร้าง Splash Page สำหรับเว็บไซต์: 8 ขั้นตอน (พร้อมรูปภาพ)

สารบัญ:

วิธีสร้าง Splash Page สำหรับเว็บไซต์: 8 ขั้นตอน (พร้อมรูปภาพ)
วิธีสร้าง Splash Page สำหรับเว็บไซต์: 8 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีสร้าง Splash Page สำหรับเว็บไซต์: 8 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีสร้าง Splash Page สำหรับเว็บไซต์: 8 ขั้นตอน (พร้อมรูปภาพ)
วีดีโอ: เทคนิคจัดการ Email ขั้นเทพ 📧📬 | We Mahidol 2024, อาจ
Anonim

คุณต้องการใส่ splash page บนหน้าเว็บของคุณหรือไม่? หน้า Splash เป็นวิธีที่ยอดเยี่ยมในการสร้างแบรนด์เว็บไซต์ของคุณ How-To นี้ถือว่าคุณรู้ HTML และ CSS ค่อนข้างน้อย และอาจช่วยคุณได้หากคุณรู้ JavaScript พื้นฐานบางอย่างด้วย

ขั้นตอน

สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 1
สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 1

ขั้นตอนที่ 1 สร้างหน้าโครงร่างของคุณ

คุณสามารถใช้ an CSS ภายนอก (Cascading Style Sheet) แต่ในตัวอย่างนี้ เราจะใช้ an สไตล์ชีตภายใน. ดังนั้นคุณต้องเริ่มต้นด้วยแท็กพื้นฐานของคุณ:

ยินดีต้อนรับ!

สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 2
สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 2

ขั้นตอนที่ 2 กรอกข้อมูล CSS และชื่อในส่วน

คุณจะต้องเปลี่ยนค่าให้เหมาะสมกับความต้องการของคุณอย่างชัดเจน:

ยินดีต้อนรับ!

เนื้อหา {สีพื้นหลัง: #DCDCDC}

ละเว้น…

บันทึก:

คุณอาจต้องการเพิ่มคุณสมบัติ CSS สำหรับแบบอักษร

สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 3
สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 3

ขั้นตอนที่ 3 เพิ่มสคริปต์เพื่อย้ายไปยังโฮมเพจ

ส่วนนี้เป็นทางเลือก และคุณสามารถละเว้นได้หากคุณไม่ต้องการให้ดำเนินการต่อไปโดยอัตโนมัติ

ละเว้น…

window.onload=หมดเวลา;

ฟังก์ชั่นหมดเวลา (){

window.setTimeout("เปลี่ยนเส้นทาง()", 5000)}

ฟังก์ชันเปลี่ยนเส้นทาง (){

window.location="Home.htm"

กลับ}

ละเว้น…

ละเว้น…

หมายเหตุ:

จำนวน 5000 วิธี

ขั้นตอนที่ 5 วินาที เปลี่ยนสิ่งนี้ให้สั้นลงหรือนานขึ้น เปลี่ยนชื่อไฟล์เปลี่ยนเส้นทางเป็นชื่อโฮมเพจของคุณ

สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 4
สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 4

ขั้นตอนที่ 4 เพิ่มในชื่อ

นี่น่าจะเป็นชื่อเว็บไซต์ของคุณ และคุณควรใส่ไว้ในแท็กเพื่อให้เครื่องมือค้นหาค้นหาได้ง่าย

สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 5
สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 5

ขั้นตอนที่ 5. เพิ่มรูปภาพ

สิ่งนี้ควรแสดงให้เห็นว่าเว็บไซต์ของคุณเกี่ยวกับอะไร คุณสามารถใช้.ได้อีกครั้ง

Image
Image

แท็ก

ละเว้น…

หมายเหตุ:

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

ขั้นตอนที่ 6 เพิ่มปุ่ม

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

ละเว้น…

บันทึก:

คุณสามารถเปลี่ยน "ค่า" องค์ประกอบเพื่อเปลี่ยนข้อความที่แสดงบนปุ่ม

สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 7
สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 7

ขั้นตอนที่ 7 เพิ่มข้อความ

นี่อาจเป็นอะไรก็ได้ที่คุณชอบ โดยทั่วไปแล้วจะเป็นการทักทายแบบ "ขอบคุณที่มาเยือน" หรือคำทักทาย "สร้างโดย…"

ละเว้น…

ขอบคุณสำหรับการเยี่ยมชม!

หมายเหตุ:

นี่คือที่ที่คุณสามารถใช้ CSS สำหรับข้อความได้ คุณสามารถใช้หัวเรื่อง (

) แทนได้ตามใจชอบ

สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 8
สร้าง Splash Page สำหรับเว็บไซต์ ขั้นตอนที่ 8

ขั้นตอนที่ 8 ตอนนี้คุณมีหน้าสแปลชที่ใช้งานได้

ตอนนี้ก็ถึงเวลาที่จะสวยขึ้นโดยใช้ CSS และทำให้มันใช้งานได้จริง!

วิดีโอ - การใช้บริการนี้ อาจมีการแบ่งปันข้อมูลบางอย่างกับ YouTube

เคล็ดลับ

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

แนะนำ: