單元4 專題網(wǎng)站的設(shè)計(jì)制作

1、多媒體課件與專題網(wǎng)站的設(shè)計(jì)制作多媒體課件與專題網(wǎng)站的設(shè)計(jì)制作 現(xiàn)代傳媒學(xué)院教育技術(shù)教研室專題學(xué)習(xí)網(wǎng)站的創(chuàng)建專題學(xué)習(xí)網(wǎng)站的創(chuàng)建現(xiàn) 代 教 育 技 術(shù)4.2 專題學(xué)習(xí)網(wǎng)站的創(chuàng)建專題學(xué)習(xí)網(wǎng)站的創(chuàng)建 1.主要內(nèi)容 預(yù)備知識(shí) 動(dòng)態(tài)網(wǎng)站與靜態(tài)網(wǎng)站 優(yōu)秀網(wǎng)站賞析 網(wǎng)頁(yè)設(shè)計(jì)軟件 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言 Dreamweaver工作環(huán)境 專題網(wǎng)站建設(shè)一般流程 框架網(wǎng)頁(yè)制作現(xiàn) 代 教 育 技 術(shù) 2.教學(xué)方法： （1）自主學(xué)習(xí) （2）分組討論，合作學(xué)習(xí)（5個(gè)人一組） 3.教學(xué)資源： （1）教材 （2）教學(xué)課件現(xiàn) 代 教 育 技 術(shù) 4.目標(biāo)要求：可以通過(guò)回答以下問(wèn)題來(lái)檢測(cè)能否達(dá)到學(xué)習(xí)效果。 （1）什么是專題學(xué)習(xí)網(wǎng)站？ （2）

2、專題學(xué)習(xí)網(wǎng)站的特點(diǎn)有什么？ （3）專題學(xué)習(xí)網(wǎng)站有哪些類型？ （4）專題學(xué)習(xí)網(wǎng)站由哪幾部分構(gòu)成？ （5）用Dreamweaver制作專題學(xué)習(xí)網(wǎng)站的簡(jiǎn)單流程現(xiàn) 代 教 育 技 術(shù)多媒體課件與專題網(wǎng)站的設(shè)計(jì)制作多媒體課件與專題網(wǎng)站的設(shè)計(jì)制作 現(xiàn)代傳媒學(xué)院教育技術(shù)教研室專題學(xué)習(xí)網(wǎng)站的創(chuàng)建教學(xué)專題學(xué)習(xí)網(wǎng)站的創(chuàng)建教學(xué)PPT現(xiàn) 代 教 育 技 術(shù)動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè) 什么是動(dòng)態(tài)網(wǎng)頁(yè)？ 動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的區(qū)別？ 動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的請(qǐng)求過(guò)程現(xiàn) 代 教 育 技 術(shù)動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)現(xiàn) 代 教 育 技 術(shù)優(yōu)秀網(wǎng)站賞析優(yōu)秀網(wǎng)站賞析公司類海爾集團(tuán) 海爾集團(tuán) 產(chǎn)品中心 海爾與奧運(yùn)紅太

3、陽(yáng)集團(tuán) 旅游類攜程旅行網(wǎng)體育類中國(guó)體育資訊網(wǎng) 校園頻道 考試頻道購(gòu)物網(wǎng)站當(dāng)當(dāng)購(gòu)物網(wǎng)個(gè)人網(wǎng)站中國(guó)學(xué)生網(wǎng) 學(xué)生空間 日記 木葉之家現(xiàn) 代 教 育 技 術(shù)專題網(wǎng)站建設(shè)流程專題網(wǎng)站建設(shè)流程 確定網(wǎng)站主題 主題明確，忌“雜貨鋪” 個(gè)人特色，忌主題過(guò)大 健康合法 網(wǎng)站整體規(guī)劃 樹(shù)狀結(jié)構(gòu)現(xiàn) 代 教 育 技 術(shù) 收集資料和素材 文本 動(dòng)畫(huà) 自己拍攝制作 設(shè)計(jì)網(wǎng)頁(yè)圖像 網(wǎng)站標(biāo)志、網(wǎng)站色彩、網(wǎng)站字體、網(wǎng)站宣傳廣告 網(wǎng)站首頁(yè) 版面、色彩版面、色彩 圖像、動(dòng)畫(huà)圖像、動(dòng)畫(huà) 圖標(biāo)、圖標(biāo)、Banner 菜單菜單 版權(quán)說(shuō)明版權(quán)說(shuō)明網(wǎng)站建設(shè)一般流程網(wǎng)站建設(shè)一般流程現(xiàn) 代 教 育 技 術(shù) 制作網(wǎng)頁(yè) 結(jié)構(gòu)：先大后小 內(nèi)容：先簡(jiǎn)單后

4、復(fù)雜 開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站模塊 搜索功能 留言板 新聞信息發(fā)布系統(tǒng) 在線購(gòu)物網(wǎng)站建設(shè)一般流程網(wǎng)站建設(shè)一般流程現(xiàn) 代 教 育 技 術(shù) 申請(qǐng)域名 短、意義簡(jiǎn)單常用 稀有、不可替代 申請(qǐng)服務(wù)器空間 虛擬主機(jī)方式 獨(dú)立服務(wù)器 發(fā)布與上傳 FTP工具 Dreamweaver站點(diǎn)管理網(wǎng)站建設(shè)一般流程網(wǎng)站建設(shè)一般流程現(xiàn) 代 教 育 技 術(shù)后期更新與維護(hù)后期更新與維護(hù) 更新 網(wǎng)頁(yè) 目錄管理 外觀及廣告更新 網(wǎng)站推廣 交換鏈接 注冊(cè)搜索引擎 廣告鏈現(xiàn) 代 教 育 技 術(shù)網(wǎng)頁(yè)設(shè)計(jì)軟件與語(yǔ)言網(wǎng)頁(yè)設(shè)計(jì)軟件與語(yǔ)言 軟件 網(wǎng)頁(yè)編輯排版軟件Dreamweaver 網(wǎng)頁(yè)圖像制作軟件Photoshop 網(wǎng)頁(yè)動(dòng)畫(huà)制作軟件FLASH 語(yǔ)言

