网页设计与制作实验报告.doc

《网页设计与制作实验报告.doc》由会员分享，可在线阅读，更多相关《网页设计与制作实验报告.doc（23页珍藏版）》请在三一办公上搜索。

1、网页设计与制作实验指导一览表实验名称实验内容备注实验一HTML语言详细内容实验二初识Dreamweaver详细内容实验三文本操作详细内容实验四图像操作详细内容实验五超级链接详细内容实验六表格布局详细内容实验七多媒体应用详细内容实验八CSS样式详细内容实验九层的布局详细内容实验十框架网页详细内容实验十一模板和库详细内容实验十二表单网页详细内容实验十三网站开发综合实例详细内容实验1 HTML语言实训目的: 为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。 素材准备： 准备制作网页所需的文字素材

2、、图像素材。 实验课时： 2学时 实验内容： 1. 创建站点； 2. 新建网页以及保存，重命名； 3. 输入HTML语言。 实验步骤： 1. 在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。 2. 定义站点：设置 站点名称，命名为 mysite;设置本地根文件夹,指定为E盘下的root文件夹;设置 HTTP地址为localhost。 3. 创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。 4. 切换代码模式下，输入代码。 5. 保存文件，预览文件效果。 实验过程注意事项: 1. 在创建站点的过程中注意建立本地文件夹

3、，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径； 2. 所有的图片文件单独放在image文件夹内。 实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。素材准备：准备好从网上下载的安装程序。实验课时：2学时实验内容：1. 安装Dreamweaver： 2. Dreamweaver的启动与退出： 3. 了解工具栏、菜单

4、栏、标题栏等工作环境： 4. 卸载Dreamweaver 实验步骤：1. 打开从网上下载的Dreamweaver程序，双击安装。 2. 安装完成后输入注册号。 3. 启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。 4. 退出Dreamweaver。 5. 卸载Dreamweaver 实验过程注意事项：1. 安装过程完成后，要激活。 实验思考：从“控制面板”里删除程序与从安装到的目录文件里删除有什么区别？书写实验报告要求：写出本次实验报告。实验3 文本操作实验目的：为了让学生能熟练掌握在Dreamweaver mx中如何输入文本，调整设置文本的格式；如何插入特殊字符、文本列

5、表、水平线、时间、注释的方法。素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 输入文本： 2. 调整文本： 3. 插入特殊字符： 4. 插入文本列表： 5. 插入水平线： 6. 插入时间： 7. 插入注释： 8. 设置文本格式： 实验步骤：1. 新建一个页面文件； 2. 输入文本，调整文本的间距，设置文本的格式；通过“属性”面板中的“格式”和“颜色”等参数，将文字设为标题格式，并改变其颜色； 3. 输入一段不带格式的文字，选择“常用”工具栏上的“文本”单选项目，利用换行按钮对文本进行换行处理，实现分段的效果； 4. 插入特殊字符、项目符号、水平线、时间

6、、注释等内容； 实验过程注意事项：1. 在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去，不能全部选取再添加； 2. 当输入文本时要插入多个连续的空格，必须要“编辑”菜单下的“首选参数”中设置； 3. 换行的几种方式：自行换行；按ENTER强行换行；按SHIFT+ENTER换行操作； 实验思考：如何插入版权符号？如何插入特殊字符“￥”？书写实验报告要求：根据调试结果，写出实验报告实验4 图像操作实验目的：为了让学生熟练掌握在Dreamweaver mx中插入图像，学会设置图像属性；如何插入鼠标经过图像、插入图像占位符的方法，掌握图文混排的技巧等操作。素材准备：准备制作网页所需的文字

7、素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 插入图像： 2. 设置图像属性： 3. 插入鼠标经过图像： 4. 插入图像占位符： 5. 图文混排操作： 实验步骤：1. 打开上次实训所做的页面文件； 2. 插入图像，在属性面板对图像的格式进行设置； 3. 插入鼠标经过图像、图像占位符； 4. 将图片和文字进行混合排版； 5. 保存文件，预览文件效果； 实验过程注意事项：1. 插入的图像必须放在站点文件夹下的image文件夹内； 2. 设置图片的热点区域可选任意的工具； 实验思考：如何设置图片超链接，链接到指定的页面文件？如何设置图片的热点区域？书写实验报告要求：根据调试结果，写出实验

