第一篇：中文版Dreamwever 8網(wǎng)頁(yè)制作基礎(chǔ)與實(shí)訓(xùn)教學(xué)計(jì)劃 2
《網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)大綱
——郭啟婷
學(xué)
時(shí)：45學(xué)時(shí) 適應(yīng)專業(yè)：高職計(jì)算機(jī)專業(yè)
一、課程的性質(zhì)與任務(wù)
課程的性質(zhì)：本課程是為培養(yǎng)高職計(jì)算機(jī)專業(yè)學(xué)生對(duì)網(wǎng)頁(yè)設(shè)計(jì)與制作的基礎(chǔ)知識(shí)而設(shè)置的一門專業(yè)必修實(shí)訓(xùn)課程。由于網(wǎng)頁(yè)設(shè)計(jì)與制作所涉及的軟件和相關(guān)知識(shí)十分廣泛，針對(duì)計(jì)算機(jī)專業(yè)學(xué)生的專業(yè)方向和專業(yè)基礎(chǔ)，本課程側(cè)重于網(wǎng)頁(yè)視覺效果和版式布局的設(shè)計(jì)與制作，對(duì)大中型網(wǎng)站制作中的所涉及到的動(dòng)態(tài)程序編寫等較復(fù)雜技術(shù)手段作了回避或僅作簡(jiǎn)單介紹。
課程的任務(wù)：通過本課程學(xué)習(xí)，使學(xué)生了解網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)、基本流程，并能熟練使用Macromedia Dreamweaver進(jìn)行個(gè)人網(wǎng)站和中小型商業(yè)網(wǎng)站的設(shè)計(jì)、制作與維護(hù)更新，為培養(yǎng)高級(jí)網(wǎng)頁(yè)設(shè)計(jì)專業(yè)人才打下堅(jiān)實(shí)的基礎(chǔ)。
前導(dǎo)課程：電腦操作基本知識(shí)，Photoshop、Flash，圖形設(shè)計(jì)、編排設(shè)計(jì)與制作。后續(xù)課程：所有計(jì)算機(jī)設(shè)計(jì)課程，以及畢業(yè)設(shè)計(jì)。
二、教學(xué)基本要求
通過課程的教學(xué)，在理論知識(shí)教學(xué)和技能培養(yǎng)兩方面要求學(xué)生達(dá)到下列目標(biāo)。
（一）理論知識(shí)方面主要達(dá)到：
1．了解互聯(lián)網(wǎng)、網(wǎng)頁(yè)、網(wǎng)站、超級(jí)連接、HTML語言、FTP、HTTP等基礎(chǔ)網(wǎng)絡(luò)知識(shí)； 2．了解網(wǎng)站設(shè)計(jì)制作的常用工具與基本流程 3．了解html語言的一般規(guī)律
4．了解不同網(wǎng)站類型不同的設(shè)計(jì)與制作要求 5．了解網(wǎng)站的整體結(jié)構(gòu)規(guī)劃
（二）能力方面主要達(dá)到：
1． 熟練掌握Macromedia Dremweave的基本操作； 2． 掌握photoshop中網(wǎng)頁(yè)設(shè)計(jì)稿文件的切片與優(yōu)化輸出； 3． 掌握網(wǎng)頁(yè)圖像的優(yōu)化技巧；
4． 了解網(wǎng)站的測(cè)試、發(fā)布、推廣與維護(hù)；
三、教學(xué)條件
保障每個(gè)學(xué)生都能單獨(dú)使用一臺(tái)電腦，每臺(tái)電腦都配備Dreamweaver、photoshop等設(shè)計(jì)軟件。
四、教學(xué)內(nèi)容及課時(shí)安排：
第一章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)（4課時(shí)）
第一節(jié) 第二節(jié) 第三節(jié) 第四節(jié) 網(wǎng)頁(yè)設(shè)計(jì)概述
在DreamweaverCS3中建立站點(diǎn) 創(chuàng)建站立點(diǎn)地圖 設(shè)置Web服務(wù)器
第二章 網(wǎng)頁(yè)的編輯（4課時(shí)）
第一節(jié) 第二節(jié) 文本操作 圖像操作
第三章 網(wǎng)頁(yè)的布局（4課時(shí)）
第一節(jié) 第二節(jié) 第三節(jié) 表格
在布局模式下繪制布局表格 框架
第四章 超鏈接的創(chuàng)建與管理（4課時(shí)）
第一節(jié) 第二節(jié) 超鏈接和路徑概述 超鏈接的使用
第五章 CSS樣式表與行為（5課時(shí)）
第一節(jié) 第二節(jié) 使用CSS樣式表 行為及簡(jiǎn)單應(yīng)用
第六章
AP元素和時(shí)間軸（4課時(shí)）
第一節(jié)
使用AP元素 第三節(jié) AP元素時(shí)間軸配合使用的動(dòng)態(tài)效果
第七章
表單的使用
（6課時(shí)）
第一節(jié)
創(chuàng)建表單網(wǎng)頁(yè) 第二節(jié)
創(chuàng)建留言簿 第三節(jié)
驗(yàn)證表單內(nèi)容
第八章 圖像和動(dòng)畫的制作與優(yōu)化（4課時(shí)）
第一節(jié) 第二節(jié) 圖像的制作與優(yōu)化 動(dòng)畫的制制與優(yōu)化
第九章 網(wǎng)站文件的檢查與發(fā)布（2課時(shí)）
第一節(jié)
網(wǎng)站文件的檢查與測(cè)試
第二節(jié)
注冊(cè)域名、申請(qǐng)空間與網(wǎng)站發(fā)布
第十章
綜合訓(xùn)練（4課時(shí)）
第一節(jié)
網(wǎng)站的規(guī)化 第三節(jié) 網(wǎng)站的上傳發(fā)布、備案和維護(hù)
五、教法說明
1、本課程是一門專業(yè)技能訓(xùn)練課程，以學(xué)生的實(shí)踐操作為主，注重設(shè)計(jì)與制作能力的培養(yǎng)、經(jīng)驗(yàn)與技巧的積累。課程中引導(dǎo)學(xué)生在練習(xí)中解決具體的問題，使學(xué)生能靈活地、熟練地應(yīng)用所學(xué)的理論知識(shí)。
2、教學(xué)練習(xí)中，以優(yōu)秀實(shí)際案例為參照，增強(qiáng)教學(xué)的趣味性、實(shí)用性和針對(duì)性。
3、課程末要求設(shè)計(jì)制作一個(gè)完整的小型網(wǎng)站，并上傳、發(fā)布和推廣，以綜合運(yùn)用和鞏固所學(xué)知識(shí)，激發(fā)學(xué)生興趣，為將來的進(jìn)一步學(xué)習(xí)打下基礎(chǔ)。
六、考核方式與評(píng)分方法 1.考勤總成績(jī)的10％。
2.過程考核（理論知識(shí)、提問、查閱、課堂作業(yè)與課堂表現(xiàn)等）總成績(jī)的30％ 3.以綜合性設(shè)計(jì)作業(yè)的方式，設(shè)計(jì)制作完整的小型網(wǎng)站，占總成績(jī)的60％。
七、教材、參考材料及使用工具
教材：
1、《網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程》：肖麗（主編），北京師范大學(xué)出版社，2008年2月；
第二篇：網(wǎng)頁(yè)與制作實(shí)訓(xùn)論文范文
網(wǎng)頁(yè)實(shí)訓(xùn)報(bào)告
新聞系統(tǒng)前后臺(tái)交互
組長(zhǎng)：
組員：
指導(dǎo)老師：
實(shí)訓(xùn)目的………………………………………………………………………2 項(xiàng)目思路………………………………………………………………………3 項(xiàng)目準(zhǔn)備………………………………………………..…………………….4 前臺(tái)頁(yè)面主要代碼……………………………………………………………5 數(shù)據(jù)庫(kù)連接，確保登錄代碼…………………………………………………6 后臺(tái)頁(yè)面主要代碼…………………………………………….………………7 項(xiàng)目亮點(diǎn)………………………………………………………………….…..13 優(yōu)點(diǎn)和不足之處……………………………………………………………...13 實(shí)訓(xùn)總結(jié)…………………………………………………………………......14
實(shí)訓(xùn)報(bào)告
實(shí)訓(xùn)目的：
這次網(wǎng)頁(yè)與制作的實(shí)訓(xùn)是鍛煉我們實(shí)踐能力重要環(huán)節(jié)，是對(duì)我們實(shí)踐工作能力的具體訓(xùn)練和考察過程。隨著科學(xué)技術(shù)發(fā)展的日新月異，網(wǎng)頁(yè)設(shè)計(jì)制作已經(jīng)成為當(dāng)今計(jì)算機(jī)應(yīng)用中空前活躍的領(lǐng)域，在生活中可以說是無處不在。因此作為二十一世紀(jì)大學(xué)生來說掌握網(wǎng)頁(yè)設(shè)計(jì)制作的技術(shù)能力是十分重要的。
1.進(jìn)一步熟悉和掌握網(wǎng)站建設(shè)的基本流程和技術(shù)規(guī)范；
2.鞏固運(yùn)用sublime, Dreamweaver,PhotoShop網(wǎng)頁(yè)制作軟件制作網(wǎng)頁(yè) 3.鞏固運(yùn)用NatBeans,wampmanager動(dòng)態(tài)網(wǎng)頁(yè)制作軟件制作動(dòng)態(tài)網(wǎng)頁(yè)
4.用sublime,NetBeans,wampmanager三個(gè)軟件完成網(wǎng)站建設(shè)登錄前后臺(tái)任務(wù)的方法，能獨(dú)立設(shè)計(jì)一個(gè)內(nèi)容完整，圖文并茂，技術(shù)運(yùn)用得當(dāng)?shù)木W(wǎng)站；
5.具備獨(dú)立撰寫實(shí)訓(xùn)報(bào)告等科技文件的基本能力；
6.在網(wǎng)頁(yè)設(shè)計(jì)的實(shí)踐中培養(yǎng)分析問題，解決問題的能力，培養(yǎng)協(xié)作，交流的能力，培養(yǎng)創(chuàng)新和團(tuán)隊(duì)意識(shí)；
7.為今后從事網(wǎng)站開發(fā)，維護(hù)和管理奠定基礎(chǔ)。通過實(shí)訓(xùn)，掌握網(wǎng)頁(yè)設(shè)計(jì)系列軟件sublime, wampmanager軟件的使用方法，達(dá)到全面理解，運(yùn)用網(wǎng)頁(yè)制作的知識(shí)，并使之得以融會(huì)貫通，在掌握理論知識(shí)的基礎(chǔ)上再加以實(shí)踐，進(jìn)一步提高,加強(qiáng)設(shè)計(jì)，制作網(wǎng)站的綜合能力。
項(xiàng)目思路：
首先我們分為兩大塊，前臺(tái)頁(yè)面和后臺(tái)頁(yè)面。分別建文件夾web和admin。前臺(tái)：先利用我們學(xué)習(xí)的div+css布局方法+JavaScripte做好靜態(tài)頁(yè)面。接下來利用from表單+簡(jiǎn)單的CSS樣式做好登錄頁(yè)面。然后利用fromeset分幀做好后臺(tái)框架。框架左列表為后臺(tái)首頁(yè)，用戶列表，新增用戶，新聞列表，新增新聞。接下來要完成的就是在每個(gè)列表中實(shí)現(xiàn)頁(yè)面效果。點(diǎn)擊列表能夠出現(xiàn)每個(gè)列表的頁(yè)面。然而要實(shí)現(xiàn)這個(gè)效果是要先建數(shù)據(jù)庫(kù)，再在數(shù)據(jù)庫(kù)中建表，在表中插入我們要的數(shù)據(jù)。我們要建三張表，分別為admin，user，news。再就是連接數(shù)據(jù)庫(kù)。admin表是要通過數(shù)據(jù)庫(kù)連接在后臺(tái)實(shí)現(xiàn)管理員登錄頁(yè)面。news表是要通過數(shù)據(jù)庫(kù)連接實(shí)現(xiàn)新聞增加，修改，刪除。user表是要通過數(shù)據(jù)庫(kù)連接實(shí)現(xiàn)用戶信息，添加用戶顯示在后臺(tái)。
項(xiàng)目準(zhǔn)備：
news-info:
數(shù)據(jù)庫(kù)名
admin：
管理員登錄表名
user：
用戶注冊(cè)信息表名
news：
新聞信息表名
前臺(tái)（web）：
images：
js播放圖片；
img：
登錄頁(yè)面背景圖
ht.php：
前臺(tái)靜態(tài)頁(yè)面效果圖
Style：
前臺(tái)靜態(tài)頁(yè)面樣式
config.php：
連接數(shù)據(jù)庫(kù)
conn.php：
確保登錄成功
login.php：
登錄頁(yè)面
jQuery.js：
js代碼 后臺(tái)(admin):
登錄頁(yè)面(dl):
img:
背景圖 config.php
確保登錄成功 login.php
登錄頁(yè)面
admin：
conn.php
連接數(shù)據(jù)庫(kù)
htsy.php
后臺(tái)首頁(yè)
index.php
后臺(tái)界面
left.php
框架左列表選項(xiàng)
news.add.php
添加新聞
news-del.php
news-upd.php
news-list.php
zcye.php
zcye-del.php
zcye-list.php
zcye-upd.php
1.前臺(tái)頁(yè)面主要代碼：
刪除新聞 新聞修改 新聞列表
添加用戶
刪除用戶 用戶列表 修改用戶
2.登錄頁(yè)面代碼：
3.連接數(shù)據(jù)庫(kù)：
4.確保登錄：
5.后臺(tái)界面代碼：
6.框架左列表代碼：
7.后臺(tái)首頁(yè)：
8.新聞列表代碼：
9.添加新聞：
10.刪除新聞：
11.修改新聞：
12.用戶列表：
13.添加用戶：
14.修改用戶：
15.刪除用戶：
16.前臺(tái)顯示后臺(tái)數(shù)據(jù)代碼：
項(xiàng)目亮點(diǎn)：
運(yùn)用了兩次js代碼來實(shí)現(xiàn)效果，使頁(yè)面更加生動(dòng)。同時(shí)也運(yùn)用了驗(yàn)證碼等一些小亮點(diǎn)。
優(yōu)點(diǎn)：
思路清晰，充分增強(qiáng)了動(dòng)手能力，創(chuàng)作能力，更加懂得團(tuán)隊(duì)協(xié)作能力，對(duì)網(wǎng)頁(yè)設(shè)計(jì)軟件DreamWeaver,Sublime,WampServer,NetBeans,PhotoShop,JavaScript的強(qiáng)大運(yùn)用有了很大提高。也大大提高了自己分析問題，解決問題的能力。
不足之處：
充分體現(xiàn)出老師教的知識(shí)并沒有完全掌握，也是根本沒有真正理解老師上課教的內(nèi)容。尤其是對(duì)PHP，數(shù)據(jù)庫(kù)知識(shí)了解，懂的太少，以至于在做項(xiàng)目后臺(tái)過程中遇到很多問題，大大影響了整個(gè)項(xiàng)目的進(jìn)度。
總結(jié)：
通過本次實(shí)訓(xùn)我們基本掌握了制作簡(jiǎn)單網(wǎng)頁(yè)，完善登陸前后臺(tái)，相互連接的過程?；臼煜ち烁鞣N軟件的綜合使用方法。實(shí)踐出真理，實(shí)訓(xùn)的日子快要結(jié)束，感覺還是學(xué)到了很多，從理論和操作中融合了我們平時(shí)所學(xué)的知識(shí)，也為我們今后的學(xué)習(xí)和工作鋪墊了精彩的一幕。因此，我們堅(jiān)信，只要用心去學(xué)，沒有什么是學(xué)不會(huì)的。希望今后的我們更加努力的開拓我們的極限，我們也要更加努力。通過這兩周的學(xué)習(xí)，我們也更加明白平時(shí)學(xué)習(xí)的重要性，平時(shí)認(rèn)真學(xué)習(xí)的同學(xué)，經(jīng)常做網(wǎng)頁(yè)項(xiàng)目的同學(xué)，明顯做整個(gè)項(xiàng)目很輕松，整個(gè)項(xiàng)目做得也非常好。所以，我們平時(shí)的學(xué)習(xí)是不能馬虎的，一分耕耘一分收獲。當(dāng)然，在制作過程中也出現(xiàn)了很多問題，我們小組先一起討論，一起查找問題，研究問題，最后也能發(fā)現(xiàn)出問題我們會(huì)一起解決。我明白這就是團(tuán)隊(duì)的力量，不可小覷。當(dāng)然也有解決不了的問題，我們會(huì)請(qǐng)教他人大家互相幫助，共同進(jìn)步。有時(shí)候解決不了問題的時(shí)候，一次又一次在修改代碼，運(yùn)行不出來時(shí)，我們會(huì)很著急失去耐心，也想放棄。可還是咬牙堅(jiān)持下來了，堅(jiān)持就是勝利。做項(xiàng)目真的需要更多的耐心和能力。我們還有很多能力需要提高，還有很多不足需要在今后生活中慢慢改進(jìn)。這次實(shí)訓(xùn)也收獲了很多，和我們的組員學(xué)到了很多，我們一起學(xué)習(xí)，一起進(jìn)步。最大的收獲還是覺得老師講課很幽默，知識(shí)點(diǎn)講解的很透徹，讓我們能很容易去理解。遇到不理解的問題老師會(huì)很耐心的跟我們講解，還用起了畫圖方法，真的很形象生動(dòng)。這次實(shí)訓(xùn)真的很充實(shí)。在這，我表示深深的感謝！感謝我的小組成員，感謝幫助過我的同學(xué)，感謝我們的老師！
第三篇：網(wǎng)頁(yè)制作實(shí)訓(xùn)報(bào)告
《網(wǎng)站設(shè)計(jì)與制作》實(shí)訓(xùn)報(bào)告
X學(xué)院XX班XXX號(hào)
一．實(shí)訓(xùn)時(shí)間：
2010年6月7日到2010年6月13日
二．實(shí)訓(xùn)地點(diǎn)：
XXX學(xué)院XXX班級(jí)
三．實(shí)訓(xùn)組員：
XXX、XXX
四．實(shí)訓(xùn)目標(biāo)：
運(yùn)用網(wǎng)頁(yè)設(shè)計(jì)方法，設(shè)計(jì)一個(gè)網(wǎng)站，提高綜合應(yīng)用所學(xué)知識(shí)的能力，積累Web網(wǎng)站的制作經(jīng)驗(yàn)，培養(yǎng)團(tuán)隊(duì)協(xié)作精神。本次實(shí)訓(xùn)的具體目標(biāo)為:了解網(wǎng)站制作的一般流程;熟練使用網(wǎng)頁(yè)制作工具Dreamweaver、Flash、Fireworks設(shè)計(jì)網(wǎng)頁(yè);能靈活運(yùn)用表格、層和框架布局頁(yè)面;熟練使用CSS樣式表美化網(wǎng)頁(yè);正確使用JavaScript添加網(wǎng)頁(yè)特效;靈活使用模板和庫(kù)來制作網(wǎng)頁(yè)；學(xué)會(huì)申請(qǐng)免費(fèi)域名空間和正確上傳站點(diǎn)的方法。
五．實(shí)訓(xùn)策劃：
這一周，我們要進(jìn)行《網(wǎng)站設(shè)計(jì)與制作》實(shí)訓(xùn)，我們認(rèn)為做網(wǎng)站前最主要的是確定主題、框架和標(biāo)題欄的設(shè)計(jì)。因此我們相互討論之后，確定制作以“婚紗”為主題的“喜多坊時(shí)尚婚紗網(wǎng)”。在之后的資料收集和網(wǎng)頁(yè)的框架的建設(shè)中，我們發(fā)現(xiàn)了許多問題，某些關(guān)鍵點(diǎn)無法做出心中的效果，這讓我們有些遺憾。通過自身及組員的共同探索，我們已盡權(quán)利將以下是我們的策劃內(nèi)容：
1.確定主題。制作網(wǎng)頁(yè),首先是確定主題，冬天很冷,卻冷得很幸福，剛剛過去的圣誕的熱鬧勁還在心頭。于是我們從幸福出發(fā)，想到了結(jié)婚-婚紗，建立一個(gè)簡(jiǎn)單的介紹婚紗的網(wǎng)站并取名喜多坊時(shí)尚時(shí)尚婚紗,專業(yè)介紹一些喜多坊婚紗的特色等。我們本次間的網(wǎng)站基本以粉紅為基點(diǎn)，粉紅是可愛清純的顏色，粉紅代表著幸福溫馨，所以本站以粉紅為風(fēng)格，讓整個(gè)網(wǎng)站充滿愛的力量。
2.設(shè)計(jì)主頁(yè)。主頁(yè)的設(shè)計(jì)是整個(gè)網(wǎng)站的靈魂，構(gòu)思導(dǎo)航欄的分類，然后是整體規(guī)劃，每一版塊都有其個(gè)性的色彩，清晰明了，便于閱讀瀏覽，我們構(gòu)思大致
分幾部分，首頁(yè)，關(guān)于我們，婚紗禮服，量體裁衣，婚紗選購(gòu)，公司門市，與我聯(lián)系，在線論壇8大板塊，每一板塊又分幾小部分，內(nèi)容比較充分，多樣。確定導(dǎo)航欄的各個(gè)分類標(biāo)題之后對(duì)于建立二級(jí)子網(wǎng)尤為重要，我們運(yùn)用Photoshop CS3技術(shù)來設(shè)計(jì)出導(dǎo)航欄，制作切片，建立導(dǎo)航欄，將整體的主頁(yè)效果建立起來。
3.資料的搜集。主頁(yè)的導(dǎo)航欄設(shè)計(jì)好后，接下來就是對(duì)主頁(yè)導(dǎo)航欄的各個(gè)內(nèi)容進(jìn)行資料的收集，我們采用大量的資料收集再對(duì)資料進(jìn)行塞選p圖，得到最適合導(dǎo)航欄內(nèi)容的資料。素材的選擇，要符合網(wǎng)站的主題，圖片的大小要符合模板的輪廓，我們將不符合模板的用Photoshop處理編輯，然后放入站點(diǎn)底下，進(jìn)行圖文的鏈接和排版。
4.各個(gè)子網(wǎng)頁(yè)的建立。我們?cè)O(shè)計(jì)好模板后只要在可編輯區(qū)依次編輯所需資料就可，運(yùn)用模板建立子網(wǎng)頁(yè)少了很多工序，為我們節(jié)省大量的時(shí)間。盡管我們建立了模板，但我們?cè)诮⒆泳W(wǎng)時(shí)很小心，因?yàn)橐粡垐D片的大小插入就有可能破壞整個(gè)模板的結(jié)構(gòu)尤其在使用表格時(shí)，因此我們對(duì)所插入的圖片和表格都得進(jìn)行測(cè)量，做到不影響網(wǎng)站整體的美觀。
5.實(shí)現(xiàn)網(wǎng)頁(yè)間的鏈接。做好個(gè)格子網(wǎng)和首頁(yè)后，接下來就是通過模板的鏈接，將整個(gè)網(wǎng)站中的網(wǎng)頁(yè)鏈接起來，過程其實(shí)很簡(jiǎn)單，主要是把要鏈接的文字和圖標(biāo)選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網(wǎng)頁(yè)單擊確定便可以了。做好這一步后，網(wǎng)站基本算是建好了。
6.向靜態(tài)網(wǎng)頁(yè)插入動(dòng)態(tài)效果。在基本建好網(wǎng)頁(yè)中的插入層和時(shí)間軸，制作其動(dòng)態(tài)效果，讓整個(gè)網(wǎng)頁(yè)充滿生機(jī)。我們?cè)诰W(wǎng)上進(jìn)行flash素材的收集，通過Flash CS3設(shè)計(jì)出主題下的風(fēng)格動(dòng)態(tài)效果。然后插入到靜態(tài)網(wǎng)頁(yè)中，使網(wǎng)頁(yè)更加生動(dòng)形象。
六．實(shí)訓(xùn)心得：
通過這周的學(xué)習(xí)實(shí)踐，在老師的指導(dǎo)下以大量明晰的操作步驟和典型的應(yīng)用實(shí)例，使我們真正對(duì)所學(xué)的軟件融會(huì)貫通。我們結(jié)合年輕人心理制作了時(shí)尚婚紗網(wǎng)站，作為實(shí)訓(xùn)的成果。其內(nèi)容是多樣化的，制作網(wǎng)頁(yè)用的軟件是Deamweaver CS3軟件。它提供了網(wǎng)頁(yè)和表單的動(dòng)態(tài)生成到網(wǎng)站的解決方案。主圖是一個(gè)網(wǎng)頁(yè)的門面，它能體現(xiàn)出這個(gè)網(wǎng)頁(yè)的整體風(fēng)格。
制作網(wǎng)頁(yè),首先是確定主題,經(jīng)過再三考慮,就做了個(gè)關(guān)于婚紗的網(wǎng)站?？紤]到,現(xiàn)在城市普遍幸福感不高，加上寒冬，于是以幸福為論點(diǎn)擴(kuò)展想到了結(jié)婚，想到了婚紗，想到了未來的美好城市生活，城市讓生活更美好，結(jié)婚讓生活更完整婚紗讓生活更多姿！想到這些，我們最后決定建立一個(gè)簡(jiǎn)單的介紹都市婚紗的網(wǎng)站,讓這個(gè)冬天不再寒冷，讓我們回憶起那些幸福的日子。于是網(wǎng)站主題確立。
然后是整體規(guī)劃，每一版塊都有其個(gè)性的色彩，清晰明了，便于閱讀瀏覽，大致分幾部分，首頁(yè)，關(guān)于我們，婚紗禮服，量體裁衣，婚紗選購(gòu)，公司門市，與我聯(lián)系，在線論壇，每一部分又分幾小部分，內(nèi)容比較充分，多樣。
再后是收集資料與素材，大量瀏覽相關(guān)網(wǎng)站，收集關(guān)于婚紗的圖片，進(jìn)行Photoshop CS3圖片處理和排版，插入好的文章和圖片等，還有參考一些好的網(wǎng)站的布局，特色，顏色搭配，背景圖等。
再后是設(shè)計(jì)網(wǎng)頁(yè)圖片，用flash制作動(dòng)畫，用Photoshop制作靜態(tài)圖片。再后是建立站點(diǎn)，和制作網(wǎng)頁(yè)了，使用dreamweaver制作。
首頁(yè)內(nèi)容精彩豐富，首頁(yè)主要是導(dǎo)航作用。首頁(yè)制作時(shí)，時(shí)刻考慮著網(wǎng)頁(yè)的基本原則：統(tǒng)一，連貫，分割，對(duì)比及和諧的原則，內(nèi)容統(tǒng)一，都是為了主題服務(wù)，一個(gè)網(wǎng)站強(qiáng)調(diào)的就是一個(gè)整體，只有圍繞一個(gè)統(tǒng)一的目標(biāo)所做的設(shè)計(jì)才是成功的；連貫，頁(yè)面之間關(guān)系連貫，統(tǒng)成一體；每版內(nèi)容都自成一體，顏色各異，便于瀏覽；整個(gè)網(wǎng)頁(yè)有動(dòng)有靜，顏色不同，形成對(duì)比，不呆板，富有生氣；顏色各異，但又不同之中又相同，渾然一體。
簡(jiǎn)潔實(shí)用: 這是非常重要的，網(wǎng)絡(luò)特殊環(huán)境下，盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的，所以要去掉所有的冗余的東西。使用方便:同第一個(gè)是相一致的，滿足使用者的要求，網(wǎng)頁(yè)做得越適合使用，就越顯示出其功能美；頁(yè)面用色協(xié)調(diào)，布局符合形式美的要求: 布局有條理，充分利用美的形式，是網(wǎng)頁(yè)富有可欣賞性，提高檔次。當(dāng)然雅俗共賞是人人都追求的。
利用我們所學(xué)的模板設(shè)計(jì)，制作更完美的頁(yè)面。將動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)結(jié)合起來
再后，調(diào)試過程，好多次本來在Deamweaver CS3里好好的，把字調(diào)的好好的，位置很對(duì)，可在瀏覽器里御覽就出毛病了，不是靠上了，就是靠下了，經(jīng)過再三調(diào)試，整理，加了好多表格，終于滿意了。
通過溫本周的實(shí)訓(xùn)，發(fā)現(xiàn)自己還有很多的不足?？蚣艿膽?yīng)用很難把握，切片也很難合理切割，當(dāng)插入圖片的時(shí)候把原有的模板給撐破了，精確定位很重要。
因?yàn)閷W(xué)藝不精，所以不會(huì)網(wǎng)頁(yè)的代碼設(shè)計(jì)，只能通過網(wǎng)絡(luò)三劍客綜合使用。不過也實(shí)踐中也學(xué)到了很多知識(shí)，表格的嵌套是非常重要的，CSS樣式的應(yīng)用也很便捷。還有一些行為中的效果也是蠻不錯(cuò)的。所以這次實(shí)訓(xùn)還是很有意義的。
第四篇：網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)報(bào)告
《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程設(shè)計(jì)報(bào)告書
設(shè)計(jì)題目：起止日期： 工作室或公司網(wǎng)站設(shè)計(jì)
2013.12.23-2013.12.27
目錄
一、關(guān)于網(wǎng)站 ···························· 3
1、網(wǎng)站的主題 ·························· 3 2.網(wǎng)站材料 ··························· 4
二、網(wǎng)站的規(guī)劃設(shè)計(jì) ························· 5 1.網(wǎng)站的功能定位 ························2.站點(diǎn)的內(nèi)容 ··························3.站點(diǎn)的風(fēng)格 ··························4.網(wǎng)站功能模塊圖 ························三．網(wǎng)站技術(shù)解決方案 ························
1、網(wǎng)站的制作工具 ························
2、所用技術(shù) ···························四．網(wǎng)頁(yè)介紹 ····························
1、制作網(wǎng)站的網(wǎng)頁(yè) ························2.第二層展示 ··························3.動(dòng)漫排行榜展示 ························4.第三層展示 ··························5.關(guān)于短片的插入： ·······················五.關(guān)于我們： ···························六．實(shí)訓(xùn)總結(jié)： ··························· 2 5 5 6 6 7 7 8 9
13 14 14
一、關(guān)于網(wǎng)站
1、網(wǎng)站的主題
我的網(wǎng)站的主旨在于從各個(gè)方面全面的介紹動(dòng)漫，展示動(dòng)漫產(chǎn)品以及漫畫，包括有動(dòng)漫排行榜，小短片，另外，網(wǎng)站里還有漫畫，以及周邊產(chǎn)品。建立一個(gè)展示動(dòng)漫的平臺(tái)。同時(shí)，網(wǎng)站里的每一個(gè)網(wǎng)頁(yè)都有統(tǒng)一的風(fēng)格，每一個(gè)網(wǎng)頁(yè)的主題都是圖片加上文字介紹，用以展示自己性格的效果。最重要的是做出自己的風(fēng)格，給瀏覽者好的欣賞感受。
動(dòng)漫，是動(dòng)畫和漫畫的合稱與縮寫，取這兩個(gè)詞的第一個(gè)字合二為一稱之為“動(dòng)漫”。
現(xiàn)可考證，該詞語出處為1993年創(chuàng)辦的動(dòng)漫出版同業(yè)協(xié)進(jìn)會(huì)與1998年創(chuàng)刊的動(dòng)漫資訊類類月刊《動(dòng)漫時(shí)代（Anime Comic Time）》，后經(jīng)由漫友雜志傳開，因概括性強(qiáng)在大陸地區(qū)的使用開始普及起來。在中國(guó)以外，并沒有此種說法。國(guó)外習(xí)慣性將動(dòng)畫（anime）、漫畫（comic）、游戲（game）三者合稱作ACG，或加上輕小說（novel）合稱為ACGN。
由于漫畫本身的發(fā)展形成了現(xiàn)代故事漫畫的表現(xiàn)形式，將影視藝術(shù)融入漫畫之中，使得漫畫與動(dòng)畫更容易結(jié)合，影視藝術(shù)獨(dú)特的地方在于它能通過鏡頭的推拉搖移和片段剪輯的蒙太奇技巧來表達(dá)想法和感受。
漫畫正是吸收了影視藝術(shù)的這兩個(gè)特點(diǎn)。當(dāng)要講述的故事越發(fā)復(fù)雜、人物越發(fā)豐富的時(shí)候，用傳統(tǒng)單線式敘事的方法就越行不通，蒙太奇的介入就成為一種需要了； 當(dāng)漫畫家在傳統(tǒng)表現(xiàn)手段中無法找到更合適的抒發(fā)感情的方法的時(shí)候；當(dāng)讀者需要作品有更強(qiáng)的沖擊力和表現(xiàn)力的時(shí)候，各種鏡頭的靈活運(yùn)用就成為一種必需了。一部現(xiàn)代故事漫畫往往集遠(yuǎn)、中、近、特四種鏡頭于一身，漫畫家往往能熟練地運(yùn)用鏡頭的移動(dòng)和各種蒙太奇剪接，對(duì)故事特定部分的情緒和氛圍進(jìn)行渲染。這就是現(xiàn)代故事漫畫容易和動(dòng)畫結(jié)合的一個(gè)原因，因?yàn)樗焐拖駝?dòng)畫的分鏡頭劇本，讀者在看漫畫時(shí)仿佛就是在看一部電影。正是有著這樣的相似性，所以如今將動(dòng)畫和漫畫合稱為“動(dòng)漫”。
動(dòng)漫領(lǐng)域衍生出的許多術(shù)語均已經(jīng)被廣泛應(yīng)用，例如：正太，蘿莉，御姐，百合,BL等。
動(dòng)漫產(chǎn)業(yè)日益與游戲產(chǎn)業(yè)結(jié)合緊密，在日本已經(jīng)形成一個(gè)成熟的產(chǎn)業(yè)鏈，動(dòng)漫已經(jīng) 3 從單單的平面媒體和電視媒體擴(kuò)展到游戲，書籍，網(wǎng)絡(luò)，玩具等眾多領(lǐng)域。許多動(dòng)漫游戲應(yīng)運(yùn)而生，例如《死神bleach》PSP平臺(tái)的游戲，也有許多GALGAME被改編成動(dòng)漫作品。
Manga（まんが，manga）為日語“漫畫”的羅馬字注音。另外，英文詞cartoon的中文音譯“卡通”，也是漫畫與動(dòng)畫的合稱，但被用來特指美國(guó)動(dòng)畫。版面有限，相關(guān)詞條，詳見：“動(dòng)漫概論” 按類型分類：
情感；推理；動(dòng)作；戰(zhàn)爭(zhēng)；后宮；寵物；歷史；搞笑；機(jī)戰(zhàn)；少年；冒險(xiǎn)；治愈；童話；格斗；
少女；懸疑；科幻；競(jìng)技；社會(huì)；神魔；熱血；校園；耽美；原創(chuàng)；魔法；教育；恐怖；驚悚；
政治；哲理；經(jīng)典；勵(lì)志；倫理；惡搞；血腥；言情；暴力。按版本分類： 電視動(dòng)畫（TV）：
電視頻道上播映的動(dòng)畫作品。
劇場(chǎng)動(dòng)畫（MOV）：影院公映的動(dòng)畫作品，是日本動(dòng)畫按傳播方式分類的一種，在中國(guó)又被稱為劇場(chǎng)版。
OVA（OAD）：原創(chuàng)動(dòng)畫錄影帶，其中OVA是單獨(dú)發(fā)售，OAD是隨書發(fā)售的。網(wǎng)絡(luò)動(dòng)畫（NET）：以網(wǎng)絡(luò)為播放平臺(tái)的動(dòng)畫。
動(dòng)畫音樂：一部動(dòng)漫作品中的音樂，包括主題音樂和背景音樂（BGM）。
動(dòng)畫原創(chuàng)：依漫畫改編的動(dòng)畫，由于動(dòng)畫的更新速度比漫畫快的關(guān)系，當(dāng)動(dòng)畫的劇集快趕上漫畫時(shí)，動(dòng)畫的劇情就要脫離漫畫劇情，開始動(dòng)畫原創(chuàng)。
同人：也叫二次創(chuàng)作，由漫畫、動(dòng)畫、游戲、小說、影視等作品甚至現(xiàn)實(shí)里已知的人物、設(shè)定衍生出來的文章及其他如圖片影音游戲等等，或“自主”的創(chuàng)作。COS：全稱COSPLAY，裝扮成漫畫、動(dòng)畫、游戲、小說等中的人物，也可以是原創(chuàng)。
2.網(wǎng)站材料
主要在網(wǎng)站上搜集所要的網(wǎng)頁(yè)信息，包括圖片、文字、相關(guān)的產(chǎn)品。同時(shí)，查詢相關(guān)的動(dòng)漫、百度等方式收集所需的文字資料,圖象資料,網(wǎng)頁(yè)特效等，用以得來更加具有說服力的頁(yè)面。要想做好自己的網(wǎng)站，能夠給瀏覽者好的欣賞感受，就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁(yè)的素材，這樣就可以做好一個(gè)好的網(wǎng)站。
二、網(wǎng)站的規(guī)劃設(shè)計(jì)
1.網(wǎng)站的功能定位
我的網(wǎng)站共有5個(gè)主頁(yè)面：首頁(yè)、動(dòng)漫之家、動(dòng)漫排行榜、動(dòng)漫連載、周邊產(chǎn)品。每一個(gè)頁(yè)面用圖片來做。
我是用素材拼音命名網(wǎng)站名，用以方便存儲(chǔ)和轉(zhuǎn)發(fā)。網(wǎng)站主頁(yè)整體色調(diào)為梅紅色，配上深沉的背景圖，搭配出一種層次感。然后點(diǎn)綴其他不同的顏色相配，突出主題，顏色沒有過多，過雜，用以避免給人一種雜亂的感覺。版面設(shè)計(jì)十分靈活，根據(jù)各部分內(nèi)容的不同適當(dāng)?shù)淖杂稍O(shè)計(jì)。網(wǎng)頁(yè)布局主要用框架和表格，用框架定位內(nèi)容的大體結(jié)構(gòu)，再用表格具體定位。位子的設(shè)計(jì)也是重要的一個(gè)部分，根據(jù)具體內(nèi)容決定字體風(fēng)格，相同的風(fēng)格多次調(diào)用是用css設(shè)計(jì)一個(gè)樣式，以保證隨時(shí)、準(zhǔn)確的調(diào)用。
2.站點(diǎn)的內(nèi)容
我們動(dòng)漫匯主要是要向客戶介紹動(dòng)漫，包括動(dòng)漫的介紹，動(dòng)漫的周邊產(chǎn)品，動(dòng)漫的圖片及動(dòng)漫的漫畫或是動(dòng)漫片段。站點(diǎn)里面包括：
首頁(yè)：第一層網(wǎng)頁(yè)，畫面主要有動(dòng)漫匯的logo，logo下方是一個(gè)橫幅，鼠標(biāo)經(jīng)過會(huì)有光亮，點(diǎn)擊仍將是動(dòng)漫的主頁(yè)。左邊是一個(gè)動(dòng)態(tài)動(dòng)漫圖，顯得主頁(yè)可愛又有動(dòng)漫氣息等。下方是會(huì)員登錄，點(diǎn)擊登陸跳轉(zhuǎn)至輸入賬號(hào)及密碼界面，如不是會(huì)員，點(diǎn)擊注冊(cè)跳轉(zhuǎn)個(gè)人用戶注冊(cè)界面。主頁(yè)的背景圖是動(dòng)漫海報(bào)，由兩層疊加。主圖是6幅動(dòng)漫圖，6種動(dòng)漫的介紹。鼠標(biāo)進(jìn)過動(dòng)漫圖時(shí)，會(huì)有相應(yīng)的動(dòng)漫簡(jiǎn)介。
跳轉(zhuǎn)頁(yè)：第二層和第三層，主要的主頁(yè)的過渡。里面有動(dòng)漫的詳細(xì)介紹，有動(dòng)態(tài)圖欣賞左側(cè)是關(guān)于動(dòng)漫的周邊產(chǎn)品。點(diǎn)擊看漫畫或動(dòng)漫，即可欣賞相關(guān)動(dòng)漫。
3.站點(diǎn)的風(fēng)格
整個(gè)網(wǎng)頁(yè)色彩明顯，我們添加了gif圖，這樣網(wǎng)頁(yè)稍微有活力，背景都是用動(dòng)漫海報(bào)。其中使用翻看圖片的特效，使得看漫畫不那么單挑。同時(shí)也插入視頻，使得網(wǎng)站有活力一些。
首頁(yè)的標(biāo)題插入閃光效果，鼠標(biāo)經(jīng)過時(shí)能出現(xiàn)，不容易產(chǎn)生無趣感。首頁(yè)的圖片不只有圖片，鼠標(biāo)放至圖片上會(huì)有文字出現(xiàn)，是動(dòng)漫的簡(jiǎn)介。使得網(wǎng)頁(yè)有活力。
4.網(wǎng)站功能模塊圖
三．網(wǎng)站技術(shù)解決方案
1、網(wǎng)站的制作工具
做網(wǎng)頁(yè)時(shí)主要使用的是Dreamweaver CS3另外，為了處理網(wǎng)頁(yè)中的其他元素，還使用了Photoshop、FLASH等軟件。
2、所用技術(shù)
動(dòng)漫匯需要大量的圖片及相關(guān)的話題。我們需要插入圖片，大小要適合，以動(dòng)漫海報(bào)為網(wǎng)頁(yè)的背景，則設(shè)置好頁(yè)面設(shè)置，選好準(zhǔn)備好的海報(bào)圖。插入gif圖片，需要時(shí)在ps中做gif圖。插入視頻時(shí)需要設(shè)置好相關(guān)的，視頻名稱中不能有中文，是flv格式的。圖文介紹的需要經(jīng)過ps的加工，使得首頁(yè)的圖片有生機(jī)活力。插入表單，是關(guān)于用戶的登錄，點(diǎn)擊跳轉(zhuǎn)至登錄或是注冊(cè)界面。首頁(yè)標(biāo)題都有鏈接，點(diǎn)擊進(jìn)入相應(yīng)的網(wǎng)站。首頁(yè)下方是關(guān)于動(dòng)漫匯，為了突出字，用ps進(jìn)行加工。
四．網(wǎng)頁(yè)介紹
1、制作網(wǎng)站的網(wǎng)頁(yè)
素材、風(fēng)格、模板都設(shè)計(jì)好以后，下一步就是具體的制作網(wǎng)頁(yè)。制作網(wǎng)站時(shí)，首先要做的就是站點(diǎn)的規(guī)劃，建立一個(gè)本地站點(diǎn)“web”，建立的各個(gè)頁(yè)面都應(yīng)該放在本地站點(diǎn)中，在網(wǎng)頁(yè)制作時(shí)所需的各個(gè)元素都進(jìn)行了統(tǒng)一的管理，建立統(tǒng)一的文件夾放同一類型的文件，我在制作時(shí)建立了各類動(dòng)漫的文件夾來存放圖片。同時(shí)，由于漫畫頁(yè)面中的信息太多，于是建立了一個(gè)專門的文件夾存放相冊(cè)信息，網(wǎng)頁(yè)中的css 樣式文件也應(yīng)統(tǒng)一管理，做到有條不紊，我設(shè)計(jì)的網(wǎng)站的首頁(yè)如下圖：
根據(jù)自己的網(wǎng)頁(yè)風(fēng)格，在網(wǎng)上搜集合適的圖片，另外網(wǎng)頁(yè)的頁(yè)寬一般沒有超過900像素，以保證左右不出現(xiàn)滾動(dòng)條。右下邊插入的是表格，表格中添加了淺紅色的背景圖片。用以體現(xiàn)網(wǎng)站的主題色彩，表格還定位了網(wǎng)頁(yè)特效、系統(tǒng)時(shí)間和flash動(dòng)畫。
2.第二層展示
頁(yè)面中，中間的頁(yè)面主要包含動(dòng)漫介紹，周邊產(chǎn)品，但瀏覽者有了新的認(rèn)識(shí)后，可以點(diǎn)擊下方的“點(diǎn)擊看漫畫”按鈕來進(jìn)入第三層頁(yè)面（漫畫頁(yè)面）。而背景圖必須選擇橫圖，而且兩邊的位置要有良好的視覺效果，我們的排版雖然精簡(jiǎn)，但是非常有視覺效果，使頁(yè)面的整體布局合理，既突出網(wǎng)站的主色調(diào)，又給人以凝重的感覺，同時(shí)增加頁(yè)面的可看性。
動(dòng)漫介紹頁(yè)面
3.動(dòng)漫排行榜展示
動(dòng)漫排行榜是為了讓瀏覽者更方便更快更準(zhǔn)確地了解到動(dòng)漫的最新信息而制作的，紅色的為最熱門的TOP5，分別有：總排行、日本漫畫排行、香港漫畫排行、大陸漫畫排行等排行榜榜單。我們也會(huì)定時(shí)更新榜單，為了讓廣大讀者更快更直接地了解最新的動(dòng)漫信息。
4.第三層展示
看漫畫頁(yè)面，是我們制作的重點(diǎn)，并且為了讓大家能看漫畫，我們專門找了類似翻頁(yè)的網(wǎng)頁(yè)特效，方便讀者的翻閱，而且讓網(wǎng)站更炫，也不容易覺得無趣及疲勞。第三層部門動(dòng)漫是漫畫欣賞，有的是動(dòng)漫觀看。主要是看我們更新的是什么哦~ 也可以讓各位動(dòng)漫迷提前看到劇情的發(fā)展，好看又過癮啊！親。定時(shí)進(jìn)入查看最新動(dòng)漫吧~注冊(cè)用戶賬號(hào)，方便隨時(shí)進(jìn)入看哦 送上一幅漫畫圖： 第三層頁(yè)面的設(shè)計(jì)代碼如下：
第五篇：網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)十二
《網(wǎng)頁(yè)設(shè)計(jì)與制作》實(shí)訓(xùn)
表單設(shè)計(jì)
實(shí)訓(xùn)內(nèi)容：用戶注冊(cè)界面設(shè)計(jì)
操作提示：
第一步：制作“用戶注冊(cè)”界面
1）在Dreamweaver CS4中新建一個(gè)網(wǎng)頁(yè)文件，將網(wǎng)頁(yè)標(biāo)題設(shè)置為“用戶注冊(cè)”。2）選擇“插入→表單→表單”命令在文檔中插入一個(gè)表單，如圖12-1所示。
圖12-1 插入表單
3）將光標(biāo)置于創(chuàng)建的表單內(nèi)，插入一個(gè)12行2列的表格，并設(shè)置表格的寬度為530像素、間距為0像素、邊框?yàn)?像素。
4）選中第一行的兩個(gè)單元格，單擊“修改→表格→合并單元格”命令，將它們合并為一個(gè)單元格。用同樣的方法將最后一行的單元格合并為一個(gè)單元格，如圖12-2所示。
圖12-2
插入的表格 5）將光標(biāo)置于第一行的單元格中，輸入“用戶注冊(cè)”，在單元格“屬性”面板中設(shè)置文本居中對(duì)齊。
6）根據(jù)圖12-3提供的界面內(nèi)容，分別在表格第1列的其它單元格中輸入昵稱、真實(shí)姓名、密碼等文本。選中輸入的文本，并將它們?cè)O(shè)置為粗體、右對(duì)齊方式。
圖12-3
輸入文本
7）選中表格中所有的單元格，在單元格“屬性”面板中設(shè)置單元格的高為30。第二步：插入文本域
1）在圖12-2所顯示的表格中，將光標(biāo)置于“昵稱：”后面的單元格中，單擊“表單”標(biāo)簽中的“文本字段”按鈕，或者選擇“插入→表單→文本域”命令，均將打開“輸入標(biāo)簽輔助功能屬性”對(duì)話框，如圖12-4所示。
圖12-4
“輸入標(biāo)簽輔助功能屬性”對(duì)話框
2）單擊【確定】按鈕，在光標(biāo)處插入了一個(gè)單行的文本域。3）選中插入的文本域，其對(duì)應(yīng)的“屬性”面板如圖12-5所示。
圖12-5
文本域“屬性”面板
文本域“屬性”面板中各選項(xiàng)含義如下：
文本域：用于標(biāo)志該文本域的名稱。每個(gè)文本域的名稱都不能相同，它相當(dāng)于表單中的一個(gè)變量名，服務(wù)器通過這個(gè)變量名來處理用戶在該文本域中輸入的值。
字符寬度：設(shè)置文本域中最多可顯示的字符數(shù)。當(dāng)設(shè)置該選項(xiàng)后，若是多行文本域，標(biāo)簽中增加cols屬性，否則標(biāo)簽增加size屬性。如果用戶的輸入超過字符寬度，則超出的字條將不被表單指定的處理程序接收。
最多字符數(shù)：設(shè)置單行、密碼文本域中最多可輸入的字符數(shù)。當(dāng)設(shè)置該項(xiàng)后，標(biāo)簽增加maxlength屬性，如果用戶的輸入超過最大字符數(shù)，則表單產(chǎn)生警告聲。
類型：設(shè)置文本域的類型，可在單行、多行或密碼3個(gè)類型中任選一個(gè)?！皢涡小鳖愋蛯a(chǎn)生一個(gè)標(biāo)簽，它的type屬性為text，這表示此文本域?yàn)閱涡形谋居??！岸嘈小鳖愋蛯a(chǎn)生一個(gè)