网页制作

 一、网页制作流程

1、项目讨论

2、网站定位，激发灵魂

3、网站规划

4、设计网页

5、客户反馈

6、重新设计

7、客户确人

8、制作网页

二、类：是指定义一个class，可以多个对象引用；标签：指对默认的html标签进行重新定义，如可以定义body{margin:0}，意思是 将body的外边距设置为0，h2{color:#f00}是将所有h2标签的文字颜色设置为红色；高级它把ID和伪类放到一块了，是一个设置不合理的地方，在cs4版本中已经分开了。ID是以#开始，id只能作用于一个对象，不能作用于多个对象，优先级高于class，这是id和class的区别。

三、css属性

 

 

四、块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值。

五、JavaScript的概念

实现客户端表单验证

实现页面交互特效

六、JavaScript的特点

JavaScript被设计用来向HTML页面添加交互行为

JavaScript是一种因特网上最流行的脚本语言

JavaScript一般用于编写客户端脚本

JavaScript是一种解释性语言

七、JavaScript的基础

变量的声明及使用

数据类型

运算符

逻辑控制语句

注释

语法规则

八、JavaScript代码编写注意问题

区分大小写

注意变量、函数等命名规范

每行代码以分号结束

第一个问题：html布局可以用table，也可以用div，那么有了table为啥还要用div

div，你可以理解为一个方形的盒子，table你可以理解为表格式的盒子。
div和table布局方式，是目前网页的常用布局方式。
table代码繁琐，但兼容性好。

div+css布局的优点是比较方便简洁，代码比较少，制作和维护也比较容易，不过要注意属性设置，不然有可能变形。

第二个问题：详细说一下盒模型，包括盒模型的宽度如何计算，高度如何计算

　　如果了解了盒子模型（box model）的概念，了解它是如何决定某一个元素的最终尺寸的话，会有助理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念：行内布局模型（inline layout model）——定义了行内元素是如何定位的，在行内元素格式（InlineFormatting）中有具体说明盒子的尺寸的计算（Calculating BoxDimensions）

　　在CSS2.1中，块级元素只能是矩形形状的。当计算一个块级元素的整体尺寸时，需要同时把内容区域（content area）［注释1］的长宽，连同此元素的外边距，内边距，以及边框都计算在内可以通过声明宽和高来定义一个元素的内容（content）的宽度和高度。如果没有做任何的声明，宽度和高度的默认值将是自动（auto）

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素实际宽度（盒子的高度）=上边界+上边框+上填充+内容高度+下填充+下边框+下边界。

第三个问题：绝对定位与相对定位的区别；定位与浮动的区别。

1. position属性的relative和absolute值
relative ,相对定位。对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。

绝对定位：position:absolute

首先，父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left ,top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位
绝对定位的元素相对于谁来定位，我们就把这个"谁"叫着参照物，还有一点就是：在设置偏移量的时候，我们可以设置负值。

2.浮动：float属性：left | right | none（默认）

浮动元素脱离正常流，其包含块为最近的块级祖先元素

浮动元素会生成一个块级框，元素外边距不会被合并

 浮动元素规则：

浮动元素尽量高的放置，但浮动元素的左右边界不能超过其包含块的左右内边界

浮动元素不会重叠，一个浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

浮动元素不能超过包含块的的内顶端，但是可以超过下边，若浮动元素与正常流元素冲突：

     a.与行内框冲突，其行框、背景、文字都在浮动元素之上

     b.与块框冲突，其边框和背景在浮动元素之下，而内容在之上

如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素的生成框的任何行框更高

 clear 属性: left | right | both

clear属性用来避免该元素左右出现浮动元素，根据练习发现，如果想让一个行内元素的左右没有浮动元素，必须将该元素先转化为块级元素，即将clear与display：block组合使用才能真正达到目的

第四个问题：使用CSS控制超链接，即:link,:visited,:hover,:active这种方式叫作伪类，这四种伪类有没有先后顺序，如果有的话，先后顺序是怎么样的

伪类是CSS 用于向某些选择器添加特殊的效果。

a标签中有四个：link、visited、hover、active

（1）link

说明：设置a对象在未被访问前的样式表属性。

（2）visited

说明：设置a对象在其链接地址已被访问过时的样式表属性。

（3）hover

说明：设置对象在其鼠标悬停时的样式表属性。

（4）active

说明：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序：a:link、a:visited、a:hover、a:active

解释：

• link:连接平常的状态 
• visited:连接被访问过之后 
• hover:鼠标放到连接上的时候
• active:连接被按下的时候 

第五个问题：CSS中隐藏与显示的属性有display和hidden两种，这两种隐藏与显示的区别是啥

visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
而display实际上是设置元素的浮动特征,设置none 后相当于隐藏而且不占位。
简单来说两个都隐藏一个会占据原来的元素位置留下空白，一个不会。

第六个问题：html中的标签分为块级标签与行内标签（也叫内联标签），这两种标签的区别是啥？html中哪些常用的标签是块级标签，哪些是行内标签

从概念的角度解释块级元素和行内元素

1. 块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个块元素比较特殊,他只能来容纳其他块元素

2. 行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。

块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。

而当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。

块级元素和内联元素的区别

1. 块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，

2. 一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效

（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3. 块级元素可以设置margin,padding属性

行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

行内元素列表:

<a>标签可定义锚

<abbr>表示一个缩写形式

<acronym>定义只取首字母缩写

<b>字体加粗

<bdo>可覆盖默认的文本方向

<big>大号字体加粗

<br>换行

<cite>引用进行定义

<code>定义计算机代码文本

<dfn>定义一个定义项目

<em>定义为强调的内容

<i>斜体文本效果

<img>向网页中嵌入一幅图像

<input>输入框

<kbd>定义键盘文本

<label>标签为

<input> 元素定义标注（标记）

<q>定义短的引用

<samp>定义样本文本

<select>创建单选或多选菜单

<small>呈现小号字体效果

<span>组合文档中的行内元素

<strong>语气更强的强调的内容

<sub>定义下标文本

<sup>定义上标文本

<textarea>多行的文本输入控件

<tt>打字机或者等宽的文本效果

<var>定义变量

块级元素列表:

<address>定义地址

<caption>定义表格标题

<dd>定义列表中定义条目

<div>定义文档中的分区或节

<dl>定义列表

<dt>定义列表中的项目

<fieldset>定义一个框架集

<form>创建 HTML 表单

<h1>定义最大的标题

<h2>定义副标题

<h3>定义标题

<h4>定义标题

<h5>定义标题

<h6>定义最小的标题

<hr>创建一条水平线

<legend>元素为 

<fieldset>元素定义标题

<li>标签定义列表项目

<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部

<noscript>定义在脚本未被执行时的替代内容

<ol>定义有序列表

<ul>定义无序列表

<p>标签定义段落

<pre>定义预格式化的文本

<table>标签定义 HTML 表格

<tbody>标签表格主体（正文）

<td>表格中的标准单元格

<tfoot>定义表格的页脚（脚注或表注）

<th>定义表头单元格

<thead>标签定义表格的表头

<tr>定义表格中的行

 今天的练习

第一个：

HTML代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>北大青鸟，教育改变生活</title>
  <link type="text/css" rel="stylesheet" href="css/company.css" />
 </head>
 <body>
  <div id="container">
            <div id="header"><img src="img/header.jpg" /></div>
            <div id="current"><img src="img/current.jpg" /></div>
            <div id="content"><img src="img/content.jpg" /></div>
            <div id="about"><img src="img/about.jpg" /></div>
            <div id="footer"><img src="img/footer.jpg" /></div>
        </div>
 </body>
</html>

CSS代码

body { background-color:#6f6f6f; }
#container { margin:0px auto; width:1002px; line-height:25px; background-color:#fff; }
#content { float:left; width:760px; padding-left:10px; }
#about { float:right; width:200px; padding-right:10px; }
#footer { clear:both; }

运行结果

 

第二个

HTML代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>计算</title>
  <script type="text/javascript" src="js/jisuan.js"></script>
 </head>
 <body>
 </body>
</html>

JavaScript代码

var number1=prompt("请输入第一个数字");
var op=prompt("请输入操作运算符");
var number2=prompt("请输入第二个数字：");
if(isNaN(number1)||isNaN(number2)){
 document.write("输入有误！有个数不是数字");
 
}else{
 if(op!="+"&&op!="-"&&op!="*"&&op!="/"){
 document.write("输入有误！操作运算符输入不正确。");
}else{
 document.write("运算结果："+eval(number1+op+number2));
 }
}

运行结果

今天遇到的问题

 

今天看视频如何检查js代码的错误，里面推荐用火狐浏览器，但是我的火狐浏览器安装不上firebug，我可能要换个版本的火狐浏览器了。

今天还遇到一些小问题，不过我自己搜百度，虽然解决速度很慢，但是都解决了问题。

明天继续加油！