Kiến thức là vô tận

Chia sẻ kiến thức thông tin. Được tạo bởi Blogger.

Thứ Hai, 18 tháng 2, 2013

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

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: 

Highslide JS
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)

Highslide JS

                 + 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:
Highslide JS
Cửa sổ Notepad++ như sau: 
Highslide JS

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ẽ 
Highslide JS
Tìm đến dòng 482 sửa:  repeat–x  thành  no-reapet 
Highslide JS
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ẽ 
Highslide JS
Bạn thử lại: http://localhost ok một số thứ đã thay đổi thành công: 
Highslide JS
Đã đế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)
Highslide JS
Chọn: Đăng nhập quản trị , chon mục quản lý module.
Highslide JS
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)
Highslide JS
Tiếp tục chon mục “Sửa” 
Highslide JS
Sửa theo ý bạn: 
Highslide JS
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)
Highslide JS
Dưới đây tôi thêm 3 module ảo cong-nghe, thethao, phapluat có module gốc là module News: 
Highslide JS
Bạn chọn nút cài đặt và cài như sau:
Highslide JS
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.
Highslide JS
Kết quả: 
Highslide JS
Bước 2: Thay đổi và thêm các chủ đề cho từng bộ phận trên thanh menu:
Highslide JS
Để làm được như vậy các bạn làm như sau:
Highslide JS
Xuất hiện:
Highslide JS
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. 
Highslide JS
Ví dụ của tôi như sau: 
Highslide JS
Ta được trang chủ như sau:
Highslide JS
Chúc các bạn làm được trang web ưng ý!

Author: Mr Lam
Source: http://hoanglamcm.net

0 Bình luận

2786347