導航:首頁 > 萬維百科 > 網站版面設計實訓

網站版面設計實訓

發布時間:2020-09-07 09:23:33

1、網頁設計實訓報告里有一個網頁模塊介紹,要怎麼寫,網頁模塊是什麼意思

是網頁模板吧。網頁一般沒有模塊,模塊一般在模塊化程序設計中,網頁一般都是指的模板。
網頁模板就是已經做好的網頁框架,使用網頁編輯軟體輸入自己需要的內容,再發布到自己的網站。每個網頁模板壓縮包內包含:PSD圖片文件(可用Photoshop、ImageReady或Fireworks修改),按鈕圖片PSD文件、Flash源文件和字體文件,推薦使用Dreamweaver軟體向網頁模板添加內容。
1)模板的概念:作為創建其它文檔的樣板的文檔。創建模板時,可以說明哪些網頁元素不可編輯,哪些元素可以編輯。其擴展名為.dwt。
2)模板的作用:有利於保持網頁風格的一致;提高工作效率。
1.創建模板
1)創建一個全新的模板:在模板面板中,使用快捷菜單按鈕或單擊面板上的新建按鈕
模板面板的打開:Window菜單--Templates
2)創建基於文檔的模板:File菜單-Save As Template
2.設置模板頁面屬性
1)用模板創建的文檔繼承模板的頁面屬性,頁標題除外。
2)設置:Modify菜單-Page Properties
3.定義模板的可編輯區
1)定義模板的可編輯區
在模板文檔中選定對象、Modify菜單、Templates、New Editable Region
2)取消可編輯區標記
Modify菜單-Templates-Remove Editable Region

2、網頁設計實驗報告

2

3、網站版面設計要注意哪些問題?

需要注意以下四點:

1.加強視覺效果
2.加強文案的可視度和可讀性
3.統一感的視覺
4.新鮮和個性是布局的最高境界。

設計首頁的第一步是設計版面布局。
就象傳統的報刊雜志編輯一樣,我們將網頁看作一張報紙,一本雜志來進行排版布局。
雖然動態網頁技術的發展使得我們開始趨向於學習場景編劇,但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的,你可以領會要點,舉一反三。

版面指的是瀏覽器看到的完整的一個頁面(可以包含框架和層)。因為每個人的顯示器解析度不同,所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不同尺寸。

布局,就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。
你可能注意到:「最適合」是一個不確定的形容詞,什麼才是最適合的呢?抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼,成功者只能建議您用什麼方法,什麼途徑才能最容易獲得成功,而不可能有一步成功的"秘訣"告訴您。

我們在設計思考系列文章第四篇講過站點整體的創意,版面布局也是一個創意的問題,但要比站點整體的創意容易,有規律的多。讓我們先來了解一下版面布局的步驟:

一.草案
新建頁面就象一張白紙,沒有任何錶格,框架和約定俗成的東西,你可以盡可能的發揮你的想像力,將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆,當然用作圖軟體photoshop等也可以)。這屬於創造階段,不講究細膩工整,不必考慮細節功能,只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張,最後選定一個滿意的作為繼續創作的腳本。

二.粗略布局
在草案的基礎上,將你確定需要放置的功能模塊安排到頁面上。(註:功能模塊我們在"首頁設計-引子"中提過,主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意,這里我們必須遵循突出重點、平衡諧調的原則,將網站標志,主菜單等最重要的模塊放在最顯眼,最突出的位置,然後在考慮次要模塊的排放。

三.定案
將粗略布局精細化,具體化。(靠你的智慧和經驗,旁敲側擊多方聯想,才能作出具有創意的布局。)

在布局過程中,我們可以遵循的原則有:

1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式,主要強調秩序,能達到安定誠實、信賴的效果。
2、異常平衡---即非對照形式,但也要平衡和韻律,當然都是不均整的,此種布局能達到強調性、不安性、高注目性的效果。
3、對比---所謂對比,不僅利用色彩、色調等技巧來作表現,在內容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線,使瀏覽者仿照跟隨的心理,以達到注視頁面的效果,一般多用明星凝視狀。
5、空白---空白有兩種作用,一方面對其他網站表示突出卓越,另一方面也表示網頁品位的優越感,這種表現方法對體顯網頁的格調十分有效。
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感,特別有效。圖片解說的內容,可以傳達給瀏覽者的更多的心理因素。

以上的設計原則,雖然枯燥,但是我們如果能領會並活用到頁面布局裡,效果就大不一樣了。比如,
○網頁的白色背景太虛,則可以加些色快;
○版面零散,可以用線條和符號串聯;
○左面文字過多,右面則可以插一張圖片保持平衡;
○表格太規矩,可以改用導角試試。
經過不斷的嘗試和推敲,你的網頁一定會亮麗起來的哦:)

