网页设计方案实习报告.docx

网页设计方案实习报告.docx

《网页设计方案实习报告.docx》由会员分享，可在线阅读，更多相关《网页设计方案实习报告.docx（11页珍藏版）》请在冰豆网上搜索。

网页设计方案实习报告

网页设计方案实习报告

姓名：

陈伟

班级：

微机0922班

学号：

0900002303

专业：

计算机应用技术

指导教师：

钱民

时间：

2010年12月29日

目录

第一阶段：

规划和准备阶段

（一）需求分析，决定网站的主题，风格；

（二）收集资料，准备素材并进行整理修改；

（三）规划网站的结构和页面版式；

第二个阶段：

网页设计，制作阶段；

（一）网页的模板设计；

（二）设计界面，制作网站中的各个网页；

（三）将各个网页通过超链接进行整合；

第三个阶段：

网站的发布，推广，和维护阶段；

（一）测试，调试与完善网站；

（二）推广和发布网站；

实现过程

第一阶段：

规划和准备阶段

（一）需求分析，决定网站的主题，风格；

1）说明：

在拿到任务书时，我看了一些关于网页设计的案例（如：

云南交通职业技术学院网站），也是想起尝试做我们学校的网站，因为这几年随着我们学校的知名度的提高，许多学生和相关人士不断关注我们的学校；也是自己决定尝试下这个挑战，确定了主题和风格。

2）主题：

做一个我们昆明冶金高等专科学校的小型网站；

3）风格：

色系风格：

所设计页面文字颜色采用深褐色为主，主要为了突出我们学校以冶金为龙头专业的风格；

排版风格：

版面使用模板布局页面，表格布局其次，这种风格容易修改网页中的元素：

在加上文字、图片、动画等，使页面更加深动活泼，动感强烈。

图标设计风格：

学校的图标以学校的校训为特点，以一个向上的图想为标志，突出了我们学校的上进的这样一种深邃的含义。

特效风格：

页面使用了Flash.Javascript.HTML，真强了页面的动感，使浏览者增加了深刻的印象。

架构风格：

每个页面只简单的介绍了学校学院的基本的信息，让读者大体掌握我校的基本情况作铺垫，反正就是突出通俗易懂的这样一个目的。

内容风格：

网站主题、整体实用性、文件关联性、内容切合度，都是用一些简单易懂的词语，就是为了给好的掌握我学校的简单信息。

走向风格：

对于网站我的网站，基于模板可以增加给多的内容，而且修改内容方便。

加入学校最新动态：

安宁校区的信息；

（二）收集资料，准备素材并进行整理修改；

1）收集资料主要来源与我们学校现有的网站里，还有一些图片是来自于网上下载的。

收集部分资料展示：

首页使用的部分文字资料

荣任“全国高职院校心理健康教育工作委员会”主任委员之就职感言

高职发展急需人文：

避免高技能人才带病上岗——以昆明冶专快速发...

《中国青年报》采访夏昌祥校长--如何看待高职院校单独招生

《中国青年报》文章－－昆明冶专自主招生火爆的背后（2010....

杰出创造未来：

昆明冶专形象力建设的启示（2010.2.17）

构建科学的高职发展观创建一流的国家示范校

尽快推进高职创新教育是加速建设创新型国家的迫切需要

对高职院校示范性建设工作的思考（刘秋芳）

大学军事课件B面

大学军事课件A面

团结协作圆满完成新生入学工作,构建和谐校园喜迎十七大胜利召开...

关于优秀学生奖品（购书券）兑换图书相关事宜的通知（2006....

加强学习，提高素质，努力做好学生服务管理工作（2006.7..

加强学习，提高素质，努力做好学生服务管理工作（2006.7..

党委（校长）办公室、组织部（统战部）、纪检监察审计处、学生工作部（处）、财务资产处武装保卫处

图书馆

使用的部分图片

安宁校区规划图（图1）新校区在教学楼（图2）

计息学院运动会（图3）比赛学生（图4）

处理图像、文字处理工具

PS图像处理软件friworks专业网页图像处理软件

Word文字处理软件flash文字动画处理软件

（三）规划网站版式和页面设计

1）网站的网页主要采用主体上、中、下结构，中间部分组要采用左、中、右和左、右结构，符合传统的网站设计风格，也符合目前学以致用的目的。

2）结构设计图展示：

（图五）

头部有lougo的地方

导航

左

中

右

滚动图片

版权声明

版权声明

中间部分为左、右结构的为：

（图六）

这种设计风格符合许多比较大型网站所使用，并且使用的概率非常高，这也是我本次主要使用的一个版式了。

到这里网站的第一个阶段算圆满结束了，现在要进行的就是下一部操作了。

第二个阶段：

网页设计与制作阶段；

第1步：

制作网页模板，在根据模板创建各个页面。

制作流程：

打开Dreamwear8————HTMR文档————插入一行一列的表格高：

100像素，宽；900像素————在表格下方在插入一行一列的表格宽度和第一个表格一样————在插入一个三行一列的表格————在第二个表格中插入一个20行，3列的表格，和合并后两个页面————在合并页面中在插入一个一行一列的表格，————在这个下方插入一个20行6列的表格————处理相应的表格格式————在头部插入一个图片，就是页面的首部————调整图像大小————制作导航栏————用网页设计软件进入相应的内容首页————学校概括————系部风采————专业设置————师资队伍————学生之窗————教学管理————招生就业————校办企业————后勤服务————教学资源————导航设置完成————到了中部份，在右侧的单元格中键入相应的学院名称————名称上方键入学院导航————冶金材料学院————测绘工程学院————电气学院————矿业学院————计算机学院————外语学院————东盟国际学院————建工学院————建材学院————机械工程学院————商学院————物流学院————化工学院————艺术设计学院————环境工程学院————文理学院————职业教育学院————成人教育学院————相关链接————在时两幅连接图片——中国优秀共产党员教育网————全国高职高专创新教育网————中间部分————插入按钮————校园快讯————2010年中国人权事业的房展

————2010年美国的人权记录————中德“3+2”合作办学项目招生简章————机械工程学院搬迁仪式启动————电气学院教学设备搬迁工作结束————实习处组织实践教学专题讲座————学校校徽设计招集工作————教育专题————全国高职院校心理健康教育委员会————避免高技能人才带病上岗————《中国青年报》采访夏昌祥校长————昆明冶专自主招生火爆的背后————昆明冶专形象力建设的启示————创建一流的国家示范校————对高职院校示范性建设工作的思考————安宁新校区的建设跟踪————校园领导在线讲座————在插入图片相应的图片————调整想要的图片————学生工作动态————大学军事课件B面————大学军事课件A面————开展新生入学工作————关于优秀学生奖品（购书券）的通知————加强学习，提高学生素质的讲座————校学生会的工作跟踪————校学生会的开展情况定期调查————党群行政————党委（校长）办公室————组织部（统战部）————纪检监察审计处————学生工作部（处）————财务资产处————武装保卫处——图书馆————在做完这些部分使就要做昆明冶金高等专科学校欢迎你的动态效果————在代码中键入相应的命令即可————在设置下部的导航栏————返回首页————收藏本站——版权声明————关于我们————联系我们————留下建议————版权所有昆明冶金高等专科学校《当前时间：

Wednesday,2010-12-29》————技术支持：

昆明冶金高等专科学校计算机信息学院微机0922班陈伟————设置模板页面背景颜色————版权所有的背景颜色————最后在整体调整页面的布置。

模板保存为网页在把网页另存为模板————最有模板就做好了.

部分代码展示：

首页