网页制作课程设计

...v.**工学院南校区经济与管理系电子商务网页制作课程设计课题名称：网页制作课程设计系别：经济管理系专业：电子商务姓名：X云峰班级学号：电商1001指导教师：曹毅完成时间：2011年12月**工学院2011年12月...v.目录一、课程设计的目标及要求二、站点规划2.1需求分析2.2站点构造分析2.3风格分析2.4组织素材三、设计3.1定义站点3.2页面布局设计3.3导航栏设计3.4素材处理四、网页制作4.1首页制作4.2目录〔标题〕页制作—二级页面制作4.3内容〔文章〕页制作—三级页面制作五、网页测试、发布与维护5.1站点整理5.2网页调试5.3站点发布与维护六、设计过程中遇到的问题及解决的方法七、设计后的感想课程设计的目标及要求因本课程是网络工程相关专业学生的专业必修课。本课程设计的主要目的是：通过本科城设计，全面帮助学生加强对的认知；学会设计和制作，包括完成设计报告，了解的软、硬件平台，会发布和维护一个实际的，熟练网页制作及相关工具〔AdobePhotoshop，MacromediaDreamWeaverMX，MacromediaFlashMX，MacromediaFireWorksMX〕的使用，掌握AdobePhotoshop，MacromediaDreamWeaverMX，MacromediaFlashMX，MacromediaFireWorksMX软件的使用技巧，掌握相关行业的相关标准。从而运用界面的设计与可用性分析制作专业的站点，以便能获得就业时机，提高个人的综合竞争力与社会适应力。了解的软、硬件平台，会发布和维护一个实际的，学会设计和制作，包括完成设计报告。能够使用相关工具〔AdobePhotoshop，MacromediaDreamWeaverMX，MacromediaFlashMX，MacromediaFireWorksMX〕的熟练制作网页。尽量运用业界默认的开发标准，努力使自己的站点专业化。通过本课程的训练，使学生掌握HTML语言的语法构造，能够使用HTML语言编写静态网页，控制网页中的文字，图片，超级，表格，表单，框架等，能够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代码。熟练使用网页设计工具Frontpage、DreamweaverMX，能够使用DreamweaverMX设计网页的框架，导航条，设置文字，图片，超级，滚动文字，弹出窗口的属性，能够使用DreamweaverMX设计出比拟复杂的网页，建立小型。熟悉FlashMX的绘图，帧，层，属性面板的使用，能够使用FlashMX制作简单的动画，设计网页的FLASH标题。掌握基于WEB的数据库应用，理解在B/S模式下网页如何同数据库之间建立联系，重点了解基于IDC和ASP两种方式以及各自的原理和运行环境，学会使用ASP的根本语法、内建对象、内建组件以及ASP数据库的方法，能够读懂并修改大型动态〔ASP〕的代码。...v.二、站点规划2.1需求分析的总体规划，是从总体上对的架构进展整体规划。因为只有这样，才能在的制作与维护中对的功能有一个清晰的把握。此外，做好规划，会对以后的功能扩展起到事半功倍的作用互联网丰富多彩，这些信息大多通过网页与用户进展交互。网页的实现形式多种多样，无论是短小精悍的个人主页，还是构造清晰、信息丰富的大型，的需求分析和规划设计都要放在第一步，因为它直接关系到的功能是否完善，质量是否能够到达保证。2.2站点构造分析首先建立站点，规划好布局，文件要划分好，清晰明了。指定文件的位置和存储的资料。⑴翻开：“窗口〞下的“新建站点〞⑵按“下一步⑶单击“下一步〞⑷单击“下一步〞〔出现“你如何连接到远程效劳器〞时选择“无〞〕⑸单击完成2.3风格分析“风格〞是指站点的整体形象给浏览者的综合感受。这个“整体形象〞包括站点的CI〔标志，色彩，字体，标语〕、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素。风格是有人性的，不管是色彩、技术、文字、布局，还是交互方式，只要能由此让浏览者明确分辨出这是本独有的，这就形成了的“风格〞。一般都要求：清纯简洁，主题鲜明，内容编排得当合理、有一定的艺术感，美观、实用，相关正常，能表达的根本功能，可以从以下几个方面来为设计一个独特的风格。

