Cách Thiết Kế Lại Mẫu Trang Web

Mục lục:

Cách Thiết Kế Lại Mẫu Trang Web
Cách Thiết Kế Lại Mẫu Trang Web

Video: Cách Thiết Kế Lại Mẫu Trang Web

Video: Cách Thiết Kế Lại Mẫu Trang Web
Video: Hướng dẫn thiết kế website WordPress miễn phí 100% hosting và tên miền | Ai cũng làm được MỚI 2020 2024, Có thể
Anonim

Cách dễ nhất để tạo một trang web là sử dụng một mẫu. Tuy nhiên, để tài nguyên nổi bật, bạn cần thay đổi bố cục mặc định. Và ở đây bạn không thể làm nếu không có kiến thức cơ bản về html và css.

Cách thiết kế lại mẫu trang web
Cách thiết kế lại mẫu trang web

Hướng dẫn

Bước 1

Tìm mẫu trang web phù hợp với bạn nhất trên Internet. Chú ý đến khả năng của nó, khả năng thích ứng với kích thước của màn hình, các tính năng của menu và cách bố trí của các cột. Tải phiên bản bạn thích về máy tính, giải nén kho lưu trữ. Kiểm tra hiệu suất của nó bằng cách tải các tệp lên thư mục gốc của trang web. Có lẽ mẫu có lỗi và sẽ không được cài đặt chính xác, sau đó sẽ không có ích gì để làm việc với nó trong tương lai.

Bước 2

Ngay cả khi bạn không làm lại hoàn toàn mẫu, hãy thay thế hầu hết các hình ảnh, và đặc biệt là những hình ảnh được đặt dưới dạng biểu trưng. Thay thế từng ảnh theo cách này:

- Mở tệp đồ họa trong chương trình Photoshop;

- trong menu "Hình ảnh" - "Kích thước hình ảnh" nhìn vào các thông số của nó;

- mở một trang tính mới có cùng kích thước;

- tạo hình ảnh mong muốn bằng cách sử dụng các công cụ ứng dụng;

- Làm phẳng tất cả các lớp và lưu (không dành cho web) một hình ảnh mới dưới cùng tên và trong cùng một thư mục, thiết lập định dạng ban đầu.

Vì vậy, thay vì một hình ảnh, một hình ảnh khác sẽ xuất hiện.

Bước 3

Ngay sau khi bạn thay đổi tất cả các ảnh, hãy nén thư mục chứa các tệp (trong trường hợp của Joomla) và tải nó lên thông qua bảng quản trị trang web trong menu "Tiện ích mở rộng". Xem chủ đề có hiển thị chính xác với các hình minh họa mới hay không.

Bước 4

Thay đổi phần còn lại của các tham số trong style.css. Hơn nữa, sẽ thuận tiện hơn nhiều khi thực hiện việc này không thông qua bảng quản trị mà trên máy tính. Hợp lý là sử dụng localhost (Denver) để xem kết quả của các phép biến đổi càng sớm càng tốt. Điều này sẽ tránh phải tải kết quả lên máy chủ mỗi lần để xem kết quả sau lần chỉnh sửa tiếp theo.

Bước 5

Tải xuống plugin FireBug miễn phí cho Mozilla Firefox. Sau khi cài đặt, một biểu tượng lỗi màu vàng sẽ xuất hiện ở góc trên bên phải của trình duyệt. Nhấp vào nó hoặc nhấn phím F12 và ở cuối màn hình, mã trang sẽ xuất hiện trong một phiên bản thu gọn. Nó có thể được mở bằng cách di chuột qua các dấu cộng. Và nếu bạn nhấp vào dòng của một phần tử, nó sẽ được đánh dấu ở đầu màn hình. Ở phía bên phải của cửa sổ có mã, bạn sẽ tìm thấy các kiểu chỉ ra các đường chịu trách nhiệm về sự xuất hiện. Và nó sẽ ngay lập tức trở nên rõ ràng nơi bạn cần chỉnh sửa tệp kiểu để thay đổi thiết kế.

Bước 6

Mở style.css trong Notepad ++. Bạn có thể sử dụng các chương trình khác được thiết kế để chỉnh sửa mã, nhưng với mục đích này, bạn không thể sử dụng "Notepad" tiêu chuẩn, nếu không sẽ có lỗi do mã hóa. Sử dụng FireBug để tìm các thông số bạn muốn thay đổi và chỉnh sửa chúng trong Notepad ++ cùng một lúc.

Bước 7

Lưu css cuối cùng và tải tệp lên máy chủ.

Đề xuất: