网页设计与制作教程
2024-12-05 11:08:34 1 举报AI智能生成
《网页设计与制作教程》是一本详细指导如何创建和设计高质量网页的实用指南。全书涵盖了从基础HTML和CSS知识，到高级JavaScript编程技巧，以及网页布局、色彩搭配、用户体验设计等方面的内容。本书不仅适用于网页设计的初学者，也有助于有经验的网页设计师提升技能。通过丰富的实例和详细的步骤说明，本书将带领读者一步步创建出具有专业水准的网页。无论你是想创建一个个人博客，还是一个企业网站，这本教程都将是你不可或缺的参考书。
作者其他创作
大纲/内容
第六章 元素应用CSS
6.1 使用CSS设置字体样式
在学习HTML时，通常会使用HTML对文本字体进行一些非常简单的样式设置 ，而使用CSS对字体样式进行设置远比使用HTML灵活、精准的多。
6.2 使用CSS设置文本样式
网页的排版离不开对文本的设置，本节主要讲述常用的文本样式，包括文本对齐方式，行高、文本修饰、段落首行缩进、首字下沉、字符间距、文本截断、文本颜色及背景色等。
6.3 使用CSS设置图像样式
图像是网页中不可缺少的内容，它能使页面更加丰富多彩，能让人更直观地感受网页所要传达给浏览者的信息。本节详细介绍CSS设置图像风格样式的方法，包括图像的边框、图像的缩放和背景图像等。
6.4 使用CSS设置表单样式
表单中的元素很多，包括常用的文本域、单选钮、复选框、下拉菜单和按钮等。
6.5 综合案例——商城的注册页面
第七章 利用CSS和多媒体美化页面
7.1 CSS链接的美化
在HTML5中，<a></a>标签始终定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性就是herf属性，它指示链接的目标，如果没有设置href属性，后续多个属性均无法使用，则只是超链接的占位符。
7.2 CSS列表的美化
在css样式中，主要是通过列表项类型（list-style-type）、列表项图像（list-style-image）、列表项位置（list-style-position）这三个属性改变列表修饰符的类型。
7.3 CSS表格的美化
通过设置边框属性来实现不同的美化效果
7.4 多媒体的添加与美化
通过使用多种标签添加视频，多媒体，背景音乐对网页进行美化效果
7.5 综合案例——海洋旅游胜地
第八章 利用CSS制作导航菜单
8.1 水平顶部导航栏
水平菜单导航栏是网站设计中应用最广泛的导航设计，一般放置在页面的顶部。
8.2 纵向侧边导航栏
纵向侧边导航栏是网站设计中应用频率仅次于水平导航栏的导航设计，一般放在首页的左上角。
8.3 底部固定导航栏
顾名思义就是放在页面底部，是网站设计的一种辅助导航。在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>配合列表选项<li>创建菜单选项。
8.4 综合案例——优名养生馆
第九章 DIV+CSS布局
9.1 DIV+CSS概述
DIV+CSS是Web设计标准，它是一种网页的布局方法。它可以实现网页页面内容与表现相分离。
9.2 DIV+CSS的应用
因为兼容情况，一定要把页面默认的页边距清除，传统表格布局可以使用属性：align：center；设置表格居中问题是没有属性可以设置的，只能通过CSS样式控制其位置。
9.3 DIV+CSS的典型布局
为了让页面外观与结构分离，就要用CSS样式来规范布局。使用CSS样式可以让代码更加简洁和结构化，使站点的访问和维护更加容易。
左中右布局
上中下布局
混合布局
9.4 综合案例——众成远程教育
第十章 JavaScript的应用
10.1 JavaScript概述
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，能够和HTML、Java语言一起在Web页面中与Web客户交互，它无需经过先将数据传给服务器端、在传回来的过程，而直接可以由客户端的应用程序处理，从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的HTML语言中实现的，弥补了HTML语言的缺陷，是java和HTML折中的选择。
10.2 JavaScript语法
任何语言的语法学习都是枯燥、单调的，JavaScript语法也一样，但学好语法是更好地使用JavaScript编写程序的前提。
10.3 JavaScript对象
JavaScript编程是使用“面向对象”的概念，也称为“对象化编程”。JavaScript“面向对象编程”的意思就是把JavaScript能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。
在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript 对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaScript的内建对象。
在JavaScript里面创建一个新的空对象，例如: var o= new object ();
JavaScript的对象可分为本地对象或内置对象、Browser对象和HTML DOM对象。
在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript 对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaScript的内建对象。
在JavaScript里面创建一个新的空对象，例如: var o= new object ();
JavaScript的对象可分为本地对象或内置对象、Browser对象和HTML DOM对象。
10.4 JavaScript事件
JavaScript中的事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某可以触发JavaScript 函数的事件。例如，在用户单击页面中某按钮时产生一个onClHick事件。事件可以是用户在某些内容上的单击、鼠标经过特定元素或按下了键盘上的按键；也可以是某个Web页面加载完成、用户改变了窗口的大小或是滚动了窗口等。
第一章 网页制作的基础知识
1.1 认识网页和网站
网页、网站
1.性质不同：网址是指因特网上网页的地址，网站是根据一定规则构成的，而网页是网站的基本元素。
2.作用不同：网址用于了解网络用户上网的基础，网站用于展示特定内容相关网页的集合，而网页是承载各种网站应用的集合。
2.作用不同：网址用于了解网络用户上网的基础，网站用于展示特定内容相关网页的集合，而网页是承载各种网站应用的集合。
静态网页和动态网页
1.静态网页是指客户端的浏览器发送URL请求WWW服务器，服务器查找需要的超文本文件并不加处理的直接下载到客户端，运行在客户端的页面是已经事先做好并存放在服务器中的网页。
2.动态网页无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。
2.动态网页无论网页本身是否具有视觉意义上的动态效果，只要采用动态网站技术生成的网页都称为动态网页，其本质主要体现在交互性方面。
静态网页通常由纯粹的HTML/CSS语言编写。
1.2 网页的基本构成元素
文本
体积小，网络传输速度快，网页中最主要的基本元素，也是页面中最主要的信息载体。
图片和动画
比文本更加直观，页面中使用的图片格式主要包括GIF、JPEG、PNG等。
超链接
超链接技术是WWW流行起来的最主要的原因。超链接可以随意跳转。
音频视频
音频文件可使网页效果多样化，网页中常用的音频格式由mid和mp3。
交互表单
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。
这个目标可以是文本文件、网页和电子邮件，也可以是服务端的应用程序。
其他常见元素
1.3 页面布局结构
网页页面布局
网页安全色是红色、绿色和蓝色。
在网页设计中，颜色值最常见的表达方式是十六进制。
RGB模式是目前运用最广的颜色系统之一
HSB色彩模式是普及型设计软件中常见的色彩模式
CMYK也称作印刷色彩模式（青、洋红、黄和黑）
1.4 Web前端技术简介
Web前端指的是平常上网浏览的网页
HTML是制作网页的标准语言。超文本标记语言的结构包括“头部”和“主体”两部分，其中“头部”提供关于网页的信息，“主体”提供网页的具体内容。
CSS是一种用来表现HTML或XML等文件样式的计算机语言。
JavaScript是一种属于网络的脚本语言，通常JavaScript脚本通过嵌入在HTML中的方式来实现自身的功能。
1.5 HTML语法基础
HTML是制作网页的基础语言，是必学内容。
HTML是Hyper Text Markup Language的缩写（超文本标记语言），是一种用来制作超文本文档的简单标记语言。
HTML作为一种超文本标记语言，有指定的语法规则，超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。协议的规定使浏览器在运行超文本时有了统一的规则和标准。
基本结构:HTML文档是由一系列的元素和标签组成的。
元素不区分大小写
HTML文档分为头部和主体两部分，头部对文档进行一些必要的定义，主体部分是文档要显示的信息。
元素不区分大小写
HTML文档分为头部和主体两部分，头部对文档进行一些必要的定义，主体部分是文档要显示的信息。
1.6 创建HTML文档
1.使用HBuilder新建项目→2.创建项目名称→3.打开项目→4.编写网页代码→5.为文件命名→6.预览内容
1.7 网页头部标签
头部通常存放一些介绍内容的信息（页面标题、描述、关键词链接的CSS样式文件和客户端的JavaScript脚本文件）
<title>标签是页面标题标签。只用于<head>和</head>之间，每个文档只允许有一个标题。
<meta>标签是元信息标签，在HTML中是一个单标签。(可重复出现)
link引入CSS文件，rel 引入文件作用， href 引入文件路径 ，Type 指定文件类型
link只在首部标签中，通常用于连接外部样式标签
1.8 HTML5文档注释和特殊符号
注释<!--...--> ctrl+/ 可以自动出现
增加文档的可读性，不会被浏览器执行
增加文档的可读性，不会被浏览器执行
1.9 综合案例——临江仙 · 送钱穆父
第二章 网页制作的排版方法
2.1 文字与段落排版
段落标签的语法为: <p align=" left | center | right">文字/p>
属性align:设置段落文字在网页上的对齐方式，包括left (左对齐)、center(居中)和right(右对齐)，默认为left。
属性align:设置段落文字在网页上的对齐方式，包括left (左对齐)、center(居中)和right(右对齐)，默认为left。
2.2 超链接
根据超链接目标文件的不同，超链接可以分为页面链接、锚点链接和电子邮件链接等；
根据超链接单击对象的不同，超链接可以分为文字超链接、图像超链接和图像映射等。
根据超链接单击对象的不同，超链接可以分为文字超链接、图像超链接和图像映射等。
2.3 图像
图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。
语法: <a href=" ">< img src="图像文件名"/></a >
语法: <a href=" ">< img src="图像文件名"/></a >
2.4 列表
列表的存在形式主要分为无序列表、有序列表、定义列表和嵌套列表。
第三章 表格布局与表单交互
3.1 表格概述
表格的所有内容都会放在<table></table>里面，包含表格标题（<caption></caption>）
sdfghjklvbnm.bnm,./ertyuip,./,（<th></th>）表示表头，会有加粗效果（<td></td>）表示表格内容
sdfghjklvbnm.bnm,./ertyuip,./,（<th></th>）表示表头，会有加粗效果（<td></td>）表示表格内容
3.2 表格属性的设置
设置frame属性可以改变表格边框的样式；设置表格标记中的rules属性可以改变表格内部边框的样式。
3.3 表格嵌套
表格嵌套是一种常用的页面布局方式（表格不宜多用，否则会减低网站的访问速度），表格嵌套一般采用单元格内嵌套表格。
3.4 表单
表单form标记为成对标记，以<form>开始</form>结束。表单定义了采集数据的范围，其所包含的数据内容将完整地提交给服务器。
3.5 综合案例——表格与表单
第四章 CSS样式
4.1 CSS概述
CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便。
4.2 CSS语法基础
主要有四种类型：标记选择器、class选择器、id选择器和伪类选择器。
4.3 CSS引入方式
按位置可以分为4种：内联样式表、内部样式表、链接外部样式表、导入外部样式表。
4.4 CSS的属性单位
在CSS文字、排版、边界等的设置上，常常会在属性值后加上长度或者百分比单位。
4.5.CSS继承与层叠
CSS继承即子标记会继承父标签的所有样式风格，并且可以在父标签样式风格的基础上再加修改，产生新的样式
4.6 元素类型
CSS使用display属性规定元素应该生成的框的类型，任何元素都可以通过display属性改变默认的显示类型。
第五章 CSS盒模型
5.1盒模型的定义
Web页面上大部分的元素(特别是块状元素)都可以看作是一个盒子，盒子的结构可以看作一个矩形框，包括边框(border)、外边距(margin)、内边距(padding),以及元素内容(content),元素会在指定的高度和宽度范围内在页面上显示出来。
5.2 CSS元素的高度和宽度
指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。而浏览器的实际大小的元素，还必须添加内边距、外边距和边框。而增加或减少内边距、外边距和边框，不会影响内容区域的尺寸，只会增加盒模型的总尺寸。
5.3 边距设置和边框设置
margin-border-padding模型是最常用的盒子布局形式。对于任何一个盒子，都可以分别通过设置四条边各自的外边距(margin)、边框(border)和内边距(padding),实现各种各样的排版效果，而且它们各自的四条边在多参数同时设置时，均按照上→右→下→左的顺序(顺时针)。
5.4 CSS元素的定位
通过使用盒子的定位，可以来增加排版的灵活性和适应性。
盒子（position）属性值有四个：static 、relative、absolute、fixed
盒子（position）属性值有四个：static 、relative、absolute、fixed
5.5 CSS元素的浮动
在CSS的盒模型布局中，除了使用定位防止避免按照标准流的方式进行排版的限制性问题，还可以使用浮动来避免。
使用浮动（float）和清除（clear）属性设置，可以解决各种页面错位的现象。
默认值none就是标准流通常的显示状态。
使用浮动（float）和清除（clear）属性设置，可以解决各种页面错位的现象。
默认值none就是标准流通常的显示状态。
5.6 综合案例——昵心美食空间
0 条评论
下一页
