網站風格隨著時代的發(fā)展逐漸形成創(chuàng)意概念化設計,學生在首次接觸網頁設計的時候往往可以通過網站的主題探索到網站架構和文案設計,網站架構是整個網站設計的靈魂,可以以微妙的語言告知受眾網站的總體方向,而網站的內容設計就成了關鍵,這時網站的架構設計、版式設計、色彩設計與交互設計就是考驗學生是否掌握基本設計原理的依據(jù),換種說法也就是網站的內容和價值是怎么執(zhí)行落地的。學生在實踐調研的時候,對不同文化背景、不同行業(yè),或同一行業(yè)不同企業(yè)、部門等進行多維度展開,他們的品牌特色、品牌文化、產品定位、宣傳方向等都有各自的特點,架構設計自然會各成體系。通過學生們的實踐案例可以發(fā)現(xiàn),并不是所有的主題都只有首頁、關于我們、企業(yè)背景、產品中心、特色板塊、聯(lián)系我們、信息反饋等欄目,更多的同學會根據(jù)自己自己選題的文化特點重新斟酌網站架構欄目,也就是導航欄目的名稱,從而讓受眾能加深對主題網站的印象。
在《網頁設計》課程HTML,CSS及Javascript的學習中,許多學生面對交互設計實踐工作時,會出現(xiàn)項目內容的需求與溝通,操作實踐環(huán)節(jié)難以鏈接或交互行為錯誤等問題。HTML、CSS樣式是網頁設計課程中各種前端技術操作的基礎,各種細節(jié)的設置決定網頁設計視覺與交互效果的創(chuàng)意特色。html,head,title,body,div,p等元素的代碼設置是基礎,ul, li, h1、 h2、h3......, form,button,table,th,td等屬性的設置是網頁設計前端樣式的要點。
例如實例1:(Table)標簽的屬性設置,Width表示表格的寬度,常用的單位是像素值或百分比;Height表示表格的高度,常用的單位像素值或百分比;Align 表示表格在頁面的水平擺放位置,一般設定的取值為left、center 、right;Background表示表格的背景圖片;Bgcolor表示表格的背景顏色;Border表示表格邊框的寬度,常用的單位是像素;Bordercolor表示表格邊框的顏色設置。例如實例2:網頁設計實例中banner廣告條的視覺切換的交互效果,其設計思路可以簡單進行分析,首先,div+css布局視覺設計部分的內容,如果只顯示一幅視覺圖像,可以定義圖像數(shù)組,并且進一步在代碼區(qū)定義定時器的函數(shù)。其次,根據(jù)實踐項目需要演示的視覺圖像數(shù)目,再一次定義視覺圖像按鈕組。也就是通過路徑實現(xiàn)實例化圖像數(shù)組——切換圖像功能——寫入定時器——清除定時功能——鼠標懸停圖像選擇——鼠標離開自動播放實現(xiàn),后續(xù)可以把動作綁定到span的視覺圖像按鈕上。 |