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

Slides:



Advertisements
Similar presentations
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
Advertisements

项目2 字符格式和段落编排 2017年3月7日6时54分.
《网页设计与制作》 教学课件.
JQuery Mobile 網頁切換 靜宜大學 資管系 楊子青.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
第五单元课1-3 层叠样式表.
PRESENTED BY OfficePLUS
CSS – 進階 IDIC.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
RWD網頁設計實務 李欣螢 以誠研發有限公司.
武汉纺织大学传媒学院 cm.wtu.edu.cn
UI 软件 设计 网页基本元素设计(二).
武汉纺织大学传媒学院 cm.wtu.edu.cn
PRESENTED BY OfficePLUS
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
武汉纺织大学传媒学院 cm.wtu.edu.cn
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
定制Drupal主题 Drupal 社区团队 大漠 :QQ
第11章:一些著名开源软件介绍 第12章:服务安装和配置 本章教学目标: 了解当前一些应用最广泛的开源软件项目 搭建一个网站服务器
HTML & CSS.
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
点击此处添加标题 ADD YOUR TITLE ADD YOUR TITLE 点击此处添加文本信息
POWERPOINT TEMPLATE HI.
网页制作基础 CNIC 王桦.
点击此处添加标题 01 点击此处添加标题 点击此处添加标题 点击此处添加标题 点击此处添加标题 点击此处添加标题 点击此处添加标题
PRESENTED BY OfficePLUS
第2章 初识Dreamweaver CS4 Adobe Dreamweaver CS4是建立Web站点和应用程序的 专业工具。它将可视布局工具、应用程序开发功能和 代码编辑支持组合在一起,其功能强大,使得各个层 次的开发人员和设计人员都能够快速创建界面吸引人 的基于标准的网站和应用程序。从对基于CSS的设计.
给最伟大的爱 母亲的爱.
武汉纺织大学传媒学院 cm.wtu.edu.cn
UI 软件 设计 页面布局(三).
网页设计与制作 Dreamweaver CS6 标准教程
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
毕业论文答辩 《请在此位置添加你的论文名称》 学校名称:OfficePLUS大学 指导老师:John Doe 报告人:Jane Doe.
201X 年中工作总结汇报 PRESENTED BY JANE DOE.
武汉纺织大学传媒学院 cm.wtu.edu.cn
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
武汉纺织大学传媒学院 cm.wtu.edu.cn
个人网站作业3 传媒学院.
金融财务工作汇报PPT模板 简洁实用·框架完整·大气时尚·工作总结·计划等 汇报人:ABC.
标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序. 标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序.
PRESENTED BY OfficePLUS
《网页设计与制作》.
武汉纺织大学传媒学院 cm.wtu.edu.cn
武汉纺织大学传媒学院 cm.wtu.edu.cn
PRESENTED BY OfficePLUS
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
项目二:HTML语言基础.
毕业论文答辩 XXX学院XXX专业 《请在此位置添加你的论文名称》 学校名称:OfficePLUS大学 指导老师:John Doe
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
企业宣传推广 Loem ipsum dolor sameman tanam casectetur adipiscing elit tamam dalam qoue sampe. dolor sameman tanam casectetur adipiscing elit tamam dalam qoue.
Word中活用“艺▪图▪框” 信息技术必修(一).
JQuery Mobile基礎 (開發跨平台行動裝置網頁)
品牌推广方案 汇报时间:2018年8月 汇报人:优品PPT
CLICK HERE TO ADD YOUR TITLE
第7章 使用CSS设置链接与导航菜单 经济管理学院.
武汉纺织大学传媒学院 cm.wtu.edu.cn
CSS基礎 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
单击此处添加您的标题 单击此处添加副标题或简单介绍.
点击此处添加标题 PPT背景图片: PPT图表下载:
使用Fragment 本讲大纲: 1、创建Fragment 2、在Activity中添加Fragment
LOGO HERE 单击此处添加 您的标题标题标题 PRESENTED BY JANE DOE
环境保护 / 能源 / 绿色城市 / 生态环境 / 林业局
请在此添加你的论文名称 XXX学院XXX专业 毕业论文答辩 请在此添加你的论文副标题名称 指导老师:X教授 答辩人:宝藏PPT
第21节 绝对定位div 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/8/30 传媒学院.
Presentation transcript:

武汉纺织大学传媒学院 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 传媒学院