Lập Website chuyên nghiệp chỉ trong 10 phút (Phần 4)

Đăng lúc: Thứ hai - 01/11/2010 13:36 - Người đăng bài viết: anhien

Bài viết này hướng dẫn các bạn điều hành NUKEVIET 3.0 cho một Website “tin tức” phổ biến hiện nay. Sau khi cài đặt xong Nuke3.0 như hướng dẫn ở phần 3 ta được giao diện Website như bên dưới:

Bài viết này hướng dẫn các bạn điều hành NUKEVIET 3.0 cho một Website “tin tức” phổ biến hiện nay.

Sau khi cài đặt xong Nuke3.0 như hướng dẫn ở phần 3 ta được giao diện Website như bên dưới:

Bây giờ ta bắt tay sửa sang đôi chút. Các bạn có thể mày mò và trang bị cho trang web trở lên “long lanh” hơn tùy vào khả năng và “gu” thẩm mỹ của mỗi người. Dưới đây là những hướng dẫn cơ bản.

Bước 1:  Sửa banner và logo và thanh tiêu đề.

+ Tạo một banner, logo, h3.header  (Hình) Bạn có thể dùng bất cứ một phần mền biên soạn ảnh để tạo một banner ví dụ như paint của mycrosoft có sẵn trong windows của bạn hoặc Photoshop tùy bạn.

+ Chú ý:      + banner, logo, h3.header  nên khớp nhau về mặt thẩm mỹ.

                   + Bạn ghi ra giấy kích thước của banner, logo (vd 1130  x  291)

          + Tạo lấy ba tệp tin:  header.jpg( cỡ 1024x200)

logo. gif (cỡ 200x200)  và     (cỡ ảnh tùy bạn)

h3.header.jpg  (cỡ 80x20)

          + copy ba tệp ảnh header.jpg, logo.gif  và  h3.header.jpg  đè vào ba tệp đó trong thư mục: C:\AppServ\www\themes\default\images

+ Bạn thử lại: http://localhost ok một số thứ đã thay đổi nhưng hình ảnh còn chưa theo ý muốn vì kích cỡ khác với thiết đặt ban đầu. Ta sẽ sửa tiếp nhé:

+ Bước 2: Sửa code (cũng không khó đâu):

          + Để sửa được code bạn nên có phần mền notepad++  (có thể dùng notepad của windows có sẵn)

+ Download và cài đặt notepad++  tại đây: http://download.tuxfamily.org/notepadplus/5.8.2/npp.5.8.2.Installer.exe

+ Cài đặt Bấm Ok/Next/I agree/Next/Install/Finish Tắt bỏ cửa sổ notepad nhé.

+ và thư mục C:\AppServ\www\themes\default\css (sửa file:  template.css)

Mở file template.css bằng notepad++  hình vẽ bên dưới:

Cửa sổ Notepad++ như sau:

Tìm đến dòng 18 và dòng 25 thay đổi thông số phù hợp với kích thước của ảnh banner VD: hình vẽ

Tìm đến dòng 482 sửa:  repeat–x  thành  no-reapet

Tìm đến dòng 417 (của span-13), thay đổi kích thước khu vực chính của trang web bạn thay đổi tăng lên 100, 50, 10 ... tùy vào việc bạn đã tăng chiều rộng trên dòng 18 là bao nhiêu. VD hình vẽ

Bạn thử lại: http://localhost ok một số thứ đã thay đổi thành công:

Đã đến lúc bắt tay vào cấu hình một trang web chuyên về tin tức online chuyên nghiệp mời các bạn đọc tiếp:

Bước 1: Tạo menu ngang với các đề mục theo ý mình:

Chọn: Đăng nhập quản trị  (hoặc vào: http://localhost/admin)

Chọn: Đăng nhập quản trị , chon mục quả lý module.

Bỏ chọn các ô như hình vẽ dưới đây:

Chú ý: Không được bấm vào mục cài lại   (tuyệt đối đấy nếu bấm một số thứ - bạn sẽ phải làm lại nhiều)

Tiếp tục chon mục “Sửa”

Sửa theo ý bạn:

Tiếp tục bạn chọn: Thêm module ảo  và cách thêm module ảo như hình vẽ:

(Phần này để thêm thành phần menu)

Dưới đây tôi thêm 3 module ảo cong-nghe, thethao, phapluat có module gốc là module News:

Bạn chọn nút cài đặt và cài như sau:

Tiếp tục vào mục: Cài đặt module  và cài đặt tương tự các modul ảo còn lại.

Kết quả:

Bước 2: Thay đổi và thêm các chủ đề cho từng bộ phận trên thanh menu:

Để làm được như vậy các bạn làm như sau:

Xuất hiện:

Tiếp tục thêm các chủ đề khác cho thành phần  mới tạo trên menu. Làm tương tự như trên.

Ví dụ của tôi như sau: 

Ta được trang chủ như sau:

Chúc các bạn làm được trang web ưng ý!

Phần 5: Ta tiếp tục phần đưa tin và thay đổi thông lên website.

Phần 6: Các bạn thông thạo trên localhost rồi ta sẽ thực hiện trên “host”

Tweet