网页设计与制作教程
2024-12-26 11:42:52 0 举报AI智能生成
本教程涵盖了网页设计与制作的基础知识和实际操作，包含HTML、CSS、JavaScript和响应式设计等核心内容。通过学习这个教程，你可以掌握如何创建具有吸引力和功能性的网页，使得你的网站在任何设备上都能呈现出最佳的视觉效果。无论你是初学者还是有一定基础的设计师，这个教程都能帮助你提升技能，成为一个更出色的网页设计师。
作者其他创作
大纲/内容
第一章 网页制作的基础知识
认识网页和网站
网页、网站
网页和网站的区别：含义不同：网站是指在因特网上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。网页是网站的基本元素，是承载各种网站应用的平台。
关系不同：网站包含了网页，网页是包含了HTML代码集合，呈现一个界面。
组成不同：网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成。
功能不同：网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能。
常用术语：Interent、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等。
关系不同：网站包含了网页，网页是包含了HTML代码集合，呈现一个界面。
组成不同：网站由域名、服务器、空间等构成，而网页是由HTML、JavaScript等代码构成。
功能不同：网站功能齐全，包含了注册功能、登录功能、业务功能，网页一般实现几个简单功能。
常用术语：Interent、WWW、浏览器、URL、IP、域名、HTTP、FTP、站点、发布、超链接、导航条、客户机和服务器等。
静态网页和动态网页
三大核心技术：HTML、CSS、JavaScript。（前两者是静态网页，添加了JavaScript之后变成了动态网页。）网页有动画，视频不能叫做静态网页。
静态网页和动态网页的区别：静态网页每个网页中都有一个固定的URL，网页URL以htm、HTML、shtml等常见形式为后缀，而且不含有问号。
动态网页以数据库技术为基础，可以大大降低网站维护的工作量，采用动态网页技术的网站，可以实现更多的功能，如用户注册，用户登录，在线调查等。
静态网页和动态网页的区别：静态网页每个网页中都有一个固定的URL，网页URL以htm、HTML、shtml等常见形式为后缀，而且不含有问号。
动态网页以数据库技术为基础，可以大大降低网站维护的工作量，采用动态网页技术的网站，可以实现更多的功能，如用户注册，用户登录，在线调查等。
网页的基本构成元素
文本
文本具有体积小、网络传输速度快等特点，可以使用户更方便地浏览和下载文本信息，是网页最主要的基本元素，也是网页中最主要的信息载体。
图片和动画
图片比文本更加生动和直观，可以传递一些文本不能表达的信息，具有强烈的视觉冲击力。网页中的网站标识、背景、链接等都可以是图片。
超链接
超链接技术是WWW流行起来的主要原因。超链接是从一个网页指向另一个目的端的链接，指定从一个位置转跳到另一个位置，可以是文本链接、图像链接和锚链接等。
音频和视频
音频文件可使网页效果多样化，网页中常用的音频格式有mid和mp3。其中mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。
网页中的视频文件一般为flv格式，它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
网页中的视频文件一般为flv格式，它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。
交互表单
网页中的表单通常用来接收用户在浏览器端的输人，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页和电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，让浏览者注册为会员并以会员的身份登录站点等。
其他常见元素
网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮JavaScript与ActveX等各种特效，它们不仅能点缀网页，使网页更活泼有趣，还在网上娱乐、电子商务等方面也有着不可忽视的作用。
页面布局结构
对一个网站来说，除了内容之外，还要对网站进行整体规划设计。格局凌乱的网站内容再精彩，也不是一个好网站。在网页插人各种对象和装饰效果前，要先确定网页的总体风格和布局。
网页页面布局
网页色彩搭配
R（红色），G（绿色)，B(蓝色），这三种颜色是最常见的三个主色调。
Web前端技术介绍
Web前端就是指平常上网浏览的网页，比如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
WEB前端开发的三大核心技术
HTML是制作网页的标准语言，它决定了页面结构文件。
CSS是一种用来表现HTML或XML等文件样式的计算机语言，它决定了页面样式文件。
JavaScript是一种属于网络的脚本语言，它决定了页面文件动态技术。
HTML是制作网页的标准语言，它决定了页面结构文件。
CSS是一种用来表现HTML或XML等文件样式的计算机语言，它决定了页面样式文件。
JavaScript是一种属于网络的脚本语言，它决定了页面文件动态技术。
前端开发工具
浏览器、网页编辑器、切图软件
HTML语法基础
HTML概述
HTML,是 HyperTent Mnkaplangmge 的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。
语言
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML,文档，它能独立于各种操作系统平台。
超文本
超文本是可以加人图片、声音、动画、影视等内容的文本。
标记
HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是由一系列成出现的元素标签嵌套组合而成的。这些标签用“<”和“>”括起来。它们被称为标记,称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。
HTML基本结构
HTML文档标签<html>...</html>
HTML文档头标签<head>...</head>
文档编码
HTML文档主体标签<body>...</body>
网页头部标签
<title>标签
<meta>标签
keywords
description
<link>标签
<script>标签
HTML5文档注释和特殊符号
注释
注释是文档中的说明文字，不会被浏览器执行。
特殊符号
由于大于号“>”和小于号“<”等已作为HTML的语法符号，所以，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示。这些特殊符号对应的HTML代码被称为字符实体。字符实体都以"&"开头，以";"结束。
第二章 网页制作的排版方法
文字与段落排版
段落标签
标题标签
换行标签
水平线标签
预格式化标签
缩排标签
超链接
超链接简介
超链接的定义
超链接的分类
路径
超链接的应用
锚点标签<a>···</a >
指向其他页面的超链接
指向书签的超链接
指向下载文件的超链接
指向电子邮件的超链接
图像
网页图像的格式及使用要点
常见的网页图像格式
使用网页图像的要点
图像标签
图像的替换文本说明
设置图像大小
图像的边框
图像超链接
设置网页背景图像
图文混排
列表
无序列表
在<ul>后指定符号的样式
在<li>后指定符号的样式
有序列表
定义列表
嵌套列表
图像
列表
第三章 表格布局与表单交互
表格概述
表格的结构
表格的基本语法
表格属性的设置
表格边框属性
表格的宽度和高度属性
表格背景颜色与表格图像属性
表格边框样式属性
表格水平对齐属性
设置表格的（tr）标记行的属性
设置单元格的属性
表格单元格跨行、跨列属性
单元格跨行
单元格跨列
表格嵌套
表单
表单标记
定义域和域标题
表单信息输入
单行文本输入框
密码输入框
复选框
单选按钮
图像按钮
提交按钮
重置按钮
普通按钮
文件选择框
隐藏框
多行文本输入框
下拉列表框
第四章 CSS样式基础
CSS概述
CSS的基本概念
传统HTML的缺点
维护困难
标记不足
网页过“胖”
定位困难
CSS的特点和优势
表现和内容分离
增强了网页的表现力
使整个网站显示风格趋于统一
CSS的编写规则
目录结构命名规则
样式文件的命名规则
选择器的命名规则
CSS代码注释
CSS代码缩进
CSS语法基础
CSS基本语法
基本语法
语法说明
CSS选择器类型
标记选择器
class选择器
ID选择器
伪类选择器
CgeS选择器声明
集体生明
全局声明
派生选择器（上下文选择器）
CSS引入方式
内联样式表（行内样式表）
基本语法
语法说明
内部样式表
基本语法
语法说明
外部样式表
CSS的属性单位
长度、百分比单位
相对类型
绝对类型
色彩单位
用十六进制数方式表示色彩值
用色彩名称方式表示色彩值
使用RGB（x,y,z）函数表示
CSS继承与层叠
元素类型
块级元素
行级元素
列表项元素
隐藏元素
第五章 CSS盒模型
盒模型的定义
CSS元素的高度和宽度
盒模型的宽度
盒模型的高度
边距设置和边框设置
外边距设置
上外边距
右外边距
下外边距
左外边距
外边距
外边距的合并
行级元素外边距合并
块级元素外边距合并
内边距设置
边框设置
上边框
右边框
下边框
左边框
边框样式
边框宽度
边框颜色
新增边框属性
圆角边框
阴影边框
图片绘制边框
CSS元素的定位
static 定位
relative定位
absolute定位
相对浏览器绝对定位
相对父盒子绝对定位
fixed定位
CSS元素的浮动
盒子的浮动添加
盒子的浮动清除
第六章 元素应用CSS
使用CSS设置字体样式
字体类型
字体大小
字体粗细
字体倾斜
使用CSS设置文本样式
文本水平对齐方式
行高
文本的修饰
段落首行缩进
首字下沉
字符间距
文本的截断
文本的颜色
文本的背景颜色
使用CSS设置图像样式
设置图像边框
图像缩放
设置背景图像
背景重复
背景图像定位
使用关键字进行背景定位
使用长度进行背景定位
使用百分比进行背景定位
使用CSS设置表单样式
使用CSS修饰常用的表单元素
修饰文本域
修饰按钮
制作登录表单
第七章 利用CSS和多媒体美化页面
CSS链接的美化
文字链接的美化
按钮链接的美化
背景链接的美化
CSS列表的美化
列表项类型（list-style-type）
列表项图像（list-style-image）
列表项位置（list-style-position）
复合列表样式（list-style）
利用背景图像实现列表项标记
CSS表格的美化
border-collapse
border-spacing
caption-side
empty-cells
多媒体的添加与美化
<embed>标签的使用
<bgsound>标签的使用
HTML5新增的多媒体标签
<video>标签
<audio>标签
第八章 利用CSS制作导航菜单
水平顶部导航栏
简单水平导航栏的设计与实现
导航栏的创建
列表样式的设计
超链接样式的设计
鼠标事件
下拉子菜单导航栏的设计与实现
导航栏的创建
列表样式的设计
二级菜单的隐藏和显示设计
DIV样式的设计
超链接样式的设计
鼠标事件
纵向侧边导航栏
简单纵向导航栏的设计与实现
导航栏的创建
DIV样式的设计
列表样式的设计
超链接样式的设计
出式子菜单导航栏的设计与实现
导航栏的创建
DIV样式的设计
二级菜单的隐藏和显示设计
列表样式的设计
超链接样式的设计
底部固定导航栏
导航栏的创建
列表样式的设计
菜单固定底部的设计
超链接样式的设计
鼠标事件
第九章 DIV+CSS 布局
DIV+CSS概述
认识DIV
DIV的宽高设置
DIV的宽高设置
div标签内直接设置宽高
div使用选择器设置宽高
div高度的百分比设置问题
DIV+CSS的应用
DIV元素的布局技巧
DIV元素的宽度自适应
DIV内容的居中
DIV元素的嵌套
DIV+CSS的典型布局
左中右布局
上中下布局
混合布局
第十章 JavaScript的应用
JavaScript概述
JavaScript简介
简单性
动态性
安全性
基于对象的语言
JavaScript入门案例
JavaScript放置的位置
head标记中的脚本
body标记中的脚本
外部js文件中的脚本
事件处理代码中的脚本
JavaScript语法
语法基础
区分大小写
变量不区分类型
每行代码结尾可以省略分号
注释与C、C++、Java等语言相同
标识符和常用变量
标识符
变量声明
变量类型
运算符与表达式
算术运算符和表达式
关系运算符和表达式
逻辑运算符和表达式
赋值运算符和表达式
逗号运算符和表达式
程序设计
条件分支语句
循环语句
条件运算符和表达式
函数
定义函数
函数返回值
函数调用
JavaScript对象
对象基础
概述
本地对象
Browser 对象
HIMIL DOM对象
属性
方法
常用对象
window对象
窗口操作
打开窗口
关闭窗口
系统对话框
history 历史对 象
document对象
document对象属性
document对象方法
location对象
navigator对象
screen对象
JavaScript事件
事件及事件处理
常用事件
事件应用举例
自由主题
0 条评论
下一页
