网页设计实训报告.docx

1、网页设计实训报告安徽中澳科技职业学院网页设计基础综合应用实训紫光电子科技专业:计算 机网络班级:网 络 一 班学号:2010 202112姓名:李 杨 鹏二 11 年6 月20 日第一章开发工具的选用及介绍1.1 开发环境: Dreamweaver8Macromedia Dreamweaver 8是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS的设计的领先支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所

2、需的工具。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统 在首次启动Dreamweaver8时会出现一个“工作区设置”对话框、在对话框左侧是Dreamweaver8的设计视图、右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。在Dreamweave 8 中首先将显示一个起始页、可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”、“从范例创建

3、”3个方便实用的项目,需要保留。1.2 题目背景 目前，网页设计是计算机应用软件开发的常用的、主要的技术之一，尤其面对B/S结构模式的应用软件开发，网页设计更为重要，它是人机交互的主要界面，网页设计的好坏，涉及用户的满意程度，也涉及到系统的运行效率。动态网页设计是现在B/S模式的主流，是HTML、CSS和脚本语言的综合运用第2章 网站总体分析与设计2.1 总体功能分析 这次的实训要实现的是公司网站设计，主要内容有，公司网站的主界面，建立站点，首页的实现，和首页相关的内容，即企业简介、产品展示、网上订单、在线留言、联系我们几个模块。分别来展示企业文化企业的发展历史和购物指导。2.2 确定客户群体

4、本站的客户主要是针需要购买电子产品的客户而开发的，主要对公司文化做了重点讲解，其次对商品进行了分类，有利于客户选购产品，设立了两个沟通平台有利于客户和产商之间的沟通。本站是以购买电子商品的客户为主体的2.3 网站建设的总体规划及设计2.3.1、确定网站建设的目的 为了更好的宣传公司的企业文化，展示企业风采、优点与特色，发布企业的商品信息与优惠政策等信息内容，使消费者增加对企业的了解，增强企业与消费者之间的联系，为企业的发展创造一个良好的平台。同时更为消费者轻松快乐购物提供一个良好有效地途径。2.3.2、整理网站结构图2.3.4、个性化服务对网站所涉及的产品进行了划分，有利于客户查找自己所需的商

5、品信息。提供网上订单服务，为客户节约了时间，产品展示有利于客户对本公司的新产品有所了解等等。2.4 主页设计本网站主页采用静态的方式，即静态的主画面和静态的图片相结合，体现企业文化底蕴的深厚，静态主页方式介企业概况、企业的商品和服务、。等信息。2.5 色彩搭配网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大，以突

6、出主要内容（本网站的色彩设计主要以白色和紫色为主，灰色为辅。）第3章 详细设计3.1 网站设计的流程3.1.1、设项目的主要工作内容(1)、对企业网站的设计进行需求分析。(2)、收集整理需要的信息。(3)、制定网站开发的方案。(4)、对企业网站进行整体构架搭建。其他工作。3.1.2、网站建设方式(1)、软件自动生成利用软件生成站点，具有功能强、效率高、费用低等优点，但存在使用不方便、站点模式有限、不能满足校园的实际情况等缺点。站点建设具体过程如下在Dreamweaver 8.0中建立站点。一、建立BLOG站（1）启动Dreamweaver 8.0、切换到【文件】面板、单击“管理站点”、单击按钮

7、“新建”、如图所示。 （2）在其下接菜单中、选择“站点（S）”、在弹出对话框中、输入站点名字“李杨鹏”、输入站点http地址：http:/localhost/结果如图所示。 （3）单击“下一步”、选择“否、我不想使用服务器技术。（N）”、结果如图所示。 （4）单击“下一步”、选择“在本地进行编辑和测试（我的测试服务器是这台计算机）（E）”、把文件存储指向“d:softwaregrwz”、如图所示。 （5）单击“下一步”、在“你如何连接到远程服务器？”选择“无”、单击按钮“下一步（N）”、如果测试成功、会显示如图一样的对话框。（6）单击“下一步”、再单击“下一步”、单击按钮“完成”、完成站点的建

8、立，如图所示。（7）新建文件，把主页命名为index（先做好主页，用来当模板。所以这里只建立一个文件）3.2 网站框架介绍本网站是一个比较小型的中小企业网站,能够实现网络购物的初步功能。本课题主要运用dreamweaver与photoshop整合的开发技术，实现了企业简介、产品展示、网上订单、在线留言、联系我们等功能。最终以实现既能使用户得到便捷的同时,又提高企业的知名度。3.3 各模块的设计1、主页面：主页主要提供了用户登录的界面和产品的查找功能。（先创建一个文件 ，通过之前画好的设计图，我们在布局视图里面对网页进行布局；布局完成后退出布局视图进入普通视图，插入图片 这些图片分别来自网页查找

9、 一部分来自于photoshop整合和制作 然后通过写代码来创建搜索功能和会员登录功能）设计图如右最终效果图：。2、子页面一（企业简介）：（子页面是在以主页面为模板的基础上对部分页面进行修改得到的，主要是增加对公司的介绍功能）。最终效果图：2、子页面二（产品展示）：（子页面是在以主页面为模板的基础上对部分页面进行修改得到的，主要是增加对公司产品展示功能 就是在原有的模板上对展示页面进行了重新布局并插入了若干图片）最终效果图：3、子页面三（网上订单）：（子页面是在以主页面为模板的基础上对部分页面进行修改得到的，主要是增加客户对公司产品网上订单功能 就是在原有的模板上对展示页面进行了重新布局并通过

10、写代码 创建用户登录功能、订购商品以及客户资料等信息最终效果图：4、子页面四（在线留言）：（子页面是在以主页面为模板的基础上对部分页面进行修改得到的，主要是增加客户对公司的意见和建议功能，促进消费者和商家之间的沟通 就是在原有的模板上对展示页面进行了重新布局并通过写代码 创建用户登录功能和留言功能。最终效果图：5、子页面五（联系我们）：（子页面是在以主页面为模板的基础上对部分页面进行修改得到的，主要是提供售后服务的地点，公布公司各部门的联系方式和地点）最终效果图：3.4 网站的测评网站建成之后，为了避免出现不必要的错误，需要对其进行测评。测评的内容主要有以下几个方面。(1)、链接有效性。静态网

11、页只要确认每一个页面能正常浏览，保证信息不缺失就可以了。(2)、网页语言正确性。检查网页中英文拼写与网页HTML语法书写是否正确。在静态网页中语言都是自动生成的所以语言的正确性一般情况下不会有太大的问题。(3)、网站便用性。检查网站整体结构是否清晰以及网站页面导航是否清晰。测试结果：一切良好.第五章 总结本次实训包括了好多内容,虽然只是建立一个网站,可是里面的内容还是比较多的,主要包括企业网站的主界面，建立站点，首页的实现和首页相关的内容。收获：通过半天的网站设计实训,从中学习了不少网站设计的知识。虽然代码看起来比较繁琐，但是慢慢分析，还是能读懂的。不足：当然这中间也有不足之处，CSS样式不能灵活应用啊，所以我做的网页使用到CSS样式的地方非常少。最终通过半天时间做出了企业网站的设计效果图，当然有待进一步完善。