网页设计标签
DW网页设计教学—标准化网页制作
标准化网页制作
任务一 DIV + CSS网页布局
• 六、盒子模型
• 网页中的盒子模型，简单的说是各种标记的抽象化，每一个标记都可以 看成是一个盒子，网页就是由若干个盒子相互嵌套或相互并列组合而成 的，其组合方式主要是遵循代码的编译顺序，由上至下，由左至右。
<html> <head> <title>登鹳雀楼(唐诗)</title> </head> <body> <h1>登鹳雀楼<i>王之涣</i></h1> <p> 白日依山尽，黄河入海流。<br>欲穷千里目，更上一层楼。 </p> </body> </html> 1-22
值 left right none inherit 描述 元素向左浮动。 元素向右浮动。 默认值。元素不浮动，并会显示在其在文本中出现的位置。 设置应该从父元素继承 float 属性的值。
1-27
标准化网页制作
任务一 DIV + CSS网页布局
• 九、clear清除属性
• 当div容器使用float属性完成布局后，为了避免影响其后续div容器的布局 ，需要及时对其清空浮动。清空浮动，推荐使用clear属性的both值。
1-2
Agenda
• 项目四 标准化网页制作 任务一 DIV + CSS网页布局 任务二 导航制作及背景banner 任务三 列表美化布局 任务四 表单美化布局
1-3
标准化网页制作
任务一 DIV + CSS网页布局
• 依据要求，完成对设计稿的模块化div + CSS布局工作，在网页中实现各 模块容器的展示。
网页设计常用的标签
Body attributes
文 档 整 体 属 性
<body bgcolor=?> Sets the background color,
using name or hex value 设 置 背 景 颜 色， 使 用 名 字 或 十 六 进 制 值
<body text=?> Sets the text color, using
<cite></cite> Creates a citation, usually
italic 创 建 一 个 引 用， 通 常 是 斜 体
<em></em> Emphasizes a word (with italic
or bold) 加 重 一 个 单 词（ 通 常 是 斜 体 加 黑 体）
stylesheets 一 个 用 来 排 版 大 块HTML 段 落 的 标 签， 也 用 于 格 式 化 表
Graphical elements
图 形 元 素
<img src="name"> Adds an image 添 加 一 个 图 像
<img src="name" align=?> Aligns an image: left, right,
<a href="#NAME"></a> Links to that target location
from elsewhere in the document 创 建 一 个 指 向 位 于 文 档 内 部 靶 位 的 链 接
Formatting
网页设计规范-中华人民共和国工业和信息化部
附件网页设计规范一、展现布局（一）展现。
1.政府网站应简洁明了，清新大气，保持统一风格，符合万维网联盟（W3C）的相关标准规范要求。
2.政府网站应确定1种主色调，合理搭配辅色调，总色调不宜超过3种。
使用符合用户习惯的标准字体和字号，同一类别的栏目和信息使用同一模板，统一字体、字号、行间距和布局等。
3.按照适配常用分辨率的规格设计页面，首页不宜过长。
在主流计算机配置和当地平均网速条件下，页面加载时长不宜超过3秒。
4.对主流类别及常用版本浏览器具有较好的兼容性，页面保持整齐不变形,不出现文字错行、表格错位、功能和控件不可用等情况。
5.网站内容要清晰显示发布时间，时间格式为YYYY—MM—DD HH∶MM。
文章页需标明信息来源，具备转载分享功能。
6.页面中的图片和视频应匹配信息内容，确保加载速度，避免出现图片不显示、视频无法播放等情况。
避免使用可能存在潜在版权纠纷或争议的图片和视频。
（二）布局。
1.政府网站页面布局要科学合理、层次分明、重点突出，一般分为头部标识区、中部内容区和底部功能区。
2.头部标识区要醒目展示网站名称，可根据实际情况展示中英文域名、徽标（Logo）以及多语言版、搜索等入口，有多个域名的显示主域名。
3.中部内容区要遵循“从左到右、从上到下”的阅读习惯，科学合理设置布局架构。
4.底部功能区至少要列明党政机关网站标识、“我为政府网站找错”监督举报平台入口、网站标识码、网站主办单位及联系方式、ICP备案编号、公安机关备案标识和站点地图等内容。
5.政府网站各页面的头部标识区和底部功能区原则上要与首页保持一致。
（三）栏目。
1.栏目是相对独立的内容单元，通常为一组信息或功能的组合，按照信息类别、特定主题等维度进行编排并集中展现。
2.栏目设置要科学合理，充分体现政府工作职能，避免开设与履职行为、公众需求相关度不高的栏目。
政府门户网站和部门网站应设置机构职能、负责人信息、政策文件、解读回应、工作动态、互动交流类栏目。
网页设计中常见HTML标签（红色部份为代码、黑色为注释）
网页设计中常见HTML标签(红色部份为代码、黑色为注释)HTML:全名是HyperText MarkupLanguage 是一种超文本标识语言，是用来描述WWW上超文本文件的。
基本标签<html></html>创建一个HTML文档<head></head>设置文档标题以及其他不在WEB网页上显示的信息<body></body>设置文档的可见部分注释：起始标签<head>结束标签</head>标题标签<title></title>将文档的题目放在标题栏中注释：标题起始标签<title>标题结束标签</title>文档整体属性<body bgcolor=?>或者<body background=?>设置背景颜色，使用名字或十六进制值或者设置背景图片<body text=?>设置文本文字颜色，使用名字或十六进制值<body link=?>设置链接颜色，使用名字或十六进制值<body vlink=?>设置已使用的链接的颜色，使用名字或十六进制值<body alink=?>设置正在被击中的链接的颜色，使用名字或十六进制值注释：<body bgcolor="bule">或者<body bgcolor=十六进制>注意无引号也可以有引号其他HTML标签也类似文本标签<pre></pre>创建预格式化文本<h1></h1>创建最大的标题<h6></h6>创建最小的标题<b></b>创建黑体字<i></i>创建斜体字<tt></tt>创建打字机风格的字体<cite></cite>创建一个引用，通常是斜体<em></em>加重一个单词（通常是斜体加黑体）<strong></strong>加重一个单词（通常是斜体加黑体）<font size=?></font>设置字体大小，从1到7<font color=?></font>设置字体的颜色，使用名字或十六进制值注释：链接<a href="URL"></a>创建一个超链接<a href="mailto:EMAIL"></a>创建一个自动发送电子邮件的链接<a name="NAME"></a>创建一个位于文档内部的靶位<a href="#NAME"></a>创建一个指向位于文档内部靶位的链接注释：链接起始标签标签<a href="网址或者文件">欢迎光临我的主页（在浏览器中看到的蓝色下划线部份）链接结束标签</a>格式排版<p>创建一个新的段落<p align=?>将段落按左、中、右对齐<br>插入一个回车换行符<blockquote></blockquote>从两边缩进文本<dl></dl>创建一个定义列表<dt>放在每个定义术语词之前<dd>放在每个定义之前<ol></ol>创建一个标有数字的列表<li>夹在上两个中间使用注意无</li><li type=字母> 放在每个数字或字母列表项之前，并加上一个数字或字母<ul></ul>创建一个标有圆点的列表<li>放在每个圆点列表项之前，并加上一个圆点<div align=?>用来排版大块HTML段落的标签，也可用于格式化注释：段落标签<p>段落结束标签</p>段落左对齐属性如：<p align="left">注释：居中对齐center右对齐right 图形元素<img src="name">添加一个图像<img src="name" align=?>排列对齐一个图像：左中右或上中下<img src="name" border=?>设置围绕一个图像的边框的大小<hr>加入一条水平线<hr size=?>设置水平线的大小（高度）<hr width=?>设置水平线的宽度（百分比或绝对像素点）<hr noshade>创建一个没有阴影的水平线注释：图像标签<img border=5 src="ABC.jpg">给图像加边框用于给图片做链接时候才显示，值为0-99图片居中在多数浏览器中应该这样写:<p align=center><ima src="name">表格<table></table>创建一个表格<tr></tr>开始表格中的每一行<td></td>开始一行中的每一个格子也就是列<th></th>设置表格头通常使用黑体居中文字的格子注释：表格属性<table border=#>设置围绕表格的边框的宽度<table cellspacing=#>设置表格格子之间空间的大小<table cellpadding=#>设置表格格子边框与其内部内容之间空间的大小<table width=#or%>设置表格的宽度－用绝对像素值或文档总宽度的百分比<tr align=?>or<td align=?>设置表格格子的水平对齐（左中右）<tr valign=?>or<td valign=?>设置表格格子的垂直对齐（上中下）<td colspan=#>设置一个表格格子应跨占的列数（缺省为1）<td rowspan=#>设置一个表格格子应跨占的行数（缺省为1）<td nowrap>禁止表格格子内的内容自动断行回卷注释：窗框<frameset></frameset>放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中<framesetrows="value,value">定义一个窗框内的行数，可以使用绝对像素值或高度的百分比<framesetcols="value,value">定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比<frame>定义在不支持窗框的浏览器中显示什么提示注释：框架起始标签<frameset>框架结束标签</frameset>窗框属性<frame src="URL">规定窗框内显示什么HTML文档<frame name="name">命名窗框或区域以便别的窗框可以指向它<frame marginwidth=#>定义窗框左右边缘的空白大小，必须大于等于1<frame marginheight=#>定义窗框上下边缘的空白大小，必须大于等于1<frame scrolling=VALUE>设置窗框是否有滚动栏，其值可以是"yes","no","auto"，缺省时一般为"auto"<frame noresize>禁止用户调整一个窗框的大小注释：表单对于功能性的表单，一般需要运行一个CGI小程序，HTML仅仅是产生表单的表面样子。
网页基本标签代码大全
以图片方式插视频 <IMG height=240 loop=infinite dynsrc=/EFUADD0001.rmvb width=320> 层在 flash 上面 < param value="opaque" >延迟跳转 <meta http-equiv=refresh content='3; url=;'> 导航条变色： 单元格<TR 后面插入 onmouseover="" #99CCFF'" 居中 <CENTER></CENTER> 空链接 ; 标题表格 <fieldset> <legend>表格的说明</legend> </fieldset> 细线表格 style="BORDER-COLLAPSE: collapse;" 滚动条颜色代码 BODY{ SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR: #FFCBC8; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #FFCBC8; SCROLLBAR-BASE-COLOR: #FFFFFF } 连续的英文或者一堆感叹号!!!不会自动换行的问题 只要在 CSS 中定义了如下句子，可保网页不会再被撑开了 table{table-layout: fixed;} td{word-break: break-all; word-wrap:break-word;} 注释一下：
网页设计之HTML标签
target
专门用于控制如何跳转 控制鼠标悬停时显示的 提示文本的。
title
提示文本
举例： 文字连接 图片链接
A标签其他属性
注意点： a标签不仅可以让文字点击，还可以让图片点击。 一个a标签必须有一个href属性，否则a标签不知道要跳转到什么 地方。 如果通过a标签的href属性指定一个URL地址，那么必须在地址 前面加上http：//或者https://。
路径问题
问题：为什么<img src=“图片名称”> 标签中，只使用图 片名称，图片就可以在页面中显示出来呢？
想给src属性赋值有两种方法： 1、通过相对路径赋值 相对路径就是每次都从.html文件所在的文件夹开始查找，我 们称之为相对路径。 2、通过绝对路径赋值 每次都从指定的盘符开始查找
相对路径的三种情况
什么是a标签?
a标签的作用：
就是用于控制页面页面与页面之间跳转的。 a标签的格式： <a href=“指定需要跳转的目标界面”>需要给用户查看的内容</a>。
属性 作用 值 _self 用于在当前选项卡中跳 转，也就是不新建界面 跳转，默认就是_self。 _blank 用于在新的选项卡中 跳转，也就是新建界 面跳转。
p标签 h系列标签 hr标签
img标签
image的缩写
<img src=“ ” > 注意点：img不会独占一行 属性：
属性 width height 关于 width和 height的 注释 title alt 含义 宽度。 高度。 如果img没有指定需要显示的图片的宽高，那么按默认的宽度 和高度。 如果修改了宽度或者高度，图片有可能产生变形。 如果相等比例改变图片大小，可以只指定宽度或者高度 鼠标悬停在图片上的时候，显示的描述图片的字符 当需要显示的图片无法显示时，显示的文字解释
网页设计HTML的规则代码教程(很实用)
一、HTML的简单规则1、HTML的构成要素要素以段落式形成内容。
要素则由标签表现。
开始标签结束标签要素（如要素名为H1，要素内容为“给网页插上CSS的翅膀“）属性值2、HTML的基本结构标签1、使用“head”标签设定网页1）给文本注标题制作好的标题稍微长一点没关系，关键是要写入供搜索的内容简练的标题能准确传达网站特性的内容公司名或商标名用中文表示主页名2）掌握神奇的<meta> 标签< meta > 标签是用来对文本自身进行说明的，也就是承载了文本由什么内容组成、关键词是什么、文本由谁制作、何时制作等信息。
最好将这些基本信息写入<META> 标签中，这样可以最大限度地被搜索引擎关注从而增加访问量，也可以确实地向他人告知基本信息。
提供建立网站的相关信息可使网站被搜索引擎关注设定在万维网上便于出现的中文网页文本地址变更时可及时转换画面效果。
< meta属性=“值”content=“内容”>例如：< meta HTTP-EQUIV=“项目名”content=“内容”> < meta NAME=“项目名”content=“内容”>< meta > 标签可使访问者增加< meta name =“keywords”content=“HTML、CSS、JA V ASCRIPT”>< meta name=“description”content=“可以学习关于标签的一切知识”>例如：<html><head><title> 利用META Tag </title><meta http-equiv="Keywords" content="HTML, CSS, JA V ASCRIPT, DESIGN"><meta http-equiv="Description" content="此处有与HTML, CSS, JA V ASCRIPT, DESIGN相关的一切信息。
网页设计标签教案模板范文
教学目标：1. 让学生了解网页设计的基本概念和常用标签。
2. 掌握HTML和CSS的基本语法和用法。
3. 能够运用所学知识进行简单的网页设计。
教学重点：1. HTML和CSS的基本语法。
2. 常用网页设计标签的用法。
教学难点：1. 理解标签之间的关系。
2. 样式优先级的判断。
教学准备：1. 计算机教室，每人一台电脑。
2. 网页设计软件，如Dreamweaver。
3. 教学课件。
教学过程：一、导入1. 向学生介绍网页设计的基本概念和重要性。
2. 提出问题：什么是HTML？什么是CSS？二、HTML标签教学1. 讲解HTML的基本语法，包括标签、属性和内容。
2. 介绍常用的HTML标签，如`<html>`, `<head>`, `<body>`, `<title>`, `<h1>`-`<h6>`, `<p>`, `<a>`, `<img>`等。
3. 通过实例演示如何使用这些标签创建一个简单的网页。
三、CSS样式教学1. 讲解CSS的基本语法，包括选择器、属性和值。
2. 介绍常用的CSS属性，如颜色、字体、布局等。
3. 通过实例演示如何使用CSS样式美化网页。
四、标签关系与样式优先级1. 讲解标签之间的关系，如嵌套、继承等。
2. 讲解样式优先级的判断，如内联样式、内部样式表、外部样式表等。
五、实践操作1. 分组进行实践操作，要求学生运用所学知识设计一个简单的网页。
2. 教师巡回指导，解答学生在设计过程中遇到的问题。
六、总结与反思1. 总结本节课所学内容，强调HTML和CSS的基本用法。
2. 引导学生反思自己在设计过程中的收获和不足。
教学评价：1. 课堂提问，检查学生对HTML和CSS基本概念的理解。
2. 观察学生在实践操作中的表现，评估其对标签和样式的掌握程度。
3. 收集学生设计的网页作品，进行评价。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
STF STF STF DTD STF STF STF STF TF DTD STF STF TF STF STF DTD STF STF STF STF STF STF STF STF DTD STF TF STF STF
<big> <strong> <small> <sup> <sub> <bdo> <u> 标签 <pre> <code> <tt> <kbd> <var> <dfn> <samp> <xmp> 标签 <acronym> <abbr> <address> <blockquote> <center> <q> <cite> <ins> <del> <s> <strike> 标签
STF STF STF STF STF STF TF DTD STF STF STF STF STF STF STF
DTD STF STF STF STF TF STF STF STF STF TF TF DTD
<a> <link> 标签 <frame> <frameset> <noframes> <iframe> 标签 <form> <input> <textarea> <button> <select> <optgroup> <option> <label> <fieldset> <legend> <isindex> 标签 <ul> <ol> <li> <dir> <dl> <dt> <dd> <menu> 标签
DTD DTD DTD F STF STF STF F STF STF STF STF TF STF TF STF STF STF TF STF STF STF STF TF STF STF TF STF TF STF STF STF
DTD STF STF STF STF STF STF STF STF STF STF DTD
字母排序
标签 <!--...--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> 描述 定义注释。 定义文档类型。 定义锚。 定义缩写。 定义只取首字母的缩写。 定义文档作者或拥有者的联系信息。 不赞成使用。定义嵌入的 applet。 定义图像映射内部的区域。 定义粗体字。 定义页面中所有链接的默认地址或默认目标。 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 定义文字方向。 定义大号文本。 定义长的引用。 定义文档的主体。 定义简单的折行。 定义按钮 (push button)。 定义表格标题。 不赞成使用。定义居中文本。 定义引用(citation)。 定义计算机代码文本。 定义表格中一个或多个列的属性值。 定义表格中供格式化的列组。 定义定义列表中项目的描述。 定义被删除文本。 DTD STF STF STF STF STF STF TF STF STF STF TF STF STF STF STF STF STF STF TF STF STF STF STF STF STF
定义大号文本。 定义语气更为强烈的强调文本。 定义小号文本。 定义上标文本。 定义下标文本。 定义文本的方向。 不赞成使用。定义下划线文本。 描述 定义预格式文本 定义计算机代码文本。 定义打字机文本。 定义键盘文本。 定义文本的变量部分。 定义定义项目。 定义计算机代码样本。 不赞成使用。定义预格式文本。 描述 定义只取首字母的缩写。 定义缩写。 定义文档作者或拥有者的联系信息。 定义块引用。 不赞成使用。定义居中文本。 定义短的引用。 定义引用(citation)。 定义被插入文本。 定义被删除文本。 不赞成使用。定义加删除线的文本。 不赞成使用。定义加删除线的文本。 描述
TF STF STF STF STF STF STF STF STF STF TF STF STF STF STF STF TF STF STF STF STF STF STF STF STF STF STF STF STF
<tr> <tt> <u> <ul> <var> <xmp>
定义表格中的行。 定义打字机文本。 不赞成使用。定义下划线文本。 定义无序列表。 定义文本的变量部分。 不赞成使用。定义预格式文本。
标签 <pre> <code> <tt> <kbd>
描述 定义预格式文本 定义计算机代码文本。 定义打字机文本。 定义键盘文本。
DTD STF STF STF STF
标签 标签 标签 <ul> <frame> <img> <form> <acronym> <a> <ol> <frameset> <map> <abbr> <input> <link> <li> <noframes> <area> <address> <textarea> <dir> <iframe> <button> <blockquote> <dl> <select> <center> <dt> <q> <optgroup> <dd> <cite> <option> <menu> <label> <ins> <fieldset> <del> <s> <legend> <strike> <isindex> <var> <dfn> <samp> <xmp> 标签 <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup> 标签
<style> <div> <span> 标签 <head> <title> <meta> <base> <basefont> 标签 <script> <noscript> <applet> <object> <param> 标签 <!DOCTYPE> <html> <body> <h1> to <h6> <p> <br> <hr> <!--...--> 标签 <b> <font> <i> <em>
定义文档的样式信息。 定义文档中的节。 定义文档中的节。 描述 定义关于文档的信息。 定义文档的标题。 定义关于 HTML 文档的元信息。 定义页面中所有链接的默认地址或默认目标。 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 描述 定义客户端脚本。 定义针对不支持客户端脚本的用户的替代内容。 不赞成使用。定义嵌入的 applet。 定义嵌入的对象。 定义对象的参数。 描述 定义文档类型。 定义 HTML 文档。 定义文档的主体。 定义 HTML 标题。 定义段落。 定义简单的折行。 定义水平线。 定义注释。 描述 定义粗体文本。 不赞成使用。定义文本的字体、尺寸和颜色 定义斜体文本。 定义强调文本。
定义针对不支持框架的用户的替代内容。 定义针对不支持客户端脚本的用户的替代内容。 定义内嵌对象。 定义有序列表。 定义选择列表中相关选项的组合。 定义选择列表中的选项。 定义段落。 定义对象的参数。 定义预格式文本。 定义短的引用。 不赞成使用。定义加删除线的文本。 定义计算机代码样本。 定义客户端脚本。 定义选择列表（下拉列表）。 定义小号文本。 定义文档中的节。 不赞成使用。定义加删除线文本。 定义强调文本。 定义文档的样式信息。 定义下标文本。 定义上标文本。 定义表格。 定义表格中的主体内容。 定义表格中的单元。 定义多行的文本输入控件。 定义表格中的表注内容（脚注）。 定义表格中的表头单元格。 定义表格中的表头内容。 定义文档的标题。
STF STF TF STF STF
功能排序
标签 标签 <b> <!DOCTYPE> <font> <html> <i> <body> <em> <h1> to <h6> <big> <p> <strong> <br> <small> <hr> <sup> <!--...--> <sub> <bdo> <u> 描述 描述 定义粗体文本。 定义文档类型。 不赞成使用。定义文本的字体、尺寸和颜色 定义 HTML 文档。 定义斜体文本。 定义文档的主体。 定义强调文本。 定义 HTML 标题。 定义大号文本。 定义段落。 定义语气更为强烈的强调文本。 定义简单的折行。 定义小号文本。 定义水平线。 定义上标文本。 定义注释。 定义下标文本。 定义文本的方向。 不赞成使用。定义下划线文本。 DTD DTD STF TF STF STF STF STF STF STF STF STF STF STF STF TF