网页设计课程报告

PAGEPAGE2网页设计课程报告设计主题：青花瓷展览指导老师：张老师所在专业：09信息管理所在班级：二班姓名：林勇设计时间：2010年12月1日目录一、前言……….3二、网站总体分析与设计 41.网站开发环境 42.服务器端 53.客服端 5三、网站的组成及内容 7（一）实现的关键技术 71.iframe框架介绍与应用 72.ajax技术应用 7（二）实现过程及代码实现 8四、总结 11PAGE3第3页共11页一、前言提起青花瓷，人们都知道它是景德镇四大传统名瓷之一。其瓷白中泛青、其花青翠欲滴、是典雅素静的“人间瑰宝”。目前发现最早的青花瓷标本是唐代的,成熟的青花瓷器出现在元代。青花瓷有自己的发展历程：唐代的青花瓷器是处于青花瓷的滥殇期；唐青花经过初创期以后，并没有迅速发展起来，而是走向了衰败。到目前为止，我们能见到的宋青花只有从两处塔基遗址出土的十余片瓷片；成熟的青花瓷出现在元代的景德镇；明清时期是青花瓷器达到鼎盛又走向衰落的时期。青花瓷以其独特的色彩和文化，赢得了世界各国的好评，它不仅代表了中国文化而且以其巨大的商业价值而著称于世！本网页运用通过图片及文字说明，介绍青花瓷的历史发展，让人们更加了解它独特的美感的同时给人于精神文化享受。本网叶制作成功地运用ASP.NET改进了ASP的缺陷，使得更易于创建动态Web内容和复杂而可靠的Web应用程序。从底层来说，ASP.NET在服务器端的机制完全是基于Microsoft.NET框架的，这是ASP.NET区别于ASP最根本的特点。用ASP.NET来开发交互式网页,不仅保持了ASP原有的优点，而且可以使用Web服务器控件和HTML服务器控件更加有效地完成系统开发工作。二、网站总体分析与设计2.1设计思想运用网页设计的相关知识，设计简单又不失优美、朴素又不失庄重的网页。能够短时间里能吸引浏览者眼球，通过图片、文字、视频等内容传递所需信息，让浏览者过目不忘！主题明确有特色，内容丰富，巧妙运用图片，注意背景颜色等。2.2开发工具的选用及介绍Dreamweaver是目前世界上最受欢迎的专业级网页制作编辑工具Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别！2.3网站系统分析本网页运用通过图片及文字说明，介绍青花瓷的发展历史，让人们了解它独特的美感的同时给人于精神文化享受1.网站开发环境●网站开发环境：microsoftvisualstudio2005集成开发环境●网站开发语言：2.0.●网站后台数据库access2000●开发架构：+ajax●开发运行环境windowsxpwindowsvista2.服务器端●操作系统windows2003server●Web服务器iis7●数据库服务器access●浏览器ie6以上版本●网站服务器运行环境：frameworksdkv2.03.客服端●浏览器internetexplorer6.0以上。●分辨率：最佳效果1024*7682.4页面设计主页网站内容设计：主页历史简介特色展览国内展览展览首页海外展览历史简介特色展览国内展览展览首页海外展览主页部分导航包括展览主页、国外展览、国内展览部分、特色展览部分及历史简介。主页和子页布局方面大部分由布局表格来完成，而且主页LOGO部分、TOP部分、导航条等部分由主页生成模板应用到各个子页里。首页:主要分布有导航条栏、青花瓷LOGE图片（国内外）、相关广告。展览首页:主要通过青花瓷图片展示其魅力和风格。海外展览:主要是展览流落于国外的的青花瓷瑰宝。国内展览：主要是展览流行于国内的几款青花瓷。特色展览:主要展示几种特色青花瓷的种类和款式。历史简介:主要介绍青花瓷相关历史和相关文化。网站的CSS样式由内部和外部CSS样式组成。网站主要由文本、图片、flash、特效等元素构成。