看看我們經常用到的版面布局形式:
1."T"結構布局。所謂"T"結構。就是指頁面頂部為橫條網站標志+廣告條,下方左面為主菜單,右面顯示內容的布局,因為菜單條背景教深,整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網頁設計中用的最廣返的一種布局方式。這種布局的優點是頁面結構清晰,主次分明。是初學者最容易上手的布局方法。缺點是規矩呆板,如果細節色彩上不注意,很容易讓人"看之無味"。

2."口"型布局。這是一個象形的說法,就是頁面一般上下各有一個廣告條,左面是主菜單,右面放友情連接等,中間是主要內容。這種布局的優點是充分利用版面,信息量大(我的主頁首頁即屬於這種布局)。缺點是頁面擁擠,不夠靈活。也有將四邊空出,只用中間的窗口型設計,例如網易壁紙站。

3."三"型布局。這種布局多用於國外站點,國內用的不多。特點是頁面上橫向兩條色塊,將頁面整體分割為四部分,色塊中大多放廣告條。

4.對稱對比布局。顧名思義,採取左右或者上下對稱的布局,一半深色,一半淺色,一般用於設計型站點。優點是視覺沖擊力強,缺點是將兩部分有機的結合比較困難。

5.POP布局。POP引自廣告術語,就是指頁面布局象一張宣傳海報,以一張精美圖片作為頁面的設計中心。常用於時尚類站點,比如ELLE.com。優點顯而易見:漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。

以上總結了目前網路上常見的布局,其實還有許許多多別具一格的布局,關鍵在於你的創意和設計了。

4、網站美工設計基礎 平面設計的門類有哪些

《網站美工設計基礎》
一、課程的性質與任務
《網站美工設計基礎》是「計算機網路技術」專業(網路編輯、網頁設計等方向)(專科)的一門統設必修課。通過本課程的學習,使學生了解平面設計構圖與視覺傳達的關系,掌握平面設計構圖的幾種常用的表現方法,理解點、線、面等設計元素之間的相互關系,掌握CorelDRAW繪圖工具的基本使用方法,從而掌握利用繪圖工具設計網頁的方法,成為初步掌握網站美工基礎知識和基本技能的應用型人才。
本課程側重介紹網站美工的基本理論、基礎知識、基本技能和方法,使學生了解網站和網頁的基本設計思想,提高和掌握對色彩基礎知識(色相、明度、純度,空間混合概念,色彩搭配,色彩的心理、網頁的色彩設計、配色軟體的使用等)、平面構成(平面設計構圖的形式要素、關系要素,平面設計構圖的基本形式、平面設計構圖的形式規律,平面設計構圖的幾種常用的表現方法等)、版式(版式設計的形式法則、網頁的版式構成與設計)及創意等相關的內容。在完成基礎知識教學任務的同時,還要著重加強學生實際動手能力的培養。
二、與相關課程的銜接、配合、分工
先修課程:計算機應用基礎
後續課程:網路多媒體素材加工、網頁製作三劍客、網路信息採集、網路信息編輯等。
三、課程教學的基本要求
本課程包括基礎理論和實訓兩大部分,特點和教學基本要求如下:
1、基礎理論部分
※對色彩基礎知識、平面構成、色彩搭配、版面設計等美術基礎知識應能較熟練的掌握。
※掌握並能利用平面繪圖軟體輔助設計、製作網頁。
2、實訓部分
※通過本課程的學習,使學生提高色彩觀察能力和色彩的感知能力;一般色彩搭配能力;了解平面設計構圖與視覺傳達的關系,熟悉點、線、面等設計元素的性質並能靈活運用;掌握平面設計構圖的幾種常用表現方法;加強實際動手能力的培養和訓練;培養對優秀網頁版式分析模仿的能力;基本掌握一種繪圖工具的使用,最終能設計出優秀網頁。
四、教學內容
第一章 21世紀網頁設計的審美
教學內容:
1.什麼是網頁
2.網頁設計與美術基礎知識
2.1網頁與平面構成
2.2網頁與色彩
 第二章 平面構成
