Transcript 網站標題區title 資料表

勞動部技能檢定中心
網頁架設乙級證照試題解析
萬能科技大學資訊工程系
李勝楠
[email protected]
綱要
考題分析
 準備工作
 網站管理
 網站首頁版型與資料庫資料表之配置
 網站標題區 title 資料表
 校園映像區Image 資料表
 動態文字廣告區Txt 資料表
 動畫圖片輪區Flash 資料表
 進站總人數amount資料表及頁尾版權區cright資料
表
 主選單區Menu資料表
 最新消息區News資料表

網頁乙級術科考題分析

四個題組
「卓越科技大學校園資訊系統」網站(1/4)
「卓越科技大學校園資訊系統」網站(2/4)

前端程式
「卓越科技大學校園資訊系統」網站(3/4)

前端程式
「卓越科技大學校園資訊系統」網站(4/4)

後台管理程式
準備工作
下載「網頁乙級」參考資料
http://www.labor.gov.tw/home.jsp?pageno=20110
9290020
 下載17300 –網頁設計乙級 (壓縮檔內容如下)

卓越科技大學校園資訊系統
檔案管理
開啟 “102201”資料夾
 新增資料夾images



新增資料夾swf


將所有圖型檔 (*.gif 以及 *.jpg) 全部移進此資料夾
將所有 flash 檔 (*.swf) 全部移進此資料夾
進入 “版型檔案”資料夾
將所有檔案移出至“102201”資料夾
 刪除“版型檔案”資料夾


新增 “C:\xampp\htdocs\web01” 資料夾

將剛剛管理的“102201”資料夾內的所有檔案移至
“C:\xampp\htdocs\web01” 資料夾
執行XAMPP程式

執行XAMPP程式, 並啟動 Apache 及 MySQL
網站管理
在 DREAMWEAVER 中定義網站 (1/3)

啟動Dreamweaver

新增網站
網站新增網站
 輸入網站名稱



卓越科技大學校園資訊系統
本機網站資料夾

C:\xampp\htdocs\web01
\
在 DREAMWEAVER 中定義網站 (2/3)

點選伺服器基本
伺服器名稱
 連線方式



伺服器資料夾


c:\xampp\htdocs\web01
Web URL:


選擇 “本機/網路”
http://localhost/web01/
伺服器進階

伺服器模式

選擇 PHP MySQL
在 DREAMWEAVER 中定義網站 (3/3)

測試網站並儲存
網站基本資料表
檔案資訊
內容
網站名稱
卓越科技大學校園資訊系統 網站
伺服器主資料夾
c:\xampp\htdocs
本樹網站資料夾
c:\xampp\htdocs\web01
程式測試網址
http://localhost/web01
MySQL 伺服器
localhost / web01.sql
(資料會存在
C:\xampp\mysql\data)
MySQL管理帳號/密碼
root/1234
請務必修改MySQL管理者 (root) 的密碼
1. http://localhost/xampp
2. 選擇 security
3. 連結 http://localhost/security/xamppsecurity.php
4. 輸入密碼 1234
網站首頁版型與資料庫資料表之配
置
網站首頁版型資料表連結 (資料庫WEB01.SQL)
title
txt
flash
news
amount
cright
image
建立資料庫

在瀏覽器中輸入以下網址進入phpmyadmin管理系統





http://localhost/phpmyadmin
點選新增
輸入資料庫名稱 “web01”
選擇編碼: utf8_unicode_ci
按 “建立”
1
web01
2
3
4
網站與MYSQL資料庫之連線
開啟index.php (01p02.htm)
1
 1.選擇連線

資料庫
 +
 MySQL 連線


2. 設定MySQL連線






連線名稱
MySQL 伺服器
使用者
密碼
資料庫
2
web01
可以按 “測試”看連線是否成功
檢視資料庫連線成功後的檔案

資料庫連線成功後會產生
Connections 資料夾
 資料夾中包含連線檔案connSQL.php, 其內容如下


其中第10行, 請自行加入


mysql_query(“SET NAMES utf8”);
如此, 即可將資料庫連線校正設定為utf-8編碼
網站標題區 TITLE 資料表
建立TITLE資料表 (1/2)
2
Unsigned
zerofill
1
3
4
建立TITLE資料表 (2/2)—詳細結構
Unsigned
zerofill
新增4筆資料
2
3
4
1
5
TITLE 資料表內容如下

Title 資料表新增4筆資料內容如下
3
建立TITLE資料表繫結
1
5
2
4
新增TITLE影象區
滑鼠點至標題影像區
 滑鼠點至程式區, 輸入以下程式碼


<img width="1024" height="100" border=“0" >

並點選重新整理
影像位址(資料欄位)連結至標題影像區

拖曳title_imgurl至標題影像區

修正標籤檢視窗的屬性
height 100
 width 1024

設計畫面
執行畫面
校園映像區IMAGE 資料表
IMAGE 資料表(校園映像區)

建立Image 資料表結構
Unsigned
zerofill
新增10筆資料
2
3
4
1
5
IMAGE 資料表內容如下

Image 資料表新增10筆資料內容如下
2
建立IMAGE資料表繫結
1
4
3
新增表格


