网页设计实习报告

1、.实习报告实习性质：网页设计课程实习学生姓名：杨顺专业班级：网络 141 平面方向指导教师：邵亮、杨雪平实习时间： 2015 年 11 月 2 日- 2015 年 11 月 6 日实习地点：1211 机房重庆工程职业技术学院;.学生实习考核表学生姓名专业班级指 导 教 师杨顺网络 141 平面方向邵亮、杨雪平实习时间2015 年 11 月 2 日- 2015 年 11 月 6 日实习地点1211 机房实习名称网页设计实训本次实训的目的主要是：检验我们在平常学习中所学知识、将上课所学的理论知识在实践中巩固掌握， 以及进一步熟悉和掌握网页设计与网页制作的基本流程。回顾这次书讯经历，至今我仍感慨颇多

2、，的确，从选题到开始制作，从理论到实践， 5 天实训的日子里，可以说得是苦多于甜，但是可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。通过这次实训使我懂得了理论与实际相结合是很重要的， 只有理论知识是远远不自我总结够的，只有把所学的理论知识与实践相结合起来，从理论中得出结论，才能真正为掌握技术，从而提高自己的实际动手能力和独立思考的能力。在设计的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自设计制作网页，书上也没有现成的可以抄，难免会遇到各种各样的问题，同时在设计的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻， 掌

3、握得不够牢固， 设计感不强，图画得也不够精致，但是经过实训后，对网页设计这方面的有很大的收获，以后的学习中，我会更加的认真、努力。指导教师意见实习单位意见并盖章（院内实习由系签署）考核等级;.目 录1 实习目的22 实习概况22.1 实习要求22.2 实习时间22.3 实习环境22.4 开发环境23 实习内容33.1 制作设计项目分析错误 !未定义书签。3.2 制作设计项目记录33.3 整个学期的四次作业.94.实习总结16;.1 实习目的网页设计与制作 项目实习是教学中的一个重要教学环节， 是学生学习过程中不可缺少的实际操作技能训练， 也是对课程学习效果的检验。 通过本课程设计的实习，进一步

4、提高学生对网页设计以及 ps 软件的操作能力，学生在这实训期间应对课程设计抱以负责的态度， 认真做好设计与制作， 拓展想象空间， 努力创作出富有个性的设计作品。2 实习概况2.1 实习要求1. 利用 Photoshop 提供的各种工具，在学习网页制作技术过程中设计出符合要求的布局，掌握通道和蒙版的应用、色彩和色调的调整。2. 利用 Axure RP 软件画出大致的草图，进行网页的布局，排版。3. 软件准备： Photoshop、Axure RP。2.2 实习时间2015 年 11 月 2 日至 2015 年 11 月 6 日2.3 实习环境重庆工程职业技术学院1211 机房2.4 开发环境1.

5、 操作系统 (Windows7)2. Photoshop、 Axure RP 绘图工具;.3 实习内容重庆工程职业技术学院“第十五届学生运动会”网站设计3.1制作设计项目分析要求：（ 1）网站内容设计与素材收集：根据指定的网站设计主题（“第十五届学生运动会”），设计网站策划案。包括风格设定、颜色设计、栏目设计、功能设计、内容设计等。并使用原型设计软件制作低保真原型。收集整理设计素材，包括文字、图片、图标等基本元素。（ 2）设计与绘制网站首页效果图：根据网站策划案和低保真原型，使用PhotoShop设计与绘制网站首页效果图。3.2制作设计项目记录3.2.1设计思路（1）怎么设计的？ 首先确定此次

6、网站的主题（重庆工程职业技术学院“第十五届学生运动会”网站） ，然后在头脑里构思，在首页上要放哪些内容，用笔在白纸上画出大致草图，然后用原型设计软件（Axure RP）设计制作出该网页的低保真原型。（2）怎么分析的？a. 布局设计：整体按照上中下的布局结构，首页、内容、底部。内容首先是用的一屏大图来吸引大家的注意力，然后接着是运动会的通知公告、新闻和视频专区居于整个页面的正中，（在网页里显示出来就是在第一屏的下部分位置），其中的小地方也有细节设计。b. 字体设计：整个页面只有主题中用了“方正舒体”字体，并且做了一些小设计，白色字体外加了黑色投影、外发光和半透明的暗红色描边；其余字体均为微软雅黑

