第一篇：網(wǎng)頁(yè)制作社團(tuán)規(guī)劃

網(wǎng)頁(yè)制作社團(tuán)規(guī)劃

一、活動(dòng)的類型、方法和原則 參加活動(dòng)的成員

高中一年級(jí)學(xué)生自愿報(bào)名參加。類型

科技實(shí)踐活動(dòng)?；顒?dòng)方法

任務(wù)驅(qū)動(dòng)法、探究學(xué)習(xí)法、自學(xué)輔導(dǎo)法、合作交流法。活動(dòng)的原則

理論與實(shí)踐結(jié)合的原則。普遍性的原則。

堅(jiān)持共性與個(gè)性相統(tǒng)一的原則?；顒?dòng)的目的

(1)讓學(xué)生體會(huì)信息技術(shù)的應(yīng)用價(jià)值,培養(yǎng)學(xué)生應(yīng)用信息技術(shù)的意識(shí)和觀念。

(2)增強(qiáng)學(xué)生學(xué)習(xí)信息技術(shù)的興趣，學(xué)會(huì)團(tuán)結(jié)合作，培養(yǎng)學(xué)生獲取、存儲(chǔ)、分析、加工、利用、評(píng)價(jià)、傳遞信息的能力,提高學(xué)生合作探究解決問題的綜合實(shí)踐能力。

(3)培養(yǎng)學(xué)生的動(dòng)手實(shí)踐能力和創(chuàng)新精神，要讓學(xué)生成為新技術(shù)的主人。

6.活動(dòng)的目標(biāo)

培養(yǎng)學(xué)生使用信息技術(shù)的能力，特別是信息的組織和發(fā)布能力。樹立學(xué)生全面正確的信息技術(shù)認(rèn)識(shí)觀。通過網(wǎng)頁(yè)制作活動(dòng)使學(xué)生不僅要認(rèn)識(shí)到信息技術(shù)與人們的生活和工作密切相關(guān)；認(rèn)識(shí)到信息技術(shù)為其他學(xué)科的學(xué)習(xí)和人的全面發(fā)展可以提供強(qiáng)大的支持。

激發(fā)學(xué)生學(xué)習(xí)信息技術(shù)的興趣。網(wǎng)頁(yè)制作活動(dòng)中,結(jié)合學(xué)生學(xué)習(xí)、生活的實(shí)際,加強(qiáng)信息技術(shù)教育的實(shí) 踐性,學(xué)生自主學(xué)習(xí)的探索性、創(chuàng)新性,這無疑克服了傳統(tǒng)活動(dòng)中內(nèi)容的枯燥、方法的呆板,對(duì)于提髙學(xué)生的學(xué)習(xí)興趣有巨大作用。

樹立學(xué)生學(xué)好信息技術(shù)的自信心。活動(dòng)中注重用學(xué)生容易理解和接受的方式傳授信息技術(shù)，這些對(duì)增強(qiáng) 學(xué)生學(xué)好信息技術(shù)的自信心有著獨(dú)特的作用。

二、中學(xué)生網(wǎng)頁(yè)制作社團(tuán)活動(dòng)設(shè)計(jì)的特點(diǎn)和開展方式 網(wǎng)寊制作社團(tuán)活動(dòng)設(shè)計(jì)的特點(diǎn)

趣味性：活動(dòng)的全過程都要注意保護(hù)和培養(yǎng)學(xué)生學(xué)習(xí)、使用信息技術(shù)的熱情。如：作品的選題都來自于學(xué)生的日常生活和他們感興趣的事務(wù)；活動(dòng)中引人比賽等 形式增強(qiáng)趣味性。

技術(shù)性：網(wǎng)頁(yè)制作科技實(shí)踐活動(dòng)的過程，就是信息技術(shù)水平不斷提高的過程。學(xué)生除了要掌握好 frontpage這一應(yīng)用軟件,還要能夠熟練地結(jié)合信息技術(shù)課堂所學(xué)內(nèi)容,使用網(wǎng)絡(luò)查找資料,并恰當(dāng)應(yīng)用。

實(shí)踐性：網(wǎng)頁(yè)制作科技實(shí)踐活動(dòng)的進(jìn)行,幾乎都是在計(jì)算機(jī)上完成的，因而學(xué)生的動(dòng)手能力是活動(dòng)能否成功的重要因素。

多樣性:作品的選題豐富多樣。如：自我介紹、環(huán) 境保護(hù)、情感故事、國(guó)內(nèi)外大事等。同時(shí),作品的表現(xiàn)形式 也將異彩紛呈。模擬性：考慮到學(xué)生的實(shí)際情況，作品最后的發(fā)布方式宜先在局域網(wǎng)上模擬發(fā)布，待學(xué)生再經(jīng)過后續(xù)知識(shí)的學(xué)習(xí)后,再發(fā)布到因特網(wǎng)上去,并時(shí)時(shí)維護(hù)和更新自己的網(wǎng)貞。

綜合性：網(wǎng)頁(yè)制作要涉及許多其它學(xué)科的知識(shí)。如：文字編輯要用到語文知識(shí)，頁(yè)面設(shè)計(jì)要用到美術(shù)知識(shí),背景音樂設(shè)置要用到音樂知識(shí),等等，協(xié)作性：活動(dòng)過程中把學(xué)生分成若干個(gè)學(xué)習(xí)小組，培養(yǎng)他們互助協(xié)作的精神和品質(zhì)。

創(chuàng)新性創(chuàng)新是民族興旺的靈魂，是一個(gè)國(guó)家興旺發(fā)達(dá)的不竭動(dòng)力(江澤民語)。”為此,應(yīng)時(shí)時(shí)鼓勵(lì)作品形式和風(fēng)格的多樣性，密切關(guān)注制作技術(shù)的深度和廣度。

2.網(wǎng)頁(yè)制作社團(tuán)活動(dòng)的開展方式

學(xué)校領(lǐng)導(dǎo)重視，成立領(lǐng)導(dǎo)小組，校長(zhǎng)經(jīng)常過問，主管校長(zhǎng)親自督查指導(dǎo)。

活動(dòng)以建構(gòu)主義學(xué)習(xí)理論為指導(dǎo)，采用支架式、任務(wù)驅(qū)動(dòng)等教學(xué)方法,活動(dòng)中突出以學(xué)生為主體、以教師為主導(dǎo)的活動(dòng)原則。

采用以自學(xué)為主、輔導(dǎo)為輔的活動(dòng)方式。

采用個(gè)人獨(dú)立完成與小組協(xié)作完成相結(jié)合的活 動(dòng)方式。采用課內(nèi)與課外相結(jié)合的活動(dòng)方式。將學(xué)生在課堂所學(xué)的各門知識(shí)自覺應(yīng)用到作品制作中。

采用校內(nèi)與校外相結(jié)合的活動(dòng)方式。學(xué)生可在遇到問題時(shí)通過電話、QQ、E-mail等工具與教師、同學(xué)取得聯(lián)系，尋求幫助，還可請(qǐng)社會(huì)上的有關(guān)人士幫忙解決。

三、中學(xué)生網(wǎng)頁(yè)制作社團(tuán)活動(dòng)實(shí)施方案

第一階段:結(jié)合教材，學(xué)習(xí)網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)。

這一階段主要是提高學(xué)生運(yùn)用信息技術(shù)的興趣,體會(huì)到信息技術(shù)的價(jià)值,享受到信息技術(shù)學(xué)習(xí)的樂趣,增強(qiáng)完成作品的信心。由于剛開始接觸一個(gè)新的軟件，所以采用分散知識(shí)點(diǎn)，由易到難地掌握教材內(nèi)容，貼近學(xué)生認(rèn)知水平，貼近學(xué)生實(shí)際。本階段主要目標(biāo)是掌握網(wǎng)頁(yè)制作所 要用到的基本技術(shù)和技能。

第二階段:安排相關(guān)的典型案例，讓學(xué)生初步掌握制作網(wǎng)頁(yè)的基本方法。

通過典型案例的講解，使學(xué)生了解到網(wǎng)頁(yè)設(shè)計(jì)的基本步驟、制作時(shí)應(yīng)考慮的基本因素。此階段主要目標(biāo)是為學(xué)生完成作品提供一個(gè)支架，幫助學(xué)生把對(duì)網(wǎng)頁(yè)制作的理解和認(rèn)識(shí)引向深入，為下一階段的活動(dòng)做好準(zhǔn)備。

第三階段:完成作品。通過網(wǎng)頁(yè)制作活動(dòng),培養(yǎng)學(xué)生的科學(xué)素質(zhì)，提高創(chuàng)新能力。

網(wǎng)頁(yè)制作活動(dòng)是制作者對(duì)各種能力的綜合應(yīng)用，它涉及對(duì)相關(guān)知識(shí)的掌握程度，以及觀察、分析、綜合、比較、概括等各種科學(xué)思維方法的綜合應(yīng)用。為此,在這一階段，師生應(yīng)組成“共同體”,在教師的點(diǎn)撥指導(dǎo)下，以小組為單位開展活動(dòng)，同時(shí)提高學(xué)生獨(dú)立工作和相互合作的能力。教師重點(diǎn)在解決問題的方法上給予點(diǎn)撥和總結(jié)，并讓學(xué)生大膽地去實(shí)踐，增強(qiáng)應(yīng)用信息技術(shù)的意識(shí)和能力，提高學(xué)生的應(yīng)用能力和創(chuàng)新能力。

第四階段:作品展評(píng)。通過作品展評(píng),提高學(xué)生的審美素養(yǎng)和審美能力。

這一階段可先在小組內(nèi)對(duì)每個(gè)作品進(jìn)行評(píng)價(jià)，選出 代表作品，再參與整個(gè)大組的展評(píng)。評(píng)價(jià)可采用作者自評(píng)、組間互評(píng)、教師點(diǎn)評(píng)等方式，可從思想性、創(chuàng)造性、藝術(shù)性、技術(shù)性等方面來進(jìn)行綜合評(píng)價(jià)。

四、開展中學(xué)生網(wǎng)頁(yè)制作社團(tuán)活動(dòng)的初步成果

