网页制作与网站设计教学课件.ppt

WWW信息发布模式：
• WWW信息发布：采用客户端/服务器（Client / Server）模式。WWW服务器程序运行在WWW服务 器上，用于发布存放在WWW服务器中的网页；
下一页
WWW客户端程序运行在用户计算机上的网页浏览
1. 网站设计的基本知识
HTTP协议 • 超文本传输协议HTTP（Hyper Text Transfer Protocol）是 WWW服务所使用的信息传输协议，即访问Internet上的 Web页面所用协议。 • 打开Internet上某一网页：HTTP://<WWW服务器的域名 或ip地址>/<目录路径>/<文件名> 如：/wlzx/index.htm 或者：http://210.40.64.7/wlzx/index.htm
第八章 网页制作
本章内容
8.1 网站规划与设计 8.2 Dreamweaver MX基础知识 8.3 在网页中添加对象 8.4 在网页中使用行为和层 8.5 在网页中使用模板 8.6 网站制作实例
8.1 网站规划与设计
8.1.1 概述 8.1.2 网站设计 8.1.3 内容搜集与组织
home
8.1.1 概述
home
2. 网站结构设计
(1) 确定栏目和版块
• 突出特点 • 设置最近更新、网站指南和交互栏目
(2) 确定网站的目录结构
• 将所有的文件都放在站点根目录下的相应目录中。
• 按栏目内容建立子目录。每个主要的目录下都建立独 立的“images”目录。
• 不要使用中文作为目录或文件的名字，命名的名称不
能过长，应简单明了。
下一页
2. 网站结构设计
(3) 确定网站的链接结构

2019/10/24
5
12.1.1 网页的分类
静态网页的特点：
(1)有固定的URL，而且URL以.htm、.html、.shtml等 常见形式为后缀，不包含“?” 。
(2)静态网页的内容保存在网站服务器上，每个静态网页 都是一个独立的文件。
(3)相对稳定，因此容易被搜索引擎检索。
(4)无数据库支持，在网站制作和维护方面工作量较大。
12.1.1 网页的分类 12.1.2 网页的基本构成 12.1.3 网页常用制作工具 12.1.4 网站制作流程
2019/10/24
4
12.1.1 网页的分类
1. 静态网页 静 态 网 页 是 指 纯 HTML 格 式 的 网 页 ， 一 般
以.htm、.html、.shtml或.xml为后缀名。访问者请 求浏览时，网页在Web服务器中不会发生动态改变。
(2)<br>：单标签，在网页中显示一个换行。 (3)<nobr>：防止浏览器将标签对中过长的内容自
动换行显示。对住址、数学算式、一行数字、 程序代码等尤为有用。 (4)<blockquote>：按缩进效果显示，与普通文本 文件中使用Tab键缩进效果一样。
(3)<meta>：单标签。设置文档浏览时所用的默认 语言。gb2312或gb2312-80是一个简体中文字 符集的中国国家标准。
2019/10/24
19
12.2.1 HTML文档结构
(4)<script>：标签对里面的代码是浏览器执行一些 动作的脚本代码，通常是用脚本语言编写的， 如：JavaScript、VBScript等。
(3)超链接：从一个网页指向另一个目的地的链接。

8．表单
表单是用来收集访问者信息或实现一些 交互作用的网页，访问者填写表单的方式是 输入文本、单击单选按钮或复选框、从下拉 菜单中选择选项等。
Page 24
2.3 制作网页的工具概述
制作网页的专业工具功能越来越完善、 操作越来越简单，处理图像、制作动画、发 布网站的专业软件应用也非常广泛。
Page 25
Page 29
2．Dreamweaver 8的启动与退出
（1）启动Dreamweaver 8 单击【开始】按钮→指向【程序】菜单 →指向【Macromedia】菜单→单击【 Macromedia Dreamweaver 8】即可启动。
Page 30
（2）退出Dreamweaver 8 ➢ 单击Dreamweaver 8窗口右上方的关闭按 钮； ➢ 按下“Alt+F4”组合键； ➢ 单击菜单【文件】－【退出】。
Page 47
4．使用索引查找所需的信息
使用Dreamweaver 8帮助系统的索引可以 快速找到所需的信息。例如查找有关“不换 行空格”的相关内容，操作方法如下：
（1）打开Dreamweaver 8帮助系统的窗口。
Page 48
（2）单击“索引”标题，切换到“索引” 选项卡。
（3）在文本框中输入“HTML”。下方的 列表框中自动显示与“HTML”相关内容的标 题，例如“不换行空格”、“设置格式和插 入”等。
（2）在Dreamweaver 8主窗口中观察其 各个菜单、工具栏、面板的组成。
（3）利用Dreamweaver 8的帮助，查找 有关“JavaScript”的内容，请分别利用“ 目录”、“索引”、“搜索”三种途径完成。
Page 52
★ 课外拓展实践 ★

