《网页课程设计报告》由会员分享,可在线阅读,更多相关《网页课程设计报告(20页珍藏版)》请在金锄头文库上搜索。
1、第 1 页 共 20 页引 言随着现代计算机科学的发展,网络已经越来越普及,如今网络已经成为每个人生活的一部分,同时网络也提供了一种很好的信息交换平台,而个人所做的网页是一个可以在网络上展示个人才华的方便手段。首先介绍开发工具Dreamweaver 以及 ASP 等技术,然后详细讲解了个人所做的家具城网页。做这个网页之前我已想好要用鲜艳的颜色来搭配家具城的特色,做这个网页呢我主要介绍了中国十大著名品牌家具。从这个着手呢,就比较有看头。因为我们可以从著名的家具里面寻求自己喜欢的家具而且还可以有一个比较。同时这个网页之中也包含了传统家具和现代家具的一个对比。从中可以看出家具文化的历程,以及从设计这
2、一方面有很大的差别。传统家具呢可以带领你回忆到中国很早的年代,而现代家具呢给我一种全新的释放。我建议用 1024*768 分辨率来浏览我的网页(wyzz)下面就来具体的介绍介绍我所做的网页。一、网页制作技术、常用方法及现状1、网页制作技术本课程设计的网页制作技术一共分为两大类。一类是静态网页,它主要包括图片的插入和滚动,字体的描述和滚动。静态网页是指不应用程序而直接或间接制作成 html 的网页,这种网页的内容是固定的,修改和更新都必须要通过专用的网页制作工具,比如 Dreamweaver、Frontpage 等,而且只要修改了网页中的一个字符或一个图片都要重新上传一次覆盖原来的页面。第二类是
3、动态网页,动态网页是指使用网页脚本语言,比如 php、asp、、jsp 等,通过脚本将网站内容动态存储到数据库,用户访问网站是通过读取数据库来动态生成网页的方法。网站上主要是一些框架基础,网页的内容大都存储在数据库中。当然可以利用一定的技术使动态网页内容生成静态网页,这样有利于网站的优化,方便搜索引擎搜索。而本网页设计中的动态网页主要是留言板,先做一个以.htm 为后缀的网页(留言板的界面),然后以 ASP 所做的网页和数据库连接起来。它能够使别人给我们留言,我们都可以接受到。2、网页制作常用方法本网页涉及到的软件是 Dreamweaver 和 ASP 两大软件,一静一动,相得益彰。在网页制作
4、中所有的静态网页都有 Dreamweaver 所完成。ASP 的功能是制作动态的留言板网页。首先在这里介绍一下 Dreamweaver 和 ASP 两大软件的特点。Dreamweaver 的特点:(1)Dreamweaver 可以用最快速的方式将Fireworks,FreeHand,或 Photoshop 等档案移至网页上。使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。对於选单,快捷键与格式控制,都只要一个简单步骤便可完成。Dremweaver 能与您喜爱的设计工具,如Playback Flash,Shockwave 和外挂模组等搭配,不需离开 Dremweaver 便可完第 2
5、页 共 20 页成,整体运用流程自然顺畅。除此之外,只要单击便可使 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。(2)使用网站地图可以快速制作网站雏形,设计,更新和重组网页。改变网页位置或档案名称,Dreamweaver 会自动更新所有连结。使用支援文字,HTML 码,HTML 属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。(3)Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含 HomeSite 和 BBEdit 等主流文字编辑器。帧(frames)
6、和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组,Dreamweaver 支援精准定位,利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。(4)Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能,提供超强的支援能力给 Third-party 厂商,包含 ASP, Apache,BroadVision, Cold Fusion,iCAT, Tango 与自行发展的应用软体。当您正使用 Dreamweaver 在设计动态网页时,所供即所得的功能,让您不需要透过浏览器就能预览网页。(5)Dreamweave
7、r 将内容与设计分开,应用於快速网页更新和团队合作网页编辑。建立网页外观的样版,指定可编辑或不可编辑的部份,内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出 XML 内容。(6)利用 Dreamweaver 设计的网页,可以全方位的呈现在任何平台的热门浏览器上。对于 cascading style sheets 的动态 HTML 支援和鼠标换图效果,声音和动画的 DHTML 效果资料库可在 Netscape 和 Microsoft 浏览器上执行。使用不同浏览器检示功能,Dreamweaver 可以告知您在不同浏览器上执行的成效如何。当有新的浏览器
8、上市时,只要从 Dreamweaver 的网站在下载它的描述档,便可得知详尽的成效报告。ASP 的特点为:(1)使用 VBScript、JScript 等简单易懂的脚本语言,同时结合 HTML 代码,即可快速地完成网站的应用程序。(2)使 用 普 通 的 文 本 编 辑 器 , 如 Windows 的 记 事 本 , 即 可 进 行 编 辑 设 计 , 而 利 用诸 如 Frontpage 或 者 Dreamweaver 等 所 见 即 所 得 的 网 页 编 辑 软 件 可 以 快 捷 方 便 地进 行 编 辑 , 易 学 易 用 。(3)与 浏 览 器 无 关 ( Browser Inde
9、pendence) , 用 户 端 只 要 使 用 可 执 行 HTML 代 码 的浏 览 器 , 即 可 浏 览 ASP 所 设 计 的 网 页 内 容 。 ASP 所 使 用 的 脚 本 语 言( VBScript、 JScript) 均 在 Web 服 务 器 端 执 行 , 用 户 端 的 浏 览 器 不 需 要 能 够 执行 这 些 脚 本 语 言 。(4)Active Server Pages 能与任何 ActiveX Scripting 语言相容。ActiveX Server Components(ActiveX 服务器元件)具有无限可扩充性。可以使用Visual Basic、J
10、ava、Visual C+、COBOL 等编程语言来编写你所需要的ActiveX Server Components。(5)Active Server Pages 的源程序,不会被传到客户端浏览器,因而可以避免所写的源程序被他人剽窃,也提高了程序的安全性。3、网站结构本网页的结构是根据所做的主题来确定所需要的结构,一共分为三部分。第一个部分是做了一个封面,它突出了我所做的主题家具城,里面包含了四个超链接。一是主页,二是尾页,三是自我介绍,四是留言板。第二部分是主页,第 3 页 共 20 页里面包含有关家具的所有信息,它起着一个很重要的作用。整个主页里面一共有十五个网页,这些网页就所做的家具城呈
11、现了最主要的架构。第三个部分就是留言板,在所做的网页页面中,留言板算是最难的了。因为代码比较复杂,常常要检查到位,不然运行不成功。它是运用到 ASP 的代码和数据库的结合来形成的动态网页。二、网页制作1、网站设计思想及规划本网站设计的主题是家具,我主要以国内十大家具著名品牌来制作,另外几个网页就是现代家具和传统家具以及它的文化和设计。其实所做的网页蛮简洁的,突出一个重点就是不复杂。这些网页被包含在主页里面,而主页呢在封面里面。谈到封面,它其实引导着一种小小和神秘感,不同以往的网页在一打开之后,所有的内容都尽收眼底。而它最主要的网页被隐藏在身后,同时在封面上还有板主的相关信息介绍,如果有什么疑问
12、可以通过留言板给板主留言。2、网站结构封面下一页(首页)尾 页个人介绍许绍洋家具种类首页现代家具家具设计传统家具尾页家具文化名牌家具留言板红苹果家具双叶家具天坛家具典美家具富之岛家具华日家具月星家具宜家家具全友家私家具华丰家具第 4 页 共 20 页3、制作过程(1)服务器环境的配置由于学校机房不支持 IIS 的安装,所以我们浏览网页的工具一个是源动力专用代码调试工具,它是用 netbox 编译的端口默认是 99 可以调试一般的ASP 程序把这个工具跟你要调试的 ASP 代码放在一个目录下 然后双击即可。运行该程序后,会在桌面状态栏的时间区显示一个“.b”的红色图标,右键点退出即可。有了这个就
13、不需要再装 IIS 了。二个是虚拟机,运用到虚拟机就要在虚拟机中设置 FTP 和 WEB 了。通过在虚拟机中配置 FTP,就能把你所要浏览的文件夹放入到虚拟机中,再通过对 WEB 的配置就可以在虚拟机中浏览网页。这样叙述可以看出,直接安装源动力专用代码调试工具比较方便。(2)具体制作过程首先在这里具体讲一个封面的网页,如下图所示:在这张网页里面主要插入了一个背景图片,在这上面输入了三个黄色字体家具城,然后插入了一个公布栏,四个超链接放置其中。最后就是建立一个层,把版权所有信息输入其内。主要代码为:插入背景音乐许嵩第 5 页 共 20 页家 具城下一页尾页个人介绍留言板第 6 页 共 20 页版
14、权所有:镇江高等专科学校- 电子信息系-微机D09 songzengqiao (2011年04月3日) 欢迎进入由szq制作的家具网页第二是名牌家具中的一个网页为华丰家具,如下图所示:它的特点主要表现在颜色给人一种很清爽的感觉,眉头有一个华丰的标志,其内介绍了华丰家具的集团以及它所具有代表性的家具作品。主要代码为:欢迎进入华丰家具网页介绍大连华丰家俱集团有限公司是具有五十年创业史的中国一流世界家具界闻名的大型现代化家具制造企业。占地面积 6 平方公里,建筑面积 200 万平方米,下属 20 个工厂,职工 12000 多人,年产华丰牌家具 400 万套(件) 。已形成客厅、餐厅、卧室、办公等系列
15、产品上万个品种,日开发新产品十几种,产品畅销国内,远销日本、美国。2007 年产值为 25 亿元,销售额 23 亿元,创汇 1.5 亿美元,利税 3 亿元。创造了家具行业销售额、利税额、出口额三个全国第一。 第 7 页 共 20 页大连华丰家具被评为全国家具行业百强之首和“效益十佳”第一名,华丰家具被评为“家具行业第一品牌” 、 “中国消费者协会推荐商品” 、 “中国首批环保产品质量信得过重点品牌” 。 大连华丰家俱集团有限公司于 2002 年通过 ISO9001 管理体系认证,2004 年大连华丰家俱被国家商标总局认定为全国驰名商标,2006 年被中国质检局评为中国名牌产品,大连华丰家俱在全
16、国同行业中是共认的中国家具行业第一品牌。上一页首页 (3)举例说明在做这个网页时遇到了很多的问题,比如说这个封面,由于每一台机子的分辨率不同,所以浏览的效果也是不同的。我做这个网页的时候使用的机子的分辨率为 1024*768,但到笔记本上面浏览就不行,整体的背景图片全变了。也就是说笔记本的分辨率大于台式的,背景图片不是变长了就是整体的层错位了,浏览的效果极差。所以一开始我的建议就是用 1024*768 的分辨率来浏览网页。还有一个就是留言板的网页,刚开始根本就运行不起来,主要原因就是代码有的输入错了。之后就运用浏览网页的工具来调试,根据它所提供的错误报告,再进行相应的修改。(4)制作效果这张是主页,重要内容包含在其内。如下图所示:第 8 页 共 20 页这张网页包含了这个网站的七分之四的信息,也是全网页的主导者。在这张网页的眉头上插入了一个 Banner,其次在下方插入了四个超链接。正文讲了家具对人们的重要性,以及左边是家具的两幅图片,二个超链接。主要代码为:插入背景音乐第 9