XHTML+CSS重构学院网站.docx

上传人:b****6 文档编号:8121498 上传时间:2023-01-28 格式:DOCX 页数:18 大小:28.83KB
下载 相关 举报
XHTML+CSS重构学院网站.docx_第1页
第1页 / 共18页
XHTML+CSS重构学院网站.docx_第2页
第2页 / 共18页
XHTML+CSS重构学院网站.docx_第3页
第3页 / 共18页
XHTML+CSS重构学院网站.docx_第4页
第4页 / 共18页
XHTML+CSS重构学院网站.docx_第5页
第5页 / 共18页
点击查看更多>>
下载资源
资源描述

XHTML+CSS重构学院网站.docx

《XHTML+CSS重构学院网站.docx》由会员分享,可在线阅读,更多相关《XHTML+CSS重构学院网站.docx(18页珍藏版)》请在冰豆网上搜索。

XHTML+CSS重构学院网站.docx

XHTML+CSS重构学院网站

编号:

         

 

 

  

 

论文题目:

XHTML+CSS重构学院网站

学生姓名:

学号:

指导日期:

年月日

系别:

信息技术系

专业:

计算机应用技术

班  级:

         

指导教师:

目录

摘要···········································································3

1·1创建文件结构,准备文件·················································4

1·2页面分区·······························································4-5

1·3模板背景切片·····························································6

1·4将背景转成代码···························································6

1·5Logo和站点名的切片······················································7

1·6和站点名转换成代码····················································8-9

1·7导航转换成代码··························································10

1·8悬停指示器切片··························································11

1·9创建欢迎区域····························································12

1·10欢迎图片的切片·····················································13-14

1·11样式化欢迎区域·····················································15-16

1·123D分割线切片·························································17

1·13侧边栏切片····························································18

1·14编写侧边栏HTML代码················································19

2·15通过CSS样式化侧边栏·············································19-20

2·16内容区域转换为代码···················································21

2·17内容区域样式化························································21

2·18页脚切片·······························································22

2·19页脚转换成代码························································22

2·20将页脚样式化··························································23

参考文献·····································································24

后记··········································································25

摘要

摘要:

在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的,获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见,它已成为学校、政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。

为了让更多学生和家长了解我们学校的情况,和对学校的交流。

所以,制作出学校的网站是必需的。

XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。

目前推荐遵循的是W3C于2000年1月26日推荐XML1.0。

XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。

因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。

简单的说,建立XHTML的目的就是实现HTML向XML的过渡。

应用XHTML+CSS过渡方法对以前制作的网站进行重构,不仅能使网站取得良好、一致的视觉效果,而且在整体效果修改时只需修改样式表文件,过程简单明了,提高了程序的可读性、理解性,且文件的大小、代码量也得到了精简.此外,这种方法也完全符合新的WEB标准,可以很容易转化为XML+CSS模式.

关键词:

网站设计;Dreamweaver;

第一章

<一>创建文件结构,准备文件

1在桌面上创建新的空目录,取名portfolio。

2在portfolio目录下面继续创建images目录用于存放图片。

3接下来创建两个空文件styles.css和index.html

4用你最喜欢的文本编辑器打开index.html,我将在本教程中使用AdobeDreamweaver。

5在文档的标签加入对styles.css的链接。

可以使用如下代码:

代码段1

<二>页面分区

以下是我们网页模板的基本结构。

我们从创建基本分区来开始我们的模板转换工作。

6我们将从在浏览器中居中、包含整个文档的主容器开始(也被称之为外壳(wrapper))。

在容器内部内的5个div将组成一个完整的页面:

这些div是:

#top,

#welcome,#sidebar,#content和#footer。

HTML代码如下:

代码段2

--CONTAINERSTARTS-->

--HEADER/NAVIGATIONSTARTS-->

--HEADER/NAVIGATIONENDS-->

--WELCOMEAREASTARTS-->

--WELCOMEAREAENDS-->

--SIDEBARSTARTS-->

--SIDEBARENDS-->

--CONTENTSTARTS-->

--CONTENTENDS-->

--FOOTERSTARTS-->

--FOOTERENDS-->

--CONTAINERENDS-->

<三>模板背景切片

7在我们把各个div转成代码之前,我们首先在页面中加入背景。

用Photoshop打开PSD文件,用矩形选框工具(M)选定头部/导航和背景的一点区域;选定的宽度可以只有1px

(因为我们将会在后面使用css来水平重复它)。

8在选定区域的底部,用滴管工具(I)记录下色彩的16进制值。

