一、什么是網頁設計
網頁設計是一種建立在新型媒體之上的新型設計。
它具有很強的視覺效果、互動性、互操作性、受眾面廣等其它媒體所不具有的特點,它是區別于報刊、影視的一個新媒體。它既擁有傳統媒體的優點,同時又使傳播變得更為直接、省力和有效;為了適應當今時代發展,必須增加藝術設計院校的網頁設計課程;為了更好的體現網頁這一新型設計的特點,將它和傳統媒體進行比較,了解它的優勢所在;一個成功的網頁設計,首先在觀念上要確立動態的思維方式,其次,要有效地將圖形引入網頁設計之中,增加人們瀏覽網頁的興趣,在崇尚鮮明個性風格的今天,網頁設計應增加個性化因素。
>網頁設計是一種建立在新型媒體之上的新型設計。它具有很強的視覺效果、互動性、互操作性、受眾面廣等其它媒體所不具有的特點,它是區別于報刊、影視的一個新媒體。
它既擁有傳統媒體的優點,同時又使傳播變得更為直接、省力和有效;為了適應當今時代發展,必須增加藝術設計院校的網頁設計課程;為了更好的體現網頁這一新型設計的特點,將它和傳統媒體進行比較,了解它的優勢所在;一個成功的網頁設計,首先在觀念上要確立動態的思維方式,其次,要有效地將圖形引入網頁設計之中,增加人們瀏覽網頁的興趣,在崇尚鮮明個性風格的今天,網頁設計應增加個性化因素。 網頁設計區別與網頁制作,是將策劃案中的內容、網站的主題模式,以及結合自己的認識通過藝術的手法表現出來;而網頁制作通常就是將網頁設計師所設計出來的設計稿,按照W3C規范用html語言將其制作成網頁格式。
這就相當于一個干腦力活,一個是干體力活,但是一個優秀的網頁設計師對著兩到工序都是十分了解的,因為他要知道自己的設計稿,是否會為網頁制作人員制作頁面帶來麻煩。 在網站設計的流程中我們還會聽到說UI/UE的說法,這是兩個較為重要的環節,主要都是為瀏覽者著想的。
UI(User Interface,用戶界面): UI的意思是用戶界面,是英文User Interface的縮寫。既瀏覽者在瀏覽網頁時,通過視覺所能觀察到的一切事物,這些都是需要設計的部分,在互聯網行業,做界面設計的人被貶義的稱為“美工”。
其實我們一開始接觸電腦時就應該對UI有很深的認識,從最早的DOS操作系統到Windows 1。0,再到Windows XP。
我們開機所看到的就叫用戶界面,DOS操作系統黑底白字的文本界面,Windows XP的經典藍色界面,這些都是用戶界面的發展歷程。 從簡單到復雜,從庸俗到華麗,也證明了用戶界面設計越發成熟。
UE(User Experience,用戶體驗):UE的意思是用戶體驗,英文叫做User Experience,縮寫為UE, 或者UX。是指一個瀏覽者在訪問一個網站或者使用一個產品時的印象和感受,對網站的布局、色彩、功能、感覺是否滿意,在第一次訪問離開后是否還想再回訪,是否能發現明顯的Bug(既網站在瀏覽過程中出現的錯誤)。
二、怎么做網頁活動設計
活動字幕,也稱為滾動看板、滾動字幕。
活動字幕的使用使得整個網頁更有動感,顯得很有生氣。現在的網站中也越來越多地使用活動字幕來加強網頁的互動性。
用Javascript編程可以實現活動字幕效果;用Dreamweaver的圖層再用其時間線功能可以做出非常漂亮的滾動看板。 而用HTML的活動字幕標記所需的代碼最少,確實能夠以較少的下載時間換來較好的效果。
該標記語法格式如下: 各參數的含義: align:是設定活動字幕的位置,不過除了居左、居中、居右三種位置外,又增加靠上(align=top)和靠下(align=bottom)兩種位置。 Bgcolor:用于設定活動字幕的背景顏色,一般是十六進制數。
Direction:用于設定活動字幕的滾動方向是向左、向右、向上、向下。 Behavior:用于設定滾動的方式,主要由三種方式: behavior="scroll"表示由一端滾動到另一端; behavior="slide":表示由一端快速滑動到另一端,且不再重復; behavior="alternate"表示在兩端之間來回滾動。
Height:用于設定滾動字幕的高度。 Width:則設定滾動字幕的寬度。
Hspace和Vspace:分別用于設定滾動字幕的左右邊框和上下邊框的寬度。 Scrollamount:用于設定活動字幕的滾動距離。
Scrolldelay:用于設定滾動兩次之間的延遲時間。 Loop:用于設定滾動的次數,當loop=-1表示一直滾動下去,直到頁面更新。
標記的默認情況是向左滾動無限次,字幕高度是文本高度,滾動范圍:水平滾動的寬度是當前位置的寬度;垂直滾動的高度是當前位置的高度。 應用技巧 1、全取默認值,所用代碼最少,請看下面的例子 這個滾動字幕全取默認值,源代碼:這里寫字幕內容,代碼是不是很少? 2、垂直滾動 只要加上diriction="up"就行了,如這里寫字幕內容。
3、多行文本的活動字幕 由于標記只能作用于一段文本,因此多行活動字幕,分行時只能用標記,不能用標記。 示例源代碼: 活動字幕內容第一行 活動字幕內容第二行 活動字幕內容第三行 4、在字幕內容中加入圖象 雖是一個活動字幕標記,但它允許在其中加入圖象。
下面是一個加入了圖片的代碼: 這是加入圖象的活動字幕 5、在Dreamweaver中使用標記 Dreamweaver不能在編輯窗中直接加入marquee標記,但可在源代碼檢視器中加入標記,然后在編輯窗中編輯活動字幕的內容即可。 標記的參數較多,在應用中要把握一個原則,能用默認值就不要再設置參數值,用什么參數就設置該參數的值,其它參數就不要再設置,以把代碼控制在最少的范圍內。
(以前自己總結的)。
三、網頁設計前提要學會什么
做為一個設計做重要的就是要有強烈的設計感覺,繪畫基礎是必須的,怎樣的結構才能讓你的頁面更美觀,更大方,再者可以多上網看看一些精辟的設計,這樣對你有很大的幫助。
你也可以多看看韓國的網站,這個國家對于這方面的設計比較強,但多數是用FLASH實現的。 而歐美的呢,稍微簡單一點,既簡單又不失大雅。
。你可以多看看。
。 有了設計感覺之前你也必須要懂得如何操作網頁制作軟件,不能光有感覺動不了手,也不能動得了手而沒有感覺。
。 最簡單的方法:你上網上下點教程去,去百度里或迅雷里搜一下,網頁制作教程下載,你從最簡單的開始學起,這是最好的辦法。
PS:至于操作軟件,我覺得Frontpaget和Dreamweaver都一樣,各有各的好,只是Frontpaget對于初學者來說比較容易入手一些,在你學習的時候你可以先學前者,再學后者,都很容易的。
專業網頁設師最基本要學的幾個軟件:photoshop、flash等,當然,還有其它相關設計軟件,這看你個人喜好決定要學什么了。 。
。 以上個人建議,祝好運! 。
四、經驗談:房產網站建設中網站結構如何優化
房產網站中的網站結構優化,需要注意以下幾點:一、網站代碼的優化網站代碼指的是網站建設時的系統時所編寫開發的代碼,程序員在編寫代碼時不要出現flash等類型的代碼,因為這些代碼搜索引擎蜘蛛是不抓取的,尤其是新建設的網站更是如此。
這樣會導致網站無法快速的獲得收錄和排名。二、頁面跳轉的優化企業網站建設時可以可以用301定向跳轉來進行新老網站的交替,交老網站的流量引流到新建設的網站。
當房產網站發生域名備案被注銷、域名被注冊的情況時可以進行301跳轉,但是除非萬不得已,否則不要進行301跳轉以外的跳轉。三、網站動態URL優化網站頁面的URL是否歸整對于網站頁面的收錄有著直接的關系,它是搜索引擎蜘蛛抓取網站頁面及共內容的依據。
1、URL建設優化目前網站建設注行的是動態網頁,但是動態網頁的網址會產生包含如“?”“=”“-”“&”等符號的URL,而這些內容搜索引擎蜘蛛是無法識別的。所在房產網站建設時可以將一些重要的頁面靜態化。
2、URL設計優化網站URL的設計應該以能夠清晰易記標準,如:URL越短越好,URL的目錄層次盡可能少,URL存放的文件名盡可能相關,字母分小寫,如果目錄名稱或者文件名出線單詞,建議使用短橫線“-”分隔。四、網站鏈接的結構優化網站鏈的結構分為扁平式與樹形式兩種,其中扁平式指的是所有的文件放在根目錄下,樹形結構指的是一個網站下面有一個欄目,而這個欄目又包含了許多的小欄目,小欄目下面才是文章。
房產網站鏈接結構優化時應以頁面處于什么樣的鏈接結構位置,距離首頁有幾次點擊才能到達為標準,不要過分強調目錄層次。五、網站導航優化網站導航是網站中較為重要的網站內容索引目標,整個網站的內容分門別類的顯示在網站導航欄中。
企業在進行網站建設時需要在計劃時就對這部分內容進行優惠,為后期的SEO優化做準備。房產網站的導航優化應該結構清晰、內容簡潔為核心,網站導航中的欄目標題應圍繞關鍵詞或詞組進行設置,這樣的網站導航內容,不盡用戶喜歡,搜索引擎也喜歡。
五、怎樣使自己的網頁設計的更美觀
更換整體頁面背景的源代碼: body {b (博客整體頁面背景圖片) repeat scroll!important;} 更換頁面題圖logo圖片的源代碼: 。
logo {b (博客最上方題圖logo圖片) no repeat no scroll!mportant;} 更換頁面橫幅題圖的源代碼: 。 banner {b (橫幅題圖大圖) no repeat no scroll!mportant;} 更換頁面橫幅題圖下面的菜單圖片的源代碼: 。
menu{ b ("題圖下的長條菜單圖片") no- repeat center;} 更換頁面文章標題欄上翻時的圖片的源代碼: 。 feeds 。
up{ b ("文章標題欄上翻時的圖片") no- repeat center;} 更換頁面文章標題欄下翻時的圖片的源代碼: 。 wn{b ("文章標題欄下翻時的圖片") no- repeat center;} 更換頁面文章結尾處評論閱讀菜單欄的圖片的源代碼: 。
feeds 。function{ b ("文章結尾處評論閱讀菜單欄的圖片") no- repeat right;} 更換頁面空白面板標題欄上翻時圖片的源代碼: 。
links 。up{ b ("空白面板標題欄上翻時圖片");} 更換頁面空白面板標題欄下翻時圖片的源代碼: 。
wn{b (空白面板標題欄下翻時的圖片);} 更換頁面空白面板的背景圖片的源代碼: 。links 。
mid{ b (空白面板的背景圖片);} 更換頁面形象照片處的背景圖片的源代碼: 。photo 。
mid{ b (形象照片處的背景圖片);} 更換頁面自定義空白面板背景圖片的源代碼: 。 label 。
mid{ b (自定義空白面板的背景圖片);} 更換頁面日歷面板的背景圖片的源代碼: 。calendar 。
mid{ b ("日歷面板的背景圖片");} 更換頁面公告欄標題欄上翻時圖片的源代碼: 。callboard 。
up{ b ("公告欄標題欄上翻時圖片");} 更換頁面公告欄標題欄下翻時圖片的源代碼: 。 wn{b ("公告欄標題欄下翻時圖片");} 更換頁面公告欄的背景圖片的源代碼: 。
callboard 。mid{ b ("公告欄的背景圖片");} 更換頁面正文背景圖片的源代碼: 。
bodyBg{ b ("正文背景圖片");} 更換頁面正文背景圖片的源代碼: 。bodyBottom{ b ("正文背景圖片");} 更換頁面正文文章頁數圖片的源代碼: 。
ge{b ("正文文章頁數圖片") no-repeat center;} 更換頁面留言板標題欄上翻時的圖片的源代碼: 。 gbook 。
up{ b ('留言板標題欄上翻時的圖片') no-repeat;} 更換頁面留言板標題欄下翻時的圖片的源代碼: 。 wn{b ('留言板標題欄下翻時的圖片') no-repeat;} 添加步驟: 第一步、登錄新浪博客,輸入“登錄名”“密碼”和“驗證碼”后點擊“登錄”。
第二步、點擊進入主頁上方的“控制面板”。 第三步、進入“個人首頁維護”。
第四步、進入“自定義空白模板”。 第五步、點擊“新增”新增一個空白面板。
第六步、在“面板標題”寫好面板的名稱,勾選面板下方的“顯示源代碼”勾選框,此處注意一定要勾選,否則將不能成功。 將以下代碼貼入文本框中,點擊“保存”。
第七步、點擊“控制面板”左側“BLOG信息設置”中的“定制我的首頁”。 第八步、點擊“添加模塊”。
第九步、勾選剛剛建立好的面板,點擊下方的“選取”。 第十步、剛剛建好的顯示面板出現,點擊“保存設置”。
。