静态网页设计与制作 教学课件 作者 胡汉辉 模块四.ppt

《静态网页设计与制作 教学课件 作者 胡汉辉 模块四.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、正文主编1.1任务一创建“我的第一个页面”1.2任务二创建与管理站点1.3拓展训练创建“我的班级”站点2.1任务一文本的输入——创建“养生保健”页面2.2任务二图像的添加——创建“ASA餐厅”页面2.3拓展训练创建“我的个人网站”的首页3.1任务一Flash元素的添加——创建“江河双水湾”页面3.2任务二音乐和视频的添加——创建“音乐中心”页面3.3拓展训练创建“我的个人活动展示”页面和“个人相册”页面4.1任务一创建“绿之韵”页面间链接4.2任务二导航栏的制作——创建“绿之韵”页面导航栏4.3拓展训练创建“

2、瑶瑶之旅”的导航栏与网页间链接5.1任务一使用层布局网页——创建“拼图游戏”页面5.2任务二使用框架布局网页——创建“我的音乐小站”页面5.3任务三CSS的应用——重新布局“在线求诊”页面5.4拓展训练创建“雷锋精神宣传”网页6.1任务一制作搜索和用户登录表单——创建“探索旅行网”首页6.2任务二创建列表/菜单表单——创建“机票查询”页面6.3任务三使用单选按钮和复选框——创建“网站活动”页面6.4任务四校验表单内容——创建“驴友留言”页面6.5拓展训练为“我的个人网站”增加会员登录、会员注册和会员留言页面7

3、.1任务一网站的配色方案与版式设计——创建“羽翱科技”页面7.2任务二使用模板和库——创建“羽翱科技”页面的模板7.3任务三使用网页特效——为“羽翱科技”各网页增加特效7.4拓展训练为“我的个人网站”各网页增加特效并进行整体风格调整4.1任务一创建“绿之韵”页面间链接任务分析相关知识任务实施4.1.1创建文字链接4.1.2创建图片链接4.1.3创建下载链接4.1.4添加邮件链接任务分析图4-1最终效果图相关知识1.站点和链接(1)站点(2)链接2.绝对路径和相对路径(1)绝对路径(2)相对路径3.添加链接在制

4、作网页时，不可能将所有的内容同时呈现在窗口中，就需要建立超链接。建立超链接后可实现从一个页面跳转到另一个页面，从一个网站跳转到另一个网站。这一切只需要用鼠标单击带有链接的某行文字（或图片）。相关知识1)到网站内页面的超链接——2)到网站外页面的超链接——3)电子邮件形式的超链接——4)到网页某一特定位置的超链接——5)以及其他一些链接。(1)内部链接图4-2内部链接相关知识(2)外部链接图4-3外部链接相关知识(3)E-mail链接图4-4E-mail链接相关知识(4)锚记链接1)创建命名锚记。2)创建到命名

5、锚记的链接。任务实施4.1.1创建文字链接图4-5页面效果图4.1.1创建文字链接图4-6选定文字4.1.1创建文字链接正文_Linked_160.jpg4.1.1创建文字链接图4-7选择站点内链接文件4.1.2创建图片链接图4-8选定文字4.1.2创建图片链接图4-9选择要链接的图片4.1.2创建图片链接图4-10链接效果图4.1.2创建图片链接正文_Linked_165.jpg4.1.2创建图片链接图4-11快速建立图像热区链接4.1.2创建图片链接图4-12快速建立文字内部链接4.1.3创建下载链接图4

6、-13选择文字4.1.3创建下载链接图4-14“文件下载”对话框4.1.4添加邮件链接1.直接键入地址选中对象，然后在“属性”面板里的“链接”文本框中直接输入“mailto:”和邮件地址即可，如前面提到的E-mail链接，如图4-15所示。图4-15E-mail链接4.1.4添加邮件链接2.使用E-mail链接对话框首先选中文本和图像。单击“插入”面板中的“常用”类别中的【电子邮件链接】图标按钮，如图4-16所示。图4-16“电子邮件链接”图标按钮4.1.4添加邮件链接图4-17“电子邮件链接”对话框4.2任

7、务二导航栏的制作——创建“绿之韵”页面导航栏任务分析相关知识任务实施4.2.1图像热点链接4.2.2锚记链接4.2.3创建空链接4.2.4创建跳转菜单4.2.5设置超级链接目标窗口4.2.6导航栏的制作任务分析相关知识1.网页图像热区当打开带有图片的网页时，有时会看到这样的情况：当鼠标指向图片的不同部位时，可以打开不同的超链接，这种技术被称为“网页图像热区”。2.图像热区超链接图像热区超链接在一张图片上划分几个区域，每个区域可定义一个超链接，用户单击不同的区域可转向不同的目标网页。任务实施4.2.1图像热点链

8、接(1)图像地图1)选中图像；2)在图像“属性”面板中，使用热区工具(矩形、椭圆、多边形)，在图像上划分热区；3)为绘制的每一个热区设置不同的链接地址和替代文字。(2)创建链接热区正文_Linked_173.jpg4.2.1图像热点链接图4-18用热区工具创建热区1)只能在图像内部才能绘制热区，4.2.1图像热点链接完成绘制的热区还可以用小箭头工具对热区进行大小和位置的调整。正文_Linked_17