《網(wǎng)頁(yè)設(shè)計(jì)筆記》目錄《網(wǎng)頁(yè)設(shè)計(jì)筆記》 .................................................................................

《網(wǎng)頁(yè)設(shè)計(jì)筆記》

目錄

《網(wǎng)頁(yè)設(shè)計(jì)筆記》 .......................................................................................................................... 1

目錄 .................................................................................................................................................. 1

第一章：網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)........................................................................................................... 2

1、Internet 是網(wǎng)絡(luò)集合、網(wǎng)絡(luò)是計(jì)算機(jī)和相關(guān)設(shè)備集合 . ................................................... 2

2、Internet 的發(fā)展 .................................................................................................................. 2

3、Web 網(wǎng)頁(yè) ............................................................................................................................ 2

4、URL （Uniform Resource Locator）統(tǒng)一資源定位符 . ..................................................... 2

5、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè) . ............................................................................................................ 3

6、靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè) . ........................................................................................................ 3

7、域名和IP 地址 ................................................................................................................... 4

8、網(wǎng)站制作工具 . .................................................................................................................... 4

9、網(wǎng)站開(kāi)發(fā)步驟 . .................................................................................................................... 5

10、HTML ............................................................................................................................... 5

11、網(wǎng)站發(fā)布 . .......................................................................................................................... 6

第二章 站點(diǎn)的創(chuàng)建與管理 . ............................................................................................................ 8

1、網(wǎng)頁(yè)開(kāi)發(fā)工具：Dreamweaver .......................................................................................... 8

2、站點(diǎn)的建立 . ........................................................................................................................ 8

1、新建頁(yè)面”求職簡(jiǎn)歷.html” . .............................................................................................. 10

2、制作頁(yè)面 . .......................................................................................................................... 10

第四章 使用多媒體 ...................................................................................................................... 12

1、使用圖像 . .......................................................................................................................... 12

(1)圖像有兩種類(lèi)型：位圖，矢量 ................................................................................ 12

(2) 位圖的三種樣式 ...................................................................................................... 12

（3）實(shí)現(xiàn)“映射圖像” . .............................................................................................. 13

(4)實(shí)現(xiàn)“輪換圖像” .................................................................................................... 13

(5)實(shí)現(xiàn)“Flash 相冊(cè)”(不能使用Gif 格式) . ................................................................ 14

(6)、常用圖像濾鏡 ........................................................................................................ 15

第一章：網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)

1、Internet 是網(wǎng)絡(luò)集合、網(wǎng)絡(luò)是計(jì)算機(jī)和相關(guān)設(shè)備集合 聯(lián)網(wǎng)的設(shè)備：交換機(jī)、路由器、防火墻、雙絞線、光纖 連網(wǎng)的目的：資源共享…

協(xié)議(Protocol)：聯(lián)網(wǎng)設(shè)備的約定

TCP ，IP ，HTTP

2、Internet 的發(fā)展

1969 計(jì)算機(jī)的產(chǎn)生 ENIAC 1946

ARPAnet(阿帕網(wǎng))

3、Web 網(wǎng)頁(yè)

Network 網(wǎng)絡(luò)

服務(wù)器(Server)，客戶機(jī)(Client)，瀏覽器(Browser) 瀏覽器的作用：把收到的HTML 轉(zhuǎn)換成網(wǎng)頁(yè)效果 常用的瀏覽器：Internet Explorer、FireFox(火孤)

360安全瀏覽器、谷歌、TheWorld 。 擴(kuò)展：目前軟件開(kāi)發(fā)模式

(1) 單機(jī)模式

(2) C/S（開(kāi)發(fā)兩端：服務(wù)器端程序，客戶機(jī)端程序）

(3) B/S（網(wǎng)站模式，只開(kāi)發(fā)服務(wù)器端）

4、URL （Uniform Resource Locator）統(tǒng)一資源定位符 資源：網(wǎng)頁(yè)、圖片、視頻、音頻等網(wǎng)頁(yè)素材

作用：統(tǒng)一的地址標(biāo)識(shí)方法

格式：協(xié)議名 :// 主機(jī)名(域名或IP)[/文件夾名][/文件名] 課后作業(yè)：巴科斯范式

常用協(xié)議：

HTTP(H yper T ext T ransmission/Transfer/Transport P rotocol) FTP(File Transfer Protocol)文件傳輸協(xié)議，上傳下載 MailTo 發(fā)郵件

mailto 后一般不用// 格式mailto:郵箱地址

擴(kuò)展：Outlook 和Foxmail 兩個(gè)郵件管理軟件

5、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)

網(wǎng)頁(yè)：構(gòu)建WWW 的基本單位，是各種網(wǎng)頁(yè)元素(如文字、圖片、聲音、視頻等) 的集合

網(wǎng)站：一組有邏輯關(guān)系的網(wǎng)頁(yè)，通過(guò)超鏈接互聯(lián)起來(lái)集合 主頁(yè)：網(wǎng)站的第一個(gè)網(wǎng)頁(yè)，首頁(yè)。一般以Index(Default)作為文件名。如index.html ，index.htm ，

index. asp ，index. php ，index. jsp ，index. aspx

6、靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)

靜態(tài)網(wǎng)頁(yè)：內(nèi)容是固定的，一般用HTML 語(yǔ)言編寫(xiě) HTML(HyperText Markup Language)

網(wǎng)頁(yè)文件后綴.html ，.htm

動(dòng)態(tài)網(wǎng)頁(yè)：服務(wù)器在接收到用戶請(qǐng)求時(shí)，的頁(yè)面。網(wǎng)頁(yè)內(nèi)容會(huì)變化。

常用的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)：ASP ，JSP ，PHP ，ASP.net

7、域名和IP 地址

IP 地址：在網(wǎng)絡(luò)上設(shè)備（計(jì)算機(jī)，路由器，防火墻）的地址表示方式

目前常用的IP(Internet Protocol)是IPv4，用32位二進(jìn)制表示。

10100001 11110001 10010001 11110011

二進(jìn)制表示適合計(jì)算機(jī)處理，但人不好用，所以表示為點(diǎn)分十進(jìn)制形式，把32位分成4組，每組轉(zhuǎn)化為十進(jìn)制方式表示。

擴(kuò)展：打開(kāi)計(jì)算器 Win R→calc

161.241.145.243

點(diǎn)分十進(jìn)制形式但不好記，沒(méi)有意義，所以產(chǎn)生了域名 如:www.baidu.com,www.bsnc.cn

查看本機(jī)IP 地址的方式：

(1) 雙擊任務(wù)欄右下角“本地連接圖標(biāo)”→支持

(2) Win R→cmd(全屏Alt Enter)→ip config

Exit 退出

查看已知域名的IP 地址

(1) Win R→cmd →Ping <域名|IP>

如查看百度的IP ： ping

8、網(wǎng)站制作工具

(1)網(wǎng)頁(yè)編輯工具

a) 標(biāo)記型：記事本，Ultraedit (完全寫(xiě)代碼)

b) 所見(jiàn)即所得型（What You See is What you Get ）：Dreamweaver(可視化類(lèi)型)

(2)圖像處理：Photoshop ，F(xiàn)ireworks

(3)動(dòng)畫(huà)制作：Flash

(4)視頻、音頻制作：會(huì)聲會(huì)影，Premiere

9、網(wǎng)站開(kāi)發(fā)步驟

(1)規(guī)劃：需求→需求分析（用戶如果描述，可以讓對(duì)方提出參考網(wǎng)站）→功能定義和界面定義→簽訂合同 規(guī)劃階段需要開(kāi)發(fā)人員和客戶進(jìn)行詳細(xì)的溝通

(2)設(shè)計(jì)：對(duì)功能和界面的細(xì)化，也需要征求客戶意見(jiàn)。

(3)開(kāi)發(fā)：功能和界面實(shí)現(xiàn)

(4)發(fā)布：申請(qǐng)域名和空間→上傳

(5)維護(hù)：培訓(xùn)管理員來(lái)做，內(nèi)容更新，功能擴(kuò)展

10、HTML

作業(yè)：P4,8,9,12

例1：建文件夾→顯示后綴→新建文本文件，改名為ch1_01.htm→用記事本打開(kāi)→按P4頁(yè)錄入，除漢字外，其它為英文狀態(tài)

Preformated 預(yù)格式化
              ,
塊
 Unorder List無(wú)序列表
 Order List有序列表