做到了將培養(yǎng)應(yīng)用信息技術(shù)的意識(shí)貫徹在活動(dòng)的全過程之中。在活動(dòng)中通過引人貼近現(xiàn)實(shí)生活、生產(chǎn)和其他學(xué)科為實(shí)際背景的選題，使學(xué)生明確了信息技術(shù)與人類社會(huì)密不可分，信息技術(shù)將會(huì)影響到他在信息社會(huì)中的立足和發(fā)展，從而體現(xiàn)信息技術(shù)的實(shí)際應(yīng)用價(jià)值和信息技 術(shù)的社會(huì)功能。

以網(wǎng)頁(yè)制作活動(dòng)為手段，激發(fā)了學(xué)生學(xué)習(xí)信息技術(shù)的積極性，學(xué)會(huì)了團(tuán)結(jié)協(xié)作，建立良好人際關(guān)系、相互合作的工作能力。

以網(wǎng)頁(yè)制作活動(dòng)為核心，培養(yǎng)了學(xué)生的動(dòng)手能力和創(chuàng)新精神。通過網(wǎng)頁(yè)設(shè)計(jì)過程中的作品呈現(xiàn)形式的多 樣性，豐富了學(xué)生的思維，激發(fā)學(xué)生的創(chuàng)新，從而為學(xué)生將來成為具有創(chuàng)造性思維的人才奠定了基礎(chǔ)。

通過網(wǎng)頁(yè)制作活動(dòng),培養(yǎng)學(xué)生的自我評(píng)價(jià)能力。通過自評(píng)、互評(píng)和教師點(diǎn)評(píng)，可以更好地培養(yǎng)學(xué)生的自我評(píng)價(jià)能力和審美、鑒別能力。學(xué)生正是在這種不斷修改不斷完善的過程中，來完善自己，充實(shí)自己，從而形成獨(dú)立思考的習(xí)慣和良好的自我評(píng)價(jià)能力。

通過活動(dòng)培養(yǎng)了學(xué)生頑強(qiáng)拼搏的精神?；顒?dòng)中 引人了學(xué)生喜歡的競(jìng)賽評(píng)比機(jī)制，維持了學(xué)生認(rèn)真持久開展活動(dòng)的積極性。有的學(xué)生為了髙質(zhì)量地完成任務(wù)，放棄了休息和娛樂的時(shí)間，主動(dòng)與游戲告別，一心撲在任務(wù)上。

五、中學(xué)生網(wǎng)頁(yè)制作社團(tuán)活動(dòng)中的新亮點(diǎn)

活動(dòng)過程中出現(xiàn)了意料之外的重大收獲。有一天，在觀察學(xué)生制作的過程中，發(fā)現(xiàn)張耕暢同學(xué)的作品比其他同學(xué)多了一些有趣的內(nèi)容：如瀏覽網(wǎng)頁(yè)時(shí)停留時(shí)間的統(tǒng)計(jì)、禮花效果、BBS論壇等特效和難度很大的內(nèi) 容出現(xiàn)在他的網(wǎng)貞上。經(jīng)了解，這些都是他通過自學(xué)、引用免費(fèi)代碼設(shè)計(jì)產(chǎn)生的效果。據(jù)他講，起初他在瀏覽別人網(wǎng)頁(yè)時(shí)，發(fā)現(xiàn)有一些教師沒有講的特效，他就試著研究這些效果是如何產(chǎn)生的，結(jié)果還真的找到了一條捷徑。由此可見，開展科技實(shí)踐活動(dòng)確實(shí)能收到意想不 到的效果。

六、中學(xué)生網(wǎng)頁(yè)制作社團(tuán)活動(dòng)繼續(xù)深化還應(yīng)注意的問題 適合中學(xué)生水平的信息技術(shù)作品制作活動(dòng)理論與方法，需作進(jìn)一步研究。

活動(dòng)時(shí)間合理安排和探討。

維持學(xué)生持續(xù)的興趣在活動(dòng)中有一定難度，還需進(jìn)一步實(shí)踐。教師自身素質(zhì)提高的問題。在實(shí)踐中，我感到教師的素質(zhì)和水平是活動(dòng)能否成功的關(guān)鍵。我們應(yīng)積極投身到實(shí)施和推進(jìn)素質(zhì)教育的各項(xiàng)活動(dòng)中去，不斷積累和更 新專業(yè)知識(shí)。關(guān)于活動(dòng)的評(píng)價(jià)。如何對(duì)參與者及其作品進(jìn)行更有效的評(píng)價(jià),還值得研究。

七、對(duì)未來研究的展望

信息技術(shù)教育是全面素質(zhì)教育中一個(gè)必不可少的環(huán)節(jié)。信息技術(shù)與人類社會(huì)密不可分,信息技術(shù)與科學(xué)息息相關(guān)，信息技術(shù)為其它學(xué)科的發(fā)展提供了條件和基礎(chǔ)。學(xué)好信息技術(shù)對(duì)中學(xué)生素質(zhì)教育有著重要的作用，提高學(xué)生信息素養(yǎng)是我們長(zhǎng)期面臨的任務(wù)。我們應(yīng)繼續(xù)做好信 息技術(shù)社團(tuán)活動(dòng)及對(duì)策的研究工作，并將研究成果及時(shí)運(yùn)用到實(shí)踐活動(dòng)中，提高信息技術(shù)社團(tuán)活動(dòng)的水平，努力開創(chuàng)信息技術(shù)社團(tuán)活動(dòng)的新局面！

第二篇：網(wǎng)頁(yè)制作與規(guī)劃實(shí)驗(yàn)教案

實(shí)驗(yàn)一 站點(diǎn)的創(chuàng)建與基本HTML標(biāo)記的應(yīng)用

一、實(shí)驗(yàn)?zāi)康募耙?/p>

1.了解組成網(wǎng)頁(yè)的基本元素

2.掌握文本元素的添加和編輯方法 3.掌握?qǐng)D像元素的添加和運(yùn)用技巧 4.掌握幾種鏈接的具體創(chuàng)建方法 5.掌握?qǐng)D像元素的添加和運(yùn)用技巧

二、實(shí)驗(yàn)學(xué)時(shí)

4學(xué)時(shí)

三、實(shí)驗(yàn)內(nèi)容

任務(wù)一：在網(wǎng)頁(yè)中基本頁(yè)面元素的應(yīng)用 1．準(zhǔn)備工作

在c盤或其他盤新建一個(gè)文件夾作為站點(diǎn)文件夾，文件夾名稱為myweb3。復(fù)制給定的一個(gè)圖像文件夾images和一個(gè)網(wǎng)頁(yè)文件sx3-2.htm。

2．建立本地站點(diǎn)

‘ 用已學(xué)方法建立本地站點(diǎn)。

3．依據(jù)圖3．38所示的效果，向網(wǎng)頁(yè)中添加并編輯頁(yè)面元素，具體操作步驟如下。

(1)在默認(rèn)打開的網(wǎng)頁(yè)中選擇“修改”|“頁(yè)面屬性”菜單命令，設(shè)置使

背景顏色為#CCCCCC。

(2)輸入網(wǎng)頁(yè)首行文本“老郵票知多少”，大小為48像素，顏色為#FFFF00，字體為“華文行楷”粗體，居中對(duì)齊。

(3)在網(wǎng)頁(yè)第二行插入更新日期和版權(quán)信息，選擇“插入”l“日期”菜單命令，將當(dāng)前編輯日期插入網(wǎng)頁(yè)，然后利用“插入”面板上“文本”選項(xiàng)卡中的晶按鈕，插入多個(gè)空格，再輸入版權(quán)信息“◎版權(quán)所有：D．Wei@sohu．com”整行文字大小為18像素，顏色為#000000，字體為默認(rèn)字體，粗體，居中對(duì)齊。

(4)在網(wǎng)頁(yè)第三行選擇“插入”|“水平線”菜單命令，插入一條水平線，高度為5，其他屬性取默認(rèn)值。

(5)在網(wǎng)頁(yè)第四行、第七行各插入一行文本，內(nèi)容分別為“紀(jì)33(C33)：中國(guó)古代科學(xué)家、1955．8．25發(fā)行600萬套、全套4枚、新票市場(chǎng)參考價(jià)￥550元?！焙汀凹o(jì)36(C36)：中國(guó)工農(nóng)紅軍勝利完成二萬五千里長(zhǎng)征二十周年、1955．12．30發(fā)行600萬套、全套2枚、新票市場(chǎng)參考價(jià)￥850元?！蔽淖执笮?8像素，格式為“項(xiàng)目列表”，其他屬性取默認(rèn)值。

(6)在網(wǎng)頁(yè)第五行選擇“插入”I“圖像”菜單命令，插入四張郵票圖像，文件名分別為0637.jpg、0638.jpg、0639.jpg、0640.ipg。每張圖像的寬為

110、高為150，其他屬性取默認(rèn)值。

(7)在網(wǎng)頁(yè)第六行插入一條水平線，寬為400像素，其他屬性取默認(rèn)值。

(8)在網(wǎng)頁(yè)第八行插入兩張郵票圖像，文件名分別為0645.jPg、0646.ipg，圖像寬高分別為150／110和110／150，其他屬性取默認(rèn)值。

4．保存網(wǎng)頁(yè) 選擇“文件”“|保存”菜單命令，在站點(diǎn)中將此網(wǎng)頁(yè)保存為sx3-1．htm。5．打開并編輯給定的網(wǎng)頁(yè)文件sx3．2．htm，如圖3-39所示。

(1)建立圖像熱點(diǎn)鏈接。為此選中網(wǎng)頁(yè)上方圖像，利用“屬性”檢查器

中的熱點(diǎn)工具在圖像上建立兩個(gè)熱點(diǎn)，如圖3．40所示。從左到右兩個(gè)熱點(diǎn)分別鏈接到sx3-2-1．htm和sx3-2-2．htm文件(兩個(gè)文件可稍后建立)。

(2)插入命名錨記。為此將光標(biāo)放在網(wǎng)頁(yè)標(biāo)題“教育天地”后，選擇“插入”I‘‘命名錨i6'’菜單命令，在輸入對(duì)話框中輸入錨記“A0“。依此方法在網(wǎng)頁(yè)右側(cè)文本“教養(yǎng)員”、“教員”、“特級(jí)教師”、“助教”、“講師”、“副教授”和“教授”處分別插入命名錨記，依次為A1～A7。

(3)創(chuàng)建錨點(diǎn)鏈接。為此分別創(chuàng)建左列目錄文本“教養(yǎng)員”、“教員”、“特級(jí)教師”、“助教”、“講師”、“副教授”和“教授”與右列命名錨記A1～A7的錨點(diǎn)鏈接。然后再將各段下方的文本“返回”與標(biāo)題處錨記A0建立錨點(diǎn)鏈接。

(4)創(chuàng)建無址鏈接。選中網(wǎng)頁(yè)上方文本“教師篇”，在“屬性”檢查器的鏈接欄中輸入“≠}”即可。

(5)創(chuàng)建郵件鏈接。選中網(wǎng)頁(yè)最后一行文本“聯(lián)系”，然后在“屬性”檢查器的鏈接欄中輸入“mailto：abc@163．com'’即可。如圖3—41所示。

6．保存網(wǎng)頁(yè)

選擇“文件”I“保存”菜單命令，將此網(wǎng)頁(yè)保存在站點(diǎn)中。7建立其他網(wǎng)頁(yè)

(1)新建一張網(wǎng)頁(yè)，輸入“名人看教育”，文件名為sx3-2-1.htm，保存

在站點(diǎn)中。

(2)再新建一張網(wǎng)頁(yè)，輸入“教育話題”，文件名為sx3-2-2.htm，保存在站點(diǎn)中。

8．站點(diǎn)測(cè)試

按【F12】鍵在瀏覽器中預(yù)覽，觀察效果與樣圖是否一致。單擊建立的每個(gè)鏈接，以測(cè)試超鏈接是否都能夠正確跳轉(zhuǎn)。

任務(wù)二：HTML基本標(biāo)記的應(yīng)用 1．準(zhǔn)備工作

在C盤或其他盤符下新建一個(gè)工作夾，制作的所有頁(yè)面都保存在這個(gè)文件夾內(nèi)。將給定的圖像素材文件復(fù)制到工作文件夾中。

2．建立名稱為了test.html的HTML頁(yè)面，效果如圖4-1所示。頁(yè)面功能要求為：

（1）頁(yè)面標(biāo)題為“基本標(biāo)記測(cè)試”；

（2）頁(yè)面內(nèi)的所有標(biāo)題文字均為標(biāo)題2格式；

（3）單擊鏈接文字時(shí)要求在新的瀏覽器窗口中，打開test.html頁(yè)面自身；

(4)圖片名稱為1．gif，存放在工作文件夾中，與test．htm頁(yè)面位于同一位置；

(5)依據(jù)圖4—1所示樣式，完成頁(yè)面中的表格制作

3．建立名稱為login．htm的HTMI。頁(yè)面，效果如圖4—2所示。頁(yè)面功能要求為：

(1)頁(yè)面標(biāo)題為“表單標(biāo)記測(cè)試”；

(2)“姓名”為單行文本框，寬10個(gè)字符，最多能填寫20個(gè)字符；(3)“性別”為單選按鈕，傳遞的值為“男”和“女”，第一個(gè)按鈕為默認(rèn)選中；

(4)“職業(yè)”為下拉列表框，內(nèi)容有“教師”、“工人”和“職員”；(5)“愛好”為復(fù)選按鈕，傳遞的值分別對(duì)應(yīng)為1，2，3，4，第一個(gè)按

鈕為默認(rèn)選中；

(6)“留言”為多行文本框，大小為5行40列，默認(rèn)內(nèi)容為“說幾句吧!”；(7)“提交”按鈕和“重置”按鈕分別完成提交表單功能和重置表單功能，表單提交方式為get；

(8)頁(yè)面上的所有文字默認(rèn)為3號(hào)字。4．頁(yè)面測(cè)試

在瀏覽器中瀏覽所完成的頁(yè)面，觀察效果是否符合要求。

實(shí)驗(yàn)二 表格、表單和框架的應(yīng)用

一、實(shí)驗(yàn)?zāi)康募耙?1.掌握表格的基本用法 2.掌握表格布局頁(yè)面的方法 3.學(xué)會(huì)用框架布局頁(yè)面的方法 4.了解框架布局的特點(diǎn)

二、實(shí)驗(yàn)學(xué)時(shí)

10學(xué)時(shí)

三、實(shí)驗(yàn)內(nèi)容

任務(wù)一：表格的應(yīng)用 1．準(zhǔn)備工作

在c盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。輸入你想要的站點(diǎn)名稱，這里輸入myweb5。在此文件夾中新建一個(gè)圖像文件夾images，并將給定圖像素材復(fù)制到其中。

2．建立本地站點(diǎn)

用已學(xué)方法建立本地站點(diǎn)。3．利用表格編輯首頁(yè)

(1)在默認(rèn)打開的網(wǎng)頁(yè)中，選擇“修改”l‘‘頁(yè)面屬性”菜單命令，設(shè)置背景顏色為#clclcl。

(2)在網(wǎng)頁(yè)中插入一個(gè)2行2列的表格，參數(shù)設(shè)置如圖5-21所示。選中表格，在“屬性”檢查器的表格“高”輸入框中輸入100，單位為“％”。將第一行兩個(gè)單元格合并為一個(gè)，如圖5-22所示。

．

(3)利用“屬性”檢查器調(diào)整3個(gè)單元格的寬度和高度。將光標(biāo)放在第一行單元格內(nèi)，在“屬性”檢查器“高”輸入框中輸入110，“寬”不輸入；將光標(biāo)放在第二行第一個(gè)單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入250，“高”不輸入；將光標(biāo)放在第二行第二個(gè)單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入450，“高”不輸入。效果如圖5-22所示。

(4)按樣張(如圖5-23所示)在第一行單元格中輸入“飲食本草”，文字大小80像素，字體“華文彩云”，前兩個(gè)字白色，后兩個(gè)字顏色為#009900。在文字下方插入一條水平線，屬性取默認(rèn)值。

(5)在第二行第一個(gè)單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為8行1列、表格高度和寬度均為100％、邊框粗細(xì)為0、單元格邊框?yàn)?、單元格間距為0。如圖5．23所示。

(6)在第二行第二個(gè)單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度均為100％、邊框粗細(xì)為

2、單元格邊框?yàn)?、單元格間距為0。如圖5-23所示。

(7)在左側(cè)嵌套表格各行中分別輸入圖5．24所示內(nèi)容，然后將8個(gè)單元格的高度均設(shè)置為50。文字大小為36，字體為“華文新魏”，然后將每行文字均創(chuàng)建無址鏈接。

（8）在中側(cè)嵌套表格中分別插入5張文件夾images中的圖片，每張圖片的寬度和高度均為150，注意：當(dāng)圖片尺寸變小后，表格不會(huì)自動(dòng)縮小，這時(shí)可以選中整個(gè)表格，在“屬性”檢查器中單擊“清除行高”和“清除列寬”兩個(gè)按鈕來調(diào)整表格大小。

4．保存網(wǎng)頁(yè)

選擇“文件”！“保存”菜單命令，將此網(wǎng)頁(yè)保存在站點(diǎn)中。5．站點(diǎn)測(cè)試

按【F12】鍵在瀏覽器中預(yù)覽，觀察效果是否與樣張一樣。任務(wù)二：框架的應(yīng)用 1．準(zhǔn)備工作

在C盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。并將給定的圖片文件和素材文件復(fù)制到站點(diǎn)文件夾中。

2．建立本地站點(diǎn)

用已學(xué)方法建立本地站點(diǎn)。3．利用框架布局頁(yè)面

站點(diǎn)首頁(yè)部局效果如圖15-15所示，頁(yè)面制作步驟如下。（1）在默認(rèn)打開的網(wǎng)頁(yè)中，選擇“插入”面板上的“布局’’選項(xiàng)卡。單擊框架按鈕的下拉箭頭，從下拉菜單中選擇命令。

(2)將光標(biāo)置于頂端框架內(nèi)，選擇“修改”|“頁(yè)面屬性”菜單命令，設(shè)置背景顏色為#C1C1C1。同理將左框架和主框架的頁(yè)面背景色都設(shè)置為#C1C1C1。

(3)選擇“窗口“|‘‘框架”菜單命令，將“框架”面板調(diào)出來。然后設(shè)置三個(gè)框架的大小。

“頂端框架”：在“框架”面板中選定外層框架集，在“屬性”檢查器將頂端框架的高度設(shè)置為“120像素”，下面部分設(shè)置為“1”，單位為“相對(duì)”。將“邊框”設(shè)置為“是”，“邊框?qū)挾取痹O(shè)置為1’，邊框顏色設(shè)置為“#CCCCCC”。如圖15—16所示。

“左側(cè)框架”在“框架”面板中選定內(nèi)層的子框架集，在“屬性”檢查器將左側(cè)框+架的寬度設(shè)置為“250像素”，右側(cè)主框架設(shè)置為“1”，單位為“相對(duì)”。將“邊框”設(shè)置為“是”，“邊框?qū)挾取痹O(shè)置為“1’，邊框顏色設(shè)置為“#CCCCCC”。如圖15—17所示。

(4)在頂端框架內(nèi)輸入站點(diǎn)標(biāo)題‘‘飲食本草”，文字大小為80像素，字體為“華文彩云”，前兩個(gè)字白色，后兩個(gè)字顏色為#009900，居中對(duì)齊。

(5)在左側(cè)框架內(nèi)插入一個(gè)表格，表格相關(guān)屬性分別為9行1列、表格高度和為100％、寬度為100％、邊框粗細(xì)為0、單元格邊框?yàn)?、單元格間距為0、對(duì)齊方式為右對(duì)齊。然后

將9個(gè)單元格的高度均設(shè)置為50，在其中輸入樣張中的文字，文字大小為36，字體為“華文

新魏”。如圖15．15所示。

(6)在右側(cè)主框架中插入一個(gè)表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度任意、邊框粗細(xì)為

2、單元格邊框?yàn)?、單元格間距為0、居中對(duì)齊。按樣張效果在表格中分別插入5 張文件夾images中的圖片，每張圖片的寬度和高度均為150。注意：當(dāng)圖片尺寸變小后，要在“屬

性，檢查器中單擊cc清除行高’’和“清除列寬”兩個(gè)按鈕，使表格調(diào)整到最小。如圖15—15所示。

4．保存框架網(wǎng)頁(yè)

選擇“文件”|“保存全部”菜單命令，按照保存窗口彈出的順序，分別將框架集、右側(cè)

主框架、左側(cè)框架、頂端框架命名為index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站點(diǎn)中。

5．建立導(dǎo)航鏈接 具體制作步驟如下。

(1)按導(dǎo)航欄目分別建立8個(gè)相關(guān)內(nèi)容的頁(yè)面，或者從提供的素材文件中獲取。

(2)在左側(cè)框架內(nèi)選擇“首頁(yè)”文字，在“屬性”檢查器的鏈接欄中設(shè)置目標(biāo)文件為本框架集頁(yè)面．Index．htm，目標(biāo)選擇“parent'’。

(3)在左側(cè)框架內(nèi)選擇“谷物篇”文字，在“屬性”檢查器的“鏈接”欄中設(shè)置目標(biāo)文件為素材文件guwu．htm，“目標(biāo)”欄選擇右側(cè)主框架的名稱“mainframe”。同理，將左側(cè)框 架內(nèi)的各項(xiàng)導(dǎo)航內(nèi)容分別鏈接到對(duì)應(yīng)的素材文件，且“目標(biāo)”均設(shè)置為“mainframe”。

(4)再次選擇“文件”|“保存全部”菜單命令。6．預(yù)覽和測(cè)試站點(diǎn)

在打開的Index．htm文件中，按【F12】鍵在瀏覽器中預(yù)覽，觀察效果與樣張是否一樣，然后，測(cè)試各導(dǎo)航鏈接內(nèi)容和顯示位置是否正確。效果如圖15-18所示。

實(shí)驗(yàn)三 網(wǎng)頁(yè)圖像和動(dòng)畫的設(shè)計(jì)與應(yīng)用

一、實(shí)驗(yàn)?zāi)康募耙?/p>

1．掌握在Fireworks中創(chuàng)建動(dòng)畫的方法 2．掌握在Fireworks中制作蒙版的創(chuàng)建方法 3．掌握基本動(dòng)畫補(bǔ)間操作

二、實(shí)驗(yàn)學(xué)時(shí)

8學(xué)時(shí)

三、實(shí)驗(yàn)內(nèi)容 任務(wù)一：gif動(dòng)畫 1．準(zhǔn)備工作

在c盤或其他盤新建一個(gè)文件夾，本次實(shí)訓(xùn)的內(nèi)容將全部保存在該文件夾下。

2．一張向日葵畫框圖片的制作(1)新建文件

打開Fireworks 8，在“開始頁(yè)”中選擇“新建Fireworks文件”，新建一個(gè)空白文件。在彈出的“新建文檔”中設(shè)置畫布的“寬”為360，“高”為400，畫布顏色選擇白色，然后單擊“確定”按鈕。選擇“文件”|‘‘另存為”菜單命令，將文件以“sx6—1．png”為文件名保存在指定文件夾下。

(2)制作圖片 選擇“文件”l‘‘導(dǎo)入”菜單命令，在“導(dǎo)入”對(duì)話框中選擇需要導(dǎo)入的圖片“畫框．gif”。此時(shí)光標(biāo)的形狀變?yōu)閂-，在畫布上單擊鼠標(biāo)左鍵，即可將該圖片以原始大小導(dǎo)入(也可以按下左鍵拖放，將圖片以不同的大小導(dǎo)入)。此時(shí)可以在“層”面板中看到剛導(dǎo)入的對(duì)象。用相同的方法導(dǎo)入第二張圖片“向日葵．png”，將圖片的大小調(diào)整合適，放入畫框內(nèi)，并調(diào)整整個(gè)圖片的坐標(biāo)，到此這個(gè)圖片的制作就完成了。單擊“主要”工具欄上的“保存”按鈕，保存文件。

(3)圖片的優(yōu)化和導(dǎo)出

選擇“窗口”l“優(yōu)化”菜單命令，打開“優(yōu)化”面板，如圖6-23所示的設(shè)置。選擇“文件”|“導(dǎo)出”菜單命令，在彈出的“導(dǎo)出”對(duì)話框中，“文件名”一欄輸入文件名“sx6—1．jpg”，選擇侏存類型為“僅圖像”，單擊“保存”按鈕，該文件即可以JPEG的文件格式輸出。

選擇“文件”l礫存”菜單命令，保存源文件，單擊“預(yù)覽”按鈕預(yù)覽效果，如圖6-24所示。

3．進(jìn)一步編輯向日葵畫框圖片(1)新建一幀

打開剛剛創(chuàng)建的向日葵畫框，即“sx6—1．png”。在“幀”面板，選擇剛才已有的第一幀，將它拖到“新建／重制幀”按鈕上釋放，得到復(fù)制的一幀。

將新復(fù)制的第二幀選中，將原有的向日葵圖片刪除，重新導(dǎo)入另一幅圖像“椰子樹．jpg”，并調(diào)整大小使其居于畫框內(nèi)。這樣當(dāng)前文件具有兩個(gè)幀的畫面，如圖6—25所示。

(2)觀看動(dòng)畫播放效果

單擊位于工作窗口下方幀控制器的“播放”按鈕，觀看動(dòng)畫播放效果。單擊“停止”按鈕，停止播放。

如果不滿意，可以返回幀1或幀2進(jìn)行修改。

如果想調(diào)整兩幀的播放速度，可以在幀面板雙擊每幀右側(cè)的數(shù)字“7”，將其修改成想要的值。

再次通過幀控制器觀看動(dòng)畫播放效果，如果想再增加幾幀，可以按上面的方法進(jìn)行編輯，直至滿意為止。

選擇“文件”|“另存為”菜單命令，將文件以“sx6．2．png'’為文件名保存在指定文件夾下保存文件。

再選擇“文件”|“圖像預(yù)覽”菜單命令，打開“圖像預(yù)覽”對(duì)話框，如圖6—26所示。

選擇導(dǎo)出的文件格式為“GIF動(dòng)畫”，然后再選擇“導(dǎo)出”按鈕，就可以導(dǎo)出GIF動(dòng)畫文件，文件名為“sx6．2．gift。這樣可以在Fireworks之外，同樣看到動(dòng)畫效果。

任務(wù)二：蒙版和動(dòng)畫的制作 1．準(zhǔn)備工作

在c盤或其他盤新建一個(gè)文件夾，將給定圖像素材復(fù)制到其中，本次實(shí)訓(xùn)的內(nèi)容將全部保存在該文件夾下。

2．導(dǎo)入圖像并調(diào)整畫布

新建空白文檔，大小、顏色均默認(rèn)。

選擇“文件”l“導(dǎo)入”菜單命令，將指定文件夾中的圖像導(dǎo)入文檔。選中圖片，在“屬性”檢查器中修改圖片的寬、高值(500×400)。然后單擊畫布之外，在“屬性”檢查器選擇“符合畫布”命令，使畫布和圖片一樣大且對(duì)齊。

在“屬性”檢查器選擇“畫布”旁邊的拾色器，把畫布顏色改成自己喜歡的顏色。

3．制作矢量蒙版

選擇橢圓工具，在窗口中畫一個(gè)橢圓。選擇“編輯”I“剪切”菜單命令，橢圓消失，用鼠標(biāo)再次選中導(dǎo)入的圖像，然后選擇“編輯”I“粘貼為蒙版”菜單命令，出現(xiàn)蒙版效果，如圖9-36所示。

打開“層”面板，如圖9-37所示。單擊層中圖片與蒙版之間的鏈接@標(biāo)記，可以使它消失，再次單擊又會(huì)出現(xiàn)。它的出現(xiàn)與消失決定著蒙版是否與圖片鏈接在一起。當(dāng)未鏈接時(shí)，單擊“層”面板中的蒙版圖標(biāo)，使它周圍出現(xiàn)綠框。如圖9-38所示。

用鼠標(biāo)移動(dòng)畫布上橢圓的位置，效果如圖9-39所示。

把位置調(diào)整到理想狀態(tài)后，選擇“文件”|“另存為”菜單命令，將文件以“sx9-1．png'，為名保存在指定文件夾下。

4．修改蒙版效果

打開剛才新建的蒙版文件，在“層”面板選中蒙版。在“屬性”檢查器中，選擇“蒙版”為“灰度外觀”，將方式改為“放射狀”，并單擊旁邊的拾色器，將放射狀填充的中心調(diào)整為透明(白色)，邊緣調(diào)整為不透明(黑色)，如圖9-40所示。

在“屬性”檢查器中，將“邊緣”修改為“羽化”，值為“50'’，“描邊”設(shè)置為“無”，如下圖9-41所示。

在畫布上適當(dāng)調(diào)整橢圓填充的放射中心和幅度，最后達(dá)到如圖9—42所示效果。

5．制作位圖蒙版，打開給定圖像文件0258.jpg，另存為sx9-2.jpg。把顯示的縮放比例調(diào)整為66%。單擊“層”面板的“添加蒙版”按鈕，并在“層”面板選中，然后按照?qǐng)D9-43蒙版圖標(biāo)。

在“工具”面板“顏色”部分中選擇“漸變”工具設(shè)置蒙版的相關(guān)屬性。

在圖像中間拖動(dòng)鼠標(biāo)，使填充呈由中心向四周的放射形狀。圖像產(chǎn)生了蒙版效果，同時(shí)“層”面板的蒙版圖標(biāo)也發(fā)生了變化。如圖9-44所示。

6.制作文本蒙版

打開給定圖像文件0258.jpg，另存為sx9-3.jpg。把顯示的縮放比例調(diào)整為66%。在“工具”面板“矢量”部分中選取“文字”工具。輸入文字“熱帶風(fēng)情”，字體為華文行楷，大小150。選中文字，選擇“編輯”|“剪切”菜單命令，將其剪切。在“層”面板中選擇取位圖標(biāo)，然后選擇“編輯”|“粘貼為蒙版”菜單命令。圖像產(chǎn)生了蒙版效果，同時(shí)“層”面板也出出了文本蒙版圖標(biāo)，如圖9-45所示。

任務(wù)三：風(fēng)吹樹葉(1)新建Flash文件。

(2)修改背景顏色為“藍(lán)色”。

(3)使用“文本工具”按鈕，創(chuàng)建文字“風(fēng)吹效果”四個(gè)字，用工具選中文字并按【Ctrl】+【B】一次，將四個(gè)字分解為個(gè)體。如13-11所示。

(4)再次用工具，選中“風(fēng)”字然后選擇“修改”|轉(zhuǎn)換為元件”菜單命令。在彈出轉(zhuǎn)換為符號(hào)“對(duì)話框中，將元件名稱改為“風(fēng)”，如圖13-12所示。

