− 简单地说，建立站点就是定义一个存放网站中零散文件的文件夹。这 样，可以形成明晰的站点组织结构图，方便增减站内文件夹及文档等 ，这对于网站本身的上传维护，内容的扩充和移植都有着重要的影响 。下面将详细讲解建立站点的步骤。
10.1 准备工作
让IT教学更简单，让IT学习更有效
•10.1.1 建立站点
让IT教学更简单，让IT学习更有效
第十章 实战开发（上）
• 建立站点
• 切片的使用
• 站点初始化设置 • 首页面详细制作
目录
让IT教学更简单，让IT学习更有效
准备工作 首页面详细制作
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.1 建立站点
− “站点”对于制作维护一个网站很重要，他能够帮助我们系统地管理 网站文件。一个网站，通常由HTML网页文件、图片、CSS样式表等构 成。
− 切图的目的是把设计效果图转化成网页代码。常用的切图工具主要有 Photoshop和Fireworks。
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.5 页面布局
页面布局对于改善网站的外观非常重要，是为了使网站页面结构更加清 晰、有条理，而对页面进行的“排版”。
10.2 首页面详细制作
a:link,a:visited{color:#222;text-decoration:none;} /*未点击和点击后的样式
*/
a:hover{color:#FD4913;}
/*鼠标移上时的样式*/
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.4 切片
− 为了提高浏览器的加载速度，或是满足一些版面设计的特殊要求，通 常需要把效果图中有用的部分剪切下来作为网页制作时的素材，这个 过程被称为“切图”。
/*全局控制*/
body{font-family:Arial, Helvetica, sans-serif,"宋体"; font-size:12px;}
.contianer{width:100%; text-align:center;}
.main{width:1000px; margin:0 auto; clear:both; text-align:left;}
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.3 站点初始化设置
/*重置浏览器的默认样式*/
body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend,
img {margin:0; padding:0; border:0; list-style:none;}
LOGO
PIC 导航菜单
操作菜单
10.2 首页面详细制作
让IT教学更简单，让IT学习更有效
• 10.2.2 制作banner和通告
仔细观察效果图，容易看出banner模块和通告模块均由左右两部分构成 。其中，banner模块的左侧为广告图、右侧为课程介绍，通告模块的左 侧为通告标题、右侧为通告内容，具体结构如图所示。
主体内容上
主体内容下
10.2 首页面详细制作
让IT教学更简单，让IT学习更有效
• 10.2.4 制作底部版权区域
观察效果图底部版权区域可以看出，版权信息模块大致可以分为top按钮 和内容两部分。由于其背景通栏显示，所以需要在top按钮和内容外加上 一层大盒子。网页底部版权区域的具体结构如图所示。
TOP按钮
内容
本章小结
让IT教学更简单，让IT学习更有效
• 本章首先介绍了网页制作前的准备工作，包括建立及初始 化站点、效果图的分析、切片的使用以及如何进行页面布 局等步骤。然后分步骤地分析了传智播客设计学院首页面 的制作思路及流程，最后完成首页面的制作。
• 通过本章的学习，初学者应该熟悉网页制作前的相关准备 工作，并且能够对列表、浮动、定位、CSS精灵以及滑动 门技术等有更充分、更深入的理解。熟练掌握好这些知 识，可以大大地提高网页制作的效率。
10.2 首页面详细制作
让IT教学更简单，让IT学习更有效
• 10.2.3 制作主体内容区域
分析首页面主体内容效果图可以看出，主体内容模块大体上由上、下两部 分构成，上面部分又可以分为左、中、右三部分，每部分都分别由两个上 下结构的模块构成。下面部分由左右两部分构成，分别是数据统计版块和 资源中心版块。主体内容区域的具体结构如图所示。
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.3 站点初始化设置
− 页面创建完成后，网站形成了明晰的组织结构关系，站点根目录文件 夹结构如图所示。
站点根目录文件夹结构图
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.3 站点初始化设置
− 为了清除各浏览器的默认样式，使得网页在各浏览器中的显示效果一 致，在创建好所需的HTML和CSS样式文件后，首先要做的就是对 CSS样式进行初始化并声明一些通用的样式。打开页面公用样式文件 style.css，编写公用样式，具体如下：
（1）创建网站根目录 在电脑本地磁盘任意盘符下创建网站根目录。这里在D盘“HTML+CSS 网页制作”文件夹下新建一个文件夹作为网站根目录。命名为 chapter10 ，如图所示。
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.1 建立站点
（2）在根目录下新建文件 打开网站根目录chapter10，在根目录下新建css和images文件夹，分别 用于存放网站所需的css样式表和图像文件，如下图所示。
− 另外，由于不同页面中相同的样式可以循环调用，所以需要建立一个 公用样式表文件style.css。为了使文件的命名与网站中对应页面的关 系更加清晰，下面，逐一介绍下本项目中各个页面的命名。
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.3 站点初始化设置
− index.html：首页面 − about_us.html：关于我们页面 − course.html：课程介绍页面 − course_info.html：课程介绍详情页面 − style.css：公用样式表文件 − index.css：首页面CSS文件 − about_us.css：关于我们页面CSS文件 − course.css：课程介绍页面文件CSS文件 − course_info.css：课程介绍详情页面CSS文件
观察效果图，不难看出整个页面大致可以分为头部、导航、banner 广告图、通知公告、主体内容、版权信息等六个模块，具体结构如 图所示。
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.2 首页面效果图分析
1、HTML结构分析
头部
导航
banner广告图
通知公告
主体内容
版权信息
首页面效果图分析
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.3 站点初始化设置
− 首先，在网站根目录文件夹下创建四个HTML文件，分别为index.ht ml、about_us.html、course.html、course_info.html。
− 然后，在CSS文件夹内创建各个页面对应的样式表文件，分别为inde x.css、about_us.css、course.css、course_info.css。
图片和样式表文件夹
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.1 建立站点
（3）新建站点 打开Dreamweaver工具，在菜单栏中选择【站点】→【新建站点】选项 ，在弹出的窗口中输入站点名称。然后，浏览并选择站点根目录的存储 位置，如图所示。
选择站点根目录
新建站点
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.2.1 制作头部和导航
观察效果图不难看出，网页的头部可以分为左（Logo）、中（pic）、右 （操作菜单）三部分。导航菜单结构清晰，可以通过无序列表来定义，同 时由于其通栏显示，所以，还需要在无序列表的外边加上一层大盒子。网 页头部和导航的具体结构如图所示。
让IT教学更简单，让IT学习更有效
• 10.1.1 建立站点
（4）站点建立完成 点击上一步所示界面中的“保存”按钮，这时，在Dreamweaver工具面 板组中可查看到站点的信息，表示站点创建成功，如图所示。
站点信息
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.2 首页面效果图分析
10.1 准备工作
让IT教学更简单，让IT学习更有效
• 10.1.2 首页面效果图分析
2、CSS样式分析 − 仔细观察页面的各个模块，可以看出，页面导航和版权信息模块通栏
显示，其他模块均宽1000px且居中显示。所以，页面的版心为1000 px。 − 精细地分析页面，不难发现除了banner部分的文字为微软雅黑和黑 体外，其余文字均为宋体。主体内容中链接文字均显示为#222、宋 体、12px。这些共同的样式可以做成CSS公用样式表文件供所有页面 调用，以减少代码冗余。