序論：寫作是一種深度的自我表達。它要求我們深入探索自己的思想和情感，挖掘那些隱藏在內(nèi)心深處的真相，好投稿為您帶來了七篇網(wǎng)頁的設計與制作范文，愿它們成為您寫作過程中的靈感催化劑，助力您的創(chuàng)作。

篇(1)

Photoshop在圖片處理上具有強大的功能，尤其是對圖像進行精細化操作，更是奠定了其在廣告設計及美術(shù)創(chuàng)作中的堅實地位。當然，在網(wǎng)頁制作模型設計上，Photoshop依然可以憑借其精細化、功能化優(yōu)勢來實現(xiàn)美輪美奐的網(wǎng)頁規(guī)劃效果。

【關(guān)鍵詞】Photoshop 網(wǎng)頁制作 模型設計 實現(xiàn)方法

1 引言

現(xiàn)代網(wǎng)絡技術(shù)的發(fā)展，對網(wǎng)頁制作提出越來越高的要求。Photoshop作為功能強大的圖像處理軟件，同樣在網(wǎng)頁制作設計中不容小覷。如在不同格式文件上兼容性強，圖像處理精度高、誤差少、視覺效果顯著，更成為網(wǎng)頁圖像、動畫、基于Web頁面設計領(lǐng)域的優(yōu)秀工具。

2 Photoshop在網(wǎng)頁建模的獨特優(yōu)勢

2.1 頁面布局功能的靈活性

利用Photoshop來進行網(wǎng)頁設計，主要是利用圖層的特色功效，可以實現(xiàn)不同層次上不同元素的放置，且在進行移動時不會影響其他元素及整體視覺效果。當然，對于圖層空間不僅可以放置單獨頁面要素，還可以放置鏈接，還可以進行疊加，確保不同圖層上不同要素的色彩、亮度、大小等不會出現(xiàn)偏差。由此以來，在進行網(wǎng)頁要素規(guī)劃及布局上，可以依照設計者的思維進行靈活操作，增強了設計自由度。

2.2 修改功能的便捷性

由于網(wǎng)站在設計過程中因客戶的要求而進行修改是常有的，而Photoshop因其便捷的修改功能，可以先通過Photoshop設計出效果圖，然而結(jié)合需求變化來優(yōu)化，最終獲得客戶的滿意。對于其他軟件則無法實現(xiàn)自由、從容的修改。

2.3 網(wǎng)頁瀏覽的快速性

網(wǎng)頁制作的目的在于瀏覽，而瀏覽體驗不僅需要美觀和規(guī)范的視覺效果，還要具有良好的網(wǎng)站交互能力。特別是對于大型網(wǎng)頁架構(gòu)，因加載項目過多，對網(wǎng)速要求過高。但對于Photoshop制作的網(wǎng)頁，多采用裁切體積及文件格式轉(zhuǎn)換，對系統(tǒng)資源占用率較低，從而能夠保障快速的反應速度，提升瀏覽的流暢度。

3 Photoshop網(wǎng)頁制作模型的設計與應用

3.1 Photoshop新建圖像文件

根據(jù)網(wǎng)頁設計模型基本框架要求，首先需要新建圖像文件，以常規(guī)1280*800像素為例，可以設置瀏覽器的圖像寬度、高度為1260*780，選擇RGB色彩模式，便于在Photoshop中利用色彩的疊加營造五彩繽紛的視覺效果。

3.2 Photoshop設計網(wǎng)頁布局

針對不同功能、不同用途的網(wǎng)站，其頁面框架結(jié)構(gòu)也不盡相同。通常情況下，對于視覺的熱點效應多聚焦于左上角。在進行網(wǎng)頁瀏覽時，左上部及上部為視覺中心，其后往下閱讀，呈現(xiàn)出“F”形特征。因此，在頁面布局上，圍繞網(wǎng)站標識、站名、導航條、熱點欄目、頭條等頁面布局要素，來重點優(yōu)化左上部區(qū)域。如對于綜合性網(wǎng)站，通常采用“國”字型頁面布局，最上面為標示欄及廣告條，其次為網(wǎng)站的主體內(nèi)容，再次左右各一列小字號標題欄目，中間側(cè)重于圖文并茂的內(nèi)容，最下面為基本信息，包括版權(quán)、聯(lián)系方式等說明。因此，在設計上，利用Photoshop在頁面上設置“T”型字，形成三塊空間，最上面為標識、廣告條等；左側(cè)為導航欄，右側(cè)為網(wǎng)站主體內(nèi)容；接下來設置不同的頁面圖層，并在不同圖層上進行繪制，結(jié)合Photoshop的圖形、渲染功能來完成。

3.3 Photoshop網(wǎng)頁模型集成

完整的網(wǎng)站需要具備Logo、廣告欄Gif動畫，背景底紋及導航按鈕等。對于網(wǎng)站Logo，利用Photoshop豐富的圖像設計功能來設計獨特的富有個性的標識。如新浪網(wǎng)標識中的“i”通過進行藝術(shù)化處理，將之轉(zhuǎn)換為活靈活現(xiàn)的眼睛，正是傳達“世界在你眼中”的設計理念，增強了視覺動感；再如人人網(wǎng)的標識，利用對“人”字的抽象變形，代表每一個人；輔以圓圈，寓意人際圈，其共同的交集則象征著人與人的協(xié)作、分享、溝通。可見，對于標志的設計，既要從視覺審美上來表達生動的效果，還要從文化內(nèi)涵彰顯豐富的意蘊。Photoshop可以實現(xiàn)對矢量圖形的任意變形而不失真，從而為我們進行自由創(chuàng)作和設計提供了無與倫比的設計環(huán)境。如可以利用鋼筆工具來繪制矢量圖，保存為JPG格式占用空間小，帶來較快的響應速度。

