武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第28节 综合练习1 武汉纺织大学传媒学院 cm.wtu.edu.cn 2018/9/22 传媒学院

2 目标 制作传媒学院网站首页 2018/9/22 传媒学院

3 1、规划网站结构 网站的目录结构 网页及命名 首页的简要规划 2018/9/22 传媒学院

4 1.1 规划网站结构 主要是网站的目录结构 网站目录 为整个网站创建一个目录 为公共图片等创建一个存放目录 为CSS创建一个存放目录 。。。
所有网页及资源文件均存放于该目录或其下子目录，也叫网站根目录 为公共图片等创建一个存放目录 为CSS创建一个存放目录 。。。 网站目录 整个网站的目录命令 一般根据项目名来命令，传媒学院网站（school of media and communication） 我们把这个案例的网站目录名叫cm（小写便于书写） 2018/9/22 传媒学院

5 网站目录结构 网站根目录名 公共图片存放目录名 CSS文件存放目录名 Js文件存放目录名 学生作品图片目录 动手创建这些目录
cm 公共图片存放目录名 cm/images CSS文件存放目录名 cm/css Js文件存放目录名 cm/js 存放bootstrap插件文件 学生作品图片目录 cm/show 存放学生作品的相关图片等文件 为网上提交作业，我们就不创建子目录了，所有网页，图片都放cm中。 如果大家做结课作业，最好这样规划，便于管理 2018/9/22 传媒学院

6 1.2 网页及命名 规划可能的网页 首页 命名及存放位置 名称：index.html 位置：cm目录 对应功能：网站首页 动手新建首页
2018/9/22 传媒学院

7 学院介绍页面 学院新闻页面 师资力量页面 专业介绍页面 学生作品页面 introduction.html news.html
teacher.html 专业介绍页面 major.html 学生作品页面 works.html 这些页面全部位于网站根目录下，先不新建 2018/9/22 传媒学院

8 1.3 首页策划 根据设计划分div区域 2018/9/22 传媒学院

9 2、Html＋CSS架构 编写首页的CSS框架 划分div 编制div及对应样式 以外部CSS文件的方式存储 选择器命名比较重要
为了网上提交作业，使用内部样式 编写首页的CSS框架 以外部CSS文件的方式存储 好处：可被多个页面共享 选择器命名比较重要 要有意义（英文或拼音），不能随便起（a123） 选择器名称，以及标签id值的命名规则：以字母或下划线开头 例子：1，1a，a1，_1，logo 划分div 编制div及对应样式

10 2.1 划分div logo区域 菜单区域 宣传图片区域 内容预览区域 版权区域 对应1 id：logo 对应2 id：menu 对应3
id：slide 内容预览区域 id：content 对应4 版权区域 id：footer 对应5

11 2.2 全局div 网站所有内容都放在一个div中 便于设置效果 id=container 设置样式container样式
比如居中 一般的网站都这么做的 id=container 设置样式container样式 设置宽度，如果希望一个div居中，必须设置宽度！ 1024 左右外边距选择“自动” 实现居中效果 利用外部样式表保存css样式 cm.css cm\css 动手做 为了网上提交作业，使用内部样式

12 2.3 logo div id css选择器名 属性 动手做 logo 使用dreamweaver推荐的上下文选择器名称 宽，高 背景颜色
#container #logo 这表示什么意思？ 属性 宽，高 1024*50 背景颜色 灰色#CCCCCC 制作时可先给出一个背景颜色，便于观察效果，就类似修房子的脚手架，待内容都完成后，可去掉背景或保留，以达到期待效果 下边界 2（和下一个区域有一定间隔，视觉效果更好） 动手做

13 2.4 菜单div id menu 属性 宽，高 1024*40 背景颜色 黑色 下边界 2 动手做 2018/9/22 传媒学院

14 2.5 宣传图片div id slide 属性 宽，高 1024*300 背景颜色 蓝色 下边界 2 动手做

15 2.6 内容预览div id content 属性 宽，高 1024*200 背景颜色 下边界 2 动手做

16 2.7 版权div id footer 属性 宽，高 1024*30 背景颜色 淡蓝色 #0066FF 动手做

17 阶段性成果 完成上述操作后，可得到以下显示效果 2018/9/22 传媒学院

18 3、logo区域制作 放置logo图片 调节图片在logo中对齐方式 拷贝logo.png到公共图片目录images 使用img标签放置图片
为了网上提交作业，直接拷贝到cm目录 放置logo图片 拷贝logo.png到公共图片目录images 使用img标签放置图片 宽260 调节图片在logo中对齐方式 左填充10，上填充8 div的样式还是img的样式？ 对应的宽度、高度要调整 保证总宽度、总高度不变！ 动手做 2018/9/22 传媒学院

19 4、引入bootstrap 为了提高开发效率 流程 拷贝bootstrap文件到相应的目录 在首页中引用（代码放在head区域） 动手做
bootstrap.min.css（bootstrap样式文件）到css目录 jquery.min.js（jQuery插件文件，boostrap需要的）到js目录 bootstrap.min.js（boostrap插件文件）到js目录 在首页中引用（代码放在head区域） <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> 动手做 2018/9/22 传媒学院

20 引入boostrap后的变化 Body标签的默认间隔消失 填充不再影响标签（比如div）的宽度或高度 调整div中内容的位置更容易
修改logo区域的高宽到1024*50 动手做 2018/9/22 传媒学院

21 5、菜单制作 采用boostrap的胶囊式导航菜单 菜单内容利用ul标签包含 代码 动手做 这是boostrap胶囊式导航要求的
<ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">学院介绍</a></li> <li><a href="#">学院新闻</a></li> <li><a href="#">师资力量</a></li> <li><a href="#">专业介绍</a></li> <li><a href="#">学生作品</a></li> </ul> 动手做 2018/9/22 传媒学院

22 6、宣传图片区域制作 目标：5张宣传图片的滚动播放 采用Bootstrap 轮播（Carousel）插件实现 流程
拷贝图片flash1~ flash5.jpg到公共图片目录images 为了网上提交作业，直接拷贝到cm目录 动手做 2018/9/22 传媒学院

23 动手做 参考代码 拷贝代码时注意，是替换掉已有的slide div 完工后，去掉slide的背景颜色
<div id="slide" class="carousel slide"><!--slide div开始--> <!-- 轮播（Carousel）指标 --> <ol class="carousel-indicators"> <li data-target="#slide" data-slide-to="0" class="active"></li> <li data-target="#slide" data-slide-to="1"></li> <li data-target="#slide" data-slide-to="2"></li> <li data-target="#slide" data-slide-to="3"></li> <li data-target="#slide" data-slide-to="4"></li> </ol> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active"><img src="flash1.jpg" alt="1" height="300"></div> <div class="item"><img src="flash2.jpg" alt="2" height="300"></div> <div class="item"><img src="flash3.jpg" alt="3" height="300" ></div> <div class="item"><img src="flash4.jpg" alt="4" height="300" ></div> <div class="item"><img src="flash5.jpg" alt="5" height="300" ></div> </div> <!-- 轮播（Carousel）导航 --> <a class="carousel-control left" href="#slide" data-slide="prev">‹ </a> <a class="carousel-control right" href="#slide" data-slide="next">› </div><!--slide div结束--> 拷贝代码时注意，是替换掉已有的slide div 动手做 完工后，去掉slide的背景颜色 2018/9/22 传媒学院

24 阶段性成果 完成上述操作后，可得到以下显示效果 2018/9/22 传媒学院

25 7、策划首页的内容预览区域 这个区域内容比较复杂，仅仅用一个div很难布局，可以考虑嵌套多个div来实现 分两步实现
content（内容预览）区域布局设计 content子div的样式创建

26 7.1 content区域布局设计 用两个div实现 一个放置学生作品的介绍，称之为作品预览区域（对应4-1）
id=index-works 一个放置新闻及相关链接的信息，称之为新闻预览区域（对应4-2） id=index-news

