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

【时间要求】 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%的人还看了以下文章

  • 左侧固定,右侧自适应布局的两种实现方法

    左侧固定,右侧自适应布局效果图 很多页面,特别是网站后台管理页面,不少采用左右布局。本文讲解左侧固定,右侧自适应布局的两种实现方法。 左侧固定200px宽,右侧自适应,中间间隔10px。 HTML: <div class=”parent”> <div class=”side”></div> <div class=”m…

    2019年3月10日
    4.1K0
  • 网页制作实战项目二:爱的天空

    请加入网页设计交流群:208047327 ,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。 【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 《爱的天空》主页面及心情日志页面制作 【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使…

    2018年4月12日 网页设计
    10.7K0
  • 网站图片、文件防盗链方法大全

    一般盗链分为文件盗链和图片盗链两种。如果您网站上的音乐、视频、flash、压缩包文件、图片等,被其它网站大量的复制、盗用,会对自己网站产生大量的无效流量并对网站服务器造成很大的压力,所以很多网站都会设置防盗链,防止别人盗用自己网站的图片、音视频或下载文件资源。 今天中国网页设计给大家分享网站图片、文件防盗链的方法,对网站站长有很大帮助。 1、Windows主…

    2018年2月26日
    4.4K0
  • web前端开发及PHP学习网站网址大全

    学习提升网站: 翼狐网 http://www.yiihuu.com/Hack Design https://hackdesign.org/掘金 https://juejin.im/ web前端开发网站: 中国网页设计:http://www.125jz.com/Wordpress主题 :http://www.weidea.net/Wordpress教程:htt…

    2019年10月24日
    4.0K0
  • 错位排版设计的5个实用方法(精)

    错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。

    本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。

    2023年1月18日
    3.0K0

发表回复

登录后才能评论