《网页设计与制作》主题实验报告.docVIP

《网页设计与制作》 （课程编号：B0901240-0） 实验报告 （2014-2015学年第1学期） 实验成绩： 学 号： 1309050128 姓 名： 周子新 专业班级： 计科1301 课 堂 号： B0901240-0 任课教师： 张爱菊 完成日期： 2014-12-26 一、实验目的及要求 （1）能熟练掌握网页设计步骤和设计原则； （2）能较熟练的运用Html编写简单的网页； （3）熟悉Dreamweaver8.0网页编辑环境，并完成站点的创建和编辑等操作； （4）能够熟练的在Dreamweaver8.0中创建网页，完成文本的编辑和输入、表格的创建、表单的设计、框架的运用，图像的插入和编辑、超级链接的创建等； （5）熟悉各种对象属性面板的使用； （6）能够熟练使用层、时间轴和行为等完成网页的布局和特效制作； （7）能够熟练使用CSS、模板、库快速完成网页的制作和更新操作； （8）网站制作好后，能够熟练使用Dreamweaver8.0的网站测试功能完成网站的本地测试，并生产测试报告； （9）能够熟练的完成IIS服务器的安装、配置和本地站点的配置操作，并将制作好的网站发布到本地站点。 二、实验设备（环境）及要求 PC机，Windows 7（Windows xp，Windows 8），Dreamweaver ，Office 2010 参考教材：《网页设计与制作》 三、实验过程及内容记录 本课程的实验主要是设计一个功能相对完整的网站，在设计过程中，学生可以参考课程教材或者网上资源完成设计工作。围绕网站设计及要求，要求学生在网站设计过程中，必须完成相关实验内容如下： 实验一 站点的创建及属性面板的使用 具体实验内容： 站点的创建、站点的编辑、站点的删除、站点的导入和导出； 页面属性面板的设置和使用： 熟悉首选参数面板并做相关的操作； 在网页中输入文字，并利用文本属性面板对文字进行格式设置。 实验二 网页中各种网页元素的设计 在网页中插入图片、鼠标经过图象、图象占位符，并利用图片属性面板对图片进行设置； 网页中文本的编辑和文本属性面板的用法； 网页中各种超级链接的创建方法； 表格的创建，表格中单元格的合并、表格、行、单元格格式的设置。 5. 框架的创建和使用，框架属性的设置； 6. 表单的创建和表单元素的创建和使用方法。 实验三 层和行为的应用 层的基本操作； 利用层创作特效； 了解常用的行为及创建和使用方法； 实验四 CSS、模版、库的创建和使用方法 CSS的基本使用方法； 2. 内部CSS、外部CSS的创建和使用操作； 3. 模版的创建方法； 4. 模版的套用及网页的更新操作； 5. 了解库的基本作用，库的创建和使用方法。 实验五 网站的测试和发布 1. 网站的测试操作，查看测试结果并生成测试报告； 2. 学会配置本地IIS服务器、创建和设置本地站点，在本机上发布网站。 实验一 站点的创建及属性面板的使用 站点的创建： 站点的编辑、站点的删除、站点的导入和导出： 2、页面属性面板的设置和使用： 实验二 网页中各种网页元素的设计 插入图片： 相关html代码： 通过图像属性面板对图像进行设置： 鼠标经过图像： 效果： 鼠标指向按钮时图像替换 Html中对文字进行编辑： 设置文本属性： 一般链接： 锚记（锚点）链接： 下载链接： 插入表格： 表格属性设置： 相应html代码： frame框架的运用： iframe为内框架标签，显示效果： 表单的创建： 相应html代码： 加上css的一些样式之后： 实验三 层和行为的应用 层的创建： 通过html代码可看出，层就是一个div段，并通过css样式对其进行一些属性的设置： 层属性的设置 当然这些属性也可以直接通过修改css样式来改变 利用层和行为创建下拉式菜单 首先创建一个层，然后在层中创建一个2行1列的表格，首先将表格border属性设为黑色，1个像素宽（因为在Dw视图面板中的操作结果在浏览器中显示的结果会有不同，所以需要通过多次调整层的位置使层显示在指定的位置，然后给表格设置1px，是为了在浏览器上显示得更明显，易于调整层的位置） 然后就可以给层和父菜单添加行为了 达到的效果为： 武汉风情是父菜单，是一张带有链接的图片 首先选中这个图片，然后打开行文面板： 给父菜单添加2个行为效果： 通过浏览器测试可知道，当鼠标从父菜单准备移到子菜单时，层隐藏了，所以需