网页设计实验报告及代码 精品资料

潍坊学院本科毕业论文26

1

2潍坊学院本科毕业论文26

3

4潍坊学院本科毕业论文1．网站的功能现如今,网站开发技术日益发展完善,基于web的网站设计与开发已成为当今企业和学校积极探索和发展的热门技术.带有交互性的动态网站设计也越来越受到人们的重视.出现了各种网站开发工具，如dreamweaver、frontpage、记事本等，同时也需要一些网页美化工具，如photoshop、firework、flash等等。在网站制作中要用到Html语言、javascript、vbscript脚本语言、asp、php、jsp等网站开发技术，xml技术等等，同时还能提供一些组件来丰富页面内容。动态|网站还可与数据库连接，实现交互功能。2．网站设计制作的理论和技术基础2．1网站用户界面设计原则一个设计优秀的用户界面不仅要能够充分发挥软件的功能，而且要让用户使用方便。用户界面设计的一个最基本也是最重要的依据是以用户为中心。因为设计软件是给人使用的，一个软件使用效率的好坏取决于软件本身的设计和人是否能够方便的使用。因此，用户界面的设计必须以用户为中心。2．1．1一般软件的用户界面设计原则(1)一致性一致性体现在用户界面的各个方面，包括界面元素、命令名称、信息表示和操作方式。(2)容错性一个好的用户界面应该在设计时尽量避免可能的出错情况，对于不可避免的错误，应该尽量给用户提供恢复的手段|。对于可能发生灾难性后果的命令/操作，应给出警告并要求用户确认。(3)反馈一个好的用户界面在任何情况下都应该对用户的操作做出反馈(除非用户不需要这种反馈)。反馈使用户感觉到他在操作该软件，了解软件的当前运行状态。2．1．2网站用户界面设计原则网站的用户界面设计，除了要掌握用户界面设计的一般原则外，还要把握其特殊性，因为网站网页的主要功能是向浏览者提供信息，所以网站的界面设计和其它应用软件界面设计存在一定的差异。26

5潍坊学院本科毕业论文下面，根据界面设计的一般原则，结合网站开发平台的实际情况，认为网站开发平台界面设计应遵循以下基本原则，如表2-1所示。表2-1网站开发平台界面设计原|则界面设计的一般原则网站界面的设计原则1一致性统一的风格2容错性、反馈良好的交互3审美性视觉效果4简易性网页洁简5传输速度2．2网站用户界面设计技术2．2．1网站的页面布局网站开发平台的页面布局总体上遵循了网站界面设计原则。根据网站开发平台的整体组织结构，可以分两类页面:欧宝真人·(中国)科技有限公司的页面布局、后台管理页面布局。下面介绍本网站的页面布局：(1)欧宝真人·(中国)科技有限公司的布局整个页面的布局采用了“三型”结构，主色调采用了桔红的暖色色调，文字的大小采用目前网上非常流行的9pt，字体是宋体，对于叙述性的文字，采用黑色，对于链接，活动的采用红色。教育科学与技术系的标志图片logo放在最上面，logo下面是整个网站的导航|栏，主体部分左边放置辅助模块，右边放置主要的新闻和消息，底部是版权。如图2.1所示。26

6潍坊学院本科毕业论文图2.1欧宝真人·(中国)科技有限公司的布局(2)后台管理布局网站的后台主页面是用框架布局比较简单，用表格布局页面，点击每个超连接就会打开一个新的页面，便于管理，如图2.2所示。图2.2后台管理布局2．2．2网站的统一版面设计技术由于网站中的网页要求有统一的风格和良好的视觉效果，即要求网站有统一的版面，由于级联格式页(CSS)技术能集中管理WEB站点的格式元素(字体、背景、文本、2．2．3界面元素定位技术界面元素定位是版面布局的重要内容之一。要使网页的界面布局具备报纸、杂志等漂亮的布局，必须要对页面|的界面元素进行定位。在网站开发平台中采用了以下几种界面元素的定位技术:表格定位、块表示符<

7潍坊学院本科毕业论文Pages)，它是新一代动态网页开发技术，具有开发简单、与浏览器类型无关、功能强大、。2．3．１平台的体系结构和开发环境该系统采用了B/S/D(Browser/server/Dateserver)的体|系结构如图2.3所示。WEB服务器端Server端数据库服务器组件ADO和ODBCIIS5.0和ASP环境服务器脚本代码教师用户学生用户图2.3B/S/D的体系结构三层结构中,第一层(浏览器)为表示层,主要用于完成用户接口的功能;用户在客户端向URL指定的Web服务器提出服务申请,Web服务器通过HTTP协议将用户所需的信息传送给客户端。在这里,客户端的作用只是接收信息并用WWW浏览器显示出来。第二层(为功能层,主要用于完成客户请求的应用功能,Web服务器在收到客户的请求后与第三层中的数据库连接并进行数据处理,而后通过Web将处理结果传回到客户端。第三层(数据库服务器)为数据层,采用|Access网络数据库,主要完成的数据存储、加工和管理功能。网络操作系统、数据库系统和网络编程技术选择(1)操作系统平台:Windowsxp；(2)实现环境:IIS5.0,后台采用面向对象设计的ASP编程技术；(3)数据库：Access。2．3．2HTML语言 HTML的英语意思是：HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行HTML26

8潍坊学院本科毕业论文文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML|文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（是WorldWideWeb的缩写，也可简写WEB、中文叫做万维网)的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。2．3．3脚本语言脚本程序设计在Web程序设计中占有很重要的