8、报告。页面效果图：实验5 超级链接实验目的：为了让学生掌握如何利用超级链接来制作页面；了解主页的创作步骤；掌握链接各种方式的制作方法与步骤。素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 插入横向导航条 2. 设置文本链接 3. 插入左置导航栏 4. 创建外部超级链接 5. 创建内部超级链接 6. 创建E-MAIL链接 7. 创建锚点链接 8. 创建下载文件的链接 9. 创建空链接 10. 创建脚本链接 实验步骤：1. 创建一个上方固定左侧嵌套的框架页面； 2. 在框架的上部分插入相关的图片或网站的LOGO及BANNER； 3. 左侧插入相关的文字，作

9、为左侧导航栏，右侧框架页面中输入相关文字； 4. 在右侧框架页面中，分别以3段文本段落标题作为锚点，在页面上部设置锚记链接； 5. 在左下部设置“友谊链接”到相关的网站，设置“联系我们”的E-MAIL链接；创建“下载”到下载文件的链接； 6. 保存文件，预览文件效果； 7. 实训过程注意事项 8. 导航栏要注意分类，避免重复出现； 9. 锚点的名称要注意不能重名。 实验思考：锚点在同一个文件中是否可以重名？如何设置链接到指定的网站？书写实验报告要求： 根据调试结果，写出实验报告页面效果图：图1-4 实验6 表格布局实验目的：为了让学生熟练掌握在Dreamweaver mx中插入表格，学会设置表

10、格的各项属性；并掌握如何在表格中插入文本、插入图像的操作方法和步骤。素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 插入表格，并选择表格和单元格： 2. 设置单元格属性： 3. 调整表格结构、大小： 4. 格式化表格： 5. 表格中插入文本，表格中插入图像： 实验步骤：1. 新建一个页面，在页面中插入一个表格，并在其中输入相应的文字； 2. 选择表格利用“格式化表格”命令来对表格格式进行修改，使其更美观； 3. 根据要求对部分单元格进行拆分或合并操作； 4. 设置文字的对齐方式，通过对边框、填充和间距进行设置； 5. 保存文件，预览文件效果； 6. 实

11、验过程注意事项 7. 插入表格时要注意：单元格的边距和单元格的间距值的设置； 8. 表格边框线精细为0像素的特殊用途； 9. 插入的图像必须放在站点文件夹下的image文件夹内。 实验思考：如何折分和合并单元格？如何设置表格的背景？书写实验报告要求： 根据调试结果，写出实验报告。页面效果图：图1-5 实验7 多媒体应用实验目的：为了让学生熟练掌握Flash动画、视频、声音等多媒体，能够制作出动感十足的网页，主要掌握如何插入Flash元素、插入背景音乐、插入视频、插入图像查看器等内容。重点是插入Flash元素，难点是插入图像查看器。素材准备：准备制作网页所需的Flash元素、图像素材、音乐素材、

12、视频素材等。实验课时：2学时实验内容：1. 插入FLASH动画 2. 插入FLASH按钮 3. 插入FLASH文本 4. 插入FLASH视频 5. 插入音频、视频 6. 插入Java Applet 7. 插入ActiveX控件 实验步骤：1. 新建一个页面，用表格划分布局。 2. 插入Flash导航条，添加背景。使背景透明化。 3. 在第二个表格左侧插入Flash按钮。 4. 右侧表格中插入视频。 实验过程注意事项：1. 表格布局是重点 2. Flash背景透明化需设置参数。 3. 插入Flash视频格式是.flv 4. 插入的FLASH文件必须将其复制到站点文件夹内； 5. 插入的按钮必须要

13、更改各个按钮的存储名称，否则网页中显示的将是同一个按钮； 实验思考：如何使Flash背景透明化？如何设置按钮的背景色与网页中的背景色一致？在Fireworks中制作的图形要在网页中引用应如何操作？书写实验报告要求：根据调试结果，写出实验报告。页面效果图：图1-6实验8 CSS样式实验目的：为了让学生了解使用CSS样式来美化网页的方法，掌握创建CSS样式的方法和步骤，以及利用CSS滤镜来制作文字特效等操作。素材准备：准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。实验课时：2学时实验内容：1. CSS样式的新建： 2. CSS样式的编辑与修改： 3. CSS样式的应用： 4. 利用CS

