Embed Size (px)
Citation preview
第 1 章 网页制作基础
网页设计与制作
南海学院计算机系制作
23/4/15 2
第 1 章 网页制作基础 WebWeb 和浏览器和浏览器 WebWeb
WebWeb 的特点和结构的特点和结构 WebWeb 最大的特点是使用了超文本（最大的特点是使用了超文本（ HypertexHypertex
tt ）） WWWWWW 采用采用 C/SC/S （客户机（客户机 // 服务器）工作模式服务器）工作模式 在浏览器和服务器之间应用在浏览器和服务器之间应用 HTTPHTTP （（ Hyper TexHyper Tex
t Transfer Protocolt Transfer Protocol ，超文本传输协议）作为网，超文本传输协议）作为网络应用层通信协议络应用层通信协议
23/4/15 3
URL Internet 上所有的资源都有一个唯一的 U
RL 地址，一般将 URL 地址称为网址。
URL 的完整格式如下：
协议 :// 主机名（或 IP 地址）：端口号 / 路径名 / 文件名
23/4/15 4
【例】几个 URL 的例子 .
（ 1 ） http://www.microsoft.com ，用http 协议和缺省端口号（ 80 ）访问微软公司服务器 www.microsoft.com 。这里没有指定路径和文件名，所以访问的结果是把一个缺省主页送给浏览器。
（ 2 ） ftp://ftp.pku.edu.cn/pub/ms-windows/winvn926.zip ，用 FTP 协议访问北京大学 FTP 服务器上路径名为 pub/ms-windows 、文件名为 winvn926.zip 的文件。
23/4/15 5
（ 3 ） http://gnacademy.org: 8001///uu-gna/index.html ，从运行在端口号 8001 的 gnacademy.org 服务器上访问 index.html 主页。
（ 4)http://www.w3.org/Addressing/URL/5-BNF.html#httpaddress ，访问 www.w3.org 服务器上 Addressing/URL 目录下的 5-BNF.html 网页文件中锚点标识为 httpaddress 的地方。
23/4/15 6
浏览器概述分类 Internet ExplorerNetscape NavigatorMosaic 等专业浏览器以及一些以上述浏览器为内核的专用浏览器。 其中使用最广泛的是 Microsoft 出品的 Inte
rnet Explorer 6.0 （简称 IE6 ）。
23/4/15 7
IE6的界面标题栏
工具栏
菜单栏
地址栏
状态栏
浏览窗口
23/4/15 8
IE6.0IE6.0 的使用的使用 浏览网页浏览网页
“ 停止”按钮前进和后退刷新页面改变文字大小选择编码全屏幕显示查看源文件
23/4/15 9
打开多个窗口打开多个窗口 用菜单栏上的“文件”→“新建”→“窗口”，会
打开一个新的浏览器窗口。
一般情况下，打开四、五个窗口可以充分利用系统资源，而且通过调整窗口的大小和位置还可以同时浏览。
23/4/15 10
主页、临时文件和历史记录主页、临时文件和历史记录 浏览器在打开
时自动调入的网页称为“主页”，主页可以通过“工具”→“ Internet
选项”打开 Intern
et 选项对话框，在“常规”选项卡的“主页”栏设置 .
23/4/15 11
收藏夹的使用收藏夹的使用
使用菜单“收藏”→“添加到收藏夹”打开添加到收藏夹对话框。
23/4/15 12
使用菜单“收藏”→“整理收藏夹”打开收藏夹整理对话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。
23/4/15 13
关闭图片显示关闭图片显示 在网络速度较慢时，不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”→“ Interne
t 选项”打开 Internet 选项对话框，在“高级”选项卡中可以对浏览器的工作方式进行设置
23/4/15 14
关闭自动完成功能关闭自动完成功能
通过工具→ Internet选项，打开 Internet选项对话框，在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框 。
23/4/15 15
搜索引擎的使用
1 、使用浏览器的“搜索”按钮2 、使用专门的搜索引擎 http://www.google.cn (Google)
http://www.baidu.com ( 摆渡 )
http://www.yahoo.com ( 雅虎 )
http://www.sohu.com ( 搜狐 )
23/4/15 16
认识网站 1. 门户网站
2. 个人网站
3. 专业网站
4. 职能网站
23/4/15 17
1. 门户网站 这类网站是一种综合性网站，涉及领域
非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（ www.sohu.com ）、网易（ www.163.com ）等。
23/4/15 18
2. 个人网站个人网站具有较强个性化，是以个人名
义开发创建的网站，其内容、样式、风格等都是非常有个性的。
23/4/15 19
3. 专业网站
这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（ www.rongshuxia.com ）即是一个专业文学网站。
23/4/15 20
4. 职能网站职能网站具有专门的功能，如政府职能
网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（ china.alibaba.com ）、卓越网（ www.joyo.com ）和当当网上书店（ www.dangdang.com ）等。
23/4/15 21
认识网页
Flash 动画导航栏GIF 动画文字表单
图片
超级链接
23/4/15 22
网页中的元素1. 文字2. 图像3.表单4.Flash 动画5. 表格6. 超级链接7. 视频、音频8. POP 窗口9. 标题栏和状态栏文字
23/4/15 23
1.21.2 网页制作的相关知识 网页制作的相关知识 HTMLHTML 语言概述语言概述 是一种超文本标记语言，作为一种网页编是一种超文本标记语言，作为一种网页编辑语言，易学易懂。辑语言，易学易懂。
23/4/15 24
11 、、 HTMLHTML 网页网页 HTMLHTML 网页通常是由三部分内容组成的：网页通常是由三部分内容组成的：版本信息、网页标题（版本信息、网页标题（ HEADHEAD ）和文档主体）和文档主体（（ BODYBODY ）。）。 下面就是网页结构的总体框架：
<!HTML 网页版本信息说明 ><HTML> <HEAD> <! 标题标记、属性及其内容 > </HEAD> <BODY> <! 主体标记、属性及其内容 > </BODY></HTML>
23/4/15 25
（ 1 ）版本信息 版本信息位于 HTML 网页文件的第一行
（ 2 ） HTML 文件标记 大部分网页文件都是以 <HTML> 标记开始的，在文件的结尾处又以 </HTML> 结束
（ 3 ）头部信息 HEAD 标记之间是 HTML 文档的头部，用来标明当前文档的有关信息
在 HEAD 标记之间，使用频率最高的标记就是 TITLE ，它用于定义显示在浏览器标题栏的文档标题。
23/4/15 26
【例】给网页设置 “励志学社”的文档标题，可在头部输入以下代码：<TITLE>励志学社 </TITLE>
23/4/15 27
（ 4 ）主体标记 网页的主体是“ <BODY>……</BODY>” 标记对作用的范围
<BODY> 标记用于定义 HTML 文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：<BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color> Bgcolor 为背景颜色。关于颜色的值后面会详细介绍。 Text 为不包含超级链接的文字颜色。 Link 为超级链接文字的颜色。 Alink 为正被点击的超级链接文字的颜色。
23/4/15 28
Leftmargin 、 Topmargin 用于设置网页的左边距和上边框，它们是以像素为单位
【例 1 】将网页的上边距和左边距分别设置为 40
和 30 个像素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记为暗红色。
<BODY Background="moom.gif" Bgcolor="Whi
te" Bgproperties=Fixed Leftmargin=30 Link="Bl
ue" Text="Black" Topmargin=40 Vlink="Maroo
n">
Vlink 为已经点击过的超级链接文字的颜色。 Background 设置，如果设置了背景图片，图片会覆盖已经设置的颜色。
23/4/15 29
22 、、 XMLXML 语言语言
XML （ eXtensible Markup Language ）被称作是下一代的网页标记语言，也是采用各种标记来形成网页的源代码。
XML 中包括可扩展格式语言XSL(Extensible Style Language) 和可扩展链接语言 XLL(Extensible Linking Language) 。
23/4/15 30
1.22 1.22 静态网页和动态网页静态网页和动态网页
静态网页指基本上全部使用HTML语言制作的网页，页面的内容是固定不变的。
动态网页（ DynamicHTML ，DHTML ）利用 JavaScript ， CSS ( 层叠样式表 ) 及其它类似的语言如 VBScript 等与 HTML 进行有机的结合来使静态的 HTML 网页变成动态。
23/4/15 31
1.23 Web1.23 Web 服务器端程序服务器端程序 专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过浏览器显示和操作的 Web 页面，就需要编写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择结果等）需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。 目前常用的服务器端编程技术主要有CGI 、 ASP 、 PHP 、 JSP 等，不同的技术需要不同的系统环境支持。
23/4/15 32
1.3 1.3 网页制作的基本方法网页制作的基本方法 制作网页的基本步骤制作网页的基本步骤
1 、确定网页的内容
2 、设计网页的组织结构
3 、资料的收集与整理
4 、选择网页的设计方法
常用的网页制作工具有 Frontpage 、 Dreamweaver 等。服务器端的 ASP程序可以使用 Visual Interdev 、 UltraDEV 等编辑。
23/4/15 33
开始网页制作
构建页面框架 创建导航条 填充内容 创建返回主页连接
23/4/15 34
网页制作的原则 站点要有创意 整体规划 动画不能过多 导航要明朗 制作通用网页 主题鲜明 优化图象 定时更新
23/4/15 35
制作网页时要注意的问题制作网页时要注意的问题
1 、网页的标题要简洁，明确。 2 、在文本中要使用水平线，以分割不同部分。 3 、对重点段落要强调显示。 4 、网页中插入的图片要尽量的小。 5 、图形要附加文字说明，以便关闭图像时查看。
6 、网页中引用的资料及商标（或图标），不能侵犯版权。
23/4/15 36
1.4 Macromedia Studio MX20041.4 Macromedia Studio MX2004
Macromedia Studio MX2004 是目前应用最广泛的网页制作工具组件，使用方便、功能齐全，Dreamweaver 、 Flash 、 Fireworks被称作“网页三剑客”。
在 Dreamweaver 里用丰富的层叠样式表制作耐看，专业的网站。
Macromedia Flash 工具可较快的制作 SWF 文件。
Fireworks 通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的 Fireworks 图片。
23/4/15 37
思考题思考题1.1 1.1 什么是什么是 WWWWWW？什么是网页？？什么是网页？
1.2 1.2 一个完整的一个完整的 URLURL由哪几部分组成？由哪几部分组成？举出几个举出几个 URLURL 的例子。的例子。
1.3 1.3 如何设置如何设置 IEIE 的主页？如何用的主页？如何用 IEIE 收藏收藏一个网页？一个网页？
1.4 1.4 网页中一般都使用了哪些技术？网页中一般都使用了哪些技术？
1.5 Macromedia Studio MX20041.5 Macromedia Studio MX2004 有哪有哪几部分组成？几部分组成？