5、 超文本標(biāo)記語(yǔ)言HTML 網(wǎng)頁(yè)腳本語(yǔ)言Javascript現(xiàn) 代 教 育 技 術(shù)Dreamweaver工作環(huán)境工作環(huán)境 起始頁(yè) 工作窗口 三種視圖 網(wǎng)頁(yè)制作過(guò)程新建網(wǎng)頁(yè)保存網(wǎng)頁(yè)預(yù)覽網(wǎng)頁(yè)修改網(wǎng)頁(yè)站點(diǎn)新建站點(diǎn)管理站點(diǎn)文件夾及文件現(xiàn) 代 教 育 技 術(shù)使用框架布局網(wǎng)頁(yè)：使用框架布局網(wǎng)頁(yè)： Why&When? 網(wǎng)頁(yè)中固定的部分：導(dǎo)航欄、標(biāo)題等 網(wǎng)頁(yè)中經(jīng)常更新的部分：正文 如何減少重復(fù)工作？ 案例演示現(xiàn) 代 教 育 技 術(shù)創(chuàng)建框架創(chuàng)建框架 兩種方法 下拉菜單 下拉菜單中文件下拉菜單中文件新建新建框架集框架集 在右邊選擇框架結(jié)構(gòu)在右邊選擇框架結(jié)構(gòu) 插入面板 選擇插入面板中選擇插入面板中“框架框架”

6、 在彈出框架結(jié)構(gòu)列表中選擇在彈出框架結(jié)構(gòu)列表中選擇現(xiàn) 代 教 育 技 術(shù)添加內(nèi)容添加內(nèi)容 光標(biāo)置于框架內(nèi) 舉例： 光標(biāo)置于頂部框架內(nèi) 插入表格 設(shè)置表格大小與背景圖片相同 設(shè)置表格背景 插入嵌套表格 設(shè)置表格對(duì)齊方式為底部、左端 插入文本現(xiàn) 代 教 育 技 術(shù)保存框架保存框架 框架組文件及一組框架文件 文件保存全部 彈出“保存為”對(duì)話框 根據(jù)陰影框判斷保存的對(duì)象 最好按照框架的位置來(lái)給文檔命名現(xiàn) 代 教 育 技 術(shù)選擇框架及框架組選擇框架及框架組 選擇一個(gè)框架 按下Alt，在欲選擇的框架內(nèi)單擊鼠標(biāo)左鍵 窗口其他框架，在框架面板中選擇 選擇框架組 鼠標(biāo)指針經(jīng)過(guò)框架邊框，出現(xiàn)上下箭頭；單擊整個(gè)框架

7、組的邊框 “框架”面板（打開(kāi)方法：窗口其他框架）中單擊框架組的邊框現(xiàn) 代 教 育 技 術(shù)如何查看框架代碼？如何查看框架代碼？ 代碼視圖 選擇框架組的同時(shí)，切換到代碼視圖 代碼分析現(xiàn) 代 教 育 技 術(shù)框架屬性框架屬性 屬性 框架名稱：作為鏈接指向的目標(biāo)（target=？） 源文件：框架中頁(yè)面文件來(lái)源 邊框 其中，“默認(rèn)”項(xiàng)由瀏覽器端的設(shè)置決定 邊框顏色現(xiàn) 代 教 育 技 術(shù)框架屬性框架屬性 不能調(diào)整大小 在瀏覽器中是否可以手動(dòng)改變大小 邊界高度 邊界寬度 滾動(dòng) 自動(dòng):根據(jù)內(nèi)容是否能完全顯示而自行調(diào)整現(xiàn) 代 教 育 技 術(shù)框架組屬性框架組屬性 框架組屬性 邊框、邊框?qū)挾?、邊框顏?單位：行、列尺

8、寸的單位 像素（大小固定），瀏覽器優(yōu)先分配像素（大小固定），瀏覽器優(yōu)先分配 百分比：所選框架大小在整個(gè)框架組的百分比，比百分比：所選框架大小在整個(gè)框架組的百分比，比“像素像素”后后分配，比分配，比“相對(duì)相對(duì)”先分配先分配 相對(duì)，其余兩種分配完畢的剩余空間相對(duì)，其余兩種分配完畢的剩余空間現(xiàn) 代 教 育 技 術(shù)編輯框架編輯框架 拆分框架 光標(biāo)置于框架內(nèi)，選擇插入面板框架 光標(biāo)置于框架內(nèi)，修改框架頁(yè)拆分上框架 編輯并保存新框架 設(shè)置框架和框架組的滾動(dòng)條現(xiàn) 代 教 育 技 術(shù)改變框架大小改變框架大小 改變框架尺寸 上下結(jié)構(gòu)的框架組，行值 左右結(jié)構(gòu)的框架組，列值 單位：像素、百分比、相對(duì)現(xiàn) 代 教 育 技 術(shù)與框架有關(guān)的鏈接與框架有關(guān)的鏈接 鏈接目標(biāo) 頁(yè)內(nèi)鏈接如何實(shí)現(xiàn)的？ 普通文檔中的鏈接目標(biāo)？ 鏈接目標(biāo)指向某一框架 查看框架名稱 可在高級(jí)布局可在高級(jí)布局框架中查看框架中查看 在鏈接目標(biāo)出選擇框架名稱