武汉纺织大学传媒学院 cm.wtu.edu.cn 第28节 综合练习1 武汉纺织大学传媒学院 cm.wtu.edu.cn 2018/9/22 传媒学院
目标 制作传媒学院网站首页 2018/9/22 传媒学院
1、规划网站结构 网站的目录结构 网页及命名 首页的简要规划 2018/9/22 传媒学院
1.1 规划网站结构 主要是网站的目录结构 网站目录 为整个网站创建一个目录 为公共图片等创建一个存放目录 为CSS创建一个存放目录 。。。 所有网页及资源文件均存放于该目录或其下子目录,也叫网站根目录 为公共图片等创建一个存放目录 为CSS创建一个存放目录 。。。 网站目录 整个网站的目录命令 一般根据项目名来命令,传媒学院网站(school of media and communication) 我们把这个案例的网站目录名叫cm(小写便于书写) 2018/9/22 传媒学院
网站目录结构 网站根目录名 公共图片存放目录名 CSS文件存放目录名 Js文件存放目录名 学生作品图片目录 动手创建这些目录 cm 公共图片存放目录名 cm/images CSS文件存放目录名 cm/css Js文件存放目录名 cm/js 存放bootstrap插件文件 学生作品图片目录 cm/show 存放学生作品的相关图片等文件 为网上提交作业,我们就不创建子目录了,所有网页,图片都放cm中。 如果大家做结课作业,最好这样规划,便于管理 2018/9/22 传媒学院
1.2 网页及命名 规划可能的网页 首页 命名及存放位置 名称:index.html 位置:cm目录 对应功能:网站首页 动手新建首页 2018/9/22 传媒学院
学院介绍页面 学院新闻页面 师资力量页面 专业介绍页面 学生作品页面 introduction.html news.html teacher.html 专业介绍页面 major.html 学生作品页面 works.html 这些页面全部位于网站根目录下,先不新建 2018/9/22 传媒学院
1.3 首页策划 根据设计划分div区域 2018/9/22 传媒学院
2、Html+CSS架构 编写首页的CSS框架 划分div 编制div及对应样式 以外部CSS文件的方式存储 选择器命名比较重要 为了网上提交作业,使用内部样式 编写首页的CSS框架 以外部CSS文件的方式存储 好处:可被多个页面共享 选择器命名比较重要 要有意义(英文或拼音),不能随便起(a123) 选择器名称,以及标签id值的命名规则:以字母或下划线开头 例子:1,1a,a1,_1,logo 划分div 编制div及对应样式
2.1 划分div logo区域 菜单区域 宣传图片区域 内容预览区域 版权区域 对应1 id:logo 对应2 id:menu 对应3 id:slide 内容预览区域 id:content 对应4 版权区域 id:footer 对应5
2.2 全局div 网站所有内容都放在一个div中 便于设置效果 id=container 设置样式container样式 比如居中 一般的网站都这么做的 id=container 设置样式container样式 设置宽度,如果希望一个div居中,必须设置宽度! 1024 左右外边距选择“自动” 实现居中效果 利用外部样式表保存css样式 cm.css cm\css 动手做 为了网上提交作业,使用内部样式
2.3 logo div id css选择器名 属性 动手做 logo 使用dreamweaver推荐的上下文选择器名称 宽,高 背景颜色 #container #logo 这表示什么意思? 属性 宽,高 1024*50 背景颜色 灰色#CCCCCC 制作时可先给出一个背景颜色,便于观察效果,就类似修房子的脚手架,待内容都完成后,可去掉背景或保留,以达到期待效果 下边界 2(和下一个区域有一定间隔,视觉效果更好) 动手做
2.4 菜单div id menu 属性 宽,高 1024*40 背景颜色 黑色 下边界 2 动手做 2018/9/22 传媒学院
2.5 宣传图片div id slide 属性 宽,高 1024*300 背景颜色 蓝色 下边界 2 动手做
2.6 内容预览div id content 属性 宽,高 1024*200 背景颜色 下边界 2 动手做
2.7 版权div id footer 属性 宽,高 1024*30 背景颜色 淡蓝色 #0066FF 动手做
阶段性成果 完成上述操作后,可得到以下显示效果 2018/9/22 传媒学院
3、logo区域制作 放置logo图片 调节图片在logo中对齐方式 拷贝logo.png到公共图片目录images 使用img标签放置图片 为了网上提交作业,直接拷贝到cm目录 放置logo图片 拷贝logo.png到公共图片目录images 使用img标签放置图片 宽260 调节图片在logo中对齐方式 左填充10,上填充8 div的样式还是img的样式? 对应的宽度、高度要调整 保证总宽度、总高度不变! 动手做 2018/9/22 传媒学院
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 传媒学院
引入boostrap后的变化 Body标签的默认间隔消失 填充不再影响标签(比如div)的宽度或高度 调整div中内容的位置更容易 修改logo区域的高宽到1024*50 动手做 2018/9/22 传媒学院
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 传媒学院
6、宣传图片区域制作 目标:5张宣传图片的滚动播放 采用Bootstrap 轮播(Carousel)插件实现 流程 拷贝图片flash1~ flash5.jpg到公共图片目录images 为了网上提交作业,直接拷贝到cm目录 动手做 2018/9/22 传媒学院
动手做 参考代码 拷贝代码时注意,是替换掉已有的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 传媒学院
阶段性成果 完成上述操作后,可得到以下显示效果 2018/9/22 传媒学院
7、策划首页的内容预览区域 这个区域内容比较复杂,仅仅用一个div很难布局,可以考虑嵌套多个div来实现 分两步实现 content(内容预览)区域布局设计 content子div的样式创建
7.1 content区域布局设计 用两个div实现 一个放置学生作品的介绍,称之为作品预览区域(对应4-1) id=index-works 一个放置新闻及相关链接的信息,称之为新闻预览区域(对应4-2) id=index-news
7.2 content区域html框架 <div id=content> <div id=index-works> <div id=index-news> 拷贝代码时注意,是替换掉已有的content div 2018/9/22 传媒学院
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 传媒学院
新闻预览区域 去掉content区域背景颜色 id:index-news 宽高:300*200 背景颜色 浮动:左对齐 #CCCCCC 如果一行显示两个div,则这两个div都要设置浮动 去掉content区域背景颜色 动手做 2018/9/22 传媒学院
阶段性成果 完成上述操作后,可得到以下显示效果 2018/9/22 传媒学院
8、作品预览区域制作 布局策划 区域标题制作 作品图片放置 添加作品提示及链接 2018/9/22 传媒学院
8.1 布局策划 把作品预览( index-works )再分成两个区域 标题区域 作品例子区域 label sample 动手做 2018/9/22 传媒学院
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 传媒学院
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 传媒学院
相应地在每个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 传媒学院
阶段性成果 完成上述操作后,可得到以下显示效果 2018/9/22 传媒学院
8.4 添加作品提示及链接 目标:鼠标移动到作品海报图片上时,作品图片变暗,且显示提示信息,点击将跳转到作品的详细介绍页面 思路 每个图片对应一个div,其中放置提示信息,背景为黑色,75%透明,且放置在图片上面,默认不显示,只有当鼠标移动到图片上时才显示 用链接包含上述div,点击将跳转到相应页面 先用空链接代替 2018/9/22 传媒学院
在三个图片标签后分别添加三个div img1label, img2label, img3label 此处三个div样式效果一样,可设置类样式 大小:230*160 背景:黑色 透明度75% opacity: 0.75; filter:alpha(opacity = 75); 绝对定位 以保证可以放置在图片上 动手做 2018/9/22 传媒学院
用空连接包含img1~3label这三个div 添加提示信息内容 城市幻想 作者:郭露 指导教师:沈祥胜 刘虹弦 高宇 img2label 定“位” 作者:马月婷 指导教师:沈祥胜 刘虹弦 img3label 学府食客 作者:皮彩妮 指导老师:黄龙飞、熊奇伟、郭涛 动手做 2018/9/22 传媒学院
设置提示信息样式(设置img1~3label 的css) 居中 上填充50 字体大小14 标题、作者、指导老师各占一行 动手做 2018/9/22 传媒学院
添加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 传媒学院
添加img1的hover伪样式 动手做 区块-显示-块 也就是当鼠标移动到img1上时,原本隐藏的img1label将显示出来 2018/9/22 传媒学院
9、策划新闻预览区域 这个区域(index-news)包含两个独立的区域,可进一步分成上下两个div来实现 搭建框架 学院新闻:news 相关链接:linker 搭建框架 创建div标签 设置基础样式 news:300*120,边框青色#00CCFF,左上右上圆角,下边界2 linker:300*78,边框绿色#00FF00,左上右上圆角 动手做
10、学院新闻区域制作 布局策划 区域标题制作 新闻链接区域制作 2018/9/22 传媒学院
10.1 布局策划 把学院新闻区域再分成两个区域 标题区域 label 新闻链接区域 news-link 2018/9/22 传媒学院
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 传媒学院
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 传媒学院
创建ul样式 字体大小:14 上边界:5 左填充:15 动手做 2018/9/22 传媒学院
单独让日期右对齐 用span标签包含日期 为这些span标签创建类样式date,并使用它 .date样式 方框-浮动-右对齐 右边界为2 这意味着:span包含的内容会在li中右对齐 右边界为2 日期和边框有2px的间隔 动手做 2018/9/22 传媒学院
给新闻条目添加空链接 给四个新闻条目的文字内容添加空连接 创建上述链接的标签样式 创建上述链接的hover伪样式 比如 链接的默认颜色为黑色 <a href="#">传媒学院开展主题党日活动</a> 创建上述链接的标签样式 链接的默认颜色为黑色 链接没有下划线 创建上述链接的hover伪样式 颜色:绿色 鼠标放在链接上,链接变为绿色 动手做 2018/9/22 传媒学院
11、相关链接区域制作 制作方法类似于学院新闻区域,同样用两个div实现 label参考学院新闻区域的label制作 linker2样式 背景颜色为绿色 linker2样式 字号:14,左填充8,上填充3 创建linker2内a标签的标签样式 有下划线 完工:去掉index-news的背景 动手做 2018/9/22 传媒学院
12、版权区域制作 footer内添加文字内容 样式 武汉纺织大学传媒学院©2017 ©是版权符号特殊字符 Dw中可通过“插入记录-HTML-特殊字符”插入 样式 字号:16,颜色:白 上填充:4 区块-文本对齐-居中 动手做 2018/9/22 传媒学院
作业 实现本节内容 2018/9/22 传媒学院