第2章网页设计与制作50页PPT
合集下载
第2章 网页设计与制作-HTML语言基础
例2.1 简单的HTML文档 <html> <head> <title>珠海欢迎您！</title> </head> <body> 这里是珠海悠游网，我们带您畅游珠海！ </body> </html>
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
《网页设计与制作》课件
《网页设计与制作》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 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
中职网页设计与制作课件第2章_HTML简介
2.2排版标记—文字风格标记
标记名称
b i u
标记功能
文字加粗 文字倾斜 文字加下划线
标记使用格式
<b>文字</b> <i>文字</i> <u>文字</u>
strike
sup sub
文字加删除线
文字为上标 文字为下标
<strike>文字</strike>
<sup>文字</sup> <sub>文字</sub>
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记
页面刷新举例： <html> <head> <meta http-equiv="refresh" content="20;URL="> <title>我的网页</title> </head> <body> Hello！网页设计的学习现在开始啦！ </body> </html>
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记 页面刷新 格式如下： <meta http-equiv="refresh" content="数 值;URL=文件名或网址"> 其中： content属性中的“数值”代表刷新网页延迟的时 间，单位是秒；“文件名或网址”为刷新时要链 接到的文件或网址。当缺少URL项时，浏览器将 刷新当前网页。
2.1 HTML文档的基本结构—标记和属性
2．标记的属性 在标记中使用的参数称为标记的属性。一个标记 可以有多个属性，每个属性都有对应的属性值。 例如： <p align="center"> 其中： “align”是标记<p>的属性，“center”是属性 “align”的值。
《网页设计与制作》PPT课件
（五）知识讲解与操作示范（8）
3．页面中图像应用
传递信息的视觉要素包括版式、文字、图像、色彩等。 网页中图像在信息传达上应用具备以下功能： （1）要有良好的视觉吸引力，能吸引浏览者的注意力。 （2）要简洁明确地传达网站信息，能使人们一目了然地抓 住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜明的视觉感受效果， 从观看过程中产生愿望和欲求。 对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
（五）知识讲解与操作示范（7）
(2）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有
力。 （3）文字字号的确定
对于网页中正文文本，其字号一般设置为10～12磅； 对于网页中版权声明等文本一般设置为9～10磅；对于网 页中标题文本，一般设置为12～18磅。 （4）文字的字间距和行间距
网页中文本的字间距和行间距在某种程度上会改变访 问者的阅读心理。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者
只要把自己需要寻找的内容的关键字输入到搜索引擎 中，网站将自动地查找出站内符合条件的页面，这是当前浏览位置”就是在网站的每个页面中 加入当前位置的文字说明并逐级加入链接。
（五）知识讲解与操作示范（6）
15.2.4 网页色彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成其他任何
一种颜色的基色。所有的颜色其实都是由三原色按 照不同的比例混合而来。电脑屏幕的色彩是由红、 绿、蓝三种原色组成。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
（五）知识讲解与操作示范（2）
2．颜色的计算机表示
4．广告尺寸 广告尺寸应为标准尺寸，全尺寸banner不超过14KB。
网页设计与制作 第2章 站点的创建与管理
图2-5管理站点链接
第2.2章
创建站点
2、站点定义 在“站点定义”对话框，定义本地站点的方法有以下两种： 若要使用站点设置向导来设置站点，请单击“基本”选项卡，然后按照提示 进行操作。 若要直接设置本地文件夹、远程文件夹和测试文件夹（用于处理动态页）， 请单击“高级”选项卡，选择“本地信息”类别，然后设置各个选项。 注：设置位于您计算机上的工作站点时，“高级”选项卡的“本地信息”类 别中，只有前两个选项是必需设置的。 方法一： 介绍基于“基本”选项卡定义本地站点的步骤： Step1：进入“站点定义”对话框后，选择“基本”选项卡。设置站点名称为 “webtest”，在站点的url文本框中输入网站的域名或ip地址，如果是创建 本地站点，则此处为空白，单击“下一步”，如图2-6所示。 Step2：在弹出的对话框中询问是否使用服务器技术，如果创建的是静态网站， 则选择“否，我不想使用服务器技术”单选按钮。如图2-7所示。
第2.2章
创建站点
图2-8 选择站点存放位置
图2-9 选择存放到服务器的位置
第2.2章
创建站点
Step5：显示前面已经设置的内容，单击【完成】。如图2-10所示。 Step6：返回到“管理站点”对话框，单击【完成】按钮，本地站点创建完成， 显示该站点的名称，如图2-11所示
。
图2-10 显示设置信息
第2.2章
创建站点
2.4.2创建远程站点 创建了本地 Web 站点后，下一步就是通过将文件上传到远程文件夹来发布该 站点。远程文件夹是internet上存储站点的位置，这些文件用于测试、生产、 协作和发布。远程站点可通过在“基本”选项卡中向导提示的方式创建也可 以通过“高级”选项卡直接输入信息的方式来创建。下面以“高级”选项卡 中FTP的方式为例介绍远程站点的创建方法： Step1：选择“站点”>“管理站点”。 Step2：单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 Step3：单击“高级”选项卡，从“访问”弹出式菜单中，选择“FTP”。如 图2-14所示。 Step4：在“FTP主机”文本框中，输入要上传的 FTP服务器的主机名。 Step5：在“主机目录”文本框中，输入远程站点上用于存储公开显示的文档 的主机目录（文件夹）。 Step6：在“登录名”和“密码”文本框中，输入用于连接到 FTP 服务器的 登录名和密码。
网页设计与制作课件第2章
『选中单元格』单元格可以同时选中多个。 （1）选择连续的单元格：光标先选中第一个单元格，按【Shift】键不 放，再选取最后一个单元格。 （2）选不连续的单元格：按住【Ctrl】键，选取所需要的单元格即可。
对网页进行操作时，多使用“插入”栏和“属性”面板，那样 可以提高制作网站的效率。
上一页 返回
2.1.3用表格制作网页
上一页 返回
2.1.2 表格的修改嵌套
目标案例
2.1.2．表格的修改嵌套
在表格的单元格里嵌入一个表格，并用“属性”面板对表格或单元格进行修 改，实例最终效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：创建一个站点，主页为index.html页面，打开主页创建一个1行2列，宽为
步骤3：选中创建的表格，在“属性”检查器上给边框添加边框颜色为 #FF0000。
上一页 下一页 返回
知操识作点步评骤
步骤4：把鼠标移到第二个单元格，在“属性”检查器上给单元格添加背景 颜色为#00CC00。
步骤5：执行【文件】→【保存】菜单命令或利用快捷键【Ctrl+S】保存网 页文件，预览网页按【F12】键。
上一页 下一页 返回
知识点评
下面是有关表格属性的各参数含义说明。 『表格Id』如果要在网页中使用脚本语言来控制表格，就需要在该下拉 列表文本框中为表格命名。 『行』和『列』用于设置表格的行数和列数。 『宽』和『高』用于设置表格的宽度和高度。 『填充』用于设定单元格中内容与边框之间的距离，默认值为2。 『间距』用于设定单元格之间的距离，默认值为2。 『对齐』用于设表格的对齐方式。包含4个选项：“默认”“左对 齐”“居中对齐”和“右对齐”。 『边框』用于设定表格边框的宽度。
对网页进行操作时，多使用“插入”栏和“属性”面板，那样 可以提高制作网站的效率。
上一页 返回
2.1.3用表格制作网页
上一页 返回
2.1.2 表格的修改嵌套
目标案例
2.1.2．表格的修改嵌套
在表格的单元格里嵌入一个表格，并用“属性”面板对表格或单元格进行修 改，实例最终效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：创建一个站点，主页为index.html页面，打开主页创建一个1行2列，宽为
步骤3：选中创建的表格，在“属性”检查器上给边框添加边框颜色为 #FF0000。
上一页 下一页 返回
知操识作点步评骤
步骤4：把鼠标移到第二个单元格，在“属性”检查器上给单元格添加背景 颜色为#00CC00。
步骤5：执行【文件】→【保存】菜单命令或利用快捷键【Ctrl+S】保存网 页文件，预览网页按【F12】键。
上一页 下一页 返回
知识点评
下面是有关表格属性的各参数含义说明。 『表格Id』如果要在网页中使用脚本语言来控制表格，就需要在该下拉 列表文本框中为表格命名。 『行』和『列』用于设置表格的行数和列数。 『宽』和『高』用于设置表格的宽度和高度。 『填充』用于设定单元格中内容与边框之间的距离，默认值为2。 『间距』用于设定单元格之间的距离，默认值为2。 『对齐』用于设表格的对齐方式。包含4个选项：“默认”“左对 齐”“居中对齐”和“右对齐”。 『边框』用于设定表格边框的宽度。
第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）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
网页设计与制作PPT课件
8/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24
Dreamweaver 当前最新版本 Dreamweaver CCSS5是. 什么意思？
CS 是Creative Suite的缩写（创意套件）
Adobe Creative Suite 包括： Adobe Acrobat 电子文档制作软件 Adobe Flash 矢量动画处理软件 Adobe Dreamweaver 网页制作软件 Adobe Illustrator 矢量图形绘图软件 Adobe Photoshop 图形处理软件 Adobe InDesign 排版软件
Dreamweaver 是业界领先的Web开发工具，通 过该工具用户能够高效地设计、开发和维护网站 和应用程序。使用Dreamweaver, Web 开发人 员能够完成开发的全过程，从创建和维护基本网 站到支持最佳实践和最新技术的高级应用程序。
网页制作三剑客：Dreamweaver、Flash、Fireworks
网页设计与制作
丁艳辉 E-Mail：dingyanhui@
1/24
网站的制作流程
规划阶段（网站策划） 设计阶段（页面美工） 实施阶段（网页制作）
2/24
3/24
LOGO 推荐阅读
主菜单 广告
快速登录 新闻公告
精彩项目
友情链接
版权说明
4/24
5/24
6/24
7/24
Dreamweaver 简介
23/24
位图 VS 矢量图
位图：.jpg; .gif; .bmp; 等 常用软件：Photoshop，Painter等
矢量图：.dwg; .cdr; 等 常用软件：AutoCAD、Coreldraw、 Illustrator等
返回
24/24
9/24