网页设计与制作实验指导一览表.docx

网页设计与制作实验指导一览表.docx网页设计与制作实验指导一览表实验名称实验内容备注实验一HTML语言详细内容实验二初识Dreamweaver详细内容实验]文木操作详细内容实验四图像操作详细内容实验五超级链接详细内容实验六表格彳lj局详细内容实验七多媒体应用详细内容实验八CSS样式详细内容实验九层的布局详细内容实验十框架网页详细内容实釦一模板和库 —详细内容实验十二表单网页详细内容实验十三网站开发综合实例详细内容实验1HTML语言实训目的:为了止学生能熟悉学习网页不可避免要接触的HTML语言,达到用该语言可以建立一个简单的网页的目的,同时了解建立站点是做网站必不可少的,要掌握建立站点的方法。素材准备:准备制作网页所需的文字素材、图像素材。实验课时:2学时实验内容:创建站点;新建网页以及保存,重命名;输入HTML语言。实验步骤:在E盘中新建本地根文件夹,命名为root,并在该文件夹中新建image文件夹以存放网站中所要用到的图片。定义站点:设置〃站点名称〃,命名为〃niysite〃;设置本地根文件夹,指定为E盘下的root文件夹;设置"HTTP地址〃为localhost。创建与设置文档的页面属性:新建一个页面,保存名为“HTML基础”的文档。切换代码模式下,输入代码。保存文件,预览文件效果。实验过程注意事项:在创建站点的过程中注意建立本地文件夹,文件夹命名最好为英文;网站中所有的文件最好取名为英文;注意文件的路径;所冇的图片文件单独放在image文件夹内。实验思考:除了用HTML语言来做这个网页,还有没有其它的方法?书写实验报告要求:根据最终所作的网页,写出实验报告。页面效果图:图1-1实验2初识Dreamweaver实验目的:为了让学生能熟练掌握Dreamweaver的安装与卸载,启动与退出,基木工作环境和设置,对Dreamweaver操作环境有一定了解。素材准备:准备好从网上下载的安装程序。实验课时:2学吋实验内容:1・安装Dreamweaver:Dreamweaver的启动与退出:了解工具栏、菜单栏、标题栏等工作环境:卸载Dreamweaver实验步骤:打开从网上下载的Dreamweaver程序,双击安装。安装完成后输入注册号。启动Dreamweaver,并查看工具栏、菜单栏、标题栏等工作环境。退出Dreamweavero卸载Dreeimweaver实验过程注意事项:安装过程完成后,要激活。实验思考:从“控制面板”里删除程序与从安装到的口录文件里删除有什么区别?书写实验报告要求:写出本次实验报告。实验3文本操作实验目的:为了让学生能熟练掌握在Dreamweavermx中如何输入文木,调整设置文木的格式;如何插入特殊字符、文木列表、水平线、时间、注释的方法。素材准备:准备制作网页所需的文字素材、图像素材、咅乐素材。实验课时:2学时实验内容:输入文本:调整文本:插入特殊字符:插入文木列表:插入水平线:插入时间:插入注释:设置文本格式:实验步骤:新建一个页面文件;输入文本,调整文本的间距,设置文本的格式;通过“属性”面板中的“格式”和“颜色”等参数,将文字设为标题格式,并改变其颜色;输入一段不带格式的文字,选择“常用”工具栏上的“文本”单选项目,利用换行按钮对文本进行换行处理,实现分段的效果;插入特殊字符、项口符号、水平线、吋间、注释等内容;实验过程注意事项:在“编辑字体列表”对话框中选择耍添加的字体耍一个个地添加进去,不能全部选取再添加;当输入文本时要插入多个连续的空格,必须要“编辑”菜单下的“首选参数”中设置;换行的几种方式:自行换行;按ENTER强行换行;按SHTFT+ENTER换行操作;如何插入版权符号?如何插入特殊字符“?书写实验报告要求:根据调试结果,写出实验报告实验4图像操作实验目的:为了让学生熟练掌握在Dreamweavermx中插入图像,学会设置图像属性;如何插入鼠标经过图像、插入图像占位符的方法,常握图文混排的技巧等操作。素材准备:准备制作网页所需的文字素材、图像素材、音乐素材。实验课时:2学时实验内容:插入图像:设置图像屈性:插入鼠标经过图像:插入图像占位符:图文混排操作:实验步骤:打开上次实训所做的页面文件;插入图像,在属性面板对图像的格式进行设置;插入鼠标经过图像、图像占位符;将图片和文字进行混合排版;保存文件,预览文件效果;实验过程注意事项:插入的图像必须放在站点文件夹下的imageSC件夹内;设置图片的热点区域可选任意的工具;如何设置图片超链接,链接到指定的页面文件?如何设置图片的热点区域?书写实验报告要求:根据调试结果,写出实验报告。页面效果图:•设为首页•加入收•越实验5超级链接实验目的:为了讣学生掌握如何利用超级链接来制作页面;了解主页的创作步骤;掌握链接各种方式的制作方法与步骤。素材准备:准备制作网页所需的文字素材、图像素材、