《网页设计07020.doc》由会员分享，可在线阅读，更多相关《网页设计07020.doc（9页珍藏版）》请在金锄头文库上搜索。
1、实验1 简单网页的制作一、 实验目的1熟练掌握站点的建立2熟练掌握网页的基本编辑3熟练掌握网页图片的插入4熟练掌握网页背景音乐的插入二、实验内容任务1 建立站点1在F盘根目录下建立一个名为web+2012+你的后4位学号的子文件夹。2在web文件夹下，建立一个名为image的子文件夹（用于存放网站的所有图片文件）。3建立一个本地站点，站点名称为：mywebsite，站点根目录为第1步所建立的文件夹。任务2 制作网页1制作一个标题为“心的绿叶”的网页，设置该网页的属性如下：网页背景色为666600，文本颜色为FFFFFF，左边距、上边距均为50像素。2在网页中输入如图7.1所示的文本内容。图7.
2、1 心的绿叶3在“心的绿叶”下方插入水平线，水平线的宽设置成100%、高设置成2像素，在倒数第一段的前面插入另外一条水平线，其宽设置成300像素，颜色设置为蓝色，两条水平线均水平居中对齐。4将该网页保存在根目录(web+2012+你的后4位学号的子文件夹)下，命名为luye.html，然后预览观察网页的效果。5插入图片 在第一段的段首插入图片ly.jpg。（图片由老师提供，要求放在images文件夹中） 设置图片与文字间的水平边距与垂直边距均为5。 设定该图片的替代文字为：心的绿叶。 设置该图片的边框2。任务3 设置页面背景音乐为luye.html网页添加背景音乐musicsong.mid。提
3、示在与标签之间加入标签，其中：“loop”中的数值是音乐循环的次数，可设置为任意正整数，若设为“-1”的话，音乐将永远循环播放。实验2 使用表格布局网页一、 实验目的1熟练掌握布局表格的插入2熟练掌握表格的属性基本设置3熟练掌握网页图片的插入、设置相关属性4熟练掌握各类超链接的建立二、实验内容任务1 布局表格1. 在页面上建立一个布局表格，表格3行1列，宽750px，高550 px，行一高65px，行二高420px，行三高65px。表格背景色为白色，表格间距为0，表格边框为0，如图7.2所示。图7.2 表格12. 在图7.2的布局表格的行二内建立一个3行1列的嵌套表格，宽750px，高分别为2
4、0px、340px和60px，表格间距为0，表格边框为0，如图7.3所示。图7.3 表格23. 在图7.3表格2的行一中建立一个1行5列的表格，宽750px，高20px，平均分配每格宽度，首尾格用背景色#123456，如图7.4所示。图7.4 表格3然后再在图7.3表格2的行三中建立1行4列的表格，宽750px，高60px。4个格的宽分别为130px、130px、130px和360px，表格间距为0，表格边框为0，如图7.5所示图7.5 表格4任务2 插入图像1.在图7.2表格1中的第一行中插入image内的图片“logo.jpg”。2.在图7.5表格4的前三格分别插入image内的图片“c1
5、.jpg” 、“c2.jpg”和 “c3.jpg”，且让图片居中。3三个图片有相关替代说明文字“大学英语46级”、“计算机等级考试”和“公务员考试”。任务3 超链接的建立1. 在图7.4表格3 中间三格分别设立“大学英语46级”、“计算机等级考试”和“公务员考试”三个文字链接。2排版要求：文字居中，设置文字颜色为#123456；3“大学英语46级”链接指向web内的text.htm；4“计算机等级考试”指向空链接；5“公务员考试”链接到imagelogo.rar,并建立一个下载的超链接。6. 在图7.2表格1第三行设立两个文字链接“外部样式表”和“我的信箱”，文字居中。7“外部样式表”指向cs
6、s内的aa.css文件；8“我的信箱”指向一个电子信箱地址gxcyXXX(其中XXX是考生姓名的第一个拼音，如王小平的为wxp，其邮箱地址为：)。9. 选中logo.jpg，建立外部链接，链接目标为http:/ 使用框架布局网页一、 实验目的1熟练掌握框架的建立和保存2熟练掌握在框架中建立、打开超链接二、实验内容1. 制作一个如图7.6所示的具有上方固定、左侧嵌套结构的框架结构网页。图7.6 框架结构网页2. 框架结构网页中，框架集文件名为kuangj.html，左框架文件名为mulu.html，右框架文件名neirong.html，上框架文件名为zhuti.html，制作后其均保存在kuan
7、gj文件夹中。3. 在该框架结构中，单击左框架中的各超链接，右框架中打开不同的网页：“景区概要”与webgaiyao.htm网页链接；“风景图片”与实验1任务2建立的luye.html网页链接；“出行准备”与webzhunbei.htm网页链接；“景区服务”与webfuwu.htm网页链接；实验4 样式操作一、 实验目的1熟练掌握自定义样式的操作2熟练掌握重定义标签类样式的操作3. 熟练掌握高级（ID、伪类选择器）类样式的操作4. 熟练掌握外部样式和内部样式的操作二、实验内容1. 重新定义HTML标记符样式（1）创建一个仅应用于“xingwei”文件夹中文件wangye1.htm的“类”样式，
8、该样式用于设置网页中右布局表格的背景图片不重复、水平居右。（2）完成后在游览器中预览该网页，观察效果。提示先选择右边的布局表格，然后从CSS面板上增加内部样式，如图7.7所示：图7.7 新建CSS类规则（3）按上述选择后，单击“确定”按钮，然后在打开的对话框中选择背景选项，再进行如图7.8所示的设置即可：图7.8 CSS规则定义2. 重新定义HTML标记符样式创建一个仅应用于文件wangye1.htm的“重新定义标签”样式，使文件中的无序列表的项目符号定义为图片文件dw.gif。提示从CSS面板上增加内部样式，选择标签项，然后在标签选项中选择项目符号的标签：li，如图7.9所示：图7.9 新建
9、标签CSS规则然后单击“确定”按钮，在打开的对话框中选择列表项，设置项目符号图片即可。3. 超链接样式使用“高级（ID、伪类选择器等）”和“重新定义标签”两种样式，使文件wangye1.htm中的各超链接的悬停色设置成红色，设置访问过的超链接的颜色为绿色，并去掉超链接下面的横线。提示用“重新定义标签”方法如第2步，用“高级（ID、伪类选择器等）”操作如图7.10所示，在新建的CSS规则对话框先选择“高级（ID、伪类选择器等）项，再在选择器中选择a:hover（鼠标移到超链接上的状态），其它几项意义分别为a:link(正常超链接的状态)，a:visited（已经访问过的超链接状态），a:acti
10、ve（超链接的激活状态）图7.10 新建超链接样式规则在打开的“a:hover新建CSS规则定义”对话框中的类型选择项中选择颜色为红色，即可设置把鼠标悬停在任一超链接上时，链接点的字体将变为红色，再重复前面的操作，设置访问过的超链接（a:visited选项）的颜色为绿色，并去掉超链接下面的横线。实验5 站点的测试与发布一、 实验目的1熟练掌握站点测试的操作2掌握Web空间的申请与域名的申请3. 熟练掌握站点上传发布的操作二、实验内容用Dreamweaver制作好了自己的网站后，在发布自己的网站前，要使用Dreamweaver站点管理器对你的网站文件进行检查和整理。通过测试可以找出断掉的链接、错
11、误的代码和未使用的孤立文件等，以方便进行纠正和处理。任务1 网站的检测步骤如下：（1）单击菜单栏的“站点”选“检查站点范围的链接”，弹出“结果”对话框，选定“链接检查器”选项；（2）在显示框中选定“断掉的链接”，然后再选择“检查整个当前本地站点的链接”选项。如图7.11所示。图7.11 链接检查器（2）确认后，如果站点内的超链接存在问题，将出现如图7.12所示页面。图7.12 断掉的链接（3）根据提示，对存在有超链接的文件进行修改。出现断掉的链接原因主要是链接的目标因改名、删除或移走不存在，此时必须重做超链接。提示如图7.12文件中有三个/myweb.html断掉的链连接均为web/text.
12、htm，原因是在超链接完成后，把文件text.htm重新命名为text.html了，导致链连接失效。（4）依次在显示框中选定“外部链接”和“孤立文件”两个选项对站点内所有文件进行检测，确保网站在本地站点下能正常浏览。任务2 网站的发布1确定网站的Web服务器和访问的域名，这个一般向当时的ISP机构提出申请，缴纳一定的费用后即可获得，作为实验，我们可以从网上申请免费的空间和域名来试用。下面以从http:/为例进行说明其操作步骤。（1）打开http:/主页如图7.13所示后，根据主页的导航提示，输入注册信息进行注册。图7.13 注册页面（2）注册成功后，会显示注册的相关信息以及网站分配的空间、域名
13、和上传的FTP服务器地址及密码等信息，如图7.14，这些信息对于网站空间的存取，上取网站都非常重要。图图7.14 注册成功信息（3）单击“上传文件”按钮，在打开的FTP服务器空间默认的根目录下把里面有的所有文件或文件进行删除，以便上传自己本地的网站。2配置远程服务器实验1建立的是本地站点，要配置远程信息才能发布网站。（1）打开“站点”“管理站点”“编辑”；（2）在打开的“mywebsite的站点定义为”对话框中选择“高级”选项标签；（3）在分类中选择“远程信息”设置如图7.15所示：图7.15 远程信息（4）设置完成后再单击“测试”按钮，连接成功后将会有相应的提示。（5）在分类中选择“测试服务
14、器”在“访问”选项中选择FTP方式，设置如图7.16所示，输入FTP主机的IP或域名以及登录的密码。图7.16测试服务器（6）远程站点设置完成后进行测试，如FTP主机的IP或域名以及登录密码没有错误的话测试成功，如测试不成功再重新输入IP或域名以及登录密码再重试。3上传网站（1）在“文件”面板上，单击“上传”按钮，如图7.17所示，开始上传整个网站，上传的进度有相应的提示，上传成功也会有相应的提示。“上传”按钮图7.17 “文件”面板（2）完全上传后，打开IE浏览器，然后在地址栏中输入访问的域名和文件名称http:/5045.221133.INFO/luye.html，即可打开上传成功后的页面，如图7.18所示。图7.18 上传的页面（3）分别对网站内其它网页进行访问，确保网站内所有文件能正常访问，至此网站发布成功。
