网页设计与制作第13章范文
网页设计与制作案例教程-电子教案第13单元
本章主要学习如何使用框架对网页中的 文本、图像等对象进行合理的布局。 文本、图像等对象进行合理的布局。
知识技能目标
（1）掌握在网页中创建框架的操作方法。 掌握在网页中创建框架的操作方法。 （2）掌握为框架命名并导入框架源文件 的操作方法。 的操作方法。 （3）掌握如何保存框架集选择框架 方法之一：打开框架面板， 方法之一：打开框架面板，然后在框架 面板中单击要选择的框架即可选中单个框架。 面板中单击要选择的框架即可选中单个框架。 方法之二：按住“Alt”键，在框架内 方法之二：按住“Alt”键 部单击某个框架，即可选中单个框架。 部单击某个框架，即可选中单个框架。
7.4.2 框架的创建与设置
1．新建网页
（1）在站点“长沙世界之窗”下创建子 在站点“长沙世界之窗” 文件夹“07框架网页 框架网页” 07框架网页 框架网页” 文件夹“07框架网页”，在“07框架网页” 文件夹中创建一个网页文档07.html 07.html， 文件夹中创建一个网页文档07.html，保存 该网页。 该网页。 创建三个网页文件：title.html、 （2）创建三个网页文件：title.html、 navi.html、main.html。 navi.html、main.html。
（2）保存框架 选中整个框架，单击菜单【文件】 选中整个框架，单击菜单【文件】→ 保存全部】 先保存框架集文件， 【保存全部】，先保存框架集文件，然后依 次保存所有的框架文件。 次保存所有的框架文件。
如果只单独保存某一个框架， 如果只单独保存某一个框架，只需先选 中某个需要保存的框架，然后单击菜单【 中某个需要保存的框架，然后单击菜单【文 保存全部】 在弹出的“另存为” 件】→【保存全部】，在弹出的“另存为” 对话框中，选择合适的保存位置，输入合适 对话框中，选择合适的保存位置， 的文件名，然后单击【确定】按钮， 的文件名，然后单击【确定】按钮，即可保 存所选择的框架。 存所选择的框架。 对于包括3个框架的网页，保存时共有4 对于包括3个框架的网页，保存时共有4 个文件，一个是框架集文件， 个文件，一个是框架集文件，另外三个是框 架文件。 架文件。
网页设计与制作cs8第13章精品PPT课件
阶段4：推广和宣传网站。将站点推向市场非常重要， 可以利用的宣传途径有公司印刷器、户外媒体、电视 节目广告、口头传播和搜索引擎等。
第13章 完整制作网站的流程
13.1站点定义和规化 13.2建立Web站点的结构 13.3网页外观的设计制作
设计网站的标志 (logo)
首先需要设计制作一个网站的标志，就如同商标一样， logo是站点特色和内涵的集中体现，看见logo就让大 家联想起你的站点。
设计网站的标准色彩
网站给人的第一印象来自视觉冲击，确定网站的标准 色彩是相当重要的一步，不同的色彩搭配产生不同的 效果，并可能影响到访问者的情绪。
一个杰出的网站，和实体公司一样，也需要整体的形象 包装和设计。准确的，有创意的 CI 设计，对网站的 宣传推广有事半功倍的效果。在您的网站主题和名称 定下来之后，需要思考的就是网站的 CI 形象。
1.设计网站的标志 (logo) 2. 设计网站的标准色彩。 3. 设计网站的标准字体。 4. 设计网站的宣传标语。
第13
Web设计流程
阶段1：站点定义和规则。该阶段包括网站的整体概念、 网站的观众定位、网站的内容和组织方式、网站的视 觉风格、网站的技术要求、网站的预算、网站完成的 时间期限等。
阶段2：建立WEB站点的结构。该阶段要完成站点的外 观草图设计，完成所有的关键页面的整体风格设计以 及这页面的相互关系的设置。
1.不要将所有文件都存放在根目录下。 2.按栏目内容建立子目录。 3.在每个主目录下都建立独立的 images 目录。 4.目录的层次不要太深。
13.2.3网站的链接结构
网站的链接结构是指页面之间相互链接的拓扑结构。 它建立在目录结构基础之上，但可以跨越目录。形象 的说：每个页面都是一个固定点，链接则是在两个固 定点之间的连线。一个点可以和一个点连接，也可以 和多个点连接。更重要的是，这些点并不是分布在一 个平面上，而是存在于一个立体的空间中。
《网页设计与制作》课程标准
《网页设计与制作》课程标准序言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程系统中拥有重要的作用，一、课程的说明：经过本课程的学习，使学生认识网页设计技术的发源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，经过运用Photoshop图像办理软件和Flash动画制作软件，三个软件相互当合，达成网页设计与制作任务的方法。
为此后从事网页设计与制作、网站开发和管理确立基础。
在网页设计的实践中要点培育团队协作、交流交流能力，培育自主学习能力和探究创新能力。
二、课程内容与基本要求：该课程波及的知识是网页设计人员必备的基本技术，职业活动与课程内容的对应关系以下：三、教课目的1、职业要点能力目标(1) 掌握使用Photoshop进行图像办理的基本方法及操作技术(2) 掌握DreamweaverCS5的基本知识及操作技术(3) 掌握成立与管理站点的方法(4) 掌握制作主要内容为文本的网页的方法(5) 掌握在网页中插入与编写图像的方法(6) 掌握在网页中插入多媒体元素的方法(7) 掌握表格办理与网页布局的方法(8) 掌握创立超级链接的方法(9) 掌握使用框架制作旅行网站的方法(10) 掌握创立和使用模板的方法(11) 掌握创立和使用库的方法(12) 掌握在网页中增添AP Div的方法(13) 掌握在网页中使用行为的方法(14) 掌握HTML基础知识及经过代码修饰网页的方法(15) 掌握使用CSS款式表修饰网页的方法(16) 掌握动向网页的观点及简单动向网页的制作方法2、职业特意能力目标(1) 经过达成有关的项目，掌握网页设计的基本工作流程。
(2) 经过达成有关的项目，掌握网页设计常用工具的使用方法。
网页设计与制作cs8第13章
CSS样式规则
由选择器和声明块组成，用于定义元 素的样式，如颜色、字体、布局等。
CSS盒模型
理解盒模型的概念，包括内容、内边 距、边框和外边距，以及它们如何影 响元素的大小和布局。
CSS布局
学习使用浮动（float）、定位 （position）和显示属性（display） 来控制页面布局。
HTML与CSS结合应用
React.js框架介绍及应用示例
React.js框架概述
React.js是一个用于构建用户界面 的JavaScript库，由Facebook开 发并开源。它采用了组件化开发 的思想，通过构建可重用的组件 来构建复杂的Web应用。
React.js核心特性
React.js提供了虚拟DOM、组件 化开发、状态管理和数据流等核 心特性，使得开发者能够高效地 管理和操作Web页面的数据和视 图。
动画库及插件介绍
Animate.css
GreenSock（GSAP）
Velocity.js
Vivify
一个轻量级的CSS动画库，提 供多种预设的动画效果，可通 过添加类名快速应用动画。
一个高性能的JavaScript动画 库，支持CSS3、SVG、 Canvas等多种渲染方式，提供 丰富的API和插件扩展功能。
while）以及异常处理语句（如try...catch）。
DOM操作与事件处理
DOM概述
介绍文档对象模型 （DOM）的基本概念， 包括节点、元素、属性 等。
DOM操作
详细讲解如何通过 JavaScript对DOM进行 操作，如获取元素、修 改元素内容、添加/删除 元素等。
事件处理
介绍JavaScript中的事 件处理机制，包括事件 类型、事件监听器以及 事件对象的属性和方法。
网页设计与制作第13章
第13章 CSS的属性和值一、CSS字体属性1、字体集合(font-family)可以用一个指定的字体名或一个种类的字体集合。
多个集合的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类集合名随后，以防第1个选择不存在。
定义一个字体的集合的时候，就相当于定义了一个字体的控制集合，当浏览器解释执行的时候，会控制集合中所列的字体顺序从前到后的选择字体。
任何包含空格的字体名都必须用单引号引住。
字体集合也可以用字体属性给出。
案例名称：字体集合 l2-1.htm<html><head><title>字体集合</title><style type="text/css">p{font-family:"隶书",times,serif}</style></head><body><p>字体集合</p><p>text/css</p></body></html>■CSS字体■2002:7:25 ·eva(原创)■ FONT-FAMILY属性：每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。
使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。
■ FONT-FAMILY语法实例：h2 {font-family:times,impact,sans-serif}说明如下:helvetica是浏览器首先寻找的字体名称，如果有就使用它。
在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。
如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。
在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。
网页设计与制作基础教程 第3版 第13章-制作ASP动态网页
“删除记录”行为 “登录用户”行为 “限制对页面的访问”行为 “注销用户”行为 “检查新用户名”行为
::::::::::
1.1.2 网页的布局结构
结构化布局是最基本的网页布局之一，其特点是将网页的各种结构模块 进行平面排列，以构成整个网页。在设计网页布局的过程中，应遵循对称平 衡、异常平衡、对比、凝视和空白等原则。一般情况下，网页的常见布局有 以下几种结构。
::::::::::
1.3.2 规划站点
用户在规划网站时，应明确网站的主题，并搜集所需要的相关信息。规 划站点指的是规划站点的结构，完成站点的规划后，在创建站点时用户既可 以创建一个网站，也可以创建一个本地网页文件的存储地址。
Dreamweaver CC工作界面 Dreamweaver CC基本操作
::::::::::
1.2.1 Dreamweaver CC工作界面
Dreamweaver CC的工作界面效果秉承栏Dreamweaver系列软件产品一 贯简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地 找到。
::::::::::
1.3.1 站点简介
互联网中包括无数的网站和客户端浏览器，网站宿主于网站服务器中， 它通过存储和解析网页的内容，向各种客户端浏览器提供信息浏览服务。通 过客户端浏览器打开网站中的某个网页时，网站服务软件会在完成对网页内 容的解析工作后，将解析的结构回馈给网络中要求访问该网页的浏览器。
Access数据库的基本操作 Access数据库的基础知识
::::::::::
13.1.1 Access数据库的基本操作
Access数据库是目前比较流行的数据库管理系统，它是一个运行在 Windows系统环境下的桌面关系型数据库，也是Office的组件之一。下面将 围绕几个与创建Access数据库相关的问题进行讲述，以便用户对该数据库的 应用有个概括的了解。
网页设计与制作教程第13章
第13章网页编辑与超链接13.1 网页文档的格式化13.1.1用HTML标记格式化文本图13-1 HTML标记格式化文本13.1.2用HTML样式格式化文本·266··267·图13-2 HTML 样式面板图13-3 【定义HTML 样式】对话框13.2 网页图像编辑的基本操作13.2.1 创建鼠标经过图像新建样式删除样式HTML 样式列表自动应用 应用按钮图13-4 【插入鼠标经过图像】对话框13.2.2 建立网站相册图13-5 【创建网站相册】对话框13.2.3利用外部编辑器编辑图像·268·图13-6 【查找源】对话框图13-7 修改前的图片图13-8 修改后的图片图13-9 Fireworks MX位图编辑状态（a）将“东风楼”及阴影擦除（b）改变图片的底色（c）图片出现边框线条（d）设置参数后的效果图13-10 图片编辑过程·269·图13-11 图片的属性面板图13-12 效果参数设置图13-13 图片的属性面板13.3创建超链接13.3.1超链接概述13.3.2创建超链接的方法图13-14 属性面板·270·图13-15 利用【指向文件】按钮创建超链接13.3.3创建锚点链接图13-16 插入【命名锚记】对话框13.3.4创建E-mail链接图13-17 电子邮件链接对话框·271··272·图13-18 在属性面板中设置E-mail 链接13.3.5 创建导航条图13-19 插入导航条对话框13.3.6 创建跳转菜单图13-20 插入跳转菜单对话框图13-21 带跳转按钮的跳转菜单图13-22 跳转菜单的属性面板图13-23 【列表值】对话框·273·图13-24 设计浮动面板组图13-25 跳转菜单对话框13.3.7创建映射图链接图13-26 图像的属性面板·274·图13-27 定义映射图热点区域13.4 应用实例例13.3制作具有下列要求的网页，如图13-28所示。
网页设计与制作报告(优秀3篇)
网页设计与制作报告（优秀3篇）（经典版）编制人：__________________审核人：__________________审批人：__________________编制单位：__________________编制时间：____年____月____日序言下载提示：该文档是本店铺精心编制而成的，希望大家下载后，能够帮助大家解决实际问题。
文档下载后可定制修改，请根据实际需要进行调整和使用，谢谢!并且，本店铺为大家提供各种类型的经典范文，如总结报告、心得体会、应急预案、演讲致辞、合同协议、规章制度、条据文书、教学资料、作文大全、其他范文等等，想了解不同范文格式和写法，敬请关注!Download tips: This document is carefully compiled by this editor. I hope that after you download it, it can help you solve practical problems. The document can be customized and modified after downloading, please adjust and use it according to actual needs, thank you!Moreover, our store provides various types of classic sample essays, such as summary reports, insights, emergency plans, speeches, contract agreements, rules and regulations, documents, teaching materials, complete essays, and other sample essays. If you would like to learn about different sample formats and writing methods, please pay attention!网页设计与制作报告（优秀3篇）在人们越来越注重自身素养的今天，越来越多的事务都会使用到报告，不同的报告内容同样也是不同的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第13章 CSS的属性和值一、CSS字体属性1、字体集合(font-family)可以用一个指定的字体名或一个种类的字体集合。
多个集合的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类集合名随后，以防第1个选择不存在。
定义一个字体的集合的时候，就相当于定义了一个字体的控制集合，当浏览器解释执行的时候，会控制集合中所列的字体顺序从前到后的选择字体。
任何包含空格的字体名都必须用单引号引住。
字体集合也可以用字体属性给出。
案例名称：字体集合l2-1.htm<html><head><title>字体集合</title><style type="text/css">p{font-family:"隶书",times,serif}</style></head><body><p>字体集合</p><p>text/css</p></body></html>■CSS字体■2002:7:25 ·eva(原创)■ FONT-FAMILY属性：每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。
使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。
■ FONT-FAMILY语法实例：h2 {font-family:times,impact,sans-serif}说明如下:helvetica是浏览器首先寻找的字体名称，如果有就使用它。
在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。
如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。
在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。
因此我们提倡使用最基本的字体制作网页，比如中文用宋体，英文用ARIAL，这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。
如果一种字体的名称中有空格，如"Times New Roman"，在CSS语句中要用引号包含该字体。
例：Body {font-family:"Times New Roman",serif}如果该语句已在双引号里，则字体名降级为单引号。
例：<P style="font-family:'Times New Roman',serif">如果该语句包括其它CSS规则，字体说明应放在最后。
例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}2、字体风格(font-style)该属性以3个方法的其中一个来定义显示的字体：normal（普通）、italic（斜体）或oblique（倾斜）。
案例名称：字体风格l2-2.htm<html><head><title>字体风格</title><style type="text/css">p{font-style:oblique}</style></head><body><p>字体风格</p></body></html>3、字体变形(font-variant)字体变形属性决定了字体的显示是normal（普通）还是small-caps（小型大写字母）。
当设置字体变形为小型大写字母时文字中的所有小写字母会显示比大写字母稍小的大写字母。
案例名称：字体变形l2-3.htm<html><head><title>字体变形</title><style type="text/css">p{font-variant:small-caps}</style></head><body><p>字体变形ABCabc</p></body></html>4、字体加粗(font-weight)字体加粗属性用作说明字体的字重,该属性值可以从100到900，normal相当于400，bold相当于700，bolder是将继承值加上一个等级，lighter是将继承值减上一个等级。
浏览器能不能正确显示要看使用的字体类型支持几种粗细值。
案例名称：字体加粗l2-4.htm<html><head><title>字体加粗</title><style>p{font-family:Verdana;font-size:20pt}</style></head><body><table width="100%" border="1"><tr><td><p style="font-weight:100">font-weight:100</p></td><td><p style="font-weight:600">font-weight:600</p></td></tr><tr><td><p style="font-weight:200">font-weight:200</p></td><td><p style="font-weight:700">font-weight:700</p></td></tr><tr>59<td><p style="font-weight:300">font-weight:300</p></td><td><p style="font-weight:800">font-weight:800</p></td></tr><tr><td><p style="font-weight:400">font-weight:400</p></td><td><p style="font-weight:900">font-weight:900</p></td></tr><tr><td><p style="font-weight:500">font-weight:500</p></td><td> </td></tr></table></body></html>5、字体大小(font-size)字体大小属性用作修改字体显示的大小：xx-small/x-small/small/medium/large/x-large/xx-large /smaller/larger/百分比/高度。
关键字的本级与上级的比是：1:1.5，比如：medium 与large 的比是1:1.5；而larger 是将继承值加上一级，smaller 是将继承值减上一级；百分比是将默认字体扩大或缩小若干倍；高度的单位前面已讲过。
案例名称：字体大小 l2-5.htm<html><head><title>字体大小</title><style>span{font-size:20pt}</style></head><body><table width="100%" border="1"><tr align="center"><td><p style="font-size:xx-small">xx-small</p></td><td><p style="font-size:x-small">x-small</p></td><td><p style="font-size:small">small</p></td></tr><tr align="center"><td colspan=3><p style="font-size:medium">medium</p></td></tr><tr align="center"><td><p style="font-size:large">large</p></td><td><p style="font-size:x-large">x-large</p></td><td><p style="font-size:xx-large">xx-large</p></td></tr><tr align="center"><td><p style="font-size:50%">50%</p></td><td><p style="font-size:100%">100%</p></td><td><p style="font-size:200%">200%</p></td></tr><tr align="center"><td><p style="font-size:5pt">5pt</p></td><td><p style="font-size:10pt">10pt</p></td><td><p style="font-size:20pt">20pt</p></td></tr><tr align="center"><td><span>20pt</span></td><td><span><p style="font-size:smaller">20ptsmaller</p></span></td><td><span><p style="font-size:larger">20ptlarger</p></span></td></tr></table></body></html>6、字体(font)属性值：[<font-style> || <font-variant> || <font-weight> ]<font-size>[/<line-height>]<font-family>该属性可以一次定义前面所提到的所有属性，还有行高。