14.TẠO BANNER ĐỘNG BẰNG
CHƯƠNG TRÌNH WOWSLIDER
DÁN VÀO WEBSITE JOOMLA 1.5
Download bài này: http://gg.gg/utbinh92
Video hướng dẫn: http://gg.gg/utbinh93
Xem trang web: http://utbinhdesign.com/site1803
Xem trang web: http://utbinhdesign.com/chuathainguyen
Khi học
thiêt kế Web bạn sẽ gặp nhiều bài khó cần làm đi làm lại nhiều lần để tránh sai
sót và nhớ lâu. Nội dung bài này: Tạo Banner áp dụng cho Joomla1.5. Bài này
cũng hơi khó. Út Bỉnh viết lại lần 2.
I.TẠO BANNER BẰNG
CHƯƠNG TRÌNH PHOTOSHOP
Bạn có thể tạo từ 5 đến 10 banner bằng
Photoshop với kích cở 1700 X 350 pixels.
II.DOWNLOAD VÀ CÀI ĐẶT
CHƯƠNG TRÌNH:
- Tải chương trình tại: http://wowslider.com/. Bấm nút download.
- Xuất hiện trang kế tiếp, bạn nhập Your Name và Your Email.
- Xuất hiện thông báo yêu cầu bạn kiểm tra thư, nếu sử dụng Windows thì bấm dòng trong For Windows để bắt đầu download chương trình về.
- Xuất hiện cửa sổ Download for info của chương trình IDM, bấm nút Browse chỉ định nơi lưu là Desktop. Bấm nút Start download. Tải IDM dung lượng 19,36 tại: http://gg.gg/utbinh71
- Bạn giải nén và có duy nhất một file chạy: wowslider-setup dung lượng 19,849 MB. Bấm lên nó để bắt đầu cài đặt. Qua vài bước đơn giản bạn đã cài xong và xuất hiện một Shortcut.
III.SỬ DỤNG CHƯƠNG TRÌNH
- Bấm Shortcut chương trình. Bấm dấu +. Đến các Banner cần chèn, chọn hết và bấm Open. Trong bài này xuất hiện 10 banner trong khung giữa. Trong dòng:
·
Title: Đã có tên ảnh thứ 1. Bạn có thể nhập
lại tên ảnh.
·
URL: Nhập Link URL để khi bấm lên banner này sẽ liến kết
đến trang Web khác.
·
Target: Chọn Blank. Bấm Banner thứ 2 và lập
lại các bước trên. Xong, bấm nút Publish.
- Xuất hiện cửa sổ Publish Gallery, có 3 Tab chính:
·
General: Bạn gỏ tiêu đề cho Dòng Slider
Title. Dòng Thumbnails Size chọn 20 X20. Bấm Tab Images.
·
Images : Dòng Image Size chọn Custom size và
nhập giá trị của Banner đã tạo là 1700 và 350. Kéo cần gạt trong Delay between
Slider (Tang độ trể cho slider) và Transition Effect (Tăng đệ trể cho hiệu ứng
chuyển cảnh). Bấm nút Public.
·
Publish: Trong Tab này bạn có 6 kiểu chọn xuất.
Bạn chỉ cần chọn kiểu tạo Database cho Website của bạn đó là kiểu:
o
Public To Folder. Bạn đánh dấu chọn vào đây. Bạn
bma61 nút Browse để chỉ định nơi xuất Database hoặc để mặc định xuất theo đường
dẫn: C:\Users\UtBinh\Documents\WOW Slider
o
Joomla
Module: Sẽ tạo một File nén. Đó là Module tạo Banner cho bạn trong trang Web
Joomla.
o
4
kiểu chọn còn lại tùy trường hợp sử dụng.
Sau cùng
bạn bấm nút Publish bên dưới: Sau
khi bấm xong bạn thấy Preview Banner động đang thực thi trong trình duyệt (Bấm
lên Banner đang chạy sẽ liên kết đến trang Web mà bạn đã chỉ định trong lúc tạo)
đồng thời vào đường dẫn: C:\Users\UtBinh\Documents\WOW
Slider bạn đã thấy Database vừa tạo là: 2 Folders và 2 files. Bạn Copy Database này và dán vào
Folder Database Banner vừa tạo tại Dekstop
IV.CÁCH
DÁN CODE VÀO TRANG WEB
1.DÁN
2 FOLDERS VÀO THƯ MỤC IMAGES CỦA TEMPLATE ĐANG SỬ DỤNG.
- Tạo File nén: Chọn 2 Folders. Bấm phải lên và chọn Add To Archived. Chọn ZIP và chọn Best. Bấm Ok. Đã có file nén tên Database Banner.
- Upload File nén trong thư mục images: Đăng nhập Hosting chứa Website Joomla của bạn. Đến Public_html > Site 1803 (Đây là Trang Web cần tạo Banner) > Templates > Rhuk Milkyway > Images (Bạn sẽ chèn file nén vào đây) > Bấm nút Upload > Bấm nút Browse > Đến File nén vừa tạo > Hosting đang Upload. Khi xong có thông báo đã Upload hoàn tất. Bấm nút Back To > Bấm lên File Database Banner và bấm nút Extract để giải nén.
·
Bung nén trong thư mục images: Sau khi giải nén xong xuất hiện 2
files: data 1 và engine 1. Chọn file nén và bấm nút Delete. Như vậy là bạn đã
chèn 2 Folder dữ liệu tạo Banner vào thư mục images của Template.
2.DÁN 2 CODES VÀO NÚT EDIT HTML
Có 2 đoạn
Code mà bạn cần phải lấy để dán vào Template của Trang Web. Bạn bấm phải lên file index, chọn Edit with NotePad ++
(Download: http://goo.gl/6dfeoo).
Xuất hiện Code của file index này.
- Vào Edit HTML: Bạn đăng nhập vào trang Admistrator của Website: http://utbinhdesign.com/chuathainguyen/administrator/index.php > Templates Manager > Bấm lên tên Templates hiện hành là Rhuk-Milkyway > Bấm nút Edit Html .
- Copy đoạn Code CSS và Jquery này dán vào trên thẻ </head>.
<!-- Start
WOWSlider.com HEAD section -->
<link
rel="stylesheet" type="text/css"
href="engine1/style.css" />
<script
type="text/javascript"
src="engine1/jquery.js"></script>
<!-- End
WOWSlider.com HEAD section -->
Bấm nút Save.
- Tạo Code tránh trùng lấp : Bấm Ctrl+F > Bấm Tab Replace > Chọn theo hình và bấm nút Replace All in All OpeendDocuments > Bấm Ok > Close. Như vậy là bạn đã thay thế các code trủng lấp.
- Copy đoạn Code tạo kiến trúc cho Slider: Trước khi Copy đoạn Code này bạn cần phải làm động tác Replace các code trùng lấp nếu không sẽ không có kết quả. Cách thực hiện như sau: Bấm Ctrl+F để xuất hiện cửa sổ Replace. Bma61 Tab Replace. Trong Dòng Find What bạn nhập: src=” (Đầy là đoạn code cần thay thế). Trong Dòng Replace with bạn nhập: src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/images/. Sau cùng bấm nút: Replace All in All Opened Documents. Toàn bộ Code src=” sẽ được thay thế bằng src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/images/.
- Sau đó bạn Copy đoạn code này:
<!-- Start WOWSlider.com BODY section -->
<div
id="wowslider-container1">
<div
class="ws_images"><ul>
<li><a
href="http://gg.gg/utbinh030" target="_blank"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/1.jpg" alt="1"
title="1" id="wows1_0"/></a></li>
<li><a
href="http://gg.gg/utbinh070" target="_blank"><img
src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/images/data1/images/2.jpg"
alt="2" title="2"
id="wows1_1"/></a></li>
<li><a
href="http://gg.gg/utbinh040" target="_blank"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/3.jpg" alt="3"
title="3" id="wows1_2"/></a></li>
<li><a href="http://gg.gg/utbinh010"
target="_blank"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/4.jpg" alt="4"
title="4" id="wows1_3"/></a></li>
<li><a
href="http://gg.gg/utbinh010" target="_blank"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/5.jpg" alt="5"
title="5" id="wows1_4"/></a></li>
<li><a
href="http://gg.gg/utbinh020" target="_blank"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/6.jpg" alt="6"
title="6" id="wows1_5"/></a></li>
<li><a
href="https://sinhvienit.net/home/"
target="_blank"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/7.jpg" alt="7"
title="7" id="wows1_6"/></a></li>
<li><a href="http://diendanbaclieu.net/diendan/forum.php"
target="_blank"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/8.jpg" alt="8"
title="8" id="wows1_7"/></a></li>
<li><a
href="http://vietdesigner.net/" target="_blank"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/9.jpg" alt="9"
title="9" id="wows1_8"/></a></li>
<li><a
href="http://www.vietphotoshop.com/vietphotoshop/"
target="_blank"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/images/10.jpg"
alt="10" title="10"
id="wows1_9"/></a></li>
</ul></div>
<div
class="ws_bullets"><div>
<a href="#"
title="1"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/1.jpg"
alt="1"/>1</a>
<a href="#"
title="2"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/2.jpg"
alt="2"/>2</a>
<a href="#"
title="3"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/3.jpg"
alt="3"/>3</a>
<a href="#" title="4"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/4.jpg"
alt="4"/>4</a>
<a href="#"
title="5"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/5.jpg"
alt="5"/>5</a>
<a href="#" title="6"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/6.jpg"
alt="6"/>6</a>
<a href="#"
title="7"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/7.jpg"
alt="7"/>7</a>
<a href="#" title="8"><img
src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/8.jpg"
alt="8"/>8</a>
<a href="#"
title="9"><img src="<?php echo $this->baseurl
?>/templates/rhuk_milkyway/images/data1/tooltips/9.jpg"
alt="9"/>9</a>
<a href="#" ti />
- Dán đè lên đoạn Code này > Bấm Nút Save.
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="1200" height="249" id="tech" align="middle">
<param name="allowScriptAccess"
value="sameDomain" />
<param name="movie" value="11
banner.swf" />
<param name="quality"
value="high" />
<embed src="http://goo.gl/68S3yH"
quality="high" width="1000" height="180"
name="tech" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
CHUYÊN ĐỀ THIẾT KẾ WEB DREAMWEAVER CS6
ÚT BỈNH ĐÃ SOẠN ĐƯỢC 14 BÀI TÍNH ĐẾN NGÀY 5.5.2014
12 Bài viết rất hay của Nguyễn Đức Anh thiết kế web:
No comments:
Post a Comment