7、字体。c. 内容搭配：运用了文字、图片、图文搭配的方式。d. 颜色搭配：在网页设计当中， “色彩”永远是最重要的一个环节，红色，;.吸引人的眼线， 也让人感觉有活力、 有激情，所以，我的导航栏用的是红色，主图上面也是鲜艳的红色。主色调是白色，辅助色运用了灰色，过渡色运用了灰白色，鲜红色、暗红色、橙红色为亮点色，字体主要用了黑色和灰色。（3）主要收集了哪些材料，看了哪些网站：1. 第一届青年运动会 2. 第十三届运动会网站3. 新浪运动网站 4. 第六届东亚运动会5. 天津东亚运动会 6. 第二十一届山东省运动会7. 中国体操网8.奥林匹克运动9. 全国电子竞技运动会 10. 第三届亚洲沙滩运动

8、11.湖南省第十一届大学生运动会12.长沙趣味运动会13.河南省第十七届大学生运动会14.湖北省第十四届运动会15.长沙第六届亚洲冬季运动会16.昆明市第五届运动会17.福州趣味运动会18.2008北京奥运会19.【天猫魔盒】双 11页面电子商务商城20.美丽星辰网站设计21.虾米音乐 H5 专题页面设计合辑22.运动蓝牙耳机设计23.中国体操网 _体操运动管理中心官方网站24.哇噻网 全球优质设计师纯手工制作产品购物网站25.爆米兔 -H5 微信移动营销创意平台26. 重庆工程职业技术学院官方门户网站 - 国家示范性高等职业院校27. 中国运动网28.中国定向运动协会29中国健身网30.运动

9、健身网3.2.2设计运动会网站低保真图首先，我在实习的第一天，先按照实习的主题（重庆工程职业技术学院“第十五届学生运动会 ”），使用原型设计软件（ Axure RP）设计制作出该网页的低保真原型。我是设计的屏幕自适应网页，分为上中下三个部分：首页导航栏、中间内容、底部；整个网页宽 1280px，高 2220px。;.图 3-1 运动会网页框架设计效果图3.2.3布局设计：整体按照上中下的布局结构，首页、内容、底部。内容首先是用的一屏大图来吸引大家的注意力，然后接着是运动会的通知公告、新闻和视频专区居于整个页面的正中， （在网页里显示出来就是在第一屏的下部分位置），其中的小地方也有细节设计。(1

10、) 首页导航栏设计的很简单， LOGO和主要内容，红底白字。;.图 3-2 首页导航栏设计效果图(2) 大图上有本次网页设计的主题，整个页面只有主题中用了“方正舒体”字体，并且做了一些小设计， 白色字体外加了黑色投影、 外发光和半透明的暗红色描边；为了突出主题将大图做了模糊处理， 由于要让整个页面的颜色搭配， 就没有用其他的颜色，只在主题的周围用红色描边。图 3-3 主题部分设计效果图（3） 此处内容从整体来看，是处在最佳视觉领域，中上部分位置，图中的通知公告和新闻， 鼠标点击二者任何一个字体变红色， 并且字的下面出现一个小红三角形图标指向下面的内容。视频专区部分，也是让人一目了然。图 3-4

11、 内容部分设计效果图（4）此处仍然为内容部分，可以从不同视角来看，可以看成左右结构，也可;.以看成上下结构，其中也有文字、图片、图文混合解释的部分，适当的留白，适当的配色，主导色、辅助色、过渡色、亮色结合起来有些地方可以的不规整，看起来不会那么死板。效果如下图3-5 所示：图 3-5 内容部分设计效果图（5）底部设计，就简单的填充了灰色。与上文的灰白色衔接，整体看来不会感觉颜色很跳，让人能够适应颜色的过渡。图 3-6 底部设计效果图（6）此次网页设计的整体效果图，如下图 3-7 所示：;.图 3-7 运动会网页设计效果图3.2.3. 主体部分的细节在于 ：;.在网页的设计与制作过程中， 首先要

12、考虑屏幕的自适应性情况，然后考虑内容的排版，才开始设计要放上去的是哪些东西。然后在设计的过程中， 最重要的是要注意页面里的细节问题：1.字体要协调统一。2.字号大小要一致。3.页面里的小图标或者自己画的小图标，要小巧精致。4.要注意整个版面的配色要协调。5.注意整个版面的走向，不要头轻脚重。6.当整个页面已经基本完成后，再看看其内容和版面设计看起来是不是大方美观，否则，再做调整。3.3整个学期的四次作业1重庆能源职业技术学院网页图，主体颜色为绿色，并且用了白色作为辅助色、灰色为过渡色，高 1885px，宽 1550px，效果如 图 3-3-1 所示：图 3-3-1能源职业技术学院网页设计效果图

