web design 2 - kent international college

Web Design Kent International College CHƯƠNG 1: GIỚI THIỆU JOOMLA Hệ thống quản trị nội dung CMS Với phát triển Internet báo chí điện tử, cần thiết để cập nhật nội dung trang web nhanh cập nhật tức nội dung, tin tức, báo, báo chí, hay clip, ngày phát triển Kể từ ông chủ doanh nghiệp & công ty muốn thiết kế trang web họ để cập nhật website họ nhanh hơn, hệ thống quản trị nội dung (CMS) đóng vai trị quan trọng Web Những điều cần thiết CMS Ba yếu tố quan trọng CMS có cho dù sử dụng cơng nghệ nữa, là: Giao diện (Templates), Nội dung (Content) Meta data Hơi khó hiểu, ba yếu tố đóng vai trị quang trọng CMS: Giao diện (Templates) đồ họa cho website, Nội dung (Content) quản lý tất nội dung website, Meta data giúp cho việc tối ưu hóa cơng cụ tìm kiếm (SEO) Giao diện (Templates) Giúp kiểm sốt nội dung website bạn trơng có ích website bạn có nhiều 10 trang web Giao diện (Templates) wrapper đồ họa đồng trang web, nội dung Nó cho website bạn trông đẹp hơn, chuyên nghiệp Khi bạn muốn thay đổi Giao diện (Templates) - màu sắc hình ảnh đó, bạn cần thay đổi lần tự động hiển thị tất trang web bạn CMS miễn phí phổ biến Wordpress ExpressionEngine, có nhiều mẫu Giao diện (Templates) miễn phí giảm chi phí giúp bạn tùy chỉnh hệ thống Giao diện (Templates) website Nội dung (Content) tạo, quản lý chỉnh sửa độc lập với tất yếu tố CMS khác Nội dung thứ từ văn soạn thảo trang "Giới thiệu" công ty bạn như: thông cáo báo chí, tin tức hay thơng tin tổ chức bạn Tất nội dung thường quản lý thơng qua trình soạn thảo WYSIWYG (Làm bạn muốn) có tích hợp thêm cơng cụ tải ảnh lên Giúp bạn tạo trang web bạn, quản lý chỉnh sửa trang liên kết đến trang hay trang khác định khu vực khác mà không cần chép chúng Meta data Là phần quan trọng việc tối ưu hóa cơng cụ tìm kiếm (SEO) Đó chức tuyệt vời Website Development and Multimedia Course Web Design Kent International College CMS gần giúp bạn để bạn quen quản lý thêm thông tin này, góp phần tìm kiếm trang web xếp hạng số index máy tìm kiếm Google, Yahoo Bing Meta data chứa thông tin thể loại, tác giả, ngày xuất bản, tiêu đề, mơ tả ngắn gọn từ khóa cho trang web Một chức tuyệt vời Meta data tự động thêm vào tiêu đề mô tả cho liên kết đăng mạng xã hội Facebook Không giúp bạn tiết kiệm thời gian nhập lại thông tin mà giữ lại thông tin có liên quan Thơng tin tìm thấy máy tìm kiếm khác mà trang web bạn liệt kê, nên nên cho thêm thơng tin vào nội dung trang viết Chức chuẩn CMS Hệ thống quản trị nội dung (CMS) mang lại cho bạn nhiều tính chuẩn giúp bạn tạo, quản lý chỉnh sửa nội dung bạn Ngồi tính chuẩn, tính bổ sung thêm vào cho hệ thống thêm linh hoạt tiện dụng Các tính bổ sung thường gói Addon Modules Plug-in Vì CMS linh hoạt, bạn sử dụng cho trang web đơn giản với nội dung mở rộng tính để hỗ trợ trang web phức tạp với nhiều nội dung Chức chuẩn - Standard Features Các tính là làm cho hệ thống quản trị nội dung bạn mở rộng linh hoạt Chúng cho phép bạn đăng, chỉnh sửa nội dung tổ chức quản lý thành viên, có nhiều khả bảo mật cho hệ thống bạn Quản lý thành viên (Member management) Sẽ giúp bạn kiểm soát tất tài khoản người dùng web bạn Là quản trị viên, bạn toàn quyền kiểm sốt có người truy cập vào web bạn làm để họ giới hạn quyền hạn website bạn Điều đặc biệt quan trọng với công ty lớn, nơi có nhiều người (Tác giả, biên tập, xuất bản, ) có trách nhiệm viết trì nội dung  Administrator (quản trị viên): người điều khiển tất hoạt động người dùng trang web truy cập vịa tất chức quản trị website  Editor (Biên tập): Có thể xuất quản lý nội dung riêng họ nội dung người khác  Author (Tác giả): Có thể xuất quản lý nội dung riêng họ  Contributor: viết quản lý nội dung riêng họ không xuất  Subscriber: Có thể đọc nội dung, xem ghi ý kiến, nhận tin, mà chỉnh sửa thứ Bạn tích hợp Module Add-on Plug-in vào CMS để tăng thêm giá trị, nâng cao khả tiếp cập nhiều chức Với kết hợp tính năng, bạn tạo website phù hợp với kế hoạch kinh doanh bạn giúp công ty bạn đạt mục tiêu  Company blog  Tích hợp E-commerce  Diễn đàn thảo luận (Discussion forums)  Thư viện ảnh (Photo galleries)  Quản lý Video (Video management)  Hỗ trợ đa ngôn ngữ (Multi-language support)  RSS feeds  Bản tin / danh sách gửi thư (Newsletters/mailing lists)  Thống kê/Theo dõi (Statistics/tracking) Website Development and Multimedia Course Web Design Kent International College 3.Giới thiệu Joomla Joomla ? Joomla hệ quản trị nội dung mã nguồn mở (Tếng Anh : Open Source Content Management Systems Joomla viết ngôn ngữ PHP kết nối tới sở liệu MySQL , cho phép người sử dụng dễ dàng xuất nội dung họ lên Internet Intranet Joomla sử dụng khắp nơi giới, từ website cá nhân hệ thống website doanh nghiệp có tính phức tạp cao, cung cấp nhiều dịch vụ ứng dụng Joomla dễ dàng cài đặt, dễ dàng quản lý có độ tin cậy cao Joomla có mã nguồn mở việc sử dụng Joomla hồn tồn miễn phí cho tất người giới Joomla! ứng dụng thực tiễn Joomla! sử dụng khắp giới, ứng dụng vào xây dựng website từ đơn giản website cá nhân tới ứng dụng website phức tạp Sau số ứng dụng xây dựng Joomla !  Trang web tổ chức cổng thông tin ( Portal )  Thương mại điện tử  Trang web cho công ty cỡ nhỏ  Ứng dụng cho quan hành  Trang web cho trường học nhà thờ  Trang web cá nhân gia đình  Các cổng thơng tin cộng đồng  Trang web báo điện tử tạp chí  nhiều ứng dụng khác Cài đặt cài chương trình Server Wamp5 Wamp5 chương trình tạo máy dịch vụ Web (Web Server) máy tính cá nhân (Localhost) tích hợp sẵn Apache, PHP, MySQL công cụ PHPmyadmin, SQLitemanager Ưu điểm Wamp5 đơn giản, dễ sử dụng, Wamp5 download sử dụng miễn phí tại: http://www.wampserver.com/en/ Website Development and Multimedia Course Web Design Kent International College Thay đổi thông số PHP (php.ini) Wamp5 cách nhấn chuột trái vào biểu tượng Wamp5 nằm khay hệ thống (ở góc bên phải hình), chọn PHP Settings -> nhấn vào thông số muốn thay đổi, thông số chọn (Enable) xuất dấu mũi tên phía trước Quy trình cài đặt Joomla Quy trình cài đặt Joomla ! Việc cài đặt Website Joomla dễ dàng, đơn giản nhanh chóng tất người Bạn cần truy cập Website Joomla , download cài đặt, giải nén, upload lên host, tạo database tiến hành cài đặt theo bước Màn hình cài đặt Joomla 1.5 thân thiện bố trí hợp lý Bạn cần ý điều "phải tạo database với Collation - charset: utf8_general_ci" trước cài đặt mà Dưới bước thực Bước 1: Download & Upload cài đặt Joomla! Download Joomla 1.5 : link download: Joomla 1.5 beta (night builds) http://www.joomla.org Upload Joomla : Upload lên Server giải nén vào thư mục gốc chứa Web bạn (hoặc thư mục đặt tên joomla) Thư mục gốc chứa Web thường có tên là: htdocs, public_html, www, wwwroot C:\wamp\www\ C:\Program Files\xampp\htdocs\ Bạn Upload số cách:  Bằng Copy trực tiếp (nếu cài máy bạn) Website Development and Multimedia Course Web Design   Kent International College Bằng công cụ quản trị mà HOSTING cung cấp Bằng công cụ FTP: WS_FTP, Total Commander, Net2FTP Bước 2: Chọn ngơn ngữ cài đặt Mở trình duyệt gõ vào địa Website bạn  Nếu bạn giải nén cài đặt vào thư mục gốc gõ: http://yoursite/ VD: http://vinadesign.vn/ VD: http://localhost/ (nếu cài máy bạn)  Nếu bạn giải nén cài đặt vào thư mục joomla (thư mục thư mục gốc) gõ: http://yoursite/joomla/ Bước 3: Kiểm tra cấu hình hệ thống Nếu giá trị kiểm tra có màu xanh OK Nếu giá trị kiểm tra có màu đỏ bạn cần hỏi phận Hỗ trợ kỹ thuật Server Bạn tiếp tục cài đặt nhiên số chức không hoạt động Bước 4: Thông tin quyền Bạn nên dành chút thời gian để đọc thông tin Bước 5: Thiết lập thông số để kết nối tới Cơ sở liệu Hostname: Thường giá trị "localhost" (chỉ điền giá trị khác Database Server Web Server nằm nơi khác nhau, Host bạn cung cấp vậy) - User name: Tên tài khoản có quyền sở liệu chứa Joomla bạn - Password: Mật tài khoản - Availbe Collations: Bạn nên chọn "utf8_general_ci" - Database Name: Tên sở liệu bạn Website Development and Multimedia Course Web Design Kent International College Bước 6: Thiết lập thông số FTP - Nếu Host bạn không hỗ trợ, mục không hiển thị - Nếu Host bạn hỗ trợ, bạn cần ý:    Username: Tên tài khoản FTP Password: Mật tương ứng Auto Find Path: Tự động tìm đường dẫn tới nơi chứa Web bạn (Nên dùng tài khoản mà bạn Upload cài đặt Joomla lên HOST) Bước 7: Thiết lập cấu hình site Joomla bạn - Site name: tên site bạn VD: VnExpress, Hosting Việt Nam, ThanhNienOnline - Your Email: địa email bạn VD: admin@yoursite.com This e-mail address is being protected from spambots You need JavaScript enabled to view it - Admin Password: Mật để quản trị Joomla Các thơng số sau thay đổi dễ dàng nên bạn không cần bận tâm Chỉ cần nhớ mật đủ - Install Defaul Sample Data: Cài đặt liệu mẫu Bạn nên nhấn nút để Joomla tạo mẫu cho bạn Website Development and Multimedia Course Web Design Kent International College trang web đơn giản Bước 8: Kết thúc - Vào xóa thư mục Installation - Lưu ý: tài khoản truy nhập hệ thống là: admin; mật khẩu: mật mà bạn gõ bước - Để xem Website bạn: Nhấn vào nút Site - Để quản trị Website: Nhấn vào nút Admin Đường dẫn có dạng sau:    http:// www.yoursite.com/administrator/ http://www.yoursite.com/joomla/administrator http://localhost/administrator/(nếu cài trực tiếp máy bạn) Cấu hình Joomla Quy trình tạo viết Joomla! Content (bài viết) Joomla! tổ chức theo mơ hình phân cấp gồm mức:  Mức cao nhất: Section (phần/mục)  Mức tiếp theo: Category (chuyên mục) mức Section Bạn xem sơ đồ hình vẽ mô tả bên cạnh |Section| |Category| -|Content 1| -|Content 2| Do để tạo viết cần thực tối đa bước    Bước Tạo Section (phần/mục) Bước 2: Tạo Category (chuyên mục) Bước 3: Tạo Content (bài viết) Chú ý:   Khi tạo Website nên định hình tạo phần/mục (Section) chuyên mục (Category) tương ứng Joomla! hỗ trợ phân cấp thành mức Do muốn chia thành nhiều mức Website Development and Multimedia Course Web Design Kent International College bạn cần tìm component hỗ trợ từ site: http://extensions.joomla.org Quản lý menu Joomla Có thể nói đặc điểm hay linh hoạt joomla hệ thống menu Trong Joomla bạn tùy biết menu dễ dàng Truy cập Menu / Menu Manager để vào giao diện quản lý menu Sau truy cập bạn nhận danh sách Menu tạo trước đó(nếu có) Để thêm Menu bạn Click chọn nút New công cụ Trong giao diện thêm Menu bạn cần điền thông tin sau - Unique Name: Tên Menu (không dấu, viết liền) - Title: Tiêu đề menu - Description: Mô tả menu - Module Title: Tiêu đề module ứng với Menu (Mỗi menu có Module tương ứng với để định nghĩa hiển thị, vị trí hiển thị, trạng thái hiển thị) Sau khai báo đầy đủ thông tin -> chọn Save (Lưu) Để thêm Menu Item bạn chọn New từ công cụ Website Development and Multimedia Course Web Design Kent International College Giao diên thêm Menu Item + Đầu tiên hệ thống yêu cầu bạn chọn loại Menu Item mà bạn muốn tạo ra(Menu Item bạn liên kết đến - Khi click vào Menu Item thơng tin trang web bạn) có số lựa chọn thơng dụng mà bạn cần quan tâm - Internal link / Articles: Menu Items liên kết đến viết Website Development and Multimedia Course 10 Web Design Kent International College Như ta định nghĩa nội dung bên Popular products có mã số category 41 Bao gồm viết Có nội dung sau: Website Development and Multimedia Course 103 Web Design Kent International College 22 Thiết kế Menu 23 Tạo session category để chứa viết: Website Development and Multimedia Course 104 Web Design Kent International College 24 Tạo Menu “Giới thiệu” trỏ đến Sesson Categoty Truy cập Main Menu tạo Menu cho nhóm trang giới thiệu sau: Website Development and Multimedia Course 105 Web Design Kent International College 25 Tạo Menu “shop” trỏ đến Sesson Categoty Website Development and Multimedia Course 106 Web Design Kent International College 26 Cấu hình Top Menu Hình ảnh Menu nằm tại: C:\wamp\www\eshop\images\stories Truy cập vào Menu chỉnh tại: Định nghĩa CSS sau: Website Development and Multimedia Course 107 Web Design Kent International College #ja-splitmenu li { float: left; padding: 0; margin: 0; background: none; text-align: center; } #ja-splitmenu a { display: block; text-decoration: none; color:#333; padding: 0; font-weight: bold; font-size: 12px; } #ja-splitmenu a img { width: 30px; height: 30px; vertical-align: middle; margin-right: 2px; } 27 Cấu hình trang nhóm sản phẩm THAY ĐỖI GIAO DIỆN CỦA CATEGORY Khi thao tác tạo Category hay Products, ta thấy trình xuất bước sau : Đây bước chọn giao diện để hiển thị danh mục sản phẩm Các giao diện nằm bên trong: Website Development and Multimedia Course 108 Web Design Kent International College Do đó, muốn chỉnh giao diện, ta vào file để hiệu chỉnh Website Development and Multimedia Course 111 Web Design Kent International College browseProductDescription { float:left; width:120px; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:12px; text-align:justify; } browseProductDescription a{ color:#900; font-weight:bold; } browseProductDescription a:hover{ color:#FF0080; } 29 Thay đổi thành phần Add to Cart Dùng Adobe Photoshop để thay đổi Button (C:\wamp\www\eshop\templates\ja_zeolite\images) Định dạng CSS: input.addtocart_button { color: #FFFFFF; margin: 10px 0; padding: 0 2px; text-indent: 18px; width: 100px; height: 18px; background: url( /images/bt-addtocart.gif) no-repeat top #333333; border: none; } Website Development and Multimedia Course 112 Web Design Kent International College 30.THAY ĐỖI GIAO DIỆN TRANG CHI TIẾT components\com_virtuemart\themes\default\templates\product_details Giả sử tập tin có tham số sau: Website Development and Multimedia Course 113 Web Design Kent International College

Website Development and Multimedia Course 114 Web Design Kent International College ĐỊNH DẠNG NỘI DUNG BÀI VIẾT 31 Định nghĩa thành phần hiển thị trang nhóm sản phẩm Website Development and Multimedia Course 115 Web Design Kent International College 32 Định nghĩa số cột hiển thị Truy cập vào Menu Manager chọn vào Menu cần thiết 33 Định dạng khung chứa nội dung (template.css) Quan sát từ Firebug sau: Định nghĩa CSS article-content{ min-height:250px; Website Development and Multimedia Course 116 Web Design Kent International College } 34 Định dạng phần tiêu đề (template.css) h2.contentheading, contentheading { margin: 0; padding: 0; font-size: 14px; color:#0072A8; } table.blog contentheading { font-size: 14px; } 35 Định dạng hình ảnh article-content img{ padding-right:7px; width:140px; height:150px; clear:both; } 36 Định nghĩa thành phần nội dung article-content p{ text-align:justify; color:#333; } 37 Thay đổi thành phần Readmore Mở theo đường dẫn: C:\wamp\www\eshop\templates\ja_zeolite\images Dùng Adobe Photoshop để thay đổi giao diện Website Development and Multimedia Course 117 ... Multimedia Course 23 Web Design Kent International College 2. 3 Nhập sản phẩm vào danh mục Website Development and Multimedia Course 24 Web Design Kent International College 2. 4 Tạo menu để show... Article Website Development and Multimedia Course 27 Web Design Kent International College Tạo Menu: Chỉnh sửa Menu”Home” 2. 7 Tạo Login vào Website Website Development and Multimedia Course 28 Web Design. .. Course 34 Web Design Kent International College Chọn phần Category nhấn Add Website Development and Multimedia Course 35 Web Design Kent International College Upload file từ máy tính lên Webserver: