网页设计与制作项目二.ppt

1、网页设计与制作项目二利用项目二利用HTMLHTML编写网页编写网页编写公司简介页面编写公司简介页面1编写产品展示页面编写产品展示页面2编写产品清单列表页面编写产品清单列表页面3项目二利用项目二利用HTMLHTML编写网页编写网页添加页面的动态效果添加页面的动态效果6编写商务留言页面编写商务留言页面4将页面组合成网站将页面组合成网站5任务任务1 1编写公司简介页面编写公司简介页面(一一)HTML概述概述HTML代码是由若干代码是由若干HTML标签符号和由标签符号描述的各种标签符号和由标签符号描述的各种元素组成的。元素组成的。注释标签HTML标签HTML文档结构任务任务1 1编写公司简介页面编写公

2、司简介页面(二二)标签标签标签在与之间使用，用来给网页命名，网页的名称将被显示在浏览器的标题栏中，该标签无属性。任务任务1 1编写公司简介页面编写公司简介页面(三三)标签标签标签定义标签定义HTML文档的所有内容，如文本、超链接、文档的所有内容，如文本、超链接、图像、表格和列表。图像、表格和列表。任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签1.标签标签标签的显示任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签2.标签标签标签的显示任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的

3、标签与文字排版有关的标签3.标题文字标签标题文字标签标签的显示任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签4.标签标签任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签5.标签标签任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签6.项目符号、项目编号标签项目符号、项目编号标签嵌套列表显示结果任务任务1 1编写公司简介页面编写公司简介页面(四四)与文字排版有关的标签与文字排版有关的标签7.排版方法及说明排版方法及说明行距控制自动换行空格的插入任务任务1 1编

4、写公司简介页面编写公司简介页面罗德纺织品有限公司网站的公司简介页面任务任务2 2 编写产品展示页面编写产品展示页面(一一)插入图片的标签插入图片的标签任务任务2 2 编写产品展示页面编写产品展示页面标签的显示结果任务任务2 2 编写产品展示页面编写产品展示页面(二二)插入声音、视频、动画等元素的标签插入声音、视频、动画等元素的标签1.标签任务任务2 2 编写产品展示页面编写产品展示页面(二二)插入声音、视频、动画等元素的标签插入声音、视频、动画等元素的标签2.标签任务任务2 2 编写产品展示页面编写产品展示页面罗德纺织品有限公司网站的产品展示页面任务任务2 2 编写产品展示页面编写产品展示页面

5、该网页的制作步骤如下该网页的制作步骤如下:(1)打开记事本打开记事本(2)输入以下输入以下代码代码(3)保存为网页保存为网页文件文件(4)打开保存打开保存文件文件任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签表格标签的显示任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签任务任务3 3编写产品清单列表页面编写产品清单列表页面(一一)表格标签表格标签使用表格的注意事项:(1)(1)表

6、格中各单元格的内容可以是文本、图像、动画、视频、链接、表格中各单元格的内容可以是文本、图像、动画、视频、链接、表单、表单域等所有网页元素。表单、表单域等所有网页元素。(2)(2)依据单元格中的内容，表格具有自动缩放功能。依据单元格中的内容，表格具有自动缩放功能。(3)(3)表格可以嵌套使用，嵌套层数不限。表格可以嵌套使用，嵌套层数不限。任务任务3 3编写产品清单列表页面编写产品清单列表页面(二二)使用表格布局页面使用表格布局页面表格布局的注意事项如下:(1)表格布局时边框宽度的值一定要设置为表格布局时边框宽度的值一定要设置为0，即不显示边框。，即不显示边框。(2)表格布局经常通过表格的嵌套实现

7、。表格布局经常通过表格的嵌套实现。(3)表格布局时的网页代码可读性差。表格布局时的网页代码可读性差。(4)多重嵌套的表格下载速度慢。多重嵌套的表格下载速度慢。任务任务3 3编写产品清单列表页面编写产品清单列表页面罗德纺织品有限公司网站的产品清单列表页面任务任务4 4编写商务留言页面编写商务留言页面(一一)表单的概念表单的概念表单是供浏览者填写信息的页面元素，服务器从中采集客户端的信息，使网页具有交互的功能。在包含表单元素的网页中，当用户填写完信息并提交(Submit)后，表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的处理程序(如ASl程序)处理后，再将用户所需信息传送回客户端的浏览

8、器上，这样网页就具有了交互性。任务任务4 4编写商务留言页面编写商务留言页面(二二)表单标签表单标签表单用标签对来创建，格式如下:action属性的值是服务器端处理表单数据的程序名(包括路径)，如果这个属性是空值，即“”，则使用当前文档处理表单数据。用户提交表单后，服务器就执行action属性值表示的程序(如ASP程序)。任务任务4 4编写商务留言页面编写商务留言页面(三三)表单控件标签表单控件标签表单很像容器，组成它的主要内容是表单控件，文本框、多行文本框、表单很像容器，组成它的主要内容是表单控件，文本框、多行文本框、密码框、列表框、单选按钮、复选按钮、提交按钮、重置按钮等都是表单密码框、列

9、表框、单选按钮、复选按钮、提交按钮、重置按钮等都是表单控件。下面介绍这些表单控件标签。控件。下面介绍这些表单控件标签。任务任务4 4编写商务留言页面编写商务留言页面(三三)表单控件标签表单控件标签多行文本多行文本框控件框控件列表控件列表控件标签标签任务任务4 4编写商务留言页面编写商务留言页面罗德纺织品有限公司网站的商务留言页面任务任务5 5将页面组合成网站将页面组合成网站内部链接内部链接外部链接外部链接E-mail链接链接书签链接书签链接其他文档链接其他文档链接空链接空链接任务任务5 5将页面组合成网站将页面组合成网站罗德纺织品有限公司网站的主页任务任务6 6添加页面的动态效果添加页面的动态效果滚动字幕滚动字幕加入收藏加入收藏设为主页设为主页任务任务6 6添加页面的动态效果添加页面的动态效果添加动态效果后的罗德纺织品有限公司网站的主页任务任务6 6添加页面的动态效果添加页面的动态效果左侧单元格内表格的嵌套形式和对齐方式END.