《网页设计与制作教程HTML+CSS+Bootstrap）》课件 项目四 创建姑苏美食网.ppt

第*页《网页设计与制作教程

（HTML+CSS+Bootstrap）》项目四创建姑苏美食网项目简介文本和图像作为网页制作中最基本的构成元素，在任何一个网页中都是必不可少的，它们可以用最直接的方式向浏览者传达有效信息。表格作为网页布局的元老，在DIV+CSS布局网页的时代仍然是网页制作不可或缺的一类元素，用它可以有序的组织数据，让信息显示更加清晰。超链接作为网页之间联系的纽带，是网站中使用频率较高的一类元素。如何应用CSS样式将这些元素以一种更合理、更美观、更便捷的方式进行排版设计，是本项目的主要学习内容。项目目标本项目以《姑苏美食》网站开发为例，介绍CSS、文本、图像、表格、超链接和多媒体在网页中的综合应用。要求理解CSS元素的属性并掌握基本的样式设置和调用方法，掌握在网页中插入文本、编辑文本的方法，掌握在网页中插入图像、编辑图像的方法，掌握在网页中插入表格、编辑表格的方法，了解超链接的作用并能够设置不同类型的超链接，了解多媒体的概念和基本属性并能够在网页中插入多媒体。工作任务根据《姑苏美食》网站设计与制作的要求，基于工作过程，以任务驱动的方式，应用文本、图像、多媒体等信息充实网站，通过CSS样式美化网站，并利用超链接为网站中的网页建立连接的桥梁。（1）编辑文本和图像（2）制作餐厅排行表（3）创建超级链接（4）插入多媒体元素餐厅排行榜通过以下两个步骤的操作实践掌握表格在网页中的应用，初步完成《姑苏美食》网站“canting.html”餐厅页面的制作，网页效果如图所示：1、插入并填充表格；2、编辑表格；任务目标按照餐厅网页的需求分析，设计制作“canting.html”，在网页中以表格的形式呈现最受欢迎的餐厅排行榜。掌握在网页中插入表格、编辑表格、填充表格的方法。知识准备知识准备一表格标签tabletrth第一列/thth第二列/th/trtrtd1-1/tdtd1-2/td/trtrtd2-1/tdtd2-2/td/tr/table知识准备二表格的基本属性属性值功能描述width表格的宽度height表格的高度border表格的边框align表格的对齐方式cellpadding单元格内容与单元格边界之间的空隙cellspacing单元格之间的空隙bordercolor表格边框颜色background表格背景图片bgcolor表格背景色colspan跨多列rowspan跨多行任务实施步骤一插入并填充表格任务实施步骤二编辑表格任务四插入多媒体元素通过以下两个步骤的操作实践掌握多媒体在网站中的应用，完成“yangsheng.html”网页并在此网页中插入视频，同时在首页“index.html”网页中加入背景音乐。“yangsheng.html”网页效果如图所示：1、在“yangsheng.html”网页中插入视频媒体；2、在“index.html”网页中插入音频媒体；任务目标按照“yangsheng.html”网页的需求分析，设计制作养生网页，并在网页中插入视频；按照“index.html”网页的需求分析，在首页中插入背景音乐；掌握常见多媒体元素在网页设计中的应用。知识准备知识准备一多媒体1、多媒体（Multimedia）2、音频（Audio）3、视频（Video）知识准备知识准备二多媒体标签1、音频标签Audio2、视频标签video任务实施步骤一在“yangsheng.html”网页中插入视频媒体任务实施步骤二在“首页”网页中插入音频媒体*第*页《网页设计与制作教程

（HTML+CSS+Bootstrap）》*