1第1章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ).ppt

1、,Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ),孫玉秀,手機(jī)QQ:390502275,網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ),第1章,本章要點(diǎn)： 網(wǎng)頁(yè)中的基本術(shù)語(yǔ) 網(wǎng)頁(yè)設(shè)計(jì)基本理念 確定網(wǎng)頁(yè)整體風(fēng)格 網(wǎng)頁(yè)色彩的搭配 繪制設(shè)計(jì)草圖 建立站點(diǎn) 頁(yè)面屬性的設(shè)置,網(wǎng)頁(yè)中的基本術(shù)語(yǔ), URL：“統(tǒng)一資源定位符”。網(wǎng)絡(luò)上一個(gè)站點(diǎn)的完整地址 HTML（超文本標(biāo)記語(yǔ)言）：它是網(wǎng)頁(yè)的通用編輯語(yǔ)言，是純文本語(yǔ)言，用它編寫的網(wǎng)頁(yè)是標(biāo)準(zhǔn)的純文本文件，可以用任何文本編輯器編輯它。 無(wú)論用何種網(wǎng)頁(yè)集成軟件，最后形成頁(yè)面文檔文件都是.htm(html)文件。 TCP/IP協(xié)議：應(yīng)用廣泛的一種網(wǎng)絡(luò)數(shù)據(jù)傳輸協(xié)議，是為網(wǎng)絡(luò)數(shù)據(jù)交換而 制定

2、的規(guī)則、約定與標(biāo)準(zhǔn)。,網(wǎng)頁(yè)中的基本術(shù)語(yǔ), Web節(jié)點(diǎn)：intenet 上一個(gè)站點(diǎn) 主頁(yè)（hompage）：Web節(jié)點(diǎn)的起始頁(yè)。擁有一個(gè)被稱為URL的唯一地址。 超級(jí)鏈接：一個(gè)特定的元素，點(diǎn)擊它可以跳轉(zhuǎn)到不同的Web節(jié)點(diǎn)或同一Web節(jié)點(diǎn)的不同頁(yè)內(nèi)。,1.1 網(wǎng)頁(yè)設(shè)計(jì)概述,1.1.1,網(wǎng)頁(yè)設(shè)計(jì)理念,教學(xué)進(jìn)程,1.1 網(wǎng)頁(yè)設(shè)計(jì)概述,1.1.1,網(wǎng)頁(yè)設(shè)計(jì)理念,Basic Concept,教學(xué)進(jìn)程,1.1.2,網(wǎng)頁(yè)設(shè)計(jì)常用的工具,FrontPage是Microsoft公司推出的Web站點(diǎn)創(chuàng)建和管理工具，它是微軟Office成員之一。 FrontPage是一個(gè)所見(jiàn)即所得的“傻瓜”型網(wǎng)頁(yè)制作軟件，你可以在對(duì)

3、HTML毫不了解的情況下輕松地制作出自己的網(wǎng)頁(yè)來(lái)，你需要做的只是用鼠標(biāo)以及鍵盤的簡(jiǎn)單操作。,教學(xué)進(jìn)程,Dreamweaver是Macromedia公司推出的，是目前國(guó)內(nèi)公認(rèn)的最佳的網(wǎng)頁(yè)制作工具，最近版本為Dreamweaver 8,FrontPage,Dreamweaver,1.2 網(wǎng)站的策劃和設(shè)計(jì),教學(xué)進(jìn)程,1.2.1 網(wǎng)站的風(fēng)格, 版面布局, 瀏覽方式,網(wǎng)站標(biāo)志, 色彩：背景、前景及主體色塊,交互性,文字（字 體及內(nèi)容）,1.2 網(wǎng)站的策劃和設(shè)計(jì),教學(xué)進(jìn)程,1.2.1 網(wǎng)站的風(fēng)格,網(wǎng)站欣賞,1.2 網(wǎng)站的策劃和設(shè)計(jì),教學(xué)進(jìn)程,1.2.1 網(wǎng)站的風(fēng)格,網(wǎng)站欣賞,1.2 網(wǎng)站的策劃和設(shè)計(jì),教學(xué)

4、進(jìn)程,1.2.1 網(wǎng)站的風(fēng)格,網(wǎng)站欣賞,1.2 網(wǎng)站的策劃和設(shè)計(jì),教學(xué)進(jìn)程,1.2.1 網(wǎng)站的風(fēng)格,網(wǎng)站欣賞,1.2 網(wǎng)站的策劃和設(shè)計(jì),教學(xué)進(jìn)程,1.2.1 網(wǎng)站的風(fēng)格,網(wǎng)站欣賞,1.2 網(wǎng)站的策劃和設(shè)計(jì),教學(xué)進(jìn)程,1.2.1 網(wǎng)站的風(fēng)格, 網(wǎng)站標(biāo)志,網(wǎng)站標(biāo)志(logo)要放在醒目位置，如左上角，而且要保持不變。, 網(wǎng)站標(biāo)語(yǔ),最好能夠有一句反映網(wǎng)站精髓的標(biāo)語(yǔ)，并在所有主欄目頁(yè)面顯示。, 導(dǎo)航部分,導(dǎo)航部分(主欄目）應(yīng)該放在每一張網(wǎng)頁(yè)的相同位置，便于訪問(wèn)者瀏覽網(wǎng)站的全部?jī)?nèi)容。,1.2.1 網(wǎng)站的風(fēng)格,教學(xué)進(jìn)程,一、網(wǎng)頁(yè)內(nèi)字體的設(shè)置 不要使用三種以上的字體 不用太大的字 不用閃爍的字 標(biāo)題字號(hào)應(yīng)大

5、于正文。 使用特殊字體時(shí)做成圖片 二、網(wǎng)頁(yè)中表格的使用 整個(gè)頁(yè)面不要都套在一個(gè)表格里，盡量拆成多個(gè)表格 單一表格結(jié)構(gòu)盡量整齊 表嵌套層次應(yīng)盡量少。,1.2.2 網(wǎng)頁(yè)的色彩搭配,教學(xué)進(jìn)程,1、非彩色的搭配：黑白配。 灰色是萬(wàn)能色，可以幫助兩種對(duì)立的色彩和諧過(guò)渡。 2、彩色的搭配 同種顏色不同透明度或飽和度 一種色彩配其對(duì)比色 同一色系 黑或白配一種其它色 （三種色以內(nèi)，背景與前景的對(duì)比度要大）,1.2.3 設(shè)計(jì)草圖,教學(xué)進(jìn)程,根據(jù)實(shí)際需要，畫出網(wǎng)站的設(shè)計(jì)草圖,建立良好的目錄結(jié)構(gòu)，對(duì)站點(diǎn)上傳、維護(hù)及內(nèi)容的擴(kuò)充、移植有重要影響 主頁(yè)內(nèi)容放于根目錄下 按欄目建立子目錄（無(wú)需更新的欄目放在同一目錄下）以存放相關(guān)頁(yè)面素材 目錄層次不要太深（4層以內(nèi)）,教學(xué)進(jìn)程,習(xí)題與上機(jī)操作,1. 問(wèn)答題,在