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

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

(15)
上一篇 2018年5月24日 下午11:26
下一篇 2018年6月1日 上午7:44

99%的人还看了以下文章

  • Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

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

    2018年7月31日
    9.2K0
  • 个人如何制作网站、建立站点

    个人如何制作网站应该从以下几个方面展开: 1、确定网站的题材 网站题材就是网站的主题,你的网站是干什么的。如电影网站、小说网站等。 首先要明确,选择自己擅长和喜爱的题材,其次切忌题材太滥或者目标太高。 2、确定题材后,就要将收集到的资料内容作一个合理的编排 比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,…

    2019年11月16日
    9.0K0
  • 董文利聊颜色搭配-节日经典配色

    网页设计师联盟优秀设计师董文利,董老师系列教程分享,聊颜色,特别是按节日给出的经典配色,牛** 董文利一名靠谱平面设计师/网页设计师/插画设计师。典型80后,爱绘画,玩音乐,不做设计的时候喜欢独自一个人在家附近的江水旁静静的坐上一小会儿。2011年毕业于湖北工业大学艺术设计学院,所修专业是平面设计。

    2021年2月4日
    4.6K0
  • 3分钟学图片版式设计:K先生的版式平衡与构图实战

    条理清晰,通俗易懂的图片版式设计教程。

    2018年1月23日
    2.9K0
  • 网页制作中表单的设计及优化方法

    表单是网页制作中常用的元素,本文会探讨表单设计的注意事项。但这些只是通用规范,每条准则总有特殊情况。 表单应该只有一列 多列布局会扰乱用户垂直方向的视线移动。 把标签放到顶部 顶部标签的表单比左侧标签有更高的完成率。顶部标签的表单也易于移植到移动端。但是,对于有多种选择项的大量数据列表而言,请考虑使用左侧标签,因为它们在一起更易于浏览,能够减少高度,比顶部标…

    2018年7月30日 网页设计
    2.8K0
  • 最完善的前端开发流程(详解)

    前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时,PRD里只有交互稿,尚未有视觉稿。…

    2023年1月18日
    1.4K0

发表回复

登录后才能评论