实验电子稿.docx
《实验电子稿.docx》由会员分享，可在线阅读，更多相关《实验电子稿.docx（22页珍藏版）》请在冰点文库上搜索。
实验电子稿
19.1网页基础知识
一、实验目的
（1）掌握网页组成元素。
（2）理解网站、网页、主页等概念及区别。
（3）理解网页风格的重要性。
二、实验软硬件环境
一个正常工作、能上Internet网的计算机机房。
三、实验要求
根据观察所得结果，能够从网页中分析网站的基本元素，并掌握其开发流程。
四、实验内容与步骤
1.不同方式打开网站主页。
打开IE浏览器，然后：
（1）输入网址，即可打开126网站的主页。
（2）输入网址
分析：
查看这两种方式打开的主页是否一样，若一样请说明为什么会出现此类情况？
2.判断网页元素。
图19-1显示为126网站的主页，请区分网页上哪些为Flash元素，哪些为图片？
图19-1126网站主页
请将该主页中的所有图片，保存在“桌面”上的PIC子目录内（若没有，请自行创建）。
3.查看网页风格。
分别以“1024×768”及“800×600”两种分辨率浏览同一网站。
操作步骤如下。
（1）设置屏幕分辨率的方法：
右键单击桌面，选“属性”选项，在“设置”选项卡的“屏幕分辨率”内（如图19-2所示）拖动鼠标选择合适的分辨率。
（2）打开IE浏览器，输入网址。
分析：
屏幕分辨率对网页影响有多大，目前网站在设计时一般使用的最佳分辨率是多少？
4.选出一个最喜欢的网页，然后列出三点喜欢它的理由。
图19-2设置屏幕分辨率
19.2认识DreamweaverCS3
一、实验目的
（1）Dreamweaver安装卸载过程。
（2）网页路径表示方法。
（3）创建网站站点。
二、实验软硬件环境
一个正常工作的计算机机房、一张DreamweaverCS3软件安装盘。
三、实验要求
能够安装Dreamweaver，并配置网站站点。
四、实验内容与步骤
（1）已安装Dreamweaver用户请先操作此步：
打开Windows中“控制面板”中的“添加或删除程序”窗口，找到“MacromediaDreamweaverCS3”项，并单击“更改/删除”按钮，以执行卸载操作。
如图19-3所示。
图19-3添加或删除程序
（2）将Dreamweaver光盘放入光驱，根据提示以默认方式执行安装操作。
提示：
网络机房可映射一个驱动器地址盘。
（3）将exc2子目录中的所有文件拷贝到本地计算机D盘根目录下，打开该文件夹，确认已拷贝文件与图19-4所示的内容一致。
图19-4实验二文件
（4）打开IE浏览器。
若要查看D:
\exc2\126.htm文件内容，请问在地址栏中如何输入路径？
（5）将D:
\exc2子文件夹配置为Dreamweaver的本地站点，站点名为“实验二”，并在此站点下新建一个主页文件，命名为index.html，主页上只输出一句话：
我已完成实验二的所有操作。
19.3制作简单网页
一、实验目的
（1）利用Dreamweaver制作简单网页。
（2）掌握网页的布局排版设计方法。
（3）设计网页元素。
二、实验软硬件环境
一个正常工作的计算机机房、计算机内已安装DreamweaverCS3软件。
三、实验要求
能够设计并制作简单的网页。
四、实验内容与步骤
1.设计如下网页，命名为：
book.htm。
念奴娇赤壁怀古
大江东去，浪淘尽，千古风流人物。
故垒西边，人道是、三国周郎赤壁。
乱石穿空，惊涛拍岸，卷起千堆雪。
江山如画，一时多少豪杰。
遥想公谨当年，小乔初嫁了，雄姿英发。
羽扇纶巾，谈笑间、强虏灰飞烟灭。
故国神游，多情应笑我，早生华发。
人间如梦，一尊还酹江月。
要求：
（1）设置标题“念奴娇赤壁怀古”字体为“黑体”，字号自定，并居中显示。
（2）文章字体为“楷体”，字号、字体颜色、网页背景颜色自定。
（3）将每段设置成无序列表形式。
（4）自定义部分：
整个页面简洁、美观。
2.设计如图19-5所示的网页，命名为：
index.htm。
G:
\index.htm
图19-5实验三图片
要求：
（1）网页由一个2行2列的表格组成，其中最后1行为1列。
（2）左边的图片请随意找幅图片代替，并插入网页中。
（3）网页中其余文字请根据自己情况输入。
（4）表格中最后1行的“通过XXX@X.com发邮件给我”，要求“XXX@X.com”做成E-Mail链接。
（5）在表格最后一行的后面再插入一行。
在本行中输入文字：
“查看小说”，要求文字右对齐。
（6）将“查看小说”链接到book.htm文件，并设置打开方式为“_blank”。
（7）自行将网页排版、美化。
最低要求：
网页最终效果要比图19-5所示的这个效果好看。
操作提示（制作时步骤）：
（1）建立站点。
（2）建主页（index.htm）及分页（book.htm）。
（3）要编辑某个页面，可直接双击该文件名即可。
（4）左边随意找的图片也必须存放在站点文件夹下（为区别其他文件，可在站点文件夹下建立一个专门用于存放图片的文件夹），否则预览网页时可以会出现图片显示不出来。
19.4页面美化及提高制作效率
一、实验目的
（1）掌握CSS、库、模板等操作的优缺点。
（2）能够利用CSS、库、模块进行网页设计。
（3）掌握美化网页的方法。
二、实验软硬件环境
一个正常工作的计算机机房、计算机内已安装DreamweaverCS3软件。
三、实验要求
能够利用CSS、库、模块进行网页设计，并进行页面的美化。
四、实验内容与步骤
1.制作类似于图19-6所示的网页的顶部。
图19-6实验四图片
要求：
（1）导航栏可插入一个9列的表格。
（2）文字可利用CSS设计成统一样式。
（3）分别用库、模板两种方式，保存此页面。
2.建立本地站点“实验四”，并新建主页index.htm文件，分页a1.htm~a10.htm共10个文件。
3.分别用库、模板两种方式将第1步中所做的页面应用到a1.htm~a10.htm网页中。
19.5HTML与Dreamweaver
一、实验目的
（1）HTML语言结构。
（2）掌握头部标记的应用。
（3）掌握Body标记的部分参数。
二、实验软硬件环境
一个正常工作的计算机机房、计算机内已安装DreamweaverCS3软件。
三、实验要求
了解HTML语言、掌握其与Dreamweaver的联系。
四、实验内容与步骤
1.查看网页的源代码。
（1）打开IE浏览器，输入网址：
，然后在窗口中不是图像的任意位置单击鼠标右键，选择“查看源文件”。
（2）操作结果：
系统会启动“记事本”程序，并打开网页的源程序，可以看出网页均是由“<>”标记括起来的。
这些文本其实就是HTML源代码。
（3）请将结果保存在桌面上，并命名为：
1.txt。
2.利用HTML编写一个网页。
（1）打开记事本，输入如下程序：
实例题
这里是HTML中非正文标记的综合应用