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

《課程案例

——案例

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

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

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

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

圖 3-2 站點(diǎn)首頁(yè)效果圖 圖3-3 首頁(yè)的切片

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

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

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

3.3制作站點(diǎn)的首頁(yè)頭部

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

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

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

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

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

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

接下來(lái)制作頁(yè)面的基礎(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 { /*定義頁(yè)面鏈接的樣式*/

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

3.3.2首頁(yè)頭部的分析

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

圖3-4 頁(yè)面頭部效果圖

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

總結(jié)

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

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