2015年度WEB开发实验室第二次Seminar.

主讲人:Hollins

课件下载:

PPT: 网页制作入门.pptx (下载434)

PDF: 网页制作入门.pdf (下载427)

一、软件准备

0. Sublime text

【2015年度Seminar】(二)网页制作入门-Web开发实验室

Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,
完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持WindowsLinuxMac OS X等操作系统。

1. Google Chrome

【2015年度Seminar】(二)网页制作入门-Web开发实验室

Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。软件的名称是来自于称作Chrome的网络浏览器图形使用者界面(GUI)。软件的beta测试版本在2008年9月2日发布,提供50种语言版本,有Windows、OS X、Linux、Android、以及iOS版本提供下载。

二、HTML知识补充

0. DOCTYPE

DOCTYPE 是 document type(文档类型)的简写,用来说明你用的 XHTML 或者 HTML 是什 么版本。

DOCTYPE 声明必须放在每一个 HTML 文档最顶部,在所有代码和标识之上。

HTML5版本写法: <!DOCTYPE html>

1. 语言编码

为了被浏览器正确解释和通过 W3C 代码校验,所有的 HTML 文档都必须声明它们所使用的编码语言,我们一般使用: UTF-8

具体写法如下:

【2015年度Seminar】(二)网页制作入门-Web开发实验室

2. Head区域的其他设置

 2.1 收藏夹小图标

如果你将一个网站加入收藏夹,可以看到在收藏夹网址之前的图标是一个站点特有的图标。要实现这样效果很简单,首先制作 一个 16x16 的 icon 图标,命名为 favicon.ico,放在根目录下。然后将

下面的代码嵌入 head 区:【2015年度Seminar】(二)网页制作入门-Web开发实验室

2.2  搜索引擎优化(SEO)

Search Engine Optimization

【2015年度Seminar】(二)网页制作入门-Web开发实验室

3. 基本规范

  • 所有的标签都必须要有一个相应的结束标签
  • 所有标签的元素和属性的名字都必须使用小写
  • 所有的 HTML 标签都必须合理嵌套
  • 所有的属性必须用引号""括起来
  • 把所有<和&特殊符号用编码表示

3.1 HTML符号实体

页面效果 描述 代码
© 版权符号 &copy;
小于号或者尖括弧 &lt;
大于号或者尖括弧 &gt;
& &amp;
双引号 &quot;
空格 &nbsp;

参见http://www.w3school.com.cn/tags/html_ref_entities.html

4. 引入外部资源

  • 引入外部样式表(CSS)
  • 引入外部JS代码
    【2015年度Seminar】(二)网页制作入门-Web开发实验室

三、 CSS入门

0. CSS出现之前

  • 在没有CSS的日子里,页面内容和页面样式是混杂在一起的,维护非常困难
  • 许多标签一度行使着CSS的功能,如:<font>,<center>

1. 不同类型的样式表

  • 内联样式
<p style="color: red;">Hello</p>
  • 内部样式表

 

<style type=“text/css”>
    p.warn{ color:yellow;}
</style>
  • 外部样式表
<link rel=“stylesheet” type=“text/css” href=“a.css” />
  • 为什么会有这么多类型的样式?

1. 优先级。css本身就是一个层叠样式表,既然是层级,那么自然也就会叠加,后代属性会把前代属性给覆盖,所以我们看见的都是后代属性,就好比堆书本一样,我们俯视看见都是最上面的书本。

优先级:内联样式>内部样式表>外部样式表

2. 便于管理。你做一个单页面,但是这个单页面和各个栏目的相关代码是没有任何关系的,那你还想要单独给他做一个link导入样式么?显然没有必要,那么这个时候嵌入样式style更加能充

分发挥它的优势所在。

