网页设计实习报告.doc

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

1、网页设计实习报告网页设计实习报告 篇一： 网页制作实训报告 网页制作课程实训 说 明 书 系 （部）： 班 级： 姓 名： 指导教师： 网页制作实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为圣诞节，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美

2、观，分析如何使用框架和利用Dreameaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。 摘要 2 第一章 概述3 一、主题介绍4 二、制作目的及其方法4 三、网站规划及其实现过程4 1、系统结构图5 第二章 网站制作的步骤 5 一、主页的制作5 1、主页表格的布局及其图片的插入5 2、主页文字的输入及其最终效果图6 3、导航条的设计及代码6 二、分页的制作7 1、圣诞起源表格布局及其效果7 2、圣诞雪景代码显示及其最终效果8 3、插入滚动图片的代码及

3、其效果图9 4、圣诞促销层的插入及其效果图9 三、背景音乐、Flash图片和视频的插入10 四、框架排版和时间轴的运用 1 1、12 五、鼠标特效代码的插入 1 3、14 第三章 心得及体会 15 一、在做超链接时出现的问题及解决方法15 二、网页制作的意义及实训总结15 参考文献16 一、 概 述 （一）、主题介绍 大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望

4、所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在201X年里有好运气、学习成绩更优，每个人的生活都很精彩。 （二）、制作目的及其方法 主要目的是掌握网页设计与制作流程并熟练运用Dreameaver、Firerk、Flash、Phtshp等相关辅助软件。 1、应用远程站点管理的知识和技能； 2. 应用本地站点管理的知识和技能； 3. 应用网页页面设计的知识和技能； 4. 应用网页制作的知识和技能； 5. 培养以上知识和技能的综合应用能力。 主要方法是通过使用Dreameaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴

5、等相关素材进行操作。 （三）、网站规划及其实现过程 我们通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网站页面我们选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有： 首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，我们选择页面设计宽950像素，能够在各类型显示器下很好的呈现。前期的策划完毕，现在我们开始勾画出了网站设计草图，最后开始实施网站页面设计工工作，页面设计主要运用Dreamever制作，图片设计选择Firereks和phtshp制作。 1、系统结构图 第二章 网站制作的步骤 一、 主页的制作 1、 主页表格

6、的布局及其图片的插入 篇二： 网站建设实习报告 网站建设实习报告 学 院： 信息技术学院 专 业： 计算机网络技术 姓 名： 第二小组 班 级： 指导教师： 张媛、张萍、付峰 小组成员： 马 10高职网络 （1）班 瑞 李 毅、彭旺景、陈 豪 仵江波、马红成、胡 凯威 目录 目录 . 1 摘要 . 2 概述 . 3 第一章 项目需求分析 . 4 1.1需求分析 . 4 1.2实训目的 . 4 1.3 所需软件 . 5 第二章 网站设计 . 0 2.1 网站主题 . 0 2.2 网站材料 . 0 2.3 网站的制作工具 . 0 2.4 制作网站的网页 . 0 2.5 上传测试网站 . 1 第三章

7、 网页设计 . 2 3.1 首页的设计与制作 . 2 3.2 资料的搜集 . 2 3.3 建立模板和库 . 2 3.4各个子网页的建立 . 2 3.5实现网页间的链接 . 3 3.6实现动静态网页的结合 . 4 第四章 Linux操作系统 . 0 第五章 后台管理 . 2 5.1 登陆页面的设计 . 2 5.2 新闻发布系统 . 3 第六章 实训过程 . 5 6.1 收集网站建设的资料和信息 . 5 6.2 确定每个页面的布局 . 5 6.3 先规划好首页要表达的内容 . 5 6.4 将其余页面分发给特定的几人 . 5 6.5 超链接 . 5 6.6 整理 . 6 6.7 美工 . 6 6.8

8、 前后台 . 6 6.9 功能实现 . 6 总结 . 7 网络发展到今天，建立网站已经成为一个很普遍的问题了，对于一个企业来说，建设好自己的网站可以抢占新世纪发展的战略要点。建立新的企业形象，直接开拓国际市场，开展24小时网上营销及高效廉价的定向宣传；与客户建立最直接的交流机制，缩短推出新产品和打开新市场的周期，与富有吸引力的客户群发展客户关系网；与自己的销售人员保持联系，进一步面向本地市场。 出色的网站吸引人的地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的

9、魅力所在，因此应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。 整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样： 企业网站的宗旨就是对外宣传企业形象，发布企业最新的企业产品，其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务，这就是企业网站的建设方向；个人网站的宗旨就是宣传自己，提供一个自身和外界交流的场所；由此可见，网站的设计方向是依据网站的客户、服务群体等多方面来确定的。 本站是一个用Dreameaver、Flash、PHP、SQL server201X设计编写的美食网站，主要包括6个模块： 首页，菜谱，厨房，食材，饮食健康

10、，饮食资讯等。通过本网站系统能提供各种与美食相关的信息以及各种美食信息的交流。与其他企业网站一样，也应通过Internet来对外宣传网站 建立以Dreameaver，Flash等技术编写的前台表现模块，为用户提供方便快捷的信息服务与交流。随着网络技术的迅猛发展，互联网的快速发展使越来越多的人选择从互联网上获取信息，因此，互联网逐渐成为一个宽广的信息发布平台和获取信息的平台。本网站系统就要有用户注册和新闻发布两大动态功能。通过以PHP编写，以SQL 201X作为后台数据库的网站后台管理系统，制作了一个简单的美食网站系统，实现了美食网站用户登陆、注册以及新闻发布等功能。 第一章 项目需求分析 1.

11、1需求分析 互联网丰富多彩，这些信息大多通过网页与用户进行交互。网页的实现形式多种多样，无论是短小精悍的个人主页，还是结构清晰、丰富的大型网站，网站的需求分析和规划设计都要放在第一步，因为它直接关系到网站的功能是否完善，质量是否能够达到保证。 1.2实训目的 网站的建设不仅仅是制作主页的问题，还需要考虑网站的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计、数据库技术等等。任何网站在建设之前就必须明确方向、用途和服务群体等一系列的问题，写出详尽的建站计划，可以说这是网站建设的根源和核心所在。作为一个美食网站，我们的服务群体及访问者都定位在爱好和热爱美食的大众，为为大家服务就是我们

12、这个网站的目的和方向。从整个页面上可以看出，我们的这个整个网站涉及所有热爱美食的人。整个网站的结构和内容都是在开始设计之前就已经经过详细的计划的。其实任何网站都一样，企业网站的宗旨就是对外宣传企业形象，发布企业最新的企业产品，其服务群体就是为对其产品感兴趣的客户或者正在使用企业产品的用户服务，这就是企业网站的建设方向；个人网站的宗旨就是宣传自己，提供一个自身和外界交流的场所；由此可见，网站的设计方向是依据网站的客户、服务群体等多方面来确定的。 通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能。 训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、

13、素材光盘等方式收集所需的文字资料、图象资料、flash动画和等。 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。 培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。 篇三： 网页设计实践报告 中南大学 本科生课程设计(实践)设计报告 (大学计算机基础) 题 目 学生姓名 指导教师 学 院 专业班级 学生学号 栀子花开 xxx xxx xxx学院 xx工程xxx班 xxx 计算机基础教学实验中心 xx年 xx 月 xx 日 目录 一、 任务内容.3 二、 设计的步骤.3 三、 采取的方法与手段.5 四、 遇到的问题与解决

