HTML5网页前端设计（第3版）- 微课视频版 课件 CH12 前端综合应用·基于HTML5+CSS3的高校网站的设计与实现_第1页
HTML5网页前端设计（第3版）- 微课视频版 课件 CH12 前端综合应用·基于HTML5+CSS3的高校网站的设计与实现_第2页
HTML5网页前端设计（第3版）- 微课视频版 课件 CH12 前端综合应用·基于HTML5+CSS3的高校网站的设计与实现_第3页
HTML5网页前端设计（第3版）- 微课视频版 课件 CH12 前端综合应用·基于HTML5+CSS3的高校网站的设计与实现_第4页
HTML5网页前端设计（第3版）- 微课视频版 课件 CH12 前端综合应用·基于HTML5+CSS3的高校网站的设计与实现_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第12章前端综合应用·

基于HTML5+CSS3的高校网站的设计与实现主讲人：某某老师本章学习目标综合应用HTML5、CSS3与JavaScript开发Web网站；能够在开发过程中熟练掌握HMLT5新增文档结构元素的使用；能够在开发过程中熟练掌握CSS各类选择器的使用和样式的表达；提高开发者实战项目分析能力以及强化综合应用能力。目录12.1项目简介12.2整体布局设计12.3网站页眉实现12.4菜单导航栏实现12.5主体内容第一行实现12.6主体内容第二行实现12.7网站页脚实现12.8本章小结本案例节选自客户需求开发的真实项目，以教育部高校辅导员培训和研修基地（安徽师范大学）网站首页为例，介绍如何综合应用HTML5、CSS3与JavaScript相关知识开发网页。12.1项目简介12.1项目简介其首页显示效果如图所示。该项目将用到HTML5新增结构标签来架构网站整体布局。在此基础上涉及了少量jQuery代码配合CSS3使用来制作页面动态效果。整体页面根据内容可以分为5个部分：头部、菜单导航、主体部分第一行和第二行、尾部。12.2整体布局设计12.2整体布局设计根据划分的板块，设计整体结构图如图所示。网站头部：单位Logo和名称。网站菜单导航栏：菜单栏目和全文搜索框。网站主体部分第一行：幻灯片切换和右侧栏。网站主体部分第二行：三个名称不同的新闻版块。网站尾部：友情链接、单位版权信息与地址。在结构图中涉及到的主要HTML5结构标签有<header>、<nav>、<section>以及<footer>。整体页面根据内容可以分为5个部分：头部、菜单导航、主体部分第一行和第二行、尾部。12.3网站页眉实现12.3网站页眉实现修改home.html文件，在<header>标签内部追加<div>标签并自定义其id=”logo”。在该<div>元素内部添加<img>标签用于显示带有logo图标和单位名称的图片。修改home.css文件中页眉部分的对应代码，为<header>元素添加背景颜色，并去掉原先的边框效果。在home.css中追加代码来规定<div>和<img>元素尺寸和位置。12.4.1菜单栏目的实现12.4.2搜索框的实现12.4菜单导航栏实现12.4菜单导航栏实现菜单导航栏包括两个部分：一级菜单栏目：有“首页”、“机构简介”、“通知公告”等共计9项。右侧搜索框：用于网站全文搜索。12.4菜单导航栏实现修改home.html文件，在<header>标签内部追加<div>标签并自定义其id=”logo”。在该<div>元素内部添加<img>标签用于显示带有logo图标和单位名称的图片。修改home.css文件中页眉部分的对应代码，为<header>元素添加背景颜色，并去掉原先的边框效果。在home.css中追加代码来规定<div>和<img>元素尺寸和位置。12.4.1菜单栏目的实现首先在<ul>列表元素内部配套使用<li>来显示所有的列表项，由于菜单栏目被点击后还希望跳转其他页面，因此在列表元素<li>内部使用超链接标签<a>来进行制作。然后去掉<ul>元素的红色边框样式。12.4.2搜索框的实现在<form>表单标签内部用<img>制作放大镜图标，然后追加<input>标签制作单行文本输入框。对应的home.css文件追加CSS样式代码。最后去掉最外层<nav>和<div>元素的红色边框样式。12.4菜单导航栏实现网站菜单导航栏完成效果图12.5.1左侧面板的实现12.5.2右侧面板上方的实现12.5.3右侧面板下方的实现12.5主体内容第一行实现12.5主体内容第一行实现主体内容第一行包括三个部分：左侧面板：幻灯片播放图片新闻。右侧面板上方：“通知公告”新闻列表。右侧面板下方：两个图标，点击可以跳转到其他网址。12.5主体内容第一行实现使用<aside>元素居中将主体内容第一行划分为左右两个侧栏面板，并自定义这2个<aside>的id值分别为col1_1和col1_2。然后右侧面板再分割为上下两个部分，上半部分使用<article>来显示新闻列表，下半部分使用<div>显示图标区域。对应的home.css文件追加CSS样式代码。12.5.1左侧面板的实现该栏目有三张素材图片需要进行自动轮播，可以使用jQuery技术来实现图片的淡入淡出效果。首先在HTML5页面的<head>标签内添加对于jQuery的声明。新增CSS代码及相关jQuery代码填充。12.5.1左侧面板的实现jQuery代码采用的是jQuery技术中的fadeIn()与fadeOut()函数来实现图片的淡入和淡出效果。当点击左右两侧按钮会分别触发last()或next()函数，切换前一张或后一张图片。$(document).ready()函数表示每隔5000毫秒（即5秒）将自动执行next()函数来切换下一张图片，如果到了最后一张播放完毕则回到第一张循环播放。12.5.1左侧面板的实现左侧面板幻灯片播放实现效果图从上到下分别展示的是：播放到第一、二、三张图片。12.5.2右侧面板上方的实现右侧面板上方是一个新闻列表区域，分别使用<div>和<ul>将新闻区域<aside>分为新闻标题和列表两部分，示意图如图12-10所示。12.5.2右侧面板上方的实现接下来开始添加实际内容，首先是添加标题“通知公告”和箭头图标用于表示点击查看更多新闻。由于图标击后还希望跳转二级页面，因此使用超链接标签<a>来进行制作，在内部嵌入<img>图像。然后在<ul>元素内部嵌套使用<li>实现4条新闻记录，每条新闻都包含日期和新闻标题。新增CSS代码。为了查看新闻列表的左右留白效果，去掉新闻区域红色边框，并为整个主体区域加上背景颜色。12.5.2右侧面板上方的实现运行效果如图12-12所示。此时右侧面板上方的新闻列表区域就全部完成了。12.5.3右侧面板下方的实现右侧面板下方是一个图标展示区域，使用<ul>和<li>来显示图标。由于图片被点击后还希望跳转其他页面，因此在列表元素<li>内部使用超链接标签<a>来进行制作，在内部嵌入<img>图像。12.5.3右侧面板下方的实现此时网站的主体部分第一行就全部完成了。整体页面根据内容可以分为5个部分：头部、菜单导航、主体部分第一行和第二行、尾部。12.6主体内容第二行实现12.6主体内容第二行实现主体内容第二行包括三个部分：左侧：“新闻动态”新闻列表。中间：“科学研究”新闻列表。右侧：“政策文件”新闻列表。12.6主体内容第二行实现使用<article>元素居中将主体内容第二行划分为左中右三个区域，并自定义这3个<article>的id值分别为news_xwdt、news_kxyj以及news_zcwj。12.6主体内容第二行实现这三个部分与之前主体内容第一行右侧面板上方的“通知公告”新闻列表具有一些通用的样式要求，例如顶端标题的字体、颜色和布局，新闻列表区域的布局和超链接样式等，因此后续不妨使用同样的class名称来继续沿用相关样式。此时只需要修改一下每个栏目的新闻日期背景和文本颜色即可，修改CSS样式代码。最后去掉主体部分所有结构标签的红色边框，并根据页面效果对新闻区域的元素宽度进行轻微调整。12.6主体内容第二行实现此时网站的主体部分就已经全部完成了，最后还要制作网站的页脚。12.7.1页脚1的实现12.7.2页脚2的实现12.7网站页脚实现12.7网站页脚实现网站页脚结构图网站页脚分成两行，第一行是友情链接，第二行单位版权和地址信息。使用<section>元素将页脚划分为上下两个部分。12.7.1页脚1的实现接下来添加实际内容，首先在页脚1内部需要分别添加友情链接图片行和文字行。友情链接图片将使用列表元素<ul>和<li>来实现。由于友情链接图片被点击后还希望跳转其他页面，因此在列表元素<li>内部使用超链接标签<a>来进行制作，在内部嵌入<img>图像。12.7.1页脚1的实现然后在页脚1中继续添加友情链接文字内容。该内容共有4项，其中前2个需要用到下拉选项，因此直接使用下拉菜单标签<select>和<option>来实现，后2个是普通文本，用<div>嵌套超链接<a>来实现。修改home.css文件中页脚部分的对应代码，为页脚1添加背景颜色，并去掉原先的边框效果。12.7.1页脚1的实现运行效果如图12-20所示。此时页脚1就全部完成了。12.7.2页脚2的实现接下来为页脚2添加版权信息和单位地址等内容，为了排版整齐这里可以考虑使用表格元素<table>来实现效果。在CSS中为页脚2去掉红色边框，并添加背景颜色。12.7.2页脚2的实现此时页脚的部分就全部完成了，运行效果如图12-22所示。12.7网站页脚实现最后去掉<footer>标签的红色边框，整个网站首页的完整运行效果如图12-23所示。12.7网站页脚实现至此，整个项目的开发就全部完成了。该项目综合应用了HTML5结构化标签架构网页布局、CSS3美化页面以及jQuery实现更为灵活的动态效果。后续还可以根据客户的需求更改其中的栏目和新闻列表的链接地址。本章小结本章小结本案例节选自客户需求开发的真实项目

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论