Xây dựng website
CHƯƠNG 5: XÂY DỰNG WEBSITE5.1 Sitemap5.2 Thiết kế giao diện với drupal5.2.1 Cài đặt giao diệnViệc cài đặt giao diện được thực hiện qua 2 cách Cách 1: Sử dụng giao diện chia sẻ từ drupal Bước 1: Donwload từ: http://drupal.org/project/themes Bước 2: Đăng nhập với tài khoản administrator.sau đó chọn liên kết Appearance(Hình thức) > chọn Install new theme Bước 3: tại tab Appearance(Hình thức) chọn Enable and set default cho giao diện khi chúng ta muốn sử dụng. Trang 1 Cách 2: Sử dụng giao diện tùy chỉnh.- Di chuyển thư mục giao diện tùy chỉnh vào sites/all/themes/- Tại liên kết Appearance(hình thức) chọn Enable and set default cho giao diện khi chúng ta muốn sử dụng.5.2.2 Xây dựng giao diệnCác bước chung để tạo ra một Theme Drupal mới bao gồm:1. Tạo hoặc chỉnh sửa tập tin HTML cho trang web.2. Tạo hoặc chỉnh sửa tập tin CSS cho trang web.3. Tạo một tập tin .info để mô tả theme mới của Drupal.4. Chuẩn hóa các tên tập tin theo framework Drupal .5. Chèn biến đã được định nghĩa vào Theme6. Tạo tập tin bổ sung cho các loại nút cá nhân, các khối.Nơi lưu trữ thư mục giao diện chúng ta xây dựng: /sites/all/themes/ .Đây là nơi được qui khuyến khích chung của drupal cho rõ ràng, thực ra chúng ta có thể tạo 1 nơi nào đó để chứa giao diện đều được.Đầu tiên, chúng ta tạo ra một thư mục giao diện với tên “dulichdeal” và chứa trong thư mục /sites/all/themes/ .Dưới đây là cấu trúc các thư mục và tập tin cần tạo của một giao diện. Trang 2 Vị trí của các tập tin *.tpl.php- Node.tpl.php: Các tập tin có định nghĩa cách các nút được kết xuất trên một trang.- Field.tpl.php: Các tập tin định nghĩa thế nào là ra một lĩnh vực trên một trang . Trang 3 - Block.tpl.php: Các tập tin chủ đề mà định nghĩa cách các khối là kết xuất trên một trang.- Html.tpl.php là tập hơp của tất cả các file mẫu, và cung cấp các trang bố trí tổng thể cho trang web.Bước 1: cấu trúc html.tpl.php của drupal templates<body > <div class=”region region-page-top”> </div> <div id=”page-wrapper”> <div id=”header”> . </div> <div id=”navigation”> .</div> <div id=”main-wraper”> <div id=”main”> <div id=”content”>…</div> <div id=”sidebar-first” class=”column sidebar”>…</div> </div> </div> <div id=”footer>…</div> </div</body>Bước 2: tạo file style.css theo cấu trúc html#header{ .}#navigation{ .}#main{ .}#content{ .}#sideber-first{ .}#footer{ .}Và các thẻ css phụ khác tùy chỉnh theo cấu trúc htmlBước 3: tạo file dulichdeal.info(tên file là tên của thư mục giao diện), để khai báo cho drupal biết rằng hiện giao diện chúng ta đang tạo có các tập tin cần Trang 4 tham gia, các vị trí nào được khởi tạo và một số thông tin phụ khác, . trong quá trình xây dựng giao diện website.Nội dung file dulichdeal.info:name = Demo core = 7.x stylesheets[all][] = css/style.cssregions[header] = Headerregions[navigation] = Navigation menuregions[content] = Contentregions[sidebar_first] = Sidebar Firstregions[footer] = Footerregions[help] = Helpregions[page_top] = Page topregions[page_bottom] = Page bottomĐể hiển thị các region trên trang, chúng ta thực hiện sau:Tại tập tin page.tpl.php(trong thu mục dulichdeal/templates/) tìm vị trí muốn hiển thị và xử lý hiển thị như sau:<?php print render($page[‘header’]); ?><?php print render($page[‘navigation’]); ?><?php print render($page[‘slideshow’]); ?> <?php print render($page[‘content’]); ?><?php print render($page[‘sidebar_second’]); ?><?php print render($page[‘footer’]); ?> Các vị trí trong tập tin page.tpl.php sau khi được khởi tạo sẽ tương ứng với các vị trí trên giao diện như sau: Trang 5 Bước 4: Chèn các biến vào theme: Sau khi các vị trí trên giao diện đã được khởi tạo thì tại bước này chúng ta sẽ hiện nội dung vào các vị trí này cho phù hợp theo mục đích của chúng ta. Mỗi file tpl.php sẽ được định nghĩa các biến khác nhau và được hiển thị như sau:Ví dụ: Tại page.tpl.php<?php print $logo; ?><?php print $site_slogan ; ?> .Bước 5: Đến một thời điểm nào đó, bạn cần thay đổi ở một vị trí nào đó của giao diện như page.tpl.php, node.tpl.php hoặc bất cứ tiêu chuẩn tập tin giao diện hiển thị trên trang. Trước khi thay đổi, hãy copy tập tin cần thay đổi và thay đổi tên mới theo cách sau:1. page.tpl.php Trang 6 è page--front.tpl.php2. block.tpl.phpè block--modulename.tpl.php3. node.tpl.phpè node--modulename.tpl.php4. field.tpl.phpè field--modulename.tpl.phpVà nhiều cách dặt tên tùy vào từng loại nội dung. Những tập tin chúng ta thay đổi sẽ được hệ thống drupal ưu tiên hiển thị.Bước 6: Cài đặt giao diện như chỉ dẫn mục 5.1.2Hoàn thành quá trình thiết kế cài đặt giao diện với drupal5.3 Giao diện các trang liên kết5.3.1 Du lịch hôm nay Trang 7 5.3.2 Du lịch gần đây Trang 8 5.3.3 Liên hệ Trang 9 5.3.4 Đăng kí thành viên Trang 10 . CHƯƠNG 5: XÂY DỰNG WEBSITE5 .1 Sitemap5.2 Thiết kế giao diện với drupal5.2.1 Cài đặt giao. nào được khởi tạo và một số thông tin phụ khác,... trong quá trình xây dựng giao diện website. Nội dung file dulichdeal.info:name = Demo core = 7.x stylesheets[all][]