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

《《网页设计与网站建设》实验指导》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、《网页设计与网站建设》实验指导实验1-1“保龄在线，'网站创建1.实验目的1）进一步掌握站点的创建过程2）实践站点内容的管理2实验内容如图1-1-1所示，“保龄在线”是根据某大型网站制作的虚拟网站实例。在这里我们主要是去模拟创建该网站。在进行创建Z前我们得对这个网站进行分析企划。•网站名称：保龄在线（bowling）。・网站性质：是一•个以“发展保龄运动，提高自身素质”的一个北京市保龄球协会的网站。•未来网站浏览者特征：一切保龄球爱好者：Windows操作系统的PC用户；Modem拔号的上网用户；800*600以上

2、的屏幕分辨率。•网站风格：在保龄技术层面上达到专业水平；在网页设计上达到与众不同、充满时代感与艺术性。图1-1-3・网站分类：网站主要分为“协会介绍”、“赛事公告”、“会员场馆”、“赛事招商”、“合作伙伴”、“新闻屮心”、“人物风采”、“保龄课堂”、“活动专区”这儿个大栏目，每个大栏目中乂有小栏目。一个网站分析企划制作好Z后，我们就可以以这个企划为基础，一步一步来进行站点的设计。3.实验步骤步骤1：从菜单中选择“站点”的“管理站点”弹岀一个“管理站点”的对话框，在该对话框屮选择“新建”按钮，在弹岀和下拉菜单屮选择“

3、站点”命令。如图1-1-2所示。图1-1-2步骤2：弹出“站点定义”对话框，在该对话框中输入已经企划好的网站名称，即“保龄在线”，如图1-1-3所示。步骤3：单击“下一步”，弹出站点定义的第二个对话框，在该对话框中询问是否使用服务器技术，由于我们要做的是一个静态站点，所以在这里按图1-1-4所示选取不使用服务器技术。步骤4：单击“下一步”，弹出站点定义的第三个对话框，单击文本框后面的文件夹图标,在C盘下新建一个bowling的空文件夹并打开,如图1-1-5所示。图1-1-4■拿

4、MI《上一厅一：]■■丨・•图1-1

5、-5*•&仗并餐can.hub剂5占・・>3M图1一1一6步骤5：单击“下一步”，弹出站点定义的第四个对■话框，在该对话框中询问的是如何设置连接到远程服务器，在这里选择“无”。如图1-1-6所示。步骤6：单击“下一步”，弹出站点定义的最后一个对话框，这个对话框屮显示的是对该站点的总结，如图卜1T所示。单击“完成”按钮，结束站点信息的设置。图1-1-7步骤7：此时会再一次弹出“管理站点”对话框，再按“完成”按钮，系统会将刚才所定义的站点进行创建并保存。同时在Dreamweaver右侧“浮动面板组”中的“文件”面板中会

6、出现如图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

7、>xwzx>rwfc>blkt、hdzq,分别对应上面的九个人栏目，存放他们各H的内容。Z后再次新建3个文件夹,命名为images、mcdia、others,分别用于存放“所有图像”、“影音文件”、“其它栏目”的内容。如图1-1-10所示。步骤10：这样网站的栏目页面结构就搭建成功了。图1-1-10实验1-2“电影评论网页”制作1.实验目的1）学握基本的文本和图像的插入方法。2）掌握文本和图像的基本设置方法。3）掌握插入文木和图像时的技巧。2实验素材在第3章的“本章实训”冃录下，包括1张电影海报图片picl.jpg

8、,1个有实训文木的文木文件，1个名为“电彩评论网页实训原始页”的网页文件，（可以用Dreamweaver8打开编辑）。3.实验内容“电影评论网页实训原始页”的页面上用表格己预先做好了排版，本次实验就是在相应的空白处添加文本和图片，并进行设置。4.实验步骤步骤1：在Dreamweaver8中打开"电影评论网页实训原始页”的网页文件。步骤2：打开名为“实训文木”的文木文件，将标题复制到第一行，内容复制到第二行，最后一行输入“摘自《搜狐电彫》”,调整换行符后如图1-2-1所示。nrS,・w•凶吓的1tt你习人一•电日勇遑

9、小一餉备节个了个<-会徒来生龍里一中你«&i——不SB到轮？个然的棊运好侮tcg但也厉$備从一養ft京丸高莎字KW卵比，-刃购何公，过此徨翻小现妙死Msf人现生如能生発心必个煤•H神4你的何主发遴帝逸小的&WK#A辛请？•口竟的「桦sffs刻一时成墨茁旭*M*2北的戒•法体多你«一«rSJis輩还不$的且W窄・在li力RI:财爼舍«阳？I…：—…饰tt刃Nt