(5)重復(fù)步驟(4)，將剩下的三個(gè)字“吹”、“效”、“果”也依次做成圖形元件。

(6)選中所有的文字，然后鼠標(biāo)右擊，在彈出的上下文菜單中選擇“分散到各層”，于是個(gè)字將分別處于四個(gè)不同的圖層。這樣做是為了動(dòng)畫漸變能夠正確的執(zhí)行。

如果分散到各層后文字沒有對(duì)齊，則可用“對(duì)齊面板”，將各層的文字重新排列好。“對(duì)面板如圖13-13所示，可以通過菜單“窗口”|對(duì)齊’’菜單命令打開“對(duì)齊”面板。

(7)在時(shí)間軸中第1 5幀處，給各層“添加關(guān)鍵幀”，選中第15幀。(8)將四個(gè)字全部選中，使用鼠標(biāo)向上移動(dòng)一段距離，選擇“修改”|變形”|“水平翻轉(zhuǎn)”菜單命令，將四個(gè)字水平翻轉(zhuǎn)一下，然后調(diào)整字體的位置，用“對(duì)齊’’面板排列字體，如圖13-14所示。

(9)選中所有元件，在“屬性，檢查器中將顏色“Alpha”值設(shè)為“O”，如圖13-15所示。

(1 O)在“吹”、“效”、“果”三個(gè)元件所在層的第1幀處創(chuàng)建動(dòng)畫補(bǔ)間，如圖13-16所示。

(11)按住【Ctrl】鍵，選擇第二層的第2幀到最后一幀。按住鼠標(biāo)左鍵不放，將位置向后拖放一段距離，如圖13-17所示。

(1 2)參照步驟(1 0)內(nèi)容，將‘‘效”、“果”兩個(gè)元件所在層的位置分別后移，如圖13-l8所示。

(1 3)按【Ctrl】+【Enter】組合鍵查看效果。任務(wù)四：球的跳動(dòng) 1.準(zhǔn)備工作

在c盤或其他盤新建一個(gè)文件夾，并將給定的圖片文件和素材文件復(fù)制到站點(diǎn)文件夾中。本次初訓(xùn)的內(nèi)容將全部保存在該文件夾下。

2．素材的導(dǎo)入

1)新建文件

打開Flash 8，在“開始頁(yè)”中選擇“新建Flash文件”，以新建一個(gè)空白文件。背景色為“白色’’。

選擇“文件”|“保存”菜單命令，將文件保存為ex3.fla文件。2)“球’’的導(dǎo)入

選擇“文件”|“導(dǎo)入”|“導(dǎo)入到庫(kù)”菜單命令將“球”導(dǎo)入到庫(kù)，如圖13-33所示。

3.元件的轉(zhuǎn)換

選擇“修改”|“轉(zhuǎn)換為元件”菜單命令，將圖片轉(zhuǎn)換為“圖形”元件，并命名為“球”。13-34所示。

4．動(dòng)作補(bǔ)間的設(shè)置

將元件“球”拖放到場(chǎng)景1的圖層1中。在圖層1的第60幀處插入關(guān)鍵幀，如圖13-35所示。

在第1幀處添加‘‘動(dòng)畫補(bǔ)-間，效果，如圖13-36所示。

在第1幀處處的“屬性”檢查器中，單擊“緩動(dòng)”旁邊的“編輯”按鈕，設(shè)置動(dòng)作的“緩入|緩出”效果(通過緩入／緩出可以控制動(dòng)畫漸變的速度和狀態(tài))。設(shè)置效果如圖13-37所示。

在“自定義緩入／緩出”對(duì)話框定義各個(gè)幀處的動(dòng)畫補(bǔ)間速度和方向。新建圖形元件，命名為“陰影”，設(shè)置筆觸色為“無”，填充色為“黑白漸變”，白色部分的alpha透明度為29％。使用橢圓工具繪制一個(gè)橢圓，設(shè)置面板如圖13-38所示，繪制的效果如13-39所示。

在場(chǎng)景1中新建圖層2，將元件“陰影”拖放到第1幀處的恰當(dāng)位置(在球落下的下方)，并在第60幀插入關(guān)鍵幀，陰影位置如圖13—40所示。

在圖層2第1幀處設(shè)置元件“陰影”的A1pha透明度為20％，如圖1 3-4 1所示。

在圖層2第1幀處設(shè)置補(bǔ)間動(dòng)作，如圖1 3—42所示。

打開圖層1第一幀“屬性”，檢查器的“自定義緩入／緩出”面板，按鍵【Ctrl】+【c】復(fù)制緩動(dòng)效果。打開圖層2第一幀處的“自定義緩入／緩出”面板，按I Ctrl 】+【V】組合鍵，將其粘貼到陰影動(dòng)畫補(bǔ)間中。

5．發(fā)布動(dòng)畫

使用“文件”|“發(fā)布”菜單命令進(jìn)行發(fā)布。

實(shí)驗(yàn)四 層疊樣式與層的應(yīng)用

一、實(shí)驗(yàn)?zāi)康募耙?1.掌握層的正確定位方法

2.學(xué)會(huì)利用層來制作彈出式菜單 3.了解時(shí)間軸的編輯特點(diǎn)和方法 4．學(xué)會(huì)定義和應(yīng)用CSS樣式

二、實(shí)驗(yàn)學(xué)時(shí)

6學(xué)時(shí)

三、實(shí)驗(yàn)內(nèi)容

任務(wù)一：利用層制作彈出菜單

步驟：

l準(zhǔn)備工作

在c盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。將給定的素材文件存入其中。

2．建立本地站點(diǎn)

啟動(dòng)Dreamweaver·8，用已學(xué)方法建立本地站點(diǎn)。3．利用圖層制作下拉彈出菜單

(1)新建一個(gè)空白頁(yè)面，選擇“修改”I“頁(yè)面屬性”菜單命令，設(shè)置頁(yè)面的背景顏色為#FFCC99，左邊距為0，上邊距為0。

(2)在文檔第一行插入一行文字“電子信息職業(yè)技術(shù)學(xué)院”作為站點(diǎn)標(biāo)題，字體為華文行楷，大小為48號(hào)字，顏色為#FF9933。

(3)在標(biāo)題的下一行插入一個(gè)l行5列的表格，表格寬度800像素，邊框粗細(xì)為l，高 度30，平均分配各列(每列寬度為160像素)，表格背景顏色為#9999FF。

(4)在表格的各列分別寫入“首頁(yè)”、“學(xué)院概況”、“師資建設(shè)”、“系部設(shè)置”、“招生就業(yè)”，各單元格文字對(duì)齊方式為居中對(duì)齊，文字為粗體顯示。如圖16—16所示。

(5)在“學(xué)院概況”列中添加一個(gè)圖層，命名為“Layerl”，注意不可見元素“層錨記”應(yīng)在此列當(dāng)中。如果不在，可用鼠標(biāo)將其拖到此列中。然后在圖層中添加一個(gè)3行l(wèi)列的表格，表格寬度為160像素，各行高度為30像素，邊框粗細(xì)為1，單元格文字為居中對(duì)齊，表格背景顏色為#9999F’F，文字為粗體顯示。三個(gè)單元格內(nèi)容為“學(xué)院簡(jiǎn)介”、“辦學(xué)思想”、“校園風(fēng)景”，如圖16．17所示。

(6)同樣在其他幾列中也分別添加圖層，各自命名為“Layer2'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“隊(duì)伍建設(shè)、名師風(fēng)采、優(yōu)秀教師”；L,ayer3中插入5行l(wèi)列的表格，表格屬性與L,ayerl中的相同，內(nèi)容為“機(jī)電技術(shù)系、電子技術(shù)系、計(jì)算機(jī)應(yīng)用系、計(jì)算機(jī)網(wǎng)絡(luò)系、計(jì)算機(jī)軟件系”；Layer4中插入2行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“招生信息、就業(yè)信息”。如圖16—18所示。

(7)調(diào)整各層的位置。注意：層的調(diào)整非常重要，不同的瀏覽器窗口大

小，不同的分辨率，層的位置顯示都不是一樣。即使在同一個(gè)機(jī)器上調(diào)整瀏覽器的窗口大小，都會(huì)出現(xiàn)位置的變動(dòng)。Dreamweaver中并不是所見即所得，需要我們來精確定位才會(huì)達(dá)到滿意的效罘。為此，首先固定表格的寬度，本例中將表格固定為寬度800，高度30。然后固定層的位置，這

個(gè)位置需要計(jì)算一下，計(jì)算公式并不是很難。本例中表格總寬度為800，共有5列，這樣每列的橫坐標(biāo)起始位置的計(jì)算公式為：

800÷5*(當(dāng)前列一1)對(duì)于“Layerl”，當(dāng)前列為2，所以結(jié)果為160。

最后加上一個(gè)將要?jiǎng)?chuàng)建的層與原表格列偏移值，那么計(jì)算各列下屬的層的橫坐標(biāo)公式變?yōu)椋?/p>

800--5x(當(dāng)前列-1)+偏移量

這個(gè)偏移量需要通過大家試驗(yàn)來最終確定，因?yàn)椴煌淖煮w和寬度這個(gè)值是不同的。這里測(cè)試滿意的效果是-1，所示Layer1的實(shí)際工資起始橫坐標(biāo)為159據(jù)這個(gè)公式將各個(gè)層的位置設(shè)定好，最好不要用鼠標(biāo)禾移功定位。要使用“屬性”檢查器來設(shè)置。(8)打開“層，面板，將Layerl～Layer4都設(shè)置為隱藏狀態(tài)。．

(9)在窗口左下方選中第2列“學(xué)院概況”所在單元格的標(biāo)簽選擇器，在“行為”面板中為其添加“顯示一隱藏層’’行為，將“Layerl”設(shè)定為“顯示”，如圖16-19所示。

(10)更改行為的觸發(fā)事件為“onMouseOver”。(11)再次選中第二列的標(biāo)簽選擇器，在‘‘行為’’面板中為其添加“顯示一隱藏層”行為，設(shè)定圖層Layerl為‘‘隱藏”，并更改此行為的觸發(fā)事件為“onlMoluseOut”。．

(12)重復(fù)步驟9～1l，為第三列、第四列、第五列添加顯示與隱藏圖層的行為。

