Cách đặt Nền Trên Trang Web

Mục lục:

Cách đặt Nền Trên Trang Web
Cách đặt Nền Trên Trang Web

Video: Cách đặt Nền Trên Trang Web

Video: Cách đặt Nền Trên Trang Web
Video: Cách thay đổi hình nền cho trang web - Phạm Hữu Hiền - Web Cho Mọi Người 2024, Có thể
Anonim

Thiết kế của bất kỳ trang web nào đều dựa trên hình ảnh nền và màu sắc, giống như một ngôi nhà trên nền móng. Nếu bạn muốn thay thế nền tảng điển hình của tài nguyên Internet bằng một thứ gì đó cá nhân hơn, thì bạn nên bắt đầu với việc phát triển thiết kế. Và khi nó sẵn sàng, phần kỹ thuật thuần túy sẽ vẫn còn, nghĩa là thay thế thiết kế cũ của nền trang web được chỉ định trong mã nguồn của các trang bằng thiết kế mới. Có một số cách để thực hiện điều này trong thực tế.

Cách đặt nền trên trang web
Cách đặt nền trên trang web

Hướng dẫn

Bước 1

Trước tiên, bạn cần tìm hiểu cách nào nền được đặt trong phiên bản hiện tại của trang web. Để thực hiện việc này, hãy mở mã HTML của trang. Bạn có thể thực hiện việc này bằng một trình soạn thảo văn bản đơn giản bằng cách tải trước tệp từ máy chủ. Hoặc bạn có thể sử dụng trình chỉnh sửa các trang của hệ thống quản lý nội dung, nếu bạn sử dụng. Trình chỉnh sửa trang không yêu cầu tải tệp xuống mà sửa đổi tệp trực tiếp trên máy chủ bằng cách sử dụng trình duyệt làm giao diện. Mã HTML (Ngôn ngữ đánh dấu siêu văn bản) của trang bạn mở bao gồm các dòng hướng dẫn cho trình duyệt. Chúng mô tả các loại, giao diện và vị trí của từng phần tử của một trang web. Những hướng dẫn này thường được gọi là "thẻ". Bản thân thứ tự của các thẻ trong mã trang cũng tuân theo các quy tắc của ngôn ngữ HTML - chúng được chia thành các khối, khối đầu tiên phải là khối đề mục bắt đầu bằng thẻ và kết thúc. Theo sau nó là khối mà bạn quan tâm hơn bây giờ - phần nội dung của tài liệu. Nó được giới hạn cho các thẻ và. Trong thẻ mở của khối này (), bạn có thể đặt thông tin về nền của trang. Thông tin như vậy trong các thẻ được gọi là "thuộc tính". Thuộc tính của thẻ body đặt màu nền được ký hiệu là bgcolor và trong mã, nó có thể trông như sau: Ở đây chúng tôi đặt màu nền cho trang thành màu bạc. Trình duyệt có thể nhận ra một số màu theo tên của chúng, nhưng để không bị nhầm lẫn, tốt hơn là chỉ ra mã thập lục phân của chúng. Phiên bản có màu bạc trong biểu thức thập lục phân này sẽ trông như thế này: Vì vậy, bạn cần tìm thẻ bắt đầu bằng <body trong mã trang và kiểm tra xem nó có màu nền hay không. Nếu vậy, hãy thay thế chỉ báo màu trong đó bằng phiên bản mới của bạn và lưu các thay đổi vào trang.

Bước 2

Nền trong thiết kế hiện tại của trang web của bạn có thể được đặt không phải bằng màu sắc mà bằng hình ảnh. Thuộc tính tương ứng của thẻ body được gọi là background và nó có thể trông giống như sau trong đoạn mã: Ở đây, background là hình ảnh bg.jpg

Bước 3

Khi mô tả sự xuất hiện của các trang có thiết kế tương đối phức tạp, hãy sử dụng "bảng kiểu xếp tầng" - CSS (Cascading Style Sheets). Các khối mã CSS có thể được bao gồm trực tiếp trong mã trang hoặc chứa trong tệp bên ngoài có phần mở rộng "css". Bạn cần tìm thẻ mô tả kiểu bắt đầu bằng <style trong phần tiêu đề của mã trang (giữa thẻ và). Nếu nó chứa một liên kết đến một tệp bên ngoài, nó sẽ trông giống như sau: @import "style.css"; Đây là một liên kết đến một biểu định kiểu có tên style.css. Bạn cần mở tệp được chỉ định để chỉnh sửa. Và nếu không có liên kết nào và sau thẻ mở <style có các hướng dẫn về style, thì bạn cần chỉnh sửa chúng tại đây. Trong cả hai tùy chọn, trong số các mô tả kiểu, bạn cần tìm những kiểu liên quan đến phần nội dung của tài liệu (body). Khối mô tả này có thể trông giống như sau: body {

màu nền: Bạc;

màu đen;

} Ở đây, bạn cần thay thế giá trị của tham số màu nền bằng giá trị của màu mới và tốt hơn trong cùng các giá trị thập lục phân. Tùy chọn hình nền trong hướng dẫn CSS sẽ giống như sau: body {

background: # C0C0C0 url (img / bg.jpg) repeat-y;

màu đen;

} Ở đây liên kết đến hình ảnh tương tự như liên kết được thảo luận ở trên và # C0C0C0 trước liên kết có nghĩa là không gian trang không bị chiếm bởi hình nền sẽ có nền màu bạc. "Lặp lại-y" chỉ ra rằng ảnh nền nên được nhân dọc theo trục Y (dọc)."Lặp lại-y" có thể được thay thế bằng "lặp lại-x" (sao chép theo chiều ngang) hoặc "không lặp lại" (không sao chép). Nếu bạn hoàn toàn không chỉ định lặp lại, thì hình nền sẽ được xếp vào không gian nền của trang theo mọi hướng.

Đề xuất: