张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008

网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc

《课程案例

——案例

图3-1 网站div结构布局示意图

3.2界面效果图的分析与切片

本案例是为了让读者更清楚使用CSS进行整站布局的方法，所以这里只介绍站点首页的制作方法。其中，站点首页的效果图如图3-2所示。

在制作切图时，首先要区分出页面的内容和修饰部分。然后分析出哪些修饰部分是可以用CSS代码来实现的，哪些部分是可以用重复背景来实现的，最后要切出需要知道详细宽度的部分。在制作切图时，最好把修饰背景上的文本内容去掉，同时尽量减少图片文件的数量。制作好的首页切图如图3-3所示。

图 3-2 站点首页效果图图3-3 首页的切片

从图3-2可以看出可以看出，首页在纵向可以分为3个部分：头部(包括logo部分和导航)、内容部分、底部。其中，中间内容部分又可以分为3个部分：左侧的精品课程和专题学习网站部分、中间内容部分、右侧关于我们部分。

分析完页面结构之后，就是切图的制作，其内容文本的隐藏、切片的选择、保存格式等方面。下面进行详细的讲解。

从图3-2可以看出，切片中作为背景使用的大多是圆角框的部分和含有渐变颜色的部分。其中使用单纯一种颜色的部分，可以用CSS来实现。具体哪些修饰部分使用背景图片，哪些修饰部分使用CSS制作，将在后面详细介绍。切好图后，将切片导出保存为html格式即可。

3.3制作站点的首页头部

效果图切图完成后，就可以开始制作页面了。现在整个页面分成几个部分进行制作，下面分解进行讲解。

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，表示所有图片没有边框。

3.3.2首页头部的分析

首先还是对头部的效果图进行分析，其目的是区分页面中内容和修饰的部分。头部的效果图如图3-4所示。

图3-4 页面头部效果图

从图12-24可以看出，头部主要分为两个部

张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...相关推荐

张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源淮安市高校教学资源共建共享平台课件.doc 1.淮安市高校教学资源共建共享平台CSS样式设计初学网页制作的人经常会觉得对 ...
HTML数字化教学资源平台,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源数字化教学资源平台网站布局课件.doc 11.3 实例1:数字化教学资源平台网站布局 11.3.1效果图的分析与切片本实 ...
html5制作学学课件,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源5_JavaScript编程_电子课件课件.ppt...
任务3 表单验证的设计 5.16 表单验证的意义与实现二.表单验证的类型及其实现 (2)必填验证表单元素中不能没有文本或只有空格文本. [实例]必填验证 1)定义必填验证的函数isFilled,对 ...
c语言课程网页设计HTML,清华大学出版社-图书详情-《网页设计与制作案例教程（HTML+CSS+Dreamweaver）》...
本教材是学习网页设计与制作的基础教程,全书精选多类流行网站作为案例进行分析讲解,重点突出了商业案例的职业氛围,使读者在领略网页制作基本知识的基础上,掌握网页实际制作的方法和技巧,包括多种形式的主页.栏 ...
android做试卷的页面,《Android UI界面设计》17移动互联网A卷试题和答案（3页）-原创力文档...
广州市蓝天技工学校质量记录期末考试试卷编号:QD-0812-22 A/0 流水号: 2018 -2019 学年度第一学期 2017级移动互联网应用技术高技专业<UI界面设计>试卷答案 ...
在网页中在线查看文档（doc、docx 、xls 、xlsx、 pdf 、swf ）
步骤一:(涉及到的工具) 在线查看使用FlexPaper软件(http://flexpaper.devaldi.com/download/) doc.docs.xls.xlsx转换dpf工具openo ...
软件测试面试题_每天一道软件测试面试题系列 (八)_描述一次测试用例设计的完整的过程怎样估计测试工作量？进行测试时产生了哪些文档或记录？
1.描述一次测试用例设计的完整的过程回答技巧: 这个问题是考验你在工作前半段是否真的针对你业务进行过测试用例设计,所以回答的时候一定要仔细,并且要从开头讲,也就是从立项会开始讲答案: ...
web前端网页设计与制作——华夏第一县HTML+CSS+JavaScript
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
css网页favicon_如何制作网站的favicon
Favicon(Favorites Icon的缩写),中文叫网页图标,一般为各网站的LOGO(如下图),从视觉上起到宣传.醒目.易于区分的效果.没有设置favicon的网站,浏览器会赋予默认的图标(比 ...

张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...

张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...相关推荐

最新文章

热门文章