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

Thảo luận trong 'Joomla' bắt đầu bởi hoangtrieumanhn, 30/12/14.

Lượt xem: 998

Bạn đang xem:

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

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Ở các bài trước, bạn đã làm quen với các module và component căn bản. Để cho trang web của chúng ta có thêm nhiều tính năng và bắt mắt hơn, trong phần này chúng ta sẽ cài đặt thêm các module và component bên ngoài vào.
    Trước hết bạn hãy tải phần mở rộng từ địa chỉ http://www.mediafire.com/?2hlcuj5ktkj7q52, và giải nén tập tin Extensions.zip thành thư mụcExtensions.

    Tạo thư viện hình ảnh với com_imagebrowser

    Bạn mở trình duyệt và truy cập vào địa chỉ:http://localhost/mobile/administrator, và đăng nhập bằng tên tài khoản (username) là admin, còn mục mật khẩu (password), bạn nhập vào mật khẩu mà bạn đã thiết lập trong quá trình cài đặt Joomla. Sau khi đăng nhập thành công, bạn vào menu Extensions, chọn Install/Uninstall. Sau đó ở mụcUpload Package file, bạn nhấn Browse và trỏ đến đường dẫnExtensions\com_imagebrowser-0.1.8.zip, rồi nhấn nút Upload File & Install


    [​IMG]


    Khi nhận được thông báo Install Component Success nghĩa là quá trình cài đặt thành công. Bạn vào menu Components, sẽ thấy xuất hiện Component Image Browser chúng ta vừa cài đặt. Bạn nhấn chuột vào Component này


    [​IMG]


    Tiếp theo, chúng ta sẽ tạo thư mục để chứa hình ảnh. Ở mục Create New Folder, bạn đặt tên cho thư mục hình ảnh và nhấn Create để tạo một thư mục mới.


    [​IMG]


    Sau khi tạo xong, bạn sẽ thấy thư mục vừa tạo nằm ở phía dưới. Bước kế tiếp chúng ta sẽ tải các hình ảnh vào thư mục này. Bạn nhấn chuột vào thư mục vừa tạo, ở mục Upload Image or ZIP archive, bạn nhấn Browse và trỏ đến tập tin hình ảnh mà bạn muốn tải lên. Lưu ý là bạn có thể tải từng hình hoặc nén cả thư mục chứa hình thành một tập tin dạng zip, rồi tải lên cũng được. Sau khi chọn xong bạn nhấn Upload.


    [​IMG]


    Bước cuối cùng chúng ta sẽ tạo menu Hình ảnh để thể hiện các thư mục hình vừa tạo. Bạn qua thẻ Menus, chọn Main Menu, sau đó nhấn New để tạo mới. Trong phần Internal Link, bạn bung mục Image Browser, chọn Default Gallery Layout.


    [​IMG]


    Bạn lần lượt điền vào tên của menu, tên viết tắt của menu,… Ở mụcParameters (Component) bên phải, bạn có thể thiết lập các thông số cho hình ảnh. Mục Mode dùng để tinh chỉnh các hiệu ứng khi nhấn vào bức ảnh. Có hai lựa chọn cho bạn : khi nhấn vào ảnh sẽ hiển ra một cửa sổ mới (Popup) hoặc hiển thị ra khung ảnh làm mờ nền ở phía dưới để nhấn mạnh vào bức ảnh (Light Box).

    Mục Root Folder, cho biết đường dẫn các tập tin hình ảnh đã được tải lên. Tiếp theo là mục Order dùng để sắp xếp thứ tự các ảnh. Bạn có thể sắp xếp theo tên của ảnh (File Name), theo ngày mà bạn tải ảnh lên (Date Uploaded), hoặc theo các ghi chú của ảnh (Caption).

    Mục Description cho phép bạn ẩn hoặc hiện các thông tin mô tả về menu này, nếu ở đây bạn chọn Show thì nó sẽ hiển thị nội dung bạn nhập vào ở mụcImage Browser Info nằm ở phía dưới.

    Mục Max. Upload in Mb, cho biết kích thước tập tin ảnh tối đa là bao nhiêu.Mục Image max. width in pixels vàImage max. height in pixels cho biết chiều rộng tối đa và chiều cao tối đa khi người dùng nhấn vào bức ảnh, ở đây mặc định là 800x600. Tương tự mục Thumbnail max. width in pixels vàThumbnail max. height in pixels cho biết chiều rộng tối đa và chiều dài tối đa của bức hình được thu nhỏ, ở đây mặc định là 120x90.

    Mục Image Compression, cho biết bạn có muốn nén hình hay không theo các mức từ 0 (không nén) cho đến 100 (nén cao nhất). Cuối cùng bạn nhấnSave để lưu lại


    [​IMG]


    Bây giờ bạn truy cập vào trang Joomla Mobile tại địa chỉ:http://localhost/mobile, bạn sẽ thấy xuất hiện thêm menu Hình ảnh mà chúng ta vừa tạo. Nhấn vào menu này, bạn sẽ thấy liệt kê các thư mục chứa hình ảnh. Khi nhấn vào các thư mục này, Joomla sẽ liệt kê các hình ảnh có trong thư mục đó. Tất cả các tấm ảnh này đều đã được tự động thu nhỏ. Khi nhấn vào một tấm ảnh bất kỳ, bạn sẽ xem được ảnh ở kích thước thực của nó.


    [​IMG]


    Tạo Module Slideshow chuyển ảnh ở trang chủ

    Quay lại trang quản trị, bạn vào menu Extensions, chọn Install/Uninstall.Sau đó ở mục Upload Package file, bạn nhấn Browse và trỏ đến đường dẫnExtensions\jaec_slideshow2_j15.zip, sau đó nhấn nút Upload File & Install.


    [​IMG]


    Khi bạn nhận được thông báo Install Module Success nghĩa là quá trình cài đặt module đã thành công. Tiếp theo bạn vào lại menu Extensisons, chọnModule Manager. Bạn sẽ thấy xuất hiện thêm module Ja Slideshow2 mà chúng ta vừa cài đặt. Hãy nhấn chuột vào module này.


    [​IMG]


    Ở mục Details, bạn có thể chỉnh sửa lại tên Module ở mục Title. Tiếp theo là mục Show Title, Joomla hỏi xem bạn có muốn hiển thị tên module khi nó chạy hay không? Để cho đẹp mắt, bạn nên chọn No (mặc định ở đây là Yes). Mục Enabled, bạn chọn Yes để kích hoạt module này. Tiếp theo là mụcPosition dùng để định vị trí cho module và tùy theo mỗi template mà có những vị trí khác nhau. Để xem các vị trí có trong template, bạn truy cập vào trang web dùng Joomla bất kỳ, sau đó gõ thêm chuỗi ?tp=1 vào phía sau, trong ví dụ này là http://localhost/mobile/?tp=1.Mục Order dùng để sắp xếp thứ tự các module còn mục Access Level dùng để phân quyền cấp độ truy cập của module ấy.


    [​IMG]


    Tiếp theo ở mục Menu Assignment, có ba cấp độ cho bạn chọn lựa: modulenày sẽ xuất hiện ở tất cả các menu (All), không xuất hiện ở menu nào cả (None) và chọn lựa các menu mà module sẽ xuất hiện (Select Menu Item(s) from the List). Sau đó ở mục Menu Slection bạn sẽ được chọn các menu mà module sẽ xuất hiện. Tùy thuộc vào nhu cầu của bạn mà bạn quyết định nên để menu nào thể hiện module của mình. Trong ví dụ của bài viết này, ta chọn menu Trang Chủ.


    [​IMG]


    Và cuối cùng khung quan trọng nhất là khung Parameters ở góc bên phải. Mục Image Folder, bạn chỉ rõ đường dẫn chứa thư mục hình. Nếu bạn đang làm trên máy nội bộ, bạn nên chép thư mục hình vào đường dẫnC:\AppServ\www\mobile\images. Còn nếu bạn đã tải trang web lên host, thì bạn phải truy cập vào hosting của mình và chép thư mục hình ảnh này vào. Ví dụ: thư mục chứa hình của chúng tôi là dienthoai, thì tại khung Image Folder, bạn nhập vào images/dienthoai.

    Mục Main Item Width và Main Item Height, bạn nhập vào thông số chiều dài và chiều cao của bức ảnh. Lưu ý với bạn là để cho hình ảnh thể hiện đẹp thì bạn nên xử lý kích thước các ảnh cho bằng nhau.

    Mục Show Description hỏi bạn có muốn hiển thị các ghi chú về bức hình hay không? Có ba tùy chọn dành cho bạn: Không hiển thị các ghi chú (No Description), chỉ hiển thị ghi chú (Description Only) và hiển thị một phần ghi chú kèm thêm Readmore để xem chi tiết các thông tin về ảnh (Description with Readmore).

    Mục Show Description When, xác định sẽ hiển thị các tiêu đề này khi nào? Cũng có ba tùy chọn là: Luôn luôn hiển thị (Always), hiển thị khi người dùng rê chuột vào bức ảnh (Mouse Over Image) và hiển thị khi có hiệu ứng (Image animated)


    [​IMG]


    Mục Animation Duration, dùng thiết lập thời gian hiệu ứng chuyển ảnh. Bạn nên canh chỉnh thời gian cho thích hợp, tránh trường hợp hiệu ứng chuyển quá nhanh hoặc quá chậm. Mục Effect dùng để thiết lập hiệu ứng cho việc chuyển đổi ảnh. Để trang Web mình luôn mới, bạn có thể định kỳ thiết lập các hiệu ứng khác nhau. Mục Navigation xác định việc hiển thị hình ảnh thu nhỏ (Thumbnails) hoặc hiển thị theo kiểu đánh số thứ tự (Number).

    Nếu ở mục Navigation bạn chọn Thumbnails, thì bạn cần nhập vào kích thước chiều rộng và chiều dài của bức hình thu nhỏ (Thumnail Width vàThumbnail Height), khoảng cách giữa các hình (Thumbnail Spacing), số lượng các bức hình thu nhỏ được hiển thị (Number of thumbnails)

    Ngoài ra, còn có mục Control Button, mục này dùng để hiển thị các phím điểu khiển. Chẳng hạn như bạn có thể nhấn nút Next để chuyển sang hình ảnh kế tiếp, nút Back để trở về hình ảnh trước đó, nút Pause để tạm dừng. MụcAutoplay, bạn nên chọn Yes, để khi bắt đầu truy cập vào trang web thì các hiệu ứng chuyển ảnh sẽ tự động chạy. Sau khi đã chỉnh sửa đầy đủ các thông số, bạn nhấn Save để lưu lại.


    [​IMG]


    Quay lại trang Joomla Mobile bạn sẽ thấy có slideshow chuyển ảnh chúng ta vừa tạo. Nhờ slideshow này, trang web chúng ta trông đẹp hơn và thu hút người dùng hơn.


    [​IMG]


    NHÓM MỤC ĐỒNG
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Joomla – Thiết kế web động dễ như chơi (Phần 24)

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, thùng rác, sim tra sau, giàn phơi thông minh, Toyota camry 2017, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, @@
=