說明文件

Transcript 說明文件

資工3B 09957146 張致行
資工3B 09957135 李啟嘉
網站架構
Index.html
認識台灣北台灣景點中台灣景點南台灣景點交通資訊
Introduce
.html
north1.html
north2.html
north3.html
圖片交流
聯絡我們
center1.html South1.html Traffic.html Album.php
Contact.html
center2.html South2.html
Photo.php
center3.html South3.html
Photodetail.php
…等10個php
網站技術
Index.html利用Javascript固定時間換圖片
var speed = 3000; //圖片切換時間
var current = 1;
function start()
{
if(current == 6)
current = 1;
var pic = document.getElementById("img");
pic.setAttribute("src","pic" + current + ".png");
++current;
setTimeout(“start()”,speed); //(3秒跑setTimeout一次)
}
window.addEventListener("load", start, false);
網站技術
 Youtube嵌入
<iframe class=“youtube-player” type=“text/html” width=“640”
height=“385” src=“http://www.youtube.com/embed/影片ID"
frameborder="0"> </iframe>
例:
http://www.youtube.com/watch?v=zDJfLjUTapA&list=PL4wjBuDaBIC6b
3KtauJI2NHZ-0T4zE4Ig
每個youtube影片都有一個ID,將此ID放入<iframe src =
“http://www.youtube.com/embed/zDJfLjUTapA&list=PL4wjBuDaBIC6b3
KtauJI2NHZ-0T4zE4Ig”>
即可嵌入youtube
網站技術
 Javascript mouseover換圖
function display(imgfile)
{
var bigImage = document.getElementById("imgCover");
bigImage.setAttribute("src","photos/"+imgfile);//chage src
}
function start()
{
document.getElementById("first").addEventListener("mouseover",
function(){ display("10-1.jpg");},false);
}
滑鼠移到image id時,即進入function display 換src
網站技術
 Jquery 顯示圖片導覽
利用 js/jquery.lightbox-0.5.js Lightbox JQ 裡的API套件去達成點擊放大
圖片效果
再利用 JavaScript mouseover造成換圖效果
網站技術
 Google Map API
new google.maps.LatLng(經緯度);//用於設定經緯度
var myOptions = {//用於map呈現樣子
zoom:16, //縮放比例
mapTypeId: google.maps.MapTypeId.ROADMAP, //地圖的樣式
center: initialPlace //中心點
}
new google.maps.Map(document.getElementById(“map_canvas”),
myOptions) //將要放地圖的div給他並且將設定好的參數呈現
 使用者位址
W3C navigator.geolocation//用於偵測,較新瀏覽器才支援
Google Gears Geolocation API
位置預設於海大
網站技術(Goole map)
 Google 導航
request={ origin: LatLng | String, //出發地
destination: LatLng | String, //目的地
travelMode: DirectionsTravelMode, //交通模式
}
 DirectionsTravelMode.DRIVING
 DirectionsTravelMode.WALKING
網站技術
 利用Facebook API 做出讚及留言版
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;//顯示語言
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
網站技術
 利用php做出相簿效果
<?php
require_once("connMysql.php");
$sql = “select album.album_id, album.album_name, photo.photo_file,
count(photo.album_id)
from album, photo
where album.album_id = photo.album_id
group by album.album_id";
$result = mysql_query($sql);
if(isset($_GET["page"])) //設定頁數
$page = $_GET["page"];
else
$page = 1;
網站技術(php)
$total = mysql_num_rows($result); //總共有幾本相簿
$per_page = 8; //每頁顯示8本相簿
$total_page = ceil($total/$per_page); //總頁數
$start = $per_page * ($page - 1); //顯示每頁第一筆資料,0是第一筆
if( $total != 0 )
mysql_data_seek($result, $start); //將指標指向每頁第一筆data(0,8,16…)
網站特色
 1.使用者可以得知北中南景點，並於該頁面欣賞到當地
圖片，可點取圖片利用jQuery欣賞放大圖片。
 2.如果不知道該景點如何前往，我們提供Google Map
供您查詢。
 3.如果您想把您在當地旅遊所拍攝的照片上傳我們提供
您分享及上傳空間(php+MySQL) 。
root為管理者可delete和add相簿、照片(帳:root密:0206)
其他會員僅能新增相簿及照片
 4.提供Facebook留言板供大家留言討論。
最後分工
 09957146 張致行:
網頁版面設計、網頁相簿(php) 、中台灣景點、聯絡我
們、首頁設計、認識台灣、CSS修正
 09957134 李啟嘉:
Google Map API, JQuery 顯示, 北台灣景點, 南台灣景
點, 資料收集
資料來源
• 觀光局
http://www.taiwan.net.tw/w1.aspx
• 旅遊王
http://www.travelking.com.tw/

說明文件

Transcript 說明文件

Directory