Web前端基础案例 7_第1页
Web前端基础案例 7_第2页
Web前端基础案例 7_第3页
Web前端基础案例 7_第4页
Web前端基础案例 7_第5页
已阅读5页，还剩35页未读， 继续免费阅读

下载本文档

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

文档简介

任务11完整项目：制作学院网站Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）本任务学习学院网站的完整设计与实现，从网站规划、到使用Photoshop进行效果图设计、再到主页设计和其它页面设计，按照真实网站设计流程，完成静态网站的设计与实现。11.1任务描述网站首页效果图新闻详情页面新闻列表页面 视频宣传页面其他页面效果图11.1任务描述11.2网站设计与规划

设计未来信息学院网站，旨在让任何人在任何时间、任何地点都能借助网站了解学院的基本情况与最新招生与就业信息，通过该网站可以链接到招生信息网、团学在线网站、教务管理系统等。11.2网站设计与规划网站需求分析

未来信息学院网站是学校门户网站，它的主要用户为学生、教师及学生家长等，同时它是一个教育类的网站，采用蓝色为主色调是因为蓝色代表智慧，具有科技感，看起来清爽，同时能给人宁静的感觉。另外为了使网站充满活力，在网站设计上又运用了红色，让用户一眼就被网站亮丽的色彩所吸引。11.2网站规划网站的风格定位11.2网站规划规划草图未来信息学院网站主页的草图11.2网站规划项目计划一般网站的开发流程11.3效果图设计11.3.1

效果图设计原则11.3.2效果图设计步骤11.3.3效果图切片与导出11.3.1效果图设计原则先背景，后前景，先上后下，先左后右。制作软件：Photoshop中文版。效果图设计中用到的主要知识点：参考线的应用文字工具的应用直线工具的应用矩形工具的应用多边形套索工具的应用图层样式的应用切片工具的应用效果图设计原则11.3.2效果图设计步骤（1）打开PhotoshopCC软件，新建文件，命名为“学院主页效果图”，宽度为1300px，高度为1401px，背景颜色为白色，分辨率为72px/inch。（2）添加参考线。选择“视图”｜“新建参考线”选项，添加4条垂直参考线，分别是50px、1250px、512px、530px；添加9条水平参考线，分别是100px、142px、172px、539px、834px、929px、1064px、1201px、1251px，完成后如图11-5所示。（3）制作背景。打开bodybg.jpg，选择“编辑”｜“定义图案”选项，为祥云图案命名，如图11-6所示。将打开的bodybg.jpg窗口关闭。其它略。11.3.3效果图切片导出网页选择切片工具，根据需要进行切片，切片过程有以下几个技巧。首先将预期的切片设计好，然后进行切片。为了切片准确，减少误差，尽量放大图片再进行切片。重命名在网页中使用的切片图片，方便在制作网站时使用。

注意：能平铺形成的图片，只需切一个小的部分。使用某种颜色作为背景的图片不需要切片，在制作网页时设置背景颜色即可。切片创建完成后即可进行最后的网页导出，选择“文件”|“导出”|“存储为Web所用格式”选项，为切片选择存储的文件类型，单击“存储”，再选择保存的格式“仅限图像”，最后单击“保存”按钮。11.4制作网站主页页首主体部分友情链接导航滚动文本页脚主页划分11.4制作网站主页主体部分第二行主体部分第一行主体部分第三行主体部分第四行主体部分第五行主体部分划分（1）在HBuilderX中，新建项目，项目名称：chapter11，位置位于“E:/Web前端开发/源码”目录下，选择模板“空项目”，单击“创建”按钮。创建项目后，在项目名称上右击，选择“新建”|“html文件”命令，在“新建html文件”对话框中输入文件名称：index.html，单击“创建”按钮。（2）右击项目名称chapter12，选择“目录”，新建名称为“css”的目录。右击“css”目录，选择“新建”|“css文件”命令，在“新建css文件”对话框中输入文件名称：index.css，单击“创建”按钮。然后在css文件中书写通用body的样式，以及通用超级链接的样式。11.4制作网站主页主页设计步骤（3）打开文件index.html，将index.css样式表文件链接到index.html页面中。（4）制作index.html页面的顶部。（5）制作index.html页面的导航条部分。导航条内容用无序列表实现，使用CSS样式设置导航块、列表及超链接的各种样式。11.4制作网站主页主页设计步骤（6）制作导航条和主体内容之间的滚动文字部分。11.4制作网站主页主页设计步骤（7）制作固定显示二维码（8）制作主体部分11.4制作网站主页（9）制作主体部分中的第一行主页设计步骤（10）制作主体部分中的第二行。11.4制作网站主页主页设计步骤（11）制作主体部分中的第三行。11.4制作网站主页主页设计步骤11.4制作网站主页（12）制作主体部分中的第四行。主页设计步骤（13）制作主体部分中的第五行。11.4制作网站主页主页设计步骤（14）制作友情链接部分。11.4制作网站主页主页设计步骤（15）制作版权信息部分。11.4制作网站主页主页设计步骤11.5制作新闻列表页列表页主体划分（1）将主页index.html复制一份，改名为：newsList.html，修改主体部分的代码。<!—main开始--><divclass="main">