教學內容:
2.1形式美的基本法則
2.2平面設計的門類、元素和形象
2.3重復
2.4漸變
2.5發射
2.6骨骼
2.7特異
2.8對比
2.9肌理
2.10圖與底
2.11基本型的各種排列
教學要求:
第三章 色彩在現實領域中的應用
教學內容:
3.1色彩的概念
3.1.1色彩的產生
3.1.2光源
3.1.3物體固有色與光源色
3.2色彩三要素
3.2.1明度
3.2.2色相
3.2.3純度
3.3色彩在現實領域中的應用
3.3.1色彩表示法
3.3.2色彩的混合
3.3.3色彩的對比
3.3.4色彩調和
3.3.5色彩肌理
3.3.6無彩色與有彩色的相互作用
3.3.7色彩結構
3.3.8色彩在現實領域中的應用
 第四章 網頁版式設計的圖文魅力
教學內容:
4.1網頁設計的獨特性與必要性
4.2網頁設計的審美情感
4.3網頁設計的裝飾語境
4.4網頁版式設計的形式法則
4.5網頁的版式構成與設計創意
第五章 繪圖工具的基本應用
教學內容:
5.1CorelDRAW的基礎知識
5.2工具箱基本應用
5.3圖像填充效果
5.4點陣圖的應用與編輯
第六章 CorelDRAW與網頁設計
教學內容:
6.1按鈕的製作
6.2製作Logo
6.3繪制導航條
6.4製作廣告
6.5文本的處理
6.6主頁設計

5、用ASP製作網頁的實訓報告總結

1. 實習內容及知識應用
1.1實訓內容以及進程安排
實訓內容:動態網站製作的學習及動態網站的製作
這次在3名指導老師的帶領下,我們主要學習了用2種現在比較流行的動態網站開發平台來開發網站:JSP平台與ASP.NET平台;JSP平台方面主要通過XX老師示範製作myblog個人博客網站而學習JSP平台的搭建、資料庫的連接、網站測試等內容;而ASP.NET平台主要通過XX老師和XX2位老師的指導,學習並搭建了ASP.NET平台,掌握了網頁三劍客製作動態網站的基本常識與方法,以及資料庫的連接、網站測試及Photoshop處理圖片等內容


進程安排

日期
日程安排
08年7月28日 確定小組組員,小組成員為:XX(組長),XX(組員)
08年7月29日 確定小組動態網頁開發平台為ASP.NET
08年7月30日 確定網站要實現的功能①
08年7月31日-8月5日 製作BBS網站
08年8月6日 測試BBS網站
08年8月7日-08年8月15日 製作電子商務網站
08年8月16日-8月17日 測試電子商務網站
08年8月18日-8月20日 提交網站給指導老師,聽取指導老師意見,完善網站
08年8月21日-8月22日 網站製作與小學期總結,寫小學期文檔
08年8月23日 提交小學期文檔,小學期實訓結束

