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

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

  • 网站首页的设计

    网站首页从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的。 网站首页设计步骤 首先要确定首页的功能模块,即确定需要在首页上实现的主要内容和功能; 其次设计首页的版面; 最后处理技术上的细节。 设计网站主页必须遵循的5点基本原则 1、要简单   能吸引浏览者注意的时间是短暂的。 你的网站应该下载速度很快。如果你的网站为了给人留下深刻印象而包…

    2018年3月15日
    2.0K0
  • 网页上标准的广告尺寸规格大全

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

    2020年3月11日
    7.1K0
  • 福利!13款免费商用黑体字体推荐

    “黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。无论是识别性、适用面、视觉效果都非常好。本期推荐 13 款免费商用黑体,前 6 款为各大品牌开发的黑体字型,后 7 款是在传统黑体上进行设计改造,形成各有特点的黑体变体。 Adobe 和 Google 共同开发的免费黑体。字体设计优雅,显示效果优秀,可以满足不同场景下的文字显示需求。由于字…

    2023年1月20日 网页设计
    7.1K0
  • 配色就是这么简单!7个在线配色网站推荐

    配色对一个网站的来说非常重要,优秀的网页配色不是单纯好看就行了,颜色是有功能和目的的,需要了解颜色背后所能传达的信息、氛围、价值观……当你在面不同的客户时,你要清清楚楚的知道,你应该从什么倾向的颜色入手。网页面向的人群的年龄段、性别比例、消费层次、风格偏好等等,都应该作为选色的考量因素。 但网页配色更多的需要大量的实践去体会。简单来说…

    2018年1月31日
    26.3K1

发表回复

登录后才能评论

评论列表(1条)

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

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