网站建设ppt

《网站建设ppt》由会员分享，可在线阅读，更多相关《网站建设ppt（57页珍藏版）》请在金锄头文库上搜索。

1、网,Website construction,站,的,建,设,Website construction,网页设计,网站维护,F&Q,网站开发,网站开发,网站开发,网页设计,网站维护,F&Q,网站开发,域名,C 顶级域名 二级域名 国内二级域名和国际三级域名,网站开发,网页设计,网站维护,F&Q,网站开发,网站开发,网页设计,网站维护,F&Q,网站开发,网站开发,网页设计,网站维护,F&Q,网站开发,客户评估,网站功能设计,网站结构规划,页面设计,内容编辑,撰写“网站功能需求分析报告“,网站开发,网页设计,网站维护,F&Q,网站开发,网站标志(LOGO) 设计网站色彩 设计网站字体 设计网站

2、宣传语,网站开发,网页设计,网站维护,F&Q,网站开发,网站开发,网页设计,网站维护,F&Q,网站开发,网站开发,网页设计,网站维护,F&Q,网站开发,网站开发,网页设计,网站维护,F&Q,网站开发,网页设计,一、基础概念 二、网页设计的基本方式 三、网页中的常见元素 四、文档的超链接,网页设计,网页设计,网站维护,F&Q,网站开发,一、基础概念 网页：是一种用HTML语言编写的文本文件。 HTML：全文是“HyperText Markup Language”，中文意思为“超文本标记语言”。 超文本：意指页面内除文本外，还可包含图片、链接、甚至音频、视频等非文字元素。,主页：Internet用

3、户访问网站时所看到的第一个网页(网站的入口)，称作主页（Homepage或Home Page）。 用特定的名称表示，如：index.htm default.htm。 超链接：一种与其它文件的链接，当用户单击后，所链接的网页信息显示出来（实为网页文件地址路径及名称）。 网站：在逻辑上可视为一个整体的一系列网页的集合称为网站（Web Site或Site）, 网页之间用超级连接进行连接。,网站用于构成一个WWW信息服务器，提供一定范围内的信息资源；如一个学校，一个企业、一个公司等的WWW服务器。,二、网页设计的基本方式 1、手工编码方式 网页是由HTML超文本标记语言编码的文档，设计制作网页的过程就

4、是生成HTML代码的过程。 在WWW（World Wide Web ）发展的初期人们制作网页是通过直接编写HTML代码来实现的。,2、可视化工具方式 用FrontPage、Dreamweaver等网页编辑工具在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。 如制作表格，就可以直接在工作区中绘制表格而不用考虑编码的规则和语法。 利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但在制作一些特殊网页效果上有一定的局限性。,3、编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网页制作方式。 具体过程：一般的网页元素通过可视化工具编辑制作，一些特殊的网

5、页效果通过插入代码生成。,三、网页中的常见元素 1、文本 文本是网页发布信息所用的主要形式，由文本制作出的网页占用空间小，传输速度快。 网页中的信息以文本为主。虽然不如图象那样能够很快引起浏览者的注意，但能准确地表达信息的内容和含义。为了克服文本固有的缺点，人们赋予了文本更多的属性，如字体，字号，颜色，底纹和边框等，通过不同格式的区别，表现不同的内容。,2、图像和动画 图像在网页中具有提供信息，展示作品，装饰网页，表达个人情调和风格的作用。 用户可以在网页中使用GIF, JPEG(JPG), PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。,3、声音和视频 声音是多媒体网页的一

6、个重要组成部分。 用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。 视频文件的格式也非常多，常见的有Realplay(RM), MPEG, AVI和DivX等。 不支持的格式，尽量少用或者不用。,4、超级链接 超级链接技术可以说是万维网流行起来的最主要的原因。 从本质上讲，是指向目的信息页面文件的地址信息。 可以指向一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。,5、表格 在网页中表格用来控制网页中信息的布局方式。 这包括两方面： 一是使用行和列的形式来布局文本和图像以及其他的列表化数据； 二是可以使用表格来精确控制各种网页元素在网页中出现

7、的位置。 即作为一种容器。,6、表单 使用超级链接，浏览者和Web站点便建立起了一种简单的交互关系。网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。 即问答式交流。,7、导航栏 导航栏的作用就是引导浏览者游历站点。 网站中的导航系统，实质上就是一组使用了超链接技术的网页对象（包括文字、按钮、小图片、图形等），它们将网站中的内容有机地连接在一起。,四、网页元素的创作与编辑工具 1、网页图像制作工具 、Fireworks MX Firework MX是Macromedia公司的产品，是目前最流行的网页图像制作软件。 、Photo shop,2、动画制作工具 、F