滑鼠點至校園影象區下方
插入版面表格


標籤檢視窗屬性
align 輸入center
新增影象區
滑鼠點至表格第二列
 滑鼠點至程式區, 輸入以下程式碼


<img width="120" height="120" border="1" >

並點選重新整理
影像位址(資料欄位)連結至影像區

拖曳img_url至
影像區

修正標籤檢視窗
的height及
width屬性為
120
設定資料重覆區

影像位置所在欄位必須整個重覆


點選影像
切換至程式碼區, 點選以下程式碼
伺服器行為
 +
 重覆區域
 RecImg
 顯示3記錄
 確定

1
2
3
6
4
5
資料集導覽設定(1/2)

1
2
點選表格第一列




插入
資料
資料集導覽列
移到上一頁
選擇資料集為RecImg
 確定
3
4


5
移至程式碼區
將“上一頁”改為以下程式碼
 <img src=“images/up.jpg”/>
 點選重新整理

6
資料集導覽設定(2/2)

1
2
點選表格第三列




插入
資料
資料集導覽列
移到下一頁
選擇資料集為RecImg
 確定
3
4


5
移至程式碼區
將“下一頁”改為以下程式碼
 <img src=“images/dn.jpg”/>
 點選重新整理

6
設計畫面
執行畫面
動態文字廣告區TXT 資料表
TXT 資料表(動態文字廣告區)

建立Txt資料表結構
Unsigned
zerofill

按儲存以建立Txt資料表
新增5筆資料到TXT資料表

依據01A02.txt 所提供的5筆資料新增txt 資料表
2
建立TXT資料表繫結
1
4
3
動態文字(資料欄位)動態文字廣告區

拖曳txt_msg至動態文字廣告區
執行畫面
動畫圖片輪區FLASH 資料表
FLASH 資料表(動畫圖片輪區)

建立Flash資料表結構
Unsigned
zerofill

按儲存以建立Flash資料表
新增4筆資料到FLASH資料表

新增4筆資料到Flash資料表的內容
2
建立FLASH資料表繫結
1
4
3
新增FLASH動畫區
滑鼠點選 “沒有資料”部份
 用以下程式碼取代“沒有資料”部份


<object width="320" height="240"> </object>

並點選重新整理
動畫位址(資料欄位)連結至動畫區

拖曳flash_url至動畫區

點選動畫區, 並移至程式區, 將 codebase 改成 data
<object codebase="<?php echo $row_RecFlash['flash_url']; ?>"
width="320" height="240"> </object>
 <object data="<?php echo $row_RecFlash['flash_url']; ?>"
width="320" height="240"> </object>

設計畫面
執行畫面
進站總人數AMOUNT資料表
頁尾版權區CRIGHT資料表
進站總人數(AMOUNT資料表)

amount資料表結構

amount資料表的1筆資料
建立amount資料表繫結
 將amount資料表的amount欄位拖曳至 “進站總人數”
之後

頁尾版權區(CRIGHT資料表)

cright資料表結構

cright資料表的1筆資料
建立cright資料表繫結
 將cright資料表的cright欄位拖曳至 “ 頁尾版權區”

設計畫面
執行畫面
主選單區MENU資料表
主選單區(MENU資料表)
新增2筆資料到MENU資料表

新增2筆資料到Menu資料表的內容
2
建立MENU資料表繫結
1
4
3
新增主選單區
滑鼠點選 “主選單區”下方
 滑鼠移至程式碼的相對應位置(必須在</div>之前)
 插入常用SprySpry選單列

選擇垂直, 按確定
 在選單列中刪除項目2~4
 在項目1中, 刪除項目1.1~1.3

動畫位址(資料欄位)連結至動畫區

拖曳menu_name至項目一, 並取代之

切換至程式區, 點選相對應的程式碼,拖曳menu_url, 並取代 #

成為以下程式碼

設定資料重覆區

影像Spry選單列

或是其相對應程式碼
1
2






伺服器行為
+
重覆區域
RecMenu
顯示所有記錄
確定
3
6
4
5
設計畫面
執行畫面
最新消息區NEWS資料表
最新消息區(NEWS資料表)
新增8筆資料到NEWS資料表

開啟01A01.txt，新增8筆資料到News資料表，內容如下：
2
建立ＮEWS資料表繫結
1
4
3
新增1列2欄表格


滑鼠點至最新消息區下方
插入版面表格


調整表格寬度約為520px
第1欄為40px, 第2欄約
460px
新聞標題連結至影像區
拖曳news_id至第1欄
 拖曳news_subjec至第2欄

設定資料重覆區

選取表格中唯一的一列，不是整個表格


在設計區中不易選取
切換至程式碼區, 點選以下藍底程式碼
伺服器行為
 +
 重覆區域
 RecNews
 顯示5記錄
 確定

1
2
3
6
4
5
彈出視窗顯示最新消息內容

點選設計區的{RecNews.news_subject}

切換至程式區, 游標指到下圖區域

輸入以下程式碼


<a href="more.php" title="<?php echo $row_RecNews['news_detail']; ?>">
完整程式碼如下, 如此可以彈出視窗顯示最新消息內容
設計畫面
顯示畫面