14、S滤镜来特效文字效果： 5. 制作光晕字、阴影字、遮罩字、动感字 实验步骤：1. 新建一个页面，在此页面中创建CSS样式将图片应用CSS滤镜。 2. 对页面中两部分文字分别使用CSS样式：并对部份文字作超级链接。 3. 修改CSS样式：对表格的框线、背景图片、链接样式等进行设置，并重新应用到所指定的部分； 4. 运用CSS滤镜来制作文字特效：光晕字、阴影字、遮罩字、动感字的制作； 5. 保存页面，预览效果图； 实验过程注意事项：CSS样式应保存到网站站点目录下；CSS样式的名称应注意不能同名。实验思考：如何利用CSS样式来创建链接文本不显示下划线？如何将CSS样式应用到另外的网站的网页中？书写

15、实验报告要求：根据调试结果，写出实验报告。页面效果图：图1-7实验9 层的布局实验目的：为了让学生掌握如何利用层来布局网页，掌握层的插入，设置层的各项属性，利用层与行为的应用来创建层动画以及“行为”的添加等操作。素材准备： 准备制作网页所需的文字素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 使用层排版 2. 设置层文本 3. 显示隐藏层 4. 拖动层 5. 调整层的大小 6. 层的对齐 7. “行为”调用 实验步骤：1. 新建一个页面，用表格划分布局。 2. 在左侧第二个单元格中插入“保存图像”“原始状态”两个提交按钮。 3. 左侧小女孩分为三个层，并设置层名字分别为“tou”,

16、“yi”、 “ku” 显示属性都为可见； 4. 右侧衣服分为四个层，并设置名字分别为“yi1”, “yi2”、 “ku1”, “ku2” 显示属性都为可见； 5. 利用层与行为来制作显示与隐藏层动画：选择“yi1”，添加一个“显示隐藏层”行为，设置”tou” 可见, ”ku”可见； ”yi1”可见，其它全部隐藏事件改为onClick；再添加一个双击脱下衣服，还原行为,设置”tou” 可见, ”ku”可见； ”yi”可见，其它全部隐藏事件改为onDblClick. 6. 利用同样的道理，设置分别单击，双击”yi2”ku1”ku2”的事件行为。 7. 保存文件，预览文件效果。 实验过程注意事项：插

17、入的图像必须放在站点文件夹下的image文件夹内；利用层与行为制作动画首先应选中对应层。实验思考： 行为由哪两部分组成？ 如何设置行为中的事件更多？书写实验报告要求：根据调试结果，写出实验报告。页面效果图：图1-10 实验10 框架网页实验目的：为了让学生掌握如何创建框架；设定框架的内容和样式；学会制作浮动的框架等操作。素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 创建框架 2. 设定框架内容和样式，保存框架 3. 设置无框架内容 4. 制作浮动框架 实验步骤：1. 在新建文档对话框的“框架集”类型中，选择左侧固定上方嵌套的框架模式，创建一个新的框架

18、页； 2. 插入图片和按钮，以及相关的文字内容； 3. 在属性面板中设置文字和图片的格式属性； 4. 在左侧列出导航链接，制作链接对应的子页面，最终实现点击左侧框架的链接，右面的框架会跳转到相应的子页面； 5. 保存文件，一定要分别保存框架的各个部分，每一部分为一个HTML文件，总的框架是一个HTML文件，预览文件效果； 实验过程注意事项：插入的图像必须放在站点文件夹下的image文件夹内；框架的保存分几个部分。实验思考：框架的保存应注意有几个文件要保存？如何设置框架中的链接？书写实验报告要求：根据调试结果，写出实验报告。页面效果图：图1- 11实验11 模板和库实验目的：为了让学生掌握如何利

19、用模板和库来制作网页；掌握模板的创建与编辑；掌握创建可编辑区域、可选区域、重复区域；掌握模板的保存与应用操作；了解如何创建库项目及插入库项目等操作。素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 创建模板 2. 定义可编辑区域 3. 定义可选区域 4. 定义重复区域 5. 设置可编辑标签属性 6. 应用模板 7. 调整模板 8. 创建库 9. 插入库 10. 调整库 实验步骤：1. 新建一个模板页面，编辑模板页面； 2. 在模板中插入可编辑区域并保存； 3. 新建一个基于模板的页面，修改模板文件，所有基于此模板的页面都会被修改； 4. 新建一个空白页，

