网页制作实战项目八:川厨小巷

【时间要求】 2 学时( 45 分钟× 2=90 分钟)

【上机内容】 川厨小巷

【上机目的】

1 、掌握网页布局的方法和技巧

2 、掌握行为的使用

3、掌握javascript(网页特效)的使用

4、培养团队意识和协作精神

【上机重点】

1 、网页布局

2 、javascript(网页特效)的使用

【上机难点】

javascript(网页特效)的使用

【上机教学方法】

1 、采用分组教学 , 每个小组模拟一个开发团队

2 、充分发挥小组内各成员的积极性、主动性和创造性

【上机内容】

在规定时间内做出以下网页:

网页制作实战项目八:川厨小巷

  1. 网站文件命名,目录建设,必须符合网站建设规范,要求制作的网页存放在网站根目录下,以html命名。(5分)
  2. 设置html网页的标题为:你的姓名+川厨小巷。如,学生张三的index.html网页的标题应该为:张三川厨小巷。(5分)
  3. 定义标签样式body{ },设置页面外边距为0px,页面字体大小为12px。(5分)
  4. 利用行为设置状态栏文本为“欢迎光临川厨小巷!”,事件为onLoad,即当浏览器加载完页面后触发该事件。(5分)
  5. 导航菜单中关于我们、品牌文化、新闻中心、经典食材超链接设置为空链接,联系我们设置为E-mail链接,链接地址为:你的学号@qq.com(10分)。
  6. 动态水平导航条(15分)。

导航中的超链接:字体大小16px、颜色 #333、粗体、无下划线、块状区域显示、高度60px、宽度120px。

当鼠标放上去的时候,导航中的超链接:字体颜色变为#FFF,背景颜色变为#b0000d,如下图所示:

网页制作实战项目八:川厨小巷

  1. 设置川菜口水鸡、川菜夫妻肺片为二级标题、字体大小16px、加粗、颜色#af000f。 (5分)
  2. 设置川菜口水鸡、川菜夫妻肺片下方图片有2px,颜色为#b0000d的实线边框,边框和图片之间有4px距离,如下图所示(5分):
    网页制作实战项目八:川厨小巷
  3. 设置“我国的菜系,是指在一定区域内,由于气候、地理、历史、物产及饮食风俗的不同,经过漫长历史演变而形成的一整套自成体系的烹饪技艺和风味。”该段文字行高180%,字体颜色为#666(10分)。
  4. 设置READMORE为鼠标经过图片,鼠标放上去前和放上去后显示效果如下图所示。(5分)

网页制作实战项目八:川厨小巷

  1. 菜品展示区域下方图片(jpg、2.jpg、3.jpg、4.jpg、5.jpg)展现方式为从右向左无缝滚动(参考:两个非常简单的JS图片无缝滚动代码),图片之间的间距5px。
  2. 页面底部区域背景颜色为#252525,其中关于我们、联系我们、版权声明字体大小为12px、加粗,颜色为#FFF,其余字体颜色为#CCC。Copyright©文字中©符号为必有,字体为arial字体。
  3. 页面布局(10分),页面中其他文字和图片格式不做要求,具体可参考网页效果图。
  4. 整体页面效果(10分)。

素材下载:2018053104010573

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1941.html

(18)
江山如画的头像江山如画管理团队
上一篇 2018年5月24日 下午11:26
下一篇 2018年6月1日 上午7:44

99%的人还看了以下文章

  • 福利!13款免费商用黑体字体推荐

    “黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。无论是识别性、适用面、视觉效果都非常好。本期推荐 13 款免费商用黑体,前 6 款为各大品牌开发的黑体字型,后 7 款是在传统黑体上进行设计改造,形成各有特点的黑体变体。 Adobe 和 Google 共同开发的免费黑体。字体设计优雅,显示效果优秀,可以满足不同场景下的文字显示需求。由于字…

    2023年1月20日 网页设计
    6.1K0
  • 网页设计的任务及网页设计的实现

    网页设计的任务,是指设计者要表现的主题和要实现的功能。站点的性质不同,设计的任务也不同。从形式上,可以将站点分为三类。
    网页设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制。第二部分为网页的制作。

    2020年2月4日
    2.6K0
  • 赞!UI设计师必须学习的3个色彩理论

    彩搭配在设计中很重要!不同的配色方案呈现出不同的效果,搞定配色!请学习最好的配色教程 色彩模式  1、RGB色彩模式。通过光的三原色相加混合产生的。显示器的所有色彩都是通过红色、绿色、蓝色这三原色混合来显示的。 2、CMYK 色彩模式。是指墨水或颜料的三原色加上黑色这四种颜色,混合后出现的色彩。CMYK是打印机等印刷设备使用的色彩模型。 3、索引色…

    2022年8月10日 网页设计
    5500
  • 文字排版3大技巧-优秀设计师必备

    文字排版是设计中比较难处理,特别是文案字数太多时,设计师们感觉无从下手?本文教你在最短的时间内让文案排版变成高大上!

    2019年4月4日 网页设计
    9.0K0
  • 绝美!9种最有意境的蓝色

    蓝色既代表着忧郁,又代表着温柔,它和白色混合之后,还能体现柔顺、淡雅、浪漫的氛围,像天空的色彩~蓝的种类也有很多,克莱因蓝是备受设计师喜爱的一种,也是最经典的一种,而且蓝色是最具凉爽、清新、专业的颜色,今天125建站网给大家分享9种不同的蓝色,你更喜欢哪一种呢?

    2023年1月20日 网页设计
    6530
  • 网页制作实战项目五:根据网页效果图制作网页

    了解网页制作全过程,能够根据网页效果图PSD源文件,切图并制作出网页。

    2018年5月3日
    7.0K0

发表回复

登录后才能评论