說明:①經過討論,我們組決定建設2個網站來實現以下功能
網站1-BBS網站:在這個網站中,我們主要實現了站點日歷與站點搜索引擎2大功能。
網站2-電子商務網站:在這個網站中,我們主要實現了用戶注冊與登陸、購物車的實現、訂單的顯示等頁面。
1.2知識(點)應用以及經驗總結
這次製作2個網站主要應用的知識有以下:
⒈ 資料庫的創建
① Access資料庫的創建
Acess提供2種資料庫創建方式:一種是創建一個空資料庫,然後編輯數據表的內容;另一種使用資料庫自帶的模板創建;在動態網頁面中,一般應用第一種方式
② Access資料庫的打開方式
包括打開、只讀方式打開、獨占方式打開、只讀獨占方式打開
③ 利用設計器設計Access資料庫
利用Access資料庫里的設計器設計Access資料庫
④ 使用向導設計Access資料庫
通過Access的向導,經過一系列對話來設置Access資料庫
⑤ 通過輸入數據連接Access資料庫。
先輸入數據再確定欄位
⒉ 資料庫的連接
① ODBC連接資料庫
打開ODBC數據源管理器面板。 在windows XP中打開控制面板,再打開管理工具,找到數據源(ODBC),雙擊圖標打開管理器,選擇系統DSN。添加數據源,點擊添加按鈕,開始創建數據源,在接下來的對話框中選擇數據源的驅動程序,因我們使用的是Microsoft Access創建的資料庫,所以選擇Microsoft Access Driver(*.mdb)作為資料庫驅動程序。點擊完成按鈕,填寫數據源名,以簡單易記為原則,這里我們以userinfo(表名)來命名,注意不要沖突。說明填不填都無所謂,是描述這個資料庫的用途而已。點擊選擇按鈕,選擇你的資料庫文件。找到自己想添加的資料庫,選中即可。
② OLEDB連接資料庫
在Dreamweaver 中,可以通過在連接字元串中包含 Provider 參數來創建 OLE DB 連接。打開Dreameaver,在站點裡面先新建個ASP頁面(index.asp)。 在「應用程序」面板中選中「資料庫」標簽。只要我們在前面建立了站點,選擇了文檔類型(即我們選的ASP Javascript的),並且還測試了伺服器(http://localhost/newgn/);則當前我們看到就剩下第四步沒有打勾了。 那現在就點擊「+」號,選擇「自定義連接字元串」。在彈出來的「自定義連接字元串」對話框中,"連接名稱"隨便寫一個。「連接字元串」就要好好填寫了。當"使用此計算機上的驅動程序"時應用絕對路徑:DRIVER={Microsoft Access Driver (*.mdb)};DBQ=d: ewgndatabasecnbruce.mdb 否則「使用測試伺服器上的驅動程序」採用Mappath轉換路徑"Driver={Microsoft Access Driver (*.mdb)};DBQ="& server.mappath("/newgn/database/cnbruce.mdb"),點擊「測試」,出現成功對話框,成功連接資料庫後,在DW里其實是自動生成了一個連接文件。位置在自動生成的Connections文件夾中,名稱是你剛才在「自定義連接字元串」隨便敲的為命名asp文件。還可以注意到DW資料庫標簽內看到mdb文件內的各個欄位。
⒊ 動態網頁開發技術
① 記錄集的定義
分為簡單記錄集定義與高級記錄集定義,簡單記錄集的定義使用戶不必用SQL語句查詢而快速定義記錄集。高級記錄集定義則通過SQL語來定義記錄集。
② 記錄集的綁定
記錄集(查詢)的綁定。在網頁中插入一個表單,並輸入需要插入到資料庫的相關內容,然後通過記錄集(查詢)功能來實現表單和資料庫的相互協調使用,並實現「動態」功能
③ 重復區域伺服器行為
伺服器行為其實一段VB代碼,為了方便用戶對記錄集的操作,DW中將常用代碼進行封裝,命名為伺服器行為。而重復區域伺服器行為相當於一個FOR循環函數
④ 設置記錄集導航條
添加記錄集導航條以分頁的方式用來顯示重復區域伺服器行為顯示有限的記錄
⒋XML動態網頁製作
① XSLT
XSLT 是一種用於將 XML 文檔轉換為 XHTML 文檔或其他 XML 文檔的語言,XSLT 用於將一種 XML 文檔轉換為另外一種 XML 文檔,或者可被瀏覽器識別的其他類型的文檔,比如 HTML 和 XHTML。通常,XSLT 是通過把每個 XML 元素轉換為 (X)HTML 元素來完成這項工作的。
⒌伺服器的配置
① 站點存放點的創建
打開電腦,在D盤下建立一文件夾newgn(這個夾子就是你的站點存放點了),並且在裡面建幾個子文件夾(就好似你網站的子目錄)。
② 建立虛擬目錄
回到newgn的根目錄,右鍵選擇「共享和安全」(其實是快速地建立虛擬目錄)
③ 設置IIS的虛擬目錄
出現屬性對話框後,選擇「Web共享」標簽,點選「共享文件夾」,出現共享別名對話框,選擇默然設置,確定即可
⒍利用Dreamweaver創建站點
選擇「編輯站點」,在彈出的屬性框中選「高級」標簽,從「分類」中先選「本地信息」,右窗口中設置站點名稱,本地根文件夾,然後設置遠程信息,訪問選擇「本地/網路」,遠端文件夾仍選擇站點文件夾d: ewgn,再接著「測試伺服器」,「伺服器模型」暫為ASP vbscript,「訪問」本地/網路,「測試伺服器文件夾」仍是站點文件夾d: ewgn,「URL前綴」在http://localhost後面添加「newgn/」,添加的東西就是設置的虛擬目錄,這時,站點定義基本結束,點擊確定。出現「編輯站點」對話框,「完成」即可。
⒎利用FIREWORKS處理圖片
利用FIREWORKS處理一些圖片和製作一些GIF動畫圖片

經驗總結:
利用Dreamweaver做ASP動態網站主要為以下幾步:
①網站伺服器配置
②資料庫設置
③資料庫顯示
④建立注冊系統
⑤建立登陸系統
⑥美化網站

2. 實習心得
{要求500字以上}
l 過程、功能需求、菜單設計、界面設計、資料庫設計、知識的應用技巧、團隊合作感受等(指導教師可按實習內容進行要求並自行增加內容)
本次小學期期實訓,我們小組主要製作了2個動態網站,而製作這2個動態網站的主要過程是:
⒈個人博客網站
①站點的定義
②資料庫的連接
③製作站點搜索引擎及搜索結果頁面
④製作日誌列表
⑤製作BLOG首頁面,基本頁面設計
⑥定義並綁定記錄集
⑦界面的美化
⑧設置重復區域
⑨指定日期的日誌內容頁面
⑩日誌具體內容頁面-日誌內容和回復及日誌回復功能
⒉電子商務網站
①站點的建立和連接字元串
②用戶登陸及用戶登陸信息顯示頁面
③錯誤信息頁面設計
④創建模板
⑤添加登陸頁面的嵌入框架
⑥用戶注冊頁面的實現
⑦添加「密碼」比較驗證的代碼
⑧製作最新產品導航條與滾動產品導航條
⑨產品展示的實現
⑩用戶購物車:限制用戶登陸、添加購物車程序、購物車鏈接、刪除購物車
而這2個網站實現的功能大不相同,前者為一個博客網站,主要實現了站點搜索引擎、日誌列表、站點日期等內容;後者為一個電子商務網站,主要實現了用戶登陸、用戶注冊、密碼驗證、產品展示以及用戶在線購物等內容;剛確定製作網站的時候,本設想將2個網站整合在一起,但由於技術和其他原因,這個目的沒能實現。
製作動態網站,資料庫最重要,在我們小組這次製作網站的過程中,花時間最多的地方就是資料庫-資料庫的建立、資料庫與網站的連接、記錄集的綁定、資料庫安全等等,由於時間的關系,我們小組這次採用的是Acess資料庫,它與其他資料庫相比較相對來說操作比較簡單。在資料庫的製作中,這次我們小組遇到的難題主要是採用OLEDB連接資料庫的方法,這個難題的關鍵之處是在於如何利用 Provider 參數來創建 OLEDB 連接,我們在網上搜索了大量資料並在XX老師的幫助下終於學會了如何使用OLEDB連接資料庫。
總結這次小學期實訓,這次2個網站能這么順利的完成,離不開老師的幫助和小組成員的努力,雖然這次小學期實訓我們小組只有2人,但是我們是一個有效率、有組織、有團隊精神的小組,有效率在於小組製作網站中分工明確、討論有目的;有組織在於小組成員能按時、有質量的完成自己的分工任務,值得一提的是這次小學期網站開發的大部分時間在小學期實訓教室而我們小組成員還從未擅自曠課、上課遲到、早退等違紀行為;有團隊精神在於我們小組實訓過程中的共進退,從不因為自己分工任務提前完成而拉下其他組員,我們意識到小組是一個有組織、有記錄、有共同目的的集體而不是一個由分散的個人組成的團體,在這次小學期實訓中之所以提出小組分工這是鍛煉小組組員的個人能力培養,而幫助有困難的組員這充分培養了組員之間的默契和團隊協作能力。
這次是畢業前最後的一次小學期實訓,也是自己做投入、最用心的一次實訓,與以前的小學期相比,以前的小學期都是以掌握某種實訓技能為主,而這次小學期則不僅掌握了動態網站的製作技術而且還製作出了自己的成果,自己非常高興。經過這次小學期,我領悟到任何東西都要「學以至用」,學習了還不行還要看自己掌握了沒,掌握了還不行還要看自己熟練了沒,熟練了還不行還要做出一定成果。即將畢業,能接受這么一次有意義的小學期實訓感覺很充實。
網址:www.liuboxue.cn

6、網頁設計與製作實驗

這個要求還是不難的,不過製作報告還是只有自己來寫的。可以自己提供素材,才能百分百原創。支持在線預覽效果。

7、如何設計網站版面

版面布局的步驟:

一.草案

新建頁面就象一張白紙,沒有任何錶格,框架和約定俗成的東西,你可以盡可能的發揮你的想像力,將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆,當然用作圖軟體photoshop等也可以)。這屬於創造階段,不講究細膩工整,不必考慮細節功能,只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張,最後選定一個滿意的作為繼續創作的腳本。

