网页制作实战项目一:个人站点制作

在开始学习之前,请加入网页设计交流群:208047327 ,并注册本站用户,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。

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

【上机内容】 个人站点制作

【上机目的】
1 、了解网页的组成
2 、掌握网站的目录结构
3 、掌握表格布局方法和技巧
4 、掌握HTML及CSS的基础知识
5、培养团队意识和协作精神

【上机重点】
1 、网站的目录结构
2 、表格布局
3 、HTML及CSS的使用

【上机难点】
1、表格布局
2、HTML及CSS的使用

【上机教学方法】
1 、采用分组教学 , 每个小组模拟一个开发团队
2 、充分发挥小组内各成员的积极性、主动性和创造性

【上机内容】

请在规定时间内制作出以下网页:

网页制作实战项目一:个人站点制作

项目演示:http://www.125jz.com/myzuopin/tenwp/webP1/index.html

要求:

1、建立网站根目录和相应的文件夹,所有文件、文件夹命名及目录结构符合网站建设规范。

点击下载:网页制作实战项目一:素材

2、制作index.html网页,效果如上图所示,网页的标题为:你的姓名+的个人网站。如:张三的index.html网页的标题应该为:张三的个人网站。

3、设置网页中默认字体大小为12px,行高为200%。

4、使用表格布局制作网页,主视觉宽度为1000px。

5、导航栏菜单做成空链接(链接到#),导航菜单超级链接的状态(a:link和a:visited):字体大小为16px  加粗,没有下划线,当鼠标移动到上面时的状态(a:hover):颜色变为#F00 ,没有下划线。

6、 网页设计交流群:208047327 超链接到

http://shang.qq.com/wpa/qunwpa?idkey=d2ee29b967b9b954c52d7970f6bbe0030169047009d99fb42e9ee09d38775856

其超链接状态a:link和a:visited:没有下划线,颜色为 #F00,字体大小为14px。

7、 站长介绍 、站长相册  字体大小为16px,粗体。 Introduce、Photo 字体颜色为 #900, 字体大小为16px。

8、页面中下图表格周边颜色为#f6f6f6。

网页制作实战项目一:个人站点制作

该表格边框为1px,实线,颜色为#CCC,给表格使用如下类样式即可

.tableBorder{ border: #CCC solid 1px;}

9、底部版权区域表格上边框线为1px,实线,颜色为#CCC,背景颜色为#e8e8e8。

.footer{ margin-top:1px; border-top:#CCC solid 1px; background:#e8e8e8;}

10、提交时要把所有页面和图片一起上交。(把网站根目录压缩,以“点名册序号+学号+姓名-1”命名)。

有问题或有好的建议可以在下方评论区发表评论。

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

(34)
江山如画的头像江山如画管理团队
上一篇 2018年4月5日 下午8:16
下一篇 2018年4月9日 下午1:30

99%的人还看了以下文章

  • 设计师如何构建自己的知识体系?

    最近几年能看到各行各业越来越多关于知识体系化的文章话题被关注,一定程度上说明在当前社会发展中,大家越来越重视个人知识体系化的积累。本篇文章将围绕知识体系为主题,会涉及到很多不同纬度的知识内容展开。 为什么要构建知识体系 第一,系统化知识,可以帮助我们更高效学习,节省学习中大量不必要的时间; 第二,学习吸收进来的知识点及时纳入体系里,可以让知识记得更加牢固; …

    2022年8月10日 网页设计
    4.0K0
  • 赞!前端工程师应该具备怎样的能力和素质

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

    2023年1月18日
    3.3K0
  • 网页上标准的广告尺寸规格大全

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

    2020年3月11日
    7.1K0
  • 错位排版设计的5个实用方法(精)

    错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。

    本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。

    2023年1月18日
    3.0K0
  • 左侧固定,右侧自适应布局的两种实现方法

    左侧固定,右侧自适应布局效果图 很多页面,特别是网站后台管理页面,不少采用左右布局。本文讲解左侧固定,右侧自适应布局的两种实现方法。 左侧固定200px宽,右侧自适应,中间间隔10px。 HTML: <div class=”parent”> <div class=”side”></div> <div class=”m…

    2019年3月10日
    4.1K0
  • 第3章CSS基础

    本章学习目标:
    了解CSS基本概念
    掌握CSS选择器的使用
    掌握在网页中应用CSS的方法
    掌握使用Dreamweaver编辑CSS的方法

    2018年3月22日
    4.8K0

发表回复

登录后才能评论

评论列表(3条)

  • 小心哈的头像
    小心哈 2019年9月18日 下午2:35

    演示项目都是table布局,哪年的代码呀

    • 江山如画的头像
      江山如画 2019年9月19日 下午3:56

      @小心哈入门,还是要学习表格的,表格布局会了,转div+css,很快的。

  • 江山如画的头像
    江山如画 2018年4月10日 上午8:37

    网页制作实战项目一出现问题:
    问题1:只交了页面,相关文件夹和文件都没上传
    问题2:目录结构,图片放到了images\images下,图片使用绝对路径
    问题3:文件名出现中文
    问题4:css文件引入有同学使用了导入@import url(“css/common.css”);,CSS文件放到了根目录,没有放到CSS文件夹
    问题5:使用了内容样式表,样式定义没有放入CSS文件
    优点:
    大部分同学能够使用表格进行布局,个别同学代码规范并书写了注释(如杜丽……)