企业网站的设计与制作

...wd......wd......wd...企业网站的设计与制作9768摘要： 212436关键字： 226791第一章绪言 34758第二章网站设计分析 4219562.1网站设计概述 4253372.2开发工具的选用及介绍 4107622.2.1Dreamweaver8.0 4286632.2.2PhotoshopCS 5223382.2.3ASP动态网站脚本语言 658542.3关系型数据库的选择 7218852.3.1MicrosoftOfficeAccess简介 7182933.1网站定位 9136953.2系统构思 9305233.3网站栏目简介 1018283第四章详细设计 11112344.1网站制作过程 11327324.1.1logo的制作过程 11159974.1.2banner的制作过程 12222354.1.3主页制作过程(详见图4-3) 13177164.1.4留言板的设计 14305304.2数据库的设计 16162514.3系统实现代码 1727104.3.1滚动文字特效〔这里主要指网站左侧的“公司公告〞〕 17166724.3.2图片切换 1831714.3.3首页鼠标特效代码 1931403完毕语 2110636参考文献 2112778致谢 21摘要：本文就网站的主题内容及网站的制作与设计这两方面进展描述与分析。本网站的主题知识产权服务，整个网站都是以法律性的内容为主的，主要包括了首页、公司简介、法律服务、友情链接、法界动态、法律法规、在线留言、联系我们、网站公告等栏目。在整个设计过程中主要是运用Dreamweaver、ACCESS、ASP等编写的。通过本网站系统，给想了解知识产权的人群提供了一个良好的平台，同时也为有意愿注册公司、注册商标、申请专利，却无从咨询的人提供了一个可以互动解决问题的平台。如今，在网络技术的迅猛开展下，互联网的不断普及，让人们都感受到网络的方便快捷，从而大家都喜欢选择从互联网上获取信息，因此，互联网逐渐成为一个宽广的信息发布平台和获取信息的平台。本网站也需要通过Internet来对外宣传、普及，从而帮助到更多想了解知识产权的人们。本网站主要是以建设Dreamweaver、ACCESS、ASP等技术的动态网站管理系统的前台表现模块，使用了ASP技术的动态网页技术，加上ACCESS作为后台数据库，制作了一个简单的服务性企业网站系统，实现了企业网站的根本功能，例如用户注册登录，留言板的实现等。关键字：企业网站；ASP；知识产权绪言二十世纪进入信息开展高速路，数码化革命给所有领域带来新的改变。随着电脑办公自动化的普及，电子商务应运而生，一切都归功于internet的巨大奉献，互联网的世界里蕴藏无限生机，这里只有想不到的、没有做不到的。由于国际互联网是一个不受时空限制的信息交换系统，所以它是目前最直接、最丰富和最快捷的联系方式，信息沟通的高效率为企业带来了最大的方便。所以在现今社会对于一个企业来说，网站已经是不可缺少的一局部了。现今，知识产权越来越被人们关注，随着就业压力的加重，越来越多的年轻人选择自己创业开公司，大学生也占了一定的比例，由于专业的限定，有些大学生在校根本上接触不到知识产权的知识，当然在社会上的人群也不一定都了解知识产权。同时随着互联网的快速开展和不断普及，网站成了传播信息最有效的平台。所以我制作了一个专门针对知识产权行业的企业网站，给这些人群提供了一个了解和学习知识产权的平台，当然对于一个针对知识产权的服务性企业本身而言，这个网站将会对其自身带来不可估量的效用。社会在开展，人们的思想观念，生活方式也在开展，通过网站这种方式与企业或者他人交流已经趋向普及第二章网站设计分析网站的设计与制作需要用到网页三剑客〔Dreamweaver、fireworks、flash〕，IIS，photoshop等工具。所以首先我们要了解这些工具的功能与用处，然后要能够熟练得掌握这些工具用法，只有你能熟练使用这些工具，你才能在设计过程中尽量防止技术上的问题，提高效率，做到“事半功倍〞。2.1网站设计概述网站首页可以说是网站的门面，大家浏览你的网站首先看到的就是网站首页，所以首页不仅要做得美观，引人浏览，还要有丰富的内容。所以我们在首页就首页聚集了大量的信息，除了最根本的法律法规、法界动态、法律服务这些栏目外，我还将公司的公告用滚动文字的形式展现出来，这样静中有“动〞的效果可以抓住人的眼球，吸引人去点击。每页左下方都有我们的联系方式，这样就不用转到联系我们这张页面都能获取到公司的联系方式了，当然假设想更深入的了解就可以转到联系我们页面。子页面的框架根本上是符合整个网站的整体风格的，banner，导航等都是和首页一样的，不一样的只是正文的内容，这个可以通过模板来实现。出于排除对模板可编辑区域排版的复杂性起见，我这里没有运用模板，而是用另存为的方式实现网页风格“统一化〞的。在网站的各页面制作好后，我在Dreamweaver中与Access数据库建设连接，通过在Dreamweaver的一系列操作实现注册登录的功能，而留言板功能我是通过一张空白的写有后台代码的页面转接过去的，名为handle.asp，用户可以通过“在线留言〞在网站上发表自己的见解或疑问，到达互动的效果。2.2开发工具的选用及介绍2.2.1Dreamweaver8.0Dreamweaver是创立和管理网页的专业化可视编辑器，在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚决Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计〞和“代码〞编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进展实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。3、功能更多的CSS支持——CSS可视化设计、CSS检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS构造。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创立美观实用的网页。8、丰富的媒体支持能力可以方便地参加Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进展动画处理。9、超强的扩展能力Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。2.2.2PhotoshopCSPhotoshopCS是一款图形、图像编辑软件，在网页设计领域被广泛得应用。以下是其10大最新功能：1、改良的文件浏览器使用功能强大文件浏览器的可以快速预览、标注和排序图片；搜索或编辑图像的数据元或关键词；并且可以自动批量共享文件。2、匹配颜色命令可以迅速从一张图片的颜色校正另外一张图像的颜色。3、直方图调色板随时根据对图像的调整更新直方图调色板(HistogramPalette)。4、阴影/加亮区修正使用“阴影/加亮区修正(hadow/Highlightcorrection)〞可以快速调整照片中曝光过渡或欠缺的区域。5、沿路径放置文本可以像在Illustrator中一样把文本沿着路径放置，并且你还可以在Illustrator直接编辑文本。6、支持数码相机的raw模式支持多款数码相机得raw模式，让用户可以得到更真实的图像输入。7、全面支持16位图像可以在主要功能、层、比刷、文字、图形等中准确的编辑、润饰16位的图像。8、LayerComps可以在一个文件中保存不同层的合并效果，以便对各种效果进展快速观察。9、输入Flash文件使用ImageReady可以创立flash矢量文件。10、自定义快捷键用户可以按照自己的习惯定义Photoshop的快捷键。2.2.3ASP动态网站脚本语言ASP是ActiveServerPage的缩写，意为“动态服务器页面〞。ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进展交互，是一种简单、方便的编程工具。ASP的网页文件的格式是.asp，现在常用于各种动态网站中。ASP采用脚本语言VBScript〔Javascript〕作为自己的开发语言。ASP是一种服务器端脚本编写环境，可以用来创立和运行动态网页或Web应用程序。使用ASP可以组合HTML页、VBScript脚本命令和JavaScript脚本命令等，以创立交互的Web页和基于Web的功能强大的应用程序。ASP网页可以包含HTML标记、普通文本、脚本命令以及COM组件等。利用ASP可以向网页中添加交互式内容〔如在线表单〕，也可以创立使用HTML网页作为用户界面的web应用程序。ASP的文件后缀名为.asp，以区别于同样可以包含Script的HTML文件。一个.asp文件是一个文本文件，可以包括以下元素的任意组合：文本〔text〕、HTML标志〔tags〕、Script命令由于脚本程序是在服务器上而不是在客户端运行，传送到浏览器上的Web页是在Web服务器上生成的。所以不必担忧浏览器能否处理脚本：Web服务器已经完成了所有脚本的处理，并将标准的HTML页面传输到浏览器。由于只有脚本的结果返回到浏览器，所以服务器端脚本不易被别人复制。用户看不到创立他们正在浏览的页的脚本命令。2.3关系型数据库的选择2.3.1MicrosoftOfficeAccess简介MicrosoftOfficeAccess是由微软发布的关联式数据库管理系统,是集成在microsoft公司开发的产品更新换代office系统中的集成软件。它之所以被集成到Office中而不是VisualStudio中，是因为它与其它的数据库管理系统〔如VisualFoxPro〕相比更加简单易学，一个普通的计算机用户即可掌握并使用它。而且最重要的一点是Access的功能足够强大，足以应付一般的数据管理及处理需要。Assess能够存取Access/Jet、MicrosoftSQLServer、Oracle，或者任何ODBC兼容数据库内的资料。ODBC〔OpenDatabaseConnectivity开放式数据库互联〕是微软推出的一种工业标准，一种开放的独立于厂商的API应用程序接口，可以跨平台访问各种个人计算机、小型机以及主机系统。ODBC作为一个工业标准，绝大多数数据库厂商、大多数应用软件和工具软件厂商都为自己的产品提供了ODBC接口或提供了ODBC支持，这其中就包括常用的SQLSERVER、ORACAL、INFORMIX等，当然也包括了Access。在ASP中可以通过三种方式访问数据库：1、IDC〔InternetDatabaseConnector〕方式；2、ADO〔ActiveXDataObjects〕方式；3、RDS〔RemoteDataService〕方式。这三种访问方式对数据库的访问都是由InternetInformationServer完成的。通过Web浏览器用协议向IIS〔Internet信息服务器〕发送请求，IIS执行对数据库的访问，并返回一个HTML格式的文档响应。以下是Access的优点：1．存储方式单一Access管理的对象有表、查询、窗体、报表、页、宏和模块，以上对象都存放在后缀为〔.mdb〕的数据库文件种，便于用户的操作和管理。2．面向对象Access是一个面向对象的开发工具，利用面向对象的方式将数据库系统中的各种功能对象化，将数据库管理的各种功能封装在各类对象中。它将一个应用系统当作是由一系列对象组成的，对每个对象它都定义一组方法和属性，以定义该对象的行为和外国，用户还可以按需要给对象扩展方法和属性。通过对象的方法、属性完成数据库的操作和管理，极大地简化了用户的开发工作。同时，这种基于面向对象的开发方式，使得开发应用程序更为简便。3．界面友好、易操作Access是一个可视化工具，是风格与Windows完全一样，用户想要生成对象并应用，只要使用鼠标进展拖放即可，非常直观方便。系统还提供了表生成器、查询生成器、报表设计器以及数据库向导、表向导、查询向导、窗体向导、报表向导等工具，使得操作简便，容易使用和掌握。4．集成环境、处理多种数据信息Access基于Windows操作系统下的集成开发环境，该环境集成了各种向导和生成器工具，极大地提高了开发人员的工作效率，使得建设数据库、创立表、设计用户界面、设计数据查询、报表打印等可以方便有序地进展。5．Access支持ODBC〔开发数据库互连，OpenDataBaseConnectivity〕。利用Access强大的DDE〔动态数据交换〕和OLE〔对象的联接和嵌入〕特性，可以在一个数据表中嵌入位图、声音、Excel表格、Word文档，还可以建设动态的数据库报表和窗体等。Access还可以将程序应用于网络，并与网络上的动态数据相联接。利用数据库访问页对象生成HTML文件，轻松构建Internet/Intranet的应用。第三章方案初选3.1网站定位1．网站主题本网站的主题是知识产权〔包括公司注册、商标注册、专利申请等等的法律知识〕，给想成立公司、注册公司、申请专利、注册商标等的相关人群予帮助。2．网站名称该网站名为“君辉知识产权代理〞，由此可见，这个企业网站以知识产权的相关知识为主，“代理〞也突出了该企业的性质即法律服务行业。一个网站的名字应该要能反映出你想表达的意思，到达一望而知的效果。3．网站的Logo与Banner网站的logo用蓝色水晶球内嵌着“junhui〞标志，既显目又明确得表达了主题。Banner则形象得表达出我制作设计这个网站的用意，“君辉知识产权代理〞几个字居中，用大字体强调显示，让人更醒目，右边小字体“知识产权财富之源〞是与主题相照应的，寓意为知识产权可以创造财富，而我们公司是代理知识产权的，所以要找到财富的源头，就来“君辉知识产权代理〞网，让我帮您用知识产权创造财富。最后以透明flash覆盖在banner上面，即实现了由“静〞到“动〞的效果，也使原本略显单调的banner变得丰富一些。4．标准颜色本网站以蓝白色渐变色为底，以蓝色为主色调，蓝白的相互点缀，给人一种倾心的感觉，蓝色还是天空和海洋的象征，“广阔无垠〞的蓝色也同样象征着我们“知识产权〞给人们带来的财富也“浩瀚无垠〞。5．标准字体正文字体主要用的是标准的宋体。3.2系统构思本网站前台包括首页、公司简介、法律服务、友情链接、法界动态、法律法规、在线留言、联系我们、网站公告等栏目。以下是系统构思的图解〔如图3-1〕首页首页后台管理公司简介法界动态法律法规网站公告在线留言法律服务友情链接联系我们图3-1网站垂直系统图3.3网站栏目简介本网站的栏目有首页、公司简介、法律服务、友情链接、法界动态、法律法规、在线留言、联系我们、网站公告等栏目，下面是对各栏目的简介：首页：我们的banner所要表现的就是希望大家能到我们大学生创业园来一起学习创业知识，交流创业经历。因为这个作品是特别为大学生设计的，所以我们的整个页面都是显示出一种大学生活泼、朝气以及创业的激情。同时首页包含了本站所涉及的主要内容、组成元素、主要话题和网站精华。公司简介：主要介绍公司的历史文化及服务内容。法律服务：简单罗列了公司受理的业务，如公司注册、商标注册、专利申请、电子口岸、版权代理等等。友情链接：这个栏目主要是为了方便用户了解有关商标、专利等知识产权方面的知识而与相关政府部门网站建设的友情链接。法界动态：我们特别收集了国家知识产权网上的最新信息，让大家能及时了解到我国知识产权的最新动态。法律法规：这个栏目主要列举了有关知识产权方面的相关法律及法规，如“中华人民共和国专利法〞等，使用户对专利法等相关法律知识有一定的了解。在线留言：此栏目设立的主要目的是为了提供应想了解知识产权的用户一个互动的平台，用以解决知识产权的相关问题。〔如图3-2〕联系我们：通过这个栏目，可以让用户获得我们的各种联系方式，这样可以更深一步的与其探讨知识产权的问题。网站公告：除了单独设立这个栏目外，我还特意在每张页面的左侧做了一个由下而上的滚动公告栏来吸引大家的眼球，鼠标滑过滚动文字停留，鼠标点击后超链接至“网站公告〞这个栏目，内容主要为公司的最新的动态。〔如图3-2〕图3-2第四章详细设计4.1网站制作过程4.1.1logo的制作过程本网站的Logo是把从网络上找到的一些素材图片，通过用Photoshop进展编辑、修改、组合而完成的。为了突出该企业名称“君辉〞，特意把“junhui〞标志用蓝色水晶球包围，并且“junhui〞中“J〞这个字母用一个龙头的形状代替，自古以来龙在人们的地位都是至高无上的，同时也衬托出“知识产权〞在当今社会的重要地位。在整个以蓝色为主色调的网页中，调剂整体页面的色调，使页面看起来更鲜活，很是醒目，让人一眼就看到这个logo，了解主题。〔如图4-1〕图4-1网站logo4.1.2banner的制作过程首先需要上网收集一些符合你的作品主题、创作思维以及整体风格的网页相关素材，对其进展修改已获得自己所需素材，或可在Photoshop中绘制出自己所需的图片素材。接着翻开Photoshop，在Photoshop里面新建一个文件，调整底图大小，根据网页的总长度，调节banner的长度和宽度〔一般banner不能太宽，不然会显得头重脚轻，当然也不能太窄，都没法让人感觉到有banner存在，所以一定要调整至占整个网页的适合比例。〕设计banner的背景：选用一张蓝色的微带波横的图片为banner背景，将处理好的素材依次放入具体位子，像左边的镜头光晕，右边的发光矩形框等等，按具体需求做具体的改动和修改，这样整个banner的背景就设计好了。具体内容设计：先在banner左边放入logo〔这里为了美观起见，我将logo放大放在了banner最左边，假设放在左上角一块窄小的地方，反而凸显不出“junhui〞这个标志〕，按具体情况惊醒调整修改至适当局部，处理好每一处细节，这样整个静态的banner局部就设计好了。添加动态的flash效果：动态的flash效果要等到整个网页的根本布局都设计好之后，就可以在Photoshop中按Shift+Ctrl+Alt+S存储切片后所有图片，将页面转换成.html格式，然后使用Dreamweaver翻开编辑，在banner的区域参加Flash，将Flash转换为透明flash形式，这样整个banner局部就完成了。〔如图4-2〕图4-2网站banner4.1.3主页制作过程(详见图4-3)首先根据页面要展示内容的多少，在photoshop中新建一个适合的网页宽度和长度的文件〔我设计的时候在宽屏的机子上，所以建的文档较大，约为1280*1405〕。在画布上按自己的想法结合实际内容，用各图形工具在画布上画上整个网页根本的布局。根本布局的设计定下之后再对各局部进展具体设计，细化每个局部，特别是静态的局部。在Photoshop里完成整个页面的设计后，进展切片，将要动态显示的地方切出来，还有就是大的图片要切一下，能提高网页读取速度。按Shift+Ctrl+Alt+S存储为.html格式后，用Dreamweaver编辑，将需要作为背景的单元格中的图片设为该单元格的背景，另存为index.asp。用一样的方法制作网站分页。将所有页面，拷到所属文件夹，然后与后台数据库连接起来，即可通过对后台数据库内容的添加、删除、修改来对网页的相关内容进展操作，例如在数据库注册登录表中删除一个用户信息，那么这个用户再次用原先的登录信息登录时就无法登录成功了。在Dreamweaver中网页的左侧类似“书卷〞的区域插入一张表格，并在代码相应位置插入滚动文字特效的代码，实现文字至下而上滚动，鼠标移过文字时滚动停留的功能，鼠标按下即跳转到“网站公告〞页面；在网站首页顶端插入滚动的欢送字幕，方法同上。在Dreamweaver8.0里翻开主页面，在页面中相对应除插入图片切换的代码，实现新闻图片的自动切换的效果。8.在Dreamweaver8.0里翻开主页面，切换到设计视图，将雪花鼠标特效代码复制在<body></body>之间，保存并预览，完成首页鼠标特效。图4-3网站首页4.1.4留言板的设计为了能让大家有一个相互探讨、分享知识产权方面的心得与经历的平台，为了能让广阔人群更好、更深刻的了解知识产权，为此，我们特别设立了“在线留言〞这一栏目，如果你有什么和知识产权有关的问题或者想法，可以在这里留言，我们将会有专门的指导教师或者有识之士会及时给予回复与解答，与此同时你也可以解答或回复他人遇到的问题。这样就实现了多人的互动。总体来说，留言板功能是这个网站的主要功能之一，也是这个网站的亮点之一，它让整个网站的功能得到提升，使其不单单只是一个简单的单纯的信息发布的网站，增加了互动环节。〔如图4-4〕〔留言页面〕〔查看留言内容及回复页面〕图4-4留言板4.2数据库的设计使用Access2003实现关系型数据库，以下是数据库中几个主要的表的设计：登录注册管理存储了注册登录用户的根本信息，如用户名、密码、地址、邮箱等。〔如图4-5〕图4-5图4-6留言板存储了留言的档案，其中id是关键字，主要实现用户信息管理、留言及回复等。〔如图4-7〕〔留言信息存储表〕〔回复信息储存表〕图4-7创立好数据库之后，我们来用ASP把程序和数据库连接起来，以后就可以连接到数据库、在ASP中显示数据库中的数据。

