第一篇:電子商務網(wǎng)頁制作實訓報告
一周的網(wǎng)站規(guī)劃實訓又結束了,在這短短的一周實訓中,我們每一個學生都受益匪淺。時間過得真快呀,這也是這學期我們最后一次在學校里的實訓,每一個同學都懷著飽滿的熱情,都在積極緊張的實訓,我也一樣,只是多了一種不舍得感覺,雖然我們在實訓中也有些苦痛和煩惱,但是我會努力的克服自己所遇到的任何困難以及在老師熱心的幫助下我們很快的解決了自己遇到的一些困難。
總的來說:我在實訓中不僅學到了課本上面沒有的知識,而且還學到了堅持不懈,不拋棄,不放棄的一種學習的精神。這次實訓讓我增長了很多關于網(wǎng)站制作的知識,也讓我體會到了做網(wǎng)站并不是我想象中的那么簡單。網(wǎng)頁設計與制作綜合實訓是我們學習過程中重要的實踐性學習環(huán)節(jié)。它是根據(jù)我們學習計劃的要求,在老師的指導下對我們進行網(wǎng)頁制作專業(yè)技能的訓練,培養(yǎng)我們綜合運用理論知識分析和解決實際問題的能力,實現(xiàn)由理論知識向操作技能的培養(yǎng)過程.因此加強實踐學習環(huán)節(jié),搞好實訓教學,對實現(xiàn)我們專業(yè)的培養(yǎng)目標,提高我們的綜合素質(zhì)有著重要的作用。通過這次實訓,我學到了很多有價值的東西。我獨立的完成網(wǎng)站設計的全過程,把設計中散亂的網(wǎng)頁鏈接成框架體系,使平時學到的知識點有了很高的提高,并且合理的在試驗中進行了實踐。在這次實驗的過程中,我搜集了大量的素材和網(wǎng)頁設計制作的知識,增加知識面,給我在以后的設計過程中能博采眾長,制作出好的網(wǎng)頁打下了基礎。
通過短短幾天的網(wǎng)站規(guī)劃實訓,我從中學到了很多的知識。每一個同學都在認認真真的實訓,都在認真的做網(wǎng)頁。盡管在實訓中遇到了許多不少的問題,通過自己上網(wǎng)查閱資料和老師的耐心教導,我們每一個同學都解決了自己在實訓中遇到的困難。有的同學還互相幫助和積極討論遇到的問題,同樣在學習的良好氛圍之下解決了遇到的困難。在這次網(wǎng)站規(guī)劃中,我們學到了課本上沒有的知識,不僅開拓了我們的視野,而且增加了我們設計制作網(wǎng)站的能力。雖然實訓也有些苦痛和煩惱,但是我們每一個人都懷著一顆學習的心,不怕困哪和苦痛,認真的完成了網(wǎng)站規(guī)劃的實訓。在網(wǎng)站規(guī)劃中,我們熟悉了Frontpage軟件的新型的功能,增加了對軟件的認識和認知,學會了怎么做一個漂亮的網(wǎng)站和優(yōu)美的布局。
我收獲頗豐,學到了很多知識,特別是提高了綜合分析應用的能力。實訓過程是繁瑣的,但同學們都表現(xiàn)得很積極,不怕課程難,相互幫助一起分析。任課老師也非常認真負責,耐心講解,細心指導,一點一點解答同學們的疑惑,直到同學們理解了為止。在實訓中,分析、討論、演算,機房里充滿了濃濃的學習氣氛。此次實訓培養(yǎng)了同學們耐心的工作作風,增強了同學們的合作意識,提高了大家的應用分析能力。
第二篇:網(wǎng)頁制作實訓報告
《網(wǎng)站設計與制作》實訓報告
X學院XX班XXX號
一.實訓時間:
2010年6月7日到2010年6月13日
二.實訓地點:
XXX學院XXX班級
三.實訓組員:
XXX、XXX
四.實訓目標:
運用網(wǎng)頁設計方法,設計一個網(wǎng)站,提高綜合應用所學知識的能力,積累Web網(wǎng)站的制作經(jīng)驗,培養(yǎng)團隊協(xié)作精神。本次實訓的具體目標為:了解網(wǎng)站制作的一般流程;熟練使用網(wǎng)頁制作工具Dreamweaver、Flash、Fireworks設計網(wǎng)頁;能靈活運用表格、層和框架布局頁面;熟練使用CSS樣式表美化網(wǎng)頁;正確使用JavaScript添加網(wǎng)頁特效;靈活使用模板和庫來制作網(wǎng)頁;學會申請免費域名空間和正確上傳站點的方法。
五.實訓策劃:
這一周,我們要進行《網(wǎng)站設計與制作》實訓,我們認為做網(wǎng)站前最主要的是確定主題、框架和標題欄的設計。因此我們相互討論之后,確定制作以“婚紗”為主題的“喜多坊時尚婚紗網(wǎng)”。在之后的資料收集和網(wǎng)頁的框架的建設中,我們發(fā)現(xiàn)了許多問題,某些關鍵點無法做出心中的效果,這讓我們有些遺憾。通過自身及組員的共同探索,我們已盡權利將以下是我們的策劃內(nèi)容:
1.確定主題。制作網(wǎng)頁,首先是確定主題,冬天很冷,卻冷得很幸福,剛剛過去的圣誕的熱鬧勁還在心頭。于是我們從幸福出發(fā),想到了結婚-婚紗,建立一個簡單的介紹婚紗的網(wǎng)站并取名喜多坊時尚時尚婚紗,專業(yè)介紹一些喜多坊婚紗的特色等。我們本次間的網(wǎng)站基本以粉紅為基點,粉紅是可愛清純的顏色,粉紅代表著幸福溫馨,所以本站以粉紅為風格,讓整個網(wǎng)站充滿愛的力量。
2.設計主頁。主頁的設計是整個網(wǎng)站的靈魂,構思導航欄的分類,然后是整體規(guī)劃,每一版塊都有其個性的色彩,清晰明了,便于閱讀瀏覽,我們構思大致
分幾部分,首頁,關于我們,婚紗禮服,量體裁衣,婚紗選購,公司門市,與我聯(lián)系,在線論壇8大板塊,每一板塊又分幾小部分,內(nèi)容比較充分,多樣。確定導航欄的各個分類標題之后對于建立二級子網(wǎng)尤為重要,我們運用Photoshop CS3技術來設計出導航欄,制作切片,建立導航欄,將整體的主頁效果建立起來。
3.資料的搜集。主頁的導航欄設計好后,接下來就是對主頁導航欄的各個內(nèi)容進行資料的收集,我們采用大量的資料收集再對資料進行塞選p圖,得到最適合導航欄內(nèi)容的資料。素材的選擇,要符合網(wǎng)站的主題,圖片的大小要符合模板的輪廓,我們將不符合模板的用Photoshop處理編輯,然后放入站點底下,進行圖文的鏈接和排版。
4.各個子網(wǎng)頁的建立。我們設計好模板后只要在可編輯區(qū)依次編輯所需資料就可,運用模板建立子網(wǎng)頁少了很多工序,為我們節(jié)省大量的時間。盡管我們建立了模板,但我們在建立子網(wǎng)時很小心,因為一張圖片的大小插入就有可能破壞整個模板的結構尤其在使用表格時,因此我們對所插入的圖片和表格都得進行測量,做到不影響網(wǎng)站整體的美觀。
5.實現(xiàn)網(wǎng)頁間的鏈接。做好個格子網(wǎng)和首頁后,接下來就是通過模板的鏈接,將整個網(wǎng)站中的網(wǎng)頁鏈接起來,過程其實很簡單,主要是把要鏈接的文字和圖標選擇在選擇工具欄的鏈接按鈕最后選擇自己要鏈接的網(wǎng)頁單擊確定便可以了。做好這一步后,網(wǎng)站基本算是建好了。
6.向靜態(tài)網(wǎng)頁插入動態(tài)效果。在基本建好網(wǎng)頁中的插入層和時間軸,制作其動態(tài)效果,讓整個網(wǎng)頁充滿生機。我們在網(wǎng)上進行flash素材的收集,通過Flash CS3設計出主題下的風格動態(tài)效果。然后插入到靜態(tài)網(wǎng)頁中,使網(wǎng)頁更加生動形象。
六.實訓心得:
通過這周的學習實踐,在老師的指導下以大量明晰的操作步驟和典型的應用實例,使我們真正對所學的軟件融會貫通。我們結合年輕人心理制作了時尚婚紗網(wǎng)站,作為實訓的成果。其內(nèi)容是多樣化的,制作網(wǎng)頁用的軟件是Deamweaver CS3軟件。它提供了網(wǎng)頁和表單的動態(tài)生成到網(wǎng)站的解決方案。主圖是一個網(wǎng)頁的門面,它能體現(xiàn)出這個網(wǎng)頁的整體風格。
制作網(wǎng)頁,首先是確定主題,經(jīng)過再三考慮,就做了個關于婚紗的網(wǎng)站??紤]到,現(xiàn)在城市普遍幸福感不高,加上寒冬,于是以幸福為論點擴展想到了結婚,想到了婚紗,想到了未來的美好城市生活,城市讓生活更美好,結婚讓生活更完整婚紗讓生活更多姿!想到這些,我們最后決定建立一個簡單的介紹都市婚紗的網(wǎng)站,讓這個冬天不再寒冷,讓我們回憶起那些幸福的日子。于是網(wǎng)站主題確立。
然后是整體規(guī)劃,每一版塊都有其個性的色彩,清晰明了,便于閱讀瀏覽,大致分幾部分,首頁,關于我們,婚紗禮服,量體裁衣,婚紗選購,公司門市,與我聯(lián)系,在線論壇,每一部分又分幾小部分,內(nèi)容比較充分,多樣。
再后是收集資料與素材,大量瀏覽相關網(wǎng)站,收集關于婚紗的圖片,進行Photoshop CS3圖片處理和排版,插入好的文章和圖片等,還有參考一些好的網(wǎng)站的布局,特色,顏色搭配,背景圖等。
再后是設計網(wǎng)頁圖片,用flash制作動畫,用Photoshop制作靜態(tài)圖片。再后是建立站點,和制作網(wǎng)頁了,使用dreamweaver制作。
首頁內(nèi)容精彩豐富,首頁主要是導航作用。首頁制作時,時刻考慮著網(wǎng)頁的基本原則:統(tǒng)一,連貫,分割,對比及和諧的原則,內(nèi)容統(tǒng)一,都是為了主題服務,一個網(wǎng)站強調(diào)的就是一個整體,只有圍繞一個統(tǒng)一的目標所做的設計才是成功的;連貫,頁面之間關系連貫,統(tǒng)成一體;每版內(nèi)容都自成一體,顏色各異,便于瀏覽;整個網(wǎng)頁有動有靜,顏色不同,形成對比,不呆板,富有生氣;顏色各異,但又不同之中又相同,渾然一體。
簡潔實用: 這是非常重要的,網(wǎng)絡特殊環(huán)境下,盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的,所以要去掉所有的冗余的東西。使用方便:同第一個是相一致的,滿足使用者的要求,網(wǎng)頁做得越適合使用,就越顯示出其功能美;頁面用色協(xié)調(diào),布局符合形式美的要求: 布局有條理,充分利用美的形式,是網(wǎng)頁富有可欣賞性,提高檔次。當然雅俗共賞是人人都追求的。
利用我們所學的模板設計,制作更完美的頁面。將動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁結合起來
再后,調(diào)試過程,好多次本來在Deamweaver CS3里好好的,把字調(diào)的好好的,位置很對,可在瀏覽器里御覽就出毛病了,不是靠上了,就是靠下了,經(jīng)過再三調(diào)試,整理,加了好多表格,終于滿意了。
通過溫本周的實訓,發(fā)現(xiàn)自己還有很多的不足??蚣艿膽煤茈y把握,切片也很難合理切割,當插入圖片的時候把原有的模板給撐破了,精確定位很重要。
因為學藝不精,所以不會網(wǎng)頁的代碼設計,只能通過網(wǎng)絡三劍客綜合使用。不過也實踐中也學到了很多知識,表格的嵌套是非常重要的,CSS樣式的應用也很便捷。還有一些行為中的效果也是蠻不錯的。所以這次實訓還是很有意義的。
第三篇:電子商務網(wǎng)頁設計實訓報告
電子商務網(wǎng)頁設計實訓報告
網(wǎng)頁設計或網(wǎng)頁制作對于我們來說,多少會有點難度的,制作網(wǎng)頁是很精力和時間的,畢竟要求比較高。要制作好一張好的網(wǎng)頁得會熟練使用Photoshop,Flash,和用于制作網(wǎng)頁的Dreamweaver軟件。
Potoshop和Flash軟件我們上個學期學了一點皮毛,或者說連皮毛也沒能學好,原因或者是雙向的。由于我Photoshop是我自學的,所以會好一點,處理圖片相比較他人我會更擅長,但Flash卻成了我的短板。一直都沒花時間自學,連制作一個簡單的小動畫都成了問題。Dreamweaver是我們這個學期剛開的課,所以了解的也不是很多,對于網(wǎng)頁制作我們只有過一次的經(jīng)歷。就是模仿鄉(xiāng)村旅游網(wǎng)的首頁來做一張網(wǎng)頁。
對于這兩周的實訓我們做兩張網(wǎng)頁,并且要求學會分析電子商務網(wǎng)頁模板,使用Dreamweaver和DIV+CSS的方法布局電子商務網(wǎng)頁,掌握運用JavaScript控制電子商務網(wǎng)頁行為的能力,這無疑對我們是個挑戰(zhàn)。因為我對JavaScript語言根本不懂,畢竟我學的時間有限。
剛開始的時候,實訓指導老師包金龍老師就讓我們寫好實訓規(guī)劃,并且要用坐標軸表示出來,每天需要做哪些東西,包括完成情況等,都得表示出來。
我的計劃是:
第一天選好題目,并且做好網(wǎng)頁規(guī)劃;第二,三天用PS制作規(guī)劃效果圖; 第四天制作簡單Flash和圖片素材;第五天完成效果圖制作; 第六七天完成Div布局,第七八天開始制作網(wǎng)頁,剩余時間開始完善。開始的規(guī)劃和實際的完成情況多少是有差距的,實際操作的時候制作的速度還是比較快的,所以完成的時間大大縮短了。
但是在做的過程中,還是有許許多多的疑問和不懂在里面。尤其在制作Flash的時候遇到的麻煩很多,畢竟我不會。還有就是網(wǎng)頁的布局,老師讓CSS+Div層加樣式布局,但是我到現(xiàn)在都不明白是怎么回事,但是只沿著步驟走下去。
還有就是常遇到網(wǎng)頁布局錯位現(xiàn)象,以至于多次布局好的網(wǎng)頁都因為錯位問題而不得不重做,因為我的知識還沒有達到,自由修改的程度,所以我的路還很長。我的網(wǎng)頁已經(jīng)做好了兩張,并且也已經(jīng)成功地做好了鏈接,但是老師卻不允許用表格來制作網(wǎng)頁。
還得必須從網(wǎng)上下載模板做,做的越像越好。我覺得為什么非得下載模板做,學生自己做的網(wǎng)頁,那是自己智慧的產(chǎn)物,好歹也是自己的想法。只是初學者做的沒那么專業(yè)罷了,但是你卻因為這一點把別人的作品所否定。就算你的模板做的再好,這也是別人的東西,不是你的,也永遠不會是你的。
有類似你這樣的老師存在,中國教出的學生怎么可能會有創(chuàng)新的思想?,F(xiàn)在都強調(diào)創(chuàng)新,但是學生有自己思想的時候,都被你們給扼殺了,思維定式的時候,卻又強調(diào)創(chuàng)新。病態(tài)的教育。
雖說我很不愿意重新做,但你是實訓的老師,做為學生還得按照你說法來做。我下載了一個新的模板,并且都有素材。沿著模板布局,插入Div標簽。慢慢一步一步地做,由于我的網(wǎng)頁大小和模板有出入,并不是和模板一樣,所以我得把素材的大小用PS來完善一下。這樣往網(wǎng)頁里面插入的時候,就不會發(fā)生錯位之類的事。
最終模板的樣式,做好了,但是我制作了一張。內(nèi)容頁也就是鏈接的網(wǎng)頁,我還是用自己做的網(wǎng)頁。雖然我做的并不好,但再差也是我自己一步一步做出來的,所以我不會丟棄我自己的作品,來用模板代替。這對于我來說是不可能的。網(wǎng)頁做好了。
由于提前做好了,所以時間充裕,這樣就可以幫助他人了。還有就是網(wǎng)頁設計大賽就要舉行了,我們開始為大賽忙碌著。
第四篇:電子商務 網(wǎng)頁制作報告
網(wǎng)頁制作報告
網(wǎng)頁要求:
1.分類顯示(四類,每類六張圖片)
2.倒計時自動顯示
3.打折數(shù)據(jù)從文件中讀取出來,并顯示在相應位置
4.勾選所要的商品,提交后。把所選商品信息保存在一個文檔(比如txt等等)中
5.需要的文件類型html、js、折扣文件、選中商品的文檔、說明整個程序的文檔
6.在網(wǎng)頁中需要有類似下拉框選項的東西(針對四大類),當點擊一個選項類的時候會在 當前位置顯示該類。(類似于導航的)選用的軟件:Adobe Dreamweaver CS5
制作過程:
1.確定好網(wǎng)頁的標題,搜集素材資料
2.選定框架,確定頁面的主要風格,字體顏色大小,背景圖片,表格邊框等。
table {text-align:center}
td {
width:400px}
div.float{float:right;
background:#00CCFF}
div.menu {font-family:Arial, Helvetica, sans-serif;
color:#000000;
background:#FFFFFF;
border:2px solid #999999;
width:10em}
div.menu:hover a {display:block}
div.menu.a {display:none;
border:2px solid #999999;
background:#FFFFFF;
color:#000000;
width:10em;
text-decoration:none}
div.menu a:hover {background-color:#FFFFFF}
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover { color:#666666;text-decoration:none}
body {
background-color: #ffffff;
background-image: url(beijin.jpg);
}
3.對標題欄進行居中,字體大小顏色設置,對副標題進行滑動設置
4.對各類圖片分類,分成四類并設置其格式
分類: