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     (cỡ ảnh tùy bạn)

h3.header.jpg  (cỡ 80x20)

          + copy ba tệp ảnh header.jpg, logo.gif   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”

Tác giả bài viết: Nguyễn Quốc Thái
Nguồn tin: xahoithongtin.com.vn
Đánh giá bài viết
Tổng số điểm của bài viết là: 61 trong 15 đánh giá
Click để đánh giá bài viết

Ý kiến bạn đọc

Avata
junyuan - Đăng lúc: 19/07/2011 16:07
Hi All!
Tôi đã thay đổi .sapn-13 nhưng vẫn không thay đổi được size của phần Body, mong mọi người hướng dấn thêm. Thanks
 
Avata
dmhoang08t1 - Đăng lúc: 20/12/2010 01:39
Tình cờ tôi gặp được trang web này tôi thấy đây là trang web rất hay rất bổ ích tôi đã tìm hiểu về nó rồi nhưng tôi chưa rỏ lắm tuần tự chi tiết các bước cài đặt và vận hành nó như thế nào, tôi xin ban quản trị chỉ rỏ cho tôi được biết. Tôi chân thành cảm ơn.
 
 
 

 

Tin qua ảnh

NukeViet 3.4 RC1 đã ra mắt cùng NukeViet wiki (kho tài liệu mở của NukeViet)
Chính thức ra mắt NukeViet 2.0 RC3!
HTML5 và cuộc xung đột CODEC
NukeViet ra mắt phiên bản mới đầu tiên trong năm 2012
VINADES.,JSC và DIGISTAR hợp tác trong việc phát triển mã nguồn mở NukeViet
Chung kết Mùa hè sáng tạo viết ứng dụng Phần mềm nguồn mở (MHST-FOSS) năm 2010
Việt Nam đã có riêng một mã nguồn mở xây dựng website bán hàng trực tuyến
Mời tham dự truyền hình trực tiếp lễ trao giải Nhân tài đất Việt 2011
Giới thiệu về mã nguồn mở NukeViet
SiteGround cung cấp dịch vụ hosting chuyên NukeViet
Cuộc thi mã nguồn mở dành cho học sinh sinh viên mùa hè sáng tạo 2011đã bắt đầu
Hội nghị người dùng Google Map Maker lần đầu tiên tổ chức tại Việt Nam
Lập trình Web: Cánh cửa rộng mở cho tương lai rất gần
Tổng quan về cấu trúc hệ thống NukeViet 2.0
Khai giảng khoá đào tạo miễn phí về Phần mềm nguồn mở NukeViet tại Hà Nội
Công bố sản phẩm Chung khảo Nhân tài Đất Việt 2011
Webnhanh.vn - website đầu tiên thiết kế website và bán code chuyên nghiệp dành cho NukeViet
Sản phẩm dự thi Nhân tài Đất Việt 2011: NukeViet - Công cụ mã nguồn mở cho cộng đồng thiết kế website VN

Bình luận mới nhất

/uploads/users/meocon.jpg Sẽ nhắc BTC rút kinh nghiệm lần sau. Mấy lần đầu còn mải vui nên quên ko ghi chép.
23:42 02/05/2012
 

/uploads/users/439a9a4ed28687a4fcc5ba7bdf51179e_21993.jpg Dịch vụ www.hostingnuocngoai.com
14:14 30/04/2012
 

/themes/nukevietcool/images/users/no_avatar.jpg Nên post bài viết trả lời những câu hỏi cho bạn đọc.
10:41 30/04/2012
 

/uploads/users/meocon.jpg Hi arian32, you can visit: http://nukeviet.vn/phpbb/viewforum.php?f=98 to discussion.
11:29 25/04/2012
 

/themes/nukevietcool/images/users/no_avatar.jpg hi dear thanks for your works can i active your branch in afghanisthan???
23:19 28/03/2012
 

/uploads/users/logo.gif Chúc NUKE ngày càng phát triển lớn mạnh, làm ăn phát đạt. Chúc toàn thể anh em cộng đồng NUKE một...
11:39 21/01/2012