网页制作实战项目七:毫州文化旅游公司

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

【上机内容】 毫州文化旅游公司

【上机目的】

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

2 、掌握HTML及CSS的使用

3、掌握行为的使用

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

【上机重点】

1 、网页布局

2 、行为的使用

3 、HTML及CSS的使用

【上机难点】

1、导航栏制作

2、CSS的定义和使用

【上机教学方法】

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

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

【上机内容】

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

网页制作实战项目七:毫州文化旅游公司

说明及要求:
1. 网站文件命名,目录建设,必须符合网站建设规范,要求制作的网页存放在考生文件夹根目录下,以index.html命名(5分)。
2. 网页中导航菜单和公司新闻、毫州资讯、活动公告、旅游资讯、查看详情、在线订购等超链接设置为空链接(3分)。
3. 设置index.html网页的标题为:你的姓名+的网站。如,学生张三的index.html网页的标题应该为:张三的网站(2分)。
4. 动态水平导航条(15分)。
导航中的超链接:字体大小14px,颜色白色,背景图片为images/daohang1.jpg,无下划线。
当鼠标放上去的时候,导航中的超链接:背景图片变为images/daohang2.jpg,字体颜色变为#FF0。当鼠标放到关于我们上时,显示如下图所示。

网页制作实战项目七:毫州文化旅游公司

5. 网页顶部区域背景图片为images/top_bg.jpg,导航条下方的直线是颜色为#673538,2px高的实线,如下图所示。(5分)

网页制作实战项目七:毫州文化旅游公司

6. 网页中的字体大小为12px,行高为150%,字体颜色为#999。 (5分)
7. 在浏览器中打开index.html 时会打开浏览器窗口,窗口的宽度和高度设置为800和500。显示菜单条,地址工具栏,状态栏,要显示的URL为http://www.125jz.com,窗口名称为中国网页设计。(5分)
8. 中间区域超链接字体大小为12px,颜色#804d51,无下划线。当鼠标放上去时超链接颜色为#cc1424,下方出现2px 颜色为#673538的实线,如下图所示。(10分)

网页制作实战项目七:毫州文化旅游公司

9. 网页中的标题如“讲解员以职业的装束喜迎河南旅游专列”和“亳州旅游休闲护照”为2级标题,字体大小为14px,黑色。(5分)
10. 公司简介、企业文化和人才招聘为鼠标经过图片,鼠标放上去时显示效果如下图所示。(5分)
网页制作实战项目七:毫州文化旅游公司

11. 旗下景区区域背景图片为images/areaBg.jpg,下方图片(chen.jpg、hua.jpg、huadan.jpg、jiang.jpg、yun.jpg)展现方式为从右到左滚动(使用<marquee>标记)(5分),当鼠标指向图片时,停止滚动,鼠标离开时,图片继续滚动(5分)。图片带有4px颜色为#673538的实线边框,鼠标放上去时边框颜色变为#CC6600,显示效果如下图所示(5分)。

网页制作实战项目七:毫州文化旅游公司
12. 页面底部区域背景颜色为#59413e,字体大小为12px,颜色为#997f7a。Copyright©文字中©符号为必有,字体为arial字体。(5分)。

网页制作实战项目七:毫州文化旅游公司

13. 页面制作(10分),页面中其他文字和图片格式不做要求,具体可参考网页效果图(index.jpg)。
14. 整体页面效果(10分)。

网页素材包下载:网页制作实战项目七:毫州文化旅游公司images.zip

申请免费空间,并把所做网页发布到服务器,通过域名访问。

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

(3)
江山如画的头像江山如画管理团队
上一篇 2018年5月17日 下午7:48
下一篇 2018年5月31日 上午11:32

99%的人还看了以下文章

  • 网页设计技巧:3步提升网页品质

    网页设计中的细节通常是束缚我们想像和内容设置的枷锁。要提升网页设计品质,特别是活动或专题页面的视觉效果,请学习网页设计师必须知道的设计技巧:减法、分块、加法。 1.减法 网页设计中原先的细节经常是束缚我们想像和内容设置的枷锁。保留梁柱和承重墙是必需的,这便是我们在网页设计方法中提到的特征。 2.分块 在功能划分前,进行网页分区前所要做的信息消化。比如我们希望…

    2019年2月21日 网页设计
    7.0K0
  • 网页设计第一步:绘制网站草图

    网站设计草图是对页面元素布局、页面造型设计、交互表现形式等所做的手绘草图说明,是对用户需求沟通的图形表现,以便更准确无误地与用户确认需求,也对网站风格设计过程起指导作用。

    2020年2月26日 网页设计
    26.0K0
  • 网页上标准的广告尺寸规格大全

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

    2020年3月11日
    11.3K0
  • 网页设计中最常用的7款字体

    字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。 衬线字和无衬线字的区别:左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。 无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅…

    2019年10月22日 网页设计
    9.8K0
  • 6个技巧让你的版面设计的脱颖而出!

    优秀的版面设计可以让一个普通的文档脱颖而出。本文给大家分享6个让你版面设计脱颖而出的技巧:对齐,聚拢,重复,对比,强调,留白。并通过实例讲解原有版面设计的不足,运用这6个技巧如何改进你的版面设计。

    2018年10月2日
    7.6K0
  • 网页设计的任务及网页设计的实现

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

    2020年2月4日
    15.2K0

发表回复

登录后才能评论