27 7.2 content区域html框架 <div id=content> <div id=index-works>
<div id=index-news> 拷贝代码时注意，是替换掉已有的content div 2018/9/22 传媒学院

28 7.3 content区域div的样式创建 作品预览区域 id：index-works 宽高：722*200
边框：实线，细，橙色（ #FF9900 ） 圆角边框 border-top-left-radius:11px; border-top-right-radius:11px; 浮动：左对齐 并排显示div 右边界 2 和右边的新闻预览区域保持一定间隔 动手做 2018/9/22 传媒学院

29 新闻预览区域 去掉content区域背景颜色 id：index-news 宽高：300*200 背景颜色 浮动：左对齐 #CCCCCC
如果一行显示两个div，则这两个div都要设置浮动 去掉content区域背景颜色 动手做 2018/9/22 传媒学院

30 阶段性成果 完成上述操作后，可得到以下显示效果 2018/9/22 传媒学院

31 8、作品预览区域制作 布局策划 区域标题制作 作品图片放置 添加作品提示及链接 2018/9/22 传媒学院

32 8.1 布局策划 把作品预览（ index-works ）再分成两个区域 标题区域 作品例子区域 label sample 动手做
2018/9/22 传媒学院

33 8.2 区域标题制作 id：label 样式 内容 动手做 宽高：721*30 字号：16；颜色：白 填充 圆角边框
上：3 左：10 圆角边框 border-top-left-radius:10px; border-top-right-radius:10px; 背景颜色：橙色（ #FF9900 ） 内容 学生作品 More 添加空链接 样式：颜色白，有下划线，右对齐，且右边界为10 动手做 2018/9/22 传媒学院

34 8.3 作品图片放置 放置在sample中（该div不用设置样式） 思路：用三个并排的div包含图片来显示 制作这些Div
可能有点多余，但为后面的扩展留下余地 制作这些Div id分别为：img1~3 大小：230*160 浮动：左对齐 背景颜色：#0099FF img1：边界，上5，左5，右10 img2：边界，上5，右10 img3：边界，上5， 动手做 2018/9/22 传媒学院

35 相应地在每个div中放置图片 拷贝素图片到show目录中 使用img标签把s1-1, s2-1,s3-1分别放置在img1~3的div中
为了网上提交作业，拷贝到cm目录中，图片为s1-1.img, s2-1.img, s3-1.img 相应地在每个div中放置图片 拷贝素图片到show目录中 以s1~6开头的图片文件（本例子共展示6个作品） 使用img标签把s1-1, s2-1,s3-1分别放置在img1~3的div中 宽度设置为230 设置图片为绝对定位 裁剪图片，并对齐 s1-1: 裁剪：上2，下162；边界：上-2 s2-1: 裁剪：上100，下260；边界：上-100 s3-1: 裁剪：上20，下180；边界：上-20 动手做 2018/9/22 传媒学院

36 阶段性成果 完成上述操作后，可得到以下显示效果 2018/9/22 传媒学院

37 8.4 添加作品提示及链接 目标：鼠标移动到作品海报图片上时，作品图片变暗，且显示提示信息，点击将跳转到作品的详细介绍页面 思路
每个图片对应一个div，其中放置提示信息，背景为黑色，75%透明，且放置在图片上面，默认不显示，只有当鼠标移动到图片上时才显示 用链接包含上述div，点击将跳转到相应页面 先用空链接代替 2018/9/22 传媒学院

38 在三个图片标签后分别添加三个div img1label， img2label， img3label 此处三个div样式效果一样，可设置类样式
大小：230*160 背景：黑色 透明度75% opacity: 0.75; filter:alpha(opacity = 75); 绝对定位 以保证可以放置在图片上 动手做 2018/9/22 传媒学院

39 用空连接包含img1~3label这三个div 添加提示信息内容
城市幻想 作者：郭露  指导教师：沈祥胜  刘虹弦  高宇 img2label 定“位” 作者：马月婷 指导教师：沈祥胜 刘虹弦 img3label 学府食客 作者：皮彩妮 指导老师：黄龙飞、熊奇伟、郭涛 动手做 2018/9/22 传媒学院

