网页制作期末论文（全文5篇）

第一篇：网页制作期末论文

关于网页制作的相关基本问题

摘要：随着网络的发展，网页的制作越来越重要。网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感，就必须要把网页设计和网页制作结合起来。要想制作出理想的网页，除了要有一定的网页制作基础外，还要正确选择开发工具。在本文中，简单介绍了网页制作的相关技术、网页制作的一般方法过程及应该注意的问题。初学网页制作，要注意网页布局、网页色彩搭配及线条、文字、目录等细节的处理，并不断修改、完善。

关键词：网页制作；一般方法过程；网页布局；色彩搭配。

一、网页制作的相关技术

（一）常用制作工具：

1.Dreamweaver：Dreamweaver是美国Macromedia公司开发的一款集网页制作和管理网站于一身的可视化网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化的网页开发工具，是最受专业设计者欢迎的网页制作工具之一，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其中重点介绍CS5的新功能：

①CSS检查新增功能，以可视方式显示详细的CSS 框模型，轻松切换 CSS 属性并且无需读取代码或使用其他实用程序。

②与 Adobe BrowserLab 集成新增功能，使用多个查看、诊断和比较工具预览动态，网页和本地内容。

③PHP 自定义类代码提示新增功能，为自定义 PHP 函数显示适当的语法，帮助您更准确地编写代码。

④CSS Starter页增强功能，借助更新和简化的 CSS Starter 布局，快速启动基于标准的网站设计。

2.Frontpage是微软公司出品的一款网页制作入门级软件，可以在可视化的方式下简单直观的实现HTML几乎所有的功能，例如：新建和修改一个网页、新建一个Web站点，在网页中插入图片、多媒体等众多功能。FrontPage使用方便简单，会用Word就能做网页，该软件结合了设计、程式码、预览三种模式。也可一起显示程式码和设计检视与Microsoft Office各软件无缝连接，良好的表格控制能力，继承了Microsoft Office产品系列的良好的易用性。但 Frontpage 也有其不足之处：

①浏览器兼容性不好，做出来的网页，用 Netscape 往往不能正常显示； ②生成的垃圾代码多，也会自动修改代码，导致在某些情况下极为不便； ③对DHTML的支持不好。微软在2006年年底前停止提供FrontPage软件。3.Flash：Flash是由Macromedia公司开发的一款优秀的网页动画开发软件，从简单的动画到交互式Web应用程序，它使用户可以创建任何作品。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其它奇特的效果。2012年8月15日，Flash退出Android平台，正式告别移动端。

（二）材料的选取

1.先大后小

先把大的结构设计好，然后再逐步完善小的结构设计。2.先简单后复杂

先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。3.多灵活运用模板，提高制作效率

二、网页制作的一般方法过程

（一）网站的结构

1.网页页面的创建

①在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm，htm表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。

注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。

②在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可）。③此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。

2.栏目的设置

网站的题材确定后，收集和组织相关的资料内容。为了吸引网友们来浏览网站，需将吸引人的内容放在最突出的位置，让好东西在版面分布上占绝对优势。

栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意：

①紧扣主题，主题栏目个数在总栏目中要占绝对优势，这样主题突出，容易给人留下深刻印象。

②设一个最近更新栏目或网站指南栏目，可以照顾到常来的访客，并帮助初访者快速找到他们想要的内容，让主页更人性化。

③设定类似论坛、留言本可以双向交流的栏目，可以让浏览者留下他们的信息。或者留一个“Email me”的站点，更具亲和力。

（二）网站的风格

网站风格是网站页面设计上的视觉元素组合在一起的整体形象，展现给人的直观感受，包括网站的配色、字体、布局、内容等因素。

1.协调运用颜色

不同的色彩影响着人们对网站的第一感觉，一般旅游和园林类型的网站使用绿色系比较多，蓝色则被誉为是企业色确实很多企业和政府机关都偏爱使用沉稳而大方的蓝色。

一个网站必须有一种或两种主题色，既不至于让客户迷失方向，也不至于单调、乏味。通常情况下，一个页面内尽量不要使用超过4种色彩，太多的色彩容易让人感觉没有方向、没有侧重。当主题色确定好以后，考虑配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果。

2.适当选择线条和形状

文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。必须注意搭配好这些线条和形状，才能增强页面的艺术魅力。直线条的艺术效果是流畅、整齐的，直线和矩形在页面上的重复组合可以呈现井井有条的视觉效果。一般应用于比较庄重严肃的主页题材。曲线的效果是活跃的，具有动感，曲线和弧形在页面上的重复组合可以呈现轻快、富有活力的视觉效果。一般应用于青春、活泼的主页题材。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果，但处理不好会产生凌乱的效果。

3.均衡的分割版式：

在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的问题。一幅好的、均衡的网页版面设计，是布局、重心、对比等多种形式原理创造性全面应用的结果。传统网页设计的版式控制都是在不超越大众显示器分辨率宽度的前提下，依照内容多少纵向延展设计。而如今流行的产品型网站，更倾向于在一屏内表达最主要的东西，尤其是首页，尽量不出现滚动条。

4．颜色搭配

在网页设计中，如何配色并不固定，只是与人的视觉有关。比如冷色基调，就大都以冷色，如要用暖色就要多加注意，可能会影响视觉，使游览者眼睛不适。亮色的使用更吸引人的眼球，但极难搭配。比如在过节时，各大网站为了加强温馨度就多用红黄橙来渲染。

