网站建设与web设计实验指导书
《建设与web设计》实验指导书
实验一建设规划和建设初步
实验目的
1.对进行目标定位
2.观察适合在网上销售的商品类别
3.提出创建的商品目录结构
4.规划的框架结构
5.分析建站的步骤与方法
6.熟悉申请域名的流程和管理机构。
7.掌握IIS的使用技巧。
8.练习在IIS中建立站点和对站点进行管理。
实验目标
1.提出建设过程中系统规划的总体思想和原则。
2.确定企业销售商品的分类方法，方便用户快速浏览，找到自己所需要的商品或服务。
3.确定提供服务的大框架，使浏览者能够在首页上通过的提示迅速进入自己需要的页面。
4.为选择适当的方案，满足企业业务量的需要，具有服务稳定、价格适中、沟通便利、易
于扩展的特点。
5.能正确安装IIS
6.0
6.在IIS中建立和管理站点。
实验容
1.浏览大量成熟，参考的商品分类方法。（亚马逊www.amazon.、戴尔www.dell.、首都电
子商城https://www.360docs.net/doc/8d1215688.html,、阿里巴巴https://www.360docs.net/doc/8d1215688.html,）
2.参考https://www.360docs.net/doc/8d1215688.html,建站的方案，明确建设的步骤—般经过规划、域名注册、服务器配置、网
页设计、测试与发布、管理与维护、推广等步骤就可以实现。
建站时可以是企业独立建站，可以是托付给相应的公司建站，也可以采取双方合作的方式建站。在分析企业需求时侧重点有所不同，要予以考虑。
3.申请域名（可选做）
一个好的域名应该与企业的性质、企业的名称、企业的商标及平时的企业宣传一致。选择与本公司密切相关的域名，但注意不能超过20个字符。
访问中国互联网络信息中心https://www.360docs.net/doc/8d1215688.html,，查询域名认证注册服务机构，选择一家机构申请注册自己的域名。
4.DNS设置（可选做）
5.设置Internet信息服务管理器（IIS）
6.Web站点的建立和管理
7.以小组的方式，规划一个电子商务（如网上书店、鲜花礼品商务、在线电脑销售等）。
要求规划的栏目、形象设计、导航设计、网页布局设计，画出草图。、
实验二创建一个静态页面——首页
实验目的
1．熟练掌握静态网页的制作
2．掌握简单的表单制作方法
实验要求
环境准备 :
计算机中装有IIS、网页制作工具（如Dreamweaver或Frontpage等）软件、网页制作相关的素材和资料。
知识准备：熟练掌握网页制作工具的使用方法。
实验目标
创建如图2-1所示的“静雅书苑的网上书店”首页。
图2-1 问题分析
网页设计容易出现下列问题:
●乱：网页容太庞杂。
●无吸引力：太简单，显得单调。
●打开速度太慢：网页中使用了过多的多媒体元素。
●重要信息不容易找到：原因是缺乏规划，没有对浏览者需求进行深入分析。
解决方法
●乱：首页布局要合理，分类清晰。
●无吸引力：首页要提供足够的信息。
●打开速度太慢：首页上图片的大小和使用数量要适当。
●重要信息不容易找到：从浏览者的角度分析进行分析，确定容安排。
实验步骤
（1）启动网页制作工具Dreamweaver软件。
（2）建立本地站点。设置本地根文件夹为D:\jingya。
（3）新建一个静态网页文件，保存该文件名为index.htm。
（4）设置页面属性，在标题处输入“静雅书苑”，“左边距”和“上边距”都设置为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。