13、;.2工作室网页图：分别分为四个页面，主要是采用黑色为背景，首页图、联系人、关于我们、产品介绍四个页面。每页都有工作室的 LOGO，工作室网页，简单大方，主要是细节部分和写代码阶段做出来的交互效果。（1）工作室首页设计图：黑色为背景，蓝色、白色、橙色，不规整的图片切割和图片组合，长 768px,宽 1440px，还有细节设计处设计的交互效果，如：鼠标点击上导航栏时， 颜色由亮橙色变为稍微更暗的橙色并且字体加粗， 字体下面的橙色线条由左边快速划到中间， LOGO 设计是由蓝色、 灰白色和橙黄色设计而成。效果如图 3-3-2 所示：图 3-3-2 工作室首页设计效果（2）联系我们：由于首页的背景是

14、黑色，所以子页面也是按照首页来，顶部和底部用的都是黑色，中间用的是亮灰色，这样可以稍微突出一下中间的内容，中间内容的设计也是极其简单的，右边是主题，然后根据一条线条的引导，右边是关于我们的联系方式和地址。效果如图 3-3-3 所示：;.图 3-3-3 工作室子页设计效果图（3）关于我们：主要是我们工作室的成员介绍及他们的个人简历及各方面的联系资料，鼠标点击翻阅的是一些个人照和成员的集体照。效果如图3-3-4所示：图 3-3-4 工作室子页设计效果图;.（4）产品介绍：介绍我们工作室的主要制作的东西，主要研究的方向，和一些精品内容，简单大方，背景同样为黑灰色。效果如图3-3-5 所示：图 3-3

15、-5工作室子页设计效果图3个人网站：自定义一个主题 （我的是 “爱美食 ”），然后确定内容版式， 找素材，开始画图、排版。整个页面长 3600px，宽 1920px，屏幕自适应性，白色为背景，用了许多美食的图片，首先第一页就是一个整版的大图，然后有很多小图标，配合在整个页面中，添加了一些小细节，比如导航栏处鼠标点击上去，那一个块变成蓝色，并且会有一个蓝色的小三角形指向下面，其中有几块灰色，给整个版面醒目一点的感觉，黑白灰搭配。整个版面的图片和文字搭配的内容，有大有小，有规整和不规矩的搭配，整个页面看起来让人视觉有波动，有亮点。内容图与文字也搭配得比较合适。效果如图3-3-6 所示：;.4. 手

16、机网站：长3600px ，宽940px ，整个页面是以白色为背景，为了突出字体，又有橙色和粉红色，与橙色LOGO相呼应。;.页面左边以一条橙色线条贯穿整个页面，效果如图3-3-7、 3-3-8 所示：图 3-3-7;.图 3-3-8;.4.实习总结通过本次的实训， 在老师的指导下， 我不仅在知识上有了很大的提升而且在心得上也是收获颇多。本次实训的目的主要是检验我们在平常学习中所学知识、 将上课所学的理论知识在实践中巩固掌握， 以及进一步熟悉和掌握网页设计与网页制作的基本流程。回顾这次实训经历，至今我仍感慨颇多，的确，从构思到开始制作，从理论到实践，5 天实训的日子里，可以说得是苦多于甜， 但是

17、可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识， 而且学到了很多在书本上所没有学到过的知识。通过这次实训使我懂得了理论与实际相结合是很重要的， 只有理论知识是远远不够的，只有把所学的理论知识与实践相结合起来，从理论中得出结论，才能真正为掌握技术， 从而提高自己的实际动手能力和独立思考的能力。 在设计的过程中遇到问题， 可以说得是困难重重， 这毕竟是第一次独自制作网页， 书上也没有现成的可以抄， 难免会遇到各种各样的问题， 同时在设计的过程中发现了自己的不足之处， 对以前所学过的知识理解得不够深刻， 掌握得不够牢固， 比如说，对 PS 软件的使用就不够熟悉，导致在做的过程中，浪费了很多时间，通过这次网页设计与制作实训， 一定把以前所学过的知识重新温故。 此次实训中我发现了在网页设计与制作的过程中存在许多的细节问题， 也从中学到了很多以前不曾注意的细节知识。关键是从自己单独制作网页的过程中， 培养了自己主动学习、 敢干动手与自己发现问题、解决问题的能力， 这为以后进一步的学习网页制作与网站开发打下了一个良好的基础。明白在网页设计中布局、版式、色彩搭配、整体都很重要，还要重点培养