8、lash MX Flash MX也是Macromedia公司的产品，是目前最流行的矢量动画制作软件。 、Director Director是Macromedia公司推出的多媒体开发工具，它为广大多媒体制作人员提供了建立交互式应用的强大功能。,3、网页编辑工具 、FrontPage FrontPage是Microsoft Office家族中的一员，FrontPage的界面，功能与Word非常相似。 操作方法与 Office软件一致。,、Dreamweaver MX Dreamweaver MX和Fireworks MX、Flash MX一起，被人们喻为“网页制作三剑客”。 、HotDog Hot

9、Dog是较早基于代码的网页设计工具，其最具特色的地方是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。,四、文档的超链接 1、统一资源定位器URL URL（Uniform Resource Locator）即统一资源定位器，是指文档在Web上的具体地址，指出了文件在Internet中的位置。它的作用相当于门牌号码。 事实上，URL是一类似Windows 或DOS路径的东西，用来指定存储数据或文件的装置及文件夹。 URL由协议名、服务器地址、文件在服务器中的路径（即目录）和文件名四部分构成。,2、超链接 、链接到其他站点（文档） 在HTML文档中，当需要链接其他文档时，应使用标签。 方法格

10、式：anchor name 其中是超链接标签，HREF是一个标签属性。 如：zzz,【例】超链接标签应用示例。超链接示例登记前请参阅研究生考试简章,链接到本页的另一位置或其他页面中的特定位置 超链接可以指向本页面中的任何位置，这种链接方式叫做本地链接。 定位锚(Anchors)被用来指定本页中的某一位置。在某一位置定义“锚”需要使用下列格式的标签： name属性将放置该标记的地方标记为“KKK”，KKK是一个全文唯一的标记串。,做好“记号”后，可以用下列方法来建立指向它的超链接： 转向下一处 注意：在超级链接中由#引导。,网页设计,网站维护,F&Q,网站开发,静态网页与动态网页的区别,动态网页

11、的特点: (1)动态网页以数据库技术为基础,可以大大减少降低网站维护的工作量; (2)采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理等等; (3)动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页,静态网页的特点: (1)静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”; 2)网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保 存在服务器上的文件,每个网页都是一个

12、独立的文件; (3)静态网页的内容相对稳定,因此容易被搜索引擎检索; (4)静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大,网页设计,网站维护,F&Q,网站开发,动态网页与数据库的链接方式,通过ODBC连接数据库,通过网页制作软件控件连接数据库,ODBC方式,1. 打开ODBC数据源管理器面板。 在windows XP打开控制面板，再打开管理工具，你就能看到数据源（ODBC）这一项了，对windows9x来讲，则直接在控制面板中就可以看到。,双击图标打开管理器，再选择 系统DSN ，我们的数据源是在这里添加的。,2. 添加数据源。点击添加按钮，开始创建数据源，在

13、接下来的对话框中选择数据源的驱动程序，因我们使用的是Microsoft Access创建的数据库，所以选择Microsoft Access Driver(*.mdb)作为数据库驱动程序，如图所示。,点击完成按钮，显示下图的对话框，数据源名随便填写即可，以简单易记为原则，这里我们以userinfo（表名）来命名，注意不要冲突。说明填不填都无所谓，是描述这个数据库的用途而已。点击选择按钮，选择你的数据库文件。找到我们在上一节中创建的数据库，选中即可，如图。,确定后，一个数据源就创建成功了，如图所示。,调用数据源,JSP 中关于数据库加载连接的代码是 Class.forName( “sun.jdbc

14、.odbc.JdbcOdbcDriver ”); Connection con=DriverManager.getConnection( “jdbc:odbc:testDB:uid=用户名;pwd=密码 “);,网页设计,网站维护,F&Q,网站开发,什么叫JavaScript？,JavaScript 是一种居于 Java 程序语言的脚本语言。JavaScript 语言设计出来是用在居于 web 的网页（包括客户端和服务器端）上的，这个文档里的内容只涉及了客户端的 JavaScript(它是被嵌入到网页中的 HTML 代码中，并且由浏览器来执行的脚本语言)。 JavaScript 语言可以设计和

15、访问一个 web 页面中的所有元素，如：图片元素（images）、 表单元素（form elements）、链接（links）等等。 这些对象属性等在 JavaScript 程序运行中可以被复制、修改。JavaScript 还可以捕捉客户端用户对当前网页的动作，如：鼠标的点击动作或者键盘的输入动作等等。JavaScript 的这些功能使我们能够对用户的输入等动作做出想对应的反应动作，从而实现一些交互性,还有一些平常经常用到的 JavaScript 的例子，如鼠标移动、表单过滤、动画等等。,网页设计,网站维护,F&Q,网站开发,DIV+CSS+JS,div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。,JavaScript 可以使网页有动态的效果。又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。,网站的维护,F&Q,网站开发,网页设计,网站维护,网站维护（一） 静态网站静态网站的维护和管理需要一定技术能力，用户要懂得HTML代码或会使用Dreamweaver等专业工具才能发布和修改网站信息。,网站维护（二） 动态网站动态网站的维护和管理可以利用数据库技术，使用网站后台方便对网站中的信息进行发布和修改。,