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

【时间要求】 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

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

99%的人还看了以下文章

  • 配色如此简单-最实用的配色教程

    本文主要介绍实战中配色方法和设计大师常用的快速配色技巧,希望大家能活学活用。

    2019年10月31日 网页设计
    5.3K0
  • Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

    网页的布局与规划 本次网页制作的效果图如上图所示,分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图: 根据上图,我再画了一个实际的页面布局图,说明一下层的…

    2018年7月31日
    11.4K0
  • 初学网页制作从这里开始

    本系列教程的目的就是:通过简单、全面和正确的介绍,教会你如何创建网站。本教程将从基础讲起,不要求你具备任何编程知识。假如你继续阅读本教程的话,你将能在一小时内制成一个网站。

    2020年2月22日
    6.3K0
  • 网页上标准的广告尺寸规格大全

    网页中的标准网页广告尺寸规格 一、120*120,这种广告规格适用于产品或新闻照片展示。 二、120*60,这种广告规格主要用于做LOGO使用。 三、120*90,主要应用于产品演示或大型LOGO。 四、125*125,这种规格适于表现照片效果的图像广告。 五、234*60,这种规格适用于框架或左右形式主页的广告链接。 六、392*72,主要用于有较多图片展…

    2020年3月11日
    7.8K0
  • 企业做网站选择定制开发,还是网上在线模板建站好?

    不少企业老板,要做网站,总爱先问做网站多少钱? 在《做个企业网站多少钱?》一文中,我们讲解了做网站,先要明白,价格和价值的关系,只看价格不比质量,不看实际给企业能带来多大价值的网站都是没有什么用处的,看似便宜,实际多花了钱,后期还要重做,总起来花的钱比原来还要多。想花一千的价格,还要求网站页面漂亮,功能完善,用户体验及排名都要好,这是不现实的。 企业做网站选…

    2018年12月17日
    2.8K0
  • 福利!13款免费商用卡通字体推荐(已打包)

    本期推荐的是免费商用的卡通体,此类字体非常适合运用在可爱活泼、轻松休闲的设计中,会有不俗的表现力,常常能达到“画龙点睛”的效果。 部分作品展示: 整个字形向上倾斜,给人一种积极向上的感觉,而且横折和竖折的笔画都有弧线,没那么死板,无论是笔画结构,还是笔画粗细,都是灵活的,是一例轻松快乐风格的字体。 字形笔画去除了折笔的弧形,换之以平直的笔画,竖弯钩转为竖折,…

    2023年1月28日 网页设计
    9.2K0

发表回复

登录后才能评论