二.粗略布局

在草案的基礎上,將你確定需要放置的功能模塊安排到頁面上。(註:功能模塊我們在"首頁設計-引子"中提過,主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意,這里我們必須遵循突出重點、平衡諧調的原則,將網站標志,主菜單等最重要的模塊放在最顯眼,最突出的位置,然後在考慮次要模塊的排放。

三.定案

將粗略布局精細化,具體化。(靠你的智慧和經驗,旁敲側擊多方聯想,才能作出具有創意的布局。)

在布局過程中,我們可以遵循的原則有:

1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式,主要強調秩序,能達到安定誠實、信賴的效果。
2、異常平衡---即非對照形式,但也要平衡和韻律,當然都是不均整的,此種布局能達到強調性、不安性、高注目性的效果。
3、對比---所謂對比,不僅利用色彩、色調等技巧來作表現,在內容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線,使瀏覽者仿照跟隨的心理,以達到注視頁面的效果,一般多用明星凝視狀。
5、空白---空白有兩種作用,一方面對其他網站表示突出卓越,另一方面也表示網頁品位的優越感,這種表現方法對體顯網頁的格調十分有效。
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感,特別有效。圖片解說的內容,可以傳達給瀏覽者的更多的心理因素。

以上的設計原則,雖然枯燥,但是我們如果能領會並活用到頁面布局裡,效果就大不一樣了。比如:

○網頁的白色背景太虛,則可以加些色快;
○版面零散,可以用線條和符號串聯;
○左面文字過多,右面則可以插一張圖片保持平衡;
○表格太規矩,可以改用導角試試。

經過不斷的嘗試和推敲,你的網頁一定會亮麗起來的哦:)

與網站版面設計實訓相關的知識