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

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

  • 网页设计字体篇:字体的性格

    优秀的字体远在读者理解句意之前就通过字形与笔画风格将情感传达给读者,传情达意正是字体设计的意义所在

    2019年10月23日 网页设计
    2.9K0
  • 制作漂亮网页的窍门

    我们浏览任何一个网页,仅从界面上就可以轻易的识别出专业和非专业的区别,那么怎么才能让网页设计的专业、漂亮、好看?这就要涉及到美术的一些基本常识。首先网页风格的形成主要依赖于网页的版式设计,页面的色调处理,还有图片与文字的组合形式等。

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

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

    2018年7月31日
    10.2K0
  • 赞!前端工程师应该具备怎样的能力和素质

    前端工程师应该具备怎样的能力和素质? 技术功底、技术视野、技术追求 除了开发业务功能外,还需要对开发规范、工程化、组件化、模块化、测试、设计模式有一定的认知和实践 沟通表达能力、书面表达能力、总结复盘习惯 全局思维、抽象思维、持续交付意识 项目一号位担当,团队协作意识 综合权衡:成本、效率、质量、风险、体验 关注产品、设计、商业等各个领域。交叉学科会带来更多…

    2023年1月18日
    1.6K0
  • opencv 图像旋转 cv2.rotate和np.rot90案例精讲

    OpenCV 方法 OpenCV 中带有一个旋转图像的函数 cv2.rotate rotate(src, rotateCode[, dst]) -> dst参数:src:输入图像rotateCode:旋转方式1、cv2.ROTATE_90_CLOCKWISE:顺时针 90 度2、cv2.ROTATE_180:顺时针 180 度3、cv2.ROTATE_…

    2022年12月1日
    2.2K0
  • 平面排版 CRAP原则-人人都可能成为设计师

    CRAP是四项基本设计原理,包括对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密(Proximity)  对比(Contrast) 避免页面上的元素太过相似、如果元素不相同,就让它们截然不同元素包含字体、颜色、大小、线宽、形状、空间等根本目的:增强页面效果, 有助于信息的组织如何实现:通过字体选择、线宽、颜色、形状…

    2018年5月8日
    8.2K1

发表回复

登录后才能评论