網(wǎng)頁設(shè)計與制作教學(xué)課件作者HTML+CSS+JavaScript張洪斌教學(xué)資源KC11120100008_設(shè)計文檔課件.doc

《課程案例

——案例

圖3-1 網(wǎng)站div結(jié)構(gòu)布局示意圖

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

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

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

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

從圖3-2可以看出可以看出，首頁在縱向可以分為3個部分：頭部(包括logo部分和導(dǎo)航)、內(nèi)容部分、底部。其中，中間內(nèi)容部分又可以分為3個部分：左側(cè)的精品課程和專題學(xué)習(xí)網(wǎng)站部分、中間內(nèi)容部分、右側(cè)關(guān)于我們部分。

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

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

3.3制作站點的首頁頭部

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

3.3.1首頁頭部的信息和基礎(chǔ)樣式的制作

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

數(shù)字化教學(xué)資源平臺網(wǎng)站

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

注意：第8行設(shè)置charset=utf-8，如果網(wǎng)站全部頁面都這樣設(shè)置，可以防止出現(xiàn)亂碼頁面。

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

/* 基礎(chǔ)樣式 */

*{

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行代碼的基礎(chǔ)樣式中定義了字體、頁面的背景顏色和相關(guān)各個頁面元素的初始樣式、同時取消了可能存在兼容問題的元素的補白和邊界。第15行的border：none，表示所有圖片沒有邊框。

3.3.2首頁頭部的分析

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

圖3-4 頁面頭部效果圖

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。