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

Mời tham dự truyền hình trực tiếp lễ trao giải Nhân tài đất Việt 2011
Website NukeViet.vn đã mở cổng kết nối openid cho tất cả các website
VINADES thành lập chi nhánh tại thành phố Hồ Chí Minh
Lỗ hổng Apache cho phép truy cập vào mạng nội bộ
Ra mắt công ty mã nguồn mở đầu tiên tại Việt Nam
NukeViet được Bộ giáo dục chính thức khuyến khích sử dụng
Cuộc thi mùa hè sáng tạo sinh viên viết phần mềm nguồn mở: thêm thời gian và tăng tiền tài trợ
Khai giảng khoá đào tạo về phần mềm nguồn mở (PMNM) 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
NukeViet 3.0 - Xây dựng và quản lý website toàn diện
NukeViet 3.0 chính thức ra mắt - hàng ngàn lượt tải ngay trong 24h đầu tiên
Thư chúc mừng năm mới Tân Mão (2011)
NukeViet mở rộng đội phát triển code
Giới thiệu về mã nguồn mở NukeViet
Kế hoạch ra mắt bản NukeViet 3 Closebeta.
Kết nối thành công NukeViet và PHPBB3
NukeViet 2.0 RC2 đã ra mắt lúc 0h ngày 07/07/2009
Phát hành NukeViet 3.0.10 (RC2 ngày 12/09/2010)

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