4．保存與預(yù)覽

保存文件為Index．html，然后按IFl2]鍵進(jìn)行預(yù)覽。當(dāng)移動(dòng)鼠標(biāo)到菜單時(shí)，將顯示當(dāng)前菜單項(xiàng)所屬的子菜單內(nèi)容，當(dāng)鼠標(biāo)離開顯示的子菜單時(shí)，子菜單隱藏，返回初始狀態(tài)。最終效果如圖16—20所示。

5．為下拉菜單設(shè)置超級(jí)鏈接

(1)根據(jù)菜單內(nèi)容，建立相應(yīng)的其他頁(yè)面文件。(2)為各菜單項(xiàng)設(shè)置跳轉(zhuǎn)到這些頁(yè)面的超級(jí)鏈接。(3)再次保存文件并預(yù)覽效果。任務(wù)二：時(shí)間軸 步驟：

1．準(zhǔn)備工作

在C。盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。在此站點(diǎn)中再建一個(gè)images子文件夾，將給定的素材存入其中。2．建立本地站點(diǎn)

啟動(dòng)Dreamweaver 8，用已學(xué)方法建立本地站點(diǎn)。

3.利用時(shí)間軸使層做直線運(yùn)動(dòng)

(1)打開給定的網(wǎng)頁(yè)文件sx17-1-1.htm，在網(wǎng)頁(yè)上插入一個(gè)層”Layerl",并將其位置調(diào)整好，然后在其中插入給定的圖片imgl．gif,圖片大小為64×64。如圖17-9所示.(2)打開“時(shí)間軸”面板，把圖層Layerl拖到“時(shí)間軸’’面板上，單擊最后一幀關(guān)鍵幀，并將其拖到第100幀的位置。再單擊圖層Layerl，將 Layerl水平拖動(dòng)到頁(yè)面的右側(cè)。如圖17-10所示。

(3)選中“時(shí)間軸”面板上的“自動(dòng)播放”和“循環(huán)”選項(xiàng)。

(4)將文件另存為sxl7-1-3．htm，并在瀏覽器中預(yù)覽，即可看到小豬從頁(yè)面左側(cè)運(yùn)動(dòng)到 右側(cè)，并循環(huán)播放。

4．利用時(shí)間軸使層做軌跡運(yùn)動(dòng)

(1)打開剛才保存的sxl7-1-3．htm文檔，再插入一個(gè)圖層Layer2，并將給定的圖片img2．Gif插入其中，設(shè)置圖片和層的大小均為100*100，如圖17-11所示。

(2)右擊“時(shí)間軸”面板的動(dòng)畫通道，在彈出的快捷菜單中選擇“添加時(shí)間軸”命令，新添加的時(shí)間軸為“Timeline2'’。

(3)選中頁(yè)面中的圖層Layer2，并單擊右鍵，在彈出的快捷菜單中選擇

“記錄路徑”命令，緊接著用鼠標(biāo)拖動(dòng)層左上角的標(biāo)記在頁(yè)面上移動(dòng)繪制路徑，釋放鼠標(biāo)，在頁(yè)面上出現(xiàn)了一條灰色的路徑。同時(shí)，時(shí)間軸上也出現(xiàn)了一個(gè)有多個(gè)關(guān)鍵幀的動(dòng)畫條。如圖17-12所示。

(4)選中“時(shí)間軸”面板上的“自動(dòng)播放”和“循環(huán)”選項(xiàng)。

(5)保存文件，并在瀏覽器中預(yù)覽，即可看到小豬從頁(yè)面左側(cè)運(yùn)動(dòng)到右側(cè)的同時(shí)，另一小豬在頁(yè)面上按繪制的軌跡進(jìn)行移動(dòng)，并循環(huán)播放。5．給移動(dòng)的小豬添加行為和超級(jí)鏈接

(1)選中頁(yè)面中的Layer2，打開“行為”面板，單擊“+”按鈕，從彈出的菜單中選擇“時(shí)間軸”I“停止時(shí)間軸”命令。然后從對(duì)話框中選擇“1'imeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseover。(2)再次單擊“行為”面板的“+”按鈕，從彈出的菜單中選擇“時(shí)間軸”}“播放時(shí)間軸”命令。然后從對(duì)話框中選擇“Timeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseout。

(3)選中Layer2層中的圖片，在“屬性”檢查器的鏈接欄中輸入“sxl7-1-2．htm'’(預(yù)先編輯好的網(wǎng)頁(yè))，在替代欄中輸入“單擊有驚喜”。

(4)保存文件，并在瀏覽器中預(yù)覽，即可看到當(dāng)鼠標(biāo)指向小豬時(shí)，小豬停止移動(dòng)；當(dāng)鼠標(biāo)離開小豬時(shí)，小豬繼續(xù)移動(dòng)。當(dāng)鼠標(biāo)單擊小豬時(shí)，跳轉(zhuǎn)到sxl7-1-2．htm頁(yè)面。

任務(wù)三：利用CSS樣式改變頁(yè)面風(fēng)格 步驟：

1．準(zhǔn)備工作

在c盤或其他盤新建一個(gè)文件夾，作為站點(diǎn)文件夾。將給定的網(wǎng)頁(yè)文件及素材文件夾存入該文件夾中。

2．建立本地站點(diǎn)

啟動(dòng)Dreamweaver 8，用已學(xué)方法建立本地站點(diǎn)。3．自定義樣式的定義及應(yīng)用

(1)打開站點(diǎn)中給定的sx20．1．1．htm文檔。(2)選擇“窗口”I‘‘樣式”菜單命令，將“CSS樣式”面板打開。(3)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對(duì)話框。在選擇器類型處選擇“類(可應(yīng)用于任何標(biāo)簽)”，名稱處輸入“ysl”，定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。

(4)在彈出的“ysl的CSS樣式定義”對(duì)話框中，進(jìn)行如圖20-25所示的樣式定義(類型：字體為隸書，大小為36像素，顏色為#0033FF；區(qū)塊：文字對(duì)齊為居中)。

(5)用同樣的方法定義樣式“ys2”，定義內(nèi)容如圖20-26所示(類型：

字體為華文新魏，大小為24像素；區(qū)塊：文字對(duì)齊為居中)。

(6)用同樣的方法定義樣式“ys3”，定義內(nèi)容如圖20—27所示(類型：字體為隸書，大小為36像素，粗細(xì)為粗體，#00CC33；區(qū)塊：文字對(duì)齊為居中)。

(7)下面開始應(yīng)用已定義的樣式。選中第一行標(biāo)題“唐詩(shī)欣賞”，單擊右鍵，選擇“CSS樣式y(tǒng)sl，(或者用前面介紹的其他方法來應(yīng)用ysl)，這時(shí)標(biāo)題已變成所定義的樣式了。用同樣的方法，將每首詩(shī)的詩(shī)文內(nèi)容應(yīng)用

‘‘ys2’’，將每首詩(shī)的標(biāo)題段落應(yīng)用“ys3”。效果如圖20-28所示。

(8)修改頁(yè)面的背景風(fēng)格。首先為頁(yè)面設(shè)置背景圖像(站點(diǎn)中images文件夾中的bj．jpg文件)，效果如圖20-29所示。由于選擇的背景圖像的尺寸不夠大，在頁(yè)面中圖像會(huì)以不斷重復(fù)的形式鋪滿整個(gè)頁(yè)面，視覺效果不夠理想。

(9)在“CSS樣式”面板新建自定義樣式“ys4”，在樣式定義對(duì)話框中，背景樣式的設(shè)置如圖20—30所示(背景：重復(fù)為不重復(fù)，附件為固定，水平位置為居中，垂直位置為居中)。

(10)選擇文檔窗口左下方的標(biāo)簽選擇器<．body>，然后單擊右鍵，從下拉列表中選擇“設(shè)置類，ys4”，文檔應(yīng)用樣式y(tǒng)s4后的效果如圖20-31所示。當(dāng)預(yù)覽時(shí)會(huì)發(fā)現(xiàn)背景圖像居中并不再重復(fù)，且當(dāng)用鼠標(biāo)滾動(dòng)游覽文字時(shí)，背景圖像保持靜止，而不隨文字的滾動(dòng)而滾動(dòng)。

4．重定義特定標(biāo)簽外觀

(1)單擊“CSS樣式”面板下方的“新建(；SS樣式”按鈕，打開新建樣式對(duì)話框，選擇器類型處選擇“標(biāo)簽(重定義特殊標(biāo)簽的外觀)”，標(biāo)簽處下拉列表選擇“l(fā)n定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。

(2)在彈出的“l(fā)i的CSS樣式定義”對(duì)話框中，進(jìn)行如圖20-32所示的樣式定義(類型：字體為華文新魏，大小為24像素；列表：項(xiàng)目符號(hào)圖像為0001．gif)。

(3)單擊“確定”按鈕，發(fā)現(xiàn)頁(yè)面列表外觀發(fā)生了變化。效果如圖20-33

所示。

(4)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對(duì)話框，選擇器類型處選擇“標(biāo)簽(重定義特殊標(biāo)簽的外觀)”，標(biāo)簽處下拉列表選擇“a”，定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。

(5)在彈出的‘‘a(chǎn)的cSS樣式定義”對(duì)話框中，進(jìn)行定義，其中類型分類中只將修飾選擇為‘‘無”。單擊“確定”后，頁(yè)面中超級(jí)鏈接的下劃線處的修飾沒有了，如圖20-33所示。

5．鏈接文字技術(shù)

(1)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對(duì)話框，選擇器類型處選擇“高級(jí)(ID、偽類選擇器等)”，選擇器處下拉列表選擇“a：link”，定義在處選擇“僅對(duì)該文檔”。單擊“確定”按鈕。

(2)在彈出的“a：link的(；SS樣式定義”對(duì)話框中，進(jìn)行如圖20—34所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#CC0099，修飾為無)。

(3)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，在對(duì)話框中其他選項(xiàng)不變，只將選擇器選為“a：hover'。然后在“a：hover的CSS樣式定義”對(duì)話框中，進(jìn)行如圖20—35所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#FF0000，修飾為下劃線)。

(4)單擊“確定”按鈕，關(guān)閉定義對(duì)話框。預(yù)覽時(shí)可以看到當(dāng)鼠標(biāo)指針移到超級(jí)鏈接文字時(shí)，文字變?yōu)榧t色且出現(xiàn)下劃線修飾。

(5)將網(wǎng)頁(yè)另存為Index．．html，按【F12】預(yù)覽網(wǎng)頁(yè)，觀察各種樣式的應(yīng)用效果。

實(shí)驗(yàn)五

網(wǎng)頁(yè)綜合設(shè)計(jì)

一、實(shí)驗(yàn)?zāi)康募耙?/p>

利用所學(xué)的網(wǎng)頁(yè)設(shè)計(jì)的方法來設(shè)計(jì)一個(gè)個(gè)性化的網(wǎng)站，網(wǎng)站的內(nèi)容一定要合理，內(nèi)容健康，頁(yè)面美觀。

二、實(shí)驗(yàn)學(xué)時(shí)

6學(xué)時(shí)

三、實(shí)驗(yàn)內(nèi)容

自己設(shè)計(jì)

第三篇：網(wǎng)站規(guī)劃書與網(wǎng)頁(yè)制作實(shí)驗(yàn)報(bào)告

網(wǎng)站規(guī)劃書

一、主題選擇

本次網(wǎng)站設(shè)計(jì)大作業(yè)我們選擇了建立一個(gè)個(gè)人主頁(yè)的主題，最后綜合實(shí)際電腦操作水平，決定主要由***進(jìn)行實(shí)際的操作，我輔助進(jìn)行素材整理和網(wǎng)站規(guī)劃書和網(wǎng)站設(shè)計(jì)與制作的實(shí)驗(yàn)報(bào)告的撰寫。

二、網(wǎng)頁(yè)內(nèi)容

1.“首頁(yè)”頁(yè)面，首頁(yè)我們?cè)O(shè)計(jì)了各個(gè)子網(wǎng)頁(yè)的導(dǎo)航、友情鏈接以及聯(lián)系我們板塊，友情鏈接可以讓我們進(jìn)入其它不同的學(xué)習(xí)參考網(wǎng)站，可以獲得一些有用的信息，同時(shí)得到獲得這些信息的便捷性，體驗(yàn)專業(yè)性和個(gè)性化的差別。同時(shí)，聯(lián)系我們以及包括在內(nèi)的用戶注冊(cè)，能讓瀏覽者與我們建站者互動(dòng)，因而能使我們的網(wǎng)站不斷完善，做得更好。

2.“我的日志”頁(yè)面，我們摘錄了***同學(xué)所寫的兩篇空間日志，插入了土豆網(wǎng)的播放器，選取了精彩的視頻，向?yàn)g覽者介紹***同學(xué)的一些個(gè)人經(jīng)歷，也獻(xiàn)上了一席視覺盛宴。這里還有歌曲的改編、二胡的奏唱，還有令人感動(dòng)的文章。