<!--listL左侧内容开始--><divid="listL"><divclass="Lnews">新闻中心部分</div><divclass="Lnotice">通知公告部分</div></div><!--左侧内容结束--><!--右侧内容开始--><divid="listR">

</div></div><!—main结束-->11.5制作新闻列表页列表页设计步骤（2）在css文件夹中再新建一个样式表文件，名称为：list.css，将index.css和list.css都链接到newsList.html页面中。书写list.css的样式表代码。/*左侧内容*/#listL{ width:282px; float:left; overflow:hidden; margin-right:15px;}/*新闻中心*/.Lnews{ width:280px; height:166px;……11.5制作新闻列表页列表页设计步骤11.6制作新闻详情页详情页主体划分（1）将newsList.html页面复制一份，改名为：newsDetail.html。该页面内容与newsList.html相比，只是右侧内容不同，因此修改该页面右侧部分的代码即可。<!--右侧内容开始--><divid="listR"><divclass="Rtop"></div><divclass="Rcon"></div></div><!--右侧内容结束-->11.6制作新闻详情页详情页设计步骤（2）该页面的样式表代码，不需再建样式表文件，而是直接打开css文件夹中的list.css样式表文件，继续在该文件中添加newsDetail.html页面的样式表代码即可。/*右边详情内容*/.Rconh2{width:858px;height:40px;line-height:40px;text-align:center;color:#ff7200;font-size:20px;}……11.6新闻详情页设计详情页设计步骤11.7制作视频宣传页步骤略。video标记<video>表示插入视频的标记。语法格式为：<videosrc="images/video.mp4"controlsautoplayloop></video>src表示视频的文件路径，controls表示在播放视频时出现控制菜单，autoplay表示自动播放，loop表示循环播放。HTML5支持的视频格式有Ogg、MP4、WebM等格式。11.7制作视频宣传页知识点

audio标记

若要播放音频文件，则用到的标记及格式是：<audiosrc="音频文件路径"controlsautoplayloop></audio><video>和<audio>这两个标记中的属性是相同的，属性是通用的。HTML5支持的音频格式有Ogg、MP3、WAV等格式。11.7制作视频宣传页知识点（1）将newsDetail.html页面复制一份，改名为：video.html，修改该页面的代码。（2）添加CSS样式。该页面也不需要再新建样式表文件，直接打开css目录中的list.css文件，继续在该文件中添加video.html页面的样式代码即可。11.7制作视频宣传页视频页设计步骤在各文件中的<head>和</head>标记之间添加脚本代码如下。11.8添加网页动态效果添加滚动文本效果11.8添加网页动态效果第一步：将jQuery库和轮播图插件的js代码复制到网站的js文件夹中，将插件的css文件复制到网站的css文件夹中；第二步：在head标记中使用script标记引入jQuery库和插件的js代码，使用link标记引入插件的css文件；添加轮播图效果第三步：修改index.html文件中两个轮播图部分的代码，添加相应的代码；11.8添加网页动态效果添加轮播图效果第四步：在

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

温馨提示

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

最新文档

评论

0/150

提交评论