网页制作实验报告

1/21网页制作实验报告网页制作实验报告实验一：站点设置一、实验目的及要求本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。2、安装windowsxp操作系统；建立iis服务器环境，支持asp。3、安装网页三剑客等网页设计软件；2/21三、实验原理通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。四、实验方法与步骤1）执行“站点管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。2）在弹出的“站点定义为”对话框中单击“高级”选项卡。3）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。3/21五、实验结果六、讨论与结论实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。实验二：页面图像设置一、实验目的及要求：本实例的目的是设置页面的背景图像,并创建鼠标经过图像。二、仪器用具4/211、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。2、安装windowsxp操作系统；建立iis服务器环境，支持asp。3、安装网页三剑客等网页设计软件；4、安装acdsee、photoshop等图形处理与制作软件；5、其他一些动画与图形处理或制作软件。三、实验原理设置页面的背景图像,并创建鼠标经过图像。四、实验方法与步骤1)在“页面属性”对话框中设置页面的背景图像。5/212)在页面文档中单击“”插入鼠标经过图像。五、实验结果六、讨论与结论实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。当然这种实验效果很难在实验结果的截图里表现出来。这个实验的关键在于背景图像的选择，如果背景图像太大不仅会影响网页的打开速度，甚至图像在插入会也会有失真的感觉，因此在插入前对图像进行必要的处理能使实验的效果更好。实验三：表格制作一、实验目的及要求：本实例是要创建边框为1像素的表格。6/21二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。2、安装windowsxp操作系统；建立iis服务器环境，支持asp。3、安装网页三剑客等网页设计软件；4、安装acdsee、photoshop等图形处理与制作软件；5、其他一些动画与图形处理或制作软件。三、实验原理创建边框为1像素的表格。四、实验方法与步骤1)在文档中，单击表格“”按钮，在对话框中将“单元7/21格间距”设置为“1”。2)选中插入的表格，将“背景颜色”设置为“黑色”。3)在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”。4)设置完毕，保存页面，按下“f12”键预览。五、实验结果六、讨论与结论本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。8/21实验四：创建锚点链接一、实验目的及要求：本实例的目的是创建锚点链接。二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。2、安装windowsxp操作系统；建立iis服务器环境，支持asp。3、安装网页三剑客等网页设计软件；4、安装acdsee、photoshop等图形处理与制作软件；5、其他一些动画与图形处理或制作软件。9/21三、实验原理创建锚点链接。四、实验方法与步骤1)在页面中插入1行4列的表格，并在各单元格中输入导航文字。2)分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。3)在文档中输入文字并设置锚记名称“01”，按下“enter”键换行，输入一篇文章。4)在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“enter”键换行，输入一篇文章。5)同样的方法在页面下文分别输入文字和命名锚记为“03”和“04”，并输入文章。10/216)保存页面，按下“f12”键预览。五、实验结果六、讨论与结论添加瞄记的作用是可以帮读者快速找到自己想要的文章，同时也可以使页面更加精简。本实验的关键难点在于链接文本框输入的名称和瞄记的名称要相一致才能达到实验的效果，同时要记得是在上一篇文章的结尾处输入文字并设置瞄记名称，并记得输入对应的文章，否则瞄记可能不能用。熟练程度低在实验中不能很好地使用各种工具，无法一次准确地寻找到适当的位置。实验中忘记选择“不可见元素”，几次实验都失败，最后才得出正确的结论。因此在实验前要先做好预习，否则实验过程会比较吃力。实验五：设置css样式一、实验目的及要求：11/21本实例的目的是通过设置css样式创建表格的虚线边框。二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。2、安装windowsxp操作系统；建立iis服务器环境，支持asp。3、安装网页三剑客等网页设计软件；4、安装acdsee、photoshop等图形处理与制作软件；5、其他一些动画与图形处理或制作软件。三、实验原理通过设置css样式创建表格的虚线边框。12/21四、实验方法与步骤1)在网页中创建一个表格。2)在“css样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。3)在弹出的对话框中进行设置，完成后单击“确定”按钮。五、实验结果六、讨论与结论对话框中各项指标和属性的设置存在一定的难度，如果没熟练掌握就容易出错使实验失败。对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度，只要充分地掌握了软件的各种操作，对各属性所代表的含义有充分的认识就能很好地完成这个实验。13/21实验六：创建表单一、实验目的及要求：本实例的目的是创建一个募捐表单。网页制作实验报告JIANGXIAGRICULTURALUNIVERSITY本科课程报告题目：网页制作实验报告学院：软件学院姓名：徐潇学号：XX1506专业：软件工程班级：软件1002班指导教师：唐建军、胡昶二0一一年十二月14/21实验一、认识HTML一、实验目的：了解HHTML中涉及的技术。HTML语言的组成及特点，学会利用HTML语言编辑网页。了解CSS。了解网站开发的流程。二、实验内容1.参考书节，利用记事本实现唐诗实例。:在“记事本”中输入虞美人的文本。:选择“文件”“保存”命令，将该文件保存为“虞美人.html”，此时该文档将显示IE图标。:打开图标。如图所示：2.在Dreamweaver中输入如下代码：15/213.请写出以下效果的HTML代码角标的实现：在拆分视图下的文本编辑区域输入X1，然后看其在代码编辑区的变化。想要实现上下角标要用到角标在字母的上方;角标在字母的下方。红色字体的实现：在文本编辑区域回车编写“这是红色的字”然后选中这行字在属性面板中选择颜色为红色。粗体字的实现：在文本编辑区域回车编写“这是粗体字”然后选中这行字在属性面板中点击粗体。斜体字的实现：在文本编辑区域回车编写“这是斜体字”然后选中这行字在属性面板中点击斜体4.我上网浏览了谷歌他的URL：http：/目标：谷歌的目标是“万能搜索”此网站的导航利用超连接及表单等实现导航的16/21实验二、Dreamweavor应用一、实验目的：掌握如何在Dreamweaver中进行网页编辑；掌握Dreamweaver中站点的设置；掌握网站空间的申请及网页的上传。二、实验内容1.将实验1中的内容，利用DreamWeavor完成，并注意在拆分视图下，观察它是如何将格式操作变成HTML代码的。2.按书中要求，制作唐诗宋词网站的首页。3.在Dreamweaver中设置站点，并为唐诗宋词网站规划网站文件夹结构。网页制作实验报告下页网页制作课程实训说明书17/21系：班级：网页制作实验报告姓名：指导教师：网页制作实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为圣诞节，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。摘18/21要2的制作51、主页表格的布局及其图片的插入52、主页文字的输入及其最终效果图63、导航条的设计及代码6二、分页的制作71、圣诞起源表格布局及其效果72、圣诞雪景代码显示及其最终效果83、插入滚动图片的代码及其效果图94、圣诞促销层的插入及其效果图9三、背景音乐、Flash图片和视频的插入1019/21四、框架排版和时间轴的运用11、12五、鼠标特效代码的插入13、14制作的意义及实训总结15参考文献16一、概述、主题介绍大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在XX年里有好运气、学习成绩更优，每个人的生活都很精彩。、制作目的及其方法20/21主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Firework、Flash、Photoshop等相关辅助软件。1、应用远程站点管理的知识和技能；2.应用本地站点管理的知识和技能；3.应用网页页面设计的知识和技能；4.应用网页制作的知识和技能；5.培养以上知识和技能的综合应用能力。主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。、网站规划及其实现过程我们通过前期的网站策划首先搜集相关资料并最终确定了制作一个