廣告欄多采用GIF動畫，位置多居于網(wǎng)頁的最醒目中間靠上，在動畫內(nèi)容上可以是企業(yè)精神、也可以是產(chǎn)品介紹，以圖像自動切換等方式來呈現(xiàn)。利用Photoshop和ImageReady可以制作出簡單、易用、低系統(tǒng)占用率的GIF動畫，避免了傳統(tǒng)SWF動畫設計對插件的要求。舉例來說明，以600*200像素廣告欄為例，其操作過程如下：首先新建600*200像素文件，分別插入四張不同的圖片到1，2，3，4個圖層里，調(diào)整各圖層中圖形尺寸，使其保持和諧度；分別在4個圖層新建文本圖層，并打出不同的廣告語，與相應圖層進行合并；利用ImageReady，打開后點擊“動畫”面板，復制當前幀，連點3下，使幀數(shù)為4；分別對各幀進行操作，每一幀顯示一個圖層的內(nèi)容；設置動畫延時數(shù)值；轉(zhuǎn)存為GIF動畫格式，預覽效果。

3.4 Photoshop設計底紋背景

在利用Photoshop進行背景設計時，可以利用無限填充功能，只要設計一個背景元素，將之無縫連接并填充整個背景頁面即可。如可以設計一個1*2像素的條形狀背景圖，保存為JPG格式，并填充整個背景，而這個背景文件卻僅有幾k的大小。

3.5 Photoshop設計網(wǎng)頁按鈕

按鈕是網(wǎng)頁制作模型中的必要內(nèi)容，在設計上要注意幾點：一是大小尺寸要以像素為單位，避免圖像失真；二是保存為JPG格式，對于有透明像素的需要改為GIF格式；三是利用Photoshop處理過的源文件要另存為PSD格式，便于后期修改；四是利用切片工具進行切割時要依靠參考線，保持頁面布局一致性，避免爆邊。

4 結(jié)語

總之，利用Photoshop進行網(wǎng)頁制作模型設計，要從網(wǎng)頁整體功能及展示特性上，積極挖掘Photoshop在網(wǎng)頁圖像、動畫、WEB化頁面設計中的優(yōu)勢，提升網(wǎng)頁制作的應用效率。

參考文獻

[1]王春艷，張彥芳.Photoshop在網(wǎng)頁制作中的應用[J].電子制作，2014（02）.

[2]鄧美玲.淺談Photoshop在網(wǎng)頁制作中的應用[J].無線互聯(lián)科技，2015（01）.

篇(2)

關(guān)鍵詞：網(wǎng)頁設計與制作；實訓；拓展訓練；項目實戰(zhàn)

中圖分類號：TP393 文獻標識碼：A 文章編號：1674-7712 （2012） 16-0138-01

《網(wǎng)頁設計與制作》是一門實踐性、操作性和創(chuàng)新性很強的課程，它能很好地鍛煉學生的動手能力和團隊協(xié)作能力，并且還能緊貼市場，做到以典型工作過程為導向，進行實際項目的開發(fā)訓練，使學生應聘的時候不再只是有理論知識，而沒有任何實踐經(jīng)驗。以此來真正做到理論、實踐并行，與企業(yè)的工作需求接軌，培養(yǎng)應用型的專業(yè)人才。

《網(wǎng)頁設計與制作》課程是我院多個專業(yè)的核心課程，如計算機應用技術(shù)、網(wǎng)絡技術(shù)以及廣告設計等專業(yè)都開設了此門課程，該課程對學生的操作練習有較高的要求，實訓的教學內(nèi)容都是融入在課堂教學中，由于課程安排的比較分散，不能有效地集中訓練學生的動手操作能力以及策劃設計網(wǎng)頁的能力，學生在學完該課程之后，有的不能獨立地完成網(wǎng)站規(guī)劃和頁面設計，有的設計效果不能達到預想的功能和視覺效果。因此，實訓課程在《網(wǎng)頁設計與制作》教學中起著比較重要的作用。根據(jù)《網(wǎng)頁設計與制作》課程的這一特點以及我的個人教學經(jīng)驗，下面對《網(wǎng)頁設計與制作》實訓教學談一下自己的意見和看法。

一、提高教師的專業(yè)技能

作為一名教師，他既是課堂的領(lǐng)路人，又是學生學習的輔導者，教師的專業(yè)水平直接影響著學生各方面能力的提高。職業(yè)教育傳授的不僅僅是理論知識，還要傳授學生操作技能，培養(yǎng)學生的動手能力。在高職的教學中《網(wǎng)頁設計與制作》的實訓課程主要就是培養(yǎng)學生的實踐動手能力，要求學生能夠通過所學知識做出優(yōu)秀的作品，因此這門課程對學生的動手實踐能力要求是非常高的，這就要求教師首先要具有較強的實踐操作能力，只有教師具有了一定的項目實踐經(jīng)驗，才能充分地指導學生完成優(yōu)秀的網(wǎng)頁作品。因此，教師平時就要注重理論與實踐相結(jié)合，加強自己的企業(yè)實踐，在補充自身理論知識的同時，還要不斷提高自身的專業(yè)技能和實踐能力。

二、多種教學模式相結(jié)合，培養(yǎng)學生學習興趣

（一）通過優(yōu)秀作品賞析，激發(fā)學生的學習興趣

在授課初始階段，準備一些精彩的網(wǎng)站案例，在課堂上演示。在展示優(yōu)秀網(wǎng)站案例的同時，學習網(wǎng)頁制作技術(shù)之前首先讓學生欣賞優(yōu)美網(wǎng)頁，教師分析網(wǎng)站的整體設計、網(wǎng)頁的結(jié)構(gòu)布局以及顏色搭配，讓學生邊欣賞網(wǎng)站，邊聽教師講解，在美的熏陶中，讓學生能夠感覺到一個好的網(wǎng)站不僅僅有宣傳推廣的作用，它更是一件藝術(shù)品，完成它是需要傾注心血的。