40 设置提示信息样式（设置img1~3label 的css）
居中 上填充50 字体大小14 标题、作者、指导老师各占一行 动手做 2018/9/22 传媒学院

41 添加hover伪样式来显示img1~3label
设置它们的样式display: none; 添加hover伪样式来显示img1~3label 分别给img1~3这些div添加hover，但伪样式并不作用于img1~3，而是作用于img1~3label 原理：一个标签的hover伪样式可以作用于其子标签 例子 #img1:hover #img1label { … } 鼠标放置在img1上时，上述定义的样式效果将作用于img1label标签，前提：img1包含img1label 动手做 2018/9/22 传媒学院

42 添加img1的hover伪样式 动手做 区块-显示-块 也就是当鼠标移动到img1上时，原本隐藏的img1label将显示出来
2018/9/22 传媒学院

43 9、策划新闻预览区域 这个区域（index-news）包含两个独立的区域，可进一步分成上下两个div来实现 搭建框架 学院新闻：news
相关链接：linker 搭建框架 创建div标签 设置基础样式 news：300*120，边框青色#00CCFF，左上右上圆角，下边界2 linker：300*78，边框绿色#00FF00，左上右上圆角 动手做

44 10、学院新闻区域制作 布局策划 区域标题制作 新闻链接区域制作 2018/9/22 传媒学院

45 10.1 布局策划 把学院新闻区域再分成两个区域 标题区域 label 新闻链接区域 news-link 2018/9/22 传媒学院

46 10.2 区域标题制作 id：label 样式 内容 动手做 宽高：299*30 字号：16；颜色：白 填充 圆角边框
上：3 左：10 圆角边框 border-top-left-radius:10px; border-top-right-radius:10px; 背景颜色：青色#00CCFF 内容 学院新闻 More 添加空链接 样式：颜色白，有下划线，右对齐，且右边界为10 动手做 2018/9/22 传媒学院

47 10.3 新闻链接区域制作 id：news-link 利用ul标签的列表项（li）包含新闻条目 无须设置样式 <ul>
<li>传媒学院开展主题党日活动 2016/10/17</li> <li>学院开展新生专业教育 2016/09/30</li> <li>学院召开考研动员会 2016/09/23</li> <li>学校赴南京参加校友报到日活动2016/08/09</li> </ul> 动手做 2018/9/22 传媒学院

48 创建ul样式 字体大小：14 上边界：5 左填充：15 动手做 2018/9/22 传媒学院

49 单独让日期右对齐 用span标签包含日期 为这些span标签创建类样式date，并使用它 .date样式 方框-浮动-右对齐 右边界为2
这意味着：span包含的内容会在li中右对齐 右边界为2 日期和边框有2px的间隔 动手做 2018/9/22 传媒学院

50 给新闻条目添加空链接 给四个新闻条目的文字内容添加空连接 创建上述链接的标签样式 创建上述链接的hover伪样式 比如 链接的默认颜色为黑色
<a href="#">传媒学院开展主题党日活动</a> 创建上述链接的标签样式 链接的默认颜色为黑色 链接没有下划线 创建上述链接的hover伪样式 颜色：绿色 鼠标放在链接上，链接变为绿色 动手做 2018/9/22 传媒学院

51 11、相关链接区域制作 制作方法类似于学院新闻区域，同样用两个div实现 label参考学院新闻区域的label制作 linker2样式
背景颜色为绿色 linker2样式 字号：14，左填充8，上填充3 创建linker2内a标签的标签样式 有下划线 完工：去掉index-news的背景 动手做 2018/9/22 传媒学院

52 12、版权区域制作 footer内添加文字内容 样式 武汉纺织大学传媒学院©2017 ©是版权符号特殊字符
Dw中可通过“插入记录-HTML-特殊字符”插入 样式 字号：16，颜色：白 上填充：4 区块-文本对齐-居中 动手做 2018/9/22 传媒学院

53 作业 实现本节内容 2018/9/22 传媒学院