1.1 认识网页和网站
1.1.1 网页、网站及常用术语
网页是由HTML编写，通过WWW网传输，且被浏览器编译后供用户获取信息的页面文件，又称为Web页，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素。 Web站点也称为网站，WWW信息是由无数的Web站点组成的，网页则是Web站点的基本信息单位，超链接将站点中的一个或多个网页连接成为一个便于浏览的有机整体。 网页设计有其专业的常用术语，如Interet、WwW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等，作为一名网页设计师，必须熟练掌握这些常用术语。
1.1.2 静态网页和动态网页
静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。静态网页通常由纯粹的HTML/CSS语言编写。
动态网页能够根据不同浏览者的请求来显示不同的内容，无论网页 否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。根据程序运行区域的不同， 服务端动态网页。
1.2 网页的基本构成元素
1.2.1 文本
文本具有体积小、网络传输速度快等特点，可使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是页面中最主要的信息载体。
1.2.2 图片和动画
图片比文本更加生动和直观，可以传通一些文本不能表达的信息，具有强烈的视觉冲击力。
1.2.3 超链接
超链接是从一个网页指向另一个目的端的链接，指定从一个位置跳转到另一个位置，可以是文本链接、图像链接和锚链接等。
1.2.4 音频视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid 和mp3。
1.2.5 交互表单
网页中的表单通常用来接收用户在浏览器端的输人，然后将这些信息发送到用户设置的目标端。
1.2.6 其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、 JavaScript与ActiveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
1.3 网页布局结构
1.3.1 网页页面布局
1.3.2 网页色彩布局
网页安全色。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都
单 能够正常显示的颜色集合。
网页中色彩的表达。在网页设计中，颜色值最常见的表达方式是十六进制。
常见的色彩搭配:
采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
1.4 web前端技术简介
1.4.1 初识WEB前端
Web前端是指网站或Web应用程序的用户界面部分，包括布局、样式和交互功能。
1.4.2 WEB前端开发的三大核心技术
HTML、CSS和JavaScript
1.4.2.1 HTML（超文本标记语言）：
用于定义网页结构和内容的语言。
1.4.2.2 CSS语言（层叠样式表）：
用于描述网页的样式和布局的语言。
1.4.2.3 JavaScript语言：
一种脚本语言，用于实现网页的交互功能和动态效果。
1.4.3 WEB 前端开发工具
1.4.3.1 浏览器
浏览器是用于解释和显示HTML、CSS和JavaScript代码的客户端软件。常见的浏览器包括Google Chrome、Mozilla Firefox、Safari等。
1.4.3.2 网页编辑器
网页编辑器是专门用于编写和编辑HTML、CSS和JavaScript代码的工具，例如Visual Studio Code、WebStorm和HBuilder等。
1.4.3.3 切图软件
切图软件主要用于将设计稿中的图片资源分割并导出为适合网页使用格式的工具，如Photoshop、Avocode和Cutterman等。
1.5 HTML语法基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="xxx"/>
<meta name="description"content="xxx"/>
<title>第一个网页项目</title>
<link rel="stylesheet" href="/css/index.css" type="text/css"/>
<script type="text/javascript"</script
type="text/javascript"
src="/js/index.js">></script>
</head>
<body>
<h1>我的第一个网页项目</h1>
<p>2023级软件技术3班</p>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
1.5.1 HTML概述
HTML是一种用于创建网页的标记语言。
1.5.1.1 语言
HTML是一种标记语言，使用标签来定义网页的结构和内容。
1.5.1.2 超文本
HTML文档由超文本组成，可以通过链接相互关联。
1.5.1.3 标记
HTML使用标签来标记文档中的元素和属性。
1.5.2 HTML基本结构
1.5.2.1 HTML文档标签<html>...</html>
用于定义整个HTML文档的范围。
1.5.2.2 HTML文档头标签<head>...</head>
用于包含文档的元数据和引用资源。
1.5.2.3 文档编码
指定HTML文档的字符编码方式。
1.5.2.4 HTML文档主体标签<body>...</body>
用于包含文档的主体内容。
1.6 创建HTML文档
通过编写HTML代码来创建网页文件。
1.7 网页头部标签
包括<title>标签、<meta>标签、<link>标签等。
1.7.1 <title>标签
用于定义网页的标题。
1.7.2 <meta>标签
用于提供网页的元数据信息。
1.7.2.1 keywords
用于指定网页的关键词。
1.7.2.2 description
用于描述网页的内容。
1.7.3 <link>标签
用于引入外部资源，如CSS样式表。
1.7.4 <script>标签
可以根据需要添加其他头部标签。
1.8 HTML5文档注释和特殊符号
1.8.1 注释
<!-- 单行注释内容 -->
<h1>我的第一个网页项目</h1>
<!--
第一行注释内容
第二行注释内容
第三行注释内容
-->
1.8.2 特殊符号
HTML中有一些特殊符号需要使用特定的字符实体表示，如小于号（<）表示为<，大于号（>）表示为>等。
1.9 综合案例——临江仙 · 送钱穆父
<!DOCTYPE html>
<html>
<head>
<meta name="keywords"content="宋词,苏轼" charset="utf-8" />
<meta name="description"content="本网站被收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css">
p{
text-align:center:
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333">
<h2 align="center">临江仙·送钱穆夫</h2>
<p align="center">宋 苏轼</p>
<p align="center">一别都门三改火,天涯踏尽红尘。<br />
依然一笑作春温。<br />
无波真古井,有节是秋筠。<br />
惆怅孤帆连夜发,送行淡月微云。<br />
尊前不用翠眉颦。<br />
<font color="brown" face="微软雅黑">
人生如逆旅,我亦是行人。</font></p>
<img src="img/微信图片_20240912081756.jpg"/>
<hr size="2" color="black" width="100%"/>
<p align="center">网页制作教程copyright©
江西应用工程职业学院</p>
</body>
</html>
第2章 网页制作的排版方法
2.1 文字与段落排版
2.1.1 段落标签
<!--示例-->
<! DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>段落标记示例</title>
</head>
<body>
<p align="center">居中示例</p>
<p align="right">右实例</p>
<p align="left">左示例</p>
/*如果段落文字过长HTML会自动排版*/
<p align="center">这是一段段落示例文本，用于演示段落自动分行的功能，在此可不用考虑文本长度进行编写，HTML会自动给你换行，当然HTML是不会识别你输入的换行符
比如在这里我换行了两次而HTML是不会识别出来</p>
<p align="center">Copyright ©2024 MortalTom</p>
</body>
</html>
2.1.2 标题标签
<!--示例-->
<! DOCTYPE>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>标题示例</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题<h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p align="center">Copyright ©2024 MortalTom</p>
</body>
</html>
2.1.3 换行标签
<!--2.1.3 换行标签-->
<p>
江西应用工程职业学院<br />
校训:爱国明志 敢为人先
</p>
2.1.4 水平线标签
<!--2.1.4 水平线标签-->
<hr />
<hr color="#ffc0cb"/>
<hr size="20px" color="#ccccff"/>
2.1.5 预格式化标签
<!--2.1.5 预格式化标签-->
<pre>
江西应用工程职业学院
校训:爱国明志 敢为人先
</pre>
2.1.6 缩排标签
<!--2.1.6 缩排表签-->
<blockquote>
在这里浏览器给我们自动添加了换行效果<br/>
在这里便是块引用
</blockquote>
2.1.7 案例
2.2 超链接
2.1.1 超链接简介
2.1.1.1 超链接的定义
2.1.1.2 超链接的分类
2.1.1.3 路径
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
<!--2.2.2.2 指向其他页面的超链接-->
<a href="login.html">登录</a>
<a href="register.html">注册</a>
2.2.2.2 指向其他页面的超链接
<!--2.2.2.2 指向其他页面的超链接-->
<a href="login.html">登录</a>
<a href="register.html">注册</a>
2.2.2.3 指向书签的超链接
<!--2.2.2.3 指向书签的超链接-->
<a href="#p">段落</a>
<a href="#h">标题</a>
2.2.2.4 指向下载文件的超链接
<!--2.2.2.4 指向下载文件的超链接-->
<a href="文件名.zip">下载</a>
2.2.2.5 指向电子邮件的超链接
<!--2.2.2.5 指向电子邮件的超链接-->
<a href="mailto:120...09@qq.com">联系我</a>
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
2.3.1.2 使用网页图像的要点
1、图片要小 2、图片不要太多 3、
2.3.2 图像标签
<img src="img/微信图片_20240912081756.jpg" title="王俊凯"/>
2.3.2.1 图像的替换文本说明
2.3.2.2 设置图像大小
<img src="img/微信图片_20240912081756.jpg" width="200" height="600"/>
2.3.2.3 图像的边框
<img src="img/微信图片_20240306183856.jpg" border="100"/>
<img src="img/微信图片_20240306183856.jpg" title="王俊凯"
width="200" height="600" border="20"/>
2.3.3 图像超链接
<a href="http://www.baidu.com">
<img src="img/微信图片_20240918105533.png" title="百度一下"/>
</a>
2.3.4 设置网页背景图像
2.3.5 图文混排
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<hr color="#FF0000" size="20"/>
<img src="img/微信图片_20240918110036.png" align="right"/>
<p>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</p>
</body>
2.4 列表
2.4.1 无序列表
2.4.1.1 在<ul>后指定符号的样式
2.4.1.2 在<li>后指定符号的样式
<ul type="circle">
<li type="aquare">无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
2.4.2 有序列表
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
<ol type="i">
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
2.4.3 定义列表
<dl>
<dt>学院名称:</dt>
<dd>江西应用工程职业学院</dd>
<dt>办学宗旨：</dt>
<dd>以人为本 培养高素质高技能人才</dd>
<dt>校训：</dt>
<dd>爱国明志 敢为人先</dd>
<dt>校园精神：</dt>
<dd>诚朴坚卓 达谦智勇</dd>
</dl>
2.4.4 嵌套列表
2.5 综合案例——无线吸尘器说明书
第3章 表格布局与表单交互
3.1 表格概述
3.1.1 表格的结构
3.1.2 表格的基本语法
3.2 表格属性的设置
3.2.1 表格边框属性
3.2.2 表格的宽度和高度属性
3.2.3 表格背景颜色与表格图像属性
3.2.4 表格边框样式属性
3.2.5 表格单元格间距、单元格边距属性
3.2.6 表格水平对齐属性
3.2.7 设置表格的（tr）标记行的属性
3.2.8 设置单元格的属性
3.2.9 表格单元格跨行、跨列属性
3.2.9.1 单元格跨行
3.2.9.2 单元格跨列
3.3 表格嵌套
3.4 表单
3.4.1 表单标记
3.4.2 定义域和域标题
3.4.3 表单信息输入
3.4.3.1 单行文本输入框
3.4.3.2 密码输入框
3.4.3.3 复选框
3.4.3.4 单选按钮
3.4.3.5 图像按钮
3.4.3.6 提交按钮
3.4.3.7 重置按钮
3.4.3.8 普通按钮
3.4.3.9 文件选择框
3.4.3.10 隐藏框
3.4.4 多行文本输入框
3.4.5 下拉列表框
3.5 综合案例——表格与表单
第四章 CSS样式基础
4.1 CSS概述
4.1.1.CSS的基本概念
4.1.2传统HTML的缺点
4.1.2.1.维护困难
4.1.2.2.标记不足
4.1.2.3.网页过“胖”
4.1.2.4.定位困难
4.1.3.CSS的特点和优势
4.1.3.1.表现和内容分离
4.1.3.2.增强了网页的表现力
4.1.3.3.使整个网站显示风格趋于统一
4.1.4.CSS的编写规则
4.1.4.1.目录结构命名规则
4.1.4.2.样式文件的命名规则
4.1.4.3.选择器的命名规则
4.1.4.4.CSS代码注释
4.1.4.5.CSS代码注释
4.2 CSS语法基础
4.2.1.CSS基本语法
4.2.1.1.基本语法
4.2.1.2.语法说明
4.2.2.CSS选择器类型
4.2.2.1.标记选择器
4.2.2.2.class选择器
4.2.2.3.ID选择器
4.2.2.4.伪类选择器
4.2.3.CSS选择器声明
4.2.3.1.集体生明
4.2.3.2.全局声明
4.2.3.3派生选择器（上下文选择器）
4.3 CSS引入方式
4.3.1.内联样式表（行内样式表）
4.3.1.1.基本语法
4.3.1.2.语法说明
4.3.2.内部样式表
4.3.2.1.基本语法
4.3.2.2.语法说明
4.3.3.外部样式表
4.3.3.1.链接外部样式表
4.3.3.2.导入外部样式表
4.4 CSS的属性单位
4.4.1.长度、百分比单位
4.4.1.1.相对类型
4.4.1.2.绝对类型
4.4.2.色彩单位
4.4.2.1.用十六进制数方式表示色彩值
4.4.2.2.用色彩名称方式表示色彩值
4.4.2.3.使用RGB（x,y,z）函数表示
4.5.CSS继承与层叠
4.6 元素类型
4.6.1.块级元素
4.6.2.行级元素
4.6.3.列表项元素
4.6.4.隐藏元素
第五章CSS盒模型
5.1盒模型的定义
5.2 CSS元素的高度和宽度
5.2.1 盒模型的宽度
5.1.2 盒模型的高度
5.3 边距设置和边框设置
5.3.1 外边距设置
5.3.1.1 上外边距
5.3.1.2 右外边距
5.3.1.3 下外边距
5.3.1.4 左外边距
5.3.1.5 外边距
5.3.2 外边距的合并
5.3.2.1 行级元素外边距合并
5.3.2.2 块级元素外边距合并
5.3.3 内边距设置
5.3.4 边框设置
5.3.4.1上边框
5.3.4.2右边框
5.3.4.3下边框
5.3.4.4 左边框
5.3.4.5 边框样式
5.3.4.6 边框宽度
5.3.4.7 边框颜色
5.3.5 新增边框属性
5.3.5.1圆角边框
5.3.5.2阴影边框
5.3.5.3图片绘制边框
5.4 CSS元素的定位
5.4.1 static 定位
5.4.2 relative定位
5.4.3 absolute定位
5.4.3.1 相对浏览器绝对定位
5.4.3.2 相对父盒子绝对定位
5.4.4 fixed定位
5.5 CSS元素的浮动
5.5.1 盒子的浮动添加
5.5.2 盒子的浮动清除
5.6 综合案例——昵心美食空间
第六章元素应用CSS
6.1 使用CSS设置字体样式
6.1.1.字体类型
6.1.2.字体大小
6.1.3.字体粗细
6.1.4.字体倾斜
6.2 使用CSS设置文本样式
6.2.1.文本水平对齐方式
6.2.2.行高
6.2.3.文本的修饰.
6.2.4.段落首行缩进
6.2.5.首字下沉
6.2.6.字符间距
6.2.7.文本的截断
6.2.8.文本的颜色
6.2.9.文本的背景颜色
6.3 使用CSS设置图像样式
6.3.1.设置图像边框
6.3.2.图像缩放
6.3.3.设置背景图像
6.3.4设置背景重复
6.3.5.背景图像定位
6.3.5.1.使用关键字进行背景定位
6.3.5.2.使用长度进行背景定位
6.3.5.3.使用百分比进行背景定位
6.4 使用CSS设置表单样式
6.4.1.使用CSS修饰常用的表单元素
6.4.1.1.修饰文本域
6.4.1.2.修饰按钮
6.4.1.3.制作登录表单
6.5 综合案例——商城的注册页面
6.5.1.前期准备
6.5.2.制作页面
第七章利用CSS和多媒体美化页面
7.1 CSS链接的美化
7.1.1.文字链接的美化
7.1.2.按钮链接的美化
7.1.3背景链接的美化
7.2 CSS列表的美化
7.2.1.列表项类型（list-style-type）
7.2.2.列表项图像（list-style-image）
7.2.3.列表项位置（list-style-position）
7.2.4.复合列表样式（list-style）
7.2.5.利用背景图像实现列表项标记
7.3 CSS表格的美化
7.3.1.border-collapse
7.3.2..border-spacing
7.3.3.caption-side
7.3.4.empty-cells
7.4 多媒体的添加与美化
7.4.1.<embed>标签的使用
7.4.2.<bgsound>标签的使用
7.4.3.HTML5新增的多媒体标签
7.4.3.1.<audio>标签
7.4.3.2.<video>标签
7.5 综合案例——海洋旅游胜地
第8章利用CSS制作导航菜单
8.1 水平顶部导航栏
8.1.1 简单水平导航栏的设计与实现
8.1.1.1导航栏的创建
8.1.1.2 列表样式的设计
8.1.1.3 超链接样式的设计
8.1.1.4 鼠标事件
8.1.2 下拉子菜单导航栏的设计与实现
8.1.2.1导航栏的创建
8.1.2.2 列表样式的设计
8.1.2.3 二级菜单的隐藏和显示设计
8.1.2.4 DIV样式的设计
8.1.2.5 超链接样式的设计
8.1.2.6 鼠标事件
8.2 纵向侧边导航栏
8.2.1 简单纵向导航栏的设计与实现
8.2.1.1导航栏的创建
8.2.1.2 DIV样式的设计
8.2.1.3 列表样式的设计
8.2.1.4 超链接样式的设计
8.2.2 出式子菜单导航栏的设计与实现
8.2.2.1 导航栏的创建
8.2.2.2 DIV样式的设计
8.2.2.3 二级菜单的隐藏和显示设计
8.2.2.4 列表样式的设计
8.2.2.5 超链接样式的设计
8.3 底部固定导航栏
8.3.1 导航栏的创建
8.3.2 列表样式的设计
8.3.3 菜单固定底部的设计
8.3.4 超链接样式的设计
8.3.5 鼠标事件
8.4 综合案例——优名养生馆
8.4.1 封面页的设计与实现
8.4.2 主页的设计与实现
第九章DIV+CSS布局
9.1 DIV+CSS概述
9.1.1 认识DIV
9.1.2 DIV的宽高设置
9.1.2.1 宽高属性
9.1.2.2 div标签内直接设置宽高
9.1.2.3 div使用选择器设置宽高
9.1.2.4 div高度的百分比设置问题
9.2 DIV+CSS的应用
9.2.1 DIV元素的布局技巧
9.2.2 DIV元素的宽度自适应
9.2.3 DIV内容的居中
9.2.4 DIV元素的嵌套
9.3 DIV+CSS的典型布局
9.3.1 左中右布局
9.3.2 上中下布局
9.3.3 混合布局
9.4 综合案例——众成远程教育
第十章JavaScript的应用
10.1 JavaScript概述
10.1.1 JavaScript简介
10.1.1.1 简单性
10.1.1.2 动态性
10.1.1.3 跨平台性
10.1.1.4 安全性
10.1.1.5 基于对象的语言
10.1.2 JavaScript入门案例
10.1.3 JavaScript放置的位置
10.1.3.1 head标记中的脚本
10.1.3.2 body标记中的脚本
10.1.3.3 外部js文件中的脚本
10.1.3.4 事件处理代码中的脚本
10.2 JavaScript语法
10.2.1 语法基础
10.2.1.1 区分大小写
10.2.1.2 变量不区分类型
10.2.1.3 每行代码结尾可以省略分号
10.2.1.4 注释与C、C++、Java等语言相同
10.2.2 标识符和常用变量
10.2.2.1 标识符
10.2.2.2 变量声明
10.2.2.3 变量类型
10.2.3 运算符与表达式
10.2.3.1 算术运算符和表达式
10.2.3.2 关系运算符和表达式
10.2.3.3 逻辑运算符和表达式
10.2.3.4 赋值运算符和表达式
10.2.3.5 条件运算符和表达式
10.2.3.6 逗号运算符和表达式
10.2.4 程序设计
10.2.4.1 条件分支语句
10.2.4.2 循环语句
10.2.5 函数
10.2.5.1 定义函数
10.2.5.2 函数返回值
10.2.5.3 函数调用
10.3 JavaScript对象
10.3.1 对象基础
10.3.1.1 概述
10.3.1.2 属性
10.3.1.3 方法
10.3.2 常用对象
10.3.2.1 window对象
10.3.2.2 document对象
10.3.2.3 location对象
10.3.2.4 navigator对象
10.3.2.5 screen对象
10.4 JavaScript事件
10.4.1 事件及事件处理
10.4.2 常用事件
10.4.3 事件应用举例
10.5 综合案例——轮播广告
第十一章综合案例——“精品课程网站”开发
11.1 网站的开发流程
11.1.1 确定网站主题
11.1.2 搜集材料
11.1.3 规划网站
11.1.4 网站制作
11.1.5 测试、发布网站
11.1.6 维护更新
11.2 设计首页布局
11.2.1 创建站点目录
11.2.1.1 创建站点根目录
11.2.1.2 根目录下的通用目录
11.2.2 首页布局规划
11.3 首页的制作
11.3.1页面容器层的制作
11.3.2 banner广告条的制作
11.3.3 制作二级下拉菜单
11.3.4 制作“获奖作品”轮番播放
11.3.5 中间的“课程介绍”“用户登录”“课程标题”和“课件下载”的制作
11.3.6 制作“友情链接”上下滚动效果
11.3.7 制作页脚
11.3.8 制作“返回顶部”按钮
11.4 制作“教学课件”子页
11.5 制作“作品展示”子页
扫一扫
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
