项目十二 网页元素的综合应用ppt课件.pptx

《项目十二 网页元素的综合应用ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目十二 网页元素的综合应用ppt课件.pptx（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目十二 网页元素的综合应用项目十二 网页元素的综合应用学习目标学习目标熟练使用表格进行页面布局熟练使用框架元素熟练使用表单元素熟练插入背景音乐熟练插入Flash动画熟练插入图像熟练使用超链接熟练使用文本元素熟练页面排版项目十二 网页元素的综合应用项目项目简介简介通过前面各项目的学习，我们掌握了主要的网页元素的操作与使用，该项目需要灵活运用各网页元素，设计制作一个比较完整的静态网页。本项目要完成的任务：任务 制作文学欣赏网站任务 制作文学欣赏网站任务描述任务描述该任务要求运用表格元素对整个页面进行布局设计，灵活运用各种网页元素进行合理搭配，制作出一个图文并茂，有声有色、页面和谐的完整的静态网站

2、。该任务的需求如下所示：1.规划站点结构：在网站文件夹中按文件类别创建子文件夹，形成条理清晰的文件结构。所有文件存放在“WebTest /项目12”文件夹中；任务 制作文学欣赏网站2. 素材准备：图像存放到WebTest /项目12/images文件夹中；3.页面布局：按照效果图，灵活应用表格进行页面布局；5.应用内框架实现在同一页面浏览不同链接信息；6.自己下载一首喜欢的歌曲，为网站首页配置背景音乐。7.实现如下所有的网页效果；任务 制作文学欣赏网站（1）首页首页（index.html）页面浏览效果如图12-1所示：图12-1 index.html页面浏览效果图提示：打开提示：打开index

3、.html时，内框架时，内框架默认显示为默认显示为first.html内容，代码内容，代码如下所示：如下所示：iframe name=main width=100% height=256 scrolling=auto src=first.html任务 制作文学欣赏网站（2）登录页面（login.html）点击首页上导航栏中的“登录”按钮，在框架中显示“用户登录”信息，登录页面为login.html，浏览效果如图12-2所示：图12-2 登录页面浏览效果图任务 制作文学欣赏网站（2）登录页面（login.html）点击首页上导航栏中的“登录”按钮，在框架中显示“用户登录”信息，登录页面为logi

4、n.html，浏览效果如图12-2所示：图12-2 登录页面浏览效果图任务 制作文学欣赏网站提示：值得注意的是，为达到在内框架中显示超链接页面信息，超链接目标不能在属性面板“目标”中选择已有的项，而需要在“目标”框内直接输入内框架name属性的值，如图12-3所示。以下各超链接的目标设置均为内框架name属性值“main”。图12-3 设置链接属性任务 制作文学欣赏网站（3）注册页面（Registe.html）点击首页上导航栏中的“注册”按钮，在框架中显示“新用户注册系统”信息，注册页面为Registe.html，浏览效果如图12-4所示：图12-4 注册页面浏览效果图任务 制作文学欣赏网站提

5、示：同学们可充分应用表单元素来丰富注册信息，而不仅仅限于效果图，由于是静态页面，此处不用考虑数据处理，表单数据处理将在后面项目的讲解。任务 制作文学欣赏网站（4）第一章 诗词鉴赏（ShiCi.html）点击首页上导航栏中“第一章 诗词鉴赏”链接时，在框架中显示相关链接文档页面信息，链接文件为ShiCi.html，浏览效果如图12-5所示：图12-5 点击第一章浏览效果图任务 制作文学欣赏网站（5）第二章 散文鉴赏（SanWen.html）点击首页上导航栏中“第二章 散文鉴赏”链接时，在框架中显示相关链接文档页面信息，链接文件为SanWen.html，浏览效果如图12-6所示：图12-6 点击第

