19. NHỮNG CÁCH TRÌNH BÀY TRANG HOME

Website Design Westminster Orange County

Trang Home là trang đầu tiên mà người xem sẽ thấy khi họ vừa vào website. Nó giống như mặt tiền của một cửa tiệm. Có rất nhiều cách trình bày trang Home. Muốn trình bày trang Home, trước hết bạn phải chọn một kiểu trình bay trang (page interface). Sau đó, bạn sẽ chọn đưa nội dung nào vào đó và hiển thị nội dung đó như thế nào.

Kiểu trang (Page Interface)

Trang Home tự nó là một category. Và bạn cũng biết rằng bạn có thể chọn một kiểu trang sẵn có (Page Interface) cho một category. Phiếu dữ liệu của category có phần chọn kiểu trang như sau.

Bạn có thể chọn 1 trong 8 kiểu trang (tức là giao diện) sẵn có cho trang Home. Bạn nên cân nhắc kỹ khi chọn kiểu trang cho trang Home. Việc này phải làm trước khi bạn đưa nội dung vào. Vì nếu bạn đổi kiểu trang sau khi đã đưa nội dung vào site thì trang Home có thể không còn phù hợp.

Các kiểu trang khác nhau chủ yếu về số lượng cột. Trong một số kiểu trang, cột giữa có thêm 2 thành phần nhỏ. Hãy xem những hình sau đây để có cái nhìn tổng quát về những kiểu trang này.

Kiểu trang 1

Kiểu trang 2

Kiểu trang 3

Kiểu trang 4

Kiểu trang 5

Kiểu trang 6

Kiểu trang 7

Kiểu trang 8

Sau khi đã chọn kiểu trang, bạn mới tiếp tục quyết định đưa loại nội dung nào vào trang Home và nội dung sẽ được sắp đặt như thế nào.

Nội dung trang Home

Sau đây là một số loại nội dung thông thường của trang Home:

Một bài giới thiệu ngắn về doanh nghiệp hoặc hội đoàn. Có thể kèm thêm hình ảnh sản phẩm, cơ sở hoặc sinh hoạt của hội đoàn. Trang Home có thể chỉ dùng một hình ảnh và những thông tin về ngày giờ làm việc…
Một số tin hoặc bài mới nhất trích từ danh mục tin tức hoặc bài vở.
Slide show giới thiệu vài hình ảnh của doanh nghiệp, sản phẩm hoặc hội đoàn.
Quảng cáo vài dịch vụ hoặc sản phẩm đặc biệt.

Bạn có thể sáng tạo những kiểu trang Home khác theo ý muốn, miễn là biết tận dụng những chức năng sẵn có của website.

Trong bài này chúng ta sẽ tìm hiểu về những cách đưa nội dung lên website. Trong các thí dụ sau, chúng ta sẽ chọn kiểu trang 1 cho 3 loại nội dung đầu. Loại nội dung 4, chúng ta sẽ dùng kiểu trang 6.

Loại nội dung 1

Điều kiện:

Chuẩn bị bài giới thiệu. Bạn hãy chuẩn bị một đoạn văn ngắn nói về doanh nghiệp hoặc hội đoàn của bạn. Hoặc, một câu chào và phương châm của doanh nghiệp.
Hình ảnh. Muốn đưa vài hình ảnh lên trang Home, bạn nên chuẩn bị hình với kích cỡ phù hợp. Nếu trang Home dùng kiểu trình bày 3 cột, bề ngang hình không quá 544 pixels. Nếu trang Home dùng kiểu trình bảy 2 cột (nghĩa là chỉ có cột trái và cột giữa), bề ngang hình không quá 786 pixels.

Cách làm:

1. Chỉnh sửa danh mục

Vào Control Panel. Vào mục “Website Manager” trên Top Menu, chọn “Categories” trong bảng.
Tìm tới danh mục “Homepage” thuộc về Left Menu. (Nên nhớ: bạn phải chỉnh sửa danh mục chính. Trong thí dụ này, danh mục chính của chúng ta thuộc về Left Menu. Danh mục “Homepage” trên Top Menu không có thật, chỉ là loại danh mục liên kết). Bấm vào tiêu đề “Homepage” để mở phiếu dữ liệu.
Nếu Content Type của danh mục Homepage đang là “Homepage” phải đổi thành “One page”
Đánh dấu vào box cùng dòng với “Set As Homepage”.
Tắt chức năng “Allow Comment” và “Enable Rating” để không hiện ra phần Góp Ý của khách vào xem.

