CHUYÊN ĐỀ THIẾT KẾ WEB DREAMWEAVER CS6
TẠO BANNER ĐỘNG
DÁN TRONG HEADER CỦA WEBSITE
NGÀY 10.3.2014 (DREAWEAVER CS6)
KS THẢO HƯỚNG DẪN
WowSlider tạo Banner động: http://gg.gg/utbinh76
I.DOWNLOAD VÀ CÀI ĐẶT CHƯƠNG TRÌNH
- Tải chương trình tạo Banner tại: http://wowslider.com/ . Bạn có thể tham khảo thêm khi bấm các nút: OverView – Demo – Quick Help – Support. Bấm nút Download để bắt đầu download chương trình Free về máy tính của bạn.
- Xuất hiện trang kế tiếp, bạn nhập Your Name và Your Email, xong bấm nút Download Now.
- 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, nếu sử dụng Mac thì bấm dòng trong Mac.
- Bạn dùng Windows thì bấm lên dòng 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ạn bấm nút Browse và chỉ định nơi lưu là Desktop. Bấm nút Start download. (Tải IDM tại: http://gg.gg/utbinh71). Dung lượng 19,36 MB.
- 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. Chỉ qua vài bước cài đặt đơn giản bạn đã cài đặt xong và xuất hiện một Shortcut tại Desktop.
II.SỬ DỤNG CHƯƠNG TRÌNH
- Bấm Shortcut chương trình tại Dektop, xuất hiện giao diện chương trình.
- Tạo một Banner tại Desktop chứa các ảnh cần tạo Banner. Các ảnh này (10 ảnh) có đồng kích cở khoảng 1.600 X 250 pixels. Bạn rê các ảnh vào cửa sổ chương trình hoặc bấm Nút + để đến các ảnh cần chèn vào.
- Bạn chọn từng ảnh. Nhập Tiêu đề - URL để khi bấm lên sẽ dẫn đến Website chỉ định – Target. Bạn có thể nhập các chi tiết này cho 10 ảnh hoặc chỉ vài ảnh cũng được. Sau đó bấm Nút Publish.
· Title: Nhập tiêu đề cho từng ảnh.
· URL: Khi bấm lên một nút Thumbnail sẽ hiển thị trang web liên kết đã liệt kê trong ô này.
· Target: Chọn _blank.(Khi nhấp lên ảnh trình chiếu sẽ mở ra một cửa sổ khác).
- Xuất hiện cửa sổ Public Gallery, trong cửa sồ này có 3 nút chính: General, Images và Publish. Bạn bấm nút General.
General: Bạn gõ tiêu đề cho album ở ô Slider Title và các tùy chọn khác theo thứ tự từ trên xuống như : tự động trình chiếu album, hiển thị phần mô tả hình ảnh, hiển thị 2 nút tới/lui ở hai bên của bức ảnh, hiển thị danh sách đại diện cho toàn bộ hình (những dấu “chấm vuông” ở góc trên cùng của album). Các lựa chọn bạn để mặc định là tốt nhất. Bấm nút Images.
· Nếu muốn làm Banner bấm chọn Bullet navigation và Thumbnail preview
· Nếu muốn làm Slide Show thì chọn nút Filmstrip.
· Thumbnail Size: Tùy chọn cho kích thước Thumbnail..
- Image : Phần template dùng để chọn kiểu thể hiện cho album. Phần parameter cho phép bạn chỉnh lại kích thước của hình (Ô Images Size chọn Custom Size và nhập đúng kích cở 1600 X 400 ), chương trình sẽ tự động resize lại theo kích thước bạn chỉ định. Chọn hiệu ứng chuyển ảnh ở mục Transition effect. Chọn khoảng thời gian ngừng để người dùng xem bằng cách chỉnh thanh cuộn “Delay between slides”. Chỉnh thời gian xảy ra hiệu ứng ở thanh “Effect duration”. Để mặc định và bấm Nút Publish.
· Trong Transition Effect nên chọn Domino.
· Lưu ý quan trọng: Trong mục Image Size nên chọn Custom Size và nhập đúng kích thước banner đã tạo.
· Sau khi chọn xong, bấm nút Publsh.
- Publish : Bạn bấm nút Browse chỉ định lưu trong một Folder đặt tại Desktop (Thướng cho nằm chung với các ảnh).Thẻ này sẽ giúp bạn xuất bản album hình. Nó có vài phương thức giúp bạn xuất bản hình ảnh, nếu bạn muốn xuất bản tập ảnh ra ổ cứng thì bạn chọn “Public to folder”.
· Nếu muốn tạo Banner cho Joomla thì chọn phiên bản Joomla bên dưới.
- Sau khi bấm xong chương trình Preview cho các bạn xem hoặc bấm lên file index.htm
- Bạn vào Folder đã chỉ định khi Publish đã thấy có 4 file do chương trình tạo ra.2
· File index.html: Đây là file Demo cho bạn xem kết quả tạo Banner.
III.CÁCH DÁN CODE VAIÒ TREANG WEB:
File index.html:
Bấm phải lên chổ trống > Chọn View Page Source xem code của nó. Bấm phải lên file này > Chọn Notepad ++ > Bạn sẽ thấy 2 đoạn code:
1.Copy đoạn code của WowSlider trong dòng Head: Đây là đoạn code CSS và Jquery của nó để đưa vào hiệu ứng và định dạng CSS.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 -->
2.Copy Code thứ 2: Tạo kiến trúc cho file Slider. Copy toàn bộ code nằm trong thẻ <body> và dán vào dưới <body>
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1.jpg" alt="1" title="1" id="wows1_0"/></li>
<li><a href="http://gg.gg/utbinh070" target="_blank"><img src="data1/images/2.jpg" alt="2" title="2" id="wows1_1"/></a></li>
<li><a href="http://gg.gg/utbinh040" target="_blank"><img src="data1/images/3.jpg" alt="3" title="3" id="wows1_2"/></a></li>
<li><a href="http://gg.gg/utbinh010" target="_blank"><img src="data1/images/4.jpg" alt="4" title="4" id="wows1_3"/></a></li>
<li><a href="http://gg.gg/utbinh020" target="_blank"><img src="data1/images/5.jpg" alt="5" title="5" id="wows1_4"/></a></li>
<li><a href="http://tinyurl.com/utbinh888" target="_blank"><img src="data1/images/6.jpg" alt="6" title="6" id="wows1_5"/></a></li>
<li><img src="data1/images/7.jpg" alt="7" title="7" id="wows1_6"/></li>
<li><img src="data1/images/8.jpg" alt="8" title="8" id="wows1_7"/></li>
<li><img src="data1/images/9.jpg" alt="9" title="9" id="wows1_8"/></li>
<li><img src="data1/images/10.jpg" alt="10" title="10" id="wows1_9"/></li>
<li><img src="data1/images/11.jpg" alt="11" title="11" id="wows1_10"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="1"><img src="data1/tooltips/1.jpg" alt="1"/>1</a>
<a href="#" title="2"><img src="data1/tooltips/2.jpg" alt="2"/>2</a>
<a href="#" title="3"><img src="data1/tooltips/3.jpg" alt="3"/>3</a>
<a href="#" title="4"><img src="data1/tooltips/4.jpg" alt="4"/>4</a>
<a href="#" title="5"><img src="data1/tooltips/5.jpg" alt="5"/>5</a>
<a href="#" title="6"><img src="data1/tooltips/6.jpg" alt="6"/>6</a>
<a href="#" title="7"><img src="data1/tooltips/7.jpg" alt="7"/>7</a>
<a href="#" title="8"><img src="data1/tooltips/8.jpg" alt="8"/>8</a>
<a href="#" title="9"><img src="data1/tooltips/9.jpg" alt="9"/>9</a>
<a href="#" title="10"><img src="data1/tooltips/10.jpg" alt="10"/>10</a>
<a href="#" title="11"><img src="data1/tooltips/11.jpg" alt="11"/>11</a>
</div></div>
<span class="wsl"><a href="http://wowslider.com">Website Slide Show</a> by WOWSlider.com v5.2</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
· Và dán vào tại : trên thẻ đóng </td> của Tab index.html.
3.Copy 2 folder data và engine dàn vào www cùng cấp với index.html.
4.Sau khi dán xong bạn bấm Preview để xem kết quả. Bấm lên Banner sẽ liên kết đến trang web khác.
Như vậy là bạn đã tạo xong banner và dán banner vào vị trí Header của Website. Khi bấm lên một Banner đang chạy dể liến kết đến trang web khác do bạn đã chỉ định trong lúc thiết kế.
DREAMWEAVER CS6
| | | 1007 KB | | | ||
| | | 2 MB | | | ||
| | | 1 MB | | | ||
| | | 361 KB | | | ||
| | | 585 KB | | | ||
| | | 3 MB | | | ||
| | | 1 MB | | | ||
| | | 521 KB | | | ||
| | | 8 MB | | |
Đăng nhận xét