6、二章浏览效果图任务 制作文学欣赏网站（6）第三章 小说鉴赏（XiaoShuo.html）点击首页上导航栏中“第三章 小说鉴赏”链接时，在框架中显示相关链接文档页面信息，链接文件为XiaoShuo.html，浏览效果如图12-7所示：图12-7 点击第三章浏览效果图任务 制作文学欣赏网站（7）第四章 戏剧鉴赏（XiJu.html）点击首页上导航栏中“第四章 戏剧鉴赏”链接时，在框架中显示相关链接文档页面信息，链接文件为XiJu.html，浏览效果如图12-8所示：图12-8 点击第四章浏览效果图任务 制作文学欣赏网站知识储备知识储备网页是构成网站的基本元素，网页是一个文件，在浏览因特网时，看到的

7、每一个页面，都称为网页，由若干网页组成一个网站。进入一个网站的第一个网页称为主页或首页。一般主页取名为index或default（不是强制要求）。 因此，一个网站的首页一般为index.*或default.*。任务 制作文学欣赏网站任务任务实施实施1.制作首页（index.html）（1）新建网站首页index.html文档，并保存到“WebTest/项目12”文件夹中；（2）添加背景图像属性面板中点击“页面属性”在“页面属性”对话框的“外观”选择中设置“背景图像”，浏览选择图像“WebTest/项目12/images/ bg.jpg”。任务 制作文学欣赏网站（3）插入第一层表格点击“插入”菜

8、单点击“表格” 在弹出的表格对话框中，设置行为4，列为1，表格宽度为1000像素，边框粗细、单元格边框、单元格间距均为0确定选中表格属性面板中“对齐”选择“居中对齐”。提示：第一行放页面头部部分（放提示：第一行放页面头部部分（放logo和和Flash动画），第二行放菜单，第动画），第二行放菜单，第三行放正文部分（左侧导航与右边显示）；第四行放页脚。三行放正文部分（左侧导航与右边显示）；第四行放页脚。任务 制作文学欣赏网站（4）设计页面头部1）设置第一行单元格背景图像把光标定位在表格的第一行中属性面板中设置高度为190切换到“代码”视图，光标定位到第一行单元格标签内，设置单元格背景图像属性bac

9、kground，值为images/top.jpg（代码：）任务 制作文学欣赏网站2）设置第一行单元格Flash动画切换到“设计”视图，并把光标定位到第一行中点击“插入”菜单选择“媒体” 点击“SWF” 选择Flash动画文件“WebTest/项目12/images/1.swf” 确定在属性面板中调整Flash动画显示的“宽”和“高”，并设置“Wmode”属性为“透明”。任务 制作文学欣赏网站（5）设置菜单行把光标定位在表格的第二行中插入左侧菜单图片“WebTest/项目12/images/ menu1.jpg”，再插入中间菜单图片“WebTest/项目12/images/ menu2.jpg”

10、（重复插入9次），最后插入右侧菜单图片“WebTest/项目12/images/ menu3.jpg”任务 制作文学欣赏网站（6）设计正文部分1）把光标定位在表格的第三行中在第三行单元格中插入一个1行2列的表格（第二层表格），表格“宽”为100%，“边框粗细”、“单元格边框”、“单元格间距”均为0把光标定位在第二层表格的第一列中，在面板属性中设置“宽”为200，“垂直”选择“顶端”，再插入一个8行3列的表格（第三层表格,插入3列是为了在左右两边添加背景图像以美化页面）任务 制作文学欣赏网站2）选定第三层表格的第一列所有单元格，右击鼠标，在快捷菜单中选择“表格”，点击“合并单元格”，在属性面板中

11、设置“宽”为1，切换到代码视图，设置第三层表格的第一列单元格的背景图像属性background，值为“images/bg2.jpg”，（代如为：）（注意删除这一列单元格中的 符号）。任务 制作文学欣赏网站3）选定第三层表格的第三列所有单元格，右击鼠标，在快捷菜单中选择“表格”，点击“合并单元格”，在属性面板中设置“宽”为1，切换到代码视图，设置第三层表格的第一列单元格的背景图像属性background，值为“images/images/bg2.jpg”，（代如为：）（注意删除这一列单元格中的 符号）。任务 制作文学欣赏网站4）选定第三层表格的第二列所有单元格，在属性面板中设