3.“我的相冊(cè)”頁(yè)面，我們插入了一個(gè)Flash相片展示舞臺(tái)，主要展示了***同學(xué)此前旅游時(shí)所拍的照片，向?yàn)g覽者展示另一個(gè)側(cè)面的他。

4.“我的愛好”頁(yè)面，是一段Flash視頻的展示，同樣展示了***同學(xué)的個(gè)人興趣。

三、網(wǎng)站風(fēng)格

通過思考和討論，我們決定將紅色調(diào)作為網(wǎng)站的主色調(diào)，并且我們大量運(yùn)用Flash元素、JavaScript代碼使網(wǎng)站風(fēng)格現(xiàn)代化、美觀化，給瀏覽者以最好的體驗(yàn)。

四、網(wǎng)頁(yè)布局

網(wǎng)頁(yè)采用表格布局的模式，雖然沒有通過模板的使用來制作網(wǎng)站，但是我們使用了一個(gè)母頁(yè)面來做到全站布局的統(tǒng)一，結(jié)構(gòu)整齊，分類內(nèi)容一目了然。

五、多媒體素材的使用

我們?cè)诙鄠€(gè)頁(yè)面加入了背景音樂，并在每個(gè)頁(yè)面中加入了大量?jī)?yōu)質(zhì)的圖文。這些圖片部分來自于網(wǎng)絡(luò)，但我們使用Photoshop，處理成我們需要的形式，或是以它們?yōu)樗夭淖龈玫膱D片。使用的工具軟件

Dreamweaver 8（部分通過Dreamweaver CS6）

Photoshop CS6

FlashProfessionalCS6

Word2010

網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)驗(yàn)報(bào)告

一、制作組成員

12******班

120310** ***，120310** ***

二、網(wǎng)頁(yè)制作中使用的技術(shù)及方法

由于網(wǎng)頁(yè)制作使用的軟件中最重要的是Dreamweaver8，因此使用其他軟件的方法就不一一列舉。

1.善于利用母頁(yè)面。

2.Flash的使用。其簡(jiǎn)易的使用和制作方法，為網(wǎng)站帶來了很大方便，并且也兼顧了效果。

3.JavaScript的使用。合理的使用JavaScript，能使網(wǎng)頁(yè)實(shí)現(xiàn)更多功能，或者使網(wǎng)頁(yè)更加美觀。但此方法涉及到編程，對(duì)于大部分同學(xué)都很有難度。

4.其他的Photoshop技術(shù)以及網(wǎng)頁(yè)Flash中所用的Action Script就不再詳細(xì)介紹。

三、組員分工

***：查找和整理資料，完成網(wǎng)頁(yè)的模板制作和內(nèi)容加入，解決技術(shù)問題并且通過技術(shù)美化網(wǎng)頁(yè)。

***：查找和整理資料，撰寫規(guī)劃書和實(shí)驗(yàn)報(bào)告。

網(wǎng)站的規(guī)劃和結(jié)構(gòu)設(shè)置是我們共同討論的結(jié)果。

四、制作中遇到的問題及解決方法

本部分由組員***撰寫。

實(shí)際上在網(wǎng)頁(yè)制作過程中遵循注意事項(xiàng)并理解網(wǎng)頁(yè)結(jié)構(gòu)，只是制作一個(gè)簡(jiǎn)單的功用小的網(wǎng)站不是一件難事。在本次制作中遇到的最大困難就是代碼以及編程語言知識(shí)的匱乏，難以制作出更漂亮的效果。因此，最為困難的一步便是JavaScript的編寫。通過閱讀書上給的一部分事例，我掌握了一些基本的語句結(jié)構(gòu)和語句用法但是感覺嵌入自己的頁(yè)面卻無從下手，所以我只能上網(wǎng)搜尋相關(guān)代碼知識(shí)并試著自己去理解。最終我將我所理解的這一代碼成功地插入了目標(biāo)網(wǎng)頁(yè)中，達(dá)到了需求的效果。然而遺憾的是，由于時(shí)間問題，沒有加入更多的代碼豐富我們的網(wǎng)站。

實(shí)驗(yàn)中遇到的大部分問題我都通過自己摸索和在線搜索解決了，并且在和別的同學(xué)交流的過程中，我對(duì)每項(xiàng)功能的具體原理和實(shí)現(xiàn)方法又有了更深層次的了解。不過我還有一些問題無法得到解決，同時(shí)也是我困惑已久的問題。一是比Dreamweaver 8更新的Dreamweaver CS6上卻難以找到許多Dreamweaver 8上的功能，比如在Dreamweaver CS6找不到怎樣插入層；二是不知道如何保證不同品牌，不同版本的瀏覽器獲得同樣的最佳觀賞效果。我也希望能在日后的深入學(xué)習(xí)當(dāng)中解決這些疑惑。

五、實(shí)驗(yàn)總結(jié)

網(wǎng)頁(yè)制作是最能體現(xiàn)團(tuán)隊(duì)合作的一個(gè)實(shí)驗(yàn)操作，我們通過不同的分工，認(rèn)認(rèn)真真的完成了每個(gè)人應(yīng)該完成的任務(wù)而且做到都非常出色，這都體現(xiàn)了我們兩個(gè)人的默契，更使得這次實(shí)驗(yàn)配合的非常成功。我們也深刻學(xué)習(xí)到了Photoshop、Flash、Dreamweaver等軟件的操作程序，只能說做網(wǎng)頁(yè)是從一開始制作就是一件浩大的工程，得花很多時(shí)間和精力，但是在這過程中很好地鍛煉了我們的動(dòng)手能力和整體性思維，我們很高興我們最終制作出來的網(wǎng)站很主觀的表達(dá)了我們兩個(gè)人的想法，最終做出了這個(gè)符合我們網(wǎng)站規(guī)劃的個(gè)人網(wǎng)站！

第四篇：《網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)制作》學(xué)習(xí)心得

《網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)制作》的總結(jié)

不知不覺，我已經(jīng)學(xué)習(xí)《網(wǎng)頁(yè)設(shè)計(jì)與制作》這門課程一個(gè)學(xué)期了，雖然時(shí)間有點(diǎn)短，但這一個(gè)學(xué)期以后我卻受益匪淺，不僅讓我全面的、系統(tǒng)的學(xué)會(huì)了網(wǎng)頁(yè)設(shè)計(jì)與制作的基礎(chǔ)知識(shí)，還讓我學(xué)會(huì)了自己動(dòng)手去制作屬于自己的網(wǎng)頁(yè)，這對(duì)于我來說是很值得高興的，能讓我在以后的工作生活中更好的展現(xiàn)自己。下面來談?wù)勎乙粋€(gè)學(xué)期來對(duì)這門課的打比方總結(jié)。

比如建立一個(gè)網(wǎng)站就像蓋一幢大樓一樣，它是一個(gè)系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個(gè)步驟，按部就班地一步步來，才能設(shè)計(jì)出一個(gè)滿意的網(wǎng)站。

一、確定網(wǎng)站主題

網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個(gè)網(wǎng)站必須要有一個(gè)明確的主題。特別是對(duì)于個(gè)人網(wǎng)站，你不可能像綜合網(wǎng)站那樣做得內(nèi)容大而全，包羅萬象。你沒有這個(gè)能力，也沒這個(gè)精力，所以必須要找準(zhǔn)一個(gè)自己最感興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網(wǎng)站的主題無定則，只要是你感興趣的，任何內(nèi)容都可以，但主題要鮮明，在你的主題范圍內(nèi)內(nèi)容做到大而全、精而深。

二、搜集材料

明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書、報(bào)紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁(yè)的素材。

三、規(guī)劃網(wǎng)站