Tắt những icon PDF, Print, Email và những thông tin thường hiện ra trong trang detail của tin/bài. Muốn tắt, bạn hãy vào phần Page Interface của category, bấm vào “Edit page layout”.

Màn hình hiện ra các thành phần của trang. Bấm vào mục “UC_OnePage”, phần này sẽ thành mấu cam và nút “Edit” xuất hiện. Bấm nút “Edit”. Một màn hình nhỏ hiện ra.

Trong bảng “Detail Page Display”, tắt tất cả các box trong bảng này (kể cả Tiêu đề). Bấm nút “OK” của màn hình này.

Sau đó bấm nút “Save” ở màn hình kế tiếp.

Cuối cùng, bấm nút “Update” của phiếu dữ liệu.

Bạn đã chỉnh sửa xong danh mục.

2. Tạo một tin/bài cho trang Home.

Bây giờ, hãy tạo một tin/bài và chọn category “Homepage” cho bài này.

Vào mục “Content Manager” trên Top Menu, chọn “Articles” trong bảng.
Bấm vào nút “Record Edit” ở góc trên, bên phải.
Điền tiêu đề (tiêu đề này sẽ không hiện ra vì bạn đã tắt chức năng này trong danh mục Homepage). Mặc dù nó không hiện ra trên trang web nhưng bạn vẫn phải điền, nếu không, bạn sẽ bị báo lỗi.
Trong phần Category, bấm chọn ô “Homepage".
Đưa bài giới thiệu vào ô Description. Nếu có hình thì chèn hình vào. Bạn có thể dùng các công cụ sẵn có để trình bày bài cho đẹp mắt.

Bấm nút “Add” (hoặc nút “Update”, nếu đang chỉnh sửa lại bài này).
Vào website, bấm nút “Homepage” trong Left Menu để xem trang Home đã hiện ra như kiểu trình bày này chưa.

Loại nội dung 2

Loại nội dung này sẽ liệt kê một số tin hoặc bài mới nhất (trích từ một danh mục tin tức hoặc bài vở).

Điều kiện:

Website thường xuyên có tin tức hoặc bài vở mới. Kiểu trang home này chỉ thích hợp với website thường xuyên có tin tức hoặc bài vở mới để mỗi lần khách vào xem sẽ thấy ngay tin tức hoặc bài vở mới. Bạn chỉ có thể chọn 1 danh mục (hoặc Tin tức, bài vở, hoặc hình ảnh, video…) để đưa vào trang Home.

Cách làm:

Thí dụ bạn muốn trang Home hiện ra danh sách các bài trong mục “Writings”, bạn sẽ làm như sau.

Vào Control Panel. Vào mục “Website Manager” trên Top Menu, chọn “Categories” trong bảng.
Tìm tới danh mục “Writings” thuộc về Left Menu. (Nên nhớ: bạn phải chỉnh sửa danh mục chính. Trong thí dụ này, danh mục chính của chúng ta thuộc về Left Menu. Danh mục “Writings” trên Top Menu không có thật, chỉ là loại danh mục liên kết). Bấm vào tiêu đề “Writings” để mở phiếu dữ liệu.
Bấm check vào ô cùng dòng với “Set As Homepage”. LƯU Ý: Bạn không thể chọn 2 danh mục làm trang Home. Tuy nhiên, mỗi khi bạn chọn một danh mục làm trang Home thì ô này của các danh mục khác sẽ tự động bị uncheck.

Phiếu dữ liệu của danh mục “Writings”, sau khi sửa, sẽ như sau.

Bấm nút “Update” để lưu chỉnh sửa.
Vào website, bấm nút “Homepage” trong Left Menu để xem trang Home đã hiện ra loại nội dung này chưa.

Loại nội dung 3

Trang Home dùng loại nội dung này sẽ có một slide show cho khách xem một số hình ảnh tiêu biểu của doanh nghiệp hoặc hội đoàn.

Điều kiện:

Có một số hình ảnh. Bạn nên chuẩn bị hình đúng kích cỡ. Nếu trang Home dùng kiểu trình bày 3 cột, bề ngang hình không quá 544 pixels. Nếu trang Home dùng kiểu trình bảy 2 cột (nghĩa là chỉ có cột trái và cột giữa), bề ngang hình không quá 786 pixels.

Cách làm:

Muốn các hình lần lượt thay đổi trên trang Home, bạn hãy dùng chức năng quảng cáo. Đây là cách thực hiện dễ dàng nhất.

