网页设计与制作课件
合集下载
《网页设计与制作》课件
《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作课件第1章
上一页 返回
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
《网页设计与制作》PPT课件
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
《网页设计与制作》PPT课件
3
2/29/2020
如何控制CSS样式2-1
盒子模型 元素内容
网页中的所有元 素可以看作一个 一个的“盒子”
填充（也称内边距）
边框
边界（也称外边距）
4
2/29/2020
样式控制思路 盒内样式修饰 盒子位置布局
如何控制CSS样式2-2
盒内样式： 设置网页元素的 颜色、字体等外
观
盒子位置布局： 确定盒子所在的 位置、和其他网 页元素的关系
第七章 CSS样式表（三）
——布局、定位
1
2/29/2020
提问
回顾
使用CSS设置背景图像时，通常会同时设置背景图像的
（background- ）和（ background-）po属si性tion
repeat
使用font属性设置字体类型、风格、大小、粗细时的顺序
是什么？字体风格→粗细→大小→类型
5
2/29/2020
为什么需要盒子属性
盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性
盒子模型 平面图
盒子模型三维立体图： 注意背景色在背景图
的下一层
6
2/29/2020
盒子属性：
margin（外边距/边界） border（边框） padding（内边距/填充 ）
什么是盒子属性
<span>、<a>、<img/>、<strong>...
经验
内联标签可以包含于块级标签中，成为它的子元素， 而反过来则不成立
12
2/29/2020
控制元素的显示和隐藏 块级元素与行级元素的转变
display属性
网页设计与制作-PPT课件
FTP
• FTP是一种文件传输协议。 • 通过FTP，用户与存有大量文件的远程计算 机（称为FTP服务器）连接，查看远程计算 机上的文件，然后把文件从远程计算机上 复制到本地的计算机上（称为下载），或 者把本地计算机上的文件传送到远程计算 机上去（称为上传）。 • 如果我们是在ISP处申请的主页空间，制作 完成的网页文件一般采用FTP的形式上传到 Web服务器上。
URL
• URL（Uniform Resource Locator的缩写），统 一资源定位器。 • 互联网中某种信息资源以某种方式存储在网络中 的某处，必须用一个惟一的URL来进行标识，这 样才能方便查找。对于Web来说，可以简单并通 俗把URL理解为网址。每个Web网页都有自己的 网址，在浏览器地址栏里输入网页的URL，就可 以访问这个网页。 • 例如，/index.html，其意思就是采用http超文本传 输协议访问搜狐网的首页，由于网页均是通过 http超文本传输协议进行访问，默认下，“”可以省 略不输。
脚本
• 脚本（Script）是网页制作中常见的动态网页制作 技术。 • 根据脚本语言所编写的代码可以直接插入到 HTML中，利用脚本可以操纵网页上的元素去实 现网页的交互功能，还可以制作特殊动态效果的 网页，例如，注册时用户输入信息的有效性验证、 弹出的信息框、鼠标指针的文字跟随、渐隐渐现 的图片等都是脚本的实际运用。 • 常用的脚本语言有JavaScript和VBScript，这两种 脚本语言也是本书所介绍的ASP的语言基础。
第1章 相关的基础知识
1.1 Web的基ld Wide Web，简称WWW，又 称万维网。 • Web采用浏览器/服务器工作模式。信息以 页面（或称Web页）的形式存储在Web服 务器中，通过浏览器为用户提供方便友好 的信息浏览界面。 • 统一资源定位器URL。 • 超链接。
【培训课件】网页设计与制作教程
Photodraw Fireworks b、其它图象处理软件
Photoshop Coreldreaw FreeHand 3、动画制作软件
Flash
（三）Internet概述
1、Internet的概念
2、 Internet的起源
3、IP地址和域名
连接在Internet上的电脑，都叫做主机， 每台主机都有一个唯一的号码，这便是IP地址。
商业 com
军事 mil
教育 edu
网络机构 政府机构
net
gov
非赢利组织 org
四、连接Internet的方式
• 1、拨号连接 • 2、ISDN接入（一线通） • 传输速率：64Kbps或128Kbps • 3、企业级用户的接入技术 • 4、其他的用户级接入技术 • Cable Modem、WebTV、
二、初步认识 Dreamweaver
1、 Dreamweaver的启动 Dreamweaver的安装过程非常简单，一但
成功安装后，就可以在开始菜单找到 Dreamweaver的选项：
二、初步认识 Dreamweaver
2、编辑窗口 第一次启动Dreamweaver，首先看到的是
： 面板组（又D称工r可e具停a栏m靠浮：w动是e主面aDv板菜reea）单mr：的：wDe在编areva这em辑r4里w的e窗可a新ve以口r增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。
Photoshop Coreldreaw FreeHand 3、动画制作软件
Flash
（三）Internet概述
1、Internet的概念
2、 Internet的起源
3、IP地址和域名
连接在Internet上的电脑，都叫做主机， 每台主机都有一个唯一的号码，这便是IP地址。
商业 com
军事 mil
教育 edu
网络机构 政府机构
net
gov
非赢利组织 org
四、连接Internet的方式
• 1、拨号连接 • 2、ISDN接入（一线通） • 传输速率：64Kbps或128Kbps • 3、企业级用户的接入技术 • 4、其他的用户级接入技术 • Cable Modem、WebTV、
二、初步认识 Dreamweaver
1、 Dreamweaver的启动 Dreamweaver的安装过程非常简单，一但
成功安装后，就可以在开始菜单找到 Dreamweaver的选项：
二、初步认识 Dreamweaver
2、编辑窗口 第一次启动Dreamweaver，首先看到的是
： 面板组（又D称工r可e具停a栏m靠浮：w动是e主面aDv板菜reea）单mr：的：wDe在编areva这em辑r4里w的e窗可a新ve以口r增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
空格
<tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body>
设置表格属性、边框、大小、简 介、标题
• 书写格式：
宽度 高度 边框
• <table width="200" height="200" border="1" summary="适用于5岁以下小孩子"> • <caption>识别数字1-9</caption>
设置网页标题和编码
修改——页面属性
设置网页标题和编码
中国其他常用：GBB2312简体中文 BIG5 繁体中文 编码
国际通用
编码缩进和空白习惯
• 作用：让编码更加清晰易于编辑 • 按层级关系缩进 • • • • 1格式——缩进/凸出 快捷键ctrl+shift+>/< 2tab键：制表符类型（可以调节其参数） 编辑——首选参数——制表符类型 3留白：同级之间留白，使结构更加清晰。
插入说明性文本
• 说明性文本用于描述网页内容 • <meta name=“description” content=“说明 性文本”/>
根据关键词执行造句
说明性文本也不会显示在网页中，它显示在搜索引擎的描述位置
插入刷新
• 可以等待几秒之后跳转URL地址 • <meta http-equiv="refresh" content="5;url="/>
以告诉浏览器如何显示其中的内容（如蚊子如何处理，画面如何安排，
图片如何显示等） • 不同弄浏览器对同一标记符可能会有不完全相同的解释，因而可能会
有不同的显示效果
• 所以只要可以写文字的软件都可以书写HTML 书写完后存储为.html就 可以使用浏览器观看。
HTML网页文档标准详解1
• 组成：1文档类型的声明部分：用于告知浏 览器你使用的HTML是哪个标准 • 2标记主体
替换文本，若图片格式位 置不正确将显示“替换文 本”四个字，若图片格式 位置正确将不显示 图片高度
图片位置
图片宽度
在页面中当鼠标指 向图片时出现“说 明文本”几个字
插入图片热区链接
在设计版面下：
也可以在代码中图片属性中增加其说明文本属性： title="第一个 网页"
插入音频、视频、动画
• 书写格式都是：<embed
网页地址是？
时间（几秒）
设置内容标题
• 网页标题：<title></title>之间指出 • 页面标题：在<body></body>之间指出
• <h1> </h1> • <h2></h2>…… <h6></h6> • 其中数字的意思是大小并加黑 • 在普通文本中设置加黑状态加粗状态设置大小状态在网页 当中都不会显示效果，没用！
插入格式化文本2
删除线、上标、下标
书写格式： <body> <del>原价180</del>现价90 X<sup>2</sup> Y<sub>2</sub> </body> 删除线
上标 下标
插入日期、水平线、大号字体、 小号字体
插入——日期
大号字体
<body> <big>开始时间</big>： <small>01/26/2019</small><hr/> <big>结束时间</big>： <small>06/26/2019</small> </body>
Dreamweaver cs6
• 简介：专门制作网页的工具
• 特点：使用所见皆所得的接口，也有HTML 的编辑的功能 • 版本：MAC和Windows系统版本
操作界面
菜单栏
启动面板 浮动面板
属性栏
界面
使用向导建立在站点
• 站点——新建站点
使去站点 编辑站点 复制站点
简介属性：并不会出现在网页当中只会出 现在搜索引擎当中
标题
合并单元格、拆分单元格
设计版面中：右键——合并单元格/拆分单元格
设置列标题、表头、表主题、表 尾
• 列标题书写格式：
• <tr> • • • <th>偶数</th> <th>奇数</th> </tr>
• 表头书写方式：<thead></thead> • 表主题书写方式：<tbody></tbody> • 表尾书写方式：<tfoot></tfoot>
第一行就是告知文档类型， 用于标识你使用的HTML类 型：XHTML.1.0
HTML网页文档标准详解1
• 更改：修改——页面属性
最新 过渡式
默认：编辑——首选参数
HTML网页文档标准详解1
组成：1文档类型的声明部分：用于告知浏览 器你使用的HTML是哪个标准 2标记主体：除了第一行都是标记
标记的组成
HTML作用和发展概况
• HTML是超文本标记语言，是用于描述网页文档的一种标记 语言。可以链接各个资源 • 由标记组成
• • • •
如：H1 ：内容大标题 IMG：图片 常用的就一二十个 培养手写代码的能力
HTML作用和发展概况
• HTML是一种规范，一种标准，通过标记符号来标记要显示的网页中的 各个部分。 • 网页文件本身是一种文本文件，通过在文本文件中添加标记符号，可
• 1建立书签<a name=“dibu/dingbu”></a> • 2建立超链接<a href=“#dibu/dingbu”></a>
必须加#
创建下载资源的链接
• 书写格式： <a href="下载地址">下载图片</a> • 下载格式可更改。 • 但是下载只能设置浏览器打不开的文件，若浏览器能打开， 点击下载的时候是直接打开网页
• 标记名 • 属性 • 标记内容
标记的写法
• ①双标记模式 <标记名称 属性名=“属性值” 属性名=“属性值…”>标记内容</和前 面一样的标记名>
单标记模式
②<标记名称 属性名=“属性值”属性名=“属性值”…/> 但标记模式没有标记内容
标记名 属性名
标记 内容
文档类型声明单词分析
• • • • • doctype document 文档 type类型 public 公共的 xhtml xhtml文档类型标准 dtd 文档类型声明文件扩展名 xmlns xmlns一种语法格式要求严谨的标记数据类型 namespace命名空间
项目列表特点：1每一个 项目列表项为一行 2每 行前面有一个项目符号， 并且项目符号可以改变。 增加type=“项目符号名
创建编号列表
• 与项目列表区别：编号列表有自动排序，对
<ol>增加type属性即可改变其排序
• • • • •
在<body></body>之间写 <ol> <li></li> <li></li>…… </ol>
XHTML书写规范
• 书写有个规范的代码有利于后面的维护和 适用于浏览器 •
体现在与双标记模 式和单标记模式 指最大的元素
插入关键字
<meta http-equiv= “keywords” content=“关键 词1，关键词2，关键词3”/>
属性 属性
标记
属性值（引号引起）
关键词不会在网页中显示，在查看源文件中中可以看到
设置段落与换行
在HTML中多个换行都会被理解为一个空格因 此必须要 使用标记来产生换行效果 <br /> 段落换行：<p></p>
插入格式化文本1
倾斜、加粗、下划线
• 加粗:<b></b>
仅仅是加粗的含义
• <strong></strong> 有强调的意思 • 倾斜;<i></i> • <em></em>有语法强调的意思 • 下划线：<u></u> • <ins></ins> • 建议使用第二种
小号字体 分割线
使用实体插入特殊字符
• 书写格式：&+实体名称+； • 例如：×；乘号
®；注册商标
©版权
÷除号等等
布局标记、文本标记、预格式文 本、注释
• 布局标记：<div></div>
• • • • <div>这是一个布局元素 它是一个块代表区域这意味着可以设置高和宽 </div> <span>也可以用这个标记建议使用这个单独</span> <font>也可以使用这个标记使用这两个 这是一个空格，在html中 需要几个空格就需要几个 标记 是为了以后可 以单独显示使用特效CS</font>