[互聯(lián)網(wǎng)]網(wǎng)站設(shè)計(jì)流程(文件)
【正文】 對(duì)網(wǎng)址的正確顯示造成困難；不要使用過(guò)長(zhǎng)的目錄，太長(zhǎng)的目錄名不便于記憶；盡量使用意義明確的目錄，以便于記憶和管理。一般，建立網(wǎng)站的鏈接結(jié)構(gòu)有以下兩種基本方式。這樣瀏覽比較方便，隨時(shí)可以到達(dá)自己喜歡的頁(yè)面。所以，最好的辦法是：首頁(yè)和一級(jí)頁(yè)面之間用星狀鏈接結(jié)構(gòu)，一級(jí)和二級(jí)頁(yè)面之間用樹(shù)狀鏈接結(jié)構(gòu)。 1. 網(wǎng)頁(yè)版面布局的基本概念 最 開(kāi)始，一個(gè)新的網(wǎng)頁(yè)它就好像一張白紙，它需要你任意揮灑你的設(shè)計(jì)才思。 (1) 頁(yè)面尺寸。什么是造型，造型就是創(chuàng)造出來(lái)的物體形象。 1. 網(wǎng)頁(yè)版面布局的基本概念 2. 網(wǎng)頁(yè)布局的方法 網(wǎng)頁(yè)布局的方法有兩種，第一種為紙上布局，第二種為軟件布局。所以在開(kāi)始制作網(wǎng)頁(yè)時(shí)，要先在紙上畫出頁(yè)面的布局草圖來(lái)。 ? (2) 造型的選擇。當(dāng)然，它不是最后的結(jié)果，而是以后制作時(shí)的重要參考依據(jù)。圖片是美化頁(yè)面和說(shuō)明內(nèi)容必需的媒體，在這里把圖片加入到適當(dāng)?shù)牡胤健? 3. 網(wǎng)頁(yè)版面布局的技術(shù) 1) 層疊樣式表的應(yīng)用 在新的 HTML ， CSS(層疊樣式表 )被提出來(lái)，它能完全精確地定位文本和圖片。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響。但從布局上考慮，框架結(jié)構(gòu)不失為一個(gè)好的布局方法。 2. 確定網(wǎng)站的整體風(fēng)格 當(dāng)確定建立網(wǎng)站的目的后，就可以根據(jù)網(wǎng)站的目的確定整個(gè)網(wǎng)站的風(fēng)格。 根據(jù)實(shí)際生活中的習(xí)慣，將主題分成 3步進(jìn)行闡述：商品查找、商品查看、交易。 如圖 ， 【 快速搜索 】 提供了關(guān)鍵字的查找功能。 (1) 在產(chǎn)品名中盡量標(biāo)出與其他同類產(chǎn)品不同的特性，這也是針對(duì)縮短用戶購(gòu)買的中間過(guò)程所做的。最好再添加通過(guò)單擊打開(kāi)鏈接的大幅圖像的功能。 3. 確定網(wǎng)頁(yè)的布局 對(duì)于商業(yè)網(wǎng)站，能吸引客戶注意是最主要的，所以說(shuō)網(wǎng)站的首頁(yè)布局非常重要。 圖 給商品加圖片 關(guān)于網(wǎng)頁(yè)版式布局，由于在當(dāng)當(dāng)網(wǎng)中需要展示的商品類別比較多，所以最好采用表格布局的方式。對(duì)于在網(wǎng)上發(fā)布的信息一定要及時(shí)更新，確保把最新的信息展示給客戶。 實(shí)訓(xùn)總結(jié) 通過(guò)了本章的案例，學(xué)生應(yīng)該能夠?qū)W(wǎng)上商城的規(guī)劃設(shè)計(jì)方法有所了解。 (4) 每個(gè)網(wǎng)站都應(yīng)該包括一組導(dǎo)航工具，它出現(xiàn)在此網(wǎng)站的每一個(gè)頁(yè)面中，稱為 ______________。 ( ) (3) 網(wǎng)站內(nèi)容上最好使用成語(yǔ)、行話。 ( ) (7) 網(wǎng)頁(yè)布局的方法有兩種，第一種為紙上布局，第二種為網(wǎng)上布局。 ( ) 本 章 結(jié) 束 。 ( ) (9) 不要使用過(guò)長(zhǎng)的目錄，太長(zhǎng)的目錄名不便于記憶；盡量使用意義明確的目錄，以便于記憶和管理。 ( ) (5) 顯示網(wǎng)站內(nèi)容時(shí)盡量避免彈出式窗口。 2. 判斷題 (1) 背景和前文的對(duì)比盡量要大，以便突出主要文字內(nèi)容。 (2) 網(wǎng)站按照其功能和結(jié)構(gòu)形式大體上可以分為_(kāi)______________、 _______________、 ____________、_________________、 ______________、______________。 (2) 實(shí)物宣傳。 在主頁(yè)鏈接到后面的網(wǎng)頁(yè)中，最好使用導(dǎo)航條，因?yàn)檫@樣客戶能隨時(shí)返回到某一類型的商品頁(yè)面上，而且還可以知道現(xiàn)在客戶所處的位置。所以對(duì)于當(dāng)當(dāng)網(wǎng)來(lái)說(shuō)，肯定要在它的商品上加上一個(gè)圖片，這樣既能展示商品又能吸引客戶的目光。 圖 產(chǎn)品介紹示例 3) 加上廠家主頁(yè)鏈接地址 加上廠家主頁(yè)鏈接地址以便于用戶對(duì)產(chǎn)品做出更多的了解。 圖4.5 同類產(chǎn)品信息 (2) 詳細(xì)的產(chǎn)品信息。如圖 ，這里只是截取了部分分類。 如圖所示，購(gòu)物指南是當(dāng)當(dāng)網(wǎng)站為不熟悉購(gòu)買流程的用戶制作的 【 幫助 】 文件。 商務(wù)網(wǎng)站，實(shí)用性為根本，但僅僅實(shí)用并不能將一個(gè)有著購(gòu)買欲望的普通用戶變成你的購(gòu)買者。 3. 網(wǎng)頁(yè)版面布局的技術(shù) 實(shí)訓(xùn)：網(wǎng)上商城的規(guī)劃 設(shè)計(jì) 實(shí)訓(xùn)目的 實(shí)訓(xùn)內(nèi)容 實(shí)訓(xùn)過(guò)程 實(shí)訓(xùn)總結(jié) 實(shí)訓(xùn)過(guò)程 1. 確定建立網(wǎng)站的目的 在建立一個(gè)網(wǎng)站前首先要確定建立的目的，這是制作網(wǎng)站的依據(jù)，只有有了這個(gè)依據(jù)，才能確定這個(gè)網(wǎng)站到底向哪個(gè)方向發(fā)展。表格布局唯一的缺點(diǎn)是當(dāng)用了過(guò)多表格時(shí)，頁(yè)面下載速度受到影響。目前在許多站點(diǎn)上，層疊樣式表的運(yùn)用是一個(gè)站點(diǎn)優(yōu)秀的體現(xiàn)。這個(gè)軟件就是 Photoshop， Photoshop所具有的對(duì)圖像編輯的功能用到設(shè)計(jì)網(wǎng)頁(yè)布局上更是得心應(yīng)手。頁(yè)面的空白部分加入文本和圖形，因?yàn)樵陧?yè)面右邊有矩形作為陪襯，所以文本放置在空白部分不會(huì)因?yàn)樽筮叺幕【€而顯得不協(xié)調(diào)。選擇一個(gè)形狀作為整個(gè)頁(yè)面的主題造型，如選擇圓形，因?yàn)樗碇岷?，和時(shí)尚流行比較相稱，然后在矩形框架里隨意畫出來(lái)，還可以試著再增加一些圓形或者其他形狀。 ? (1) 尺寸選擇。 1) 紙上布局法 ? 許多網(wǎng)頁(yè)制作者不喜歡先畫出頁(yè)面布局的草圖，而是直接在網(wǎng)頁(yè)設(shè)計(jì)器里邊設(shè)計(jì)布局邊加內(nèi)容。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，可以充分運(yùn)用自然界中的其他形狀以及它們的組合，例如，矩形、圓形、三角形、菱形等。一般分辨率在 800 600的情況下，頁(yè)面的顯示尺寸為780 428像素；分辨率在 640 480的情況下，頁(yè)面的顯示尺寸為 620 311像素；分辨率在 1024 768的情況下，頁(yè)面的顯示尺寸為 1007 600像素。當(dāng)然也可以創(chuàng)造出自己的設(shè)計(jì)方案，但如果你是初學(xué)者，那么最好明白網(wǎng)頁(yè)布局的基本概念。雖然內(nèi)容很重要，但只有當(dāng)網(wǎng)頁(yè)版面布局和網(wǎng)頁(yè)內(nèi)容成功結(jié)合時(shí)，這種網(wǎng)頁(yè)或者說(shuō)站點(diǎn)才是受人喜歡的。 因此，在實(shí)際的網(wǎng)站設(shè)計(jì)中，總是將這兩種結(jié)構(gòu)混合起來(lái)使用。這樣的鏈接結(jié)構(gòu)瀏覽時(shí)，一級(jí)級(jí)進(jìn)入，一級(jí)級(jí)退出，條理比較清晰，訪問(wèn)者明確知道自己在什么位置，但是瀏覽效率低，一個(gè)欄目下的子頁(yè)面到另一個(gè)欄目下的子頁(yè)面，必須回到首頁(yè)才能再進(jìn)行。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。友情鏈接內(nèi)容較多，需要經(jīng)常更新的可以建立獨(dú)立的子目錄；而一些相關(guān)性強(qiáng)，不需要經(jīng)常更新的欄目 . (3) 在每個(gè)主目錄下都建立獨(dú)立的 Images目錄。有的網(wǎng)站制作者為了方便，將所有文件都放在根目錄下。 目錄結(jié)構(gòu)與鏈接結(jié)構(gòu) 網(wǎng)站的目
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1