20、套用上一实例中的模板； 5. 打开上一实例基于模板的页面，选择插入菜单中的模板对象，选择创建嵌套模板，制作新的嵌套模板，加入第2个可编辑区域并保存，最终生成嵌套模板； 6. 制作一个包含图像的网页，选中图像并拖动到库中； 7. 新建一个空白文档，从库中将图像拖到空白页面中； 8. 打开库项目，对其添加链接，保存库文件，提示更新相关页面，打开包含被修改库项目的页面文档，完成更新； 9. 保存文件，预览文件效果； 实验过程注意事项：插入的图像必须放在站点文件夹下的image文件夹内；模板的保存注意扩展名。实验思考：如何套用模板到页面？如何在模板中添加重复区域？书写实验报告要求：根据调试结果，写出实

21、验报告。页面效果图：图1-12实验12 表单网页实验目的：为了让学生掌握如何创建表单网页；了解各个表单对象属性的设置；熟练掌握各个表单对象不同的使用范围。素材准备：准备制作网页所需的文字素材、图像素材、音乐素材。实验课时：2学时实验内容：1. 插入表单； 2. 插入表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单。 实验步骤：1. 新建一个页面，按图13所示，插入左右两个层， 2. 在每个层里插入表单，在表单中插入文字内容及对应的表单对象：文本框、复选框、单选按钮、按钮、复框框、图像域、密码域、列表和菜单 3. 设置各个表单对象的属性值:将学生姓名、E-MAIL、具

22、体地址的文本域依次命名为name、email、address等等；设置好字符宽度，文本域类型等； 4. 将“专业”“性别”“民族”“政治面貌”“学历”“学制” 为列表菜单。 5. 插入“笑脸”图片，对齐层。 6. 保存文件，预览文件效果； 实验过程注意事项：在一个网页中只能插入一个表单，但在一个网页中可以有多个表单对象；各个表单对象注意在属性面板中定义其名称。实验思考：1. 表单对象中的插入两个单选按钮，如何命名？ 2. 如何设置密码域？ 3. 文本字段与文本区域如何转换？ 4. 如何设置检查表单的行为？ 书写实验报告要求：根据调试结果，写出实验报告。页面效果图：图1-13实验13 网站开发综

23、合实例实验目的：通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。 （1）掌握规划网站的内容结构、目录结构、链接结构的方法。 （2）熟练掌握网页制作软件Dreamweaver 8的基本操作和使用技能。 （3）掌握页面的整体控制和头部内容设置的方法。 （4）熟练掌握网页页面布局的各种方法。 （5）熟练掌握在网页中输入、设置标题和正文文字的方法。 （6）熟练掌握在网页中插入图像、flash动画、背景音乐的方法。 （7）掌握建立各种形式超级链接的方法。 （8）掌握表单网页制作方法。 （9）掌握网页特效的制作方法。 （10）掌握网站测试的方法。素材准备：准备制作网页所需的文字素材、图像素材、

24、音乐素材、FLASH动画、网页特效等。实验课时：4学时实验内容（以下任选一题）：（1）制作教学资源网站（2）制作个人网站。（3）制作班级网站。（4）制作学习网站。（5）制作学校网站。（6）制作旅游网站。（7）制作公司网站。（8）制作体育网站。实验步骤：1 （1）选题：确定网站主题。 （2）根据实验时间的长短制定一个切实可行的网站开发计划。 2准备素材，搜集与主题相关的文字、图像、动画、音乐等资料。3设计网站的内容结构、目录结构和链接结构，设计首页及其页面的版式结构。4创建本地网站，建立网站的目录结构。5制作首页。6制作二级子页。7制作内容页。8创建超级链接。9测试与浏览网页。10书写实验报告书

25、。实验过程注意事项：1动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。 2制作网页前，收集好所需的文字资料、图像资料、flash动画和网页特效。 3所创建的网站至少包括8个页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。 （1）首页采用表格进行布局，必须包含导航栏； （2）4个二级子页分别为框架网页、表单网页、利用模板制作的网页、利用布局表格制作的网页； （3）3个内容页分别为层布局的网页、应用JavaScript制作特效的网页、应用行为制作特效的网页。 （4）各个页面根据需要插入合适的图像和Falsh动画，首页要求插入背景音乐。 （5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。 （6）各个页面之间导航清晰、链接准确无误。 4网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。5在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。书写实验报告要求：根据调试结果，写出实验报告。