网页设计与制作实验报告
网页设计与制作报告
网页设计与制作报告网页设计与制作报告(合集8篇)随着个人的文明素养不断提升,我们都不可避免地要接触到报告,报告中提到的所有信息应该是准确无误的。
为了让您不再为写报告头疼,以下是小编精心整理的网页设计与制作报告,仅供参考,欢迎大家阅读。
网页设计与制作报告1一、实习目的(一)检验自己是不是真的适合这个职业鉴于自己对未来的职业生涯的规划更倾向于设计,这和自己所学的专业不是十分有联系,所以我希望在实习的过程里思考自己未来是否适合从事这方面的工作,为以后求职之路少走弯路做一定的尝试。
(二)在实践中查漏补缺在学校学习的网站建设知识仅仅停留在平时的作业里,并没有得到充分的运用。
希望可以藉由这次实习,好好巩固书面知识。
在实际运用中通过发现问题,解决问题对知识进行查漏补缺。
(三)在工作中打磨自己由于学校和社会是截然不同的生活、学习、工作氛围,在工作中我们不可以像在学校一样随心所欲,待人接物方面需要更有礼貌的沟通和恰当好处的圆滑。
希望在实习里,和同事上司的相处中获得这方面的成长。
二、实习内容(一)实习主要内容广州xxxx有限公司是一个研发和销售智能寄存柜的公司。
它的产品在展示和销售这两个环节很需宣传册、企业网站等作为一个推广媒介。
我实习的主要内容就是配合网络部去完成网站建设的工作,涉及前台的外观设计和后台的代码编写,以及宣传册的设计。
1、负责设计公司整个企业网站的页面部分,根据网页设计师或客户所提供的主题要求和思路框架来设计出整个网站。
1)使用Photoshop、AI等图片处理软件设计、处理和制作网站上需要的图片2)使用DIV+CSS样式及基础的HTML语言做页面布局的排版3)使用Photoshop对网页进行配色及排版设计4)编写CSS代码使网站页面无论是在IE浏览器里还是在FF浏览器上正常显示2、负责网站的几个主体模块的文案撰写和后台编辑1)在已有的文案上配合网站架构进行提炼和归纳整理2)使用Photoshop对文案进行概念配图3)在后台将文案部分合理配色排版4)按照网站架构在后台录入所有产品资料(二)工作过程在公司的2个多月里,我的工作都是由负责整个网站文案架构的曹经理分配监督的。
网页设计与制作实验过程及报告
网页设计与制作实验过程及报告网页制作过程及报告网页设计与制作的一般实验步骤:1、确定网站主题网站里的每一个网页都要有统一的风格,以加强渲染自己性格的效果。
最重要的是做出自己的风格,吸引浏览者的眼球。
2、搜集材料主要在网站上搜集所要的网页信息,包括图片、文字、相关的新闻,同时,查询相关的图书、报纸、光盘、多媒体等,也可以得来更加有说服力的信息。
3、规划网站我的网站包括5个页面,。
版面设计要灵活,根据各部分内容的不同适当的自由设计。
但是每个页面的主元素和位置不能变。
用CSS 设计一个样式,以保证随时、准确的调用。
另外,为了网页布局的协调,还可以加入flash动态图片,会达到更好的效果。
4、选择合适的制作工具做网页的首先工具当然为Dreamweaver。
5、认识网页设计工具Dreamweaver(1)Dreamweaver的启动(2)窗口组成的认识6、新建站点7、站点中首页的创建8、制作网页素材、风格、模板都设计好以后,下一步就是具体的制作网页。
制作网站时,首先要做的就是站点的规划,建立一个本地站点。
网页中的css 样式文件也应统一管理,做到有条不紊。
9、根据自己的网页风格,在网上搜集合适的图片。
最后还要制作各个页面的链接,把整个网页可怜起来,形成一个统一的整体,方便浏览者进行各个页面间的跳转。
10、上传测试网页制作完毕以后,要进行测试,在浏览器上运行自己的网站,反复测试,以发现设计中的缺陷。
实验结果及理论分析:通过这简短的三个周的学习,让我有一个独立设计,制作网页的机会,通过这次试验,我的收益颇多。
首先,独立的实践了一个完整的网站设计的全过程,把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系,使平时学到的知识点有了一个质的升华,并且合理的在试验中进行了实践。
第二,在这次实验的过程中,我搜集了大量的素材和网页设计的技术技巧方面的书,扩大了知识面,给我在以后的设计过程中能博采众长,制作出技术精湛的网页打下了基础。
网设计与制作实训报告完整版
网设计与制作实训报告完整版网页设计与制作实训报告一、实训目的与背景网页设计与制作是现代社会中非常重要的技能之一,通过本次实训,我旨在培养自己的网页设计与制作能力,提高自己的实际操作能力,并将所学知识与技能应用于实际工作中。
二、实训过程与方法1. 确定实训内容与目标:为了更好地完成实训,我事先确定了实训的内容及所需达到的目标。
实训的内容包括学习HTML、CSS、JavaScript等网页设计与制作相关知识,并能够通过实际操作制作出具有实用性与美观性的网页。
2. 学习与研究:在开始实际操作之前,我首先进行了系统的学习与研究。
通过参考书籍、网络资源、视频教程等方式,我全面了解了HTML、CSS、JavaScript等技术的基本原理与应用方法,并加深了对网页设计与制作的理解。
3.实际操作与练习:在学习与研究阶段结束后,我开始进行实际操作与练习。
我首先从简单的网页设计开始,逐渐增加难度,通过一步步实际操作,不断巩固所学知识,并提高自己的技术水平。
同时,我也积极参与实验室和班级里的网页设计与制作项目,与同学们共同学习,互相交流经验。
4.实际项目案例:在实训的最后阶段,我开始进行实际项目案例的设计与制作。
我选择一个健身房的官方网站作为实际项目,通过网站的设计与制作,展示出我所学技术的实际应用。
在这个过程中,我不断与客户进行沟通与反馈,保证项目的质量与效果。
三、实训成果与收获通过本次实训,我取得了一些实质性的成果。
首先,我掌握了HTML、CSS、JavaScript等网页设计与制作技术,能够熟练运用这些技术进行网页设计与制作。
其次,我通过实际操作,提高了自己的实际操作能力,并在实际项目中展示出良好的设计与制作水平。
最后,我与同学们共同学习,互相交流经验,取得了一定的进步。
在实训中,我也遇到了一些问题与困难。
其中最大的困难是在实际项目中与客户进行沟通与反馈,因为客户对于网页设计与制作可能存在一些不了解或误解。
但通过与客户的不断沟通与解释,我最终成功理解并满足了客户的需求。
网页制作实训报告
网页制作实训报告第一篇:网页制作实训报告《网站设计与制作》实训报告X学院XX班XXX号一.实训时间:2010年6月7日到2010年6月13日二.实训地点:XXX学院XXX班级三.实训组员:XXX、XXX四.实训目标:运用网页设计方法,设计一个网站,提高综合应用所学知识的能力,积累Web网站的制作经验,培养团队协作精神。
本次实训的具体目标为:了解网站制作的一般流程;熟练使用网页制作工具Dreamweaver、Flash、Fireworks设计网页;能灵活运用表格、层和框架布局页面;熟练使用CSS样式表美化网页;正确使用JavaScript添加网页特效;灵活使用模板和库来制作网页;学会申请免费域名空间和正确上传站点的方法。
五.实训策划:这一周,我们要进行《网站设计与制作》实训,我们认为做网站前最主要的是确定主题、框架和标题栏的设计。
因此我们相互讨论之后,确定制作以“婚纱”为主题的“喜多坊时尚婚纱网”。
在之后的资料收集和网页的框架的建设中,我们发现了许多问题,某些关键点无法做出心中的效果,这让我们有些遗憾。
通过自身及组员的共同探索,我们已尽权利将以下是我们的策划内容:1.确定主题。
制作网页,首先是确定主题,冬天很冷,却冷得很幸福,刚刚过去的圣诞的热闹劲还在心头。
于是我们从幸福出发,想到了结婚-婚纱,建立一个简单的介绍婚纱的网站并取名喜多坊时尚时尚婚纱,专业介绍一些喜多坊婚纱的特色等。
我们本次间的网站基本以粉红为基点,粉红是可爱清纯的颜色,粉红代表着幸福温馨,所以本站以粉红为风格,让整个网站充满爱的力量。
2.设计主页。
主页的设计是整个网站的灵魂,构思导航栏的分类,然后是整体规划,每一版块都有其个性的色彩,清晰明了,便于阅读浏览,我们构思大致分几部分,首页,关于我们,婚纱礼服,量体裁衣,婚纱选购,公司门市,与我联系,在线论坛8大板块,每一板块又分几小部分,内容比较充分,多样。
确定导航栏的各个分类标题之后对于建立二级子网尤为重要,我们运用Photoshop CS3技术来设计出导航栏,制作切片,建立导航栏,将整体的主页效果建立起来。
网页系统设计实验报告(3篇)
第1篇一、实验目的1. 理解网页系统设计的基本概念和流程。
2. 掌握网页系统的规划、设计和实现方法。
3. 提高网页设计与制作能力,熟悉相关软件的使用。
二、实验环境1. 操作系统:Windows 102. 浏览器:Chrome3. 开发工具:Adobe Dreamweaver CC4. 编程语言:HTML、CSS、JavaScript三、实验内容1. 网页系统规划2. 网页系统设计3. 网页系统实现4. 网页系统测试与优化四、实验步骤1. 网页系统规划(1)明确系统功能:根据用户需求,确定网页系统的功能模块,如首页、产品展示、新闻资讯、联系方式等。
(2)确定页面布局:根据功能模块,规划页面布局,包括头部、导航栏、主体内容、底部等。
(3)设计导航结构:根据页面布局,设计导航结构,使用户能够方便地浏览各个页面。
2. 网页系统设计(1)设计页面风格:根据网站定位和用户需求,设计页面风格,包括颜色、字体、图片等。
(2)设计界面元素:根据页面风格,设计界面元素,如按钮、图标、表格等。
(3)设计交互效果:使用JavaScript等脚本语言,实现页面元素的交互效果,如滚动动画、鼠标悬停等。
3. 网页系统实现(1)编写HTML代码:使用HTML标签,构建网页结构。
(2)编写CSS代码:使用CSS样式,美化网页界面。
(3)编写JavaScript代码:使用JavaScript脚本,实现页面交互效果。
4. 网页系统测试与优化(1)功能测试:测试各个功能模块是否正常工作。
(2)性能测试:测试网页加载速度和响应时间。
(3)兼容性测试:测试网页在不同浏览器和设备上的显示效果。
(4)优化:根据测试结果,对网页进行优化,提高用户体验。
五、实验结果与分析1. 网页系统规划根据用户需求,本网页系统规划了以下功能模块:- 首页:展示网站简介、最新动态、热门产品等。
- 产品展示:详细介绍各个产品,包括图片、文字、价格等。
- 新闻资讯:发布公司新闻、行业动态等。
网页设计实训报告总结3篇
网页设计实训报告总结3篇网页设计实训报告总结 3篇篇一题目:实训课程名称:网页设计系别:专业 / 班级:年级:学号:姓名:指导老师:20xx年 x月 x日目录 1 实训目的 2 实训内容 2.1准备工作 2.2使用的技术 2.3设计制作要求 3 方案设计与实施步骤 4 实训中出现的问题、分析及解决方法 5.2日志 5.3 教程视频 6 实训总结 1 实训目的通过综合实训进一步巩固,深化和拓展学生的理论知识与专业技能。
(1)掌握规划网站的内容结构,目录结构 ,链接结构的方法。
(2)掌握页面的整体控制和头部内容设置的方法。
(3)熟练掌握网页页面布局的各种方法。
(4)熟练掌握在网页中输入 ,设置标题和正文文字的方法。
(5) 熟练掌握在网页中插入图象 ,flash动画和背景音乐的方法。
(6) 熟练建立各种形式的超级链接的方法。
(7)掌握表单网页制作方法。
(8) 掌握网页特效制作方法。
(9)掌握网站测试的方法。
2 实训内容 1.网站主题要求结合个人工作需要及兴趣爱好,独立完成主题的选择。
2.网站内容要求网站不少于 2级,页面总数不少于 10个;内容和素材避免雷同。
3.设计制作要求 4设计静态网站 (HTML页面 ); 5 站点文件、文件夹的命名与组织要求规范; 6每个网页要求有标题; 7网页要求整合多种媒体(音频、视频、动画、图片、文字等); 8要求有 CSS的设计和使用; 9 要求网站无错误链接; 2.1准备工作前期做好网页的规划,设计好image view vied css 等目录,做好不混乱易于维护 2.2使用的技术 html css html5 2.3设计制作要求网页内容有内涵,图文并麻,跳转无问题,配合 csss 进行开发,千万规划好项目的架构,易于维护。
在网页中有图片,有视频,有图片,有动画。
3 方案设计与实施步骤 1、网站主题我的网站的主旨在于从各个方面全面的介绍我自己,展示自己,包括我的个人资料、爱好。
网页设计的实习报告合集5篇
网页设计的实习报告网页设计的实习报告合集5篇在当下社会,需要使用报告的情况越来越多,报告具有语言陈述性的特点。
那么一般报告是怎么写的呢?下面是小编精心整理的网页设计的实习报告5篇,希望对大家有所帮助。
网页设计的实习报告篇1为此学校为我们进入社会实习前为我们组织一次为期两个月的校内实习。
在学校组织的这次校内实习,让我们在进入社会之前,提前体验了一下将来在社会上的工作情况,给我们提前积累一些社会经验,通过本次的实习让我们更加熟练网页的制作,并创新的以网络作为平台,结合网络运用制作了各类网页。
这包括了我们专业所学习的所有内容,这次实习不紧是对我们过去学习成果的总结验证,更是一次学习上的创新与进步。
在这次校内实习过程中,不管在知识掌握上,还是知识运用实践体验方面我都得到了很大的收获。
网页设计与制作的实习是锻炼我们实践能力的重要环节,是对我们实际工作能力的具体习练和考察过程。
随着科学技术发展的日新月异,网页设计制作已经成为当今计算机应用中空前活跃的领域,在生活中可以说得是无处不在。
因此作为二十一世纪的大学来说掌握网页设计制作的技术和能力是十分重要的。
这次实习,我为自己家乡的一个概况做一个网页。
我是来自大理,大理作为一座旅游城市,拥有众多的旅游风景点,所以我选择了为我家乡的旅游做一个网页。
首先我要做的就是要选择好题目和网页的风格,之后我就分步骤准备在制作网页前所要做好的准备工作。
我浏览了大理旅游网的一些特点,借鉴这些网页的优秀之处,不好的地方在自己的网页上加以改良,从而使自己的网页更加美观。
做好这些准备工作之后我希望能在最短的时间内做到最好的效果。
接下来的步骤就是准备素材,搜集与主题相关的文字、图像、动画、音乐等资料。
在准备素材的过程中我用到了dreamweaver、photoshop等工具。
再是设计网页的内容结构、目录结构和链接结构,设计首页及其页面的版式结构。
然后创建本地网页,建立网页的目录结构。
制作首页、二级子页、内容页,创建超级链接。
网页设计实习报告(精选15篇)
网页设计实习报告(精选15篇)网页设计篇1:熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足0.1平米的空间内投资达数百万美元。
网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。
WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的链接,绕过主页而进入WEB的深层。
一.网站的整体规划1.讨论网站主题:因为自己对普罗旺斯很感兴趣,于是就想到要是一下为心中的仙境设计一个旅游网站。
2.定位网站CI形象:旅游网站最重要的就是是浏览者产生想去亲身体验一下的共鸣。
于是在网页设计上面,根据普罗旺斯梦幻般的意境,我采用的是清新隽永的CI形象。
使浏览者有宾至如归的感受。
3.确定栏目和板块:1]首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。
2]其次就应该考虑导航条的设置了。
3]正文的框架设置 (横向因素和纵向因素交错)在浏览了很多精美的旅游网站之后,再结合自己的想法,我先在草纸上画出了大体的栏目和板块。
4.网站的整体风格和创意:建立一个浪漫的旅行网站,走映像派路线,目的务必使浏览者留下映像。
二.网页制作的前期策划与准备1.资料的搜集:由于个人的爱好,我很早以前就收集了许多普罗旺斯的美图,这次就方便多了。
接着就搜集了一些有梦幻效果的网页背景,FIASH源代码、小图标和一些GIF的动画等。
2.熟悉制作工具软件:主页制作的基本条件有:硬件:一台电脑(64MB以上内存,当然越大越好啦);可以拨号上网;如果你有条件的话,建议:配置扫描仪,这将大大方便图像和文字的输入;软件:HTML编辑软件:常用的有Frontpage、Hotdog等,本文重点介绍 Dreamweaver;图像处理软件:常用的有Photoshop、flash、Fireworks 等;文件上传软件:常用的有Cuteftp、WSftp等。
网页设计与制作报告(优秀3篇)
网页设计与制作报告(优秀3篇)(经典版)编制人:__________________审核人:__________________审批人:__________________编制单位:__________________编制时间:____年____月____日序言下载提示:该文档是本店铺精心编制而成的,希望大家下载后,能够帮助大家解决实际问题。
文档下载后可定制修改,请根据实际需要进行调整和使用,谢谢!并且,本店铺为大家提供各种类型的经典范文,如总结报告、心得体会、应急预案、演讲致辞、合同协议、规章制度、条据文书、教学资料、作文大全、其他范文等等,想了解不同范文格式和写法,敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays, such as summary reports, insights, emergency plans, speeches, contract agreements, rules and regulations, documents, teaching materials, complete essays, and other sample essays. If you would like to learn about different sample formats and writing methods, please pay attention!网页设计与制作报告(优秀3篇)在人们越来越注重自身素养的今天,越来越多的事务都会使用到报告,不同的报告内容同样也是不同的。
web网页设计与制作实习报告-图文
web网页设计与制作实习报告-图文网学班学指实验报告生姓名级号导教师文志华页设计与制作2021.5.23实验一简单网页制作一、实验目的1.熟悉Dreamweaver软件的操作界面。
2.掌握建立本地站点的方法。
3.掌握简单网页制作方法。
4.掌握超链接的建立方法。
三、操作步骤1.创建“潜水俱乐部”站点(1)在D盘新建文件夹,命名为shiyan1;(2)将images文件夹和gallery文件夹复制到中shiyan1中;(3)启动Dreamweaver,使用“站点|新建站点”命令创建站点。
2.制作“俱乐部首页”。
(1)新建网页。
(2)使用“文件|保存”命令保存网页,命名为index.。
(3)在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。
(4)从“文本.txt”中将首页的相关文字粘贴到网页中。
(5)设置一级标题、二级标题、三级标题、项目列表、编号列表。
(6)插入图像。
(7)在Copyright后插入版权符号?。
(8)在电话号码之间插入半角空格。
(9)在电子邮箱地址上建立超链接,mailto: vip@BubbleUnder.。
(10)选中网页内容,然后单击“插入Div标签”按钮,分别插入header、navigation、mainContent、footer共4个Div。
(11)保存网页,按F12,预览网页。
四.实验结果实验二 X语言一、实验目的1.掌握X 语法。
2.掌握X标记及属性。
3.掌握X 标记校验的方法。
二、实验内容制作“学校主页-新闻中心-学校新闻-校领导赴包装设计艺术学院调研”的网页校领导赴包装设计艺术学院调研浏览:2827次日期:2021-03-21三、操作步骤 1)创建站点(1)在D盘新建文件夹,命名为shiyan2;(2)将“文本.txt”和images文件夹复制到中shiyan2中; 2)用记事本打开“文本.txt”。
3)选择“文件 | 另存为”命令,将文件另存为shiyan2.。
网页设计与制作实验报告
( 实验报告)姓名:____________________单位:____________________日期:____________________编号:YB-BH-054111网页设计与制作实验报告Web design and experimental report网页设计与制作实验报告实验一:站点设置一、实验目的及要求本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境,支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;三、实验原理通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。
四、实验方法与步骤1)执行“站点管理站点”命令,在弹出的“管理站点”对话框中单击“新建”按钮,在弹出的快捷菜单中选择“站点”命令。
2)在弹出的“站点定义为”对话框中单击“高级”选项卡。
3)在“站点名称”文本框中输入站点名称,在“默认文件夹”文本框中选择所创建的站点文件夹。
在“默认图象文件夹”文本框中选择存放图象的文件夹,完成后单击“确定”按钮,返回“管理站点”对话框。
4)在“管理站点”对话框中单击“完成”按钮,站点创建完毕。
五、实验结果六、讨论与结论实验开始之前要先建立一个根文件夹,在实验的过程中把站点存在自己建的文件夹里,这样才能使实验条理化,不至于在实验后找不到自己的站点。
在实验过程中会出现一些选项,计算机一般会有默认的选择,最后不要去更改,如果要更改要先充分了解清楚该选项的含义,以及它会造成的效果,否则会使实验的结果失真。
实验前先熟悉好操作软件是做好该实验的关键。
实验二:页面图像设置一、实验目的及要求:本实例的目的是设置页面的背景图像,并创建鼠标经过图像。
二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。
网页制作实验报告模版
实验名称:网页设计与制作实验目的:1. 熟悉网页设计的基本概念和流程。
2. 掌握HTML、CSS和JavaScript等网页制作技术。
3. 学会使用网页设计软件(如Dreamweaver)进行网页制作。
4. 提高网页美感和用户体验。
实验时间:2023年X月X日实验地点:计算机实验室实验设备:计算机、Dreamweaver软件、网络连接实验人员:XXX(姓名)、XXX(姓名)实验内容:一、实验背景随着互联网的快速发展,网页已成为人们获取信息、交流互动的重要平台。
掌握网页制作技术对于提高个人综合素质和适应社会需求具有重要意义。
本实验旨在通过实践操作,使学生了解网页制作的基本流程,掌握相关技术,提高网页制作能力。
二、实验步骤1. 网页设计构思(1)明确网页主题:根据实验要求,确定网页主题,如个人博客、企业官网等。
(2)收集素材:根据主题,收集相关的图片、文字、视频等素材。
(3)布局设计:利用Dreamweaver软件,对网页进行布局设计,包括页面结构、导航栏、广告栏、内容区域等。
2. 网页制作(1)HTML编写:使用HTML标签,如<html>、<head>、<body>等,构建网页的基本结构。
(2)CSS样式设置:使用CSS样式,如<style>、<link>等,对网页进行美化,包括字体、颜色、背景等。
(3)JavaScript脚本编写:使用JavaScript脚本,如<script>、<img>等,实现网页的动态效果。
3. 网页测试与优化(1)浏览器兼容性测试:在多个浏览器(如Chrome、Firefox、IE等)中测试网页,确保网页在各个浏览器中均能正常显示。
(2)性能优化:对网页进行性能优化,提高网页加载速度,如压缩图片、减少代码冗余等。
(3)用户体验优化:根据用户反馈,对网页进行优化,提高用户体验。
三、实验结果与分析1. 实验结果通过本次实验,成功制作了一个具有个人风格的网页,包括首页、关于我、文章列表、联系方式等页面。
网页制作实验报告(18篇)
网页制作实验报告(18篇)篇1:网页制作实验报告一、实验目的及要求:本实例的目的是通过设置css样式创建表格的虚线边框。
二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境,支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
三、实验原理通过设置css样式创建表格的虚线边框。
四、实验方法与步骤1) 在网页中创建一个表格。
2) 在“css样式”面板中单击“”按钮,在弹出的对话框中进行设置,完成后单击“确定”按钮。
3) 在弹出的对话框中进行设置,完成后单击“确定”按钮。
五、实验结果六、讨论与结论对话框中各项指标和属性的设置存在一定的难度,如果没熟练掌握就容易出错使实验失败。
对“ccs”样式所要使用的各种按扭不够熟悉在使用的时候觉得很生硬。
这个实验成功的关键在于对软件的掌握程度以及对各种属性的认识程度,只要充分地掌握了软件的各种操作,对各属性所代表的含义有充分的认识就能很好地完成这个实验。
篇2:网页制作实验报告一、实验目的及要求:本实例的目的是创建锚点链接。
二、仪器用具1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境,支持asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
三、实验原理创建锚点链接。
四、实验方法与步骤1) 在页面中插入1行4列的表格,并在各单元格中输入导航文字。
2) 分别选中各单元格的`文字,单击“”按钮,在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。
网页制作实验总结
网页制作实验总结(一)网页设计实验报告(一)网页制作实验总结(二)《网页设计与制作》实验报告院系名称管理学院专业班级电子商务11级3班学生姓名许世谦学号2011170503082013年 6 月4 日实验一HTML语言实验一、实验目的1、掌握利用HTML语言编写网页的能力;2、掌握利用HTML语言编写表格的能力;3、掌握利用HTML语言编写表单的能力。
二、实验课时2学时三、实验内容1、表格实验的结果<html><head><title>实验一</title></head> <body><table border align="center" height="80" width="600"><caption><h2>试验1</h2></caption> <tr><td rowspan="2" colspan="2" align="left" bgcolor="red">A <td align="left" >B <td align="center">C <tr><td colspan="2" align=center>D <tr><td rowspan="2" align="right">E<td width="80" rowspan="2" align="right">F <td rowspan="2" align="left">G <td>H <tr> <td>I </table> </body> </html>2、表单实验的结果<html><head><title>试验第一题</title></head> <body><h2 align="center">试验2</h2> <form><table border align="center" height="80" width="600"><tr><td align="center" width="200">姓名<td><input> <tr> <td align="center" width="200">密码<td><input> <tr> <td align="center" width="200">性别<td><input type="radio" name="gender" value="1" checked>女<input type="radio" name="gender" value="2">男<tr><td align="center" width="200">爱好<td><input type="checkbox" name="check1" value="yes">篮球<input type="checkbox" name="check2" value="yes" checked>足球<input type="checkbox" name="check3" value="yes">乒乓球<tr><td align="center" width="200">籍贯<td><selectname="jiguan"><option>开封<option>郑州<option>洛阳</select> <tr><td colspan="2" align="center"><input type="submit" name="submit_button" value="提交"><input type="reset" name="reset_button" value="重置"> </table></form> </body> </html> 四、实验小结通过这次试验,我掌握了许许多多以前不知道的代码细节,让我对网页设计与制作有了更深层次的了解,同时我对编写代码也渐渐的熟悉了。
网页制作实训报告
网页制作实训报告网页制作实训报告4篇在学习、工作生活中,报告有着举足轻重的地位,我们在写报告的时候要注意涵盖报告的基本要素。
相信很多朋友都对写报告感到非常苦恼吧,以下是小编收集整理的网页制作实训报告,仅供参考,大家一起来看看吧。
网页制作实训报告1实验过程1.资料的搜集,网页制作实习报告。
2.熟悉制作软件。
3.构建站点框架。
打开dremweaver后第一步便是新建站点4设计主页及二级页面。
5实现网页间的链接链接的过程其实很简单,主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果具体情况如下:通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例,教会我们。
使更丰富全面的软件技术和应用技巧,使我们真正对所学的软件融会贯通。
所以我结合所学专业的内容制作了个人网站,作为实习的成果。
其内容是多样化的。
制作网页用的软件是dreamweaver , banner软件。
dreamweaver大大加速了网络时代电子交易应用中的项目交付。
它提供了网页和表单的动态生成到企业级的解决方案,如电子商店,库存管理系统和企业内部局域网的数据库应用等功能。
例如,网页上很流行的阴影和立体按纽等效果,只需单击一下就可以制作完成。
当然,其最方便之处是,它可以将图象切割,图象映射,悬停按纽,图象翻转等效果直接生成html代码,或者嵌入到现有的网页中,或者作为单独的网页出现。
主图是一个网页的门面,它能体现出这个网页的整体风格。
制作网页,首先是确定主题,经过再三考虑,就做了个关于中国的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的中国介绍和相关的事迹网站,专门介绍一些即使用,又便宜的小秘笈。
于是网站主题确立。
网页设计与制造实验报告
网页设计与制造实验报告1. 实验目的本次实验的目的是掌握网页设计与制造的基本原理和方法,通过实践锻炼设计与编码的能力,完成一个简单的网页设计与制作。
2. 实验环境和工具- 网页设计软件:Adobe Photoshop- 编程工具:Visual Studio Code- 浏览器:Google Chrome3. 实验步骤3.1 网页设计首先,我们使用Adobe Photoshop 进行网页设计。
设计阶段包括以下几个步骤:1. 确定网页的整体布局和结构。
2. 设计网页的色彩搭配和风格。
3. 设计网页需要用到的图标和图片。
3.2 网页制造完成网页设计后,我们使用HTML 和CSS 进行网页制造。
制造阶段包括以下几个步骤:1. 使用HTML 构建网页的骨架结构,包括头部、导航栏、主体内容、侧边栏和底部。
2. 使用CSS 进行网页的样式美化,包括字体、颜色、边框和背景等。
3. 导入设计阶段准备好的图标和图片,并进行相应的布局和调整。
3.3 网页测试完成网页制造后,我们需要进行测试以确保网页在不同平台和浏览器上的良好表现。
测试阶段包括以下几个步骤:1. 在不同的浏览器中打开网页,检查网页是否正常显示。
2. 调整浏览器窗口大小,检查网页的响应式布局是否正常。
3. 在移动设备上测试网页,检查网页在移动端的显示效果。
4. 实验结果与分析经过实验,我们成功完成了一个简单的网页设计与制造。
通过设计阶段,我们确定了网页的整体布局和色彩搭配,为网页制造阶段提供了参考。
在制造阶段,我们使用HTML 和CSS 构建了网页的骨架结构并进行了样式美化,最终实现了预期效果。
在测试阶段,我们对网页在不同平台和浏览器上进行了测试,确认网页在各种情况下均表现良好。
然而,这个简单的网页还存在一些改进的空间。
我们可以进一步优化网页的加载速度,减少不必要的资源请求。
同时,我们可以在网页中增加一些交互功能,提升用户体验。
这些都是我们在今后的实践中需要不断探索和改进的方向。
网页设计与制作报告(6篇)
网页设计与制作报告(6篇)网页设计与制作报告(6篇)网页设计与制作报告1一、实习目的:通过社会实践,可以把我们在学校所学的理论知识,运用到客观实际中去,使自己所有用武之地。
以便能够达到拓展自身的知识面,扩大与社会的接触面。
1、了解平面设计在焦作的市场现状及前景。
2、进一步掌握ps,coreldraw,等设计软件的运用。
3、尝试把学校里学习的平面设计相关理论运用到实习过程中。
4、初探做好平面设计师的方法,熟悉平面设计的方法和程序步骤。
5、培养人际交往与社交能力,为成为平面设计师作准备。
二、实习时间:2023年1月1日―4月30日三、实习地点:威美(上海)金融伟德服务有限公司四、实习内容:平面设计五、实习总结:即将面临大学毕业,因为伟德视觉传达专业,想丰富一下自己的知识,所以我找到了一家互联网金融公司做UI平面设计,虽然和我所学的专业有些差异,但它对于我来说是受益匪浅,我所在的公司威美(上海)金融伟德服务有限公司,主要是网页设计为主,也与绘画有所伟德,既然选择这个公司,我就要好好去学,使自己的基础更牢固,技术更全面,在大学里学的知识却不知道如何运用,想伟德多个伟德,因此我非常珍惜这次实习的机会,在有限的时间里加深对绘画对设计的了解,找出自身的不足。
实习的内容是页设计(Ps,ai,arp等软件的使用)。
在实习过程中,我深深地感受到作为设计师通常缺乏足够的对市场的了解和对管理层领导上的沟通,做出的设计作品经常会与市场经济脱节;而作为管理者通常缺乏设计基础和审美能力,往往为了追求市场效益,过多地拘束设计师的思维与创新,忽略了设计要素的重要性,造成了设计的庸俗化。
来到公司,第一天进公司,与经理进行了简单面谈后,部门总监把我分配给伟德经理,伟德经理是我的直接领导,所有工作由伟德经理分布。
第一天来到公司要赶做两个网页banner,接到文案后就在网络上搜集大量banner素材,找了几个适合这次文案的banner然后用Photoshop简单的修改图片,第一天没有做好,幸好领导说第二天晚上再交给他,于是我就乖乖的回家找图片。
网页制作实验报告3篇
网页制作实验报告3篇网页制作实验报告1一、实验目的及要求:本实例的目的是设置页面的背景图像,并创建鼠标经过图像。
二、仪器用具1、生均一台多电脑,组建内部局域网,并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境,asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
三、实验原理设置页面的背景图像,并创建鼠标经过图像。
四、实验方法与步骤1) 在“页面属性”对话框中设置页面的背景图像。
2) 在页面文档中单击“”插入鼠标经过图像。
五、实验结果六、讨论与结论实验结束后我们可以看到页面的背景变成了我们插入的图像,并且要鼠标经过的时候会变成另一个图像,这就是鼠标经过图像的效果。
当然这种实验效果很难在实验结果的截图里表现出来。
这个实验的关键在于背景图像的选择,如果背景图像太大不仅会影响网页的打开速度,甚至图像在插入会也会有失真的感觉,因此在插入前对图像进行必要的处理能使实验的效果更好。
网页制作实验报告2一、实验目的及要求:本实例是要创建边框为1像素的表格。
二、仪器用具1、生均一台多电脑,组建内部局域网,并且接入国际互联网。
2、安装windows xp操作系统;建立iis服务器环境,asp。
3、安装网页三剑客(dreamweaver mx;flash mx;fireworks mx)等网页设计软件;4、安装acdsee、photoshop等图形处理与制作软件;5、其他一些动画与图形处理或制作软件。
三、实验原理创建边框为1像素的表格。
四、实验方法与步骤1) 在文档中,单击表格“”按钮,在对话框中将“单元格间距”设置为“1”。
2) 选中插入的表格,将“背景颜色”设置为“黑色”(#0000000)。
3) 在表格中选中所有的单元格,在“属性”面版中将“背景颜色”设置为“白色”(#ffffff)。
网页制作实验报告-总结报告_0
网页制作实验报告-总结报告网页制作实验报告-总结报告-实验报告网页制作实验报告实验一:站点设置一、实验目的及要求本实例是通过站点定义为对话框中的高级选项卡创建一个新站点。
二、仪器用具 1、生均一台多媒体电脑, 组建内部局域网, 并且接入国际互联网。
2、安装 WindowsXP 操作系统;建立 IIS 服务器环境, 支持ASP。
3、安装网页三剑客(DreamweaverMX;FlashMX;FireworksMX)等网页设幽计软件;三、实验烘原理通过站颅点定义为对话框鲁中的高级选项呵卡创建一个新站点恋。
四、实验方法与芝步骤 1)执行兢站点\管理站点佑命令, 在弹出的抨管理站点对话个框中单击新建里按钮, 在弹出的快焉捷菜单中选择站穿点命令。
2 泽)在弹出的站点扯定义为对话框中繁单击高级选项罗卡。
3)在嫡站点名称文本框心中输入站点名称, 瓦在默认文件夹搽文本框中选择所创硬建的站点文件夹。
哨在默认图象文件嫡夹文本框中选择布存放图象的文件夹尖 , 完成后单击确疫定按钮, 返回傲管理站点对话框佑。
1/ 74)在管斋理站点对话框中葬单击完成按钮漓 , 站点创建完毕。
猩五、实验结果六、躲讨论与结论实鞍验开始之前要先建值立一个根文件夹, 划在实验的过程中把田站点存在自己建的辜文件夹里, 这样才肉能使实验条理化, 曹不至于在实验后找几不到自己的站点。
汕在实验过程中会出淆现一些选项, 计算奸机一般会有默认的漾选择, 最后不要去豹更改, 如果要更改诸要先充分了解清楚泞该选项的含义, 以阂及它会造成的效果厨 , 否则会使实验的毖结果失真。
实验前蒂先熟悉好操作软件沾是做好该实验的关止键。
实验二:页面梆图像设置一、实验庸目的及要求:周本实例的目的是设垫置页面的背景图像膝 ,并创建鼠标经过挣图像。
二、仪器用驱具 1、生均一驮台多媒体电脑, 组沤建内部局域网, 并掩且接入国际互联网湖。
2、安装 W 鞭 indowsXP 勘操作系统;建立 I 础 IS 服务器环境, 羊支持 ASP。
网页制作实验报告
实验名称:网页设计与制作实验日期:2021年10月15日实验地点:计算机实验室实验目的:1. 掌握网页制作的基本流程和工具使用。
2. 熟悉HTML、CSS和JavaScript等网页制作技术。
3. 提高网页设计的美观性和交互性。
实验内容:本次实验主要分为以下几个部分:一、HTML基础1. 学习HTML的基本标签和属性。
2. 实践网页结构搭建,包括标题、段落、列表、表格等。
3. 实现超链接,添加图片、音频和视频等媒体元素。
二、CSS样式设计1. 学习CSS选择器和样式规则。
2. 实践网页布局设计,包括定位、浮动、盒子模型等。
3. 调整网页字体、颜色、背景等样式,实现美观的视觉效果。
三、JavaScript交互性设计1. 学习JavaScript的基本语法和变量、函数等概念。
2. 实现简单的网页交互效果,如按钮点击事件、表单验证等。
3. 掌握DOM操作,实现动态内容更新和页面跳转。
实验步骤:一、HTML基础1. 打开Dreamweaver软件,创建一个新的HTML文件。
2. 使用HTML标签搭建网页结构,如标题、段落、列表等。
3. 添加图片、音频和视频等媒体元素,并设置相应的属性。
二、CSS样式设计1. 在HTML文件中添加一个内联样式表,编写CSS代码。
2. 设置网页的字体、颜色、背景等样式。
3. 调整网页布局,实现响应式设计。
三、JavaScript交互性设计1. 在HTML文件中添加一个内联JavaScript脚本。
2. 编写JavaScript代码,实现按钮点击事件、表单验证等功能。
3. 使用DOM操作,实现动态内容更新和页面跳转。
实验结果:通过本次实验,我成功制作了一个具有基本功能的网页。
网页包括以下内容:1. 网页标题:实验报告2. 网页内容:实验目的、实验内容、实验步骤、实验结果等。
3. 图片展示:实验过程中的截图。
4. 交互效果:点击按钮可以切换网页背景颜色。
实验总结:1. 通过本次实验,我对网页制作的基本流程和工具有了更深入的了解。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言,达到用该语言可以建立一个简单的网页的目的,同时了解建立站点是做网站必不可少的,要掌握建立站点的方法。
素材准备:准备制作网页所需的文字素材、图像素材。
实验课时:2学时实验内容:1.创建站点;2.新建网页以及保存,重命名;3.输入HTML语言。
实验步骤:1.在E盘中新建本地根文件夹,命名为root,并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
2.定义站点:设置 "站点名称",命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。
3.创建与设置文档的页面属性:新建一个页面,保存名为“HTML基础”的文档。
4.切换代码模式下,输入代码。
5.保存文件,预览文件效果。
实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹,文件夹命名最好为英文;网站中所有的文件最好取名为英文;注意文件的路径;2.所有的图片文件单独放在image文件夹内。
实验思考:除了用HTML语言来做这个网页,还有没有其它的方法?书写实验报告要求:根据最终所作的网页,写出实验报告。
页面效果图:图1-1实验2 初识Dreamweaver实验目的:为了让学生能熟练掌握Dreamweaver的安装与卸载,启动与退出,基本工作环境和设置,对Dreamweaver操作环境有一定了解。
素材准备:准备好从网上下载的安装程序。
实验课时:2学时实验内容:1.安装Dreamweaver:2.Dreamweaver的启动与退出:3.了解工具栏、菜单栏、标题栏等工作环境:4.卸载Dreamweaver实验步骤:1.打开从网上下载的Dreamweaver程序,双击安装。
2.安装完成后输入注册号。
3.启动Dreamweaver,并查看工具栏、菜单栏、标题栏等工作环境。
4.退出Dreamweaver。
5.卸载Dreamweaver实验过程注意事项:1.安装过程完成后,要激活。
实验思考:从“控制面板”里删除程序与从安装到的目录文件里删除有什么区别?书写实验报告要求:写出本次实验报告。
实验3 文本操作实验目的:为了让学生能熟练掌握在Dreamweaver mx中如何输入文本,调整设置文本的格式;如何插入特殊字符、文本列表、水平线、时间、注释的方法。
素材准备:准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时:2学时实验内容:1.输入文本:2.调整文本:3.插入特殊字符:4.插入文本列表:5.插入水平线:6.插入时间:7.插入注释:8.设置文本格式:实验步骤:1.新建一个页面文件;2.输入文本,调整文本的间距,设置文本的格式;通过“属性”面板中的“格式”和“颜色”等参数,将文字设为标题格式,并改变其颜色;3.输入一段不带格式的文字,选择“常用”工具栏上的“文本”单选项目,利用换行按钮对文本进行换行处理,实现分段的效果;4.插入特殊字符、项目符号、水平线、时间、注释等内容;实验过程注意事项:1.在“编辑字体列表”对话框中选择要添加的字体要一个个地添加进去,不能全部选取再添加;2.当输入文本时要插入多个连续的空格,必须要“编辑”菜单下的“首选参数”中设置;3.换行的几种方式:自行换行;按ENTER强行换行;按SHIFT+ENTER换行操作;实验思考:如何插入版权符号?如何插入特殊字符“¥”?书写实验报告要求:根据调试结果,写出实验报告实验4 图像操作实验目的:为了让学生熟练掌握在Dreamweaver mx中插入图像,学会设置图像属性;如何插入鼠标经过图像、插入图像占位符的方法,掌握图文混排的技巧等操作。
素材准备:准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时:2学时实验内容:1.插入图像:2.设置图像属性:3.插入鼠标经过图像:4.插入图像占位符:5.图文混排操作:实验步骤:1.打开上次实训所做的页面文件;2.插入图像,在属性面板对图像的格式进行设置;3.插入鼠标经过图像、图像占位符;4.将图片和文字进行混合排版;5.保存文件,预览文件效果;实验过程注意事项:1.插入的图像必须放在站点文件夹下的image文件夹内;2.设置图片的热点区域可选任意的工具;实验思考:如何设置图片超链接,链接到指定的页面文件?如何设置图片的热点区域?书写实验报告要求:根据调试结果,写出实验报告。
页面效果图:实验5 超级链接实验目的:为了让学生掌握如何利用超级链接来制作页面;了解主页的创作步骤;掌握链接各种方式的制作方法与步骤。
素材准备:准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时:2学时实验内容:1.插入横向导航条2.设置文本链接3.插入左置导航栏4.创建外部超级链接5.创建内部超级链接6.创建E-MAIL链接7.创建锚点链接8.创建下载文件的链接9.创建空链接10.创建脚本链接实验步骤:1.创建一个上方固定左侧嵌套的框架页面;2.在框架的上部分插入相关的图片或网站的LOGO及BANNER;3.左侧插入相关的文字,作为左侧导航栏,右侧框架页面中输入相关文字;4.在右侧框架页面中,分别以3段文本段落标题作为锚点,在页面上部设置锚记链接;5.在左下部设置“友谊链接”到相关的网站,设置“联系我们”的E-MAIL链接;创建“下载”到下载文件的链接;6.保存文件,预览文件效果;7.实训过程注意事项8.导航栏要注意分类,避免重复出现;9.锚点的名称要注意不能重名。
实验思考:锚点在同一个文件中是否可以重名?如何设置链接到指定的网站?书写实验报告要求:根据调试结果,写出实验报告页面效果图:图1-4实验6 表格布局实验目的:为了让学生熟练掌握在Dreamweaver mx中插入表格,学会设置表格的各项属性;并掌握如何在表格中插入文本、插入图像的操作方法和步骤。
素材准备:准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时:2学时实验内容:1.插入表格,并选择表格和单元格:2.设置单元格属性:3.调整表格结构、大小:4.格式化表格:5.表格中插入文本,表格中插入图像:实验步骤:1.新建一个页面,在页面中插入一个表格,并在其中输入相应的文字;2.选择表格利用“格式化表格”命令来对表格格式进行修改,使其更美观;3.根据要求对部分单元格进行拆分或合并操作;4.设置文字的对齐方式,通过对边框、填充和间距进行设置;5.保存文件,预览文件效果;6.实验过程注意事项7.插入表格时要注意:单元格的边距和单元格的间距值的设置;8.表格边框线精细为0像素的特殊用途;9.插入的图像必须放在站点文件夹下的image文件夹内。
实验思考:如何折分和合并单元格?如何设置表格的背景?书写实验报告要求:> 根据调试结果,写出实验报告。
页面效果图:图1-5实验7 多媒体应用实验目的:为了让学生熟练掌握Flash动画、视频、声音等多媒体,能够制作出动感十足的网页,主要掌握如何插入Flash元素、插入背景音乐、插入视频、插入图像查看器等内容。
重点是插入Flash元素,难点是插入图像查看器。
素材准备:准备制作网页所需的Flash元素、图像素材、音乐素材、视频素材等。
实验课时:2学时实验内容:1.插入FLASH动画2.插入FLASH按钮3.插入FLASH文本4.插入FLASH视频5.插入音频、视频6.插入Java Applet7.插入ActiveX控件实验步骤:1.新建一个页面,用表格划分布局。
2.插入Flash导航条,添加背景。
使背景透明化。
3.在第二个表格左侧插入Flash按钮。
4.右侧表格中插入视频。
实验过程注意事项:1.表格布局是重点2.Flash背景透明化需设置参数。
3.插入Flash视频格式是.flv4.插入的FLASH文件必须将其复制到站点文件夹内;5.插入的按钮必须要更改各个按钮的存储名称,否则网页中显示的将是同一个按钮;实验思考:如何使Flash背景透明化?如何设置按钮的背景色与网页中的背景色一致?在Fireworks中制作的图形要在网页中引用应如何操作?书写实验报告要求:根据调试结果,写出实验报告。
页面效果图:图1-6实验8 CSS样式实验目的:为了让学生了解使用CSS样式来美化网页的方法,掌握创建CSS样式的方法和步骤,以及利用CSS滤镜来制作文字特效等操作。
素材准备:准备制作网页所需的文字素材、图像素材、音乐素材、动画素材。
实验课时:2学时实验内容:1.CSS样式的新建:2.CSS样式的编辑与修改:3.CSS样式的应用:4.利用CSS滤镜来特效文字效果:5.制作光晕字、阴影字、遮罩字、动感字实验步骤:1.新建一个页面,在此页面中创建CSS样式将图片应用CSS滤镜。
2.对页面中两部分文字分别使用CSS样式:并对部份文字作超级链接。
3.修改CSS样式:对表格的框线、背景图片、链接样式等进行设置,并重新应用到所指定的部分;4.运用CSS滤镜来制作文字特效:光晕字、阴影字、遮罩字、动感字的制作;5.保存页面,预览效果图;实验过程注意事项:CSS样式应保存到网站站点目录下;CSS样式的名称应注意不能同名。
实验思考:如何利用CSS样式来创建链接文本不显示下划线?如何将CSS样式应用到另外的网站的网页中?书写实验报告要求:根据调试结果,写出实验报告。
页面效果图:图1-7实验9 层的布局实验目的:为了让学生掌握如何利用层来布局网页,掌握层的插入,设置层的各项属性,利用层与行为的应用来创建层动画以及“行为”的添加等操作。
素材准备:准备制作网页所需的文字素材、图像素材、音乐素材。
实验课时:2学时实验内容:1.使用层排版2.设置层文本3.显示隐藏层4.拖动层5.调整层的大小6.层的对齐7.“行为”调用实验步骤:1.新建一个页面,用表格划分布局。
2.在左侧第二个单元格中插入“保存图像”“原始状态”两个提交按钮。
3.左侧小女孩分为三个层,并设置层名字分别为“tou”, “yi”、“ku”显示属性都为可见;4.右侧衣服分为四个层,并设置名字分别为“yi1”, “yi2”、“ku1”, “ku2”显示属性都为可见;5.利用层与行为来制作显示与隐藏层动画:选择“yi1”,添加一个“显示-隐藏层”行为,设置”tou”可见, ”ku”可见;”yi1”可见,其它全部隐藏事件改为onClick;再添加一个双击脱下衣服,还原行为,设置”tou”可见, ”ku”可见;”yi”可见,其它全部隐藏事件改为onDblClick.6.利用同样的道理,设置分别单击,双击”yi2””ku1””ku2”的事件行为。
7.保存文件,预览文件效果。
实验过程注意事项:插入的图像必须放在站点文件夹下的image文件夹内;利用层与行为制作动画首先应选中对应层。