《网页设计与网站建设》实验指导.doc

《网页设计与网站建设》实验指导 实验1-1 “保龄在线”网站创建 1.实验目的 1）进一步掌握站点的创建过程 2）实践站点内容的管理 2.实验内容 如图1-1-1所示，“保龄在线”是根据某大型网站制作的虚拟网站实例。在这里我们主要是去模拟创建该网站。 在进行创建之前我们得对这个网站进行分析企划。 网站名称：保龄在线（bowling）。 网站性质：是一个以“发展保龄运动，提高自身素质”的一个北京市保龄球协会的网站。 未来网站浏览者特征：一切保龄球爱好者；Windows操作系统的PC用户；Modem拔号的上网用户；800*600以上的屏幕分辨率。 网站风格：在保龄技术层面上达到专业水平；在网页设计上达到与众不同、充满时代感与艺术性。 网站分类：网站主要分为“协会介绍”、“赛事公告”、“会员场馆”、“赛事招商”、“合作伙伴”、“新闻中心”、“人物风采”、“保龄课堂”、“活动专区”这几个大栏目，每个大栏目中又有小栏目。 一个网站分析企划制作好之后，我们就可以以这个企划为基础，一步一步来进行站点的设计。 3.实验步骤 步骤1：从菜单中选择“站点”的“管理站点”弹出一个“管理站点”的对话框，在该对话框中选择“新建”按钮，在弹出和下拉菜单中选择“站点”命令。如图1-1-2所示。 图1-1-2 步骤2：弹出“站点定义”对话框，在该对话框中输入已经企划好的网站名称，即“保龄在线”，如图1-1-3所示。 图1-1-3 步骤3：单击“下一步”，弹出站点定义的第二个对话框，在该对话框中询问是否使用服务器技术，由于我们要做的是一个静态站点，所以在这里按图1-1-4所示选取不使用服务器技术。 步骤4：单击“下一步”，弹出站点定义的第三个对话框，单击文本框后面的文件夹图标，在C盘下新建一个bowling的空文件夹并打开，如图1-1-5所示。 图1-1-4 图1-1-5 步骤5：单击“下一步”，弹出站点定义的第四个对话框，在该对话框中询问的是如何设置连接到远程服务器，在这里选择“无”。如图1-1-6所示。 步骤6：单击“下一步”，弹出站点定义的最后一个对话框，这个对话框中显示的是对该站点的总结，如图1-1-7所示。单击“完成”按钮，结束站点信息的设置。 图1-1-6 图1-1-7 步骤7：此时会再一次弹出“管理站点”对话框，再按“完成”按钮，系统会将刚才所定义的站点进行创建并保存。同时在Dreamweaver 右侧“浮动面板组”中的“文件”面板中会出现如图1-1-8所示的站点文件。 步骤8：站点定义好之后，开始对站点的结构进行构建。同时也可以用Web页来填充站点。用鼠标右键单击图1-1-8面板中的本地根目录文件夹，在弹出的菜单中选择“新建文件”，并将名称改为index.html，它将是我们未来的首页。如图1-1-9所示。 图1-1-8 图1-1-9 步骤9：在前面进行网站企划时，我们把网站分了九个栏目，因此，我们继续用鼠标右击本地根目录，在弹出的菜单中选择“新建文件夹”，执行九次操作，新建九个文件夹，并把它们重命名为xhjs、ssgg、hycg、sszs、hzhb、xwzx、rwfc、blkt、hdzq，分别对应上面的九个大栏目，存放他们各自的内容。之后再次新建3个文件夹，命名为images、media、others，分别用于存放“所有图像”、“影音文件”、“其它栏目”的内容。如图1-1-10所示。 步骤10：这样网站的栏目页面结构就搭建成功了。 图1-1-10实验1-2 “电影评论网页”制作 1.实验目的 1）掌握基本的文本和图像的插入方法。 2）掌握文本和图像的基本设置方法。 3）掌握插入文本和图像时的技巧。 2.实验素材 在第3章的“本章实训”目录下，包括1张电影海报图片pic1.jpg，1个有实训文本的文本文件，1个名为“电影评论网页实训原始页”的网页文件，（可以用Dreamweaver 8打开编辑）。 3.实验内容 “电影评论网页实训原始页”的页面上用表格已预先做好了排版，本次实验就是在相应的空白处添加文本和图片，并进行设置。 4.实验步骤 步骤1：在Dreamweaver 8中打开“电影评论网页实训原始页”的网页文件。 步骤2：打开名为“实训文本”的文本文件，将标题复制到第一行，内容复制到第二行，最后一行输入“摘自《搜狐电影》”，调整换行符后如图1-2-1所示。 图1-2-1 步骤3：将光标定位在正文第一个文字前，单击插入栏的图像按钮，插入“本章实训”目录下的pic.jpg。 步骤4