7A版网制作实习报告

1、7A 版优质实用文档网页制作实习报告篇一：网页设计实训报告网页设计报告题目 :个人网站实训报告学号 :0000000000 姓名 :王可元一.实训意义:网页设计与制作综合实训是教学过程中重要的实践性教学环节. 它是根据专业教学计划的要求 ,在教师的指导下对学生进行网页制作专业技能的训练 ,培养学生 综合运用理论知识分析和解决实际问题的能力 ,实现由理论知识向操作技能的转 化 ,是对理论与实践教学效果的检验 ,也是对学生综合分析能力与独立工作能力的 培养过程 .因此加强实践教学环节 ,搞好实训教学 ,对实现本专业的培养目标 ,提高 学生的综合素质有着重要的作用。二.实训目的:1通过综合实训进一步

2、巩固，深化和拓展学生的理论知识与专业技能。(1)掌握规划网站的内容结构，目录结构 ,链接结构的方法。(2)熟练掌握网页制作软件 FrontPage20GG 和的基本操作和使用技能。(3)掌握页面的整体控制和头部内容设置的方法。(4)熟练掌握网页页面布局的各种方法。(5)熟练掌握在网页中输入 ,设置标题和正文文字的方法。(6)熟练掌握在网页中插入图象 ,flash 动画和背景音乐的方法。(7)熟练建立各种形式的超级链接的方法。(8)掌握表单网页制作方法。(9)掌握网页特效制作方法。7A 版优质实用文档7A 版优质实用文档(10)掌握网站测试的方法。2.训练和培养学生获取信息和处理信息的能力 ,充

3、分培养和提高学生的动手能 力,学会通过网站、 书籍、素材光盘等方式收集所需的文字资料、 图象资料、flash 动画和网页特效等。3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题 的能力及其基本工作素质。4.培养学生理论联系实际的工作作风 ,严肃认真的科学态度以及独立工作的能 力,树立自信心。三实验步骤：1 、网站主题我的网站的主旨在于从各个方面全面的介绍我自己，展示自己，包括我的个人 资料、个人相片和爱好。另外，网站里还包括我的好友和好友资料，建立一个展 示自我形象的平台。 同时，网站里的每一个网页都有统一的风格， 每一个网页的 主题色彩都是浅红色，用以展示自己性格的效果

4、。最重要的是做出自己的风格， 给浏览者好的欣赏感受。2、网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。同时，查 询相关的书籍、百度和素材光盘等方式收集所需的文字资料 ,图象资料 ,flash 动 画和网页特效等， 用以得来更加具有说服力的页面。 要想做好自己的网站， 能够 给浏览者好的欣赏感受， 就要尽量搜集材料， 搜集得材料越多， 以后制作网站就 越容易。 精选自己收集的材料， 作为自己制作网页的素材， 这样就可以做好一个 好的网站。3、网站规划我的网站共有 5 个主页面：首页、相册、简历、图书、好友、留言版和音乐。7A 版优质实用文档7A 版优质实用文档每一个页面用统

5、一的背景图片，以保证网站统一的页面风格。如下图我是用自己的姓名和学号命名网站名，用以方便存储和转发。网站整体色调为 浅红色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以 避免给人一种杂乱的感觉。 版面设计十分灵活， 根据各部分内容的不同适当的自 由设计。网页布局主要用框架和表格， 用框架定位内容的大体结构， 再用表格具 体定位。位子的设计也是重要的一个部分， 根据具体内容决定字体风格， 相同的 风格多次调用是用 css 设计一个样式，以保证随时、准确的调用。另外，为了网 页布局的协调，我加入了适当的 flash 透明动态图片，用以达到更好的浏览效果。4、网站的制作工具做网页时

6、主要使用的是 FrontPage20GG ，但我还使用了 Deamweaver 。另 外，为了处理网页中的其他元素，还使用了 Photoshop 、 GifAnimator 等软 件。5、制作网站的网页 素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时， 首先要做的就是站点的规划，建立一个本地站点“ mysite ”，建立的各个页面都 应该放在本地站点中， 在网页制作时所需的各个元素都进行了统一的管理， 建立统一的文件夹放同一类型的文件，我在制作时建立了“ tupian ”文件夹来存放 图片。同时，由于“相册”页面中的信息太多，于是建立了一个专门的文件夹存 放相册信息， 网页

