手把手学计科--web网页设计

最新推荐文章于 2024-07-24 12:09:24 发布

晏南午

最新推荐文章于 2024-07-24 12:09:24 发布

阅读量1.2k

点赞数 26

分类专栏：手把手学计科文章标签：前端笔记 web3 html5 css3

本文链接：https://blog.csdn.net/yhvaely/article/details/136468311

版权

本文从基础出发，详细介绍了网页制作技术，涵盖HTML、CSS和JavaScript的基础知识，以及Dreamweaver工具的使用。内容包括网页结构、样式规则、网页布局、浮动和定位，同时还探讨了网页中的多媒体技术，如视频和音频的集成。通过实例，读者可以逐步学习如何构建和美化网页，掌握前端开发的核心技能。

摘要由CSDN通过智能技术生成

第一章网页那点事

要求：使用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	水平线的粗细	以像素为单位，默认为2px
Color	水平线的颜色	可用颜色名称、十六进制#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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0e5c9e">
双十一购物狂欢节</font>，是指每年11月11日的网络促销日，源于淘宝商城（天猫）2009年11月11日举办的网络促销活动，当时参与的商家数量和促销力度有限，但营业额远超预想的效果，于是11月11日成为天猫举办大规模促销活动的固定日期。双十一已成为中国电子商务行业的年度盛事，并且逐渐影响到国际电子商务行业。
</font>
</p>
<p>
<font size="2" color="#515151">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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>

解析：

Src	URL	图像路径
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=&