（三）版面布局：

版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现不同尺寸。布局，是以最适合浏览的方式将图片和文字排放在页面的不同位置。经常用到的版面布局形式有: 1.“T”结构布局。即页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，缺点是规矩呆板，如果细节色彩上不注意，很容易让人感觉乏味。

2.“口”型布局。即页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。

3.对称对比布局。即采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

（四）文字图片的运用：

1.字体与字号

在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体，而你指定的字体在浏览者的机器里并不一定能够找到。

大小可以用不同的方式来计算，例如磅或像素，建议采用磅为单位。最适合于网页正文显示的字体大小为12磅左右。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。小字号容易产生整体感和精致感，但可读性较差。

2.行距

行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容。

3.文字的整体编排

页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。文字编排有四种基本形式：

①两端均齐：文字从左端到右端的长度均齐，显得端正、严谨、美观。②居中排列：在字距相等的情况下，以页面中心为轴线排列，产生对称的形式美感。

③左对齐或右对齐：使行首或行尾自然形成一条清晰的垂直线，易与图形配合。这种编排方式有松有紧，有虚有实，能产生一种节奏与韵律的形式美感。④绕图排列：将文字绕图形边缘排列，令人感到融洽、自然。

三、网页制作过程中应该注意的问题

（一）文件管理

为了管理方便，我们把图片放在“images”文件夹内。如果图片少，也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则会出现一些麻烦。

（二）栏目建立

在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认的Images目录。将所有图片都存放在这个目录里不方便，所以为每个主栏目建立一个独立的Images目录是为了方便维修和管理。

（三）目录

①目录的层次不要太深，不要超过3层； ②不要使用中文目录；

③不要使用过长的目录，不便于记忆； ④尽量使用意义明确的目录，便于记忆和管理。

（四）字体的输入

如要选取字体，选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。注意：

①在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到；

②在网页上打入空格的办法是：把输入法调为全角； ③在网页上换行的办法是：shift+Enter。只按Enter则为换段。

第二篇：网页制作论文

网页制作论文

简介

网页制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。其作用为展现公司形象，加强客户服务，完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台，是INTERNET上宣传和反映企业形象和文化的重要窗口。新竞争力也认为注重网站的网络营销价值而不是外在表现。网页制作是指使用标识语言，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，浏览。

网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来。

目录

1.网页制作的两种设计模式 2.网页制作常用工具 3.flash 3.1flash简介 3.2flash动画的特点 3.3flash动画的前景 3.4flash在网页中的应用 3.5flash制作流程 4.fireworks

4.1fireworks简介

4.2fireworks在网页中的应用

4.3fireworks的重要性

4.4fireworks制作流程 5.参考文献

正文

1.网页制作的两种设计模式

从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如Microsoft FrontPage中，这样设计显得直观而方便，然而这让越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。同时，这样做也不利于大型网站的改版工作。

于是随着主流网页浏览器对CSS的支援度提高，近年来兴起了一种新的网页设计模式。被业界称为“网页重构”的革命，其核心在于分隔网页的风格和内容，指标记语言(如HTML,XML)负责定义页面的内容，但不可以定义任何涉及网站外观(风格)的东西。而网站风格就由另外的CSS档案负责。在排版方面，新的模式提倡使用由CSS定义的DIV进行页面排版，而将表格还原为排列数据的最初功能。这种模式有很多好处，例如可以协助搜寻引擎查找网页的情况，减小文件提及提高浏览速度，且由于一个CSS档案可以控制多个页面，这也给改版带来了很大方便。

由于W3C是该模式极力的倡导者，于是业界鉴定网页是否符合W3C标准，就可以在W3C网站自动检测该网站的情况。

这种模式也有缺点，其中一个弱点就是，在不同浏览器出来的效果会有分别，但这种情况主要是由于微软的Internet Explorer对CSS文档的支持有众多缺陷造成的。另一方面，开始设计CSS时，并不能清楚看到目标，因此显得不直观。

网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

2.网页制作常用工具

1、dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具。Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

2、Frontpage 跟dreamweaver一样，不过还是dreamweaver好。

3、FLASH 网页需要画面流动时的首选择

4、PS图象处理软件，一般网页都需要有图片相搭配，PS是款很强大的工具。

5、FW跟PS一样都是图象处理软件，但FW偏向与对网页的处理。

6、Adobe公司推出的cs3系列，软件之间兼容性较好。可以用此系列对网站的美工特效进行进一步的修饰美化和优化。

3.flash 3.1flash简介

Flash最早出现并兴起于网络，是网络多媒体动画的重要制作形式，它是macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。其运用范围覆盖诸多领域如电视广告、网络广告、游戏、演示动画、课件、网页、手机动画等新兴媒体。现在由于网络带宽的不断提高，Flash动态网页以其具备的声音、动态图像等多媒体优势，相信在不远的将来能够完全替代静态（HTML）网页。

3.2flash动画的特点

（一）Flash动画受网络资源的制约一般比较短小，利用Flash制作的动画是矢量的，无论把它放大多少倍都不会失真。

（二）Flash动画具有交互性优势，可以更好地满足所有用户的需要。它可以让欣赏者的动作成为动画的一部分。用户可以通过点击、选择等动作，决定动画的运行过程和结果，这一点是传统动画所无法比拟的。