Web浏览器的选用
现在可以得到许多web浏览器，他们遍 及了几乎所有的计算机系统。Web浏览器 的功能是充当与web的接口，它们在 internet上对特定的web页面和文档发出请 求，当它们接收到文件后，就将格式化后 的版本返回html文件并显示到屏幕之上。 安装了web浏览器的计算机还可以处理ftp 等方法的信息请求。
1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0
三.Html基础及简单页面设计
HTML的编写是指创制和定义html文档 的过程。重要内容:
1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面
文档结构和格式的定义是由html元素来 完成的。而html元素是由单个或一对标记 定义的包含范围。一对标记是指一个起始
要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系统。
要能在web上四处不遨受游地域，的首访限问先制者，必和网须网站站安上有装的信一息个可 w上e台导b的不浏航限受览制最操器，作简如系。单台统有的客平一了户台方只通机服自法要就构务己互可就成器联以的分，是网布多w交信结保e互息布持b合的、多可浏连过反媒浏以览以新程馈体在览随器，信信w时器w提息息后w随上交，的，地发如各进在行种w更性eb 能w在ind各ows页、上lin移n式ux动等。你可以通图过像和选声择音指、视定频的高亮 度系显统示平台的文字、词或图像从等一个页面移至另一 页面，也可以利用该页的地址或url（uniform resource locator）统一资源定位器来直接移至 该指定页。

上一页 下一页 返回
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回

2. 两边做成渐变式柱状或花边式。 3. 在CSS面板中新建CSS样式，选中重定
义HTML标签和仅对该文档，选择Body。 4. 修改背景图形及有关设置。 5. 在1024 ×768下浏览效果
返回
4.4 单元格背景图形处理技巧
1. 选中单元格中的图片，在属性面板中复 制路径。
2. 删除图片引用。 3. 在属性面板中的背景图像框中粘贴路径。 4. 原单元格中即可放入其它网页元素，如
文字、动画等。
返回
4.5 单元格中嵌套表格的插入
1. 选中单元格中的图片，在属性面板中记 下高度（需要时可记下宽度）。
2. 删除图片及其引用。 3. 用工具栏中插入表格工具插入嵌套表格。 4. 设置表格有关属性，如高度，边框颜色
等。
返回
4.6 本讲上机实验要点
1. 正确导出网页及建立站点结构。 2. 设置网页居中及边界，编码等属性 3. 为网页建立柱状和花边背景，并在高分辨
返回
4.2 页面居中及设置处理
1. 打开DW，建立站点，注意只需用高级 选项选择根文件夹即可。
2. 点击修改菜单→页面属性，设置边界为 0及编码为简体中文。
3. 在标签区找到Table，点击后在属性面 板设置居中。
返回
4.3 网页背景处理
1. 用Fireworks 制作背景用图形，大小 1000×*，
返回
1.5 位图处理
1. 位图导入：主要是jpg、gif图形 2. 位图选取：使用选取工具加羽化、反选、
等 3. 效果处理：透明度，边缘羽化等效果处理。 4. 位图的缩放处理。 5. 举例：广告区背景制作并进行相应切片等
返回
1.６ 本讲上机实验要点
1. 页面大小及背景设置。 2. 辅助线及对象对齐练习 3. Logo标志制作(含弧形文字处理) 4. 动画或广告区背景图形制作。 5. 位图的效果处理。 6. 公章图形等制作。

如何申请电子邮箱 电子邮箱的使用 举例: 登陆 注册信息后，设置帐号、密码
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)