List Item 列表元素
11、網(wǎng)站發(fā)布
(網(wǎng)站已做好，并測(cè)試完成)
(1)申請(qǐng)域名和空間
a. 以萬(wàn)網(wǎng)為例（www.net.cn ）-->查詢想要的域名是否已被注冊(cè)-->注冊(cè)-->得到一個(gè)域名管理帳號(hào)
b. 再申請(qǐng)空間 得到一個(gè)空間的FTP 管理權(quán)限
（地址，用戶名，密碼）
c. 把域名和空間進(jìn)行綁定
使用免費(fèi)的（）
缺點(diǎn)：域名不可選，服務(wù)不保障
記錄注冊(cè)信息：
網(wǎng)址
用戶名：bsxy10jj
密碼：123456
記錄域名和空間信息：
域名：33224.u5u5.info
綁定：dsj.u5u5.info
              ,
FTP 地址：174.128.236.182       FTP 用戶名：33224       FTP 密碼：123456
擴(kuò)展：查看IP 地址所屬的區(qū)域     www.ip138.com
(2)FTP的使用
a. 把主頁(yè)改名：index.htm    b. 連接FTP
A. 用IE 連
B. 用FTP 工具連
格式：   ftp://地址
c. 上傳網(wǎng)站文件(復(fù)制 粘貼)    d. 網(wǎng)上測(cè)試
作業(yè)：完成免費(fèi)空間的申請(qǐng)
              ,
第二章 站點(diǎn)的創(chuàng)建與管理
1、網(wǎng)頁(yè)開(kāi)發(fā)工具：Dreamweaver
公司：早期Macromedia 后來(lái)Adode
最新版：Adobe Dreamweaver CS4
常用的：Macromedia Dreamweaver 8 (建議)
網(wǎng)頁(yè)三劍客(Macromedia)：Dreamweaver ，F(xiàn)ireworks ，F(xiàn)lash    菜單欄的快捷鍵用Alt 字母
面板
2、站點(diǎn)的建立
(1)為什么要建站點(diǎn)
a. 便于網(wǎng)站素材的管理
b. 便于網(wǎng)站的批量更新
c. 便于網(wǎng)站的發(fā)布與維護(hù)
(2)怎樣建站點(diǎn)
a. 規(guī)劃網(wǎng)站存儲(chǔ)位置(建議在U 盤(pán)上)
如：G:web
b. 在DW 中創(chuàng)建
站點(diǎn)→新建站點(diǎn)→名字用于標(biāo)識(shí)，URL 可以空→否→  默認(rèn)，位置指向規(guī)劃好的文件夾→無(wú)→完成
(3)創(chuàng)建網(wǎng)頁(yè)
文件→新建→基本頁(yè)→HTML ，
立即保存（防止掉電丟失，方便調(diào)用其它素材）
              ,
文件名上有*號(hào)，表示修改過(guò)沒(méi)存盤(pán)
建議網(wǎng)頁(yè)名用英文字母，數(shù)字，不要有空格
擴(kuò)展：微軟編程語(yǔ)言
1998年左右：
Visual C      (VC)
Visual Studio 6.0   Visual Basic    (VB)
Visual FoxPro   (VFP)程序 數(shù)據(jù)庫(kù) 后來(lái)：
Visual C   .Net
Visual Studio .Net Visual Basic .Net
Visual C#.Net  #(sharp)
單機(jī)→C/S→B/S（網(wǎng)站模式）
              ,
第三章 制作文本頁(yè)面
1、新建頁(yè)面”求職簡(jiǎn)歷.html ”
2、制作頁(yè)面
（1）修改標(biāo)題
（2）改背景(頁(yè)面屬性)
擴(kuò)展：三基色（RGB ）
（3）文字格式設(shè)置(文本菜單/屬性面板)
字體列表(如果沒(méi)有，用下一個(gè))
大?。簲?shù)值 單位（建議用像素）
相對(duì)大小
(4)插入日期時(shí)間(不是動(dòng)態(tài)的，是文件修改時(shí))      插入→日期
(5)插入水平線
插入→HTML →水平線
（6）插入表格
插入→表格
寬度：像素、百分比
固定大小的用像素，變動(dòng)的用百分比
(7)制作列表(無(wú)序，有序—多級(jí))
無(wú)序：輸入→選中→文本→列表→項(xiàng)目列表
有序—多級(jí)：全部錄入（不帶編號(hào)）→選中→文本→列表→編號(hào)列表→用Tab 分級(jí)(Shift)