每個教學單元中都去展示相應的網(wǎng)站案例，并且在網(wǎng)站案例展示的同時，引導學生去思考網(wǎng)站的美工、布局以及樣式等都是怎樣完成的，自己能否通過努力完成這樣優(yōu)秀的作品。幾節(jié)課下來，就有不少學生躍躍欲試，從而有效地調(diào)動學生的積極性，激發(fā)學生的學習興趣。

（二）階段測試訓練

通過過程考核，提高學生學習的緊迫感，鞏固學生的階段性學習成果。

首先教師布置本次課的實訓任務，并分析其實訓要點；然后學生根據(jù)本次任務開始制作網(wǎng)頁，教師進行輔導；實訓完成后教師對實訓過程中出現(xiàn)的問題進行分析解決，并選幾位學生的網(wǎng)頁作品進行展示，其他學生對其進行點評。

（三）拓展訓練

可以通過課外興趣小組集體活動等形式，提高學生的人文素養(yǎng)。課余時間充分利用網(wǎng)絡資源進行課外拓展實踐，如果遇到疑難問題學生可以通過”E-mail”和“QQ留言”的方式與輔導教師取得聯(lián)系、化解難題。利用課外拓展實踐的方法對于能力強的學生可以進一步提高他們的操作技能；對于能力差的學生可以解決他們存在的問題。

（四）項目實戰(zhàn)訓練

將實際項目引入進教學，并對其進行任務分解。

例如讓學生制作各行業(yè)的門戶網(wǎng)站，首先教師以客戶的角色為學生布置項目，學生進行市場調(diào)研，撰寫需求分析報告；然后學生自己制定項目實施計劃，進行項目設計實施；教師再以客戶的角色驗收項目，進行評價；最后學生撰寫項目總結(jié)。以這樣一個過程讓學生在開發(fā)實際項目中提高職業(yè)能力，培養(yǎng)他們的工程意識。

三、增加實訓課程的課時，提高學生的動手能力

實訓課程主要是在強化理論知識的同時提高學生的操作技能，因此實訓課程必須是以學生操作為主，教師輔導為輔，在實訓過程中幫助學生解決遇到的問題。從網(wǎng)站的策劃、素材的搜集到網(wǎng)站頁面的設計布局、網(wǎng)頁的制作以及網(wǎng)站的測試與等等，學生都要自己獨立去完成，在整個實訓過程中學生會遇到不同程度的問題，教師可以在旁協(xié)助。學生就在這樣一個不斷遇到問題、解決問題的過程中提高自己的能力。實訓結(jié)束后有不少學生會感慨到實訓一個禮拜比上一個學期的課學到的知識要多很多。因此實訓不僅僅是學生制作網(wǎng)站的過程，更是學生自我學習，自我提高，自我評價的過程。

同時實訓的環(huán)境也是非常重要的，實訓課程基本都是在微機室完成的，在微機室里學生可以實現(xiàn)一人一機，并且每臺電腦都直接與互聯(lián)網(wǎng)相連，學生在實訓過程中，可以上網(wǎng)查找相關(guān)資料，搜集所需素材，解決實訓中遇到的問題，同時還可以直接通過教師、同學的幫助快速解決問題。

四、結(jié)束語

《網(wǎng)頁設計與制作》是一門專業(yè)性很強的課程，在教學過程中突破傳統(tǒng)理論教學和講解為主的模式，把課程中的理論內(nèi)容，合理地穿插到實踐教學中，把原來枯燥、單調(diào)的講解通過實踐環(huán)節(jié)讓學生消化和掌握。通過實訓達到高職高專學生的培養(yǎng)目標。體現(xiàn)以學生為本，最大限度地調(diào)動學生自主學習的積極性，培養(yǎng)了學生的綜合能力，使學生掌握一門技巧，這樣對教師也是一種鍛煉和提高。

參考文獻：

[1]瞿江.淺談網(wǎng)頁制作實訓教學[J].電腦知識與技術(shù)，2011，26.

篇(3)

在實際的教學中，主要從以下幾個方面來進行。

1.選擇適合的項目。項目的確定不是隨便進行的。第一，所選擇的項目要能夠?qū)⒋蟛糠值闹R點都包含在內(nèi)，還有能夠與較多的知識點相結(jié)合；第二，項目的難易程度的確定，要根據(jù)學生的實際水平來確定；第三，所選擇的項目要能夠被大多數(shù)的學生接受并且喜愛。因此，項目的選擇是第一步，也是比較關(guān)鍵的一步。

2.項目的設計。對網(wǎng)頁設計與制作專業(yè)的學生來說，他們主要的學習內(nèi)容就是將網(wǎng)頁進行美化以及實現(xiàn)網(wǎng)頁的功能，要能夠掌握基本的Html語言，要會使用Dreamweaver、Photoshop以及Flash等軟件來進行美觀并且實用的網(wǎng)頁的設計。網(wǎng)站的建設可作為一個整體的項目，之下可以分出一些子項目。可以以“在線留言板”來作為課題。它包含了HTML、CSS以及VBScript這三個方面的內(nèi)容，與學生的學習能力比較適宜，此外，它也是比較通用的，在很多的網(wǎng)站上都是不可或缺的，有應用價值。首先將學生分成小組，每一個組都要有一個組長，組長來進行項目任務的分配，每一個組員都要有專門的職責，并且要定期的進行會議的召開，來報告各自的工作進度。如果有哪一個人遇到了困難，小組之間要共同的解決。