三、网站的组成及内容（一）实现的关键技术1.iframe框架介绍与应用页面的结构主要采用iframe框架结构浮动框架的属性如下表:属性描述Scr浮动框架的文本路径Name浮动框架的名称align浮动框架的水平对齐方式width浮动框架的宽度height浮动框架的高度scroling是否显示浮动框架的滚动条frameborder是否显示浮动框架的边框marginwidth浮动框架的边缘宽度marginheigh浮动框架的边缘高度2.ajax技术应用Ajax主要用于局部区域更新更新范围小往返数据量小，没有屏幕滚动用户体验好。在使用ajax时要安装2.0ajaxextension1.0msi安装后将visualstudio2005编辑器将ajax集成进来。如果是visualstudio2005不用安装已经集成进来了。聊天器模块主要用到的控件有scriptmanager,updatepanel,timer.2.2.1Scriptmanager控件的主要属性和方法属性\方法描述AllowcustomerrorWebconfig中自定义错误配置区Asyncpostbackerrormessage异步回发错误自定义提示错误消息Asyncpostbacktimeout异步回发超时限制enablepartialrendering是否支持局部更新scriptmode指定scriptmanager发送到客服端脚本模式scriptpath设置所有脚本根目录onasyncpostbackerror异步回传发生异常的服务端处理函数onresolvescriptreference指定resolvescriptreference事件服务器处理函数2.2.2Updatepanel控件Updatapanel控件的主要属性属性说明Childrenastriggers当updatemode属性为conditional时，updatepanel中的控件异步回发引起updatepanle更新rendermode表示updatepanle最终呈现为html元素updatemode表示updatepanle的更新模式有两个选项always和canditional。Always是不管有没有trigger，其他控件都跟新为updatepanle而condition表示当前updatepanel的trigger为true服务器更新update（）方法引发更新updatepanle.2.2.3Timer控件Timer是一个定时器控件，可以设定特定时间规律触发●主要属性Enabled属性：是否启用true为启用false为不起用Enabledviewstate属性：是否自动保存其状态以下用于往返过程Interval属性：用于定义触发间隔时间单位ms●主事件Tick：当到达间隔触发时间后，自动触发时间。（二）实现过程及代码实现2.1页面设计页面中涉及的主要控件及用途如下表：控件ID属性主要属性Ajax/scriptmanagerScriptmanager1默认Ajax/updatepanelAjax/updatepanelUpdatepanel1updateMode属性值为condition1Dropdownlistddsignddsign设置items属性为控件添加项列表DropdownlistDropdownlistddContent设置items属性为控件添加项列表.2.2代码设计实现主题图片嵌入<imgsrc="image/qinghua.jpg"width="100%"height="230">展览的几个主要导航条<td><ahref="main.htm"target="mainFrame"><imgsrc="image/shouye.jpg"width="218"height="57"border="0"></a></td></tr><tr><td><imgsrc="image/haiwai.jpg"width="218"height="57"></td></tr><tr><td><imgsrc="image/guonei.jpg"width="218"height="57"></td></tr><tr><td><imgsrc="image/teshe.jpg"width="218"height="57"></td></tr><tr><td><imgsrc="image/teshe.jpg"width="218"height="57"></td>.2.3常见开发技术问题总结在这里简单的描述开发时遇到的一些问题，希望能够对读者在以后开发项目有一些帮助。网站显示乱码网站出现乱码与默认编码格式有关，在这里可以在网站的web.config配置文件中，同一网站编码格式代码如下：<?xmlversion="1.0"?encoding=”gb2312”<configuration><system.web><globalizationrequestEncoding=”gb2312”responseEncoding=”gb2312</system.web></configuration>在application_start事件中不能使用response对象。此时在application_start事件并不能响应页面，还没有执行到resquest_begin事件，可以通过使用conexant.response来解决此问题。●Session对象在application_onacquirereaqueststate事件中无效Session对象只有在application_onacquirereaqueststate事件调用以后才能生效●Session对象在global.asax全局文件中生效事件Session对象只有在触发acquirereaqueststate事件之后生效，在触发该事件后就一使用session对象了●获得当前session中保存的所有对象通过遍历所有的session_key来获得代码如下：ArraylistsessionCollection=newarraylist()Foreach(stringstrKeyinsession.Keys){sessionCollection[strKey];}四、总结首先我要做的就是要选择好题目和网站的风格，之后我就分步骤准备在制作网站前所要做好的准备工作。我浏览了各大网站的一些特点，借监这些网站的优秀之处，不好的地方在自己的网站上加以改良，从而使自己的网站更加美观。回顾这次课程设计，至今我仍感慨颇多。的确，从选题到开始制作，从理论到实践，可以说得是苦多于甜，但是可以学到很多很多的的东西，同时不仅可以巩固了以前所学过的知识，而且学到了很多在书本上所没有学到过的知识。在选择好题目和网站的风格之后，我就开始了实训项目的进程，按照实训方案的规定，先是将网站的总体策划以书面的形式展现出来，通过审核之后，在相应的时间段找相关的素材，搜集与主题相关的文字、图像等。再是设计网站的内容结构、目录结构和链接结构，设计首页及其页面的版式结构。然后创建本地网站，建立网站的目录结构。制作首页、二级子页、内容页，创建超级链接。最后就是测试与浏览网页，如果还有什么不理想的地方再改进再预览，如此反复，最后达到最好效果！在此次网站的设计与制作过程中，难免会遇到过各种各样的问题，这毕竟是第一次独自设计网站、制作网站。但值得高兴的是：在设计的过程中发现了自己的不足之处，对以前所学过的