实验电子稿.docx
- 文档编号:26490701
- 上传时间:2023-06-19
- 格式:DOCX
- 页数:22
- 大小:857.22KB
实验电子稿.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中非正文标记的综合应用