2. 基本语法规范

  • 分析一个典型 CSS 的语句:p {color:#FF0000;font-size: 16px;};
  • 其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
  • 样式声明写在一对大括号"{}"中;
  • color 和 background 称为"属性"(property),不同属性之间用分号";"分隔;
  • #FF0000称为”属性值(value)”

3. 选择器

  • 群选择器

当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔:   p, td, li { font-size : 12px ; }

  • 后代元素选择器

可以使用后代选择器给一个元素里的子元素定义样式,例如这样:  p span {font-style : italic;}

就是给 p下面的后代元素 span 定义一个斜体的样式。

  • 子代元素选择器

可以使用子代选择器给一个元素里的下一层子元素定义样式,例如这样:div>p {text-decoration: underline;}

就是给 div下面的子元素p定义一个下划线的样式

  • 类别选择器(class)

在CSS里用一个点开头表示类别选择器定义,例如:.ruc {background: #AE0C2A;}

在页面中,用 class="类别名"的方法调用:  

<div class=“ruc”>university</span>

这个方法比较简单灵活,可以随时根据页面需要新建和删除。

  • id选择器

在CSS里用一个#开头表示id选择器定义,例如:#jj {font-weight:bold;}

在页面中,用 id=“id名"的方法调用:<div id=“jj”>I’m JJ</span>

注意:尽量减少在css使用id选择器   亲自试一试

  • 伪类选择器

CSS 中用四个伪类来定义链接的样式,分别是    a:link、a:visited、a:hover 和 a:active,代表未访问、已访问、悬浮和活动链接

  • 更多选择器

请参考W3C CSS选择器参考手册

4. 颜色

  • 颜色值可以用RGB值写,例如:  color : rgb(255,0,0);

也可以用十六进制写,就象上面例子。如果十六进 制值是成对重复的可以简写,效果一样。例如:#FF0FF0可以写成#FF0。但如果不重复就不可以简写,例如#ACEE02 必须写满 六位。

5. 字体

  • web 标准推荐如下字体定义方法: body{font-family:“Lucida Grande”, Verdana, Lucida,Arial, Helvetica,”Microsoft YaHei”, sans-serif; }
  • 字体按照所列出的顺序选用。如果用户的计算机含有 Lucida Grande 字体,文档将被指定为 Lucida Grande。没有 的话,就被指定为 Verdana 字体,如果也没有 Verdana,就指定为 Lucida 字体,依此类推
  • Lucida Grande 字体适合 Mac OS X;
  • Verdana 字体适合所有的 Windows 系统;
  • Lucida 适合 UNIX 用户
  • 宋体适合中文简体用户;
  • 如果所列出的字体都不能用,则默认的 sans-serif 字体能保证调用;

6. 盒模型

  • 分析一个典型的定义 div 例子:

【2015年度Seminar】(二)网页制作入门-Web开发实验室

 

  • width是定义层的宽度,可以采用固定值,例如 500px,也可以采用百分比。要注意的是:这个宽度仅仅指你内容的宽度,不包含 margin,border 和 padding。但在有些浏览器中不是这么定义的,需要你多试试。
  • height与之类似
  • margin 是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上 右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"margin: 10px;"。如果边距为零,要写成"margin: 0px;"。
  • padding是指层的边框到层的内容之间的空白。和margin一样,分别指定上右下左边框到内容的距离。如果都一样,可以缩写成"padding:0px"。单独指定左边可以写成"padding-left: 0px;"
  • border是指层的边框,"border-right: #ccc 2px solid;"是定义层的右边框颜色为"#ccc",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"。
  • border是指层的边框,"border-right: #ccc 2px solid;"是定义层的右边框颜色为"#ccc",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"。

7. 元素定位

  • absolute  生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。亲自试一试
  • fixed   生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。亲自试一试
  • relative   生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20px" 会向元素的 left 位置添加 20 像素。亲自试一试
  • static   默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。亲自试一试
  • inherit    规定应该从父元素继承 position 属性的值。亲自试一试
  • 在默认情况下,块级元素是占据一整行的,但有的时候需要只占据半行,这个时候就需要让元素浮动起来。亲自试一试

8. 实例

  • 把一张图片变成神奇的网页

【2015年度Seminar】(二)网页制作入门-Web开发实验室

9. 代码校验

  • 辛苦了好多天,我们努力学习使用div+CSS 来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合 web 标准?http://validator.w3.org/
  • No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义 DOCTYPE。
  • No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
  • end tag for "img" omitted, but OMITTAG NO was specified--图片标签没有加"/"关闭。
  • an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--
  • 属性值必须加引号。
  • element "DIV" undefined---DIV 标签不能用大写,要改成小写 div。
  • required attribute "alt" not specified---图片需要加 alt 属性。

10. CSS的缺点

  • 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。
  • 于是有了Sass和LESS

【2015年度Seminar】(二)网页制作入门-Web开发实验室

四、Bootstrap简介

0. 简介

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目。

1. 下载Bootstrap

Bootstrap下载页:http://getbootstrap.com/getting-started/#download

【2015年度Seminar】(二)网页制作入门-Web开发实验室

 

 

 

 

 

2. 栅格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
  • 栅格系统用于通过一系列的行与列的组合来创建页面布局,你的内容就可以放入这些创建好的布局中
  • 实例

【2015年度Seminar】(二)网页制作入门-Web开发实验室

3. 按钮

  • 为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-link

【2015年度Seminar】(二)网页制作入门-Web开发实验室

 

 

 

 

4. 表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

【2015年度Seminar】(二)网页制作入门-Web开发实验室

5. 其他

  • 表格
  • 代码
  • 图片

阅读书目

  • 《CSS权威指南》
  • 《Head First HTML and CSS 2nd Edition》
  • 《Head First HTML5》
  • 《Bootstrap用户手册》

参考网站