网页制作课程设计

《网页制作课程设计》由会员分享，可在线阅读，更多相关《网页制作课程设计（15页珍藏版）》请在金锄头文库上搜索。

1、湖南工学院南校区经济与管理系电子商务网页制作课程设计课题名称：网页制作课程设计系别：经济管理系专业：电子商务姓名：刘云峰班级学号： 电商1001指导老师：曹毅完成时间：2011年12月湖南工学院2011年12月目录课程设计的目标及要求站点规划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站点发布与维护六、设计过程中遇到的问题及解决的办法七、设计后

2、的感想、课程设计的目标及要求因本课程是网络工程相关专业学生的专业必修课。本课程设计的主要目的 是：通过本科城设计，全面帮助学生加强对网站的认知；学会设计和制作网站， 包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站， 熟练网页制作及相关工具（ Adobe Photoshop， Macromedia DreamWeaver MX Macromedia Flash MX Macromedia FireWorks MX 的使用，掌握 Adobe Photoshop， Macromedia DreamWeaverMX Macromedia Flash MX Macromedia F

3、ireWorks MX 软件的使用技巧，掌握相关行业的相关标准。从而运用网站界面的设计与可用性 分析制作专业的站点，以便能获得就业机会，提高个人的综合竞争力与社会适应 力。了解网站的软、硬件平台，会发布和维护一个实际的网站，学会设计和制作 网站，包括完成设计报告。能够使用相关工具（AdobePhotoshop，MacromediaDreamWeaver M，Macromedia Flash MX，Macromedia FireWorks MX）的熟练制 作网页。尽量运用业界默认的网站开发规范，努力使自己的站点专业化。通过本课程的训练，使学生掌握HTM语言的语法结构，能够使用HTML语言 编写静

4、态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能 够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代 码。熟练使用网页设计工具 Frontpage、DreamweaverMX能够使用Dreamweaver MX设计网页的框架，导航条，设置文字，图片，超级链接，滚动文字，弹出窗 口的属性，能够使用 Dreamweaver MX设计出比较复杂的网页，建立小型网站。 熟悉Flash MX的绘图，帧，层，属性面板的使用，能够使用Flash MX制作简单的动画，设计网页的FLASH标题。掌握基于WEB勺数据库应用，理解在B/S模式 下网页如何同数据库之间建立联系，重

5、点了解基于IDC和ASP两种方式以及各自 的原理和运行环境，学会使用 ASP的基本语法、内建对象、内建组件以及 ASP访 问数据库的方法，能够读懂并修改大型动态网站（ASP网站）的代码。二、站点规划2.1需求分析网站的总体规划，是从总体上对网站的架构进行整体规划。 因为只有这样， 才能在网站的制作与维护中对网站的功能有一个清晰的把握。 此外，做好网站规 划，会对网站以后的功能扩展起到事半功倍的作用互联网丰富多彩，这些信息大多通过网页与用户进行交互。 网页的实现形式 多种多样，无论是短小精悍的个人主页，还是结构清晰、信息丰富的大型网站， 网站的需求分析和规划设计都要放在第一步，因为它直接关系到网