3.項目信息的收集。在這個階段，要使學生對項目進行熟悉。在教師將項目確定好之后每一個學生都要根據(jù)項目的要求以及自身的情況，來對相關(guān)的信息進行收集整理以及分析，然后確定工作的計劃。

4.確定方案。學生經(jīng)過分組討論之后，要確定最佳的方案。將個人工作與小組工作相互結(jié)合，每個人要事先做好計劃，小組間來進行討論，小組的每一個成員都要提出自己的意見和看法，最終來確定最好的方案。在此過程中，教師要進行指導。

5.項目實施。計劃方案確定之后，小組內(nèi)的每一個學生都要按照計劃方案來進行計劃的實施。項目組長來將任務劃分給每一個同學，每一個同學都負責不同的部分，并且要獨立的完成任務。

6.教師檢查項目。在項目完成之后，學生要對項目的結(jié)果進行檢查，然后再由老師進行質(zhì)量的檢查。并且將其完成的作品進行公開的展示，讓學生來找出優(yōu)點以及缺點。要讓學生進行自評以及互評。這樣，可以使學生鍛煉他們的責任心，提升他們的質(zhì)量意識，并且可以學習評估的方法。教師不但要對內(nèi)容檢查，還要檢查其實際的功能效果。

篇(4)

摘 要：隨著Internet技術(shù)的迅猛發(fā)展，公司、企業(yè)和個人普遍使用網(wǎng)站對新產(chǎn)品進行，對企業(yè)形象進行推廣，各種電子

>> 中職物流專業(yè)技能型人才需求現(xiàn)狀調(diào)查與分析 高職會計專業(yè)課程體系與崗位能力需求適應性的調(diào)研分析 《網(wǎng)頁設計與制作》 高職影視動畫專業(yè)職業(yè)崗位的需求與發(fā)展調(diào)研 基于《網(wǎng)頁設計與制作》骨干校課程開發(fā)的調(diào)研 如何使廣告設計專業(yè)的課程設置與專業(yè)技能對接 服裝專業(yè)崗位人才需求與中職技能競賽的比較研究 職業(yè)技能大賽對《網(wǎng)頁設計與制作》教學的啟示 醫(yī)藥化工與分析檢驗專業(yè)技能化教室建設的探索與思考 高職應用電子技術(shù)專業(yè)技能抽查與行業(yè)人才需求緊密對接的探討 高職模具設計與制造專業(yè)技能人才評價機制的研究 廣告設計專業(yè)技能競賽人才培養(yǎng)的探索與實踐 高校音樂專業(yè)技能課教學考試網(wǎng)絡管理系統(tǒng)的設計與運用 電腦藝術(shù)設計專業(yè)職業(yè)崗位群與職業(yè)能力調(diào)研分析 測繪工程專業(yè)技能培養(yǎng)的研究與實踐 專業(yè)技能訓練的實踐與體會 高校學生身體素質(zhì)與專業(yè)技能相結(jié)合的比較分析 高職工業(yè)分析與檢驗專業(yè)技能考核辦法的研究 淺談中小學音樂教師的知識與專業(yè)技能分析 推進專業(yè)技能、職業(yè)素養(yǎng)與企業(yè)需求“零距離”對接 常見問題解答 當前所在位置：l

[4]

[作者簡介]劉悅（1979.3-），女，遼寧省遼陽市人，遼寧建筑職業(yè)學院教師，講師，碩士，研究方向：計算機網(wǎng)絡。

[課題項目]省十二五規(guī)劃課題《高職網(wǎng)頁設計人才培養(yǎng)模式的研究與實踐》，主持人：王超

篇(5)

關(guān)鍵詞：網(wǎng)頁設計；微課；教學設計

在信息化、大數(shù)據(jù)時代的背景下，數(shù)字化的表現(xiàn)形式成為企業(yè)文化介紹、企業(yè)產(chǎn)品推薦、企業(yè)信息等的首選，因此企業(yè)對集文字、圖象、動畫、視頻等多媒體數(shù)字資源有效集成的網(wǎng)站需求量大增，網(wǎng)頁設計要求也逐步提高，對高校網(wǎng)頁設計類專業(yè)人才的培養(yǎng)質(zhì)量期待值也大幅提升。在傳統(tǒng)計算機課程中，無法實現(xiàn)重復講授操作演示的課堂教學模式，已經(jīng)嚴重制約了學生的學習積極性和主動性，尤其是學生設計能力的培養(yǎng)，幾乎成為空談。微課這種信息技術(shù)與教育的結(jié)合物，由于文件體積較小，適于各傳播途徑，反復瀏覽，反復模仿操作的特性，使其快速的風靡了各大高校，成為了突破教學瓶頸的重要手段。

1微課的定義

微課的定義比較多，目前比較通用的定義是：教師在課堂內(nèi)外教育教學過程中，為了保證學生獲得最佳的學習效果，圍繞某個知識點（重點難點疑點）或技能等單一教學任務，利用信息化手段和工具開展簡短完整、生動有趣的教學活動。微課的特征主要以現(xiàn)在教學時間較短，教學時長一般為5—8分鐘左右，最長不超過12分鐘；教學學內(nèi)容較少，一般圍繞一個具體的知識點來開展，問題聚集，主題突出；表現(xiàn)形式多樣化，可以是實物操作、教師講授、學生表演、分組討論、師生訪談等；教學組織完整，覆蓋了“提出問題，探究問題，解決問題，教學反思”的教學組織全過程；成果傳播多樣性，適合網(wǎng)絡教學、手機視頻、微信討論等多樣性傳播。

2微課的教學設計

