网页设计与制作20091

1、网页设计与制作l 基础知识基础知识l 网页设计网页设计l HTML语言语言 l 脚本语言脚本语言l 网页发布网页发布l Dreamweaver 5基础知识基础知识u 概 述u 网站浏览原理u 网站设计原则网页制作全球信息网全球信息网: WWW (World Wide Web，即，即Web ) 基于基于Internet的信息服务系统，向用户提供一个以超的信息服务系统，向用户提供一个以超 文本技术为基础的多媒体的全图形浏览界面；所有文本技术为基础的多媒体的全图形浏览界面；所有 WWW的页面都是用的页面都是用HTML编写的文件。编写的文件。超文本标记语言超文本标记语言: HTML Hyper Tex

2、t Markup Language 其格式为其格式为ASCII码码, 即纯文本文件即纯文本文件, 是是WWW用于建立用于建立 与识别超文本文档的标准语言。与识别超文本文档的标准语言。基础知识l 概概 述述基础知识l 概概 述述基础知识l 概概 述述基础知识l 网站浏览原理网站浏览原理基础知识l 网站设计原则网站设计原则 - 主题定位主题定位制作网站首先要考虑网站的制作网站首先要考虑网站的主题主题。好的。好的网站不仅应该有美感、个性、创意，更网站不仅应该有美感、个性、创意，更要有质量。要有质量。网站的网站的内容内容是最重要的是最重要的基本因素基本因素，空洞，空洞的网站对人没有任何吸引力。的网站对

3、人没有任何吸引力。基础知识l 网站设计原则网站设计原则 - 题材选择题材选择主题要小而精；主题要小而精；题材最好是自己擅长或者喜爱的内容，题材最好是自己擅长或者喜爱的内容，题材不要太滥或者目标太高；题材不要太滥或者目标太高；网站名称要正气、易记、要有特色。网站名称要正气、易记、要有特色。 （体现自己的个性）（体现自己的个性）网站的题材主要有：网站的题材主要有：新闻、体育、聊天、即时新闻、体育、聊天、即时信息、信息、 ICQ、社区、邮件列表、计算机技术、社区、邮件列表、计算机技术、网页网页/网站开发、娱乐、旅行、参考、资讯、求网站开发、娱乐、旅行、参考、资讯、求职、家庭、教育、生活、时尚以及一些

4、体现个职、家庭、教育、生活、时尚以及一些体现个人特色和爱好等的网站。人特色和爱好等的网站。网站的名称网站的名称很重要，它在很大程度上也决定了整个很重要，它在很大程度上也决定了整个网站的定位。网站的名称要有概括性、简短、有特网站的定位。网站的名称要有概括性、简短、有特色、容易记，还要符合自己网站的主题和风格。色、容易记，还要符合自己网站的主题和风格。例：闪客帝国、清风文苑、红果园等。例：闪客帝国、清风文苑、红果园等。基础知识l 网站设计原则网站设计原则 - 基础知识基础知识几种设计几种设计LogoLogo的方法的方法网站的色彩搭配网站的色彩搭配基础知识网站的标准字体网站的标准字体网页网页默认默认

5、的字体：的字体：中文为中文为“宋体宋体” 9磅字磅字 英文为英文为“Times New Roman”基础知识5网页设计网页设计u 网页的类型u 网页制作方法u 网页版面布局u 网页制作三剑客 网页制作网页制作基于客户端：基于客户端： 静态网页（静态网页（htm） 动态页面（动态页面（DHTML、 JavaScript ）网页的类型网页的类型基于服务器端：基于服务器端： 动态页面（动态页面（ASP、PHP、JSP等）等）n Deamweaver是网页编辑软件是网页编辑软件n Fireworks是图形是图形/图像处理软件图像处理软件n Flash是矢量动画编辑软件是矢量动画编辑软件编程基础编程基础