Vào Control Panel. Vào mục “Content Manager” trên Top Menu, chọn “Advertisement” trong bảng.
Bấm nút “Record Edit” ở góc trên, bên phải để tạo một “quảng cáo” mới.
Title. Điền tiêu đề sao cho bạn dễ nhận biết đây là những hình slide show ở trang Home.
Category. Chọn “Homepage” là danh mục mà “quảng cáo” này sẽ hiện ra. Homepage.
Advetisement Content.

Nếu muốn có một dòng chữ bên trên hình này, hãy điền dòng chữ vào ô “Advetisement Content”. Bạn có thể cho dòng chữ hiện ở giữa trang bằng cách bấm bất cứ chỗ nào trong dòng chữ, rồi bấm vào biểu tượng đoạn văn canh giữa. Bạn cũng có thể cho thêm một dòng trống bên trên và bên dưới dòng chữ.

Chèn hình quảng cáo vào ô “Advertisement Content”. Xin xem lại bài “Đưa quảng cáo lên website” để biết cách chèn hình slide vào đây. Sau khi chèn hình, bấm vào hình rồi bấm vào biểu tượng đoạn văn canh giữa để hình hiện ở giữa trang web.

6. Trong phần “Setup Advertise”

Check vào ô “Never Expires”.
Check vào ô “Random Timeshare” (đó là kiểu hiển thị luân phiên).

7. Trong phần vị trí quảng cáo (Display Position), chọn vị trí “Top” trong vùng “Center”.

8. Bấm nút “Add” để hoàn tất.

Lập lại những bước trên đây cho những hình còn lại. Nếu bạn có 5 hình, bạn cần tạo 5 phiếu dữ liệu quảng cáo, tương tự như trên.

Vào website, bấm nút “Homepage” trong Left Menu để xem slide show đã hiện ra chưa.

Loại nội dung 4

Loại nội dung này hướng sự chú ý vào những dịch vụ hoặc sản phẩm trọng điểm. Trong hình thí dụ, chủ nhân của website muốn nhấn mạnh đến 3 lãnh vực. Ba mục này có thể là 3 danh mục có sẵn trong menu nhưng không lôi cuốn sự chú ý bằng cách trình bày này.

Lấy thí dụ, website này có 3 danh mục ẩn sâu bên trong menu như sau.

Điều kiện:

Chọn những mục trọng điểm. Nên chọn từ 3 đến 6 mục.
Thiết kế “banner” cho những mục này. Dùng nền mầu, hình ảnh và chữ để tạo một “banner” cho mỗi mục.

Cách làm:

Loại nội dung này thực ra chỉ là layout một bài ở trang Home mà thôi. Cách làm tương tự như loại nội dung 1, nghĩa là bạn sẽ đưa một tin bài lên trang Home. Sự khác biệt là tin bài này được trình bày với 3 cột.

1. Chỉnh sửa danh mục

Bạn chỉnh sửa danh mục Homepage như đã làm cho loại nội dung 1.

Vào Control Panel. Vào mục “Website Manager” trên Top Menu, chọn “Categories” trong bảng.
Tìm tới danh mục “Homepage” thuộc về Left Menu. (Nên nhớ: bạn phải chỉnh sửa danh mục chính. Trong thí dụ này, danh mục chính của chúng ta thuộc về Left Menu. Danh mục “Homepage” trên Top Menu không có thật, chỉ là loại danh mục liên kết). Bấm vào tiêu đề “Homepage” để mở phiếu dữ liệu.
Nếu Content Type của danh mục Homepage đang là “Homepage” phải đổi thành “One page”
Đánh dấu vào box cùng dòng với “Set As Homepage”.
Trong phần “Page Interface”, bạn hãy chọn kiểu trang 2 cột vì bài của trang Home cần bề ngang rộng.
Tắt chức năng “Allow Comment” và “Enable Rating” để không hiện ra phần Góp Ý của khách vào xem.

Tắt những icon PDF, Print, Email và những thông tin thường hiện ra trong trang detail của tin/bài. Muốn tắt, bạn hãy vào phần Page Interface của category, bấm vào “Edit page layout”.

Trong bảng “Detail Page Display”, tắt tất cả các box trong bảng này (kể cả Tiêu đề). Bấm nút “OK” của màn hình này.

Sau đó bấm nút “Save” ở màn hình kế tiếp.

Cuối cùng, bấm nút “Update” của phiếu dữ liệu.

Bạn đã chỉnh sửa xong danh mục.

2. Tạo một tin/bài cho trang Home.

