首页  思维导图  详情

网页设计与制作教程

2024-12-25 10:10:27   2  举报





AI智能生成

网页技术与制作教程笔记

计划总结

作者其他创作

大纲/内容

第一章网页制作的基础知识

1.1 认识网页和网站

1.1.1 网页、网站

1.1.1.1 网页

1.1.1.2 网站

1.1.1.3 常用术语

1.1.2 静态网页和动态网页

1.1.2.1 静态网页

1.1.2.2 动态网页

1.2 网页的基本构成元素

1.2.1 文本

1.2.2 图片和动画

1.2.3 超链接

1.2.4 音频视频

1.2.5 交互表单

1.2.6 其他常见元素

1.3 页面布局结构

1.3.1 网页页面布局

1.3.2 网页色彩搭配

1.4 Web前端技术简介

1.4.1 初识Web前端

1.4.2 Web前端开发的三大核心技术

1.4.2.1 HTML

1.4.2.2 CSS语言

1.4.2.3 JavaScript语言

1.4.3 前端开发工具

1.4.3.1 浏览器

1.4.3.2 网页编辑器

1.4.3.3 切图软件

1.5 HTML语法基础

1.5.1 HTML概述

1.5.1.1 语言

1.5.1.2 超文本

1.5.1.3 标记

1.5.2 HTML基本结构

1.5.2.1 HTML文档标签<html>...</html>

1.5.2.2 HTML文档头标签<head>...</head>

1.5.2.3 文档编码

1.5.2.4 HTML文档主体标签<body>...</body>

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

1.7.2 <meta>标签

1.7.2.1 keywords

1.7.2.2 description

1.7.3 <link>标签

1.7.4 <script>标签

1.8  HTML5文档注释和特殊符号

1.8.1 注释

1.8.2 特殊符号

1.9 综合案例——临江仙 · 送钱穆父

第二章网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

2.1.2 标题标签

2.1.3 换行标签

2.1.4 水平线标签

2.1.5 预格式化标签

2.1.6 缩排标签

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 指向其他页面的超链接

2.2.2.3 指向书签的超链接

2.2.2.4 指向下载文件的超链接

2.2.2.5 指向电子邮件的超链接

2.3 图像

2.3.1 网页图像的格式及使用要点

2.3.1.1 常见的网页图像格式

2.3.1.2 使用网页图像的要点

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

2.3.2.2 设置图像大小

2.3.2.3 图像的边框

2.3.3 图像超链接

2.3.4 设置网页背景图像

2.3.5 图文混排

2.4 列表

2.4.1 无序列表

2.4.2 有序列表

2.4.3 定义列表

2.4.4 嵌套列表

2.5 综合案例——无线吸尘器说明书

第三章  表格布局与表单交互

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.隐藏元素

第五章  

5.1盒模型的定义

5.2 CSS元素的高度和宽度

5.2.1 盒模型的宽度

5.2.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和多媒体美化页面

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 综合案例——海洋旅游胜地

第八章  利用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 概述

1.本地对象 在 JavaScript 中，本地对象（也称为内置对象或原生对象）是由 JavaScript 引擎提供的预定义对象。这些对象提供了许多常用的功能，如数学运算、日期处理、字符串操作等。了解这些本地对象及其方法可以帮助你更高效地编写代码

2.Browser对象

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 综合案例——轮播广告

 收藏

立即使用

网页设计与制作教程

 收藏

立即使用

网页设计与制作教程

PO_ugyxGl

职业：暂无

去主页





0 条评论

下一页

为你推荐

查看更多



网页设计与制作教程

DreamweaverCC网页设计与制作标准教程

网页设计与制作教程