9选定好之后,点编辑>合并拷贝,创建一个新Photoshop文件(Ctrl+N),然后将选定区域复制到新文档中。

通常新建Photoshop画布长宽是剪切板中选定区域的大小。

如果不是,请确保他

们是一致的。

10在新Photoshop文档中,点文件>另存为web和设备所用格式(Alt+Shift+Ctrl+S),选择PNG-8格式,保存文件为background.png,保存在images目录下。

<四>将背景转成代码

11现在我们已经将背景图片从Photoshop中切片出来,我们可以开始写代码了。

打开CSS文件(styles.css),然后写入以下代码:

代码段3

*{

margin:

0px;

padding:

0px;

border:

none;

}

body{

background-image:

url(images/background.png);

background-repeat:

repeat-x;

background-color:

#001b32;

font-family:

Arial,Helvetica,sans-serif;

font-size:

12px;

color:

#c8c8c8;

}

#container{

margin:

auto;

width:

850px;

}

代码段3的解释

让我们来仔细的分析一下样式代码。

首先我们将所有元素的margin,padding,border的值归零以避免跨浏览器的兼容性。

我们这个用到的是*选择器。

接下来,我们样式化body元素;我们将background.png设置为背景,通过repeat-x使它水平重复。

同样把背景色设置为深蓝(#001b32)。

最后,我们把#container的margin设置为auto让布局居中,并且设置宽度为850px。

<五>Logo和站点名的切片

12现在我们接着制作模板的logo和站点标题。

使用矩形选框工具(M),选定站点的标题和标示文本

13就像处理background.png一样,复制这个区域到新文档,然后保存为title.png放在images目录。

<六>和站点名转换成代码

14我们转到HTML文档中,在#top这个div里面我们创建一个新div,ID为title。

15在#titlediv里面,加入

元素来放置我们的站点名;同样需要创建一个超链接()链接到站点主页。

对于这个模板,我们仅把href属性的值设为#,如果需要在实际中使用这

个模板,你可以用反斜杠(/)来代替#。

HTML代码如下:

代码段4

--HEADER/NAVIGATIONSTARTS-->

--WEBSITETITLESTARTS-->

YourWebsiteName

--WEBSITETITLEENDS-->

--HEADER/NAVIGATIONENDS-->

16现在我们转向样式表。

样式化#top区域元素。

代码如下。

代码段5

#top{

float:

left;

width:

850px;

height:

119px;

}

#title{

float:

left;

width:

278px;

height:

74px;

padding-top:

45px;

}

#titleh1{

display:

block;

float:

left;

width:

278px;

height:

74px;

text-indent:

-9999px;

}

#titleh1a{

display:

block;

width:

100%;

height:

100%;

background-image:

url(images/title.png);

background-repeat:

no-repeat;

background-position:

00;

}

代码段5的解释

让我们来仔细分析一下上面的代码。

首先我们需要将#top浮动到左边,然后给定一个固定的宽度和高度。

宽度应该和#container等宽,850px,高度应该和浅灰色区域等高,119px。

接下来,我们使用一种CSS背景图片替换的技术使用text-indent方法。

我们将#titleh1

里面的文字向左缩进-9999px,将文字推出了浏览器的可视区域。

这个技术对于屏幕阅读器的可访问性和搜索引擎优化都有好处。

<七>导航转换成代码

17在#top里面,#title下面我们创建一个ID为navigation的div。

在#navigation里面增加一个无序列表,class值设为nav-links。

以下

是#navigation的代码段。

代码段6

--NAVIGATIONSTARTS-->

--NAVIGATIONENDS-->

代码段6的解释

给无序列表设定一个nav-links的类主要目录是为了在链接CSS的时候不会影响到页面上的其他无序列表。

需要注意的是,最后一个列表项加入borderx2的类,意为“边框乘2”

;因为导航中的列表项都有一个分割线,我们需要给最后一样的左右都加上一个1px的边框(也就是边框乘2)。

<八>悬停指示器切片

18在给导航加入CSS样式之前,我们得首先把小小的悬停三角形切片。

到Photoshop中使用矩形选框工具(M)选定这个三角形,复制透明背景的新文档,保存为images目录下的

nav_hover.png。

导航样式化

19现在该是给导航加入CSS代码的时候了。

使用以下代码。

代码段7

.nav-linkslia{

float:

left;

width:

120px;

height:

68px;

text-decoration:

none;

text-transform:

capitalize;

color:

#666666;

font-size:

12px;

text-align:

center;

padding-top:

51px;

border-left-width:

1px;

border-left-style:

solid;

border-left-color:

#cecece;

}