（三）Flash动画可以放在网上供人欣赏和下载，由于使用的是矢量图技术，具有档小、传输速度快、播放采用流式技术的特点，因此动画是边下载边播放，如果速度控制得好，则根本感觉不到档的下载过程。所以Flash动画在网上被广泛传播。

（四）Flash动画有崭新的视觉效果，比传统的动画更加轻易与灵巧，更加“酷”。不可否认，它已经成为一种新时代的艺术表现形式。

（五）Flash动画制作的成本非常低，使用Flash制作的动画能够大大地减少人力、物力资源的消耗。同时，在制作时间上也会大大减少。

（六）Flash动画在制作完成后，可以把生成的档设置成带保护的格式，这样维护了设计者的版权利益。

3.3flash动画的前景

现在的Flash平台包括:Flash Studio

8、Flash Player

8、Flash in Mobile flex 1.5、以及应用于通信行业的Breeze 5等；未来即将推出的产品包括Browser client Flash Player、Mobile client Flash Player、Apollo Flash+HTML的客户端工具，以及Flex等企业端工具等。这些工具将满足设计和开发人员跨越各种开放的和专有的平台，包括从桌面到移动设备，提供更丰富的网络内容和互联网应用，企业也能够通过Flash应用获得更大的受益。

（一）网络视频钟情Flash 面对全球超过100万的Flash开发者的期望，Macromedia也不断开发新的领域。而用户对视频应用的垂青，刺激着Macromedia推出新的工具。在上千开发者的注目下，Macromedia推出了Flash Media Server 2，以巩固其Flash Platform作为网络视频最佳选择的地位

（二）Flex 2产品线和Flash Player 8.5出手不凡

Macromedia Flex 2产品线和Macromedia Flash Player 8.5是本次发布会的重头戏。新产品涵盖RIA的全部应用场景，从电子商务产品配置，到需要与实时数据集成的可视交易应用。

Flash Player目前在全球6亿多个桌面和移动设备上安装,估计新版本在12个月内将被80%的联网计算机下载。Flash Player 8.5在Flash Player 8的基础上增加了适合行业使用的编程功能，并构建了先进的跨平台运行时环境。它备有一个新的虚拟机，可以提供更高的运行性能、全面的运行错误报告、增强型调试功能以及支持ActionScript 3。ActionScript 3遵守最新的ECMA Script规范，能够更易于查找及解决问题，从而提高开发人员的工作效率。

3.4flash在网页中的应用

在网络高速发展的今天,越来越多的人们已经不再满意图文并茂的静态网页格式,动态网页应运而生,但是一般的动态图片和网站的背景音乐应用并不合拍.什么时候可以把多媒体应用在网站上呢 Flash正是在这一网络发展的大背景下应运而生的,前身是Future Splash.Flash1.0版本诞生于1996年,由于当时的网络大背景,Flash在出道之时并没有得到计算机行业应有的重视,Flash真正的火爆是从Flash3.0版本开始的,到了1999年6月发布的Flash4.0版本,其制作的动画开始大量的在网上传播,已经逐渐成为了网页交互多媒体动画设计软件的标准.现在,Flash5.0以其特有的ActionScript脚本编程,正在以极快的速度追赶HTML网页标准.它改变了以往静态的,枯燥的,网页形式,利用它短小精悍的文件体积和插件,利用它简单易学的操作方式,利用它的“流”式播放形式丰富我们的网络生活.试想,如果它真的超过HTML成为未来的网页设计软件的主流,那也将是网络的一场革命,也是网络生活的福音.3.5flash制作流程

（1）建立一个新的场景

依次选择“文件”、“新建”、“Flash文档”命令，建立空白文档，大小为550*400像素，背景为白色。

（1）

（2）重新命名场景和涂层名称

依次选择“窗口”、“设计面板”、“场景”命令，在弹出的场景面板中双击默认场景名称，改为“跳动的小球”。然后重新命名涂层名称，双击默认涂层名称，改为“地面”。然后用水平线表示地面，选择笔触颜色为黑色，单击“线条工具”按钮，在第一帧的舞台下方，拖动鼠标画一条直线表示地面。

（2）

（3）插入水平线结束帧

单击水平线涂层第35帧的小方框，选中该帧；依次选择“插入”、“时间轴”、“关键帧”命令，在地面层的1到35帧之间插入了相同的水平线。

（3）（4）插入跳动的小球涂层，画小球的初始状态

双击默认的涂层名，改为跳动的小球涂层，此图层处于激活状态。设置填充色为黑色，在第一帧的舞台上方，画一个小球，删除轮廓线。

（4）

（5）插入下一帧

单击跳动的小球层第二帧的小方框，选中该帧；依次选择“插入”、“时间轴”、“关键帧”命令，在第二帧中复制第一帧的图形；拖动小球向下移动一个距离，表示球在下落。

（5）

（6）制作下落动作的变化

重复上一步骤。

（6）

（7）小球变形

在下一帧的位置插入关键帧，利用任意变性工具把小球纵向压缩。单击“任意变形”按钮,指针根据可实现的变形方式箭头右下方的小图形会有所变化；单击小球，小球周围出现8个黑色句柄框；把鼠标指针移动到4个中间句柄处，拖动鼠标，把圆球编程椭球形。

（7）

