个人网站作业3 传媒学院.

Presentation on theme: "个人网站作业3 传媒学院."— Presentation transcript:

1 个人网站作业3 传媒学院

2 1、要求 使用DIV+CSS布局你的网站 要求有三个栏目 首页 作业页面 另一个页面自选 可以是个人兴趣介绍 个人作品介绍 家乡风光 。。。

3 2、网页文件名 网站首页 我的作业 自选页面（比如：我的家乡） index.html works.html
名字自定，比如叫mycountry.html 动手做

4 3、网站首页建设 大致效果如下

5 3、网站首页（续） 板块划分 1 Logo菜单区 2 内容预览区 3 版权区

6 4、html框架 1）网站所有内容都放在一个div中（全局div） 2）全局div的id=container
设置宽度1024 居中 左右外边距选择“自动” 4）定义样式时使用外部样式表保存css样式 比如外部样式叫cm.css 动手做

7 4、html框架（续） 5）创建三个板块div，以下是它们的id值 Q：它们在那个div中间？ logo_menu content
对应板块1 content 对应板块2 footer 对应板块3 Q：它们在那个div中间？ 动手做

8 5、三个板块div的基本样式 Logo菜单div 内容预览div 版权div 高度：100，背景颜色：灰，下边界：3
高度：400，背景颜色：橙，下边界：3 版权div 高度：80，背景颜色：蓝 动手做

9 阶段性成果

10 6、logo菜单区域制作 此区域包含两个部分 分别用两个并排显示的div实现 Logo区 菜单区 1）logo div 2）menu div
宽高：160*100 背景颜色：天蓝色（#00CCFF ） 浮动：左对齐 2）menu div 宽高：864*100 背景颜色：橙色（ #0099FF ） 动手做 2019/4/17 传媒学院

11 6.1、logo区域制作 放置logo图片 调节图片在logo中对齐方式 拷贝logo图片到网站根目录，图片可以自定 使用img标签放置图片
宽高不要超过包含其的div尺寸 调节图片在logo中对齐方式 左右居中 上下居中 动手做 2019/4/17 传媒学院

12 6.2、菜单制作 1）html代码 <ul>
动手做 1）html代码 <ul> <li><a href=“#”>网站首页</a></li> <li><a href=“#”>我的作业</a></li> <li><a href=“#”>我的家乡</a></li> </ul> 2019/4/17 传媒学院

13 6.2、菜单制作（续） 2）给ul添加样式 3）给li添加样式 4）给li中a标签添加样式 去掉列表项修饰符 上边界：32 左填充：20
浮动：左对齐 宽度：120 4）给li中a标签添加样式 字体大小：24 颜色：白色 修饰：无 动手做 这里都使用上下文标签样式 2019/4/17 传媒学院

14 6.2、菜单制作（续） 5）设置当前菜单样式 6）设置链接的hover伪样式 7）去掉logo，menu的背景颜色
动手做 5）设置当前菜单样式 给第一个a标签添加一个类样式 .current {color:red} 6）设置链接的hover伪样式 颜色：红 7）去掉logo，menu的背景颜色 2019/4/17 传媒学院

15 7、内容预览区域制作 这个区域放两个并排显示div 作业预览区 自定义页面预览区 Id：works 放一部分作业的链接 样式 动手做
宽高508*398；红色边框；有边界3；浮动左对齐 自定义页面预览区 Id：myself 放自定义页面中有特色的一部分内容在这个区域 宽高508*398；紫色边框；浮动左对齐 动手做

16 去掉content的背景，有如下效果

17 7.1、作业预览区域的制作 把作业预览区域（ works ）再分成两个区域 标题区域 label 作业例子区域 sample 动手做

18 7.1、作业预览区域的制作（续） 标题区域（label）的样式 标题区域（label）内容 宽高：508*30 字号：16；颜色：白 填充
上：3 左：10 以上两项设置后要调整宽高以保证div的实际宽高还是指定的值 背景颜色：红色 标题区域（label）内容 作业精选 More 添加空链接 样式：颜色白，有下划线，右对齐，且右边界为10 动手做 2019/4/17 传媒学院

19 7.1、作业预览区域的制作（续） 作业例子区域（sample）的样式 作业例子区域的内容 方框-填充-上下左右：10
放置几个作业介绍及作业链接，如下图

20 7.2、自定义页面预览区域制作 参照7.1制作 主要放置自定页面有特色的部分内容

21 8、版权区域制作 footer内添加文字内容 修改footer的样式，添加如下样式 张三@武汉纺织大学传媒学院©2017
©是版权符号特殊字符 Dw中可通过“插入记录-HTML-特殊字符”插入 修改footer的样式，添加如下样式 字号：20，颜色：白 上填充：25 （调整高度保证高度不发生变化） 区块-文本对齐-居中

22 阶段性成果

23 9、我的作业页面建设 1）添加到外表样式表的链接 2）编写container全局div
拷贝首页中的“<link hre。。。。”那一行到本页面的head区域 2）编写container全局div 3）拷贝首页中的整个logo_menu部分到本页面的container之间 4）拷贝首页中的整个footer部分到本页面的container之间 位于logo_menu之下

24 9、我的作业页面建设（续） 完成后有如下效果 5）在logo_menu和footer两个div之间编写一个放置作业链接的div
Id:work_content 样式 高：400（Q：不设宽，那宽是多少？） 填充：上下左右10 边框：绿色 下边界：3

25 9、我的作业页面建设（续） 6）添加作业链接到work_content中 7）在本页面中，设置当前菜单为“我的作业”
class=current给第二个链接使用，第一个的去掉 8）在本页面中，添加到首页的链接 9）在首页中 菜单部分添加到本页面的链接 作业精选区域的more为到本页面的链接

26 10、自选页面的建设 样式仿照我的作业页面 内容自定

27 11、大致评分标准 首页效果：40分 我的作业页面：20 自选页面：40分 扣分项 Logo：5分
菜单：10分（当前菜单5分；hover效果5分） 内容预览区域：20分 （Label：5分，作品例子5分）*2 版权区域：5分 我的作业页面：20 Logo菜单区及版权区域：5分；作业链接有效齐全：15分 自选页面：40分 Logo菜单区及版权区域：5分 自选部分（35）内容充实，效果丰富是评分依据 扣分项 链接点击后不能打开，一处扣5分