《网页设计与制作教程HTML+CSS+Bootstrap）》课件 项目三 创建网站“姑苏美食”.pptxVIP

项目三创建姑苏美食网;项目简介

文本和图像作为网页制作中最基本的构成元素，在任何一个网页中都是必不可少的，它们可以用最直接的方式向浏览者传达有效信息。表格作为网页布局的元老，在DIV+CSS布局网页的时代仍然是网页制作不可或缺的一类元素，用它可以有序的组织数据，让信息显示更加清晰。超链接作为网页之间联系的纽带，是网站中使用频率较高的一类元素。如何应用CSS样式将这些元素以一种更合理、更美观、更便捷的方式进行排版设计，是本项目的主要学习内容。;项目目标

本项目以《姑苏美食》网站开发为例，介绍CSS、文本、图像、表格、超链接和多媒体在网页中的综合应用。要求理解CSS元素的属性并掌握基本的样式设置和调用方法，掌握在网页中插入文本、编辑文本的方法，掌握在网页中插入图像、编辑图像的方法，掌握在网页中插入表格、编辑表格的方法，了解超链接的作用并能够设置不同类型的超链接，了解多媒体的概念和基本属性并能够在网页中插入多媒体。;工作任务

根据《姑苏美食》网站设计与制作的要求，基于工作过程，以任务驱动的方式，应用文本、图像、多媒体等信息充实网站，通过CSS样式美化网站，并利用超链接为网站中的网页建立连接的桥梁。

（1）编辑文本和图像

（2）创建超级链接;任务一编辑文本和图像

通过以下两个步骤的操作实践来掌握在网页中编辑文本和图像的方法，初步完成《姑苏美食》网站首页的制作，网页效果如图所示：

1、创建首页；

2、编辑首页；

;任务目标

按照网站需求分析，建立站点文件夹，并在Dreamweaver2021中建立站点，设计制作首页文件，以及掌握在首页中插入文本和图像，并设置文本、图像格式的方法。;知识准备

知识准备一CSS样式

一、定义

二、功能

三、特色

（1）丰富的样式定义（2）易于使用和修改（3）多页面应用（4）层叠（5）页面压缩

四、基本语法

一条完整的CSS样式语句包括selector（选择器）、property（属性）和value（属性值）

selector{property:value;}

五、种类

（1）内联样式表（InlineStyle）

（2）内嵌样式表（InternalStyleSheet）

（3）外部样式表（ExternalStyleSheet）

六、选择器

（1）标签选择器（2）类选择器（3）ID选择器（4）伪类选择器

;知识准备二字体属性

1、font-family—字体类型

2、font-size—字体大小

3、font-style—字体风格

4、font-weight—字体粗细

5、font-variant—字体变量

6、font—复合属性

7、color—字体颜色

8、text-shadow—字体阴影

;知识准备三文本属性

1、word-spacing—单词间距

2、fletter-spacing—文本间距

3、text-decoration—文本修饰

4、ftext-align—文本对齐

5、text-indent—段落缩进

6、lint-height—行间距;任务实施

步骤一创建首页;任务实施

步骤二编辑首页;任务二创建超链接

通过以下三个步骤的操作实践掌握超链接在网站中的应用，完成“菜谱”网页以及锚记链接的创建，同时完成“小吃”网页中图像热点链接的制作，最后通过超链接实现《姑苏美食》网站各个页面之间的互访，网页效果如图所示：

1、为“菜谱”网页创建锚记链接；

2、为“小吃”网页创建图像热点链接；

3、创建网站页面之间的链接；;任务目标

按照“菜谱”网页的需求分析，设计制作菜谱网页，并在网页中用锚记链接的方式实现页面内互相访问的效果；按照“小吃”网页的需求分析，设计制作小吃网页，并在网页中用图像热点链接的方式实现以地图形式寻找姑苏美食的效果；掌握各类超链接在网页设计中的应用。;知识准备

知识准备一超链接的样式

a:link为超级链接的初始状态

a:hover为把鼠标放上去时悬停的状态

a:active为鼠标单击时的状态

a:visited为访问过链接后的状态

;知识准备

知识准备二超链接的类型;知识准备

知识准备三列表标签;知识准备

知识准备四列表属性

1、list-style-type

2、list-style-image

3、list-style-position

4、list-style

;任务实施

步骤一为“菜谱”网页创建锚记链接;任务实施

步骤二为“小吃”网页创建图像热点链接;任务实施

步骤三创建网站页面之间的链接