|
網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創(chuàng)造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 一、DIV+CSS網站頁面制作綜合案例概述 本例制作的網站首頁，主要包括“公司介紹”、“圖片展示”、“新聞動態(tài)”、“網上預訂”、“溫馨客房”、“特色餐飲”和“會議會務”等欄目。 這個頁面豎直方向分為上、中、下三個部分，其中上下兩部分的背景會自動延伸，中間的內容區(qū)域分為左右兩列，左列為主要欄目導航，右列是網站的公司介紹和圖片展示等正文內容。這個頁面具有很好的用戶體驗，例如，左側導航菜單具有鼠標指針經過時發(fā)生變化的效果。 二、內容分析 下面就來具體分析和介紹這個案例的完整開發(fā)過程。希望通過這個案例的演示，使讀者不但了解一些技術細節(jié)，而且能夠掌握一套遵從Web標準的網頁制作流程。 首先要確定一個問題，設計制作一個網站的第一步是什么?設計一個網頁的第一步是這個網頁的內容。一個網站要想留住更多的用戶，最重要的是網站的內容。網站內容是一個網站的靈魂，內容做得好，做到有自己的特色才會脫穎而出。當然有一點需要注意的是不要為了差異化而差異化，只有滿足用戶核心需求的差異化才是有效的，否則跟模仿其他網站功能沒有實質的區(qū)別。 網站的內容是瀏覽者停留時間的決定要素，內容空泛的網站，訪客會匆匆離去。只有內容充實豐富的網站，才能吸引訪客細細閱讀，深入了解網站的產品和服務，進而產生合作的意向。 在這個網站頁面中，首先要有明確的公司名稱或網站標志，此外要給訪問者方便地了解這個網站信息的途徑，包括自身介紹、聯系方式等內容的鏈接，接下來，這個網站的主要目的是宣傳公司，因此必須有清晰的導航結構。 我們要制作的這個網站要展示哪些內容呢?大致應包括如下內容。 三、頁面方案設計 在設計任何一個網頁前，都應該首先有一個構思的過程，對網站的功能和內容進行全面的分析。在具體制作頁面之前，可以首先設計一個。接著對版面布局進行細劃和調整，反復細劃和調整后確定最終的布局方案。 新建的頁面就像一張白紙，沒有任何表格、框架和約定俗成的東西，盡可能地發(fā)揮想象力．將想到的“內容”畫上去。這屬于創(chuàng)造階段，不必講究細膩工整，不必考慮細節(jié)功能，只用粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡可能地多畫幾張草圖，最后選定一個滿意的來創(chuàng)作。 接下來的任務就是使用Photoshop或Fireworks軟件來具體設計真正的頁面方案了。有經驗的網頁設計者通常會在制作網頁之前設計好網頁的整體布局，這樣在具體設計過程中會胸有成竹，大大節(jié)省工作時間。 由于本書篇幅有限，因此關于如何使用Photoshop設計制作完整的頁面方案就不再詳細介紹了。如果讀者對Photoshop軟件不熟悉，可以參考專門的Photoshop書籍，掌握一些Photoshop軟件的基本使用方法。 就是在Photoshop中設計的頁面方案。這一步的核心任務是美術設計，通俗地說就是讓頁面更美觀、更漂亮。 四、定義頁面的整體樣式 網頁設計中我們通常需要統(tǒng)一網頁的整體風格，統(tǒng)一的風格大部分涉及網頁中文字屬性、網頁背景色以及鏈接文字屬性等，如果我們應用CSS來控制這些屬性，會大大提高網頁設計速度，更加統(tǒng)一網頁總體效果。 建立文件后，首先要對整個頁面的共有屬Jf生進行一些設置，例如對字體、margin、padding背景顏色等屬性進行設置。 body{ 在body中設置了外邊距margin、內邊距padding都為O，行高line-height設為“1．5em”．字號設置為“l(fā)lpx”，并且設置字體設為宋體。 在body中使用background設置了水平背景圖像templatemo—body—bg．Jpg，這個圖像可以很方便地在設計方案圖中獲得，如果使用Photoshop軟件，可以切出一個豎條，可以切割得很細．減小文件的大小。在CSS中，repeat-x使這個背景圖像水平方向平鋪就可以產生寬度自動延俸的背景效果了。 五、DIV+CSS網站頁面制作綜合案例效果圖
六、【素材及源碼下載】 請點擊：網站頁面制作綜合案例 下載本實例相關素材及源碼
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
