制作页面的步骤.pdfVIP

制作页面的步骤：

一、在DM建立自己的站点

1.建立本地站点文件夹

比如myset

然后在myset文件夹中建立相应的内容文件夹，包括修饰图片文件夹images、内容

图片文件夹pic、多媒体文件夹media、脚本文件夹js、样式表文件夹css

2.在DM中建立站点映射，指向本地文件夹myset

3.在DM中新建html文件，起名index（这里的命名没有严格限制），Ctrl+s保存文件

默认到myset本地文件夹中。（建立站点的好处，以及后面陆续用到内容图片或背

景图片时的路径问题）

二、制作页面主体

在详细制作页面之前，首先大家先认清div+css的原理，就是将结构和表现、行为相分

离，不让内容、修饰性的代码及交互行为的代码混杂在一起。这样在以后的维护过程中，会

快捷很多。

1）了解块级元素和内联元素的区别

块级元素在页面中，如果不加任何css样式的设置，它会独占一行，比如div、p、ul、

li等标签

内联元素在页面中，会在一行显示。比如a、span、em、img、strong等

块级元素和内联元素之间可以相互转化，利用display属性。

2）了解一下盒模型

盒模型主要有：外边距、边框、内边距、内容四个主要成分组成。

外边距指的是margin属性；

边框是border；

内边距是padding；

内容是由元素的宽度和高度围起来的区域。

3）了解CSS的书写规范

a．基本语法：选择器{属性:;属性:;属性:;}

b．命名

每个人对css样式名的定义都有不同的习惯。

c．选择符的应用，主要有以下几种：

选择器分组

h1,p,em{font-size:18px;}

class类选择器

.mydiv{color:red;}

类选择器用的比较多，灵活性很大。

id选择器（唯一性）

#mydiv{font-size:20px;}

id选择器的另一用法，是为了获取页面中唯一的id元素，利用js控制实现交互效果。

包含选择器

.mydivp{color:#ff0;}

4）css调用

a．链接式

linkhref=”css/mystyle.css”rel=”stylesheet”type=”text/css”

即链接外部的样式表文件

b．导入式（@import不常用，暂省略）

c．内部样式表

head

styletype=”text/css”

.mydiv{font-size:14px;color:red;}

/style

/head

body

divclass=”mydiv”要控制的div/div

/body

d．内嵌式

divstyle=”display:none”要隐藏的内容/div

优先级：内嵌式内部样式表外部样式表

如果一个元素既含有id又含有class，则id的优先级大于class。

了解了以上内容后，开始制作主页的步骤如下：

观察页面的结构，大致做下分区。然后对每一个分区做详细的结构书写和css样式设置。

注：尽量将修饰性的图片作为背景体现，不要用内容的方式放在页面上。

三、浏览器兼容

主要是兼容主流的浏览器，比如：IE6、IE7和Firefox。

IE6存在比较多的bug，比如3px、双倍边距、文字溢出等。

建议大家在网上或书店找下相关的资料，这里不做详细的介绍了。

四、JavaScript的应用

在页面制作过程中，js的应用比较广泛，利用js可以做出很漂亮的交互效果，比如：

相册的轮回展示、焦点图的轮换、滑动式菜单、多标签式等很多效果。

也建议大家多了解一下。不多介绍了。