THIẾT KẾ WEBSITE NHANH - RẺ - ĐẸP

 

Xây dựng Trang web Tin tức

Layout của trang web sử dụng chuẩn index-20xx (gồm phần đầu, phần giữa và phần cuối trang). Đây là một chuẩn mực của ITUSA-Framework.

Layout này giống hệt với bố cục trang chủ, trang chuyên mục, trang tin chi tiết của trang web Vnexpress. Một trang tin điện tử cần có kỹ thuật và thiết kế tối ưu từ trải người dùng và cách phân vùng cho hiển thị quảng cáo.

Tài liệu này chỉ đề cập phần giữa của trang web ở hạng mục: Trang chủ / Trang chi tiết bài viết / Trang chuyên mục (list) - tìm kiếm (search) - Lọc tin theo ngày (filter).
Chúng tôi viết cô đọng, không giải thích toàn bộ mọi thứ ở đây. Mục đích chỉ ghi ra những lưu ý mang tính tra cứu chìa khóa cho admin / developer sử dụng. Cho nên, trong từng trường hợp cụ thể, xin đối chiếu với hiện trạng của trang web (của) bạn đang cần điều chỉnh để hiểu rõ hơn.

Tất cả các trang mẫu (template) đều có sự co giãn phù hợp với kích thước màn hình hiển thị.

1- TRANG CHỦ 

Gồm có 4 khối 

Khối 1: Có 4 bản tin mới cập nhật, bản tin mới nhất sẽ nằm trên cùng. Bên phải của khối này là QuangCao1

Khối 2.a (Phần bên trái): Danh sách các tin mới tiếp theo khối 1.
Số lượng bài hiển thị ở đây chỉnh ở mục cấu hình > news_homepage_max_left. Mặc định là 21.

Khối 2.b (Phần bên phải): Tổng hợp các bài mới theo từng chuyên mục (2 cấp). Các chuyên mục được chọn có thể chỉnh ở: cấu hình > news_category_list_home. (cách nhau dấu ;).

Khối 3: Tags chủ đề xu thế / Trend + QuangCao10.
Các từ ngữ tag này chỉnh ở: cấu hình> homepage_tags. (cách nhau dấu ,).


2 - TRANG CHI TIẾT BẢN TIN (DETAIL)

Template có 3 phần thuộc 2 khối:

Khối 1 - Phần 1: Phần chi tiết bài viết
Khối 1 - Phần 2: Phần cột phải (của chi tiết bài viết)
Khối 2 - Phần 3: Phần bổ sung (bình luận, bài cùng chuyên mục)

Khối 1 - Phần 1: Phần chi tiết bài viết

Trong phần nội dung chi tiết của bản tin, bạn có thể chèn hình đại diện , gallery hình , gallery hình kèm hình đại diện (((gallery+))) và các quảng cáo (((quangcaoi)))

Cách này, admin có thể chèn mã quảng cáo từ 0-10, ví dụ chèn quảng cáo ô vuông - mã 0: chỉ cần khai báo (((quangcao0)))  ngay bên trong nội dung bài viết.

Khối 1 - Phần 2: Phần cột phải (của chi tiết bài viết)

Trong form nhập liệu của từng bản tin có mục cột phải. Nội dung trong mục này dùng để hiển thị ở cột phải. Dữ liệu sử dụng theo mẫu chuẩn BOXRIGHT (xem bên dưới).

Nếu như ô này chừa trống thì chương trình sẽ lấy giá trị mặc định để sử dụng. 

Giá trị mặc định lấy theo thứ tự ưu tiên: Mặc định của Chuyên mục Mặc định của chương trình.

Mặc định của chuyên mục? Nếu bài viết được đăng vào chuyên mục #ID, ví dụ: ID=99 thì giá trị mặc định này ở HTML>rightbox1ofcategorylist-99

Như vậy - tóm lại, thông thường bạn chỉ cần khai báo mặc định cho từng chuyên mục và chừa trống phần nhập liệu cột phải trên mỗi bản tin chi tiết. Trừ một số trường hợp bạn muốn cột phải của một bản tin nào đó hiển thị theo ý của mình thì bạn sẽ cần phải nhập theo ý của mình (theo chuẩn BOXRIGHT).


3 - TRANG SEARCH - LIST - FILTER & CỘT PHẢI (BOXRIGHT)

A / Trang search

Dùng mặc định hệ thống ITUSA-Framework - thể loại news

B/ Trang list (chuyên mục)

Khi click vào chuyên mục, các bài viết được phân theo trang 1/2/3/../n

Trang n sẽ sử dụng template (1) template_date_news.php, các trang khác sẽ sử dụng template (2) template_list_news.php .
Tempplate (2) dùng co full-page, (1) dùng cho trang có số bài < perpage (số bài trên 1 trang).