4.3系统实现代码4.3.1滚动文字特效〔这里主要指网站左侧的“公司公告〞〕<tablewidth="70%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><td><divalign="center"><tableborder="0"align="center"cellpadding="5"cellspacing="0"bordercolor="#000000"><tr><tdbordercolor="#88C7E9"><scriptlanguage=javascript>document.write("<marqueescrollamount='1'scrolldelay='30'direction='UP'width='150'id='helpor_net'height='150'onmouseover='helpor_net.stop()'onmouseout='helpor_net.start()'Author:redriver;Formore,visit:>")document.write("<h2><palign='center'><fontcolor='#000000'face='黑体'>公司公告</font></h2>")document.write("<p><fontcolor='#000000'size=2>")document.write("<br><ahref='WZGG.asp'>1.商标转让——君辉知识</a>")document.write("<br><ahref='WZGG.asp'>2.法律服务简介2010</a>")document.write("<br><ahref='WZGG.asp'>3.我们的法律服务↘(最新〕</a>")document.write("<br><ahref='WZGG.asp'>4.招聘专利代理人</a>")document.write("<br><ahref='WZGG.asp'>5.本所代理中国著名商标</a>")document.write("<br><ahref='WZGG.asp'>6.贺本司商标专利部喜迁</a>")document.write("</font>")document.write("</marquee>")</script></td></tr></table></div></td></tr></table>4.3.2图片切换<imgsrc="images/CJok_18.gif"alt="商标欣赏"width="763"height="127"id="Image1"onMouseOver="MM_swapImage('Image1','','images/SBXS2.jpg','Image2','','images/CJok_18.gif',1)"onMouseOut="MM_swapImgRestore()">4.3.3首页鼠标特效代码<STYLETYPE="text/css">BODY{overflow:scroll;overflow-x:hidden;}.s1{position:absolute;font-size:12pt;color:blue;visibility:hidden;}.s2{position:absolute;font-size:20pt;color:green;visibility:hidden;}.s3{position:absolute;font-size:16pt;color:gold;visibility:hidden;}.s4{position:absolute;font