（8）多次重复上面步骤，在不同的帧中，制作小球被压扁后又弹起的画面。参照第9步，制作小球被压扁后又弹起的画面。重复上述步骤，直到小球静止。4.fireworks 4.1fireworks简介

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。借助于 Macromedia Fireworks 8，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks 业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 Macromedia Dreamweaver? 和 Macromedia Flash? 共同构成的集成工作流程可以让您创建并优化图像，同时又能避免由于进行 Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。

4.2fireworks在网页中的应用

众所周知，在网页上的jpg图片如果过大，会严重影响页面的打开速度，Fireworks提供优化图片的功能，即缩小图片的KB，而且不影响画面的质量（除非放大了与原图对比）。由于很多人喜欢用photoshop制作jpg图片，所以它的容量会很大（因为它是适合处理印刷品，要求比较清晰），最终还是要用Fireworks来处理一下。

在优化面板里有“导出jpg较高品质”，导出默认的80品质（可以用“2幅”画面对比之前之后的大小）。

4.3fireworks的重要性

为Macromedia家族的一员，三剑客之一的fireworks，她的主要任务和特色就是制作矢量图为网页服务,FW也是Flash的最佳伴侣,在三剑客的MX系列中,FW和Flash的联系更为紧密,所以无论是网页制作和Flash制作,Fw都是不可或缺的利器.在Fw3年的应用实践过程中,我无时无刻不在感受她的卓越和便利。的确,网页制作看重的是效果和速度,并不是你用的软件专业与否,你用了多少个软件作出的网页,设计师作出的网页是为了让大家接受而不是显示自己的本领,在这样的前提下,Fw的确是最好的选择,最好的矢量图效果,最快的速度。

4.4fireworks制作流程

1.准备素材 如图

2、因为这幅图片是位图，我们可以用魔术棒将电视机中间的画面选取成选区

2.选择菜单——将选取框转换为路径，得到电视画面的轮廓路径。当然，也可以用钢笔工具勾勒

出

电

视

画

面的路

径

4.将选中区域填充成折叠渐变

颜色可以自己选择：

5.用选取工具拖动渐变方向手柄，接近垂直或接近水平方向：

6.将调整手柄以初选中区域 并在帧属性，选取重制帧命令：选择三帧 或在多些

7.依次选择其他帧，拖动渐变调整手柄将其改变位置：柄以初选中区域 并在帧属性帧命令：

最后保存 导出gif图片 即可完成。

1.在Fireworks中打开一个新的画布，调整画布大小，选择工具栏中的文本工具，输入第一个数字，并设置好文字的字体、像素大小等样式

2.输入文本 1 然后再打开帧属性 选择重置帧 9 因为数字0-9 一共是十个

3.然后选择每一帧，并修改画布中的相应数字。

4.帧面板中右手边显示的是默认的帧延时值7毫秒，即7/100秒的速度。如果速度过快 可以修改值 选择顶部帧，按住Shift键，点击底部的最后一帧，全选这些帧，在帧延时值处双击，在显示的对话框中设置一个更高的值。更高值将减慢动画的播放速度。5.最后一步，打开优化面板，设置导出文件格式为“Gif动画”，如图：

6.也可以在帧面板的底部设置Gif动画循环，默认为“永久”选项

7.画布颜色可以随意更改 再按f12 预览就可以了，最后导出文件

5.参考文献

[1]刘宇.Flash短片轻松学中国大陆.电子工业出版社，2009-01.[2]章精设，胡登涛.Flash Action Script 3.0从入门到精通.清华大学出版设，2008-10.[3]陈冰.Flash第1步:ActionScript编程篇(珍藏版).清华大学出版社，2006-03

第三篇：网页制作期末作品要求

网页设计制作期末作品

一、制作规则要求

1.设计制作静态网页，扩展名htm或html，作品主题随意，但以健康、积极向上的主题为选题。

2.网页要求布局合理、页面美观、选材精当、规模适宜。

3.恰当运用表格、框架、CSS、行为等设计页面，但不要求实用所有的布局方式，可使用以上布局的某一种或多种。

4.能灵活运用图片处理软件制作网页元素，全部网页必须原创，使用他人的图片必须把原图级你所处理的图都保存到images文件夹中。

5.网站有一个一级页面，至少有4个二级子页面，三级子页面数量不限，并保证超级链接能顺利执行，网站主页命名为：index.html

6.设计一个与主题贴切的网站标志logo，并且设计导航，与各网页正确链接。

7.网站根文件夹名为” 学号+姓名”，内建images文件夹，将所有的图形图像素材放在该文件夹内。

8.网页中至少有一个动画素材或图形图像素材为选手制作。源文件一并上传。所有文件名（包括图片、视频、音频、动画、文本、网页）都必须使用英文小写字母或阿拉伯数字。

二、作品上传要求

1.将站点打包上传，并以网站根文件夹名称命名。

2.在上传的压缩包以自己的学号、姓名命名。

3.上传下自己的班级里。

第四篇：网页设计与制作-论文（本站推荐）

第一章

绪论

摘 要

本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。

本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章：网页设计语言概述，本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章：内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。第五章：WEB页面信息的交互——窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

关键词： 网页制作；网页设计；HTML；ASP

第一章

绪论

第一章 绪论

随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。

1.1 网页设计概述

网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。

1.2 网页设计的要素

网页设计的两大要素是：整体风格和色彩搭配。

一、确定网站的整体风格

在这里，我提供给大家一些参考经验：

1．将你的标志logo，尽可能的放在每个页面上最突出的位置。2．突出你的标准色彩。