以微課為主要表現(xiàn)形式的課堂組織，需要對所有的知識點進行細化和類化，按照課程的主線重構(gòu)教學內(nèi)容，教學設計是微課成敗的最關(guān)鍵環(huán)節(jié)。本文選擇網(wǎng)頁設計與制作課程中網(wǎng)頁布局學習情境中的神奇的圓角布局這個學習子情境來具體闡述。

2.1教學目標的制訂

神奇的圓角布局學習子情境目標就是要讓學生完成在網(wǎng)頁布局中，如何實現(xiàn)單圓角、對稱圓角、多圓角的設置，熟練掌握網(wǎng)頁CSS中關(guān)鍵參數(shù)的名稱和設置方法，能根據(jù)設計要求獨立完成與網(wǎng)頁效果圖相一致的圓角表現(xiàn)形式。

2.2微課內(nèi)容的確定

在兩節(jié)課的課程時長下，所要講述的內(nèi)容比較多，包括網(wǎng)頁DIV塊的制作和設置、CSS設置、文字添加與編輯等。什么教學內(nèi)容適合以微課形式體現(xiàn)呢？我們一般選擇學生理解較難，操作步驟較多、容易遺忘的關(guān)鍵知識點進行微課設計。在本次微課中，筆者選擇了CSS中圓角關(guān)鍵參數(shù)的設置作為微課的主要內(nèi)容，對于DIV塊的制作和文字編輯等內(nèi)容，因為有前續(xù)課程和WORD操作課程的支撐，只在教師操作演示環(huán)節(jié)進行復習和強化。

2.3微課教學組織

微課的教學組織十分靈活，可以是課前的自主學習，可以是課中的教師授課，也可以是課后的學生復習，甚至是以上多種形式的結(jié)合。在神奇的圓角布局學習子情境教學中，采用的是課中教師授課和課后學生反復復習的結(jié)合形式。具體教學組織為教師案例展示，任務驅(qū)動—教師操作演示（非微課內(nèi)容）—指導學生觀看微課—學生解決問題。課后學生還可以反復觀看微課內(nèi)容，突破時間、空間的局限，反復練習，直到熟練掌握為止。

3微課的制作

微課的主要表現(xiàn)形式是視頻，在制作過程中要關(guān)注內(nèi)容的趣味性、價值性和完整性。在神奇的圓角布局微課中，首先以一段設計師作品一次次被公司否定，設計師痛不欲生的搞笑動畫開頭，吸引學生的注意力；其次分析該作品的不足，拋出圓角布局的設計理念，詳細演示多種圓角的設計方法；最后給出詳細設計任務和高年級學生的優(yōu)秀作品，為學生提供設計靈感，培養(yǎng)學生舉一反三的能力。整個微課時長9分鐘。在制作微課過程中，需要使用到一些信息化工具與計算機軟件，最基本的如耳麥(附帶話筒)、錄像軟件CamtasiaStudio、視頻后期處理軟件會聲會影等。

4微課的應用

在網(wǎng)頁設計與制作課程中采用微課后，學生可以在課余反復觀看微課內(nèi)容，反復練習較難的操作細節(jié)，將傳統(tǒng)的課堂教學延伸到了課后，64課時的課程時長無限擴大。經(jīng)過教學實踐證明，利用微課，在教學中實現(xiàn)了學中做、做中學、學做一體的教學合一，提高了學生的學習主動性和實踐動手能力，極大提高了學生的分析問題和解決問題的能力，使學生很好的達到了網(wǎng)頁設計從業(yè)人員的基本職業(yè)能力。微課在教學中的應用目前還處于實踐的初期階段，不同專業(yè)、不同課程在微課中的應用方式均有差別。探索微課的開發(fā)、應用還有很長的階段，需要我們思考研究和長期的實踐積累，進而不斷提高教師的信息素養(yǎng)，制作出更多更優(yōu)質(zhì)的微課資源。

參考文獻

[1]丁敏.微課在高職院校市場營銷課程中的應用[J].當代教育實踐與教學研究，2015（11）.

[2]陳亞楓.探微求知摸索提高———市場營銷微課制作的實踐與思考[J].職業(yè)教育（中旬刊），2014（10）

[3]胡鐵生.高校微課建設的現(xiàn)狀分析與發(fā)展對策研究[J].現(xiàn)代教育技術(shù),2014(24)

[4]李愛武.“任務引領(lǐng)教學法”的實踐[J].職業(yè)技術(shù),2012(5).

篇(6)

關(guān)鍵詞：網(wǎng)頁設計制作；DreamweaverCs5；功能；應用；發(fā)展

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2013）24-5428-02

網(wǎng)站開發(fā)工具的出現(xiàn)是在1997年，隨著時代的不斷改革與變化，網(wǎng)站開發(fā)工具也有了新的突破。DreamweaverCs5網(wǎng)站開發(fā)工具為使用者進行網(wǎng)站設計制作提供了方便，節(jié)省了工作時間。它新增了很多功能，為廣大使用者展現(xiàn)的是一種可視性網(wǎng)站工作界面，其操作性極強，有豐富的站點管理，它的出現(xiàn)提高了網(wǎng)頁設計與制作的水平，豐富了網(wǎng)頁設計的表現(xiàn)形式。

1 DreamweaverCS5在網(wǎng)頁設計中的應用

DreamweaverCs5在現(xiàn)今網(wǎng)頁設計與制作中得到了廣泛應用，在網(wǎng)頁設計制作中發(fā)揮著重要作用，對網(wǎng)頁設計制作的發(fā)展具有一定的積極意義。

首先，DreamweaverCs5中的ASP功能較為強大，它是微軟公司通過不斷研發(fā)，開發(fā)出的一種代替CGI腳本程序的新程序。ASP主要在服務器端使用，它能夠?qū)崿F(xiàn)與數(shù)據(jù)庫以及其他相關(guān)程序的交互工作，其編輯程序較為簡便，減少了網(wǎng)頁設計制作中的復雜程序，是網(wǎng)頁設計與制作編程工作中的一大進步，提高了網(wǎng)頁設計與制作的水平。

其次，ASP在網(wǎng)頁運用中沒有過多的局限性，它的文件格式為asp，在動態(tài)網(wǎng)站中得到了充分應用，它不限制在哪個網(wǎng)站中能使用，在哪個網(wǎng)站上不能使用，在使用中有較大的自由性，這也是它在網(wǎng)頁設計與制作中常被用到的原因之一。

再者，ASP程序具有較大的靈活性，它能夠在VisualInerdev＼UltraDEV等多種編輯器中使用，另外，客戶端在進行網(wǎng)頁設計與制作前期可以采取所見即所得的網(wǎng)頁制作軟件，對所要制作的網(wǎng)站進行整體框架設計，整個網(wǎng)頁模板成型后再利用DreamweaverCs5中的JavaScript等多種腳本語言進行進一步的設計與修整，使網(wǎng)頁設計更加精美。

DreamweaverCs5軟件在網(wǎng)頁設計與制作中的運用，實現(xiàn)了設計制作與網(wǎng)頁觀看的同步，它支持客戶端在編輯網(wǎng)頁的過程中及時查看效果，有利于客戶端及時發(fā)現(xiàn)網(wǎng)頁設計制作中的錯誤與不足，從而有效的進行改正，確保網(wǎng)頁設計制作的質(zhì)量，提高客戶端網(wǎng)頁設計制作的水平。

2 DreamweaverCS5的新增功能

DreamweaverCs5相對以往的網(wǎng)頁制作編程軟件有了明顯的改變與突破，它又增加了很多新的功能，支持多種編輯器的交互使用，是網(wǎng)頁設計與制作的好幫手。以下列舉的就是DreamweaverCs5推出后的新增功能。

2.1 FTP程序的性能能到進一步完善

FTP是一種上傳工具，它的主要作用是將網(wǎng)站文件傳輸?shù)骄W(wǎng)站上。DreamweaverCs5中的FTP程序支持大型文件的上傳，并且改良后的多線程FTP程序在傳輸文件時，速度較快，節(jié)省了大量時間。改良后的FTP傳輸工具性能極好，提高了FTP傳輸工具的上傳速度，大大縮短了網(wǎng)頁制作及上傳的時間。

2.2 BusinessCatalyst 集成面板

新增的BusinessCatalyst 集成面板其主要作用是利用BusinessCatalyst 集成面板及AdobeBusinessCatalyst的有效連接，從而編輯建立網(wǎng)站，此集成面板進行電子商務的網(wǎng)站建設時，采用的是較為完善的托管解決方案，使網(wǎng)站的建立工作進一步完善。

2.3 自適應網(wǎng)格板面

DreamweaverCs5新增功能中實現(xiàn)了自適應網(wǎng)格板面，運用CSS3自適應網(wǎng)格版面，可以快速的建立網(wǎng)站交流平臺，并支持多種瀏覽器查看網(wǎng)頁設計，具有一定的兼容性，為客戶端查看網(wǎng)頁作品提供了方便。另外，運用CSS3自適應網(wǎng)格版面，確保了代碼的正確性，將設計用簡單且符合標準的代碼表示出來，有利于客戶端的隨時查看，簡易的代碼客戶端能夠輕易的發(fā)現(xiàn)網(wǎng)頁設計與制作中出現(xiàn)的問題，大大提高了網(wǎng)頁設計與制作的效率。

2.4 jQuery 移動框架

新增的jQuery 移動框架功能在DreamweaverCs5軟件編程中具有重要作用，它能夠為iOS 以及Android網(wǎng)站平臺提供性能良好的本地應用程序，為各網(wǎng)站之間的交流與共享提供了方便。

2.5 AdobePhoneGap 支持

AdobePhoneGap功能與jQuery 移動框架功能較為相似，它們都是為iOS 以及Android網(wǎng)站平臺創(chuàng)建本地應用程序，而不同的是AdobePhoneGap功能創(chuàng)建起來更加輕松，簡易。并且它不僅能夠創(chuàng)建本地應用程序，還能夠?qū)Ρ镜貞贸绦蜻M行封裝。它創(chuàng)建本地應用程序主要是依靠改變網(wǎng)頁中原有的HTML代碼來實現(xiàn)的，另外，采用PhoneGap模擬器還能夠?qū)ψ陨硭O計的網(wǎng)頁進行檢查，提高了網(wǎng)頁設計與制作的質(zhì)量。

3 DreamweaverCS5的發(fā)展趨勢

Dreamweaver是一種所見即所得的網(wǎng)站開發(fā)軟件，客戶端在網(wǎng)頁編輯的過程中能夠隨時查看網(wǎng)頁設計的狀態(tài)，它支持多種瀏覽器預覽網(wǎng)頁設計作品，為客戶端進行網(wǎng)頁設計與制作提供了諸多方便。

最早Dreamweaver網(wǎng)站開發(fā)工具的出現(xiàn)是在1997年，這一年Macromedia公司推出了Dreamweaver1.0，它的出現(xiàn)為網(wǎng)頁設計制作者提供了方便，引起了網(wǎng)頁設計者的使用風暴，得到了廣大使用者的青睞。隨著網(wǎng)絡設計水平的不斷提高，Dreamweaver在2002又有了新發(fā)展，2002年5月Macromedia公司正式推出了DreamweaverMX編程開發(fā)具，DreamweaverMX與Dreamweaver1.0的不同點在于它能夠?qū)omeSite中的重要程序代碼進行編輯整合，從而形成Dreamweaver開發(fā)工具的核心環(huán)境，擺脫了以往單一的開發(fā)環(huán)境，它支持使用者可以根據(jù)自己的使用習慣來選擇建立網(wǎng)站及應用程序的方式，使用者在使用中有了一定的選擇自，是DreamweaverMX的一大亮點。后來，Macromedia公司合并后加入了Adobe 公司，兩個公司共同在2005年5月研發(fā)出了新型的網(wǎng)站開發(fā)工具，也就是DreamweaverCS5，它的出現(xiàn)引起了客戶端與使用者的轟動，原因在于DreamweaverCS5新增加了以往網(wǎng)站開發(fā)工具中所沒有的功能，它能夠運用CSS樣式表進行網(wǎng)頁設計，減少了編輯代碼的繁瑣，部分設計可以在CCS樣式編輯器中進行代碼編輯，避免了代碼錯誤而導致的網(wǎng)頁制作錯誤。它的出現(xiàn)使網(wǎng)站開發(fā)工具步入一個新臺階，不僅為使用者的網(wǎng)頁設計制作工作提供了方便，還在一定程度上提高了工作效率，減少了網(wǎng)頁設計制作中的失誤。此外，它支持所見即所得，是一種可視化的開發(fā)界面，符合現(xiàn)代網(wǎng)頁設計制作的流程，是網(wǎng)站開發(fā)工具的一大創(chuàng)新。

4 結(jié)束語

DreamweaverCS5在網(wǎng)頁設計與制作中的廣泛應用是當今的網(wǎng)站發(fā)展形勢所趨，它相對于以往的開發(fā)工具而言，其新增功能較多，并且功能性極強，適應了網(wǎng)頁設計與制作的需要及發(fā)展。DreamweaverCS5打破以往的局限，以一種可視性所見即所得的界面呈現(xiàn)在設計者面前，使設計者能夠及時查看網(wǎng)頁設計中的效果，有利于網(wǎng)頁設計與制作的開展。

參考文獻：

[1] 劉暢.DreamweaverCS5在網(wǎng)頁制作中的應用[J].計算機光盤軟件與應用，2012，21（32）：220-221.

[2] 鄧文達，武國英.DreamweaverCS5網(wǎng)頁設計與制作[J].清華大學出版社，20103（9）：277-278.

[3] 孫印杰.DreamweaverCS5的新增功能與改進[J].電子工業(yè)出版社，2008，3（3）：62-63.

篇(7)

關(guān)鍵詞:網(wǎng)頁設計 網(wǎng)頁制作 教學改革

中圖分類號:G64 文獻標識碼:A 文章編號:1007-3973 (2010) 01-178-02

1根據(jù)專業(yè)特色確定教學目標

《網(wǎng)頁設計與制作技術(shù)》是計算機類專業(yè)的一門基礎課程,考慮到計算機類專業(yè)的學生缺少藝術(shù)設計基礎,通常是以掌握靜態(tài)網(wǎng)頁的制作技術(shù)為教學目標。但是對于多媒體專業(yè)的學生來說僅僅掌握網(wǎng)頁制作是不夠的。

多媒體專業(yè)的任務是能夠?qū)D形、圖像、文本、聲音、視頻、動畫等多種媒體元素以合理的形式進行整合,為其設計美觀的界面和人性化的交互方式,使之成為一個完整的多媒體系統(tǒng)。所以多媒體專業(yè)對學生在藝術(shù)設計水平和軟件制作能力方面都提出了較高的要求,針對這一專業(yè)特點,《網(wǎng)頁設計與制作技術(shù)》課程的教學目標放在了網(wǎng)頁的“設計”和“制作”兩方面。“設計”方面要求學生能夠利用設計工具設計出符合商業(yè)需求的網(wǎng)頁界面,能夠?qū)W(wǎng)站的信息進行重組,能夠根據(jù)需要設計合理的交互方式;“制作”方面要求學生具備將網(wǎng)頁界面設計稿采用合理的制作技術(shù)轉(zhuǎn)換為真實網(wǎng)頁的能力,能夠制作可維護、可擴展的網(wǎng)站結(jié)構(gòu)。

2依據(jù)教學目標制定教學內(nèi)容

教學內(nèi)容是依據(jù)教學的兩個目標來制定的,總體分為兩部分“網(wǎng)頁設計”和“網(wǎng)頁制作”。這兩部分的內(nèi)容對于多媒體專業(yè)的學生來說同樣重要,授課時間上要給予合理的分配。

“網(wǎng)頁設計”部分的內(nèi)容主要包括:

2.1網(wǎng)頁布局設計

由于受到顯示屏幕的限制,網(wǎng)頁具有區(qū)別于一般平面設計的布局結(jié)構(gòu),并且根據(jù)網(wǎng)頁信息量、網(wǎng)站主題和風格的差異可以設計出千差萬別的布局。學生應該具備根據(jù)實際合理設計網(wǎng)站布局的能力。

2.2網(wǎng)頁色彩設計

網(wǎng)頁的色彩創(chuàng)作擁有自身的設計規(guī)則,與其他視覺形式有著較大的差異。對于平面設計來說,色彩是靜止的,色彩的分布根據(jù)固定的信息來編排。對于網(wǎng)頁來說,信息是流動的,網(wǎng)頁上的色彩也會跟著流動,因而,學生要掌握網(wǎng)頁上的用色更需謹慎。

2.3網(wǎng)頁界面元素設計

網(wǎng)頁上包括的文字、圖片、按鈕、聲音、動畫等都需要經(jīng)過精心設計來配合完成一個完整的網(wǎng)站。學生需要掌握各種軟件來實現(xiàn)素材的設計與制作,這些軟件可以是Photoshop、Fireworks、Flash、Cooledit等。

2.4網(wǎng)頁導航設計

這一部分絕不僅僅是制作菜單,重點是對網(wǎng)站信息的組織。學生對網(wǎng)站信息的組織往往是隨意的,他們沒有意識去分析大量要在網(wǎng)頁上出現(xiàn)的信息哪些重要,哪些是輔助的,重要信息應該出現(xiàn)在頁面的什么位置,以及如何使用色彩來突出重要信息。

2.5交互設計

瀏覽者不僅要求網(wǎng)頁具有良好的外部界面,也非常關(guān)心界面的組件、布局和風格,看它們是否能支撐有效的交互,瀏覽者是否能輕松使用網(wǎng)站的功能來快速尋找到所需要的信息,這是評價網(wǎng)站可用性的一個重要指標。

“網(wǎng)頁制作”部分的內(nèi)容主要包括:

(1) 使用XHTML+CSS實現(xiàn)網(wǎng)頁布局。早期的網(wǎng)頁制作大多采用表格嵌套的方法實現(xiàn),這種方法制作的網(wǎng)頁難以更新和擴展。現(xiàn)代的網(wǎng)頁越來越多使用XHTML+CSS來實現(xiàn),因為其具有良好的靈活性,同時也提出了一種全新的網(wǎng)頁制作思路。

(2)利用模板快速生成網(wǎng)頁。模板技術(shù)在XHTML+CSS流行的時代同樣重要,能夠幫助快速生成同類型的網(wǎng)頁,也更易于后期的維護。

(3)使用框架構(gòu)建網(wǎng)站。

(4)使用Flash輔助。Flash在制作導航條、按鈕、動態(tài)圖片等方面具有明顯的優(yōu)勢,把Flash結(jié)合進來能讓網(wǎng)頁增添不少亮點。

3 根據(jù)現(xiàn)代學生的特點選擇教學方法

現(xiàn)代的學生都有一些新的特點,比如喜歡拿手機發(fā)短信、喜歡通過網(wǎng)絡獲取知識多過于書籍、喜歡在網(wǎng)絡上與他人溝通、喜歡使用博客、玩游戲等,思想認識上也與以前的學生有很大的不同。教學應該以學生的學習為中心,教師的任務是幫助學生提高學習興趣,教學的過程要符合學習習慣。如何改變傳統(tǒng)的教學方式來適應現(xiàn)代的學生是我們需要研究的課題。可以考慮在以下方面改進教學方法,從而加強對學生的學習引導:

3.1讓學生在自由、輕松的課堂環(huán)境下學習

國外的一些研究表明,讓學生在完全放松的狀態(tài)下學習能夠得到比嚴肅的課堂環(huán)境更好的教學效果,尤其對于需要發(fā)揮創(chuàng)意的課程來說更是如此。我們可以考慮將課堂從教室移至亭子、池塘邊、樹蔭下等大自然的某個角落,或者重新布局教室,使它看起來象工作室、會客廳、休息室,或者通過課堂上給予學生充分的自由思考、自由交流的機會,教師的語言如果更具有幽默感和親和力,就能更好地激發(fā)學生的興趣和創(chuàng)造力。

3.2充分利用網(wǎng)絡實現(xiàn)零距離教學

現(xiàn)代的學生對網(wǎng)絡的使用非常普遍,通過網(wǎng)絡獲取知識的比例越來越大,所以利用網(wǎng)絡進行課堂外的教學補充是非常有效的。通常可以使用網(wǎng)絡課程、論壇、博客等形式為學生提供隨時隨地可以獲取的學習資源;利用QQ等實時通訊工具實現(xiàn)教與學的零距離。

3.3注意調(diào)節(jié)課堂教學的節(jié)奏和氣氛

學生在一堂課的學習過程中注意力有明顯的變化規(guī)律,開始階段學生的注意力是最高的,中間最容易分散,接近最后又會慢慢提高。建議老師在講授知識的過程中可以利用這一規(guī)律,把重要的內(nèi)容放在前面,中間要加一些提高注意力的環(huán)節(jié)(可以是一次小組活動、一點小幽默)重新激發(fā)學生的熱情,需要強調(diào)和總結(jié)的內(nèi)容要把握好最后的時間段。

4課程改革的進一步探討

《網(wǎng)頁設計與制作技術(shù)》是一門綜合性的課程,根據(jù)學科的差別,可能會不同程度地涉及到網(wǎng)頁布局、色彩、交互、數(shù)據(jù)庫、服務器程序設計等內(nèi)容。針對多媒體專業(yè),本文沒有涉及后臺的數(shù)據(jù)庫和服務器程序部分,對于前臺的網(wǎng)頁制作技術(shù),如果學時充足,還可以考慮增加利用JavaScript實現(xiàn)網(wǎng)頁特效的內(nèi)容。隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展,新技術(shù)、新方法、新標準將會不斷涌現(xiàn),所以我們也需要將網(wǎng)頁設計與制作的最新、最實用的技術(shù)反映到課堂教學中去。

5 結(jié)束語

網(wǎng)頁的設計與制作更多的表現(xiàn)為一門藝術(shù),要讓學生學到網(wǎng)頁設計的理念而不僅僅是網(wǎng)頁制作的方法,這應該是該門課程在多媒體專業(yè)中承當?shù)娜蝿铡Ｉ厦嫠岬降慕虒W目標、教學內(nèi)容和教學方法都應該圍繞這一核心任務展開,最終為培養(yǎng)既有設計能力又有動手能力的合格學生服務。

參考文獻:

[1]尤彩虹.高職《網(wǎng)頁設計與制作》課程建設實踐與探索[J].中國科教創(chuàng)新導刊.2009,(2):183.