本文从基础出发，详细介绍了网页制作技术，涵盖HTML、CSS和JavaScript的基础知识，以及Dreamweaver工具的使用。内容包括网页结构、样式规则、网页布局、浮动和定位，同时还探讨了网页中的多媒体技术，如视频和音频的集成。通过实例，读者可以逐步学习如何构建和美化网页，掌握前端开发的核心技能。
第一章 网页那点事
-
要求：使用Dreamweaver工具创建一个简单的网页
-
了解WEB标准，明确HTML/CSS和javaScript的使用
1.1网页概述
-
网页的组成：文字、图像和超链接等元素。还可以包括哦音频、视频和动画。
-
分类：静态（固定信息）和动态（与服务器数据库进行实时的数据交换。
-
HTML和CSS 是一种静态网页搭建技术。
网页名词解释
-
Internet：互联网。
-
WWW：万维网，是互联网提供的一种网页浏览服务，基础。
-
URL：（Uniform Resource Locator）统一资源定位符，俗称网址，也可是文件路径。
-
DNS：（Domain Name System）域名解析系统：将好记的域名（ taobao.com)转换成IP（100.4.5.6)
-
HTTP和HTTPS：超文本传送协议
-
HTTP：详细规定了浏览器和万维网服务器之间互相通信的规则，拥有强大的自检能力。
-
HTTPS：有SSL（安全套接字层）+HTTP构建的可进行加密传输、身份认证的网络协议。
-
-
Web：是一系列技术的符合总称，包括网站的前台布局、后台程序、数据库开发等。对一般人来说是一种互联网的使用环境和内容。
-
W3C组织：万维网联盟，最重要的规范是发展Web规范。
Web标准
含义：一系列标准的集合，主要包括结构、表现和行为3个方面。
-
结构：
-
对网页中用到的信息进行分类和整理。技术有HTML(超文本标记语言，结构化文档和文档的语义）、XML可扩展标记语言，数据转换和描述、XHTML（可扩展超文本标记语言）
-
-
表现：
-
CSS：层次叠式样表，对文字和图片以及背景和布局进行相应的设置。
-
-
行为：
-
网页模型的定义及交互效果的实现，包括ECMAScript(规定了JavaScript的语法规则和核心内容）、BOM（浏览器对象模型，操作浏览器窗口）、DOM（文档对象模型，允许程序和脚本动态地访问和更新文档的内容）。
-
1.2网页制作技术入门
HTML：
通过标签描述网页内容，文本中包含了超链接。
<a:网点> <h3三级标签> 通过标签对网页形式进行定义。
CSS：
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）图片的外形（宽高、边框样式、边距等）和版面的布局等外观显示样式。
JavaScript：
能实现网页内容的动态显示及与用户的交互。
网页的展示平台—浏览器
IE浏览器、火狐浏览器、谷歌浏览器
-
浏览器内核：
-
浏览器最核心的部分，负责解释网页语法并渲染网页，也叫做渲染引擎。
-
渲染引擎决定了浏览器如何显示网页内容和页面的格式信息。
-
不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同内核的浏览器里的渲染效果也可能不同。
-
双核的有：Trident内核、WebKit内核。
-
还有：Gecko内核、Presto内核、Blink内核
-
Dreamweaver工具的使用
-
布局：窗口—工作区布局—经典
-
添加必备面板：插入、文件、属性
-
编辑—首选参数
-
设置代码提示：首选参数—代码提示—结束标签的第二个
-
浏览器添加：首选参数—在浏览器中浏览—设置主次浏览器
-
基本操作：
-
新建文档：XHTML1.0 或HTML5
-
保存文档：文件—保存
-
打开：可以直接托摘到面板
-
关闭文档：Ctrl+W
-
-
实例：创建我的第一个网页
-
编写HTML代码
-
编写CSS代码：放在<style></style>之间
-
/* */是CSS注释符
-
第二章 从零开始构建HTML页面
2.1简单的网页
-
基本格式
-
<!doctype>说明使用那种HTML或XHTML规范，有此标签浏览器才能认定为有效。
-
<html>根标签：文档开始
-
<head>头部标签：描述文档的标题，作者以及与其它文档的关系
-
<body>主体标签：内容--浏览器中显示的所有文本、图像、音频和视频等信息
-
-
标签的分类
-
双标签：<标签名>内容</标签名>
-
单标签：<标签名 />
-
注释标签：<!--注释语句 -->
-
-
标签的关系
-
嵌套关系：就近原则结束标签，子元素继承父元素的属性
-
并列标签：<head><body>
-
-
页面格式化标签
注意： 一个页面只能有一个h1标签，用作网站logo h标签具有特殊的语义，慎重选择恰当的标签来构建文档结构 HTML中不建议使用h自带的aligin属性，可使用css样式设置属性名含义属性值align对齐方式左右和居中，默认居中size水平线的粗细以像素为单位，默认为2pxColor水平线的颜色可用颜色名称、十六进制#RGB，rgb（r,g,b）width水平线的宽度可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%注： 在实际使用中，并不赞成使用<hr/>的所有外观属性，最好通过CSS样式进行设置2.2新闻页面
-
标题标签：h1~h6 格式：<hn align="对齐方式">标题文本</hn> 对齐方式有三种：left，center，right
-
段落标签： 格式：<p align=“对齐方式”>段落文本</p>
-
水平线标签（单标签）： 格式：< hr 属性=“属性值”/>
-
换行标签：<br/>
-
-
键值对：属性=“属性值”
-
头部相关标签：
设置参数类型（默认为：<meta http-equiv="Content-Type" content="text/html"/>）。 设置字符集（<meta http-equiv="Content-Type" content="text/html，chatset=gbk"/>） 设置页面自动刷新与跳转 <meta http-equiv="refresh" content="10；url=https://www.baidu.com/"/> 数值和url地址之间用分号隔开，时间默认为秒。-
<title>浏览器标题栏
-
页面元信息标签<meta/>
-
< meta name="名称" content="值"/> name中可以是keywords（关键字）、description（网页描述）、author（作者）。content中是具体内容。
-
< meta http-equiv="名称" content="值">
-
-
文本样式标签<font 属性=“属性值”>文本内容</font>
-
face:设置字体
-
size：大小，取1~7之间的整数值
-
color：文字的颜色
-
-
文本格式化标签（嵌套在段落标记中）：
-
<b></b> <strong></strong>:粗体显示
-
<u></u> <ins></ins>:文字加下划线
-
<i></i> <em></em>:斜体文字
-
<s></s> <del></del>:文字加删除线
-
<!doctype html> <html> <head> <meta charset="utf-8"> <tit1e>文本格式化标签</tit1e> </head> <body> <h2 align="center"><font face="微软雅黑">新媒体的大势所趋</font></h2> <pa1ign="center"><font co1or="#979797"size="2">更新时间：2019年12月16日14时08分 来源：<font colors="blue">开源社区</font></font></p> <hr size="2"color="#CCCCCC"/> <p>近年来，随着<font color="blue">移动互联网</font>的蓬勃发展，公众号、微博、今日头条、抖音 等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人员在企业中的价值也不断被放大和受到重视，很多企业在做 线上营销时都会考虑<font color="blue">“两微一抖”</font>,也就是我们所说的新媒体+短视频运营。因此也就催 生了大量对新媒体+短视频运营人的需求岗位。</P> </body></htm1>
-
-
使用css代码来控制
使用伪代码控制
2.3图文混排
-
常见图像格式
-
GIF格式：支持动画，无损的图像格式，还支持透明效果。常用于logo，小图标，和其他色彩相对单一的图像。
-
PNG格式：体积小，不支持动画，png-8相当于GIF，png-32支持半透明效果的处理。
-
JPG格式：有损压缩的图像格式，常用于横幅广告，商品图片，较大的插图等等。
-
-
双十一
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双十一购物狂欢节</title>
</head>
<body>
<img src="images/双11.png" alt="网页设计、平面设计、UI设计" align="left" hspace="30"/>
<h2><font face="微软雅黑" size="6" color="#545454">电商的大型活动——双十一购物节</font></h2>
<p>
<font size="2" color="#515151">
<font color="#0e5c9e">
双十一购物狂欢节</font>，是指每年11月11日的网络促销日，源于淘宝商城（天猫）2009年11月11日举办的网络促销活动，当时参与的商家数量和促销力度有限，但营业额远超预想的效果，于是11月11日成为天猫举办大规模促销活动的固定日期。双十一已成为中国电子商务行业的年度盛事，并且逐渐影响到国际电子商务行业。
</font>
</p>
<p>
<font size="2" color="#515151">
<font color="#0e5c9e">2019年11月11日，2019双十一购物狂欢节正式开始。</font>天猫双11开场14秒销售额破10亿；1分36秒成交额破100亿。17分06，成交额超过人民币571亿元，超过2014年双11全天成交额。
</font>
</p>
<p>
<font size="2" color="#515151">
2009年双十一销售额0.5亿元，共有27个品牌参与。2010年双十一销售额9.36亿元，共有711家店铺参与。<font color="#0e5c9e">2018年销售额2135亿</font>，180000家品牌参与。</font>
</p>
</body>
</html>
实现状态：
-
使用浮动进行混排：
css中： <style type="text/css"> .box{ float:left; }</style> body中： <div class="box"><img src="images/双11.png" /></div>
-
解析：SrcURL图像路径alt文本图像不能显示时的替换文本title文本鼠标悬停时显示的内容，
-
使用title属性设置提示性文字：鼠标指针悬停图像时的提示文字。
width像素值设置图像的宽度height像素值设置图像的高度-- 两者设置一个就会自动调整保持原图的 宽高比border数字设置图像边框的宽度--vspace像素值设置图像顶部和底部的空白-- 垂直边距hspace像素值设置图像左侧和右侧的空白-- 水平边距align位置默认情况是图像的底部与文本的第一行对齐 left：将图像对齐到左边，top:将图像的顶端与文本的第一行文字对齐，其他文字居于图像下方。middle：将图像的水平中线和文本的第一行文字对齐，其他文字居于下方。-
图像标签的使用</img>
-
语法格式：<img src ="图像 URL " />
-
常用属性
-
以上img标签最好设置在css样式中。
-
-
相对路径与绝对路径
-
绝对路径：网页上的文件和目录在硬盘上的真正路径。
-
相对路径：使用层级关系
-
同级使用名称。上级应用/,上两级：../
-
-
-
特殊字符标签
第三章 使用css技术美化网页
3.1文字logo
-
引入--几段文本内容：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>类选择器</title> <style type="text/css"> .red{ color:red;} .green{color:green;} .font22{font-size:22px;} p{ text-decoration:underline; font-family:"微软雅黑"} </style> </head> <body> <h2 class="red">二级标题文本</h2> <p class="green font22">段落一文本内容</p> <p class="red font22">段落二文本内容</p> <p>段落三文本内容</p> </body> </html> -
案例实现效果：
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>
<style type="text/css">
strong{ font-size:100px;}
.blue{ color:#2B75F5;}
.red{ color:#D33E2A;}
#orange{ color:#FFC609;}
#green{ color:#00A45D;}
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>-
这一章我们将详细介绍css的样式规则：
-
何为选择器？--指明样式作用于哪些网页元素的，要注意的是 选择器是区分大小写的，属性和值是不区分大小写的，通常小写。
-
什么是声明？--也就是键值对，属性值之间包含空格的时候，必须为这个属性值加上引号，值和单位之间不能有空格。
-
css中怎么注释呢？--/*zhushi*/
-
CSS代码中空格、回车是不被解析的，花括号以及分号前后的空格可有可无。常用空格键、回车键等对代码进行排版。
-
-
要想使用css我们需要学会在html中引用：
<标记名 style="属性1:属性值1; 属性2:属性值2; "> 内容 </标记名><head> <style > 选择器 {属性1:属性值1; 属性2:属性值2;} …… </style> </head><head> <link href=“css文件的路径" type="text/css" rel="stylesheet" > </head><style > @import url(css文件路径); 或 @import "css文件路径"; /* 在此还可以写入其他CSS样式*/ </style>-
行内式：标记的style属性
-
内嵌式：是将CSS代码集中写在HTML文档<head>标记中，并且用<style>标记定义，其基本语法格式如下:
-
链入式：是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link >标记将css文件链接到HTML文档中，其基本语法格式如下:
-
要注意的是：link要放在head头部标签中，并且需要指明三个属性。属性之间是空格。
-
-
导入式：针对外部样式表文件。对HTML文档头部<style>标记内使用@import语句导入外部样式表文件。
-
思考：导入式看起来是换汤不换药呀？
-
实际上这涉及到加载时间和顺序的问题：link中同时加载，而import语句中后加载。
-
-
-
以前我们看到过p标签选择器和自己定义的选择器，选择器似乎不止一种……
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }.类名{属性1:属性值1; 属性2:属性值2}注：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }-
标签选择器：
-
类选择器：类选择器以“.”开头，后面紧跟一个类名。为页面中类名相同的元素指定统一的CSS样式。一个元素可以有多个class值，每个值通过空格分开
-
id选择器：id选择器以“#”开头，后面紧跟一个id名。在一个文档里， id值不能重复，用于选择文档中对应id名元素 ，且不能指定多个属性值
-
通配符选择器：用“*”号表示，表示 选择所有元素。对所有元素进行操作，浏览器解析会变慢，一般与层次选择器搭配使用
-
属性选择器根据元素的属性或属性值选择元素。 [attr] [title] {color: red;}选择页面所有带有title属性的元素 [att=val] [title=boy] {color: red;}选择页面所有title属性值为boy的元素。 E[att*=“val”] Img[alt*=boy]{width:200px;}选择所有alt属性值包含boy的 img 元素。 E[att~=“val”] Img[alt~=boy]{width:200px;}选择所有带有alt属性值包含boy单词的 img 元素。 比如boy-a和 boy a 可以被选中，而 boya 不能被选中。 E[att$=“val”]属性值以val结尾 E[att^=“val”]属性值以val开头 E[att|=“val”]属性值以指定单词开头
-
3.2美食专题栏目
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>
<img src="images/meishi.jpg" alt="跳槽有道" />
<p>
<em class="blue">导语</em><strong class=&
最低0.47元/天 解锁文章
扫一扫
2560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