6、站的功能是否 完善，质量是否能够达到保证。2.2站点结构分析首先建立站点，规划好布局，文件要划分好，清晰明了。指定文件的位置和 存储的资料。打开：“窗口”下的“新建站点”按“下一步单击“下一步”单击“下一步”（出现“你如何连接到远程服务器”时选择“无”）单击完成3ax 龙 we, anMKi9Attornr*7(* xftcnftaBa( mv (x么 GB7i li t Pl V woM:g:tMT.:l:t代 5策黑策竽HJLy BlW 2* .您的站点包含以下遷SL本地信豆：诂点名称个人特历本地很文件夹：C Documnt And SettinsVAdnini str fttor 面个人

7、徜历istsa：访问 我椅在以后完成此s.8N试务9S访河 我転在以后左成此设貴。改以使用高级选项卡对您的诂点迸行进一步配2E-2.3网站风格分析风格”是指站点的整体形象给浏览者的综合感受。 这个 整体形象”包括站点 的CI （标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语 气、内容价值等等诸多因素。风格是有人性的，不管是色彩、技术、文字、布局, 还是交互方式，只要能由此让浏览者明确分辨出这是本网站独有的，这就形成了网站的 风格” 一般都要求：清纯简洁，主题鲜明，内容编排得当合理、有一定 的艺术感，美观、实用，相关链接正常，能体现网站的基本功能，可以从以下几 个方面来为网站设计

8、一个独特的风格。1。网站标志（LOGO）LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图 案等。标志的设计创意应当来自网站的名称和内容。比如：网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网 站可以以本专业有代表的物品作为标志。 最常用和最简单的方式是用自己网站的 英文名称作标志，采用不同的字体、 字母的变形、字母的组合可以很容易制作好 自己的标志。2。网站色彩网站给人的第一印象来自视觉冲击， 不同的色彩搭配产生不同的效果，并可 能影响到访问者的情绪。颜色搭配是体现风格的关键。标准色彩”是指能体现网 站形象和延伸内涵的色彩，要用于网站的

9、标志、标题、主菜单和主色块，给人以 整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不 能喧宾夺主。例如IBM的深蓝色，肯德基的红色条型。一般来说，一个网站的 标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝 色，黄/橙色，黑/灰/白色三大系列色。一般以白色和黑色的背景网页最好做， 颜色搭配最方便；亮色与暗色配合，最容易突出画面，如黑与白，红与黑，黄与 紫；而近似的颜色的搭配，能给一种柔和的感觉，如墨蓝与淡蓝，深绿与浅绿。 最好能给主页定一个主色调，不要搞得花花绿绿的。3。设计网站字体和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般 网

10、页默认的字体是宋体。为了体现站点的 与众不同”和特有风格，可以根据需要 选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。 需要说明的是：使用非默认字体只能用图片的形式， 因为很可能浏览者的计算机 里没有安装特别字体，他看到的只能是乱码，那么辛苦的设计制作便付之东流了。4。使用精炼有效的语言现代生活节奏加快，人们往往没有时间看大块文章。为了节约时间，在单位时间内获取最大量的信息，人们需要精练的信息，即信息精品，要用信息语言来表达信息内容。所谓信息语言是指以下公式：信息 =基本事实+数据描述+专家 观点。信息语言摒弃一切广告性词句、文学性修饰词句，不欢迎一切关于意义、重 要

11、性的过分渲染。尽量采用数字说话，欢迎定量描述，反对过多的定性描述，特 别是无法形成准确概念的定性描述。用信息语言描述，任何信息都应该有出处， 有时间，分类准确。当然，应当满足信息的时效性、准确性、完整性、精练性等 固有的特点。在此特别注意的是，不要出现错别字、病句。5。设计网站宣传语网站的宣传语也可以说是网站的精神、 主题与中心，或者是网站的目标，用 一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣 传，可以收到比较好的结果。2.4组织素材1）文字：下载或自己输入，一般应该有自我介绍和联系方式的内 容。2）图片：包括静态和动态的图片，可以从别处拷贝，再自己处理 一下。3）

12、链接资源的网址二、网站设计3.1 定义站点站点是一个管理网页文档的场所。简单地讲，一个个网页文档连接起来就构 成了站点。站点可以小到一个网页，也可大到一个网站。Dreamweaver CS4具有强大的站点管理功能，可以实现站点的即时修改，帮助用 户管理和维护整个站点的所有文档。它还可以自动更新和修复文档中的链接和路径，以及实现远程站点和本地站点文档的同步与更新。本章将重点介绍如何创建管理本地站点和远程站点，以及使用“文件”面板和“站点地图”管理站点中的 文件。用Dreamweaver制作网站，首先第一步就是创建站点，为网站指定本地的文件夹 和服务器，使之建立联系。此外，Dreamweaver提

13、供的“管理站点”功能，还可 以对新创建的站点进行管理。本地站点是指在本地计算机上用来存放网站的所有文件的文件夹。 远程站点是在 服务器上存放网站所有文件的文件夹。通过设置远程站点的地址、登录名等信息, 建立该服务器与本地站点的联系，在本地站点与远程站点之间传递文件。在上一小节创建站点过程中，已经接触到“管理站点”对话框。使用“管理站点” 对话框，可以管理多个站点，实现对站点的创建、编辑、复制、删除、导入和导 出。站点的所有文件在 文件”面板中以目录树的形式呈现，方便管理与查看。icm p-xy -uw”十 | r.Jhtssafe | 导 伍 | m立件予 NPTU irrimi- HTIMT

14、. HTML, j rrimi- HTIMT. HTML. J ITIMI- HTIMT- HTML j rriMi_ 立件手匕匕;日3三壬皆 in ；i liAj- 我 fFSE 士 11 血白1 - Ix-t-ml 声& I%J ., Xt *4-11_TK 七 eZL1 1 . 3bi.-t.ml -t-人档-皿5ZLP! Tir a*w tt4亠zesc Jf3.2页面布局设计网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可 以称之为网页排版。网页布局设计最重要的目的就是传达信息。 一个并不能阅读 的网页只能变成一个无用的链接。分割、组织和传达信息并且使网页易于阅读、 界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。我的首页 我的个人档 我的日志 我的书房童萝奇缘Fly away自由自在的飞，让梦纯粹我的日志有三篇日志列表【第1篇】翹武当山【第2篇】好吃东东的雌r合罰 猗口料刖传冃劉一一曲的羊 *临工3.3导航栏设计由我的首页、我的个人档