1。标志〔LOGO〕

LOGO是指的标志，标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自的名称和内容。比方：内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡**或者艺术化；专业可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。

2。色彩

给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到者的情绪。颜色搭配是表达风格的关键。“标准色彩〞是指能表达形象和延伸内涵的色彩，要用于的标志、标题、主菜单和主色块，给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。例如IBM的深蓝色，肯德基的红色条型。一般来说，一个的标准色彩不超过3种，太多那么让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。一般以白色和黑色的背景网页最好做，颜色搭配最方便；亮色与暗色配合，最容易突出画面，如黑与白，红与黑，黄与紫；而近似的颜色的搭配，能给一种柔和的感觉，如墨蓝与淡蓝，深绿与浅绿。最好能给主页定一个主色调，不要搞得花花绿绿的。

3。设计字体

和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了表达站点的“与众不同〞和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，他看到的只能是乱码，那么辛苦的设计制作便付之东流了。

4。使用精炼有效的语言

...v.现代生活节奏加快，人们往往没有时间看大块文章。为了节约时间，在单位时间内获取最大量的信息，人们需要精练的信息，即信息精品，要用信息语言来表达信息内容。所谓信息语言是指以下公式：信息=根本领实＋数据描述＋专家观点。

信息语言摒弃一切广告性词句、文学性修饰词句，不欢送一切关于意义、重要性的过分渲染。尽量采用数字说话，欢送定量描述，反对过多的定性描述，特别是无法形成准确概念的定性描述。用信息语言描述，任何信息都应该有出处，有时间，分类准确。当然，应当满足信息的时效性、准确性、完整性、精练性等固有的特点。在此特别注意的是，不要出现错别字、病句。

5。设计宣传语

的宣传语也可以说是的精神、主题与中心，或者是的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括，进展对外宣传，可以收到比拟好的结果。

2.4组织素材文字：下载或自己输入，一般应该有自我介绍和联系方式的内容。

2〕图片：包括静态和动态的图片，可以从别处拷贝，再自己处理一下。

3〕资源的网址三、设计3.1定义站点站点是一个管理网页文档的场所。简单地讲，一个个网页文档连接起来就构成了站点。站点可以小到一个网页，也可大到一个。DreamweaverCS4具有强大的站点管理功能，可以实现站点的即时修改，帮助用户管理和维护整个站点的所有文档。它还可以自动更新和修复文档中的和路径，以及实现远程站点和本地站点文档的同步与更新。本章将重点介绍如何创立管理本地站点和远程站点，以及使用“文件〞面板和“站点地图〞管理站点中的文件。用Dreamweaver制作，首先第一步就是创立站点，为指定本地的文件夹和效劳器，使之建立联系。此外，Dreamweaver提供的“管理站点〞功能，还可以对新创立的站点进展管理。本地站点是指在本地计算机上用来存放的所有文件的文件夹。远程站点是在效劳器上存放所有文件的文件夹。通过设置远程站点的地址、登录名等信息，建立该效劳器与本地站点的联系，在本地站点与远程站点之间传递文件。在上一小节创立站点过程中，已经接触到“管理站点〞对话框。使用“管理站点〞对话框，可以管理多个站点，实现对站点的创立、编辑、复制、删除、导入和导出。站点的所有文件在“文件〞面板中以目录树的形式呈现，方便管理与查看。3.2页面布局设计网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。网页布局设计最重要的目的就是传达信息。一个并不能阅读的网页只能变成一个无用的。分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的时机找出吸引他的东西。3.3导航栏设计由我的首页、我的个人档、我的日志、我的书房、我的室友组成，3.4素材处理主页素材的采集：我们这里所说的素材，包括制作主页所需的文字、图片、动画甚至声音、影像等多媒体文件，这是制作图文并茂的网页所不可缺少的点缀。

文字资料的采集：主要是自己编写或是通过传统媒体和网络获取，与主页主题有关的资料，加以整理及编辑。