12、置“高”为40（注第二列第二个单元格高为10）点击“格式”菜单，选择“对齐”为“居中对齐” 在第三层表格的第二列各单元格中依次录入首页效果图所示信息（第一个单元格为插入图像“WebTest/项目12/images/RegisterAndLogin.gif，并在图像后面一个单元格中插入一条“宽”为98%，居中显示的水平线，代码如下所示：）任务 制作文学欣赏网站5）把光标定位在第二层表格的第二列单元格中在面板属性中“垂直”选择“顶端” 点击“插入”菜单，选择“HTML”，选择“框架”，点击“IFRAME”，此时在单元格中插入一浮动框架选中框架并切换到“代码”视图，设置框架属性，代如如下所示：。任务

13、 制作文学欣赏网站6）新建first.html文档，并保存到“WebTest/项目12”文件夹中，并按首页默认浏览时显示的信息输入文本信息。（7）设置页脚把光标定位在第一层表格的第四行中在属性面板中设置“高”为50点击“格式”菜单，选择“对齐”为“居中对齐” 输入文本信息“版权所有文学爱好者”，此时首页制作完成。任务 制作文学欣赏网站2. 制作登录页面（login.html） （1）新建login.html文档，并保存到“WebTest/项目12”文件夹中；（2）把光标定位到页面的第一行位置，插入一个1行1列的表格，表格宽度为300像素，边框粗细、单元格边框、单元格间距均为0，表格居中显示。任

14、务 制作文学欣赏网站（3）把光标定位在表格中插入一个表单把光标定位在表单中插入一个4行2列的表格，表格宽度为300像素，边框粗细、单元格边框、单元格间距均为0，表格居中显示合并第一行单元格，设置“高”为40，格式设置为居中对齐，输入文本“用户登录”选中第一列中的第二、三单元格，设置“高”为40，“宽”为80，文本格式设置为居中对齐，分别输入文本“用户名：”和“密 码:” 光标定位在第二列中的第二个单元格中，插入“文本域”（单行）光标定位在第二列中的第三个单元格中，插入“文本域”（密码）合并第四行单元格，设置“高”为40，格式设置为居中对齐，插入“按钮”（提交表单），插入“按钮”（重置表单），此

15、时登录页面制作完成。任务 制作文学欣赏网站提示：当文本域类型为“密码”时，默认情况下，密码文本域的长度跟普通文本域的长度不一致，为保障浏览效果美观，可设置文本域style属性来统一长度，如代码所示：用户名文本域：密码文本域：任务 制作文学欣赏网站3.制作注册页面（Registe.html）操作步骤（略），请读者参照“项目十 表单元素应用”中的“任务一 制作用户注册页面”任务 制作文学欣赏网站4.制作链接页面新建ShiCi.html、SanWen.html、XiaoShuo.html、XiJu.html文档，分别对应“第一章 诗歌鉴赏”、“第二章 散文鉴赏”、“第三章 小说鉴赏”和“第四章 戏剧

16、鉴赏”页面。按各链接页面效果图输入文本信息（注意文本排版和字体格式）。任务 制作文学欣赏网站5.制作首页超链接（1）由于注册和登录是一张图像，因此在图像上创建“热点”分别链接到login.html和Registe.html文件任务 制作文学欣赏网站（2）分别制作每一章的超链接提示：值得注意的是，为达到在内框架中显示超链接页面信息，超链接目标不能在属性面板“目标”中选择已有的项，而需要在“目标”框内直接输入内框架name属性的值,即“main”，如图12-9所示。图12-9 设置链接属性任务 制作文学欣赏网站此时，所有页面制作完成。6.保存所有网页，激活首页（index.html）,按F12在浏览器中浏览效果。