7、中的 css 样式文件也应统一管理， 做到有条不紊， 我设计的网 站的首页如下图：以导航栏为界，上面插入了两个 flash 动画，用以给浏览者好的视觉享受。左 下方有我的个人资料、 相片和相关链接。 插入相关链接的菜单栏， 一方面为了布 局合理， 弥补左下角的空缺， 另一方面给浏览者提供放表的导航， 点击其中任意7A 版优质实用文档7A 版优质实用文档7A 版优质实用文档一个都会连接到其他网页，如点击 google 就会连接到下面网页： 根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900 像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添加了浅 红色的背景图片。

8、 用以体现网站的主题色彩， 表格还定位了网页特效、 系统时间 和 flash 动画。网页特效为上下滚动的字幕，当鼠标停在字幕上时，字幕停止滚 动。特效代码如下：SCRIPTLANGUAGE="JavaScript"!-Begin/scrollerwidthvarswidth=300/scrollerheight varsheight=100/scrollersspeed;varsspeed=2varwholemessage=/teGt:changetoyourown wholemessage=divalign="center"fontface=Arial

9、7A 版优质实用文档/divdivalign="center"十年修得同般渡/divdivalign="center"百年修得共枕眠/divdivalign="center"若是千呀年呀有造化/divdivalign="center"白首同心在眼前/divdivalign="center"若是千呀年呀有造化/divdivalign="center" 白 首 同 心 在 眼 前/divdivalign="center"啦 /divdivalign="