3．总结一句能反映贵站精髓的宣传标语！

4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！

二、网页色彩的搭配

1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2．用两种色彩。先选定一种色彩，然后选择它的对比色。

3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

1.3 大作业目的和意义

本大作业主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：通过已经做好的网页，分析html网页设计技术、XML技术、Java Applet技术和Javascript技术在网页设计中的应用。

第一章

绪论

1.4 要分析的网页

第一章

绪论

第一章

绪论

第二章

HTML网页设计技术的应用

第二章 HTML网页设计技术的应用

2.1 HTML语言介绍

HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

2.1.1 HTML语言的特点

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：

1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

2.1.2 HTML语言的编辑软件

HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：

1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。

2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。

2.1.4 html语言在网页设计中的应用

第二章

HTML网页设计技术的应用

2.2.3JavaScript技术在网页设计中应用

一、JavaScript概述

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：

1、是一种脚本编写语言

JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、基于对象的语言。

JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性

JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4、安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。

总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。

第二章

HTML网页设计技术的应用

第五章

色彩在网页中的应用

第五章 色彩在网页中的应用

5.1色彩在网页中的应用

色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。

先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。

5.2主页色彩的处理

色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。

5.3常用的配色方案

1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。

第五章

色彩在网页中的应用

最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。

5.4合理搭配网页色彩

网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大，以突出主要内容

网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。

第五章

色彩在网页中的应用

第六章 WEB页面信息的交互——窗体与框架

要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

6.1窗体基础知识

窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

6.1.1窗体对象

窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。

在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。

窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

6.1.2 窗体对象的方法

窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：

document.mytest.submit()

第五章

色彩在网页中的应用

6.1.3 窗体对象的属性

窗体对象中的属性主要包括以下：elements name action target encoding method。除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：

elements[0].Mytable.elements[1] 6.1.4 访问窗体对象

在JavaScript中访问窗体对象可由两种方法实现：（1）通过访问窗体

在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

（2）通过数组来访问窗体

除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：

document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗体的先决条件

在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

6.2 窗体中的基本元素

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。

在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：

formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)下面分别介绍：

（1）Text单行单列输入元素

功能：对Text标识中的元素实施有效的控制。基本属性：

Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue：包括Text元素的默认值 基本方法：

blur()：将当前焦点移到后台。

第五章

色彩在网页中的应用

select()：加亮文字。主要事件：

onFocus：当Text获得焦点时，产生该事件。OnBlur：从元素失去焦点时，产生该事件。Onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。例：

...（2）textarea多行多列输入元素

功能：实施对Textarea中的元素进行控制。基本属性

name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Default value：元素的默认值。方法：

blur()：将输入焦点失去 select()：将文字加亮后 事件：

onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件（3）Select选择元素

功能：实施对滚动选择元素的控制。属性：

name:设定提交信息时的信息名称，对应文档select中的name。Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项

select在中每一选项都含有以下属性： Text:选项对应的文字

selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件：

第五章

色彩在网页中的应用

OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。（4）Button按钮

功能：实施对Button按钮的控制。属性：

Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：

click()该方法类似于一个按下的按钮。事件：

onclick当单击button按钮时，产生该事件。例 ：

........（5）checkbox检查框

功能：实施对一个具有复选框中元素的控制。属性：

name:设定提交信息时的信息名称。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态 方法：

click()该方法使得框的某一个项被选中。事件：

Onclick：当框的选被选中时，产生该事件。（6）radio无线按钮

功能：实施对一个具单选功能的无线按钮控制。属性：

Name：设定提交信息时的信息名称，对应HTML文档中的radio的name相同 Value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。

length：单选按钮中的按钮数目。defalechecked:默认按钮。

checked:指明选中还是没有选中。

第五章

色彩在网页中的应用

index:选中的按钮的位置。方法：

chick():选定一个按钮。事件：

onclick:单击按钮时，产生该事件。（7）hidden:隐藏

功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。属性：

name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。

defaleitvalue:默认值（8）Password口令

功能：实施对具有口令输入的元素的控制。属性：

Name:设定提交信息时的信息名称，对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。

defaultvalu:默认值 方法：

select():加亮输入口令域。

blur():使这丢失passward输入焦点。focus():获得password输入焦点。（9）submit提交元素

功能：实施对一个具有提交功能按钮的控制。属性：

name:设定提交信息时的信息名称，对应HTML文档中submit。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。

方法

click()相当于按下submit按钮。事件：

onclick()当按下该按钮时，产生该事件。

6.3窗体对象实例

下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

test8_1.htm 调用动态按钮文档

第五篇：个人网站网页制作论文

个人网站网页

制 作 论 文

学院： 专业： 姓名： 学号：

摘要

本文就个人网站的规划与建设，以软件工程的方法对全过程进行了分析与研究。本文的主要工作集中在：

1.对Web页进行概述，主要是对Internet的历史和发展作了回顾，并对Web页的定义和特性进行阐述。并对网站开发过程中使用的开发工具和技术作了简要的介绍。

2.对网站建设中提及到的术语进行了解释，并对个人网站的由来和发展进行了讨论。

3.对自己的个人网站从规划到建设进行了详细的分析。

4.使用ASP＋IIS＋Access技术实现了我的网站的各种功能，其中和数据库的连接使用到了ODBC技术。

5.就网站建设提出了自己的观点与建议。

【关键词】 网站 ASP SQL Server 风格 创意

一、引言

