HTML数字化教学资源平台,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc
11.3 实例1:数字化教学资源平台网站布局
11.3.1效果图的分析与切片
本实例是为了让读者更清楚使用CSS进行整站布局的方法,所以这里只介绍站点首页的制作方法。其中,站点首页的效果图如图12-22所示。
在制作切图时,首先要区分出页面的内容和修饰部分。然后分析出哪些修饰部分是可以用CSS代码来实现的,哪些部分是可以用重复背景来实现的,最后要切出需要知道详细宽度的部分。在制作切图时,最好把修饰背景上的文本内容去掉,同时尽量减少图片文件的数量。制作好的首页切图如图12-23所示。
图 12-22 站点首页效果图 图 12-23 首页的切片
从图12-22可以看出可以看出,首页在纵向可以分为3个部分:头部(包括logo部分和导航)、内容部分、底部。其中,中间内容部分又可以分为3个部分:左侧的精品课程和专题学习网站部分、中间内容部分、右侧关于我们部分。
分析完页面结构之后,就是切图的制作,其内容文本的隐藏、切片的选择、保存格式等方面。下面进行详细的讲解。
从图12-23可以看出,切片中作为背景使用的大多是圆角框的部分和含有渐变颜色的部分。其中使用单纯一种颜色的部分,可以用CSS来实现。具体哪些修饰部分使用背景图片,哪些修饰部分使用CSS制作,将在后面详细介绍。切好图后,将切片导出保存为html格式即可。
11.3.3制作站点的首页头部
效果图切图完成后,就可以开始制作页面了。现在整个页面分成几个部分进行制作,下面分解进行讲解。
1.首页头部的信息和基础样式的制作
首先制作页面头部信息,主要包括页面标题等,其代码程序如下:
数字化教学资源平台网站
在链接样式的语句后面,第12行增加了link元素,其目的是附加外部样式表。
注意:第8行设置charset=utf-8,如果网站全部页面都这样设置,可以防止出现乱码页面。
接下来制作页面的基础样式,其代码如下所示。
/* 基础样式 */
*{
margin: 0px;
padding: 0px;
font-family: 宋体; /*定义使用的字体*/
color:#58595B;
font-size:11px;
list-style-type: none;
text-decoration: none;}
body{
height: 100%;
background-color:#5c5c5c;} /*定义背景颜色*/
img{
border:none;}
a { /*定义页面链接的样式*/
color: #ffffff;
text-decoration: none;}
a:link{
text-decoration:none;}
a:hover {
text-decoration: underline;}
form {
margin: 0px;
padding: 0px;}
.clear{
line-height:1px;
clear:both;
visibility:hidden;}
在第3-10行代码的基础样式中定义了字体、页面的背景颜色和相关各个页面元素的初始样式、同时取消了可能存在兼容问题的元素的补白和边界。第15行的border:none,表示所有图片没有边框。
2.首页头部的分析
首先还是对头部的效果图进行分析,其目的是区分页面中内容和修饰的部分。头部的效果图如图12-24所示。
图 12-24 页面头部效果图
从图12-24可以看
HTML数字化教学资源平台,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc...相关推荐
- 张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc 1.淮安市高校教学资源共建共享平台CSS样式设计 初学网页制作的人经常会觉得对 ...
- 张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例 图3-1 网站div结构布局示意图 3.2界 ...
- html5制作学学课件,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源5_JavaScript编程_电子课件课件.ppt...
任务3 表单验证的设计 5.16 表单验证的意义与实现 二.表单验证的类型及其实现 (2)必填验证 表单元素中不能没有文本或只有空格文本. [实例]必填验证 1)定义必填验证的函数isFilled,对 ...
- web前端网页设计与制作——华夏第一县HTML+CSS+JavaScript
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- HTML5期末大作业:个人介绍/个人主页/网页设计——个人博客 (11页) HTML+CSS+JavaScript
HTML5期末大作业:个人介绍/个人主页/网页设计--个人博客 (11页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见 ...
- HTML5期末大作业:汽车主题网页设计——21 汽车租赁(47页) HTML+CSS+JavaScript web前端期末大作业 html+css+javascript网页设计实例 企业网站制作
HTML5期末大作业:汽车主题网页设计--21 汽车租赁(47页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设 ...
- web课程设计网页规划与设计 :网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- web课程设计网页规划与设计 :网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
- c语言课程网页设计HTML,清华大学出版社-图书详情-《网页设计与制作案例教程(HTML+CSS+Dreamweaver)》...
本教材是学习网页设计与制作的基础教程,全书精选多类流行网站作为案例进行分析讲解,重点突出了商业案例的职业氛围,使读者在领略网页制作基本知识的基础上,掌握网页实际制作的方法和技巧,包括多种形式的主页.栏 ...
最新文章
- [cocos2dx UI] CCLabelAtlas 为什么不显示最后一个字
- jQuery验证控件jquery.validate.js使用说明+中文API
- Python基础教程:字典(当索引不好用时)
- 设计模式一の设计模式详解
- dev调试时无法进入下一步_【问题解决方案】Dev C++ 无法调试的问题与解决
- zw版【转发·台湾nvp系列例程】HALCON MirrorRegion (Delphi)
- 苹果Mac上的 Spotlight 扩展小技巧
- gitlab ssh key
- crontab mysql命令_crontab命令使用介绍
- Java网络编程之通过代码实现Socket通信
- 4775电子书免费链接
- 雅虎 (YAHOO)相册下载工具 Beta1 发布
- SpringBoot将图片/文件传至前端
- 2020年度个税汇算清缴怎么办理?直接上干货!
- 需求分析——系统需求和软件需求
- Jenkins未授权访问
- 第二周数据库学习笔记
- Drawing Rectangles(绘制矩形)
- pc电源改可调_如何为您的PC升级和安装新电源
- MySQL表字段类型哪些