Joomla – Thiết kế web động dễ như chơi (Phần 11)

11/08/2013 00:00

Trong các phần vừa qua, chúng ta đã biết cách để chèn một tấm ảnh vào bài viết, rồi sửa chữa nó khi cần thiết, sau khi đã chèn. Chúng ta cũng biết cách chèn một bảng với nhiều hàng, nhiều cột trong bài viết của mình.

Trong phần này, chúng ta sẽ quan tâm đến một số phần gắn thêm vào bài viết để cho trang web động của chúng ta trông có vẻ chuyên nghiệp hơn, như đọc tiếp (Read more), đặt neo (Anchor), hay phân trang (Page break) …

Tạo Read More

Thông thường một bài viết sẽ gồm có hai phần: phần giới thiệu và phần mô tả nội dung. Cho dù bài viết của bạn được đặt ở trang ngoài (Front page), hay ở trong một đoạn (Section), một nhóm (Category) nào, thì nó cũng thể chiếm hết cả trang, hay nhiều trang với các bài viết dài. Joomla sẽ chỉ cho phép bạn thể hiện một đoạn mở đầu, và đó chính là phần giới thiệu như đã nói ở trên. Sau khi đọc xong phần giới thiệu, nếu thích, người đọc sẽ nhấn vào chữ Read More hoặc Đọc thêm (tùy theo ngôn ngữ mà bạn sử dụng cho trang là tiếng Việt hay tiếng Anh)để đọc trọn vẹn toàn bộ nội dung bài viết trong một trang mới khác.

Để đặt chữ Read more đúng vị trí mong muốn trong bài viết, đầu tiên, bạn di chuyển chuột đến cuối đoạn văn bản cần ngắt, nhấn Enter để xuống dòng, rồi nhấn chuột vào nút Read more ở phía dưới khung soạn thảo. Một đường vạch chấm màu đỏ sẽ xuất hiện xác định điểm ngăn cách giữa phần giới thiệu và phần mô tả nội dung.

Nhấn nút Save để lưu bài viết lại, rồi dùng một thẻ khác trong trình duyệt để mở trang chứa bài viết vừa soạn thảo, bạn sẽ thấy phần giới thiệu cùng với tiêu đề. Hãy thử nhấn vào nút Read more để xem bài viết có được hiện ra đầy đủ như mong muốn hay không.

Trường hợp bạn chưa vừa ý, và muốn thay đổi vị trí phân cách giữa hai phần giới thiệu và mô tả nội dung mà bạn đã thực hiện trước đó, Joomla sẽ thông báo lỗi khi bạn chọn thêm một vị trí khác và nhấn vào nút Read more lần nữa. Nguyên nhân là Joomla không cho phép bạn tạo hai đoạn Read more, vì đièu này không cần thiết, và không thể hiển thị được. Muốn thay đổi, bạn phải tìm cách xóa dấu phân cách tạo ra bởi lần nhấn nút Read more trước đó. Thực hiện việc này không khó, tuy nhiên bạn đừng tìm cách đánh dấu khối đường vạch chấm đỏ để xóa nó, mà hãy dời con trỏ soạn thảo ra cuối, hoặc ngay phía dưới đường vạch, rồi nhấn nút Back Space cho đến khi đường vạch bị xóa là xong. Khi đó bài viết lại trở về trạng thái chưa phân hai đoạn, nên bạn cứ dời con trỏ đến vị trí cần đặt Read more mới, rồi tạo lại từ đầu.

Cần lưu ý rằng, phần giới thiệu, tức là phần thể hiện ra kèm với chữ Read more phải thật hấp dẫn. Phần này không được quá ngắn vì sẽ không thể hiện hết ý, nhưng cũng không cần quá dài, vì sẽ chiếm chổ của các bài viết khác trong cùng nhóm (Category) hay cùng phần (Section) đó. Phần giới thiệu cũng giống như cảnh mở màn của một bộ phim hay vở kịch, nó phải kết thúc ở đoạn mà người đọc bị cuốn hút và mong muốn đọc tiếp. Có như vậy họ mới bỏ thời gian bấm vào nút Read more để mở trang ra đọc tiếp phần còn lại. Rất nhiều trường hợp, bài viết có nội dung rất tuyệt vời, nhưng do tiêu đề và phần giới thiệu quá ngắn, hoặc tạo cảm giác nhàm chán cho người đọc, nên số lượng người truy cập rất thấp. Vì thế, muốn thu hút người đọc, bạn đừng ngại bỏ nhiều thời gian chăm chút cho phần mở đầu bài viết, đồng thời chọn một điểm phân đoạn thật hợp lý để đặt vị trí Read more cho từng bài viết của mình.

Tạo điểm neo (anchor) cho các bài viết dài

Một bài viết dài cung cấp nhiều nội dung mới lạ, hấp dẫn thì chắc chắn sẽ rất thu hút người đọc. Tuy nhiên, bạn cần tránh cách trình bày liên tục không có điểm dừng. Yếu điểm thứ nhất của cách trình bày liên tục là người đọc bị mệt mỏi khi phải đọc không ngừng từ trên xuống dưới. Cũng giống như bạn phải tham gia một chuyến đi dài mà không được ngừng lại nghỉ ngơi ở giữa đoạn đường. Nội dung càng hấp dẫn thì người đọc càng mệt mỏi, và cuối cùng thì họ sẽ không nhớ được gì sau khi đọc xong bài viết.