一個(gè)網(wǎng)站設(shè)計(jì)得成功與否，很大程度上決定于設(shè)計(jì)者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計(jì)師設(shè)計(jì)大樓一樣，圖紙?jiān)O(shè)計(jì)好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁(yè)之前把這些方面都考慮到了，才能在制作時(shí)駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁(yè)才能有個(gè)性、有特色，具有吸引力。如何規(guī)劃網(wǎng)站的每一項(xiàng)具體內(nèi)容，我們?cè)谙旅鏁?huì)有詳細(xì)介紹。

四、選擇合適的制作工具

盡管選擇什么樣的工具并不會(huì)影響你設(shè)計(jì)網(wǎng)頁(yè)的好壞，但是一款功能強(qiáng)大、使用簡(jiǎn)單的軟件往往可以起到事半功倍的效果。網(wǎng)頁(yè)制作涉及的工具比較多，首先就是網(wǎng)頁(yè)制作工具了，在這里，我們一般都是用有“網(wǎng)絡(luò)三劍客”之稱的

Dreamweaver、Fireworks、flash來制作網(wǎng)頁(yè)。

五、制作網(wǎng)頁(yè)

材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個(gè)復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡(jiǎn)單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁(yè)時(shí)，先把大的結(jié)構(gòu)設(shè)計(jì)好，然后再逐步完善小的結(jié)構(gòu)設(shè)計(jì)。所謂先簡(jiǎn)單后復(fù)雜，就是先設(shè)計(jì)出簡(jiǎn)單的內(nèi)容，然后再設(shè)計(jì)復(fù)雜的內(nèi)容，以便出現(xiàn)問題時(shí)好修改。在制作網(wǎng)頁(yè)時(shí)要多靈活運(yùn)用模板，這樣可以大大提高制作效率。

六、上傳測(cè)試

網(wǎng)頁(yè)制作完畢，最后要發(fā)布到Web服務(wù)器上，才能夠讓全世界的朋友觀看，現(xiàn)在上傳的工具有很多，有些網(wǎng)頁(yè)制作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網(wǎng)站發(fā)布到自己申請(qǐng)的主頁(yè)存放服務(wù)器上。網(wǎng)站上傳以后，你要在瀏覽器中打開自己的網(wǎng)站，逐頁(yè)逐個(gè)鏈接的進(jìn)行測(cè)試，發(fā)現(xiàn)問題，及時(shí)修改，然后再上傳測(cè)試。全部測(cè)試完畢就可以把你的網(wǎng)址告訴給朋友，讓他們來瀏覽。

七、推廣宣傳

網(wǎng)頁(yè)做好之后，還要不斷地進(jìn)行宣傳，這樣才能讓更多的朋友認(rèn)識(shí)它，提高網(wǎng)站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊(cè)、與別的網(wǎng)站交換鏈接、加入ican博彩通等。

八、維護(hù)更新

網(wǎng)站要注意經(jīng)常維護(hù)更新內(nèi)容，保持內(nèi)容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補(bǔ)充新的內(nèi)容，才能夠吸引住瀏覽者。

以上就是我對(duì)于網(wǎng)頁(yè)制作的一些個(gè)人心得，由于本人的技術(shù)還不是很成熟，可能還存在很多的不足和錯(cuò)誤。選擇學(xué)習(xí)這門課是很正確的選擇，雖然在以后不會(huì)再有機(jī)會(huì)去上了，但我還是會(huì)通過各種方式繼續(xù)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)和制作的，同時(shí)很感謝帶我入門的老師，讓我有機(jī)會(huì)去學(xué)習(xí)有關(guān)網(wǎng)頁(yè)的知識(shí)。

第五篇：網(wǎng)頁(yè)制作畢業(yè)論文

一 引 言

隨著Internet的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設(shè)中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個(gè)家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實(shí)力，推銷你的產(chǎn)品，網(wǎng)頁(yè)制作作為網(wǎng)站制作中一個(gè)重要的環(huán)節(jié)，相對(duì)于傳統(tǒng)的平面設(shè)計(jì)而言，網(wǎng)頁(yè)設(shè)計(jì)具有更多的新穎性，更多可以表現(xiàn)的手法。結(jié)合本人的實(shí)習(xí)過程，現(xiàn)就網(wǎng)站建設(shè)與管理過程中，網(wǎng)頁(yè)設(shè)計(jì)與制作的具體經(jīng)歷，包括：網(wǎng)頁(yè)設(shè)計(jì)與制作過程中的網(wǎng)頁(yè)布局、色彩構(gòu)置，框架結(jié)構(gòu)等相關(guān)事項(xiàng)做以下論述。

二 網(wǎng)站建設(shè)的流程

1.定義合適的域名。由域名構(gòu)成的網(wǎng)址會(huì)像商標(biāo)一樣，有助于將來塑造網(wǎng)上的形象。域名除了要符合公司的性質(zhì)以及信息內(nèi)容的特征外，還要具有簡(jiǎn)潔、易記、具有沖擊力的特點(diǎn)。

2.租用虛擬服務(wù)器。有了域名后，就需要一個(gè)空間存放網(wǎng)站，這個(gè)空間就是Internet上的服務(wù)器。一般虛擬主機(jī)提供商都能向用戶提供大容量、高速度的服務(wù)器，用戶可根據(jù)網(wǎng)站的內(nèi)容設(shè)置及其發(fā)展前景來選擇。

3.設(shè)計(jì)網(wǎng)頁(yè)。網(wǎng)頁(yè)的設(shè)計(jì)制作可以自己完成，也可以通過虛擬主機(jī)提供商或?qū)I(yè)的網(wǎng)頁(yè)設(shè)計(jì)制作商來完成。設(shè)計(jì)網(wǎng)頁(yè)前要收集所有需要放在網(wǎng)站上的文本資料、圖片等，并盡量用文字詳細(xì)說明制作的框架結(jié)構(gòu)，將收集的材料提供給網(wǎng)頁(yè)設(shè)計(jì)者。

4.ICP備案。網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營(yíng)活動(dòng)，打擊不良互聯(lián)網(wǎng)信息的傳播，如果網(wǎng)站不備案的話，很有可能被查處以后關(guān)停。ICP備案可以自主通過官方備案網(wǎng)站 http://www.tmdps.cn/sale/view.asp?Article ID=288 [4]許凌云，柳勇良.網(wǎng)頁(yè)設(shè)計(jì)全方位學(xué)習(xí)[M].北京：清華大學(xué)出版社，2008，11 [5]陳琳.photoshop cs3 入門實(shí)戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008，11 [6]焦慧.網(wǎng)頁(yè)制作基礎(chǔ)與典型范例[M].北京：電子工業(yè)出版社，2008，7 [7]戎馬工作室.Dreamweaver 8與asp動(dòng)態(tài)網(wǎng)站開發(fā)[M].北京：機(jī)械工業(yè)出版社，2006，5 [8]戴一波.Dreamweaver CS3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社，2008，1 [9]何秀芳.網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)課堂實(shí)錄[M].北京：人民郵電出版社.2009，3 [10]孫連三.新編網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)入門與提高[M].北京：人民郵電出版社.2008，9 [11]鄧文淵.網(wǎng)頁(yè)制作高手FLASH 8[M].北京：人民郵電出版社，2007，6 [12]胡崧.超夢(mèng)幻勁爆網(wǎng)頁(yè)[M].中國(guó)青年出版社.2008，7 [13]Scot Johson etal.using Active Server Page[J].Que 2007 [14]卓越科技.PHOTOSHOP CS3 美工廣告設(shè)計(jì)百煉成精[M].電子科技出版社，2009，3 [15]David Hunter etal，Beginning XML[J].Wrox Press Ltd，2005 [16]楊大勇，李金江.ASP網(wǎng)絡(luò)開發(fā)自學(xué)導(dǎo)航[M].北京：機(jī)械工業(yè)出版社，2007，6 [17]卓越科技.SQL SERVER數(shù)據(jù)庫(kù)開發(fā)培訓(xùn)教程[M].北京：電子工業(yè)出版社，2009，4 [18]李曦琳.WEB導(dǎo)航設(shè)計(jì)[M].北京：電子工業(yè)出版社，2009，3 [19]力誠(chéng)教育.ACCESS 2007完全自學(xué)手冊(cè)[M].成都：四川出版集團(tuán)，2009，3 [20]叢書編委會(huì).ASP動(dòng)態(tài)網(wǎng)頁(yè)編輯[M].北京：清華大學(xué)出版社，2006，10 [21]陳剛.商業(yè)網(wǎng)站開發(fā)從入門到精通[M].科學(xué)出版社，2008，2 8

致 謝

畢業(yè)論文如期完成了，在此我要感謝在畢業(yè)設(shè)計(jì)期間給予我?guī)椭脑S多人。首先，我要特別感謝的是我敬愛的指導(dǎo)老師王琛老師。因?yàn)槭撬麨槲姨峁┝艘粋€(gè)良好的環(huán)境，才使我很好的完成了畢業(yè)設(shè)計(jì)。在設(shè)計(jì)期間他也給與我無私的幫助。在此表示深深的謝意。

正是他的付出，使我找到并改正了許多看起來很明顯的錯(cuò)誤和不嚴(yán)謹(jǐn)?shù)恼撌?。在畢業(yè)設(shè)計(jì)的過程中是愉快的，我很感謝與我設(shè)計(jì)有幫助的每一個(gè)人，是他們的存在，讓我感到了畢業(yè)設(shè)計(jì)的過程中的快樂，使我融入到了團(tuán)隊(duì)工作中，感受到了相互合作的樂趣。

我對(duì)所有人的耐心表示感謝，尤其是我的指導(dǎo)老師王琛老師。他仔細(xì)閱讀了我的論文和程序，并提出了許多寶貴的意見和建議。感謝他能在忙碌的工作中抽時(shí)間指導(dǎo)我。我在與他通過電話和電子郵件的聯(lián)系中很好的把握住了設(shè)計(jì)的進(jìn)度，使設(shè)計(jì)得以順利完成。

最后，當(dāng)然不能忘記幫助過我的老師和同學(xué)。寫論文通常是一項(xiàng)非?？菰锏墓ぷ鳎疫\(yùn)的是他們使這項(xiàng)工作變成了一種樂趣。還有默默無聞幫過我的朋友，也在此表示對(duì)你們誠(chéng)摯的感謝。