Thiết kế website

Một phần của tài liệu Tìm hiểu về HTML5 và CSS 3, ứng dụng để viết một website đơn giản (Trang 32 - 44)

Sử dụng open source joomla (phiên bản 1.5) để làm website tin tức.

 Các bước chuẩn bị:

Host: Nơi đặt Web Site, trong đề tài Web Site sẽ được đặt trên

Tạo Database: Tạo cở sở dử liệu cho Web Site Cài đặt Joomla!: Download và cài đặt Joomla! 1.5

Cài ngôn ngữ tiếng Việt: Download và cài đặt ngôn ngữ tiếng Việt Joomla! 1.5

Cấu hình: Thiết lập các thông số cho Web Site trong Global Configuration

 Đăng nhập vào Admin (Back-end)

1.Tạo các cấp lưu trữ nội dung cho từng chủ đề:

 Có thể xóa các Section, Category và các Content Item mẫu có sẵn trong Joomla! hoặc đổi tên để sử dụng lại.

Tạo Section: Chọn Content -> Section Manager để tạo các phần chính cho Web Site, có thể sửa lại các các Section có sẵn hoặc tạo thêm cái mới.

 Chọn New để tạo các Section Tin trong nước, Tin thế giới, Tin thể thao...

Tạo Category: Chọn Content -> Category Manager để tạo các mục phụ cho Web Site, có thể sửa lại các các Category có sẵn hoặc tạo thêm cái mới.

 Chọn New để tạo các Category Xã hội, Kinh tế, An ninh trong phần (Section) Tin trong nước, Tin thế giới, và Category Trong nước,

Chọn Menus -> mainmenu -> New -> Articles -> Section Blog Layout

• Các Menu còn lại nếu muốn có thể sử dụng còn không thì xóa đi bằng cách chọn các Menu muốn xóa và nhấn vào nút Trash.

• Tạo Menu phụ (Sub Menu):

- Chọn Menus -> mainmenu -> New -> Articles -> Blog - Content Category

• Tạo thêm các Sub Menu khác với các lựa chọn Blog – Content

Category trong đó CategoryParent Item tương ứng với các

SectionCategory của nó.

• Sau khi tạo xong các Menu có thể sắp xếp lại theo thứ tự như ý bằng cách đánh số thứ tự trong mục Order và nhấn vào biểu tượng dĩa mềm để Save hoặc cũng có thể dùng các nút mũi tên lênxuống để sắp xếp.

3. Tạo phần liên hệ (Contact):

• Chọn Components -> Contacts -> Manage Contacts -> chọn Contact mẫu có sẵn hay tạo mới bằng cách nhấn New.

• Nhập địa chỉ Email vào mục E-mail, đây là địa chỉ được hiển thị trong phần người gửi và người nhận sẽ trả lời lại cho địa chỉ này.

• Nhập đầy đủ các thông tin trong các mục khác của phần này nếu muốn hoặc có thể bỏ bớt các mục này bằng cách chọn Tab

Parameters và chọn Hide các mục này. Nhấn Save để hoàn tất.

4. Tạo bài viết mới

- Chọn content -> Article Manager – New + Title: Tiêu đề của bài viết

+ Section: Lựa chọn chuyên mục

+ Category: Lựa chọn chuyên mục con

- Ngoài ra còn có các chức năng như Published, Front Page lần lượt là đã được phê duyệt và hiển thị trên trang chủ

II. Đăng bài viết có sử dụng các thẻ HTML5 và CSS3: Ví dụ về thẻ HTML5:

- Ví dụ 1: Thẻ video

- Với thẻ video của HTML5, người sử dụng có thể xem video ngay lập tức mà không cần cài thêm bất kỳ phần hỗ trợ nào cả!

Ví dụ 2: Thẻ <table>:

 Ta được kết quả:

Ví dụ về thẻ CSS3: - Ví dụ 1: Thẻ DIV

Chương 4 Kết luận và hướng phát triển I. Kết quả đạt được:

1. Trang chủ của ứng dụng:

3. Trang thêm bài viết mới:

Một phần của tài liệu Tìm hiểu về HTML5 và CSS 3, ứng dụng để viết một website đơn giản (Trang 32 - 44)

Tải bản đầy đủ (DOC)

(44 trang)
w