网页制作PPT
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
添加注释
不论是编写程序还是制作网页， 不论是编写程序还是制作网页，为所做的工作添 加注释都是一种良好的工作习惯。实际上， 加注释都是一种良好的工作习惯。实际上，添加注释 是任何开发工作必须遵循的规范之一。 是任何开发工作必须遵循的规范之一。 的注释由开始标记符<! <!---> HTML 的注释由开始标记符<!-- 和结束标记符 --> 构成。这两个标记符之间的任何内容都将被浏览器解 构成。 释为注释，而不在浏览器中显示。 释为注释，而不在浏览器中显示。
图1-2
1.1.2 HTML语言与 语言与XHTML语言 语言与 语言
• • •
•
网站是多个网页文件的集合。 网站是多个网页文件的集合。 主页（ 首页）： 主页（Home Page首页）：是整个网站的起始点和汇 首页）：是整个网站的起始点和汇 总点，是用户开始浏览网站的入口。Index.html 总点，是用户开始浏览网站的入口。 HTML（Hyper Text Markup Language ）即超文本标 （ 记语言， 是通过标记符来标记要显示网页的各个部分。 记语言， 是通过标记符来标记要显示网页的各个部分。 通过标记符告诉浏览器如何显示网页， 通过标记符告诉浏览器如何显示网页，浏览器按顺序阅 文件， 读 HTML 文件，然后根据内容周围的 HTML 标记符解释 和显示各种内容。 和显示各种内容。 XHTML（Extensible Hyper Text Markup Language） （ ） 为可扩展超文本标记语言 。 – HTML是纯文本文件 是纯文本文件(ASCII码文件 ，可用文本编辑器 码文件)， 是纯文本文件 码文件 编辑，如记事本、 ）。 编辑，如记事本、Word。扩展名为 。扩展名为htm（或html）。 （
WWW采用客户机 服务器系统。在客户机方面 采用客户机/服务器系统 采用客户机 服务器系统。 （用户）使用的程序叫做Web浏览器。服务器上则 用户）使用的程序叫做 浏览器。 浏览器 主要存放网页文件，通常称为Web网站。浏览器和 网站。 主要存放网页文件，通常称为 网站 Web服务器通过 服务器通过HTTP交换信息。 交换信息。 服务器通过 交换信息
网页的本质
浏览者通过浏览器访问 Web 服务器上的 网页， 源代码。 网页，而网页的本质是 HTML 源代码。
由此可以看出， 由此可以看出，网页的本质就是 HTML 代码， 技术， 代码，通过结合使用其他 Web 技术，就 可以创建出功能更加强大的网页。 可以创建出功能更加强大的网页。
1.1.2 HTML语言与 语言与XHTML语言 语言与 语言
来说， 来说，每一份文档都应该有一个标题来简述这一份文 于文档的最前端， 于文档的最前端，表示文档的开 明文档的整体信息。 文本内容 明文档的整体信息。， 开始解释。 档的特色或是主题。对于WWW浏览器而言，标题所在 档的特色或是主题。对于WWW浏览器而言所有首部信息并 即浏览器从<HTML> <HTML>开始解释 始WWW浏览器而言 ，即浏览器从<HTML>开始解释。 不会出现在利用WWW WWW浏览器所看到的 不会出现在利用WWW 的位置虽然依照浏览器的不同而不同，浏览器所看到的 ， 的位置虽然依照浏览器的不同而不同，但是大部分都 </BODY> </HTML>则位于文件的最后一行 则位于文件的最后一行， 而</HTML>则位于文件的最后一行 窗体中。 窗体中 位于浏览器的最上方。 。 位于浏览器的最上方。 这样的结果表示这一整份的文档 </HTML> <HEAD></HEAD>通常与某些标识符一 <HEAD></HEAD>通常与某些标识符一 都是HTML语法的文档。 HTML语法的文档 都是HTML语法的文档。 起使用， <TITLE></TITLE>标记符 标记符。 起使用，如<TITLE></TITLE>标记符。
背景颜色
<BODY>标识符中使用BGCOLOR属性可以为网 标识符中使用BGCOLOR 在<BODY>标识符中使用BGCOLOR属性可以为网 页设置背景颜色。 页设置背景颜色。 使用text属性可以设置网页上的默认字体颜色。 使用text属性可以设置网页上的默认字体颜色。 text属性可以设置网页上的默认字体颜色 除了使用颜色名称以外， 在 HTML 中，除了使用颜色名称以外，还可以 来表示颜色。 用格式 #RRGGBB 来表示颜色。 例如： 例如：<body bgcolor="pink" text="#0000ff" >
第1 篇
网页设计与编辑
第1章 网页设计与制作基础 章 第2章 Dreamweaver基础 章 基础 第3章 网页中的文本 章 4章 第4章 网页元素定位 第5章 网页中的多媒体对象 章 第6章 模板与库 章 第7章 动态网页特效 章 第8章 动态网站 章
上机时间
• 周日下午 节，计算机网络中心 周日下午3-4节 • 考核方式：做一个自己感兴趣的网站。 考核方式：做一个自己感兴趣的网站。
•
超文本文档分文档头和文档体两部分，在文档头里， 超文本文档分文档头和文档体两部分，在文档头里， 对这个文档进行了一些必要的定义， 对这个文档进行了一些必要的定义，文档体中才是 要显示的各种文档信息。 要显示的各种文档信息。
<HTML> <HEAD> <TITLE>文本标题</TITLE> <HTML></HTML>这两个标识符 <HTML></HTML>这两个标识符 </HEAD> <HEAD></HEAD>是HTML文件头标 <HEAD></HEAD>是HTML <HTML>处 <TITLE></TITLE>指的是一份文档的标题 文件头标 指的是一份文档的标题。 <TITLE></TITLE>指的是一份文档的标题。通常 处 HTML文档的标识符 文档的标识符。 是HTML文档的标识符。<HTML> <BODY> 识符，用来描述HTML首部的内容， HTML首部的内容 识符，用来描述HTML首部的内容，说
例如，可以用字体标记符和字号属性指定文字的大小。 例如，可以用字体标记符和字号属性指定文字的大小。 SIZE=1>本行字将以较小字体显示 本行字将以较小字体显示。 <FONT SIZE=1>本行字将以较小字体显示。</FONT>
注意：网页代码中的符号都是英文的，不是中文的， ！注意：网页代码中的符号都是英文的，不是中文的， 例如：双引号。 例如：双引号。
背景图案
！注意：图片名必须写出后缀名 注意：
使用 BODY 标识符的 BACKGROUND 属性可以设置 背景图案。HTML语句为： 背景图案。HTML语句为： 语句为 image.gif <BODY BACKGROUND = “image.gif > image.gif”>
设置网页背景声音
HEAD中添加 中添加： 注意： 在HEAD中添加： ！注意：这是个单标签 src=“文件的名字 loop="播放次数 文件的名字” 播放次数" <BGSOUND src= 文件的名字” loop="播放次数" > 播放次数取infinte时 播放次数取-1或infinte时，声音将一直播放直到关闭 该网页为止。 该网页为止。
– 要求图文并茂。 要求图文并茂。 – 上机作业
• 作业命名方式： 作业命名方式：
– 提交压缩包 – 学号 姓名 班级 实验 学号+姓名 班级+实验 姓名+班级 实验N – 学号 姓名 班级 网站 学号+姓名 班级+网站 姓名+班级
•
1.实验、教案等材料下载 实验、 实验
– – – – ftp://202.205.94.12 陈英义” “陈英义”文件夹 “网页设计”文件夹 网页设计” 网页设计 无须用户名
1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 分析阶段 设计阶段 制作阶段 测试阶段 发布与维护阶段
思考题
1.1 网络基础 1.1.1 网络与网页
•
Internet服务：www服务（网页浏览服务）、电 服务： 服务（ ）、电 服务 服务 网页浏览服务）、 子邮件服务、网上传呼（ 传呼）、文件传输、 子邮件服务、网上传呼（ICQ传呼）、文件传输、 传呼）、文件传输 在线聊天、网上购物、网络炒股、联网游戏、 在线聊天、网上购物、网络炒股、联网游戏、虚 拟空间等
<HTML> <HEAD> <TITLE>文本标题</TITLE> </HEAD> <BODY>
文本内容
</BODY> </HTML>
<HTML>标记HTML的开始， <HTML>标记HTML的开始，在文件结束处要有对应的符 标记HTML的开始 号</HTML>。 </HTML>。 标识符格式 HTML文件中 重要的文字部分都由“标识符” 文件中， 在HTML文件中，重要的文字部分都由“标识符” 括起来，这样文字就成了特别的文字， 括起来，这样文字就成了特别的文字，而标识符 本身则以“ 和 号标识， 本身则以“<”和“>”号标识，标识符内的内容称 号标识 为元素，它代表了标识符的意义。 为元素，它代表了标识符的意义。如： <title>网页标题</title> <title>网页标题</title> 网页标题
属性是用来描述对象特征的特性。在HTML中，所有的 属性是用来描述对象特征的特性。 HTML中 属性都放置在开始标记符的尖括号里， 属性都放置在开始标记符的尖括号里，通常也不区分 大小写。(1)双标签 例如： 大小写。(1)双标签 例如： 属性1=属性值1 属性2=属性值2 > 1=属性值 2=属性值 <标识符 属性1=属性值1 属性2=属性值2 …> 受影响的内容 </标识符> </标识符> 标识符 (2)单标签（不需要成对标记） (2)单标签（不需要成对标记） <br> 单标签 表示换行
网页制作
教材及参考书
– 教材 网页设计与制作技术教程（ 版 《网页设计与制作技术教程（2版）》 清华大学出版社， 清华大学出版社，王传华 – 参考书 • 《网页设计与制作教程》（第3版），机械工业出 网页设计与制作教程》 版社，刘瑞新。 版社，刘瑞新。 • 《Dreamweaver 8完美网页设计—白金案例篇》, 8完美网页设计 白金案例篇》 完美网页设计— 中国电力出版社，何海霞。 中国电力出版社，何海霞。
Internet 工作过程：用户连接到 Internet ，在 工作过程： 地址，按下回车键后， 浏览器窗口中输入 Internet 地址，按下回车键后， 上的某个特定网页。 相当于要求显示 Internet 上的某个特定网页。这个 “请求”被浏览器通过电话线等网络介质传送到页 请求” 面所在的服务器端，然后服务器作出“响应” 面所在的服务器端，然后服务器作出“响应”，再 通过网络介质把用户请求的特定网页传送到用户所 在的计算机，最后由浏览器进行显示。 在的计算机，最后由浏览器进行显示。
Байду номын сангаас
•
2.上传实验作业： 上传实验作业： 上传实验作业
– ftp://10.2.210.170:22 – 登录名：cyy 登录名： – 密码：cyy 密码：
第1篇 第1章 网页设计与制作基础 1.1 网络基础
1.1.1 网络与网页 1.1.2 HTML语言与 语言与XHTML语言 语言与 语言
1.2 网站建设流程
Web服务器 ＋ 网页文件 ＋ I P地址 ＝ Web网站 服务器 地址 网站
Internet WWW
站点浏览 网站开发 与维护
网站主机
1.1.1 网络与网页
• • •
浏览器：是获取www服务的基础，它的基本功能就 服务的基础， 浏览器：是获取 服务的基础 是显示网页。 是显示网页。 Dreamwaver内置 功能。建立自己的网站和 内置ftp功能 建立自己的网站和ftp. 内置 功能。 统一资源定位符URL（Uniform Resource （ 统一资源定位符 Locator） ）
<BODY></BODY>指的是定义出一个HTML文档的体部， <BODY></BODY>指的是定义出一个HTML文档的体部， 指的是定义出一个HTML文档的体部 位于首部下面。 <BODY>标记符内的文字 标记符内的文字， 位于首部下面。在<BODY>标记符内的文字，所有使用标 记符的地方都可以经浏览器正确地显示在浏览器窗体中。 记符的地方都可以经浏览器正确地显示在浏览器窗体中