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

项目三

创建姑苏美食网项目简介文本和图像作为网页制作中最基本的构成元素，在任何一个网页中都是必不可少的，它们可以用最直接的方式向浏览者传达有效信息。表格作为网页布局的元老，在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为访问过链接后的状态知识准备知识准备二超链接的类型链接路径内部链接外部链接链接地址绝对链接相对链接知识准备知识准备三列表标签标记描述<ul>无序列表<ol>有序列表<dir>目录列表<dl>定义列表<menu>菜单列表<dt>、<dd>定义列表的标签<li>列表项目的标签知识准备知识准备四列表属性1、list-style-type2、list-style-image3、