文档主体,正文部分 记事本是一个文本编辑的工具,使用记事本环境,可以方便地编写HTML代码和脚本语言程序代码.
</BODY>
</HTML>
docin/sundae_meng
1.2 网页制作工具简介
1.2.1网页编辑工具 FrontPage 2000
FrontPage 2000是Microsoft公司推出的网 页制作工具,它功能强大,操作方便. 记事本
Ulead GIF Auimator是友立公司出版的动画 GIF制作软件,内建的Plugin有许多现成的特效 可以立即使用,可将AVI文件转成动画GIF.
docin/sundae_meng
1.3 网站制作流程
网站设计的流程分为三个阶段: 1、前期规划 2、网站制作 3、后期维护
docin/sundae_meng
Ulead GIF Auimator
Internet有两大用处：第一
</HTML> 头部信息
用处是通信，使用电子邮件通信，速度快、费
用低、特别适合国际间通信量大的用户使用； 因特网是当今世界上最大的连接计算机的电脑网络通迅系统。
在进行网页设计时，要注意网页设计的计划性和条理性，在进行网页组件的整合和制作之前，要把网页布局明确下来，这是网站设计
WWW的基本结构是采用开放式的客户/服 务器结构.
docin/sundae_meng
1.1.3 HTML简介 HTML〔Hyper Text Language,超文本
标记语言〕是一种用来制作超级文本文 档的简单标记语言。
HTML文档Biblioteka 即Homepage的源文件〕 是一个放置了标记的ASCII文本文件，通 常它带有.html或.htm的文件扩展名

2）设置开发环境：包括选择Web应用程序服务器、利用 Dreamweaver网页制作软件定义站点及数据源。
3）规划页面设计和布局：包括用绘画工具创建页面和界面 模型，以及使用Dreamweaver、FrontPage布置页面。 4）创建内容资源：包括使用Fireworks、Photoshop和 Flash创建图像、视频等。 5）组合、测试和部署站点：包括使用Dreamweaver设置 文本格式、编译资源，测试代码将站点发布到服务器上。 6）维护站点：包括使用Dreamweaver保持内容的更新。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 •按照Web服务器的响应方式的不同，可以将Web页分为静 态网页和动态网页。 • 静态网页指客户端的浏览器发送URL请求给Web服务器， 服务器查找需要的超文本文件，不加处理直接下载到客户端， 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 动态网页是指必须经过应用程序服务器处理后才能交给Web 服务器送到客户端进行显示的网页文件。这类网页根据所采 用的应用程序服务器不一样，其文件名的扩展名也不一样。 可以是 hph，jsp，asp等等。 动态网页技术根据程序运行的区域不同，分为客户端动态技 术与服务器端动态技术。 客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页 •按照Web服务器的响应方式的不同，可以将Web页分为静 态网页和动态网页。 • 静态网页指客户端的浏览器发送URL请求给WWW服务器， 服务器查找需要的超文本文件，不加处理直接下载到客户端， 运行在客户端的页面是已经事先做好并存放在服务器中的网 页。其页面的内容使用的仅仅是标准的HTML代码，静态网 页通常由纯粹的HTML/CSS语言编写。

一种简单滚动图片制作方法1：

将下面代码放在<body>和</body>之间就可以了： <p> <marquee width="495" height="150"> 滚动图片 图片地址和名称 <img src="鸽.gif" > <img border="0" src="旗.gif" > <img border="0" src="猪.gif" > </marquee> </p>
二、编辑网页
1、输入汉字：在新建的“new_page_1.htm” 页面上输入汉字信息，并进行字体、字号、 颜色等相关修饰。 2、插入图片：在当前页面上“插入”图片， 请单击“命令菜单”下的“插入”/“图 片”/“来自文件（或剪贴画）”，选择一张 图片，单击“确定”。 教学网站： /qjbok
的 “插入 /层”
2、输入数据：单击层，便可以向其中输入文字，
插入图片、动画等等信息。 3、移动：拖动层的左上角控制柄，就可以任意移 动层到任何位置。 4、重叠层：可以将多个层重叠，以达到一定的效 果。 5、改变层次：双击“层控制柄”，可以用鼠标 拖动相应的层到任何位置，到达改变层的次序。
二、编辑网页
3、预览：单击屏幕左下角的“预览”按钮，于是新 网页在浏览器下的显示效果就出现了。再单击“设 计”返回页面设计状态，可以继续修改。也可以单 击菜单栏“文件”下的“在浏览器中预览/ Microsoft Internet Explorer”或直接按<F12>键可 以在IE下预览制作的网页。 4、保存：单击 “文件”/“保存”，为文件起个名字， 并修改“保存位置”为D盘上“座号姓名”文件夹， 然后单击“确定”。这样所有网页使用的文件都放 在这个文件夹中，便于使用和管理。例如：888张 三 思考题：1、怎样找到你的文件夹？ 2、如何修改已经存盘后的网页文件？

《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。