Yếu điểm thứ hai, là khi cần phải tìm kiếm một nội dung nào đó trong bài viết, người đọc sẽ gặp rất nhiều khó khăn, trừ phi họ nhớ chính xác một vài từ cần tìm nào đó và dùng tính năng tìm kiếm (Search) của trình duyệt. Tốt nhất là bạn hãy phân nhóm các đoạn văn trong bài viết, nhất là các bài viết thuộc dạng Hỏi – Đáp. Có bạn hai cách để thực hiện việc này.

Cách thứ nhất là bạn sử dụng các điểm neo (anchor) trong bài viết. Điểm neo (anchor) được sử dụng để liên kết đến từng phần trong bài viết. Ví dụ, bạn có bài viết trình bày về điện thoại Nokia E73, bao gồm các phần: Giới thiệu Nokia E73, Cấu hình kỹ thuật của Nokia E73, Ưu Nhược điểm. Các phần này sẽ được liệt kê thành một danh sách ở đầu bài viết. Yêu cầu đặt ra, khi khách hàng muốn xem lại phần nào trong bài viết, và bấm vào mục tương ứng trong danh sách, thì phải được chuyển đến ngay đến phần nội dung đó. Chẳng hạn như khi nhấn vào mục Đặc điểm kỹ thuật thì sẽ được chuyển đến đoạn bài viết nói về các đặc tính kỹ thuật của chiếc điện thoại này.

Để làm được việc này, đầu tiên bạn phải tạo các điểm neo cho bài viết ở từng đoạn văn nhỏ. Đặt trỏ chuột ở đầu đạon văn bạn muốn tạo điểm neo, ví dụ như Đặc điểm kỹ thuật, bạn nhấn vào biểu tượng Anchor () trên khung soạn thảo văn bản ở hàng thứ hai. Một hộp thoại sẽ xuất hiện yêu cầu bạn nhập tên anchor, bạn có thể đặt tên tùy ý nhưng để cho dễ nhớ thì bạn nên đặt tên trùng với chủ đề của đoạn văn, ví dụ ddkt, sau đó nhấn Insert. Lúc này một biểu tượng mỏ neo sẽ xuất hiện kế bên để mục ấy.

Tiếp theo, bạn sẽ tạo các liên kết đến điểm neo. Ví dụ trong bài viết sản phẩm Nokia của bạn khá dài, và bạn đã tạo danh sách các đề mục chính ở phần đầu, thì giờ là lúc bạn phải liên kết các đề mục đến các điểm neo tương ứng đã tạo. Quét chọn đề mục mà bạn muốn liên kết đến điểm neo, rồi trên thanh công cụ soạn thảo văn bản, bạn hãy nhấn vào biểu tượng hình móc xích mang tên Insert/Edit Link (). Trong cửa sổ Insert/edit link vừa hiện ra, bạn chọn thẻ General, ở mục Anchors, bạn chọn đến điểm neo tương ứng mà bạn đã tạo trước đó, co sẵn trong một danh mục xổ xuống, và nhấn vào nút Insert để chèn vào.

Giờ đây, bài viết của bạn đã rất thuận tiện cho người đọc. Họ chỉ cần nhấn vào đề mục bất kỳ trong danh sách đầu bài, thì sẽ được tự động chuyển đến ngay phần nội dung bài viết của đề mục đó. Để hiểu rõ thêm về điểm neo, trong khung soạn thảo bài viết, bạn có thể nhấn vào biểu tượng HTML để tìm hiểu các đoạn mã về neo này.

Cú pháp của việc đặt tên điểm neo là

<a name="Tên">Tiêu đề chính của bài viết</a>

Ví dụ:

<a name="GIOITHIEU">Nokia giới thiệu E73 Model tại Mỹ </a>

Cú pháp của liên kết đến điểm neo đã tạo

<a href="#tên điểm neo">Đề mục chính</a>

Ví dụ:

<a href="#GIOITHIEU">1. Giới thiệu Nokia E73 </a>

Thuộc tính href trong HTML dùng đế chỉ đường dẫn liên kết. Để liên kết trực tiếp đến điểm neo, bạn chỉ phải thêm dấu # và tên của điểm neo vào cuối cùng của một đường dẫn dạng URL.

Cách thứ hai, là bạn có thể dùng chức năng PageBreak trong Joomla để chia nhỏ bài viết thành nhiều trang để hiển thị. Bạn đặt trỏ chuột ở đầu đoạn văn Giới thiệu sản phẩm Nokia E73, sau đó nhấn vào biểu tượng PageBreak ở cuối khung soạn thảo (), một hộp thoại sẽ xuất hiện yêu cầu bạn nhập tên cho đoạn văn này, bạn đặt một cái tên gợi nhớ rồi nhấn Insert Page Break.

Một đường gạch màu nâu sẽ xuất hiện dùng để ngăn cách bài viết thành các trang. Tương tự bạn tạo thêm các dấu phân trang cho từng đoạn văn bản còn lại. Sau đó, bạn mở bài viết trong trang chủ, rồi bấm vào nút Read more thì chỉ có phần nội dung trang đầu tiên mà bạn tiến hành phân cách được hiển thị. Đầu trang đó sẽ thông báo cho bạn biết đây là trang thứ mấy trong tổng số trang của bài viết này.

Ở cuối trang, bạn có hai nút PrevNext để người đọc nhảy sang trang kế tiếp, hay quay về trang trước đó. Ở cạnh phải phía trên còn có một hộp nhỏ chứa danh sách chỉ mục bài viết (Article Index). Trong chỉ mục đó là danh sách các trang đã được phân chia, muốn nhảy nhanh đến một trang nào, người xem chỉ việc bấm vào tên của nó là xong.

NHÓM MỤC ĐỒNG

Ý kiến bạn đọc (0)
Tên   Email

Lên đầu trang