Cách tạo trang Splash cho trang web: 8 bước (có hình ảnh)

Mục lục:

Cách tạo trang Splash cho trang web: 8 bước (có hình ảnh)
Cách tạo trang Splash cho trang web: 8 bước (có hình ảnh)

Video: Cách tạo trang Splash cho trang web: 8 bước (có hình ảnh)

Video: Cách tạo trang Splash cho trang web: 8 bước (có hình ảnh)
Video: Cách gửi mail trên máy tính cực dễ 2024, Tháng tư
Anonim

Vì vậy, bạn muốn đặt một trang giật gân trên trang web của mình? Các trang giật gân là một cách tuyệt vời để xây dựng thương hiệu cho trang web của bạn. Cách thực hiện này giả định rằng bạn biết khá nhiều về HTML và CSS, và nó có thể hữu ích nếu bạn cũng biết một số JavaScript cơ bản.

Các bước

Tạo trang Splash cho trang web Bước 1
Tạo trang Splash cho trang web Bước 1

Bước 1. Tạo trang phác thảo của bạn

Bạn có thể sử dụng một CSS bên ngoài (Trang định kiểu xếp tầng), nhưng trong ví dụ này, chúng tôi sẽ sử dụng bảng kiểu nội bộ. Vì vậy, bạn cần bắt đầu với các thẻ cơ bản của mình:

Chào mừng!

Tạo trang Splash cho trang web Bước 2
Tạo trang Splash cho trang web Bước 2

Bước 2. Điền thông tin CSS và tiêu đề vào phần

Rõ ràng là bạn sẽ cần thay đổi các giá trị để phù hợp với nhu cầu của mình:

Chào mừng!

nội dung {background-color: #DCDCDC}

Đã bỏ qua…

Ghi chú:

Bạn có thể muốn thêm một thuộc tính CSS cho các phông chữ.

Tạo trang Splash cho trang web Bước 3
Tạo trang Splash cho trang web Bước 3

Bước 3. Thêm tập lệnh để chuyển vào trang chủ

Phần này là tùy chọn và bạn chỉ cần bỏ qua nếu không muốn phần này tự động chuyển sang.

Đã bỏ qua…

window.onload = thời gian chờ;

thời gian chờ của hàm () {

window.setTimeout ("redirect ()", 5000)}

chức năng redirect () {

window.location = "Home.htm"

trở lại}

Đã bỏ qua…

Đã bỏ qua…

Ghi chú:

Con số 5000 có nghĩa

Bước 5. giây. Thay đổi điều này cho thời gian ngắn hơn hoặc dài hơn. Thay đổi tên của tệp chuyển hướng thành tên của trang chủ của bạn.

Tạo trang Splash cho trang web Bước 4
Tạo trang Splash cho trang web Bước 4

Bước 4. Thêm tiêu đề

Đây có lẽ phải là tên của trang web của bạn và bạn nên đính kèm nó trong thẻ để giúp các công cụ tìm kiếm dễ dàng tìm thấy.

Tạo trang Splash cho trang web Bước 5
Tạo trang Splash cho trang web Bước 5

Bước 5. Thêm hình ảnh

Điều này sẽ chứng minh những gì trang web của bạn nói về. Một lần nữa, bạn có thể sử dụng

Image
Image

nhãn.

Đã bỏ qua…

Ghi chú:

Bước này giả định rằng bạn đã lưu hình ảnh tiêu đề trong cùng một thư mục với .htm tệp và nó được đặt tên "splashimage.jpg". Bạn có thể thêm định vị CSS nếu bạn muốn hình ảnh ở một nơi khác trên màn hình, chẳng hạn như trung tâm.

Bước 6. Thêm một nút

Nút này sẽ là một cách để khách truy cập vào trang chủ nhanh hơn. Khi họ nhấp vào nó, họ ngay lập tức được chuyển đến trang chủ. Ngoài ra, bạn có thể chỉ cần cung cấp một liên kết đến trang chủ.

Đã bỏ qua…

Ghi chú:

Bạn có thể thay đổi "giá trị" phần tử để thay đổi văn bản hiển thị trên nút.

Tạo trang Splash cho trang web Bước 7
Tạo trang Splash cho trang web Bước 7

Bước 7. Thêm một số văn bản

Đây có thể là bất cứ thứ gì bạn thích. Nói chung, đó là một loại lời chào "Cảm ơn bạn đã ghé thăm" hoặc một lời chào "Được tạo bởi…".

Đã bỏ qua…

Cảm ơn bạn đã đến thăm!

Ghi chú:

Đây là nơi bạn có thể sử dụng CSS cho văn bản. Bạn có thể sử dụng một tiêu đề (

) thay vào đó nếu bạn thích.

Tạo trang Splash cho trang web Bước 8
Tạo trang Splash cho trang web Bước 8

Bước 8. Bây giờ bạn có một trang giật gân đang hoạt động

Bây giờ đã đến lúc hoàn thiện nó bằng cách sử dụng CSS và làm cho nó hoạt động!

Video - Bằng cách sử dụng dịch vụ này, một số thông tin có thể được chia sẻ với YouTube

Lời khuyên

  • Thêm nhiều nội dung tùy thích, nhưng đừng làm cho nó quá bận rộn.
  • Bạn có thể thêm âm thanh và video nếu muốn, nhưng điều này sẽ khiến thời gian tải lâu đối với một số người.
  • Nếu bạn không biết nhiều về HTML hoặc CSS, bạn có thể sử dụng trình chỉnh sửa có hướng dẫn như Blogger để làm cho quá trình này đơn giản hơn.

Đề xuất: