1、高分求網頁製作實驗報告!!!
http://www.4oa.com/bggw/sort02902/sort02954/184825.html
網頁製作實驗報告
實驗一:站點設置
一、實驗目的及要求
本實例是通過「站點定義為」對話框中的「高級」選項卡創建一個新站點。
二、儀器用具
1、生均一台多媒體電腦,組建內部區域網,並且接入國際互聯網。
2、安裝Windows XP操作系統;建立IIS伺服器環境,支持ASP。
3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟體;
三、實驗原理
通過「站點定義為」對話框中的「高級」選項卡創建一個新站點。
四、實驗方法與步驟
1)執行「站點\管理站點」命令,在彈出的「管理站點」對話框中單擊「新建」按鈕,在彈出的快捷菜單中選擇「站點」命令。
2)在彈出的「站點定義為」對話框中單擊「高級」選項卡。
3)在「站點名稱」文本框中輸入站點名稱,在「默認文件夾」文本框中選擇所創建的站點文件夾。在「默認圖象文件夾」文本框中選擇存放圖象的文件夾,完成後單擊「確定」按鈕,返回「管理站點」對話框。
4)在「管理站點」對話框中單擊「完成」按鈕,站點創建完畢。
五、實驗結果
六、討論與結論
實驗開始之前要先建立一個根文件夾,在實驗的過程中把站點存在自己建的文件夾里,這樣才能使實驗條理化,不至於在實驗後找不到自己的站點。在實驗過程中會出現一些選項,計算機一般會有默認的選擇,最後不要去更改,如果要更改要先充分了解清楚該選項的含義,以及它會造成的效果,否則會使實驗的結果失真。實驗前先熟悉好操作軟體是做好該實驗的關鍵。
實驗二:頁面圖像設置
一、實驗目的及要求:
本實例的目的是設置頁面的背景圖像,並創建滑鼠經過圖像。
二、儀器用具
1、生均一台多媒體電腦,組建內部區域網,並且接入國際互聯網。
2、安裝Windows XP操作系統;建立IIS伺服器環境,支持ASP。
3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟體;
4、安裝Acdsee、Photoshop等圖形處理與製作軟體;
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
設置頁面的背景圖像,並創建滑鼠經過圖像。
四、實驗方法與步驟
1) 在「頁面屬性」對話框中設置頁面的背景圖像。
2) 在頁面文檔中單擊「」插入滑鼠經過圖像。
五、實驗結果
六、討論與結論
實驗結束後我們可以看到頁面的背景變成了我們插入的圖像,並且要滑鼠經過的時候會變成另一個圖像,這就是滑鼠經過圖像的效果。當然這種實驗效果很難在實驗結果的截圖里表現出來。這個實驗的關鍵在於背景圖像的選擇,如果背景圖像太大不僅會影響網頁的打開速度,甚至圖像在插入會也會有失真的感覺,因此在插入前對圖像進行必要的處理能使實驗的效果更好。
實驗三:表格製作
一、實驗目的及要求:
本實例是要創建邊框為1像素的表格。
二、儀器用具
1、生均一台多媒體電腦,組建內部區域網,並且接入國際互聯網。
2、安裝Windows XP操作系統;建立IIS伺服器環境,支持ASP。
3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟體;
4、安裝Acdsee、Photoshop等圖形處理與製作軟體;
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
創建邊框為1像素的表格。
四、實驗方法與步驟
1) 在文檔中,單擊表格「」按鈕,在對話框中將「單元格間距」設置為「1」。
2) 選中插入的表格,將「背景顏色」設置為「黑色」(#0000000)。
3) 在表格中選中所有的單元格,在「屬性」面版中將「背景顏色」設置為「白色」(#FFFFFF)。
4) 設置完畢,保存頁面,按下「F12」鍵預覽。
五、實驗結果
六、討論與結論
本實驗主要通過整個表格和單元格顏色的差異來襯托出實驗效果,間距的作用主要在於表現這種顏色差異。表格的背景顏色和單元格的背景顏色容易混淆,在實驗中要認真判斷,一旦操作錯誤則得不到實驗的效果。「表格寬度」文本框右側的表格的寬度單位,包括「像素」和「百分比」兩種,容易混淆,要充分地理解這兩種單位表示的意義才能正確地進行選擇,否則就不能達到自己想要的效果,設置錯誤就會嚴重影響實驗效果。
實驗四:創建錨點鏈接
一、實驗目的及要求:
本實例的目的是創建錨點鏈接。
二、儀器用具
1、生均一台多媒體電腦,組建內部區域網,並且接入國際互聯網。
2、安裝Windows XP操作系統;建立IIS伺服器環境,支持ASP。
3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟體;
4、安裝Acdsee、Photoshop等圖形處理與製作軟體;
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
創建錨點鏈接。
四、實驗方法與步驟
1) 在頁面中插入1行4列的表格,並在各單元格中輸入導航文字。
2) 分別選中各單元格的文字,單擊「」按鈕,在彈出的「超級鏈接」對話框上的「鏈接」文本框分別輸入「#01」「#02」「#03」「#04」。
3) 在文檔中輸入文字並設置錨記名稱「01」,按下「 Enter」鍵換行,輸入一篇文章。
4) 在文章的結尾處換行,輸入文字並設置錨記名稱「02」,按下「 Enter」鍵換行,輸入一篇文章。
5) 同樣的方法在頁面下文分別輸入文字和命名錨記為「03」和「04」,並輸入文章。
6) 保存頁面,按下「F12」鍵預覽。
五、實驗結果
六、討論與結論
添加瞄記的作用是可以幫讀者快速找到自己想要的文章,同時也可以使頁面更加精簡。本實驗的關鍵難點在於鏈接文本框輸入的名稱和瞄記的名稱要相一致才能達到實驗的效果,同時要記得是在上一篇文章的結尾處輸入文字並設置瞄記名稱,並記得輸入對應的文章,否則瞄記可能不能用。熟練程度低在實驗中不能很好地使用各種工具,無法一次准確地尋找到適當的位置。實驗中忘記選擇「不可見元素」,幾次實驗都失敗,最後才得出正確的結論。因此在實驗前要先做好預習,否則實驗過程會比較吃力。
實驗五:設置CSS樣式
一、實驗目的及要求:
本實例的目的是通過設置CSS樣式創建表格的虛線邊框。
二、儀器用具
1、生均一台多媒體電腦,組建內部區域網,並且接入國際互聯網。
2、安裝Windows XP操作系統;建立IIS伺服器環境,支持ASP。
3、安裝網頁三劍客(Dreamweaver MX;Flash MX;Fireworks MX)等網頁設計軟體;
4、安裝Acdsee、Photoshop等圖形處理與製作軟體;
5、其他一些動畫與圖形處理或製作軟體。
三、實驗原理
通過設置CSS樣式創建表格的虛線邊框。
四、實驗方法與步驟
1) 在網頁中創建一個表格。
2) 在「CSS樣式」面板中單擊「」按鈕,在彈出的對話框中進行設置,完成後單擊「確定」按鈕。
3) 在彈出的對話框中進行設置,完成後單擊「確定」
後面的看我發的那個網站!
2、網頁製作div+css實驗報告
DIV+CSS是網站標准(或稱「WEB標准」)中常用術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標准中,不再使用表格定位技術,而是採用DIV+CSS的方式實現各種定位。SEO是指搜索引擎優化,主要就是通過對網站的結構、標簽、排版,關鍵字等各方面的優化,使搜索引擎更容易抓取網站的內容,並且讓網站的各個網頁在等搜索引擎中獲得較高的評分,從而獲得較好的排名。DIV+CSS網頁布局對SEO有很重要的影響。具體來看到底有什麼好處呢?
DIV+CSS的網頁布局對SEO的好處一、不存在表格的嵌套問題
很多「網站如何推廣」的文章中稱,搜索引擎一般不抓取三層以上的表格嵌套,這一點一直沒有得到搜索引擎相關的官方證實。我的幾項實驗結果沒有完全出來,但根據目前掌握的情況來看,Spider爬行Table布局的頁面,遇到多層表格嵌套時,會跳過嵌套的內容或直接放棄整個頁面。
使用Table布局,為了達到一定的視覺效果,不得不套用多個表格。如果嵌套的表格中是核心內容,蜘蛛(Spider)爬行時跳過了這一段沒有抓取到頁面的核心,這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。
DIV+CSS的網頁布局對SEO的好處二、精簡的代碼
使用DIVCSS布局,頁面代碼精簡,這一點相信對XHTML有所了解的都知道。觀看更多的HTML教程內容。
代碼精簡所帶來的直接好處有兩點:一是提高蜘蛛(Spider)爬行效率,能在最短的時間內爬完整個頁面,這樣對收錄質量有一定好處;二是由於能高效的爬行,就會受到蜘蛛(Spider)歡迎,這樣對收錄數量有很大好處。
而DIV+CSS布局基本上不會存在這樣的問題,從技術角度來說,XHTML在控制樣式時也不需要過多的嵌套。
這雖然沒有得到確認,但還是建議使用Table布局的朋友們,在設計時盡可能的不要使用多層表格嵌套,SEOer(seo工作者們)們在文章中說明了這一點,相信他們也不是沒有依據。
DIV+CSS的網頁布局對SEO的好處三、對搜索引擎的排名
基於XTHML標準的DIV+CSS布局,一般在設計完成後會盡可能的完善到能通過W3C驗證。截止目前沒有搜索引擎表示排名規則會傾向於符合W3C標準的網站或頁面,但事實證明使用XTHML架構的網站排名狀況一般都不錯。
DIV+CSS的網頁布局對SEO的好處四、提高網頁的訪問速度
DIV+CSS布局較Table布局減少了頁面代碼,載入速度得到很大的提高,這在蜘蛛(Spider)爬行時是非常有利的。過多的頁面代碼可能造成爬行超時,蜘蛛(Spider)就會認為這個頁面無法訪問,影響收錄及權重。
真正的SEOer(seo工作者們)不只是為了追求收錄、排名,快速的響應速度是提高用戶體驗度的基礎,這對整個搜索引擎優化及營銷都是非常有利的。
換一個角度拋開DIV+CSS對SEO的有利影響.單獨來講這種div+css布局也是很有益的,可以說是實下是最流行的網頁布局方式.可是加快我們網站的速度,便於管理與修改.當然div+css布局也有不完善的方面,比如說,他的css樣式表與各種瀏覽器之間的不兼容問題.當然如果你是div+css高手的話相信這個不難吧!
3、跪求:網頁設計實訓個人總結
《網站設計與製作》實訓報告
X學院 XX班 XX X號
一.實訓時間:
2010年6月7日到2010年6月13日二.實訓地點:
科實南213
三.實訓組員:
XXX、XXX
四.實訓目標:
以金華農特產為主題,製作網站,通過綜合實訓進一步鞏固、深化和擴展學生的理論知識與專業技能。
五.實訓策劃:
這一周,我們要進行《網站設計與製作》實訓,我們認為做網站前最主要的是確定主題、框架和標題欄的設計。因此我們相互討論之後,確定製作以「健康」為主題的「林安健康網」,但在之後的資料收集和網頁的框架的建設中,我們發現出了問題,在確認無法做出效果後,我們決定放棄這個主題,重新建立以「水果」為主題,以我們的名字連體命名的「林安水果網」。以下是我們的策劃內容:
1.確定主題。製作網頁,首先是確定主題,金華有許多特色水果,水果產品豐富,,經過考慮,確定以金華水果品種為主題的網站 ,建立一個簡單的介紹金華水果的網站,專業介紹一些金華地區優秀的水果市場和銷售渠道等。我們本次間的網站基本以綠色為基點,綠色是生命的顏色,綠色代表著生機勃勃,所以本站以綠色為風格,讓整個網站充滿綠的生機。
2.設計主頁。主頁的設計是整個網站的靈魂,構思導航欄的分類,然後是整體規劃,每一版塊都有其個性的色彩,清晰明了,便於閱讀瀏覽,我們構思大致分幾部分,首頁,特價專區,優質水果,果樹栽培,婺城商場,金東商場,客戶中心,聯系我們,意見反饋等板塊,再加入個別網站等,每一部分又分幾小部分,內容比較充分,多樣。確定導航欄的各個分類標題之後對於建立二級子網尤為重要,我們運用Photoshop CS3技術來設計出導航欄,再用Fireworks CS3或Photoshop CS3技術製作切片,建立導航欄,將整體的主頁效果建立起來。
3.資料的搜集。主頁的導航欄設計好後,接下來就是對主頁導航欄的各個內容進行資料的收集,我們採用大量的資料收集再對資料進行塞選,得到最適合導航欄內容的資料。素材的選擇,要符合網站的主題,圖片的大小要符合模板的輪廓,我們將不符合模板的用Photoshop處理編輯,然後放入站點底下,進行圖文的鏈接和排版。
4. 建立模板和庫。此次網站建設中我們決定大量運用模板和庫,運用模板和庫對於建立網站提供便利同時也為我們減少大量的工序。本次水果網的建設主要採用兩個模板,各具風格,樣式標准。
5.各個子網頁的建立。我們設計好模板後只要在可編輯區依次編輯所需資料就可,運用模板建立子網頁少了很多工序,為我們節省大量的時間。盡管我們建立了模板,但我們在建立子網時很小心,因為一張圖片的大小插入就有可能破壞整個模板的結構尤其在使用表格時,因此我們對所插入的圖片和表格都得進行測量,做到不影響網站整體的美觀。
6.實現網頁間的鏈接。做好個格子網和首頁後,接下來就是通過模板的鏈接,將整個網站中的網頁鏈接起來,過程其實很簡單,主要是把要鏈接的文字和圖標選擇在選擇工具欄的鏈接按鈕最後選擇自己要鏈接的網頁單擊確定便可以了。通過模板建的幾張網頁其實超鏈接都不怎麼用鏈接,只需要修改模板上的鏈接就可以了,這也是通過模板新建網頁的好處,省去一張一張超級鏈接的時間了。做好這一步後,網站基本算是建好了。
7.向靜太網頁插入動態效果。在基本建好網頁中的插入層和時間軸,製作其動態效果,讓整個網頁充滿生機。我們在網上進行flash素材的收集,通過Flash CS3設計出主題下的風格動態效果。然後插入到靜態網頁中,使網頁更加生動形象。
六.實訓心得:
通過這半年的學習實踐中 和老師的指導下以大量明晰的操作步驟和典型的應用實例,教會我們。使更豐富全面的軟體技術和應用技巧,使我們真正對所學的軟體融會貫通。所以我結合所學專業的內容製作了企業水果網站,作為實習的成果。其內容是多樣化的。製作網頁用的軟體是Deamweaver CS3軟體。它提供了網頁和表單的動態生成到企業級的解決方案。主圖是一個網頁的門面,它能體現出這個網頁的整體風格。
製作網頁,首先是確定主題,經過再三考慮,就做了個關於金華水果的網站 ,要對這些有些了解,於是確定主題,做一些類似的網站,但考慮到,現在網路上好多類似的網站,但有些內容不適合我們大學生閱讀,對於我們來說有點不實際,根據這種情況,最後決定建立一個簡單的介紹金華水果的網站,專門介紹一些金華地區優秀的水果市場和銷售渠道等。於是網站主題確立。
然後是整體規劃,每一版塊都有其個性的色彩,清晰明了,便於閱讀瀏覽,大致分幾部分,首頁,特價專區,優質水果,果樹栽培,婺城商場,金東商場,客戶中心,聯系我們,意見反饋等板塊,再加入個別網站等,每一部分又分幾小部分,內容比較充分,多樣。
再後是收集資料與素材,大量瀏覽相關網站,收集關於金華水果的圖片,進行Photoshop CS3圖片處理和排版,插入好的文章和圖片等,還有參考一些好的網站的布局,特色,顏色搭配,背景圖等。
再後是設計網頁圖片,用flash製作網友調查表,用Photoshop製作靜態圖片。再後是建立站點,和製作網頁了,使用dreamweaver製作。
首頁內容精彩豐富,首頁主要是導航作用。首頁製作時,時刻考慮著網頁的基本原則:統一,連貫,分割,對比及和諧的原則,內容統一,都是為了主題服務,一個網站強調的就是一個整體,只有圍繞一個統一的目標所做的設計才是成功的;連貫,頁面之間關系連貫,統成一體;每版內容都自成一體,顏色各異,便於瀏覽;整個網頁有動有靜,顏色不同,形成對比,不呆板,富有生氣;顏色各異,但又不同之中又相同,渾然一體。
簡潔實用: 這是非常重要的,網路特殊環境下,盡量以最高效率的方式將用戶所要想得到的信息傳送給他就是最好的,所以要去掉所有的冗餘的東西。使用方便:同第一個是相一致的,滿足使用者的要求,網頁做得越適合使用,就越顯示出其功能美;頁面用色協調,布局符合形式美的要求: 布局有條理,充分利用美的形式,是網頁富有可欣賞性,提高檔次。當然雅俗共賞是人人都追求的。
利用我們所學的模板設計,製作更完美的頁面。將動態網頁與靜態網頁結合起來
再後,調試過程,好多次本來在Deamweaver CS3里好好的,把字調的好好的,位置很對,可在瀏覽器里御覽就出毛病了,不是靠上了,就是靠下了,很不老實,經過再三調試,整理,加了好多表格,終於滿意了。
通過溫本周的實訓,發現自己還有很多的不足。就框架的應用很難把握,切片也很難合理切割,當插入圖片的時候把原有的模板給撐破了,精確定位很重要。因為學藝不精,所以不會網頁的代碼設計,只能通過網路三劍客綜合使用。不過也實踐中也學到了很多知識,比如原本不知道網頁設計還需要切片,表格的嵌套是非常重要的,模板的應用時非常便捷的。還有一些行為中的效果也是蠻不錯的。所以這次實訓還是很有意義的。
4、網頁設計實驗報告
2
5、網頁設計與製作實驗
這個要求還是不難的,不過製作報告還是只有自己來寫的。可以自己提供素材,才能百分百原創。支持在線預覽效果。