图片资料的采集：在页面中嵌入适量的图片，可以让页面更为吸引人。我们一般可以根据主页的主题选择适宜的素材库，或是直接从internet获取。但是如果有一定的绘图功底的话，建议尽量使用photoshop或fireworks制作页面的图标及广告banner，以充分表达主页的个人特色。

其他资料的采集：为了增加个人主页的表现力，可以在页面内适度加上音乐〔建议使用midi格式，体积较小，便于传输〕、视频文件，或者是java、java等以点缀页面。但切记不可滥用，以免影响主页的浏览速度。

四、网页制作4.1首页制作主页构造的规划：

个人主页的制作是个复杂的系统工程。在开场页面的实际制作之前，我们需要先搭好主页的框架，草拟一下的“施工图〞，这样才能保证的格式统一、层次清晰。一般采用树状构造先列出每个页面的大纲内容及规划页面之间的层次构造和关系，并适当考虑将来扩大的可能性。经过仔细规划的主页构造，可以为将来的开展打下良好的根底。使用microsoftfrontpage的navigator视图可以轻松创立、修改个人主页的构造层次。

主页页面的规划：所谓页面的规划，就是对每个页面的布局及所包含的内容进展完整详尽的设计。其中包括是否采用框架，每个页面中图片、文字及其他文件的分布，以及外观显示的设定〔如颜色、字体等〕等等，进而根据该规划大致估算一下需要多少相关的素材，并予以分门别类落实。经过规划以后，一来便于个人主页的管理维护，二来能让你有条不紊地表达所有的信息，不致于有所遗漏。

4.2目录〔标题〕页制作—二级页面制作一个的一二级栏目网页，相当于书籍的目录页。通过目录，可以连接到所需要的内容页面。为了统一风格，在外观设计上，一般的二级栏目和内容页的布局往往有局部构造与主页一样，如目录页，内容页的页头和页脚局部。二级栏目网页，内容网页设计制作完成后，还必须通过设置超，才能够将它们有机地联系起来，成为一个完整的。4.3内容〔文章〕页制作—三级页面制作五、网页测试、发布与维护5.1站点整理〔1〕建立站点名称和主文件夹、子文件夹。〔2〕总体布局：应用框架和导航条来组织各局部内容。〔3〕页面布局：用表格和层来定位图片、文字、。〔4〕逻辑构造：明确各页面之间的上、下级关系，建立不同的文件夹来存放各类文件。〔5〕关系：根据各页面之间的逻辑关系来建立，可以通过文字或图片来实现。5.2网页调试主页的测试主要包括三方面的测试：一个是测试页面的html语法合法性，以保证技术上的正确性。一般采用工具软件，如htmlvalidator等，都可以对页面进展快速而准确地测试，有的软件还能给你提出修改的方法和建议；一个是测试页面浏览的兼容性，以确保页面在使用不同的浏览器浏览时都能正常显示，我们可以借助工具软件browserola来完成这项测试〔dreamweaver提供页面在ie和navigator的预览功能〕；最后一个是测试主页的是否正常，是否存在断链5.3站点发布与维护个人主页的制作，并不是一件一劳永逸的事，不断的更新和长期的维护才能使你的个人主页具有生命力。在主页的更新和维护中，应注意保持原有主页构造和风格的一致，特别是页面风格的一致，最有效的方法就是充分利用html编辑软件提供的模板功能，创立一套随时可供调用的页面模板，简化页面更新和维护的工作量upload.htm<html><head><title>童梦奇缘</title></head><body><formaction="upload.asp"method="POST"enctype="multipart/form-data"><p><fontsize="1">选择文件1:<inputtype="file"size="40"name="FILE1"></font></p><p><fontsize="1">选择文件2:<inputtype="file"size="40"name="FILE2"></font></p><p><fontsize="1">选择文件3:<inputtype="file"size="40"name="FILE3"></font></p>`可以添加多个<INPUT>标签以上传更多的文件<p><fontsize="1">文件说明:</font><inputtype="text"size="40"name="MENT"></p><p><inputtype="submit"value="现在上传"></p></form></body></html>然后，我们使用ActiveFile来在效劳器端处理文件的上传：Upload.asp六、设计过程中遇到的问题及解决的