C/ Trang filter (lọc theo chuyên mục và ngày đăng)

Nếu tìm theo ngày đăng (tức là click vào nút ngày giờ kế bên ô selectbox chọn chuyên mục) thì sẽ dùng template (3) template_search_news.php.

D/ Cột phải của 3 loại template & Chuẩn BOXRIGHT

Template (1): Cột phải là QuangCao1.

Template (2): rightbox1ofcategorylist-#ID, rightbox2ofcategorylist-#ID 

Template (3): rightbox1ofcategorylist-#ID

CHUẨN BOXRIGHT

Định dạng dữ liệu dùng để hiển thị cho cột phải của các đường link của web tin tức.
Nơi lưu trữ: Admin> HTML > rightboxiofcategorylist-#ID
(Ghi chú: i=1 hoặc 2  / #ID là số nguyên - mã của CateID chứa bài viết).
Ví dụ: rightbox1ofcategorylist-3

Định dạng
Bắt đầu bằng (box) + hậu tố
- Nếu hậu tố là (ads:n) thì hiển thị QuangCaon. (n: 0-10)
- Nếu hậu tố là: Tiêu đề (mostview:n) thì hiển thị: Tiêu đề và n bài được xem nhiều nhất trong chuyên mục.
- Nếu hậu tố là: Tiêu đề và danh sách các URL của bài viết thì sẽ hiển thị đúng Tiêu đềcác bài viết.

Ví dụ: 
(box)(ads:2)
(box)Bài xem nhiều(mostview:10)
(box)Giáng sinh
https://mywweb.com/view/Mua-Giang-Sinh.htm
https://mywweb.com/view/Gay-dung-nhau-trong-tinh-yeu.htm
https://mywweb.com/view/Tap-cho-tre-tho-biet-song-chia-se.htm
(box)(ads:3) 


4 - CÁC KHU VỰC HIỆN QUẢNG CÁO & MÃ QUẢNG CÁO

Mặc định, trang web sử dụng 11 đoạn quảng cáo được định nghĩa từ: $quangcao[0] đến $quangcao[10].

Để chỉnh cho đoạn mã này, xin sửa bên trong file quangcao.php.

Ghi chú: Ngày nay, các quảng cáo thường có tính năng tự động co giãn để vừa với khung chừa sẵn của trang web. Chúng tôi vẫn gợi ý cho bạn một số tinh chỉnh nếu sử dụng mã code quảng cáo cũ:
- Dạng [S] ô vuông / chữ nhật: QuangCao0.
- Dạng [V] cột đứng: QuangCao
1-3-5
- Dạng [H] nằm ngang: QuangCao
2-4-6-7-8-9-10 
* [H]: horizontal - chiều ngang / [V]: vertical - dạng đứng.

Sử dụng các mã quảng cáo

Bên dưới là những vị trí đã được gắn sẵn mã quảng cáo.
Admin có thể cho hiển thị một hoặc nhiều mã quảng cáo nào đó tại vị trí bất kỳ giữa trang tin chi tiết hoặc bên cột phải (như đã nói ở trên).

#0 (QuangCao0): Dạng chữ nhật / vuông. 

- list: Dùng trong trang list , cuối box 1 - bên phải

- detail: nằm giữa list bài cùng chuyên mục

#1: Cột phải / trên cùng: Dạng cột cho cả trang detail và list. Dạng cột [V]

#2:  Dạng [H]

- detail: Ngay bên dưới chi tiết bản tin

- list/search: dưới cùng (ngay phía bên trên phân trang)

#3: Dạng [V] : Bên phải ô ý kiến / bình luận trong trang chi tiết. Dạng cột

#4:  Dạng [H]

- detail: cuối trang

- list: nằm giữa (làm ngăn cách) box 1 và box 2

#5: Dạng [V]
 Nếu cột phải không khai báo, thì Qc5 sẽ hiện ở đây // ghi chú (box)(ads:5).Dạng cột

#6,7,8,9 [H]: dùng trong template (2).

#10 [H]: ở cuối tất cả các trang.


5 - Các thông số cấu hình


homepage_tags: các từ khóa gợi ý cho khách truy cập

news_category_list_home: Các mã ID chuyên mục tin tức cho hiện ra trang chủ

news_homepage_max_left: Số lượng bài mới đăng hiển thị trên trang chủ.

Trang news được sử dụng trên nền tảng ITUSA-Framework. Do đó, các thông số khác, xin tham khảo  bài hướng dẫn cấu hình chung cho tất cả các trang web tại đây.

ĐANG ONLINE: 1 NGƯỜI