网页设计课程实验报告一.docxVIP

本科课程实验报告 课程： 网页设计 学院： 计算机科学与工程学院 姓名： 学号： 专业： 软件工程 班 级： 113054B 扌旨导教师： 顾问 2014年至2015年第一学期 实验一、认识 HTML、CSS、Javascript 一、 实验目的：了解网页设计中涉及的技术。 了解HTML、CSS JavaScript各自所扮演的角色。 掌握如何在Dreamweaver屮进行网页编输。 学会使用调试工具 二、 实验内容 1、 参考教材1.4节，利用Dreamweaver实现实例。 2、 在F盘创建学号文件夹。 3、 新建HTML文件,命名为“index.html” ,保存到学号文件夹内。将压缩包内images内 图片拷贝到学号文件夹内。学号文件夹包含文件及目录结构如下图所示： index.htmll-4-l-2.jp index.html l-4-l-2.jp 4、在Dreamweaver代码视图屮输入HTML代码。 24(F) 2WV) W?(M) 命令(0 詁克⑸ BD(W) W?J(H) 丽-拆分I设计 劳批宙F4 那破 淞 0 鹿 尤賤如 ilhtml 冷 1.4-l-2XHTMLhtmP 洌 fil/ 1 2345678901234567891 TX IX IX IX MX 1x 1X 1X! 1 234567890123456789 1 TX IX IX IX MX 1x 1X 1X M /TR/xhtmll/DTD/xhtml1-transitional.dtdM html xmlns= http://w\57/1999/xhtmlM head meta http-equiv=l,Content-Type,t content=Mtext/html; charset=utf-8M / 无标题文档/title /head body center Ch2第一个HTML、CSS、JavaScript实例/h2 /center hr p class=pll.HTML是网页架构基础「/p P clasS=pl2.用CSS定义背崇图片的位置、标题2和段落的格式。/p p class=pl3.用vScript编写文字随鼠标症转的特效=/p /body /html 5^在Dreamweaver代码视图屮输入CSS代码。尝试修改background-attachment的属性值。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENn http: //www ? w3 ? org/TR/xhtm11./DTD/xhtml.l-trnsitionl.? dtd html xmlns=,,http: //www. w3 org/1999/xhtml,, head 5eta http-equiv=MContent-Type HTML是网页架构基础’2?用CSS定义背長團片的位宜、标题2和段落的格式° 3.用JavaScript编写文字随鼠标旋转的特效. HTML是网页架构基础’ 2?用CSS定义背長團片的位宜、标题2和段落的格式° 3.用JavaScript编写文字随鼠标旋转的特效. style type=text/css !—— bo dy { background-image:url(1-4-1-2.jpg); background-attachment: scroll; background-position:100% 100%; background-repeat:no-repeat; } h2 { font-family:黑体；font-size : 22pt; color: red} .pl{font一size:20px;color:#000000;text—align:left} —— |/style /head 6^在Dreamweaver代码视图中输入Javascript代码。 将Davrip賊器隔txt 口対?*瞒晦代碌txt记事本屮代码粘贴至文 档head区域。 7、保存,在浏览器中运行index.html,注意观察网页显示效果。参考效果如图所示: %? CSS、J第一个HTML、CSS、 % ? CSS、J 8 使用 IEDevelopero 在TE浏览器中运行index, html后按F12键，看看发生了什么变化? 三、实验结果 1、效果截图 2、遇到过哪些问题，如何解决? 3、将实验报告及源代码形成压缩包捉交至教师机，压缩包以沪号+姓名命名。