《网页设计与制作》实验报告2014

1、网页设计与制作（课程编号：B-0）实验报告（2014-2015学年第1学期） 实验成绩： 学 号： 姓 名： 周子新 专业班级： 计科1301 课 堂 号： B-0 任课教师： 张爱菊 完成日期： 2014-12-26 一、实验目的及要求（1）能熟练掌握网页设计步骤和设计原则；（2）能较熟练的运用Html编写简单的网页； （3）熟悉Dreamweaver8.0网页编辑环境，并完成站点的创建和编辑等操作；（4）能够熟练的在Dreamweaver8.0中创建网页，完成文本的编辑和输入、表格的创建、表单的设计、框架的运用，图像的插入和编辑、超级链接的创建等；（5）熟悉各种对象属性面板的使用；（6）能

2、够熟练使用层、时间轴和行为等完成网页的布局和特效制作；（7）能够熟练使用CSS、模板、库快速完成网页的制作和更新操作；（8）网站制作好后，能够熟练使用Dreamweaver8.0的网站测试功能完成网站的本地测试，并生产测试报告；（9）能够熟练的完成IIS服务器的安装、配置和本地站点的配置操作，并将制作好的网站发布到本地站点。二、实验设备（环境）及要求PC机，Windows 7（Windows xp，Windows 8），Dreamweaver ，Office 2010参考教材：网页设计与制作三、实验过程及内容记录本课程的实验主要是设计一个功能相对完整的网站，在设计过程中，学生可以参考课程教材或

3、者网上资源完成设计工作。围绕网站设计及要求，要求学生在网站设计过程中，必须完成相关实验内容如下：实验一 站点的创建及属性面板的使用具体实验内容：1 站点的创建、站点的编辑、站点的删除、站点的导入和导出；2 页面属性面板的设置和使用：3 熟悉首选参数面板并做相关的操作；4 在网页中输入文字，并利用文本属性面板对文字进行格式设置。实验二 网页中各种网页元素的设计1 在网页中插入图片、鼠标经过图象、图象占位符，并利用图片属性面板对图片进行设置；2 网页中文本的编辑和文本属性面板的用法；3 网页中各种超级链接的创建方法；4 表格的创建，表格中单元格的合并、表格、行、单元格格式的设置。5. 框架的创建和

4、使用，框架属性的设置；6. 表单的创建和表单元素的创建和使用方法。实验三 层和行为的应用1. 层的基本操作；2. 利用层创作特效；3. 了解常用的行为及创建和使用方法；实验四 CSS、模版、库的创建和使用方法1. CSS的基本使用方法；2. 内部CSS、外部CSS的创建和使用操作；3. 模版的创建方法；4. 模版的套用及网页的更新操作；5. 了解库的基本作用，库的创建和使用方法。实验五 网站的测试和发布1. 网站的测试操作，查看测试结果并生成测试报告；2. 学会配置本地IIS服务器、创建和设置本地站点，在本机上发布网站。实验一 站点的创建及属性面板的使用1、 站点的创建： 站点的编辑、站点的删

5、除、站点的导入和导出：2、页面属性面板的设置和使用：实验二 网页中各种网页元素的设计插入图片：相关html代码：通过图像属性面板对图像进行设置：鼠标经过图像：效果：鼠标指向按钮时图像替换Html中对文字进行编辑：设置文本属性：一般链接：锚记（锚点）链接：下载链接：插入表格：表格属性设置：相应html代码：框架的运用：为内框架标签，显示效果：表单的创建：相应html代码：加上css的一些样式之后：实验三 层和行为的应用层的创建：通过html代码可看出，层就是一个段，并通过css样式对其进行一些属性的设置：层属性的设置当然这些属性也可以直接通过修改css样式来改变利用层和行为创建下拉式菜单首先创建

6、一个层，然后在层中创建一个2行1列的表格，首先将表格border属性设为黑色，1个像素宽（因为在Dw视图面板中的操作结果在浏览器中显示的结果会有不同，所以需要通过多次调整层的位置使层显示在指定的位置，然后给表格设置1px，是为了在浏览器上显示得更明显，易于调整层的位置）然后就可以给层和父菜单添加行为了达到的效果为：武汉风情是父菜单，是一张带有链接的图片首先选中这个图片，然后打开行文面板：给父菜单添加2个行为效果：通过浏览器测试可知道，当鼠标从父菜单准备移到子菜单时，层隐藏了，所以需要给层也添加“显示-隐藏层”效果。 选中层，添加行为：最后再将图片插入到表格中相应单元并添加链接：利用层和时间轴做

7、移动的提示框新建层，并输入提示内容：打开时间轴窗口并将层拖到时间轴第一帧：然后通过改变关键帧层的位置，达到层的简单运动效果，勾选“自动播放”与“循环”最终的效果就是这个层来回上下移动弹出菜单行为：目的：当鼠标移到“Notice”时弹出消息框提示用户任意账号密码可登陆选中表单中文本“Notice”所在标签，打开行为窗口添加行为表单通过required简单地验证所填内容是否为空和是否符合相应表单类别效果：同样在注册页面先给按钮“Register”添加弹窗行为，提示用户，成功注册并也通过required简单地验证所填内容是否为空和是否符合相应表单类别动态分享代码：在线生成了一个动态的共享代码，插入到

8、html中，效果如图：通过ps动态图制作，并切片后通过web形式存储，然后由DW修改鼠标经过图片后替换图片实现按钮控制动态图播放的功能，给网页增添了一些色彩静态：动态：其实就是两个网页文件：stop.html和play.html ，并且均由ps生成，Dw做的只是实现按钮控制切换到哪个网页文件，当然通过鼠标经过图像实现当鼠标在按钮上方时，改变按钮颜色（实际上是两张图）同过标签实现文字的滚动：这一个带有邮箱连接的文字在网页上向右滚动在网上找了一个用html5和javascript实现的复古磁带，并修改样式表和html代码改变背景去掉广告，修改完后，放在网站中霸气十足：在网上找了两个flash小游戏，写入html中，对属性作相关设置，使网站充满乐趣：实验四 CSS、模版、库的创建和使用方法利用css样式创建炫酷按钮：相应css代码：登陆注册按钮样式：利用css样式制作悬浮在浏览器左边的窗口，并通过position设置其是否随滚轮滑动： 相应css样式： css的引用：本地css：网络css：内部c