网站建设与web设计实验指导书

《网站建设与web 设计》实验指导书实验一 网站建设规划和网站建设初步实验目的1.2.3.4.5.6.7.8. 对网站进行目标定位 观察适合在网上销售的商品类别 提出创建网站的商品目录结构 规划网站

《网站建设与web 设计》实验指导书

实验一 网站建设规划和网站建设初步

实验目的

1.

2.

3.

4.

5.

6.

7.

8. 对网站进行目标定位 观察适合在网上销售的商品类别 提出创建网站的商品目录结构 规划网站的框架结构 分析建站的步骤与方法 熟悉申请域名的流程和管理机构。 掌握IIS 的使用技巧。 练习在IIS 中建立站点和对站点进行管理。

实验目标

1. 提出网站建设过程中系统规划的总体思想和原则。

2. 确定企业网站销售商品的分类方法，方便用户快速浏览，找到自己所需要的商品或服务。

3. 确定网站提供服务的大框架，使浏览者能够在首页上通过网站的提示迅速进入自己需要的页面。

4. 为网站选择适当的方案，满足企业业务量的需要，具有服务稳定、价格适中、沟通便利、易于扩展的特点。

5. 能正确安装IIS 6.0

6. 在IIS 中建立和管理站点。

实验内容

1. 浏览大量成熟网站，参考网站的商品分类方法。（亚马逊www.amazon.com 、戴尔www.dell.com 、首都电子商城www.beijing.com.cn 、阿里巴巴）

2. 参考网站建站的方案，明确建设网站的步骤—般经过网站规划、域名注册、服务器配置、网页设计、网站测试与发布、网站管理与维护、网站推广等步骤就可以实现。

建站时可以是企业独立建站，可以是托付给相应的公司建站，也可以采取双方合作的方式建站。在分析企业需求时侧重点有所不同，要予以考虑。

3. 申请域名（可选做）

一个好的域名应该与企业的性质、企业的名称、企业的商标及平时的企业宣传一致。选择与本公司密切相关的域名，但注意不能超过20个字符。

访问中国互联网络信息中心www.cnnic.com.cn ，查询域名认证注册服务机构，选择一家

机构申请注册自己的域名。

4. DNS 设置（可选做）

5. 设置Internet 信息服务管理器（IIS ）

6. Web 站点的建立和管理

7. 以小组的方式，规划一个电子商务网站（如网上书店、鲜花礼品商务网站、在线电脑销

售网站等）。要求规划网站的栏目、形象设计、导航设计、网页布局设计，画出草图。、

实验二 创建一个静态页面——网站首页

实验目的

1．熟练掌握静态网页的制作

2．掌握简单的表单制作方法

实验要求

环境准备 :

计算机中装有IIS 、网页制作工具（如Dreamweaver 或Frontpage 等）软件、网页制作相关的素材和资料。

知识准备：熟练掌握网页制作工具的使用方法。

实验目标

创建如图2-1所示的“静雅书苑的网上书店”网站首页。

图2-1

问题分析

网页设计容易出现下列问题: ● 乱：网页内容太庞杂。

● 无吸引力：太简单，显得单调。

● 打开速度太慢：网页中使用了过多的多媒体元素。

● 重要信息不容易找到：原因是缺乏规划，没有对浏览者需 求进行深入分析。 解决方法

● 乱：网站首页布局要合理，分类清晰。

● 无吸引力：网站首页要提供足够的信息。

● 打开速度太慢：首页上图片的大小和使用数量要适当。

● 重要信息不容易找到：从网站浏览者的角度分析进行分析，确定内容安排。 实验步骤

（1）

（2）

（3）

（4） 启动网页制作工具Dreamweaver 软件。 建立本地站点。设置本地根文件夹为D:jingya。 新建一个静态网页文件，保存该文件名为index.htm 。 设置页面属性，在标题处输入“静雅书苑”，“左边距”和“上边距”都设置为

0。

（5） 插入一个表格，表格参数设置如图2-2所示。

图2-2

（6） 选中整个表格，在属性面板中设置表格对齐方式为“居中对齐”，如图2-3所示。

该表格将控制网站首页的整体布局，使网页在不同分辨率的显示器上都能正常显示。

图2-3

（7） 在表格中插入一个1行3列的表格，在属性面板中的“表格ID ”框中命名该表

格为B1，设置该表格属性为高60，宽度为100，单元格对齐方式为垂直方向“顶端对齐”。设置该表格第1、3列列宽为25，第2列列宽为50，效果如图2-4所示。

图2-4

（8） 在表格B1的第1和第2单元格中分别插入网站的logo 和Banner 图片（事先用

photoshop 或Fireworks 软件制作好），如图2-5所示。

图2-5

（9） 在B1的第3列中插入一个3行1列的表格，命名该表格为B11。表B11宽100，，

并在B11表格中填入如图2-6所示的内容，并设置B1的背景图片。

图2-6

（10） 在大表格中插入一个如图2-7所示的1行5列的表格，在属性面板中命名为B2。

该表格用来制作网页的导航栏。

图2-7

（11） 插入一个如图2-8所示的2行7列的表格，命名为B3。

图2-8

（12） 在B2表格中插入准备好的导航栏图片和填入如图2-9所示的其他项目。

图2-9

（13） 在B3表格中填入如图2-10所示的相关内容。

图2-10

（14） 为分类导航栏设置链接（在没有准备好其他页面的情况下，可以先用#设置无址

链接），如图2-11所示。

图2-11

（15） 在分类导航栏下面插入一个如图2-12所示的1行3列的表格，命名该表格为

B4。

图2-12

（16） 在表格B4的第1列中制作一个会员登录表单，如图2-13. 所示。

图2-13

（17） 制作如图2-14所示的“图书商城”、“影视商城”和“音乐商城”分类索引表格。

图2-14

（18） 为“图书商城”、“影视商城”和“音乐商城”分类索引表格设置背景颜色，如

#CCCCCC。在B4表格的第2单元格中制作“持续热销”图书信息，如图2-15所示。

图2-15

（19） 在B4表格的第3单元格中制作“最近新书”栏目的内容，如图2-16所示。

图2-16

（20） 制作“本月销售排行”栏目，如图2-17所示。