10、;center"新白娘子传奇片尾曲/divdivalign="center"高胜美渡情/divdivalign="center"欢迎光临我的个人网站/divdivalign="center"/div/fontfunctionstart()if(document.all)returnif(document.getElementById)document.getElementById("slider").style.visibility=&q uot;show"ns6marquee(document

11、.getElementById(slider) elseif(document.layers)document.slider1.visibility="show& quot;ns4marquee(document.slider1.document.slider2)size=3color="#FF0066"欢迎光临我的个人网站/DIVdivalign="center"下面是网页背景音乐歌词/strong/DIVdivalign="center"strong渡情/strong/DIVdivalign="center&q

12、uot;西湖 美景 三月天勒/divdivalign="center"春雨如酒柳如烟勒/divdivalign="center"有缘千里来相会/divdivalign="center"无缘对面手难牵4functionns4marquee(whichlayer)ns4layer=eval(whichlayer) ns4layer.document.write(wholemessage) ns4layer.document.close()7A 版优质实用文档7A 版优质实用文档sizeup=ns4layer.document.height

13、 ns4layer.top-=sizeup ns4slide() functionns4slide()if(ns4layer.top=sizeupG(-1)ns4layer.top-=sspe edsetTimeout("ns4slide()",100) elsens4layer.top=sheight ns4slide()functionns6marquee(whichdiv) ns6div=eval(whichdiv)ns6div.innerHTML=wholemessage ns6div.style.top=sheight sizeup=sheightns6slide

14、() functionns6slide()if(parseInt(ns6div.style.top)=sizeupG(-1) ns6div.style.top=parseInt(ns6div.style.top)-sspeed setTimeout("ns6slide()",100) elsens6div.style.top=sheightns6slide()/End- /scriptspanstyle="borderWidth:1;borderColor:red;width:300;height:100;"p ilayerwidth=300height

15、=100name="slider1bgcolor="blackvisibility=hide/playername="slider2onMouseover="sspeed=0;onMous eout="sspeed=2/layer/ilayer7A 版优质实用文档7A 版优质实用文档scriptlanguage="JavaScript"if(document.all)document.writeln(marqueeid="iesliderscrollAmount=2width=300height=130direct

16、ion=downstyle="border:0solidred;background-color:")document.writeln(wholemessage)ieslider.onmouseover=newFunction("ieslider.scrollAmount=0 ")ieslider.onmouseout=newFunction("if(document.readyState=complete)ieslider.scrollAmount=2")document.write(/marquee)if(document.get

17、ElementById&&!document.all)document.write(divstyle="position:relative;overflow:hidden;width:300;height:100;clip:rect(03021020);background-color:black;border:1pGsolidred;onMouseover="sspeed=0;onMouseo ut="sspeed=2")document.write(divid="sliderstyle="position:rela

18、tive;width:&swidth;")document.write(/div/div)/script/span取系统时间代码如下：今是： !-webbotbot="TimestampS-Type="REGENERATEDS-Format="%Y 年%m 月%d 日 -7A 版优质实用文档7A 版优质实用文档主页中还插入了背景音乐，音乐名为“渡情” ，这首音乐为 midi 音乐，占用内 存小，音乐清脆悦耳， 十分适合做背景音乐。 另外，网页特效滚动字幕就是歌词。 插入过程如下图：篇二：网页设计与制作个人实训报告一、实训目的：通过实训，掌握网页制

19、作系列软件 Dreamweaver 、 Fireworks 、 Flash 和 Photoshop 的使用方法。达到全面理解、运用网页制作的知识，并使之得以融 会贯通，在掌握理论的基础上再加以实践，进一步提高、加强设计、制作网站的 综合能力。二、实训过程1.资料的搜集： 收集的资料主要是汽车图片，以及运用做页面局部框架背景的图片。2.熟悉制作软件软件：软件： DreamweaverFireworkPhotoshopCSFlash硬件：PC 机技术： HTML 特效代码项目设计及运行平台： WindowsGP3.构建站点框架：网站结构图如下：4 设计制作页面：网页名称:关于我们 网页的色彩：最主

20、要是以白色背景为主导色，字体的主要色彩是黑色。链接 字体颜色链接前设为蓝灰色，鼠标覆盖后为深红色。网页富有动感，通过 GIF 动画来展示，页面的色彩好与首页和栏目页统一主 要采取白色。页面的大小，在 1024G768 像素下显示效果最佳。7A 版优质实用文档7A 版优质实用文档颜色调配设计，网页的色彩是树立网站形象的关键之一，各版块采用与网站 首页同一色系的颜色，整个版块内部也尽量保持风格一致。网页内容的安排相互链接关系如下概述最上面先放了一个 724G100pG 的 logo.右边放了一个 1024G100 广告如下图：再下来的表格中里放了一个我们用 GIF 的轮换效果展示知名品牌汽车， 效

21、果如 图：右侧是世界 / 中国地图及天气实况查询图。属特效代码。当鼠标覆盖时显示链 接提示， 点击即可查询各地当日天气情况， 帮助驾车人员快速掌握天气情况。 效 果如下：然后再表格里面分别放的是各种小版块。分别记载有 :QQ 联系方式，用户只要单击即可打开 QQ聊天窗口与网站内部人员进行对话。 此外，页面载有客服热线，留言板。也是对用户提供的对话平台，方便用户咨 询更多消息。5 实现网页间的链接：运用的链接方式有：超链接、明链图片链接 , 锚点链接以及多媒体链接 ,用以实 现 QQ 聊天界面的打开，留言提交，以及天气实况的显示。6整体效果图：三、实训心得与体会： 在这次实训之后，我们对网站的设

22、计与制作有了进一步的了解，我对 flash 的 制作，图片的处理，表单的制作， css 样式，模版的应用等技术有了更深层次的 了解，并且能够很好的应用它们。在网站的制作过程中，我碰到了不少的问题， 但是通过老师的耐心指导以及与队友的协商， 这些问题最终都得到了较为完美的7A 版优质实用文档107A 版优质实用文档解决。所以我认为，团队的力量是强大的！而一个人的力量和想法是有限的，唯 有集思广益，才能使得我们的作品更加优秀， 内容更加丰富。 这使得我对静态网 页的制作产生了浓厚的兴趣，我将继续付诸实行，向动态网页的制作发动挑战！ 篇三：网页设计实训报告娄底职业技术学院LOUDIVOCATIONA

23、LANDTECHNICALCOLLEGE网页编程技术实训报告课题：个人网站制作库系部：电子信息工程系班级：16 级软件 1 班学号： GGGGGGGGGGGG姓名：隐非问组员：王子涵、张杰明、林丽雪、吴涛、隐非问指导老师：王锡文完成时间： 2016.12.5 2016.12.25目录一：实训目的 . 3二：实训原理 . 3三：设计过程 . 3 四：设计框图 . 4 五：程序代码 4 六：实训总结 . 9 一.实训目的(1)掌握网页制作软件 DreamweaverCS3 基本操作和使用技能。(2)掌握规划网站的内容结构 ,目录结构 ,链接结构的方法。7A 版优质实用文档7A 版优质实用文档(3)

24、掌握页面的整体控制和头部内容设置的方法。(4)掌握网页页面布局的各种方法。(5)掌握在网页中输入 ,设置标题和正文文字的方法。(6)掌握在网页中插入图像和背景音乐的方法。(7)熟练建立各种形式的超级链接的方法。二.实训原理HTML ( (HyperteGtMarkupLanguage)超级文本标记语言是标准通用标记语言下的一个应用， 也是一种规范， 一种标准， 它通过标记符号来标记要显示 的网页中的各个部分。 网页文件本身是一种文本文件， 通过在文本文件中添加标 记符，可以使用浏览器被网上浏览。三设计过程(1 )网站主题 我做的网站主要是从各个方面介绍我的家乡，包括历史由来，名胜古迹，旅游 圣

25、地等。同时， 网站里的每一个网页都设置了不一样的风格， 用以展示图文最好 的效果。(2 )网站材料 我主要在网站上搜集图片、文字、相关的新闻。同时，请教老师 flash 动画和 网页特效等。(3 )网站规划我的网站共有 7 个页面：主页乡愁；历史由来；蔡伦故馆；八角古亭；人 文风景；耒阳竹海；幸福耒阳。每一个页面应用了不同的背景图片，以保证不同 内容的不同页面风格。(4 )网站的制作工具11做网页时主要使用的是 DeamweaverCS3 。另外，为了处理网页中的其他元7A 版优质实用文档127A 版优质实用文档素，还使用了 Photoshop 软件。（5 ）制作网站的网页素材、风格、模板都设

26、计好以后，下一步就是具体的制作网页。制作网站时， 首先要做的就是站点的规划，建立一个本地站点“乡愁” ，建立的各个页面都应 该放在本地站点中， 在网页制作时所需的各个元素都进行了统一的管理， 统一的 文件夹放同一类型的文件，我在制作时建立了“图片素材”文件夹来存放图片， 做到有条不紊，主页中还插入了背景音乐，音乐名为“高山流水” 。四设计框图五程序代码一主页代码htmlheadmetacharset="utf-8"title 乡愁 /title/headbodyalink="#C70003bgcolor="#FF9999background="

27、 图片素材 / 薰衣草 .jpg""embedsrc=" 纯 音 乐 - 高 山 流 水 - 古 筝 版 纯 音 乐 6.mp3loop="truehidden="true"/embedtablewidth="887height="175align="centerbgcol or="#1868D4"trtdstyle="color:#FF0000"h3 我的家乡 /h3/tdtdwidth="315height="169"h2 湖南最美

28、的城市排名7A 版优质实用文档137A 版优质实用文档/h2/tdtdwidth="560"imgsrc=" 图 片 素 材 /1(2)(2).jpgwidth="563height="91"imgsrc="图片素材 /top.jpgwidth="564height="76"/td/trtablewidth="887align="centerbgcolor="#63DC0Eheight="100"trheight="60"td

29、ahref="lishiyoulai.htmltarget="_blankpalign="center" 历史由来/p/a/tdtdahref="cailun.htmltarget="_blankpalign="center" 蔡伦故馆 /p/a/tdtdahref="bajiaolou.htmltarget="_blankpalign="center" 八角古亭 /p/a/tdtdahref="shuaige.html"target="_blankpalign="center" 人文历史 /p/a/tdtdahref="leiyangcailun.htmltarget="_blank