网站设计实训报告.doc

网页设计实训报告题目: 个人网站实训报告姓名: 一.实训意义:网页设计与制作综合实训是教学过程中重要的实践性教学环节 .它是根据专业教学计划的要求，在教师的指导下对学生进行网页制作专业技能的训练，培养学 生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的 转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力 的培养过程.因此加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提 高学生的综合素质有着重要的作用实训目的:1. 通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能(1) 掌握规划网站的内容结构，目录结构，链接结构的方法2) 熟练掌握网页制作软件 FrontPage 2003和的基本操作和使用技能3) 掌握页面的整体控制和头部内容设置的方法4) 熟练掌握网页页面布局的各种方法5) 熟练掌握在网页中输入 ,设置标题和正文文字的方法6) 熟练掌握在网页中插入图象 ,flash 动画和背景音乐的方法7) 熟练建立各种形式的超级链接的方法8) 掌握表单网页制作方法9) 掌握网页特效制作方法10) 掌握网站测试的方法2. 训练和培养学生获取信息和处理信息的能力 ,充分培养和提高学生的动手能力 , 学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图象资料、 flash 动画和网页特效等。

3. 培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题 的能力及其基本工作素质4. 培养学生理论联系实际的工作作风 ,严肃认真的科学态度以及独立工作的能力 , 树立自信心网站是什么？要知道什么是网站首先要弄清楚什么是网页？网页(英文：Web page是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算 机必须是与互联网相连的网页经由网址( URL )来识别与存取，当我们在浏 览器输入网址后， 经过一段复杂而又快速的程序， 网页文件会被传送到你的计算 机，然后再通过浏览器解释网页的内容，再展示到你的眼前是万维网中的一“页”，通常是HTML格式(文件扩展名为.html或.htm)网页通常用图像档来 提供图画 网页是构成网站的基本元素， 是承载各种网站应用的平台 所谓站网 站(Website就是指在网际网路(因特网)上，根据一定的规则，使用 HTML等 工具制作的用於展示特定内容的相关网页的集合是由网页组成的 如果您只有域 名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站构成网页的元素有文字、图像、动画、音乐和程序等文字与图片是构成一 个网页的两个最基本的元素。

我们可以简单的理解为：文字，就是网页的内容， 图片，就是网页的美观三．实验步骤：1、 网站主题我的网站的主旨在于从各个方面全面的介绍我自己，展示自己，包括我的个 人资料、个人相片和爱好另外，网站里还包括我的好友和好友资料，建立一个 展示自我形象的平台 同时，网站里的每一个网页都有统一的风格， 每一个网页 的主题色彩都是浅红色， 用以展示自己性格的效果 最重要的是做出自己的风格， 给浏览者好的欣赏感受2、 网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻同时， 查询相关的书籍、百度和素材光盘等方式收集所需的文字资料 ,图象资料 ,flash 动 画和网页特效等， 用以得来更加具有说服力的页面 要想做好自己的网站， 能够 给浏览者好的欣赏感受， 就要尽量搜集材料， 搜集得材料越多， 以后制作网站就 越容易 精选自己收集的材料， 作为自己制作网页的素材， 这样就可以做好一个 好的网站3、网站规划我的网站共有7个主页面：首页、相册、简历、图书、好友、留言版和音乐 每一个页面用统一 的背景图片，以保证网站统一的页面风格如下 图:我是用自己的姓名和学号命名网站名，用以方便存储和转发。

网站整体色调为浅 红色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避 免给人一种杂乱的感觉版面设计十分灵活，根据各部分内容的不同适当的自由 设计网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体 定位位子的设计也是重要的一个部分， 根据具体内容决定字体风格，相同的风 格多次调用是用css设计一个样式，以保证随时、准确的调用另外，为了网页 布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果4、 网站的制作工具做网页时主要使用的是 FrontPage 2003但我还使用了 Deamweave另外，为了处理网页中的其他元素，还使用了 Photoshop Gif Animator等软件5、 制作网站的网页素材、风格、模板都设计好以后，下一步就是具体的制作网页制作网站时， 首先要做的就是站点的规划，建立一个本地站点“ mysite”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理， 建立统一的文件夹放同一类型的文件，我在制作时建立了“ tupia n”文件夹来存放图片同时，由于“相册”页面中的信息太多，于是建立了一个专门的文件夹存放 相册信息，网页中的css样式文件也应统一管理，做到有条不紊，我设计的网站 的首页如下图：以导航栏为界，上面插入了两个 flash动画，用以给浏览者好的视觉享受。

左下 方有我的个人资料、相片和相关链接插入相关链接的菜单栏，一方面为了布局 合理，弥补左下角的空缺，另一方面给浏览者提供放表的导航， 点击其中任意一个都会连接到其他网页，如点击 google就会连接到下面网页：［Goopte就素］［丰气不皆1◎所有可卫0中文啊页3間聲中文网页肓乐根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条右下边插入的是表格，表格中添加了浅红 色的背景图片用以体现网站的主题色彩，表格还定位了网页特效、系统时间和 flash动画网页特效为上下滚动的字幕，当鼠标停在字幕上时，字幕停止滚动取系统时间代码如下：今天是：主页中还插入了背景音乐，音乐名为“渡情”，这首音乐为midi音乐，占用内存 小，音乐清脆悦耳，十分适合做背景音乐另外，网页特效滚动字幕就是歌词插入过程如下图：为了使页面连接清晰，相册中插入了五个交互式按钮，分别是个人相片、好友相 片、风景相片、明星相片和古董相片，当点击任一按钮都会在右下版块出现对应 浏览图片版块。

交互式按钮的制做：在设计窗口中插入一个五行一列的表格，表 格的间距为0,颜色为黑色，居中对齐，然后插入背景图片，就做成了表格的背 景在表格的一个单元格内点击菜单中的插入， 再点击交互式按钮，修改按钮的相应属性就可以了 简历中包含我的姓名、年龄、职业、理想和兴趣爱好等简历的右下方插入了漂 亮的flash动画，动画为游动的金鱼，为了达到亮眼的效果，加入了透明 flash,既与主网页相同，又有新意插入这个动画是为了使页面的整体布局合理，既突 出网站的主色调，又给人以凝重的感觉，同时增加页面的可看性第四个主页面是图书，如下图：它与第二个主页面采用了相同的背景，相同的布局为了使页面连接清晰，图书 中也插入了五个交互式按钮，分别是唐诗、宋词、元曲、明清传奇和现代小说五 个子页在唐诗子页中的右边网页中所有的诗人名都有超链接，如单击“骆宾王”， 就会出现如下页面：另外，导航右下版块是一段美丽文字欣赏， 用相同的色彩布局，明快而又有紧促 感，而且使整个页面色调平衡单击任一交互式按钮都会在右下版块出现对应网 页版块，如单击元曲按钮，页面结果见下图：第五个主页面是好友，如下图：这个主页面和上面的一样，都插入了交互式按钮，既突出网站的主色调，又给人 以凝重的感觉，目的都是增加网页的可看性。

另外右边的相片下面人名设立了超 链接 第六个主页面是留言版，如下图： 上面使用表单同浏览者进行信息交流，方便浏览者留言 在导航的下面是一个滚动字幕，用层进行定位上面跑马灯效果代码为： vmarquee bgcolor="#FFFFFF" height="23">如果您对我的网站、本人、老师或其 他方面有任何想法，请告知我们欢迎提出宝贵意见和建议 该网页中还插入了时钟，显示当前时间，给浏览者提供方便图片如下： 下面是表单的下部分，用以提交留言到服务器上图的最下面是版权信息， 尽量用简洁的语言和稳重的色彩， 给人留下清新， 简 练的感觉版权信息标名了作者和版权用以提高内容的可读性和使内容充实， 既 突出网站的主色调，又给人以凝重的感觉这样，用户在提交完后，内容就会储存进 wu.txt 中表单的制作过程：首先打开 FronrPage 2003再, 新建网页，单击插入按钮，在插入按钮中选择表单，最后插入 表单的各个属性就可以完成表单的插入了第七个主页面是音乐，如下图：为了达到亮眼的效果，我在导航栏下的表格背景图片上加入了透明 flash,既与主网页相同， 又有新意 上面的红色文字都插入了超链接， 单击费玉清连接到如下 页面： 上面的页面是网络上的页面，链接到网络上的可以节省制作网站的周期。

而且， 还可以使内容更加简洁单击“一剪梅”链接到如下页面： 上面的页面整体美观漂亮，如果出现上面页面就可以倾听动人的音乐了最后， 还要制作各个页面的链接， 把整个网页链接起来， 形成一个统一的整体， 方便浏 览者进行各个页面间的跳转6、上传测试网站网页制作完毕以后， 要进行反复的测试， 保存后在 IE 浏览器上反复运行自己 的网站，用以发现设计中的缺陷并及时改正四．设计特色我觉得我的网页设计的最大特点就是色彩淡雅， 布局协调， 结构清晰 观之， 给人以清丽，纯朴的感觉另外，设计过程中使用了大量的网页特效，如：跑马 灯效果、上下滚动字幕和时钟等五．心得体会第一：我非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到 了很多有价值的东西 我独立的完成了网站设计的全过程， 把设计中散乱的网页 链接成框架体系， 使平时学到的知识点有了很高的提高， 并且合理的在试验中进 行了实践 第二：在这次实验的过程中， 我搜集了大量的素材和网页设计的技术 技巧方面的书， 扩大了知识面， 给我在以后的设计过程中能博采众长， 制作出好 的网页打下了基础 第三：我现在已经掌握文档排版标记的使用熟练使用及其属 性设置、特殊符号；第四：我现在已经熟练使用超级链接， 合理使用列表； 第五： 我现在已经掌握图片标记及相关属性的使用、 了解表格标记制作表格的方法。

最 后，我感受最深的是：要想做好一个网站，素材和技能都十分重要好的素材需 要多方查找资料，可以从图书、网站和新闻上查找好的技能需要不断的实践， 经常锻炼做网页如果拥有好的素材和精湛的技能就可以做出精湛的网页。