14、的办法.6 五、总结.7 一、任务内容 原计划打算以“植物”为主题，在设计过程中发现范围过于宽泛，无法完成主题的设计。因自己十分喜爱栀子花且有所种植经历，经考虑后重新确定了以“栀子花”为主题的网页设计内容。主要分为 一、栀子花的文化， 二、栀子花的种类和生长特性以及 三、我的栀子花三个模块。 其中，模块一使用幻灯片进行演示，主要分为关于栀子花的诗句、栀子花的传说以及栀子花的蕴涵三个部分。模块二采用网页模板进行展示，主要介绍了大叶栀子和雀舌栀子两种栀子。模块三主要展示了自己拍摄的栀子花图片。希望通过我的展示，让他人对栀子花有所了解。 二、设计步骤 一、构思 首先，对栀子花的种类进行简单的介绍；其

15、次，对栀子花的文化内涵进行简要描述；最后，展示自己种植的栀子花成果。因此，此次作业共由三部分网页【 一、主页、 二、栀子花的种类和生长特性、以及 三、自己种植的栀子花的图片三个模块。】和一组幻灯片【栀子花的文化】构成。其中模块二【栀子花的种类和生长特性】采用网页模版组成，主要介绍了两类栀子花大叶栀子和雀舌栀子，更加便于了解。 二、取材 主要从网络上获取所需的图片、音乐等关于栀子花的素材，其中部分照片从个人相册中获取。 三、设计 （一）网页设计 模块 一、栀子花的文化以及模块 三、我的栀子花采用网页设计。 在首页添加表格，在表格内增添标题栏以及字幕，增添了图片、背景图片、背景音乐、文字、艺术字对

16、首页进行丰富和充实。在部分文字以及图片上增加超链接，与三个模块进行连接，便于翻阅。 在模块二中采用网页模板进行展示，主要介绍了大叶栀子和雀舌栀子两种栀子。在模板内采用表格对网页进行划分，对栀子花进行概述和分类描述。插入图片，便于直观的了解各个种类的栀子花。其中，各个种类的栀子花展示位于网页模板的右方，在左方进行总说，并通过超链接与栀子花的分类说明建立联系。 在模块三中，通过绘制表格对网页进行大小不同的划分，插入栀子花的图片拼接成整个网页。 （二）幻灯片设计 此组幻灯片主要用来介绍栀子花的文化。在幻灯片上主要增添了背景图片、背景音乐以及大量的文字说明，未对幻灯片进行大量的美化和修饰，主要目的是为

17、了让他人关注了解栀子花的丰富的内涵和文化。 （三）flash设计 此次flash设计主要用于美化模块二中对大叶栀子以及雀舌栀子的介绍过程。 四、美化 （一）添加背景音乐 在主页以及各个模块中均插入了背景音乐。 （二）设计网页过渡 （三）添加超链接 三、采用的方法与手段 （一）使用Frntpage制作网页 单击新建网页可选择新建空白网页或其他网页模版。 单击表格，选定绘制表格或布局表格或单元格即可绘制单元格。 选定单元格，单击鼠标右键选定背景即可插入背景图片。 选定网页，单击鼠标右键，选定网页属性，浏览格式即可添加网页背景。 选定单元格，即可输入文字。 选定插入，选择插入图片或艺术字即可插入图片

18、或艺术字。 选定插入，选择交互式按钮，即可插入字幕。 选定格式，选择网页过渡，即可设计网页过渡效果。 （二）使用Perpint制作幻灯片 单击鼠标右键，选定背景，选定其他填充效果，浏览选定图片即可添加背景图片。 单击插入，选择图片，即可添加图片或者艺术字。 选定文字，单击鼠标右键，选择自定义动画即可添加自定义动画。 选定幻灯片，单击鼠标右键，选择自定义动画即可添加自定义动画。 选定艺术字，单击鼠标右键，选择自定义动画即可添加自定义动画。、 （三）使用Flash制作动画 单击插入新建元件，即可进行元件的编辑。 单击15帧或30帧，单击鼠标右键，选择插入空白关键帧。 单击第一帧或第15帧，选择补间

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

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

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

