《了解网站建设的基本条件》由会员分享,可在线阅读,更多相关《了解网站建设的基本条件(57页珍藏版)》请在金锄头文库上搜索。
1、了解网站建设的基本条件,第三讲主题:,张耀乐,网站运营,Website construction,网页设计,网站维护,问题,网站开发,网站开发,网站开发,网页设计,网站维护,F&Q,网站开发,域名, 顶级域名 二级域名 国内二级域名和国际三级域名,网站开发,网页设计,网站维护,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超文本标记语言编码的文档,设计制作网页的过程就是生成HT
4、ML代码的过程。 在WWW(World Wide Web )发展的初期人们制作网页是通过直接编写HTML代码来实现的。,2、可视化工具方式 用FrontPage、Dreamweaver等网页编辑工具在可视环境下编辑制作网页元素,由编辑工具自动生成对应的网页代码。 如制作表格,就可以直接在工作区中绘制表格而不用考虑编码的规则和语法。 利用可视化工具编辑网页操作简单直观,调试方便,是大众化的网页编辑方式。但在制作一些特殊网页效果上有一定的局限性。,3、编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网页制作方式。 具体过程:一般的网页元素通过可视化工具编辑制作,一些特殊的网页效果通过
5、插入代码生成。,三、网页中的常见元素 1、文本 文本是网页发布信息所用的主要形式,由文本制作出的网页占用空间小,传输速度快。 网页中的信息以文本为主。虽然不如图象那样能够很快引起浏览者的注意,但能准确地表达信息的内容和含义。为了克服文本固有的缺点,人们赋予了文本更多的属性,如字体,字号,颜色,底纹和边框等,通过不同格式的区别,表现不同的内容。,2、图像和动画 图像在网页中具有提供信息,展示作品,装饰网页,表达个人情调和风格的作用。 用户可以在网页中使用GIF, JPEG(JPG), PNG三种图象格式,其中使用最广泛的是GIF和JPEG两种格式。,4、超级链接 超级链接技术可以说是万维网流行起
6、来的最主要的原因。 从本质上讲,是指向目的信息页面文件的地址信息。 可以指向一幅图片,一个电子邮件地址,一个文件,一个程序或者是本网页中的其他位置。,3、声音和视频 声音是多媒体网页的一个重要组成部分。 用于网络的声音文件的格式非常多,常用的有MIDI、WAV、MP3和AIF等。 视频文件的格式也非常多,常见的有Realplay(RM), MPEG, AVI和DivX等。 不支持的格式,尽量少用或者不用。,5、表格 在网页中表格用来控制网页中信息的布局方式。 这包括两方面: 一是使用行和列的形式来布局文本和图像以及其他的列表化数据; 二是可以使用表格来精确控制各种网页元素在网页中出现的位置。
7、即作为一种容器。,6、表单 使用超级链接,浏览者和Web站点便建立起了一种简单的交互关系。网页中的表单通常用来接受用户在浏览器端的输入,然后将这些信息发送到用户设置的目标端。 即问答式交流。,7、导航栏 导航栏的作用就是引导浏览者游历站点。 网站中的导航系统,实质上就是一组使用了超链接技术的网页对象(包括文字、按钮、小图片、图形等),它们将网站中的内容有机地连接在一起。,四、网页元素的创作与编辑工具 1、网页图像制作工具 、Fireworks FireworkMacromedia公司的产品,是目前最流行的网页图像制作软件。 、Photoshop,2、动画制作工具 、Flash Flash MX
8、也是Macromedia公司的产品,是目前最流行的矢量动画制作软件。,3、网页编辑工具 、FrontPage FrontPage是Microsoft Office家族中的一员,FrontPage的界面,功能与Word非常相似。 操作方法与 Office软件一致。,、Dreamweaver Dreamweaver MX和Fireworks MX、Flash MX一起,被人们喻为“网页制作三剑客”。 、HotDog HotDog是较早基于代码的网页设计工具,其最具特色的地方是提供了许多向导工具,能帮助设计者制作页面中的复杂部分。,四、文档的超链接 1、统一资源定位器URL URL(Uniform
9、Resource Locator)即统一资源定位器,是指文档在Web上的具体地址,指出了文件在Internet中的位置。它的作用相当于门牌号码。 事实上,URL是一类似Windows 或DOS路径的东西,用来指定存储数据或文件的装置及文件夹。 URL由协议名、服务器地址、文件在服务器中的路径(即目录)和文件名四部分构成。,2、超链接 、链接到其他站点(文档) 在HTML文档中,当需要链接其他文档时,应使用标签。 方法格式:anchor name 其中是超链接标签,HREF是一个标签属性。 如:zzz,【例】超链接标签应用示例。超链接示例登记前请参阅研究生考试简章,链接到本页的另一位置或其他页面
10、中的特定位置 超链接可以指向本页面中的任何位置,这种链接方式叫做本地链接。 定位锚(Anchors)被用来指定本页中的某一位置。在某一位置定义“锚”需要使用下列格式的标签: name属性将放置该标记的地方标记为“KKK”,KKK是一个全文唯一的标记串。,做好“记号”后,可以用下列方法来建立指向它的超链接: 转向下一处 注意:在超级链接中由#引导。,网页设计,网站维护,F&Q,网站开发,静态网页与动态网页的区别,动态网页的特点: (1)动态网页以数据库技术为基础,可以大大减少降低网站维护的工作量; (2)采用动态网页技术的网站可以实现更多的功能,如用户注册、用户登录、在线调查、用户管理、订单管理
11、等等; (3)动态网页实际上并不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回一个完整的网页,静态网页的特点: (1)静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”; 2)网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保 存在服务器上的文件,每个网页都是一个独立的文件; (3)静态网页的内容相对稳定,因此容易被搜索引擎检索; (4)静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大,网页设计,网站维护,F
12、&Q,网站开发,动态网页与数据库的链接方式,通过ODBC连接数据库,通过网页制作软件控件连接数据库,ODBC方式,1. 打开ODBC数据源管理器面板。 在windows XP打开控制面板,再打开管理工具,你就能看到数据源(ODBC)这一项了,对windows9x来讲,则直接在控制面板中就可以看到。,双击图标打开管理器,再选择 系统DSN ,我们的数据源是在这里添加的。,2. 添加数据源。点击添加按钮,开始创建数据源,在接下来的对话框中选择数据源的驱动程序,因我们使用的是Microsoft Access创建的数据库,所以选择Microsoft Access Driver(*.mdb)作为数据库驱
13、动程序,如图所示。,点击完成按钮,显示下图的对话框,数据源名随便填写即可,以简单易记为原则,这里我们以userinfo(表名)来命名,注意不要冲突。说明填不填都无所谓,是描述这个数据库的用途而已。点击选择按钮,选择你的数据库文件。找到我们在上一节中创建的数据库,选中即可,如图。,确定后,一个数据源就创建成功了,如图所示。,调用数据源,JSP 中关于数据库加载连接的代码是 Class.forName( “sun.jdbc.odbc.JdbcOdbcDriver ”); Connection con=DriverManager.getConnection( “jdbc:odbc:testDB:ui
14、d=用户名;pwd=密码 “);,网页设计,网站维护,F&Q,网站开发,什么叫JavaScript?,JavaScript 是一种居于 Java 程序语言的脚本语言。JavaScript 语言设计出来是用在居于 web 的网页(包括客户端和服务器端)上的,这个文档里的内容只涉及了客户端的 JavaScript(它是被嵌入到网页中的 HTML 代码中,并且由浏览器来执行的脚本语言)。 JavaScript 语言可以设计和访问一个 web 页面中的所有元素,如:图片元素(images)、 表单元素(form elements)、链接(links)等等。 这些对象属性等在 JavaScript 程序
15、运行中可以被复制、修改。JavaScript 还可以捕捉客户端用户对当前网页的动作,如:鼠标的点击动作或者键盘的输入动作等等。JavaScript 的这些功能使我们能够对用户的输入等动作做出想对应的反应动作,从而实现一些交互性,还有一些平常经常用到的 JavaScript 的例子,如鼠标移动、表单过滤、动画等等。,网页设计,网站维护,F&Q,网站开发,DIV+CSS+JS,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,可实现网页页面内容与表现相分离。,JavaScript 可以使网页有动态的效果。又是在客户机上执行的,大
16、大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。,网站的维护,F&Q,网站开发,网页设计,网站维护,网站维护(一) 静态网站静态网站的维护和管理需要一定技术能力,用户要懂得HTML代码或会使用Dreamweaver等专业工具才能发布和修改网站信息。,网站维护(二) 动态网站动态网站的维护和管理可以利用数据库技术,使用网站后台方便对网站中的信息进行发布和修改。,网站维护(三)网站建设完成后,需要将网站放在某个地方,目前方式有以下两种:自己购买服务器使用虚拟主机,自己购买服务器需要有技术人员对服务器进行日常的管理,包括防止黑客攻击、病毒侵害等。可以使用特殊的用途,例如使用特殊的数据库系统、存放大量视频点播文件等。自己管理没有专业的服务器机房,不能保证24小时不断电。委托管理有专业服务器机房,同时保证全年不断电。,