6、网页设计何谓动态网页何谓动态网页 动态网页，重点在动态网页，重点在“态态”，即状态上。同一，即状态上。同一个网页文件在这一状态显示这个内容，而在另一个网页文件在这一状态显示这个内容，而在另一状态则显示完全不同的内容了，即随着请求的不状态则显示完全不同的内容了，即随着请求的不同，产生不同的网页。同，产生不同的网页。 （实现网页的动态更新与发布实现网页的动态更新与发布） 动态网页技术的出现使得网页从单纯的展示动态网页技术的出现使得网页从单纯的展示平台变成了网络平台变成了网络交互交互平台。平台。 动态网页一般以数据库技术为基础，可将相关动态网页一般以数据库技术为基础，可将相关信息通过动态网页录入到数

7、据库，又可通过动态信息通过动态网页录入到数据库，又可通过动态网页将数据库内容显示出来；其文件后缀一般与网页将数据库内容显示出来；其文件后缀一般与产生的服务器技术相匹配，如产生的服务器技术相匹配，如ASP技术的网页后技术的网页后缀是缀是“.asp”、 JSP技术是技术是“.jsp” 等；等； 采用动态网页，可以实现交互功能，如用户的采用动态网页，可以实现交互功能，如用户的注册和登录、在线留言、论坛、网上调查、网上注册和登录、在线留言、论坛、网上调查、网上教学和投票等。教学和投票等。何谓动态网页？何谓动态网页？ 直接直接编写编写HTMLHTML源代码源代码 利用制作工具利用制作工具n 利用任何文本

8、编辑软件利用任何文本编辑软件 保存为纯文本文件即可保存为纯文本文件即可 （htm 或或 html ）n 通过编辑窗口编辑网页通过编辑窗口编辑网页(不需要不需要html 源代码源代码) 如如: FrontPage、Dreamweaver n JavaScript、Java、ASP、CGI、PHP、JSPn Fireworks 、Flash网页制作方法网页制作方法网页设计 确定网页的功能模块确定网页的功能模块 设计网页的版面设计网页的版面 处理技术上的细节处理技术上的细节网页设计网页设计网页版面布局网页版面布局网页设计 页面属性页面属性 页面设计（表格、框架）页面设计（表格、框架） 填写内容填写内

9、容 添加链接和交互添加链接和交互 其它内容其它内容 和首页保持相同的风格和首页保持相同的风格 要有返回首页的链接要有返回首页的链接 目录结构不要超过四层目录结构不要超过四层l 什么是网络三剑客？什么是网络三剑客？p Dreamweaverp Fireworksp Flash U是是MacromediaMacromedia公司网页设计公司网页设计“三剑客三剑客”之之“火火焰焰”，它以处理网页图片为特长，并可以轻松创，它以处理网页图片为特长，并可以轻松创作作GIFGIF动画。动画。 U是由美国著名的软件开发商是由美国著名的软件开发商MacromediaMacromedia公司推出的一个公司推出的一

10、个“所见所见即所得即所得”的可视化网站开发工具。的可视化网站开发工具。 U是是MacromediaMacromedia公司网页三剑客之中的公司网页三剑客之中的“闪电闪电”，其以制作网上动画为特长，它做出的动画声音动其以制作网上动画为特长，它做出的动画声音动画效果都是其他软件无法比拟的。画效果都是其他软件无法比拟的。 Macromedia与与Adobe 网页设计5HTML语言语言u 定义u HTML文档的基本结构u HTML的基本单位u URL路径 网页制作网页制作 HTML：超文本超文本标记标记语言语言 即描述文件即描述文件格式格式的语言的语言 专门用来编写网页专门用来编写网页 常用的文本编辑