Vào Control Panel. Vào mục “Content Manager” trên Top Menu, chọn “Articles” trong bảng.
Bấm vào nút “Record Edit” ở góc trên, bên phải.
Điền tiêu đề (tiêu đề này sẽ không hiện ra vì bạn đã tắt chức năng này trong danh mục Homepage).
Trong phần Category, bấm chọn ô “Homepage".

Bây giờ, trong ô Description, bạn sẽ tạo 1 bảng có 3 cột và 2 dòng.
Bấm vào biểu tượng tạo bảng (“Insert a new table”).

Màn hình nhỏ hiện ra. Bạn sẽ điền các trị số như sau:
- Cols: 3
- Rows: 2
- Cellspacing: 12
- Alignment: “Center”
- Width: 760

Bấm nút “Insert” (hoặc nút “Update”, nếu đang chỉnh sửa lại bảng này). Trong ô Description sẽ hiện ra những đường nét của bảng mới thêm vào. Bạn có 3 ô bên trên dành cho 3 banner và 3 ô bên dưới cho text.

LƯU Ý: Bạn sẽ chèn hình banner vào các ô bên dòng trên. Hình phải có bề ngang bằng đường vẽ ô này. Nếu hình có bề ngang lớn hơn, bảng sẽ vượt ra khỏi phạm vi trang web. Trong thí dụ này bạn hãy dùng hình banner cỡ 235 pixels x 60 pixels.

Bấm chuột vào trong ô trên, bên trái. Bấm biểu tượng chèn hình.
Màn hình “Insert/Edit Image” hiện ra. Bấm biểu tượng cuối ô Image URL. Bạn sẽ thấy các file trong web server.
Bấm đôi vào folder “Article” để upload hình vào đây vì những hình này liên quan tới tin bài. Chờ đến khi bạn thấy danh sách các file trong folder này hiện ra.
Bấm nút “Upload” ở góc trên, bên phải màn hình. Bạn sẽ thấy các file trong computer của bạn.
Tìm hình banner và bấm vào tên file hình mà sẽ đưa vào vị trí này.
Bấm nút “OK”
Màn hình “Insert/Edit Image” hiện trở lại. Đường dẫn file hình đã được điền vào ô “Image URL”.

Bấm check vào ô cùng dòng với “Original Insert”.
Điền “0” vào ô Vertical Space.
Điền “0” vào ô Horizontal Space.
Bấm nút “Insert”. Ô Description bây giờ đã có hình banner trong ô đầu tiên. Đừng bận tâm nếu thấy bảng của chúng ta bây giờ có vẻ không cân đối. Sau khi chèn xong 3 hình, bảng sẽ cân đối trở lại.

Bây giờ, bạn chèn hình vào ô thứ hai ở dòng trên. Bạn sẽ lập lại những gì bạn vừa làm.

Tiếp tục chèn hình vào vào ô thứ ba, dòng trên. Bạn cũng lập lại những gì bạn vừa làm.

Sau khi chèn 3 hình, ô “Description” sẽ tương tự như sau.

Bạn hãy tiếp tục chèn 3 đoạn văn vào 3 ô bên dưới. Sau khi chèn các đoạn văn, ô Description trông như sau.

Chúng ta thấy dòng đầu của đoạn văn thứ 3 không ngang hàng với dòng đầu của 2 đoạn văn còn lại. Lý do là vì 3 đoạn văn không dài bằng nhau. Muốn cho đẹp, bạn nên cho các dòng đầu ngang bằng nhau.

Cách điều chỉnh cho các dòng đầu ngang bằng nhau:

- Bấm chuột (trái) vào bất cứ nơi nào trong ô chữ này.

- Sau đó, bấm nút phải của con chuột. Khi nào bạn thấy hiện ra bảng nhỏ giống như trong hình thì có thể buông ngón tay ra.

- Đưa chuột đến dòng “Cell”, bạn sẽ thấy hiện ra một bảng bên cạnh.

- Đưa chuột đến dòng “Table cell properties” rồi bấm chuột (trái). Bạn sẽ thấy hiện ra một bảng.

- Bấm vào ô cùng dòng với “Vertical alignment” rồi chọn “Top” trong bảng rải xuống. Bạn chọn như vậy để các dòng chữ sẽ được canh bằng đầu.

- Kế tiếp, muốn tất cả các ô cùng hàng được canh bằng đầu, bấm vào ô gần cuối bảng về phía góc trái đang có chữ “Update current cell” rồi bấm vào dòng “Update all cells in a row”.

- Cuối cùng, bấm nút “Update” để hoàn tất công việc này.