第6章网页制作基础
6_静态网页制作
换行
对于需要换行的地方，应加上<Br>标记， 有了它浏览器会自动将右边的文字转移至 下一行。请注意， <Br>是单标记。 示例：没有换行效果 换行效果
段落标记
为了使文本排列的整齐和清晰，文字段落 之间常用<P>和 </P>来做标记。 </P>是可 以省略的，因为下一个<P>的开始就意味着 上一个<P>的结束。 <P>标记还有一个属性ALING，它用来指明 字符显示时的对齐方式，一般值有 CENTER、LEFT、RIGHT3种。 示例：段落标记效果
6.2.2 页面布局与文字标记
文本是网页传播信息的基本载体，在网页 中的重要地位可想而知。对于任何一个基 本网页来说，文本都是必不可少的，文本 的格式化也是非常重要的。
标题
HTML中提供了相应的标题标记<Hn>。HTML 总共提供6个等级的标题，n越小标题字号就越大。 字号大 <H1>„ </H1> 一级标题 <H2>„ </H2> 二级标题 <H3>„ </H3> 三级标题 <H4>„ </H4> 四级标题 <H5>„ </H5> 五级标题 字号小 <H6>„ </H6> 六级标题 示例:标题效果
1. 2. 3. 4.
5.
简单动态页面处理流程 浏览器发出对动态页面的请求； Web服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码，生成结果； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。
网页制作6浮动与定位
信息工程学院
标签的浮动属性
由于浮动元素不再占用原文档流中的位置，所 以会对页面中其他元素的排版产生影响，如果 要避免这种影响，就需要对元素清除浮动。
6.1 知识点讲解
信息工程学院
2、清除浮动
为了避免左浮动或右浮动对元素的影响，往往需要在该元素中清除 浮动。在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
6.1 知识点讲解
信息工程学院
2、清除浮动
clear属性的常用值有三个，分别表示不同的含义，具体如下表所示。
属性值 left right both
描述 不允许左侧有浮动元素（清除左侧浮动的影响） 不允许右侧有浮动元素（清除右侧浮动的影响） 同时清除左右两侧浮动的影响
6.1 知识点讲解
网页制作基础
第六章 浮动与定位
✎
✎ 学习目标
掌握标签的
1 能够为标签
浮动
信息工程学院
性，能
型定位 2
的差别
掌握
掌握div+css的布局技巧，
能够运用div+css为 网页布局
3
目录
元素的浮动 overflow属性 元素的定位 元素的类型与转换 案例--制作网页焦点图
信息工程学院
✎
网页布局
在网页设计中，如果按照从上到下的默认 方式进行排版，网页版面看起来会显得单 调、混乱。这时就可以运用div+css对页 面进行布局，将各部分模块有序排列，使 网页的排版变得丰富、美观。
✎
网页布局常用属性
信息工程学院
应用排列
图文排列 论坛分享
在使用div+css进行网页布局时，经常会使 用一些属性对标签进行控制，常见的属性有 浮动属性（float属性）和定位属性 （position属性）、display属性。
第6章 网页中超级链接的应用
6.4 创建各种类型的链接
4. 创建下载链接
如.exe,.zip,.rar等。
网 页 制 作 基 础 教 程
如想提供文件下载 ，只需将浏览器无法识别的文件链接到网页中 ，
选择要创建链接的文本或图像，在“属性窗口”的“链接”文本框
中拖动文件指向按钮，指向一个浏览器无法识别的文件，如rar文件。
1.
管理超链接
在首选参数对话框中设置自动更新 选择“编辑”|“首选参数”命令，打开“首选 参数”对话框，在“移动文件时更新链接”选 项的下拉列表中进行选择。 总是——每当移动或重命名选定文档时， Dreamweaver将自动更新该文档的所有链接。 提示——将显示一个提示对话框，列出更改 影响到的所有文件，以进行进一步选择，系统 默认的选项是“提示”。
5 使用图像与多媒体丰富网页内容
网 页 制 作 基 础 教 程
插入FLV视频
“插入”菜单→“媒体” →FLV “插入”面板→“常用”子面板→“媒体” →FLV
直接将flv视频文件拖动到Dreamweaver的设计窗口
为网页添加背景音乐
在“代码”窗口的<body>后面插入<bgsound src=“…mp3文件 autostart=true loop=-1”/>
每当在本地站点内移动或重命名文件时，Dreamweaver可自动更新 指向该文件的链接。
“编辑”菜单—>“首选参数”，在“常规”中单击展开“移动文件 时更新链接”下拉按钮，选择不同的选项，则进行不同的设置。
2.
在整个站点范围内更改链接
手动更改所有链接，包括电子邮件链接、FTP链接、空链接和脚本
网页设计与制作各章习题及答案
A. Ctrl+ALT+A B. Ctrl+ALT+I C. Ctrl+ALT+L D. Ctrl+A
(6) 在网页中不论是加入图像文件或是超链接。（ B ） ）
A. 它们都是绝对路径
B. 它们都是相对路径
C. 它们都是路径
D. 以上都不对
(7) 在 DreamweaverMX 中，站点分为（ B ）
答：WWW 是“World Wide Web”的缩写，其含义是“全球网”。是以超文
本传输协议为基础，提供面向 Internet 的信息查询服务，WWW 服务可以让用
户能用统一界面的信息浏览系统查询 Internet 上的各类信息。
(2) WWW 服务的工作原理是什么？
超文本 访问
用户 浏览器 服务器 1 服务器 2
</BODY> </HTML>
(4) 再在上一题的基础上，给第一行滚动的文字加上黄色背景，给第二行滚动的 文字加上红色前景。 答：<HTML>
<HEAD> <title>欢迎大家访问</title>
</HEAD> <BODY>
<P><marquee direction=right bgcolor="#FFFF00">“我会努力学习 网页制作技术”</marquee><br> <marquee behavior=alternate> <font color="#FF0000">“我一定能制作出精美的网页”</font> </marquee>
网页制作基础
常见网站由域名（domain name 俗称网址或 域名）、网站源程序和网站空间三部分构成。
域名俗称网址； 网站源程序则放在网站空间里面，表现为网站前 台和网站后台； 网站空间由专门的独立服务器或租用的虚拟主机 承担。
2. 网站分类
根据网站所用编程语言分类：例如asp网站、 php网站、jsp网站、Asp. net网站等； 根据网站的用途分类：例如门户网站（综合网 站）、行业网站、娱乐网站等； 根据网站的功能分类：例如单一网站（企业网 站）、多功能网站（网络商城）等；
常见的Web浏览器软件有：IE、Firefox、 Opera和Netcape等。 不同Web浏览器软件所支持的网页格式有所区 别，所以WWW服务器提供网页信息时，要考虑客 户端软件的支持情况。
1.2.4 W3C
W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。 W3C于1994年10月在麻省理工学院计算机科学实 验室成立。创建者是万维网的发明者Tim BernersLee。 W3C组织是对网络标准制定的一个非赢利组织， 像HTML、XHTML、CSS、XML的标准就是由 W3C来定制。
HTML是一种规范，一种标准，它通过标记符 号来标记要显示的网页中的各个部分。网页文件本 身是一种文本文件，通过在文本文件中添加标记符， 可以告诉浏览器如何显示其中的内容（如：文字如 何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符 解释和显示其标记的内容，对书写出错的标记将不 指出其错误，且不停止其解释执行过程，编制者只 能通过显示效果来分析出错原因和出错部位。但需 要注意的是，对于不同的浏览器，对同一标记符可 能会有不完全相同的解释，因而可能会有不同的显 示效果。
网页设计第6章ppt
bordercolor 单元格边框颜色 bordercolorlight 单元格边框向光部分的颜色 bordercolordark 单元格边框背光部分的颜色 background 单元格背景图片 <TD> 的参数设定格式: 例如:<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> 举例6-6
பைடு நூலகம்
6.2 使用表格设计页面布局 在网页设计中表格还有一个重要的作用,就是设计页面 布局. 一个空白网页布置起来比较困难,尤其是一些复杂的页 面.这时可以利用表格将网页分成若干个单元格,每个单元 格对应网页中的一个部分.然后,对每一部分分别进行设计 和制作,这样就可以使复杂的网页设计简化,而且所设计的 网页清晰,有条理性.
6.单元格的设定 <th>和<td>都是插入单元格的标签,这两个标签必须嵌套在<tr> 标签内.是成对出现的.<th>用于表头标签,表头标签一般位于首 行或首列,标签之间的内容就是位于该单元格内的标题内容,其中 的文字以粗体居中显示.数据标签<td>就是该单元格中的具体数据 内容,<th>和<td>标签的属性都是一样的,属性设定如下: width/height 单元格的宽和高,接受绝对值(如 80)及相对 值(如 80%). colspan 单元格向右打通的栏数 rowspan 单元格向下打通的列数 align 单元格内字画等位置,可选值为:left, center, right. valign 单元格内字画等位置,可选值为:top, middle, bottom. bgcolor 单元格的底色
网页设计Dreamweaver CS3教程1-6章(基础篇)
网页效果
活动三：打造自己的个性化站点
活动小结：
在这次活动中我们完完整整的制作了一个个人的网站，
是不是比想象中的容易啊！在本次制作中使用了“高级”
选项卡来建立网站，这比使用向导建立更快捷。 在制作中，网页间的链接是很重要的，作为一个设计者
值得注意的是，你的设计要让使用者能方便的在你的站点
中的任何网页之中进行跳转。
件的特点。
活动一：初识网页
活动小结：
网页中使用的最多的元素是文字和图片。图 片的一般格式为jpg或gif文件。flash的使用能使网 页增加动感。 动态网页能对用户提交的信息作出及时的反 馈，使网页更具人性化。 Dreamweave有着可视化的操作界面，特别在 与flash和fireworks的相互配合，成为网页创意组 件中最重要的一员。
活动三：制作 “我的第一张网页”
制作完成后的 效果图
活动三：制作 “我的第一张网页”
活动小结：
制作网页的基本流程可以分为：建立
站点->创建网页->插入网页元素->编辑网
页元素->保存网页->预览效果。
第一章实验：制作“我的个人介 绍”
实验要求：
一、建立站点目录mysitelx，并将站点指定至站点目录。 二、制作网页“我的个人介绍”，在网页中加入背景图片、文字、 水平线、图片和超级链接。 三、通过记事本打开网页，修改现有的HTML代码，比较前后效果。
活动四：编辑我的站点
教学目标：
掌握编辑站点的方法。
知识要点：
网站地图，管理网站文件、链接检查、添加和 删除站点。
活动四理功能 （2）站点视觉地图 （3）添加和删除站点
视图工具栏
“管理站点”对话框
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
《网页的制作》教案【优秀3篇】
一、教学目标1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；2、认识FRONT的界面；3、掌握在主页中插入文字、图片、水平线；4、掌握页面文件与图片的保存。
二、教学重点1、能在指定位置建立只有一个网页的站点（难点）2、能在页面中插入文字、图片、水平线3、掌握页面文件与图片的保存（难点）三、学情分析四、教学方法在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。
五、教学过程设计教师活动：1、引入课题：（激发兴趣，活跃气氛）同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）浏览新浪网站，浏览的第一个页面称为什么？（主页）我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。
问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.htm,主页也是网页）设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。
今天我们学习用Frontpage建立站点，制作一个主页。
先来研究一下没有发布的网站，打开教师做的网站问：同学们看到了什么？（文件夹）总结：可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。
打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。
请学生浏览教师课件，了解学习任务2、新建站点FP的启动问：与word比较，有什么不同？总结：预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。
Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。
《网站主页的设计》教学设计
《网站主页的设计》教学设计浙江绍兴市第一中学信息处董烨华一、教材分析本节课讲授浙江教育出版社《信息技术基础》第六章“网页的设计与制作”的相关，并根据《浙江省普通高中新课程实验信息技术学科教学指导意见》进行了适当设计，教学侧重于让学生掌握网站的策划与构思和熟练掌握简单网页的设计与制作。
二、学情分析学生已经会收集和整理素材，掌握了用FrontPage制作网页的基本操作，对网站的策划与构思有了一定的了解，但网站创建的知识以及网站策划构思的实践比较欠缺，另外学生现有知识水平存在一定差异。
三、教学目标知识与技能：能较熟练地运用表格实现网页布局；知道创建网站的一般过程，了解一些主页设计的知识；初步掌握网站的策划与构思。
过程与方法：通过自主探究和小组合作完成学习任务，掌握一些探究学习的方法，培养与他人协作、交流的意识和能力。
情感、态度与价值观：通过网站主页设计，激发学生的创作欲望，提高学习信息技术的兴趣和愿望；通过教师提供的创作背景信息，使学生更关注气候变化对人类发展的影响，增强社会责任感。
四、教学重难点重点：学会运用表格实现网页布局，初步掌握网站的策划与构思。
难点：如何在主页制作中实现自己的网站设计构思。
五、教学过程1．教学引入，学习准备教师指导学生访问课堂学习网站（如图1），然后介绍网站的创作构思与特点。
师：这是老师为课堂学习专门设计制作的一个网站，请同学们从“名称贴切、主题鲜明、内容丰富、结构清晰、界面友好美观”五个角度，给网站做个评价，认为都满意就赶快伸出五个手指头。
学生们高举手臂，伸出五个手指。
师：谢谢大家的支持，你们的认可是我创作的动力。
师：通过前段时间的学习，我们已经较好地掌握了素材收集与整理的方法；掌握了一些利用FrontPage软件做网页的基本操作；在欣赏优秀网站的基础上，对网站的策划与构思有了一定了解。
这节课，我们将跟随着学习网站的导航栏，一起揭开创建个人网站的第一页──设计制作网站主页。
《网页设计与制作》笔记_学习笔记
《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。
这包括网页的整体外观、结构和交互功能。
网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。
一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。
重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。
2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。
3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。
4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。
考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。
当时网页主要是以文本为主，简单的超链接连接不同的信息。
网页设计与制作案例教程(HTML5+CSS3)第6章使用CSS设置列表样式
WEB
13
6.6.1 HTML列表
在HTML中有三种列表
项目列表
编号列表
定义列表
WEB
6.6.1 HTML列表
① 项目列表
项目列表也称为无序列表，是网页中的常见元素之一，项目列
表使用<li>标签来罗列各个项目，各个项目使用特殊符号来进行分
项标识，如黑色圆点等。项目列表的列表项之间没有顺序关系。 语法格式 <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> …… </ul>
26
6.7 提高项目：制作“童书畅销榜”页面
27
6.8 拓展项目：制作“商品列表”页面
28
WEB
网 页 效 果
代 码
20
6.6.2 常用CSS列表样式
① 设置列表符号类型
项目列表项的默认符号是黑色圆点，编号列表项默认 符号是数字1、2、3…..，通过设置list-style-type属性可 以改变列表项的符号。 语法格式
list-style-type:属性值;
21
6.6.2 常用CSS列表样式
19
6.6.1 HTML列表
③ 定义列表
<!doctype html> <html> <head> <meta charset="utf-8"> <title>定义列表</title> </head> <body> <dl> <dt>中国的城市:</dt> <dd>北京</dd> <dd>上海</dd> <dd>广州</dd> <dt>美国的城市:</dt> <dd>华盛顿</dd> <dd>纽约</dd> <dd>洛杉矶</dd> </dl> </body> </html>
Web习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
网页设计考试重点
第一章Dreamweaver CS4基础1网页的概念网页（Web）就是网站上的某一个页面，是一个纯文本文件，是向浏览者传递信息的载体，以超文本的超媒体为技术，采用HTML、CSS、XML等语言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。
2网页类型：静态网页的URL通常以.htm、.html、.shtml、.xml等形式为后缀。
动态网页.asp、.jsp、.php、.perl、.cgi。
①静态网页：指在网页设计中，纯HTML格式的网页。
②动态网页：指由网页应用程序反馈至浏览器上生成的网页，是服务器与用户进行交互的界面。
3网页的布局：π型、T型、“三”型、框架布局、POP布局和Flash布局。
①π型布局：顶部一般为网站标志、主菜单和广告条，下方左右为链接、广告或其他内容，中间为主题内容的布局，整体效果类似于符号π。
优点：充分利用页面的版面，可容纳的信息量大；缺点：因容量大而显得拥挤，不够生动。
②T型布局：顶部一般是网站标志和广告条，左侧是主菜单，右侧是主要内容。
优点：页面清晰，内容主次分明，初学者容易上手；缺点：布局规格死板，若不注意细节上的色彩调整，很容易产生乏味感。
③“三”型布局：在页面上用横向的两条色块将整个网页划分为上、中、下3个区域，色块中放置信息或广告。
④框架布局：包括左右框架布局、上下框架布局和综合框架布局集中形态。
采用框架布局的网页一般可以通过某个框架内的链接控制另一个框架内的页面内容显示。
⑤POP布局：页面布局像一张宣传海报，以一张精美的图片作为页面设计的中心。
⑥Flash布局：网页的整体就是一个Flash动画，画面一般制作的比较绚丽活泼。
优点：迅速吸引访问者注意的新潮布局方式。
第二章创建和管理站点1规划站点的目录结构应注意以下几点：•不要用一个目录存放整个站点的文档，而应使用子目录分类保存网站栏目的内容文档。
将所有网站文件都放在根目录下，容易造成网站文件管理混乱和上传更新站点文件时速度缓慢等问题。
计算机应用基础(Windows7+Office2010)第六章 网页设计基础
务供应商（ISP）所设立的机房，每月支付必要费用，由ISP代为管理维护，
而客户从远端连线服务器进行操作的服务方式。
•
• 3、虚拟主机
•
虚拟主机是使用特殊的软硬件技术，把真实的物理服务器
主机分割成多个的逻辑存储单元，即虚拟主机，虚拟主机没有物理实体，
但是都能像真实的物理主机一样在网络上工作，具有单独的域名、IP地址 (或共享的IP地址)以及完整的Internet服务器功能，网站所有者只需要租用
• <html>
•
<head>
• </title>
<title>例1.1 设置背景色、体会标题样式的使用
•
</head>
•
<body bgcolor=red>
•
以下为标题样式：
•
<h1>标题一</h1>
•
<h2>标题二</h2>
•
<h3>标题三</h3>
•
<h4>标题四</h4>
•
<h5>标题五</h5>
新一代的网页标准规范。
• 3、域名
•
互联网中的计算机采用的身份标识是IP地址，但由于IP地
址完全由数字构成，不便于记忆，为了解决这个问题，人们按照一定的规
则对互联网中的计算机定义了字符形式的地址标记，这就是域名。在网络
中，域名通常与IP地址是一一对应的。按照互联网中的组织模式，域名系 统最早提出了六大分类，即.com（商业组织）、.edu（教育机构）、.gov （政府部门）、.mil（军事机构）、.net（网络相关组织）、.org（非营利
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
HTML5+CSS3网页设计基础 第六章 CSS盒子模型
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第11页
6.2.2 盒模型的宽和高
4. 元素类型与元素类型转换
(1) 文档中元素都可以划归为 block和 inline两种类型 块级元素(block)，块级元素的宽度为100%，始终占据一 行。<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、 <div>和<body>等元素都是块级元素。 行级元素(inline)，行级元素没有高度和宽度，行级元素 前后没有换行符，没有固定的形状，显示时只占据其内容 的大小。<a>、<img>、<strong>、<b>、<em>、<i>、 <span>和表单元素等都是行级元素。
第6章 CSS盒子模型
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第6章 CSS盒子模型
第1页
本章概述
盒模型是CSS中一个重要概念，文档中的每个元 素被描绘为矩形盒子。一个盒子包括content （实际内容）、padding（内边距）、border （边框）和margin（外边距）。 本章将具体介绍盒子的各种外观属性和背景属性 及其设置方法。
第6章 CSS盒子模型
HTML5+CSS3网页设计基础
第21页
6.2.5 案例制作
制作完成演示案例:首页企业新闻局部页面。 参考代码 6-2.html
HTML5+CSS3网页设计基础
《网页制作基础教程》习题参考答案
第1章习题参考答案一、思考题1．答：因特网：即Internet，通常称为互联网或国际互联网。
ISP：因特网服务提供者。
ICP：因特网内容提供者。
WWW：World Wide Web的简称，有时也简称为Web，对应的中文名称为万维网，是因特网提供的一种服务。
IP地址：在因特网中，每一台主机都必须有一个IP地址。
IP地址由4个字节（32位二进制数）组成。
域名：用文字描述来代替IP地址，解决IP地址难以记忆的问题。
URL：统一资源定位器，是表示Internet上信息资源地址的统一格式。
超文本：是指包含指向其他Web页的超连接（Hyper link）文本格式。
超链接是指内嵌了Web地址（即网页的URL）的文字或图形。
网页：网页（Web Page）也称为Web页面，通常是使用HTML语言编写成的。
一个Web页面对应一个HTML文件，也可能还包括与该HTML文件相关的若干个图片文件、其他多媒体文件和脚本文件等。
网站：网站（Web Site）是由Web服务器上的一组相关的网页文件组成的，这些网页文件存放在Web服务器的一个或若干个指定的目录内。
主页：主页（HomePage）是网站中的一个特殊页面，是用户连接到网站时默认显示的第一个网页，即用户连接到网站时首先看到的页面。
2．答：从网页制作技术的角度来说，主页与其他网页没有什么本质的不同。
但在网站中，主页的文件名通常是固定的，例如index.htm或default.htm等，是在Web服务器软件中设臵的。
3．答：包括超文本标记语言（HTML）、层叠样式表（CSS）、脚本语言（JavaScript）、动态HTML（DHTML）、动态网页技术（ASP、PHP、JSP等）、可扩展标记语言（XML）等。
XML并不是被开发出来取代HTML的，而是用以弥补其不足的。
4．答：通常动态网页指得是，Web服务器能够通过HTML表单收集用户的信息，用户也可以通过网页获得自己想要的信息，一般采用数据库技术，实现网页的界面和内容的分离，并使得网站内容的更新和维护非常方便。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图 5.18 “插入Web组件”对话框
（2）插入表格 插入表格：表格经常用于网页元素（文 本、图像等）的定位，使网页更加整齐有 序，便于排版。“插入表格”对话框，如 图5.20所示
图 5.19 “字幕属性”对话框
3、建立框架式页面study.htm 框架是一种将浏览器窗口划分为功能 独立的多个区域的方法，每一个区域可以 显示不同的网页。如图5-22所示。
框架集网页文件 index.htm
左框架网页文件 left.htm 右框架网页文件 right.htm
5-22 双框架页面
（1）建立框架式页面 执行菜单命令”文件”/“新建”/“网页”， 弹出“新建”对话框，如图5.23所示。在对 话框中选择“框架网页”中“垂直拆分”，在 页面设计视图中出现左、右两个框架 ，如图 5.24所示。
5.1.2 HTML中的文本修饰标记
网页中的文字，默认是宋体，根据需要可以设置文字 的标题格式，格式是： <Hn align=对齐方式 > 页面显示文字 </Hn >
<H1> ……..</H1>设置标记符号<H1></H1>中间的文字 为一级标题格式，HTML中可以设置六级标题，字体依次 由大到小，<H6> …….</H6>把标记符号中间的文字设置 为六级标题。 align属性可以设置为 left（左对齐）、center（居 中）、right (右对齐)。 reamweaver 8 的使用
Dreamweaver 8是Macromedia公司开发 的一款”所见即所得”的网页制作软件,集 网页制作和站点管理与一身的编辑器。它 与Macromedia公司的另外两件产品flash 8 和fireworks 8一起使用，更适合于专业的 网页制作人员，制作的页面更精美、功能 更强大。
图5.28 Windows组件向导
2、在Windows XP中配置IIS
IIS安装完毕后，打开”Internet 信息服务” 窗口，存在一个系统提供的”默认网站”，右键单 击”默认网站”，在弹出菜单中单击”属性”子菜 单，弹出”默认网站属性”窗口，如图5.30所示。”
默认网站属性”窗口中的”网 站”选项页需要设置”IP地址” 和”TCP端口”，通常”IP地址”设 为本机地址。”主目录”选项页中” 本地路径”系统默认为 c:\interpub\wwwroot，输入http： //localhost弹出的页面都是保存在 wwwroot这个文件夹中。将 “个人 站点”person文件夹放在该目录下， 图5.30“网站”属性设置 即完成了站点的发布。
5.1.6 HTML中的表格标记
标记<table> </table>定义一个表格； 标记<tr> </tr>定义表格中的一行； 标记<td></td>定义表格中每行的列数据项； 标记<th> </th>定义表格头。
常用的<table>标记属性见表5-1
例如：代码显示效果如图5.8所示
图 5.8 “表格”代码运行效果
5.3.2Dreamweaver 8的基本操作
1.建立站点
单击菜单”站点”/“新建站点”，弹出“站 点定义”对话框，如图5-35所示
在“基本”选项卡中输入站点 名person，单击“下一步”按钮， 选择是否使用服务器技术（ASP或 JSP技术等），选择“否”，表示 该站点是静态站点，否则建立的 站点是动态的。然后单击“下一 步”按钮，选择站点文件在计算 机上的存储位置“d:\person\”， 其他选项采用默认值，最后单击 图5.35 “建立站点”对话框 “完成”按钮，建立完成站点 。
5.2 SharePoint Designer快速制作网页 Office组件中的Microsoft FrontPage 于 2007 年 升 级 版 本 ， 重 新 命 名 为 Microsoft Office SharePoint Designer 2007 ，至此Microsoft FrontPage 即将退 出微软产品舞台。 用SharePoint Designer 2007制作网页操 作简单、页面精美，网页设计者不需要编 写大量的HTML代码
5.2.2 编辑网页
1、编辑个人站点主页面index.htm （1）设置页面背景图像 （2）输入文字 （3）插入图片 （4）插入超链接
2、编辑“站长简介”页面introduce.htm （1）插入动态效果
“字幕”在网页中单击要插入滚动字幕的位 置，然后执行菜单命令“插入”/“Web组件”， 弹出“插入Web组件”对话框，如图5.18所示。
图5.23 “新建网页”对话框
图5.24 双框架式页面设计
（2）编辑框架式页面 在左框架页面中插入一个6行1列的定 位表格，在表格中输入文字，并设置右 框架页面的背景图片，如图5.25所示。
在设计视图中，用 鼠标选中文字“C语言 的特点”，然后单击菜 单”插入”/“超链接”， 弹出“编辑超链接”对 话框。 图5.25 双框架式页面效果
5.1.3 HTML中的段落修饰标记
在浏览器页面上创建段落并设置对齐方 式，可以使用标记<p></p>,格式如下： <p align=对齐方式> 页面显示文字</p> 标记  能够实现在浏览器页面上 插入空格。
例如：段落空格修饰
代码如下： <html> <head> <title>个人简介</title> </head> 图 5.5段落修饰 <body> <H1 align="center" > <font color="red">个人情况简介 </font></H1> <font color="blue" size=4 face="黑体"> <B>  我是一名学生</B> <I>就读于中国北京</I> <B> ，这是我制作的第一个页面，<br><br>还要努力！</B> </font> </body>
5.1.4 HTML中建立超级链接
在HTML中，可以为文本和图像创建以下几种 链接： （1）网站内部链接 <A href=“链接文件名.html”> 页面显示内容 </A> （2）网站外部链接 若需要在不同的网站之间实现跳转，就要使用 绝对路径（完整网址 ）创建网站外部链接。 （3）电子邮件链接 <A href=mailto:邮件地址> 页面显示内容 </A>
5.2.3发布站点
站点可以通过操作系统下的WEB服务器进 行发布，首先要安装、配置IIS（Internet Information Server互联网信息服务）服务器， 如果操作系统是Windows 2000 Server版或者 更高版本，则不需要安装IIS，操作系统已默 认安装好，只需要进行IIS的配置。 如果操作系统是Windows XP或者Windows 2000 Professional版，则需要安装并配置IIS服 务器。
SharePoint Designer是集网页创建、编辑、发 布、预览等于一体的程序组，打开SharePoint Designer程序窗口，如图5.9所示。
图5.9 SharePoint Designer程序窗口
5.2.1 建立站点
（1） 启动SharePoint Designer 2007程序，单击 菜单“文件”/“新建”/“网站”子菜单项，在 弹出的“新建”窗口中选择“空白网站” , 并 指定新网站位置为“d:\person\” （2）在“文件夹列表”窗口中选中“person”站 点，右键单击“新建”/“HTML”子菜单项，新 建一个网页文件
网站是指存放于WEB服务器上可以相互链接的 网页的集合，其中可以包括网页、图像、声音等 多种类型文件，人们进入网站的第一个页面称为 主页，通常被命名为index.htm或index.html。 复杂的网页可以用专业网页开发工具 SharePoint Designer(或FrontPage)和 Dreamweaver来创建，可以在基本的HTML代码中 嵌入VBScript、JavaScript、ASP、JSP等脚本语言 代码实现网页上的动态效果或交互功能，复杂的 网页文件后缀名可以是html、htm、asp、jsp等。
5.1 网页制作与HTML语言
网页是用HTML语言（Hyper Text Markup Language超文本标记语言）编写 的源程序纯文本文件。简单的网页可以 用各种文字处理软件，如word或记事本 来编辑或创建，保存文件时后缀扩展名 为.html或.htm，通过浏览器展示其效果。
5.1.1
网页与HTML简介
教育部 “十一五”国家级规划教材
《大学计算机基础实验教程(第3版)》
第 5 章 网页制作基础
清华大学出版社
本章主要内容
• • • • • • • 网页制作与HTML语言 在HTML中设计效果标记 在HTML中建立超级链接 用SharePoint Designer制作网页 建立网站 发布站点 Dreamweaver的使用
5.4作业思考题
1.网页设计HTML语言是一种什么样的编程语言 2.实现网页上的动态效果或交互功能需要使用哪些脚本语言 3.创建网页的步骤主要有哪些 4.HTML中的文本修饰标记有哪些 5.HTML中建立超级链接是如何设置的 6.HTML中的图像修饰标记可以产生哪些效果 7.HTML中的表格标记如何设置 8.如何用Office SharePoint Designer 2007编辑个人站点主页 9.如何编辑制作双框架式页面 10.如何通过操作系统下的WEB服务器进行发布站点 11.如何安装Internet信息服务(IIS) 12. 如何使用Dreamweaver建立站点