【时间要求】 2 学时（ 45 分钟× 2=90 分钟）
【上机内容】 川厨小巷
【上机目的】
1 、掌握网页布局的方法和技巧
2 、掌握行为的使用
3、掌握javascript(网页特效)的使用
4、培养团队意识和协作精神
【上机重点】
1 、网页布局
2 、javascript(网页特效)的使用
【上机难点】
javascript(网页特效)的使用
【上机教学方法】
1 、采用分组教学 , 每个小组模拟一个开发团队
2 、充分发挥小组内各成员的积极性、主动性和创造性
【上机内容】
在规定时间内做出以下网页：
- 网站文件命名，目录建设，必须符合网站建设规范，要求制作的网页存放在网站根目录下，以html命名。（5分）
- 设置html网页的标题为：你的姓名+川厨小巷。如，学生张三的index.html网页的标题应该为：张三川厨小巷。（5分）
- 定义标签样式body{ }，设置页面外边距为0px，页面字体大小为12px。（5分）
- 利用行为设置状态栏文本为“欢迎光临川厨小巷！”，事件为onLoad，即当浏览器加载完页面后触发该事件。（5分）
- 导航菜单中关于我们、品牌文化、新闻中心、经典食材超链接设置为空链接，联系我们设置为E-mail链接，链接地址为：你的学号@qq.com（10分）。
- 动态水平导航条（15分）。
导航中的超链接：字体大小16px、颜色 #333、粗体、无下划线、块状区域显示、高度60px、宽度120px。
当鼠标放上去的时候，导航中的超链接：字体颜色变为#FFF，背景颜色变为#b0000d，如下图所示：
- 设置川菜口水鸡、川菜夫妻肺片为二级标题、字体大小16px、加粗、颜色#af000f。 (5分)
- 设置川菜口水鸡、川菜夫妻肺片下方图片有2px，颜色为#b0000d的实线边框，边框和图片之间有4px距离，如下图所示(5分)：
- 设置“我国的菜系，是指在一定区域内，由于气候、地理、历史、物产及饮食风俗的不同，经过漫长历史演变而形成的一整套自成体系的烹饪技艺和风味。”该段文字行高180%，字体颜色为#666（10分）。
- 设置READMORE为鼠标经过图片，鼠标放上去前和放上去后显示效果如下图所示。（5分）
- 菜品展示区域下方图片（jpg、2.jpg、3.jpg、4.jpg、5.jpg）展现方式为从右向左无缝滚动（参考：两个非常简单的JS图片无缝滚动代码），图片之间的间距5px。
- 页面底部区域背景颜色为#252525，其中关于我们、联系我们、版权声明字体大小为12px、加粗，颜色为#FFF，其余字体颜色为#CCC。Copyright©文字中©符号为必有，字体为arial字体。
- 页面布局（10分），页面中其他文字和图片格式不做要求，具体可参考网页效果图。
- 整体页面效果（10分）。
素材下载：2018053104010573
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1941.html
微信扫一扫 
支付宝扫一扫