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