《网站建设与网页制作复习.ppt》由会员分享，可在线阅读，更多相关《网站建设与网页制作复习.ppt（95页珍藏版）》请在三一办公上搜索。
1、网站建设与网页制作,阎菲,学习内容,网站建设概述 网页界面设计艺术 HTML语言简介 织网工具Dreamweaver 动态网页技术,教学要求,了解一定的网页制作的高级部分，包括用来实现前台交互、制作动感网的DHTML和实现后台交互、制作动态网页的ASP。,掌握网页界面设计的方法和要素，版式设计、文字编排、图形和动画的应用、色彩的应用等。,掌握网页制作各项基本技能，包括HTML语言、可视化网页制作工具（Dreamweaver）具有较强的自主设计与制作网页的基本素质与能力。,课程特点,网页建设与网页制作是一门以实际技能训练为主要教/学内容与目标的实践性课程，知识学习与技能训练的有机结合贯穿于整个教
2、/学过程。最终将以学习者是否具有独立设计并建设网站的基本能力与实践结果作为考核的主要评判标准。,学习方法,3P一体化，即 Principle、Practice、Product(原则)、(实践)、(作品),预祝大家取得好成绩！,考试与实验说明,出勤 10%实验(网站设计)20%期末笔试 70%,考试,课程体系结构,以电子商务、网页制作为中心的多元化授课体系,网站建设概述,HTML语言基础,网页制作工具,网页美化工具,网络新领域、新技巧,网站建设,网页制作,第1章 网站建设概述,第一节 WWW基础知识,第二节 网页界面构成要素,第三节 网站开发常用工具,第四节 网站建设与规划,第1节 www基础知
3、识,WWW服务的基本概念 WWW服务的特点 WWW服务的工作方式 WWW服务的常用术语,1.WWW服务的基本概念,WWW（World Wide Web，全球信息网）是以超文本标记语言（HTML,HyperText Markup Language）与超文本传输协议（HTTP，Hyper Text Transfer Protocol)为基础，提供面向Internet服务、具有一致的用户界面的信息浏览系统。,2.WWW服务的特点,(1)超媒体特性。在WWW中可以多媒体（如文本、图像、声音、动画、影像等）的形式传递信息，从而更吸引人的注意力；使传播的信息更易于接受和理解，从而达到更好的传播效果。,(2
4、)以超文本（Hypertext）方式组织多媒体信息。Web中含有指向其它Web页或其本身内部特定位置的超级链接(Hyper Link)，可理解为“指针”。任何文字、图片、图标等都可被指定为一个超链接。当你选择链接，只要用鼠标在链接上单击一下，就会跳转到链接的内容并显示在你的计算机上。,(3)用户可以在世界范围内任意查找、检索、浏览信息。(4)网点间可以互相链接，以提供信息查找和漫游的透明访问。,3.WWW服务的工作方式,WWW浏览器软件安装在用户的计算机上，用户必须通过浏览器来查看服务器上的内容。当客户通过浏览器向服务器发送一个查询请求时，服务器负责对来自客户机的请求做出回答，找到信息和传递文
5、件给用户；当客户机接收到文件，浏览器软件解释该文件在客户机上，用户才能在屏幕上看到。,WWW系统的结构采用客户机/服务器模式。,4.WWW服务的常用术语,1.URL（统一资源定位符）Internet中使用URL(Uniform Resource Locators)来定位信息资源所在位置。URL格式由三部分组成，描述了浏览器检索资源所用的协议、资源所在计算机的主机地址及资源的路径与文件名。标准的URL如下：http:/表示用户要连接到名为的主机上，采用http方式读取名为index.html的超文本文件。,URL通过访问类型来表示访问方式或使用协议。常用的类型有：,Web pages http:
6、/Ftp Servers ftp:/Telnet telnet:/File file:/,2.网页WWW服务器上的基本信息单位就是网页。网页是单个的HTML文件，是作者公布信息的最小单位。3.网站网站是一个存放在WWW服务器上的完整信息的集合体，由一组相关联的网络文件组成，包含一个或多个网页。4.主页（首页）主页是一个特殊的网页，是整个网络文件的起始点和汇总点，读者开始浏览网络文件的开始点。,第2节 网站界面的基本要素,文字 图像 声音 视频与动画 超级链接 表格 表单 导航栏,1.文字,文字是人类最重要的信息载体与交流工具，网页中的信息也以文字为主要表现形式。与图像相比，文字虽然不如图像那样
7、能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。网页中的文字主要有标题文字和说明性文字。此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。可以对网页中的文字赋予字体、字号、颜色等属性。由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。,2.图像,一个优秀的网页，除了有吸引浏览者的文字形式和内容外，图像的表现功能是不能低估的。图像能将信息传达的更生动、形象、直观，增强了网页的宣传力、号召力、感染力。,1.链接按钮 网页上的链接按钮有一些是由小图片取代文字制作，具有直观、形象的特点，可使网页更加美观。2.背景图像 为了加强视觉效果，有些网页
8、在整个网页的底层放置了图像（称作背景图）来衬托主题。但是一个比较大的图像，需要占据较大的空间，致使网页的显示速度明显变慢。3.主图 在网页中，通常会放置一些图片来突出网页主题。主图与背景图不同，背景图是衬托主题，而主图是突出主题、表现主题。,网页中使用的图像格式,网页中常用的图像文件格式为GIF,JPEG(JPG),PNG，其中使用最广泛的是GIF和JPEG两种格式。,GIF是Graphics Interchange Format 的简写，用来存储Indexed-Color模式的图像。它是采用无损压缩方式压缩的图像文件格式。它的GIF89a格式，能储存成背景透明化的形式，并且可以将多张图片保存
9、在同一个GIF文档中，而且能以默认播放的顺序显示这些图片，用来创造动画的效果。,普通GIF文件 背景透明GIF89A文件 动画GIF89A文件,JPEG是其制定组织 Joint Photographic Experts Group的简称，其压缩的方法属于一种失真的处理方式，可以依所需的压缩比率调整图片品质，以得到最小的图片尺寸。,PNG是Portable Graphics Network的简称，在 1996年才由W3C(World Wide Web Consortium)所制定的Web标准图片格式。它采用的是一种无损压缩方式，PNG格式也可生成透明背景。目前没有普遍应用于网页设计。,3.声音,
10、声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3、RM等。很多浏览器不要插件也可以支持MIDI、WAV格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。在网页中使用声音有两种方式，一是使用声音文件作为背景音乐，这时应尽量使用MIDI格式，否则会影响网页下载的速度。另一种方式是在网页中设置一个打开声音文件的链接，让音乐播放变得可以控制。,4.视频与动画,视频文件的格式也非常多，网页中常用的有Ram、AVI等。Ram格式需使用专门的播放器播放。网页中使用的动画通常为gif和swf两种动画文件类型。swf格式需要使用flash播放器。
11、视频和动画的采用让网页变得精彩而有动感。,5.超级链接,超级链接是从一个网页指向另一个目的端的链接，例如指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接热点时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。加下划线的文字，就是已经建立了超链接的文
12、本。,6.表格,在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式把许多相互关联的信息集中起来，便于用户分析、比较；二是可以利用表格来控制各种网页元素在网页中布局定位，对网页进行排版。,利用表格进行排版,7.表单,网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写
13、表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表框中选择选项等。,8.导航栏,导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。,9.框架页面,一般情况下都是一个浏览器窗口显示一个的Web页面，这一类页面简单、直观制作方
14、便。但是当要求在一个窗口内容纳大量信息时，比如一个大型网站的首页，这种页面就很难胜任了。这时，我们就必须运用框架技术来解决问题。框架的作用就是把浏览器窗口划分为若干个区域，每个区域显示不同的网页。,提示:网页界面重要的一个元素,课程体系结构,以网页制作为中心的多元化授课体系,网站建设概述,HTML语言基础,网页制作工具,网页美化工具,网络新领域、新技巧,网站建设,第2章 网站开发常用工具,一、网页开发工具二、网页美化工具三、网页动画工具,网页制作基础-HTML语言,HTML语言的一些基本概念；HTML语言的语法；HTML文本的基本结构；HTML语言的标记及其用法；HTML实例；,这里是网页标题
15、这是我的第一个网页这是用HTML语言编写的，以后还要学习网页编著工具。,以下是一个网页的源代码：,这是显示结果：,HTML语言的一些基本概念,1.什么是HTML？HTML：Hypertext Marked Language，即超文本标记语言,是一种用 来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。超文本：因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。2.HTML语言的构成HTML文件由标记、代码和注释组成。标记：HTML中用来控制文字、图形等显
16、示方式的符号。如 网页上面的标记里面包含了属性和值注释：,HTML语言的语法规则,扩展名为：*.htm或*.html。HTML不区分大小写。多数HTML标记可以嵌套，但不可以交叉。HTML文件一行可以写多个标记，一个标记可分多行书写，不用任何续行符。HTML文件中换行、回车和空格的表示方法分别是,和 .,HTML文本结构,HTML 文件的正文写在这里.和:是HTML文件的开始和结束标记。浏览器从开始执行到结束。和之间的内容表示文件的头部信息：标题、预定义变量等。标记表示网页的标题，中间不能用别的标记。和标记：网页中所有的内容均包含在其间。,HTML语言的标记及其用法,1.页面标记显示在
17、标题栏中。仅有一个。中间可以嵌套多个标记，添置多种属性，来设置主体内容的背景，外观等。显示文本或图像.该标记建立超链接，标记中间可以嵌套其他标记，如图像标记Image、文本格式标记font等。例如：href:链接目标的地址；target:链接目标的窗口名；若windowname不存在，则打开一个新窗口。,HTML语言的标记及其用法,标尺线标记；属性有：width(绝对、相对）size、align（left、right、center)、color.2.文字格式标记标题设置标记：.n：标题字号（1，2，3，4，5，6）数字越小，字号越大。属性有：face(字体）,size(字号，1-7，值越大，字
18、越大）,HTML语言的标记及其用法,字型设置标记,HTML语言的标记及其用法,段落标记强制换行标记.预排格式标记.文本对齐方式标记属性有：align、style等。:之间加入的文本将会在浏览器中按两边缩进的方式显示出来。3.列表标记无序列表:用来创建一个标有圆点的列表；有序列表:它是用来创建一个标有数字的列表；,HTML语言的标记及其用法,4.表格标记建立表格；其间可以通过加入多个标记和属性来建立表格。有关表格的标记有：表格的说明；开辟一行；开辟一列；,HTML语言的标记及其用法,5.图像和多媒体记标6.超链接标记7.表单标记,HTML语言的标记及其用法,背景色彩和文字色彩属性bgcolor-
19、背景色彩 text-非可链接文字的色彩 link-可链接文字的色彩 alink-正被点击的可链接文字的色彩 vlink-已经点击(访问)过的可链接文字的色彩#=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue,RGB)值来表示。,HTML语言的标记及其用法,背景图像绝对地址和相对地址当前目录使背景不滚动,HTML语言的标记及其用法,页面空白（Magin):页面左边的空白 页面上方的空白(天头)页面右边的空白页面下方的空白#=是数字,本章练习,1.用HTML语言编辑一个.htm文件，使其在浏览器上显示的效果如下图所示：2.为自己设计的站点用HTML语言制作静态网页。,课程
20、体系结构,以网页制作为中心的多元化授课体系,网站建设概述,HTML语言基础,网页制作工具,网页美化工具,网络新领域、新技巧,网站建设,第三章 网页制作工具之-Dreamweaver4.0,一、Dreamweaver桌面的基本结构；二、Dreamweaver的菜单功能和实现；三、Dreamweaver的常用操作；四、Dreamweaver应用；,Dreamweaver桌面的基本结构,标题栏：显示当前正在编辑的文件的标题。括号中显示文件名；菜单栏：Dreamweaver所有的功能都可以在菜单中找到；工具栏：一些常用的操作图标。包括视图工具、页面标题工具、文件管理工具等。文档窗口：其内容根据所选视图
21、的不同而不同；状态栏：显示当前文档的信息或一些编辑状态。包括 以下几种：标签选择器:页面信息；微型发射台：各种工具面板。,状态栏,标签选择器可以用来显示光标所在位置或所选对象的层次结构，在页面中选定某个对象后，标签选择器中会将选择的标签加粗显示。页面信息第一项，用于显示和控制文档窗口的大小，单击旁边的小箭头，可以从列表中选择窗口的尺寸。第二项，用于显示和估计文档的大小及下载这个页面所需时间，包括所有与其相链接的图片及Shockware电影。微型发射台：即常用窗口快捷工具栏，如Site（站点管理器）、Library（库管理）、CSS Styles（样式编辑器）、Html Source（源代码编辑
22、器）等窗口。点击windows-launcher.可以看到迷你发射器放大的样子（如下图所示），叫做“Launcher”面板，点击这里弹出相应的窗口。,Launcher面板,即微型发射台。通过Window-launcher命令调出该面板；该面板提供了快速显示其他面板的功能；用户可以定制符合自己风格的Launcher面板。Editpreferences命令，选择Panels.可以添加、删除或对元件进行排序。演示定制面板；,对象（Objects）面板,可以按下Ctrl+F2键（或window-object菜单）将其调出。该面板集成了“Insert”主菜单中的命令，用于在网页中插入图形、表格等内容。单
23、击面板上部的小三角，可以在多个功能面板之间切换。,面板中各图标功能介绍,Character选卡：Command选卡：Form选卡：Frames选卡：Head选卡：Invisibles选卡：Special选卡：,可以按下Ctrl+F3键（或window-properties菜单）将其调出。属性面板主要用来设定元素的属性。该面板随着我们选择对象的不同而不同。面板中有一个向下的小三角图标，单击后将出现更多的扩展属性。再次单击小三角图标，将关闭扩展属性，恢复到最初状态。下面给出的分别是选中窗口时（上）和选中图像时（下）的属性窗口：,属性面板,代码面板,打开代码面板：Window-Code Inspec
24、tor;键盘上的F10键；单击文件工作窗口右下方的按钮；设置代码面板：设置代码形式：设置系统、面板上以及固定字体的大小、样式等。设置代码面板的背景、文字和标记的顔色：均在EditPreferences命令打开的对话框中进行（如下图）,可停靠浮动面板,可以通过WindowHistory显示历史面板；默认情况下历史面板中最多可记录前面50步操作；可在Edit|Preferences命令下的General选卡中设置。历史面板的具体应用（演示）：撤销改变；清空历史面板；自动完成任务；History面板如下图所示：,Dreamweaver的菜单功能和实现,1.FILE菜单：New:新建一个文件；New
25、from Template:利用已经存在的模板来新建文件；Open:打开一个已经存在的文件；Open in Frame:在框架中打开文件；Close:关掉目前所有的窗口；Save:保存对当前文件的修改；Save as:将当前文件改名另存；Save as Template:将当前文件存为模板；Save All Frames:保存当前所有框架的文件；Revert:将当前文件恢复至上一次存盘时的状态；Import:导入各种格式的文件；Export:导出各种形式的文件；Convert:转换浏览器方式；Preview in Browser:指定浏览器或编辑浏览器列表；Debug in Browser:在
26、浏览器中进行调试；Check Links:检查链接是否正确；Check Target Browsers:用不同的浏览器浏览当前页面；Design Note:设计节点；Exit:退出UltraDev4程序。,Edit菜单：Undo:取消上一步操作；Redo:重新执行被撤消的操作；Cut:剪切所选择区域并将内容复制到剪贴板上；Copy:将所选择内容复制到剪贴板中；Paste:将剪贴板上的内容放入到当前位置；Clear:清除所选区域的内容；Copy HTML:只将所选区域的HTML代码拷贝到剪贴板上；Paste HTML:将剪贴板中内容的HTML代码复制到当前位置；Save All:保存窗口中的所有
27、文件；Select Parent Tag:选择当前标签的父标签；Select Child:选择当前标签的子标签；Find and Replace:查找与替换功能；Find Next:查找满足条件的下一个元素；Indent Code:代码缩进；Outdent Code:代码突出，不缩进；Balance Braces:匹配括号；Set Breakpoint:在当前位置设置断点；Remove All Breakpoint:删除所有断点；Edit With External Editor:启动外部编辑器进行编辑；Preference:UltraDev4的工作参数；Keyboard Shortcuts:
28、设置菜单项和工具等的快捷键。,View菜单：Code:只显示代码；Design:只显示页面设计情况；Code and Design:同时显示代码和页面设置情况；Refresh Design View:刷新页面设计窗口；Design View to Top:,定义一个本地站点,在开始用Dreamweaver制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片，甚至Flash动画等，如果不进行管理归档，分散在硬盘的各个地方就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。单击“Site”菜单下的“N
29、ew Site”命令，弹出“Site Definition”（定义站点）对话框。在“Category”列表中的第一项“Local Info”被选中，用来定义一些本地信息。,在WWW（World Wide Web）发展的初期人们制作网页是通过直接编写HTML代码来实现的。这种手工编码制作网页对网页设计人员的要求较高，编码效率低。因此，对大多数网页设计人员来说采用这个方式比较困难。,2.可视化网页编辑工具,随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。如要在网页
30、上显示表格，就可直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，是大众化的网页编辑方式。,FrontPage是由Microsoft公司推出的Web页面制作工具软件。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便。,Dreamweaver是由Macromedia公司推出的一款网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页。Dreamweave
31、r的网页动态效果与网页排版功能都比一般的软件好用，所以它是网页设计者的首选工具。它可以满足多层次需求，是功能强大的可视化、专业级网页设计及制作工具。,3.DHTML技术,DHTML是什么？DHTML是 Dynamic Hypertext Markup Language 的缩写。为了和传统的HTML相区别，DHTML通常称为“动态HTML”。DHTML将 HTML、CSS和脚本语言有机结合在一起，来制作充满动感的交互性网页。HTML用来定义网页元素，如段落、表格等。CSS用来描述元素属性，如大小、颜色、位置等。脚本语言用来操纵网页元素和浏览器。,4.动态网页技术,在Internet早期，Web站
32、点大都是由静态web页组成，静态页面只能固定地显示事先设计好的页面内容。随着Web业务处理越来越多，业务需求层次越来越高，特别是一些特殊的业务需求，比如商业网站中客户资料的获得、产品信息的查询、信息的反馈等，HTML的局限性日益明显，因此能够与用户进行动态交互的技术，就应运而生了。动态网页页面内容经过了服务端处理，完成了动态的个性化设置。但是客户端用户所接收到的页面与传统页面并没有任何区别。,(1)CGI技术 CGI-Common Gateway Interface，公用网关接口。用来实现CGI应用程序的编程语言有许多种，如Visual Basic、C/C+、Perl等。当用户在浏览器端填好表
33、单要求输入的资料，提出HTTP请求后，Web服务器端执行该表单所设定的CGI应用程序，处理访问者输入的信息并据此做出响应，将其运行结果传输到客户端的浏览器上。由于CGI程序不是整合在HTML文档中，因此须使用与HTML不同的设计过程来设计一个应用程序，每一次修改程序都必须重新将CGI程序编译成可执行文件。使用CGI方式的缺点是效率低下。,(2)ASP技术 ASP（Active Server Pages）是微软公司推出的Web应用程序开发技术。使用ASP可以建立动态的、交互的、高效的Web服务器应用程序。ASP允许用服务器端脚本来扩展HTML，使HTML编写人员可以利用VBScript、Java
34、Script或其他第三方脚本语言编程，实现动态网页。如果去掉这些包含实现动态功能的脚本语句，它和标准的HTML文件没有任何区别。ASP核心技术是对组件和对象技术的充分支持。利用ASP内建对象可以进一步扩展HTML，使脚本更加强大。ASP还包含标准的ActiveX组件，ASP本身封装了一些基本组件和常用组件，同时也可以使用第三方组件，通过访问组件可以简化编程，快速、简易地完善HTML。,(3)JSP技术 JSP（Java Server Pages）是由Sun公司推出的，基于Java Servlet以及整个Java体系的Web开发技术。利用这一技术可以建立先进、安全和跨平台的动态网站。JSP和 微
35、软的ASP在技术方面有许多相似之处。两者都是为基于Web应用实现动态交互网页制作提供的技术环境支持。两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计，而且都能够替代CGI使网站建设与发展变得较为简单与快捷，不过两者是来源于不同的技术规范组织。,为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化工具对网页进行美化。,二、网页美化工具,Fireworks是Macromedia公司开发的图形处理工具，是专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光标
36、动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。,Flash是Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页动画制作和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。,三、网页动画工具,第4节 网站建设与规划,有计划、按步骤的进行，才能达到事半功倍的效果。,1.分析阶段,研究用户需求，建站目的、提供的服务、网站的功能。网站系统分析（业务流程、数据流程分
37、析，开发方法、开发环境选择）。规划网站内容。制订开发任务，对工作进度进行规划。提供详实的网站系统开发策划书,2.设计阶段,精心挑选准备要发布的信息资料 网站信息结构设计 网站链接结构设计 站点目录结构设计 网页文件命名设计 数据库设计 网站风格、板式、色彩、logo等设计,对网站进行整体设计，以确保网站内容条理清楚、结构合理。不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。,准备要发布的信息资料,收集整理网站内容所需资料，图像的制作、音频、视频的制作等。要求：1.应精心挑选要发布的信息资料，要保证网站内容的准确性、独特性。2.引用他人网站的信息，要处理好版权问题，以免潜在的法
38、律问题。,网站的信息结构,1.线性结构 线性结构适合表现内容单一，信息量少的网站。,2.树状结构 绝大多数网站信息结构主要采用树形结构组织页面内容。由网站文件的主页开始，依次划分为一级页面、二级页面等，逐级细化。,（1）用标题的方式列出打算在站点中展示的所有信息，即按信息内容的主题分组。（2）用小标题的方式细化主题分组，即将主题内容进一步分组为子标题。（3）用流程图的方式将标题、子标题按内在层次关系组织起来。层次关系不宜超过三层，即用户至多经过三次跳转就能访问到所需的信息。流程图是站点开发项目的信息图，展示了信息的层次与任务的流向，是进行总体设计的有效手段。,设计信息结构的步骤：,网站的链接结
39、构,网站的链接结构是指页面之间相互链接的拓扑结构。在网站各个页面之间建立链接是极为重要的事，原则是“链接易精不易多”，过多的链接容易使人晕头转向。另外重要的是应该有返回上一级的按钮。,树状链接结构星状链接结构树状与星状结合,1.树状链接结构,优点：条理清晰，容易确定用户的浏览顺序，访问者明确知道自己在什么位置，不会“迷”路。缺点：浏览效率低。,2.星状链接结构,优点：浏览方便，随时可到达欲浏览的页面。缺点：容易使浏览者迷路，搞不清自己在什么位置。,在实际网站设计中，通常将树状与星状这两种结构结合起来使用，达到比较理想的效果。,3.树状与星状结合,站点目录结构设计,网站的目录是指建立网站时创建的
40、文件目录。目录结构的好坏，对浏览者来说并没有什么感觉，但对于站点本身的维护、内容未来的扩充和移植有着重要的影响。,步骤1.在驱动器根目录下创建网站文件夹；步骤2.在网站文件夹目录下建立子目录；,按文件的类型建立子目录,按栏目内容建立子目录,网页文件命名设计,1.文件名称统一用小写的英文字母、数字和下划线的组合 2.主页文件名用 index.htm 或 index.asp,3.文件命名原则 方便理解每一个文件的意义。尽量用英文，不要用拼音。当我们在文件夹中使用“按名称排列”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换等操作。例，“新闻”栏目html文件的命名原则：“国内新闻”的网页文件依次取名为：china_1.htm,china_2.htm,；“国际新闻”的网页文件依次取名为：internation_1.htm,internation _2.htm,3.实现阶段,编写网页文档，制作Web页。,4.测试阶段,进行网站功能测试、性能测试、安全性测试、稳定性测试、浏览器兼容性测试、可用性/易用性测试。在确保准确无误后,方可正式在Internet上发布。,5.维护阶段,网站信息是动态的，经常需要变化。这就需要对网站内的HTML文档进行维护、更新和修改。,