22、在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。同时，查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图象资料,flash动画和等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。 3、网站规划 我的网站共有5个主页面： 首页、相册、简历、图书、好友、留言版和音乐。每一个页面用统一的背景图片，以保证网站统一的页面风格。如下图 ： 我是用自己的姓名和学号命名网站名，用以方便存储和转发。网站整体色调为浅红色，然后点缀其他不同的颜

23、色相配，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果。 4、网站的制作工具 做网页时主要使用的是FrntPage 201X，但我还使用了Deameaver。另外，为了处理网页中的其他元素，还使用了Phtshp、Gif Animatr等软件。 5、制作网站

24、的网页 素材、风格、模板都设计好以后，下一步就是具体的制作网页。制作网站时，首先要做的就是站点的规划，建立一个本地站点“mysite”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立 统一的文件夹放同一类型的文件，我在制作时建立了“tupian”文件夹来存放图片。同时，由于“相册”页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css 样式文件也应统一管理，做到有条不紊，我设计的网站的首页如下图： 以导航栏为界，上面插入了两个flash动画，用以给浏览者好的视觉享受。左下方有我的个人资料、相片和相关链接。插入相关链接的菜单栏，一方面为了

25、布局合理，弥补左下角的空缺，另一方面给浏览者提供放表的导航，点击其中任意一个都会连接到其他网页，如点击ggle就会连接到下面网页： 根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添加了浅红色的背景图片。用以体现网站的主题色彩，表格还定位了、系统时间和flash动画。为上下滚动的字幕，当鼠标停在字幕上时，字幕停止滚动。特效代码如下： SCRIPT LANGUAGE= JavaScript !- Begin /scrller idth var sidth=300 /scrller height var sheigh

26、t=100 /scrller s speed; var sspeed=2 var hlemessage= /text: change t yur n hlemessage= div align= center fnt face=Arial size=3 clr= #FF0066 欢迎光临我的个人网站 /DIV div align= center 下面是网页背景音乐歌词 /strng /DIV div align= center strng 渡情 /strng /DIV div align= center 西湖美景三月天勒 /div div align= center 春雨如酒柳如烟勒 /div

27、 div align= center 有缘千里来相会 /div div align= center 无缘对面手难牵 /div div align= center 十年修得同般渡 /div div align= center 百年修得共枕眠 /div div align= center 若是千呀年呀有造化 /div div align= center 白首同心在眼前 /div div align= center 若是千呀年呀有造化 /div div align= center 白首同心在眼前 /div div align= center 啦 /div div align= center 新白娘子

28、传奇片尾曲 /div div align= center 高胜美 渡情 /div div align= center 欢迎光临我的个人网站 /div div align= center /div /fnt functin start if (dcument.all) return if (dcument.getElementById) dcument.getElementById( slider ).style.visibility= sh ns6marquee(dcument.getElementById( slider ) else if(dcument.layers)dcument.sl

29、ider 1.visibility= sh ns4marquee(dcument.slider 1.dcument.slider2) functin ns4marquee(hichlayer) ns4layer=eval(hichlayer) ns4layer.dcument.rite(hlemessage) ns4layer.dcument.clse sizeup=ns4layer.dcument.height ns4layer.tp-=sizeup ns4slide functin ns4slideif (ns4layer.tp =sizeup*(-1)ns4layer.tp-=sspee

30、d setTimeut( ns4slide ,100) elsens4layer.tp=sheight (网页设计实习报告) ns4slidefunctin ns6marquee(hichdiv) ns6div=eval(hichdiv) ns6div.innerHTML=hlemessage ns6div.style.tp=sheight sizeup=sheightns6slide functin ns6slideif (parseInt(ns6div.style.tp) =sizeup*(-1) ns6div.style.tp=parseInt(ns6div.style.tp)-sspeed setTimeut( ns6slide ,100) elsens6div.style.tp=sheight ns6slide/ End - /script span ilayer idth=300 height=100 name= slider1 bgclr= black visibility=hide /p layer name= slider2 qut;sspeed=0; nMuseut= sspee