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

第一章 网页那点事

• 要求：使用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标准

• 结构：
  • 对网页中用到的信息进行分类和整理。技术有HTML(超文本标记语言，结构化文档和文档的语义）、XML可扩展标记语言，数据转换和描述、XHTML（可扩展超文本标记语言）
• 表现：
  • CSS：层次叠式样表，对文字和图片以及背景和布局进行相应的设置。
• 行为：
  • 网页模型的定义及交互效果的实现，包括ECMAScript(规定了JavaScript的语法规则和核心内容）、BOM（浏览器对象模型，操作浏览器窗口）、DOM（文档对象模型，允许程序和脚本动态地访问和更新文档的内容）。

1.2网页制作技术入门

HTML：

CSS：

JavaScript：

网页的展示平台—浏览器

• 浏览器内核：
  • 浏览器最核心的部分，负责解释网页语法并渲染网页，也叫做渲染引擎。
  • 渲染引擎决定了浏览器如何显示网页内容和页面的格式信息。
  • 不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同内核的浏览器里的渲染效果也可能不同。
  • 双核的有：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>

实现状态：

• 使用浮动进行混排：

• 解析：

  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="class=red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
        <em class="blue">火宫殿臭豆腐</em>：价格<strong class="red money">18</strong>元
</p>
</body>
</html>

@charset "utf-8";
/* CSS Document */
p{
        font-size: 16px;
        font-family: "微软雅黑";
        line-height: 28px;
        text-indent: em;
}
.blue{
        color:#33F;
}
.red{color: #f00;}
.money{font-size: 26px;}

• 在上述的选择器里，我们看到了许多没见过的属性：文本样式（字号大小），文本外观（颜色等等）
    注：综合设置时，font-family和font-size必须保留。

  • @font-face属性是CSS3的新增属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。
    • 文本样式属性：
      表格 还在加载中，请等待加载完成后再尝试复制
          注：英文名称放在中文名称之前，且中文名称要加引号，字体中如果有空格，#号或者￥号要用双引号或单引号包括。 例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
      表格 还在加载中，请等待加载完成后再尝试复制