在已跨入21世纪的今天，人类使用和学习信息的方式以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响以及对社会发展的推动远为复杂而巨大。目前，我国上网的人口已近一个亿，成立世界上网民最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用文本、图象、声音、动画和视频的信息和内容，具有丰富的多媒体表现与互动特点，无可置疑，网站已成为最吸引人的也最有效的信息传递手段和方式。随着网络技术的发展，各类网站纷纷出现。个人网站也成为了一种时尚。越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格。

（一）Web页概述

1、认识Web

Web(World Wide Web，简称，其意思就是采用http超文本传输协议访问新浪网的首页，由于网页均是通过http超文本传输协议进行访问，默认下，“http://”可以省略不输。

5、IP地址

为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（Internet Protocol）地址，这如同公用电话网中电话的号码一样。IP地址是由专门的互联网机构来分配。IP地址具有惟一性，是由32位二进制数组成，分为四组，每组8位，每组之间用小数点分隔，在实际之中常转换成十进制数表示。

（二）个人网站的由来和发展

互联网在中国的出现只有短短七年时间，1994年中国科学院高能物理研究所设立了国内第一个Web服务器，推出一个叫做“中国之窗”的网页，这可能是国内Internet上出现的第一个Web网页，1995年开始，中国教育科研网，中国科技网，中国公用计算机互联网以及中国金桥网这构成中国数字神经系统的四大互联网络相继建成，使互联网在中国开始真正进入社会生活之中。

这时期，个人网站出现的条件还很不成熟，国内上网的人数很少，也缺乏支持个人建站的环境，用户很难找到理想的个人主页存放地。

个人网站发展的第二阶段是从1997年初到1998年，这段时间，中国网民数量飞速增长，个人网站日渐繁荣，个人主页的数量急剧增加。同时，越来越多的商业网站开始免费提供个人主页空间，这些良好的外部极大地促进了个人网站的发展，涌现了一批很著名的个人网页，从1998年下半年开始，随着互联网应用的深入的普及，随着众多主页制作工具的出现，使得建站成为一件非常容易的事，创建一个能充分体现自我风格和特色的个人网站已经成为互联网用户的新追求。

（三）我的个人网站的设计与规划

1、明确架设网站的目的及客户要求

通常情况下，架设个人网站主要是为了通过互联网表达个人在商业、科技、交际、生活等方面的信息需求或者进行信息的交流，具有较强的目的性，我的个人网站一般体现在：为了展示自己的风采，让大家和我一起分享我的心得与经验，让和我有共同爱好的朋友有一个倾诉的地方。

2、我的个人网站概貌

因为是个人网站，所以只是选择了自己擅长和喜爱的内容，在突出自己的风格和特点的同时，还应用了现在流行的网站设计技术和数据库技术。因此将网站设计分为前台页面展示平台和后台在线管理平台。

3、功能划分

网站设计有新闻更新，浏览者可以在首页浏览自己喜欢的新闻，并且可以在留言板和大家交流，在后台管理页面中，通过身份认证，管理员——我，可以对网站信息进行管理。站内的其它页面均是我自己的精心收藏，与大家一起分享。

4、功能描述(1)新闻

嵌入百度新闻每日更新代码，使用在本站首页显示今日国内国际新闻和体育新闻，供浏览者浏览。

(2)留言板

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。

(3)后台管理页面 是我管理和添加到新内容的地方，为了方便实现信息的经常更新，我设计了这个管理页面，经过身份认证后我可以进入网站对其中的信息进行管理。

(4)日记

在其中展示我喜爱的东西，包括我的日记、精品文章、社会文化和一些杂七杂八的文章。奇文共欣赏，疑义相与析。我只想起到抛砖引玉的作用，让大家从中认识我和了解我，让一些美好的东西我们大家共同来欣赏。

(5)相册

在其中展示漂亮的图片，包括我的照片、我的同学、风景照片、妹眉帅哥栏目。让大家一起来欣赏人物、风景风采。

(6)音乐

在其中展示个人喜欢的歌曲，朋友们可以在里面点播自己喜欢的歌。(7)页面组织和数据库设计

在明确了我的个人网站的风格和定位后，就是网站的材料组织以及网站的页面设计和数据库设计。

建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块。结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。网站的题材确定后，并且收集和组织了许多相关的资料内容，但如何组织内容才能吸引网友们来浏览网站呢？栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。因此我将自己的个人网站分为五个栏目，分别是关于我、相册、日记、音乐、留言。

三、详细设计

1、界面设计（1）相册

是一个个人相片和精彩图片展示的地方，在相册中，我们可以了解到站长的个人风采和自己喜欢的图片。a、功能

利用ASP对象语句显示图片，让大家可以看见所有图片的缩略图，同时每个图片都有快照功能，可以浏览图片的全图。

b、组成构造

相册结果显示页面 photo.asp：用来显示所有图片，同时还具备图片的分类功能和图片单个浏览功能。

站长基本信息显示页面 include.asp： 数据库连接页面 conn.asp(2)日记

是一个记录个人日记和精品收藏文章的地方，供给大家一起分享。a、功能

利用ASP对象语句分类显示日记或文章记录，让大家浏览到最新的日记或文章

b、组成结构

日记或文章显示页面 diary.asp：显示所有日记或文章，同时还具备显示不同子类日记或文章

站长基本信息显示页面 include.asp 数据库连接页面 conn.asp c、日记页面浏览效果图，如图12。(3)、音乐

是一个音乐收藏和音乐欣赏的地方。a、功能

利用ASP对象语句来显示歌曲曲目、演唱人和在线播放功能。b、组成结构

歌曲显示播放页面 media.asp：完成曲目的显示和播放功能的页面。站长基本信息显示页面 include.asp 数据库连接页面 conn.asp(4)、留言本

是一个我与大家谈心交流的地方，在留言板中，我们可以畅所欲言，和大家进行交流。就我们感兴趣的话题展开讨论。和大家进行沟通。

a、功能

利用SQL语法过滤特定的用户留言意见，让站长可以针对某位特定用户所发表的意见作出独立的回答，同时，用户在发表个人意见时，若认为意见内容涉及敏感的话题或是意见内容涉及私人隐私，都可用“悄悄话”的方式发言，这些“悄悄话”将不会被显示出来让大家看到，当然，站长拥有管理的能力，只要以密码登录管理模式，就可以进行各个用户的单独意见回复，而且还能看到用户所留下的“悄悄话

b、组成构造

意见留言结果网页gbook.asp：用来显示用户发言与站长回复内容，同时还具备查看留言和发表留言两个功能。

站长基本信息显示页面 include.asp 数据库连接页面 conn.asp

(三)、关键代码设计

1、分页功能模块代码

<% if not rs.eof then rs.MoveFirst '注意放到前面来,否则到任何页总是在第一个记录上

end if rs.pagesize=MaxPerPage '设置每页最多显示多少条记录

If trim(Request(“Page”))<>“" then '如果请求的页次不为空

CurrentPage= CLng(request(”Page“))'clng是转换成长整型数据类型,并赋值到当前页次上

If CurrentPage> rs.PageCount then '如果当前页次大于总页数,则将最大页次赋值到当前页次上

CurrentPage = rs.PageCount

End If Else

CurrentPage= 1 '一切条件不成立,将当前页设为第一页 End If totalPut=rs.recordcount '将总记录赋值于TOTALPUT

if CurrentPage<>1 then '如果当前页数不等于第一页

if(currentPage-1)*MaxPerPage

rs.move(currentPage-1)*MaxPerPage '相对当前记录数向后移动

dim bookmark '定义书签变量

bookmark=rs.bookmark '将当前记录的标签赋于变量BOOKMARK上

end if

end if

dim n,k

if(totalPut mod MaxPerPage)=0 then '总记录数与每页最大记录数求余的结果为零时,则N返回整数页次,否则再加一.n= totalPut MaxPerPage

else

n= totalPut MaxPerPage + 1

end if %>

2、图片显示功能模块代码

<% cid=request(”id“)if cid=”“ then sql=”select * from HN_pro order by id desc“ else sql=”select * from HN_pro where cstr(class)='“&cid&”' order by id desc“ end if

else

rsnews.AbsolutePage=ToPage

intCurPage=ToPage

end if

else

rsnews.AbsolutePage=1

intCurPage=1

end if intCurPage=CInt(intCurPage)k=1 do while Not rsnews.eof and k<6 %>

<%for n=1 to 6%>

<% rsnews.MoveNext if rsnews.eof then exit for if rsnews.eof then exit do next %>

<%k=k+1 Loop %>

“ rel=”lightbox[plants]“> “ width=”49“ height=”49“ border=”0“>

日记、音乐显示模块代码段相似。

3、发表留言提交内容判断模块代码 <% if request(”action“)=”“ then response.redirect”gbook.asp?action=show“ if request(”action“)=”post“ then dim bookname dim bookwhere dim bookpic bookname=request(”name“)bookwhere=request(”where“)bookpic=request(”pic“)bookface=request(”face“)bookip=request.ServerVariables(”REMOTE_ADDR“)if bookname=”“ then Response.Write ”“

Response.End %>

（四）、网站管理系统

1、完成站长对网站信息管理及更新的系统，包括以下几部分：（1）管理登陆页面Index.asp（2）相册管理页面Admin_pro.asp（3）日记管理页面Admin_new.asp（4）音乐管理页面Admin_down.asp（5）留言管理页面GuestBook.asp

2、管理登陆

管理系统的登陆页面，主要用于管理登陆和判断用户是否已注册。（1）其中判断是否是非法登陆的代码为： <% admin_pass=md5(admin_pass)set rs=server.createobject(”adodb.recordset“)sql=”select * from admin where admin_name='“&admin_name&”' and admin_pass='“&admin_pass&”'“

rs.open sql,conn,1,3

if rs.eof then response.write”“

else

session(”admin_name“)=request(”admin_name“)

session(”loc“)=1

response.redirect ”admin.asp“ end if rs.close %>（2）其中验证码验证代码：

<% dim verifycode,verifycode2 if verifycode<>verifycode2 then response.write”“ founderr=true else session(”verifycode“)=”“ %>

3、主要功能程序段（1）打开数据库 <% set conn = Server.CreateObject(”ADODB.Connection“)conn.open ”YourDSNName“,”username“,”password“ %>（2）数据库查询操作 大类查讯

setrs=server.CreateObject(adodb.recordset)小类查询 dimrs2 setrs2=server.CreateObject(adodb.recordset)rs2.openselectnclass,nclassidfromnclasswhereanclassid=&rs(anclassid)&orderbynclassidorder,conn,1,1 dowhilenotrs2.eof response.writeAhref=class.aspaid=&rs(anclassid)&&nid=&rs2(nclassid)&&trim(rs2(nclass))&A rs2.movenext loop（3）添加记录操作

setrs=server.CreateObject(adodb.recordset)可写方式

rs.openselectbookid,username,zhuangtai,zongerfromactions,conn,1,3 rs.addnew 添加一条新记录 rs(bookid)=bookid 添加相应的记录 rs(username)=username „„„„ rs(zhuangtai)=6 rs(zonger)=0 rs.update 更新数据库（4）删除记录操作

从表actions中删除actionid匹配的记录 conn.executedeletefromactionswhereactionid= &request.QueryString(actionid)

四、编码、测试与维护

（一）测试与维护

1、IIS(Internet 信息服务)安装配置

可以在”添加或删除程序 >>添加/删除Windows组件“对话框中把”Internet 信息服务(IIS)“前的勾选中，点”下一步“进行安装就行了(注：在这之前应把系统安装盘放到光驱)。IIS 装好之后再作一下简单的配置。定位到”开始>>管理工具>>Internet 信息服务(IIS)管理器“，打开IIS管理器。在”本地计算机>>网站>>默认网站“上右键单击，在快捷菜单里选”属性“(或者直接在操作菜单下选”属性“)，弹出如下对话框图16: 图16 切换到”主目录“标签(图2)，重新选择网站根目录(我选择的是E盘下的my web目录)，默认是”系统盘:Inetpubwwwroot“,因为系统盘不宜放太多的非系统文件，所以在这里重设默认网站要目录，如果嫌麻烦可以跳过这步。再切换到”文档“标签，通过”添加“、”删除“、”上移“、”下移 “，把站点的默认文档设置如图17：

图17 可能有些朋友会疑惑，设置默认内容文档有什么作用？细心的朋友应该会发现，在浏览一些大网站的首页时用它的一级域名就行了，并不需要指定请求页的文件名，这就是设置了默认内容文档的缘故，它的作用就是在浏览器请求没有指定文档的名称时，将默认文档提供给浏览器。要得到更详尽的解释说明，可以点击图3中的“帮助”。之所以有这步，是因为网站的默认内容页中没有index.asp，不大符合国人习惯。

2、Dream weaver测试站点和用IIS测试本地站点

Dream weaver MX提供了全面检测站点的功能，它比检测链接更全面。全面地检测内部、外部链接、去除错标签、空标签、多余的标签等，它的使用相当简单，使用全面检测站点功能如下：

（1）、选择菜单中【站点】的【报告】命令，打开一个窗口。

（2）、选择检测范围，在【报告】选项中有四个内容供选择：Current Document、Entire Local Site、Select Files in site、Folder。

（3）、对工作流方面的信息进行检测。

（4）、对HTML文件的信息做出检查。

把编好的网站文件复制到D:/my web文件夹中，可以打开浏览器，在地址栏中输入http://localhost/my web/index.asp ,就会看见网站了。

3、维护

网站建成后并不意味着网站建设的结束，网站内容需要不断更新，这样才会不断的吸引更多的浏览者访问，才能成为一个优秀的网站。通过FTP软件将更新过的网页上传到服务器或通过Dream weaver MX来远程管理站点，同时还要认真回复浏览者的电子邮件和留言，做到有问比答。平时多收集资料，多听听别人建议，定期更新版面，还有推广站点。

（二）设计技巧和解决方法

用服务器端包含技术实现对文件的引用

系统中有许多页面都会引用相同的代码文件，所以使用include语句将已完成代码的文件包含进来，就可以简化代码的缩写。如首页面indes.asp中第二行和第三行代码。

结束语

经过老师耐心细致的指导，及同学之间的相互交流，同时翻阅了大量的资料(包括网上资料，书本及学校的一些相关资料)经过近一段时间的努力，个人网站的设计制作告一段落。总结这次“文武屋-个人网站”开发制作过程，我们综合使用了目前因特网上比较流行的各种静态制作方法及交互式动态网站的制作设计手段，并对初步利用后台程序完成了网站的动态响应与生成网页的技术。同时也从中学习了对静态页面的处理风格，色彩搭配，页面导航方面有了一定经验。对用Javascript语言制作动态效果也有了更进一步的认识。在交互式网页设计学会了如何使用Access建立数据库，以及对数据库浏览，修改，添加，查询。如何用ASP编写程序来方便用户在网上查看网站各方面的信息和交流。本次设计由于设计时间较紧，且相关模块比较多，加之设计经验的不足，在网站的整体设计及各模块功能可能设计的不完全，有待于进一步的完善和改进。

参考文献

[1]吴涛主编，网站全程设计技术（修订本），北京：清华大学出版社；北京交通大学出版社，2006.7 [2]龙马工作室编，ASP+SQL Server组建动态网站实例精讲，北京：人民邮电出版社，2004.8 [3] 赵增敏编，ASP动态网页设计，电子工业出版社，2003.8 [4] 任学文、范严编, 网页设计与制作，中国科学技术出版社，2006.8 [5] 武创、王惠,网页设计探索之旅 ,电子工业出版社，2006.9 [6] 杜巧玲等编, 网页设计超级梦幻组合,清华大学出版社, 2003.3 [7] 吴黎兵、罗云芳编，网页设计教程，武汉大学出版社，2006.2 [8] 庄王健编，网页设计三剑客白金教程，电子工业出版社，2006.01