11、软件常用的文本编辑软件: EditPlus、UltraEdit (新浪网下载新浪网下载) 记事本、写字版等记事本、写字版等HTML的定义的定义格式格式1：对象对象格式格式2：对象对象格式格式3：标记的一般格式标记的一般格式功能：功能：描述文件格式，描述文件格式，格式格式由浏览器解释和执行。由浏览器解释和执行。用标记书写用标记书写超文本标记语言：超文本标记语言：HTML 文件头文件头 文件标题文件标题 文件体文件体 HTML文件是以各种功能的元素所组成文件是以各种功能的元素所组成 用于描述这些功能元素的符号称为用于描述这些功能元素的符号称为标记标记 标记基本上是成对出现标记基本上是成对出现(英文

12、或英文缩写英文或英文缩写)特点特点HTML文档的基本结构文档的基本结构 文件头文件头 文件标题文件标题 文件体文件体 对象对象 对象对象 标记的一般格式标记的一般格式( (语法语法) ) 一对起始一对起始/终止标记以及他们之间的所有内容终止标记以及他们之间的所有内容 元素能独立体现一种页面效果或实现一种功能元素能独立体现一种页面效果或实现一种功能元素元素HTML 语言的指令语言的指令(元素元素)窗口中显示的内容窗口中显示的内容定义文本属性标记语法格式定义文本属性标记语法格式: :计算机计算机示示 例例段落标记语法格式示例段落标记语法格式示例: :标记参数值标记参数值标记参数值标记参数值HTML

13、的基本单位的基本单位长度单位长度单位: 定义水平线、表格边框、图像等的长、宽、定义水平线、表格边框、图像等的长、宽、 高及对象在页面上的位置等属性高及对象在页面上的位置等属性。分类分类: 绝对长度绝对长度 / 相对长度相对长度示例示例: : 在页面上建立水平线标记在页面上建立水平线标记 绝对长度绝对长度 相对长度相对长度水平线的宽度为水平线的宽度为400像素像素水平线占据窗口的水平线占据窗口的50%的宽度的宽度颜色单位颜色单位: 定义字体、页面定义字体、页面/表格背景及超连接的颜色表格背景及超连接的颜色格式格式1: 16进制颜色代码进制颜色代码 #RRGGBB格式格式2: 10进制进制RGB码

14、码 RGB(RRR, GGG, BBB)格式格式3: 直接颜色名称直接颜色名称 示例示例: COLOR= red 颜色单位颜色单位: 定义字体、页面定义字体、页面/表格背景及超连接的颜色表格背景及超连接的颜色格式格式1: 16进制颜色代码进制颜色代码 #RRGGBBRR代表红色代表红色( 00FF )GG代表绿色代表绿色( 00FF )BB代表兰色代表兰色( 00FF )RRR代表红色代表红色( 0255 )GGG代表绿色代表绿色( 0255 )BBB代表兰色代表兰色( 0255 )HTML的基本单位的基本单位表格示例表格示例 职工档案职工档案 基本信息基本信息 赵华赵华 男男33岁岁 干部干

15、部党员党员 毕业学校毕业学校 清华大学清华大学 典型典型HTML示例示例5脚本语言脚本语言u 脚本语言脚本语言u 客户端脚本客户端脚本u 服务器端脚本服务器端脚本u 脚本标记脚本标记 网页制作网页制作一种嵌入在网页中的解释型语言一种嵌入在网页中的解释型语言脚本语言脚本语言客户端脚本客户端脚本服务器端脚本服务器端脚本 控制网页元素的外观和行为控制网页元素的外观和行为 (创作动态的创作动态的、交互式的网页交互式的网页) 在客户端计算机上被浏览器执行在客户端计算机上被浏览器执行 调用服务器端部件及操作服务调用服务器端部件及操作服务 器端数据库器端数据库, 实现向客户端用实现向客户端用 户发送动态信息

16、的功能户发送动态信息的功能 在服务器端被在服务器端被Web服务器执行服务器执行脚本语言脚本语言 JavaScriptJscriptVBSVBScript脚本语言脚本语言: JavaScript即即: Java语法和函数语法和函数脚本语言脚本语言: VBScript即即: Visual Basic 语法和函数语法和函数脚本标记格式脚本标记格式l JavaScript 代码格式代码格式 l 放于放于 标识或标识或 标识之中标识之中JavaScript的引入的引入注意：注意：JavaScript 代码有大、小写之分，在写代码有大、小写之分，在写 JavaScript脚本时要严格区分，否则，得脚本时要严格区分，否则，得 不到所需结果。不到所需结果。脚本语言 JavaScript应用示例应用示例 var first=w