网页制作实战项目六:中融宝企业网站制作

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

【上机内容】 中融宝企业网站制作

【上机目的】

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

2 、掌握HTML及CSS的使用

3、掌握表单及表单元素的使用

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

【上机重点】

1 、网页布局

2 、表单制作

3 、HTML及CSS的使用

【上机难点】

1、网页布局

2、CSS的定义和使用

【上机教学方法】

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

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

【上机内容】

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

网页制作实战项目六:中融宝企业网站制作

1. 网站文件命名,目录建设,必须符合网站建设规范。(5分)

2. 要求制作的网页存放在考生文件夹根目录下,以index.html命名,并设置index.html网页的标题为:山东互联网金融行业翘楚-【官网】。(5分)

3. 定义标签样式body{ },设置页面外边距、内边距为0px,页面字体大小为12px,字体颜色#999,行高200%。(5分)

4. 页面顶部区域制作。(10分)

网页制作实战项目六:中融宝企业网站制作

5. 在页面顶部表单的提交按钮上添加行为,当点击提交按钮时检查表单,要求用户名和密码为必填。(5分)

6. Logo及导航菜单制作(10分)。

网页制作实战项目六:中融宝企业网站制作

要求菜单中首页 我要投资 上地计划 我要融资 理财问答 安全保障 关于我们超链接设置为空链接,字体大小为16px,颜色为#666,无下划线,当鼠标放上去时字体颜色变为红色,如下图所示。

7. 设置高收益  更可靠 快流动 真安全为标题3、字体大小32px、颜色#666,该区域图片及文字制作如下图所示。 (5分)

网页制作实战项目六:中融宝企业网站制作

8. 网页中出现的水平横线及边框线均为1px,颜色为#CCC的实线。(5分)

9. 中下部区域背景颜色为#f7f7f,该区域文字除标题、年化收益率、融资金额、期限、投标中及进度字体大小为12px外其余字体大小为20px。上地计划字体为红色,计划B颜色为#13b6a5。该区域图片及文字制作如下图所示。(15分)

网页制作实战项目六:中融宝企业网站制作
10. 友情链接区域:中国网页设计链接到http://www.125jz.com,百度链接到http://www.baidu.com,打开方式为在新窗口中打开。(5分)

11. 页面底部区域背景颜色为#272c37,其中关于我们 新手入门 网站地图 免责声明 隐私声明 平台数据统计颜色为#CCC,如下图所示。(5分)

网页制作实战项目六:中融宝企业网站制作

12. 页面底部右方三张图片设置宽度为100,高度30,如下图所示。(5分)

网页制作实战项目六:中融宝企业网站制作

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

14. 整体页面效果(10分)。

网页制作所需素材网页制作实战项目六:中融宝企业网站制作images.zip

课后任务:申请免费空间,掌握网站上传的方法,上传你的网站能够通过域名访问。

100M免费ASP空间申请

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

(9)
江山如画的头像江山如画管理团队
上一篇 2018年5月14日 上午9:54
下一篇 2018年5月24日 下午11:26

99%的人还看了以下文章

  • 网站图片、文件防盗链方法大全

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

    2018年2月26日
    3.5K0
  • 提高网页制作水平的7个要点

    1. 学好HTML和CSS编程 这是网页设计中最基础,也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片,能大大提升网站的逼格。图片应当辅助你的设计来推销…

    2019年7月9日 网页设计
    2.9K0
  • 以文字为主题的海报如何进行版式设计

    豪斯课堂又一力作,耗时3个月。 让人受益匪浅的主题设计教程,版式调整下~!主体立刻突现!赞!把之前设计的一些迷惑的地方都给找出来了。 网友评论: 感触大发,突然就有了灵感!!! 完全的干货,干的拧不出水,看的时候非常感动,不禁在想楼主为此篇教程到底做了多少努力,看完之后有种肃然起敬的感觉。 非常好,理解很容易。最后修改一些同学的图片,我觉得真是大神,修改后的…

    2021年11月25日
    1.9K0
  • 如何给节日主题、活动主题做设计

    产品的节日主题设计,已经成为各大门户争先出彩的亮点之一,无论是春节、元旦、七夕、圣诞等传统节日,还是双十一、双十二、阿里年货节和京东蝴蝶节等电商活动日,甚至还有各种国际节日都可以成为各大品牌的一个Show场。 近日,中国网页设计接到一项目需要做活动主题页面,在网上查了下相关教程不是很多,能讲深讲透的更少。后来看到JaylonG的文章,感觉很有启发,现分享给大…

    2018年3月12日 网页设计
    3.8K0
  • 网页设计的任务及网页设计的实现

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

    2020年2月4日
    4.3K0

发表回复

登录后才能评论

评论列表(1条)

  • 吢丕的头像
    吢丕 2021年4月19日 下午6:11

    有人做出来了吗?让我参考一下