.nav-linkslia:

hover{

color:

#00284a;

background-image:

url(images/nav_hover.png);

background-repeat:

no-repeat;

background-position:

centerbottom;

}

li.borderx2{

border-right-width:

1px;

border-right-style:

solid;

border-right-color:

#cecece;

}

代码段7的解释

首先,为了让列表项挨个的显示,我们将它们向左浮动。

然后给他们固定的宽度高度,使他们之前的空间均衡。

然后通过给text-decoration值none来去掉超链接默认的下划

线。

然后给每个列表项一个1px、灰色的左边框。

然后通过:

hover伪类来样式化悬停效果。

当鼠标悬停时,我们将列表项的背景设为nav_hover.png。

最后解决最后一个列表项右边没有分割线的问题,需要给.borderx2类声明一个border属性。

<九>创建欢迎区域

欢迎区域会被分割成两个部分,左边(#welcome-text)和右边(#welcome-image)。

20在index.html的#welcomediv中加入两个新的div,一个ID为welcome-text,一个ID为welcome-image。

我们会在切片完成后将两个div填充上内容。

<十>欢迎图片的切片

21转到PSD文件,关闭除了有渐变效果深蓝背景的其他所有图层(点击图层左边的眼睛图标)。

22使用矩形选框工具(M)选定一个宽度不超过850px的矩形,可以通过第一部分的设定好的参考线来选定。

23将这个深蓝背景转成web图片content_background.png,放在images目录下。

使用同样的方法,关闭除了欢迎图片图层的其他图层,切片蓝点和欢迎图片

新区域的HTML类似如下。

代码段8

--WELCOMEAREASTARTS-->

--WELCOMETEXTSTARTS-->

--WELCOMETEXTENDS-->

--WELCOMEIMAGESTARTS-->

--WELCOMEIMAGEENDS-->

--WELCOMEAREAENDS-->

24在#welcome-textdiv中文名增加一些欢迎文字。

使用

标签给欢迎文字增加标题,然后在以下添加无序列表。

25在#welcome-image中添加欢迎图片(本案例添加的是SixRevisions的网站裁图)。

合起来,HTML代码如下。

代码段9

--WELCOMEAREASTARTS-->

--WELCOMETEXTSTARTS-->

welcometoyourwebsite!

Loremipsumdolorsitamet,consectetur[...]

Proinfringillanunclorem,insollicitudinorci.Seduterosligula.

--WELCOMETEXTENDS-->

--WELCOMEIMAGESTARTS-->

--WELCOMEIMAGEENDS-->

--WELCOMEAREAENDS-->

<十一>样式化欢迎区域

26现在样式化欢迎区域。

复制以下代码到CSS中,后面有对代码的解释。

代码段10

#welcome{

float:

left;

width:

850px;

background-image:

url(images/content_background.png);

background-repeat:

no-repeat;

height:

326px;

padding-top:

40px;

}

h2{

text-transform:

uppercase;

color:

#ffffff;

font-size:

16px;

margin-bottom:

15px;

}

.heading-color2{color:

#9a9a9a;}

#welcome-text{

width:

406px;

line-height:

18px;

padding-top:

50px;

float:

left;

text-align:

justify;

}

#welcome-text{margin-bottom:

10px;}

.listli{

text-decoration:

none;

background-image:

url(images/bullet.png);

background-repeat:

no-repeat;

list-style-type:

none;

float:

left;

width:

180px;

padding-left:

20px;

margin-top:

10px;

background-position:

leftcenter;

}

#welcome-image{

float:

right;

height:

326px;

width:

427px;

}

代码段10的解释

让我们来详解一下上面的代码。

首先,我们通过background属性(content_background.png)给#welcome加入渐变背景,并且是不重复的(repeat:

no-repeat)。

让后给这个div一个固定的宽度高度;宽度为模板内容宽度(850px),高度为欢迎图片的高度(236px)。

通过text-transform属性让

内的文字大写。

将‘yourwebsite’包裹在class为heading-color2的span中,赋予其不同的颜色。

无序列表加入类list,然后把背景设置为bullet.png,通过list-style-type设为none去掉默认列表项前面的圆点。

最后,为了让#welcome-image在#welcome-text的右边显示,我们将其向右浮动,给定固定的宽度(在浮动元素中常用)。

同样给welcome_image.png一个固定的宽度高度值。

展开阅读全文
相关搜索

当前位置:首页 > 高中教育 > 数学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1