網頁設計與制作教學課件作者HTML+CSS+JavaScript張洪斌教學資源KC11120100008_設計文檔課件.doc

《課程案例

——案例

圖3-1 網站div結構布局示意圖

3.2界面效果圖的分析與切片

本案例是為了讓讀者更清楚使用CSS進行整站布局的方法，所以這里只介紹站點首頁的制作方法。其中，站點首頁的效果圖如圖3-2所示。

在制作切圖時，首先要區分出頁面的內容和修飾部分。然后分析出哪些修飾部分是可以用CSS代碼來實現的，哪些部分是可以用重復背景來實現的，最后要切出需要知道詳細寬度的部分。在制作切圖時，最好把修飾背景上的文本內容去掉，同時盡量減少圖片文件的數量。制作好的首頁切圖如圖3-3所示。

圖 3-2 站點首頁效果圖 圖3-3 首頁的切片

從圖3-2可以看出可以看出，首頁在縱向可以分為3個部分：頭部(包括logo部分和導航)、內容部分、底部。其中，中間內容部分又可以分為3個部分：左側的精品課程和專題學習網站部分、中間內容部分、右側關于我們部分。

分析完頁面結構之后，就是切圖的制作，其內容文本的隱藏、切片的選擇、保存格式等方面。下面進行詳細的講解。

從圖3-2可以看出，切片中作為背景使用的大多是圓角框的部分和含有漸變顏色的部分。其中使用單純一種顏色的部分，可以用CSS來實現。具體哪些修飾部分使用背景圖片，哪些修飾部分使用CSS制作，將在后面詳細介紹。切好圖后，將切片導出保存為html格式即可。

3.3制作站點的首頁頭部

效果圖切圖完成后，就可以開始制作頁面了。現在整個頁面分成幾個部分進行制作，下面分解進行講解。

3.3.1首頁頭部的信息和基礎樣式的制作

首先制作頁面頭部信息，主要包括頁面標題等，其代碼程序如下：

數字化教學資源平臺網站

在鏈接樣式的語句后面，第12行增加了link元素，其目的是附加外部樣式表。

注意：第8行設置charset=utf-8，如果網站全部頁面都這樣設置，可以防止出現亂碼頁面。

接下來制作頁面的基礎樣式，其代碼如下所示。

/* 基礎樣式 */

*{

margin: 0px;

padding: 0px;

font-family: 宋體; /*定義使用的字體*/

color:#58595B;

font-size:11px;

list-style-type: none;

text-decoration: none;}

body{

height: 100%;

background-color:#5c5c5c;} /*定義背景顏色*/

img{

border:none;}

a { /*定義頁面鏈接的樣式*/

color: #ffffff;

text-decoration: none;}

a:link{

text-decoration:none;}

a:hover {

text-decoration: underline;}

form {

margin: 0px;

padding: 0px;}

.clear{

line-height:1px;

clear:both;

visibility:hidden;}

在第3-10行代碼的基礎樣式中定義了字體、頁面的背景顏色和相關各個頁面元素的初始樣式、同時取消了可能存在兼容問題的元素的補白和邊界。第15行的border：none，表示所有圖片沒有邊框。

3.3.2首頁頭部的分析

首先還是對頭部的效果圖進行分析，其目的是區分頁面中內容和修飾的部分。頭部的效果圖如圖3-4所示。

圖3-4 頁面頭部效果圖

從圖12-24可以看出，頭部主要分為兩個部

總結

以上是生活随笔為你收集整理的张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。