ThiếtKếWebVớiJoomla1.0x & 1.5x Collection by traibingo at buaxua.vn Cơ bản về Template trong Joomla! 1.0.x Template được xem như là bộ mặt của Web Site, nó quyết định đến bố cục, cách trình bày và các định dạng như kiểu chữ, màu sắc, kích thước, hình ảnh trang trí . trên trang Web. Template (Temp) trong Joomla! được đóng gói dưới dạng File nén, có 2 loại dành cho Site (Front-end) và dành cho Admin (Back-end). Temp thường có các thành phần sau: temp_name: Thư mục chính chứa tất cả các thành phần và có tên của Temp. css: Thư mục chứa các File bảng kiểu có các thông số về định dạng của Temp. Thu mục images: Chứa các File ảnh của Temp. index.html: File ngăn sự truy cập trực tiếp vào thư mục của Temp. index.php: File chính sử dụng mã PHP tạo nên cấu trúc của Temp. template_thumbnail.png: File ảnh dùng để cho xem hình dạng của Temp. templateDetails.xml: Các thông tin và thông số để cài đặt Temp. Thiết KếWebVớiJoomla 1.0x & 1.5x Collection by traibingo at buaxua.vn Ngoài ra một số Temp có các File cấu hình để giúp thay đổi các thông số của Temp (hình dáng, màu sắc .) và các File Mã (Java Script) để hỗ trợ thêm chức năng cho Temp. Temp luôn được định trước các vị trí để hiển thị các Module (Mod) và có nhiều vị trí, mỗi vị trí có thể đặt nhiều Mod và các Mod này được sắp xếp theo một trật tự có thể thay đổi được. Mỗi Temp có kiểu và số lượng vị trí để đặt các Mod khác nhau. Các vị trí cơ bản của Temp mẫu: Top: Vị trí này thường được dùng để đặt các Mod nào muốn hiển thị ở trên, trong Temp này vị trí Top được đặt Mod Newsflash. Left: Vị trí nay thường dùng để đặt các Mod Menu như: Main Menu, User Menu, Orther Menu . Right: Vị trí này thường dùng cho các chức năng phụ của Web Site và là nơi đặt các Logo quảng cáo. Banner: Vị trí này được đặt các Banner quảng cáo. User1: Vị trí này thường được đặt Mod Latest News (các tin mới nhất) User2: Vị trí này thường được đặt Mod Popular (các tin được xem nhiều nhất) User3: Vị trí này thường được đặt Mod Top Menu (các Menu đặc biệt đặt ở vị trí này để người dùng dễ tìm thấy) User4: Vị trí này thường được đặt Mod Search (công cụ tìm kiếm) Content: Vị trí lớn nhất và thường nằm chính giữa Temp gọi là Main Body, nơi đây là vị trí của các Component hiển thị phần nội dung chính của trang Web. Thiết KếWebVớiJoomla 1.0x & 1.5x Collection by traibingo at buaxua.vn Cách cài đặt Temp cho Front-end: Tải Temp được đóng gói dưới dạng File nén về máy. Log-in vào Admin. Chọn Menu Installer -> Template - Site. Trong Install new Template [ Site ] chọn Browse, chọn File Temp muốn cài đặt, nhấn Open và sau đó nhấn Upload File & Install. Thiết KếWebVớiJoomla 1.0x & 1.5x Collection by traibingo at buaxua.vn Nhấn Continue khi được báo Upload template - Success. Trong Template Manager [ Site ] chọn Temp vừa được cài đặt và nhấn Default để chọn làm Temp mặc định cho các trang Web (Front- end). Bây giờ trang Web của bạn đã chuyển sang Temp mới, bạn cũng có thể cài đặt nhiều Temp và lựa chọn cho mỗi Menu một Temp khác nhau bằng cách chọn Temp và nhấn Assign sau đó chọn Menu nào muốn áp dụng Temp này. Có rất nhiều trang Web cho tải Temp miễn phí, bạn hãy dùng công cụ tìm kiếm với từ khóa "free template for Joomla", tuy nhiên các Temp miễn phí này thường đơn giản và có những hạn chế nhất định, để có được một Temp như ý thì thông thường phải chỉnh sửa nhiều thứ trong Temp. Bạn cũng có thể chọn mua các Temp thương mại được thiếtkế rất đẹp và nhận được sự hỗ trợ của tác giả. Thiết KếWebVớiJoomla 1.0x & 1.5x Collection by traibingo at buaxua.vn Các thẻ định dạng văn bản trong HTML Thẻ định dạng văn bản trong HTML giúp các trình duyệt Web hiểu được cách trình bày và hiển thị văn bản trên trang Web. Thẻ tiêu đề (Heading): Thẻ này đánh dấu phần tiêu đề của văn bản, bao gồm thẻ bắt đầu <hx> và thẻ kết thúc </hx>, trong đó x là từ 1 đến 6 mức kích thước lớn nhỏ của Font chữ thể hiện trên trang Web. Thông thường h1 là lớn nhất và h6 là nhỏ nhất, tuy nhiên các thẻ Heading này có thể được định dạng lại tùy ý. HTML sẽ tự động thêm dòng trống trước và sau tiêu đề này. Thí dụ: <h1>Dòng này được đặt trong thẻ h1</h1> <h2>Dòng này được đặt trong thẻ h2</h2> <h3>Dòng này được đặt trong thẻ h3</h3> <h4>Dòng này được đặt trong thẻ h4</h4> <h5>Dòng này được đặt trong thẻ h5</h5> <h6>Dòng này được đặt trong thẻ h6</h6> Thẻ đoạn văn bản (Paragraph): Văn bản nằm trong thẻ này sẽ được đánh dấu là một đoạn, thẻ này bao gồm thẻ bắt đầu <p> và thẻ kết thúc </p>. HTML sẽ tự động thêm dòng trống trước và sau đoạn văn bản này để tạo khoảng cách giữa các đoạn văn bản với nhau. Thí dụ: <p>Đây là đoạn văn bản thứ 1</p> <p>Đây là đoạn văn bản thứ 2</p> Thẻ ngắt hàng (Line Breaks): Thẻ này đánh dấu việc kết thúc một hàng nhưng không bắt đầu một đoạn mới. Thẻ này chỉ có thẻ bắt đầu <br> và không cần thẻ kết thúc, văn bản nằm sau thẻ này sẽ được chuyển xuống hàng dưới. Thiết KếWebVớiJoomla 1.0x & 1.5x Collection by traibingo at buaxua.vn Thí dụ: <p>Đây là đoạn văn bản thứ 1</p> <p>Đây là hàng thứ 1 của đoạn văn bản thứ 2<br> Đây là hàng thứ 2 của đoạn văn bản thứ 2</p> Chú thích trong văn bản HTML: Phần chú thích này chỉ dùng để đánh dấu hoặc ghi chú cho 1 đoạn HTML nào đó, trình duyệt sẽ bỏ qua phần chú thích này. Phần chú thích được đặt trong cặp dấu: <!-- Đây là phần chú thích -->. Thẻ định dạng văn bản đậm: Các văn bản trong thẻ này sẽ được hiển thị đậm: <b>Dòng này được in đâm</b> <strong>Dòng này được in đâm</strong> Thẻ định dạng văn bản nghiêng: Các văn bản trong thẻ này sẽ được hiển thị nghiêng: <em>Dòng này được in nghiêng</em> <i>Dòng này được in nghiêng</i> Thẻ định dạng văn bản gạch dưới: Các văn bản trong thẻ này sẽ được hiển thị gạch dưới: <u>Dòng này được gạch dưới</u> Có thể kết hợp các thẻ này để định dạng cho văn bản bằng cách lồng chúng vào nhau: <b><i><u>Dòng này được in đậm, nghiêng và gạch dưới</u></i></b> . chọn mua các Temp thương mại được thiết kế rất đẹp và nhận được sự hỗ trợ của tác giả. Thiết Kế Web Với Joomla 1. 0x & 1. 5x Collection by traibingo at. Thiết Kế Web Với Joomla 1. 0x & 1. 5x Collection by traibingo at buaxua.vn Cơ bản về Template trong Joomla! 1. 0.x Template được xem