网页设计与制作论文.docx
《网页设计与制作论文.docx》由会员分享，可在线阅读，更多相关《网页设计与制作论文.docx（11页珍藏版）》请在冰豆网上搜索。
网页设计与制作论文
网页设计与制作
前言
进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。
作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程，经过几个月的集中学习，我开始对网页的设计和制作有了初步的认识，并且学习了一些网页制作基础。
网页分为静态网页和动态网页两种。
静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。
静态页面不能自主管理发布更新的页常见的静态页面以.html、.htm为扩展名的。
动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。
所以我将以四部分阐述我对网页设计与制作的理解。
首先是基于静态网页的html超文本标记语言和css层叠样式表，然后是基于动态网页的设计语言JavaScript。
最后是我对JavaScript与cookie的应用知识。
HTML
1.HTML标签
HTML文档和HTML元素是通过HTML标签进行标记的
HTML标签由开始标签和结束标签组成
开始标签是被括号包围的元素名
结束标签是被括号包围的斜杠和元素名
某些HTML元素没有结束标签，比如
2.HTML元素
HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。
HTML元素以开始标签起始
HTML元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（emptycontent）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数HTML元素可拥有属性
3.HTML属性
HTML标签可以拥有属性。
属性提供了有关HTML元素的更多的信息。
属性总是以名称/值对的形式出现，比如：
name="value"。
属性总是在HTML元素的开始标签中规定。
4.HTML段落
段落是通过
标题定义的。
使用空的段落标记去插入一个空行是个坏习惯。
用标签代替它！
（但是不要用标签去创建列表。
不要着急，您将在稍后的篇幅学习到HTML列表。
）
5.HTML样式
style属性的作用：
提供了一种改变所有HTML元素的样式的通用方法。
样式是HTML4引入的，它是一种新的首选的改变HTML元素样式的方式。
通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义。
6.HTML链接
HTML使用（锚）标签来创建连接另一个文档的链接。
锚可以指向网络上的任何资源：
一张HTML页面，一幅图像，一个声音或视频文件等等。
7.HTML表格
表格由
每个表格均有若干行（由
字母td指表格数据（tabledata），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
8.HTML列表
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于
每个列表项始于
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于
9.HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：
文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（
10.HTML框架
框架结构标签（
每个frameset定义了一系列行或列
rows/columns的值规定了每行或每列占据屏幕的面积
Css
1．Css基础语法
CSS语法由三部分构成：
选择器、属性和值：
selector{property:
value}
选择器（selector）通常是你希望定义的HTML元素或标签，属性（property）是你希望改变的属性，并且每个属性都有一个值。
属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
body{color:
blue}
上面这行代码的作用是将body元素内的文字颜色定义为蓝色。
在上述例子中，body是选择器，而包括在花括号内的的部分是声明。
声明依次由两部分构成：
属性和值，color为属性，blue为值。
2．派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器（contextualselectors），这是由于它们依赖于上下文关系来应用或者避免某项规则。
在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。
3．Id和类选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
id选择器以"#"来定义。
下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red{color:
red;}
#green{color:
green;}
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。
#sidebarp{
font-style:
italic;
text-align:
right;
margin-top:
0.5em;
}
#sidebarh2{
font-size:
1em;
font-weight:
normal;
margin:
0;
line-height:
1.5;
4．Css框架型结构
CSS框模型（BoxModel）规定了元素框处理元素内容、内边距、边框和外边距的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距呈现了元素的背景。
内边距的边缘是边框。
边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。
但是，许多元素将由用户代理样式表设置外边距和内边距。
可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。
这可以分别进行，也可以使用通用选择器对所有元素进行设置：
在CSS中，width和height指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有10个像素的外边距和5个像素的内边距。
如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素
Javascript
1．JavaScript介绍
JavaScript是属于网络的脚本语言！
JavaScript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript是因特网上最流行的脚本语言。
在数百万张页面中，JavaScript被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。
JavaScript是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说InternetExplorer、Mozilla、Firefox、Netscape、和Opera。
2．HTML包含JavaScript的方法
HTML的就可以告诉浏览器JavaScript从何处开始，到何处结束。
3．JavaScript语句，注释与变量
JavaScript语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
这个JavaScript语句告诉浏览器向网页输出"Helloworld"：
document.write（"Helloworld"）;
JavaScript注释
可以添加注释来对JavaScript进行解释，或者提高其可读性。
单行的注释以//开始。
JavaScript变量
正如代数一样，JavaScript变量用于保存值或表达式。
可以给变量起一个简短名称，比如x，或者更有描述性的名称，比如length。
JavaScript变量也可以保存文本值，比如carname="Volvo"。
4．运算符和控制语句
运算符=用于赋值。
运算符+用于加值。
算术运算符
运算符
描述
例子
结果
+
加
x=y+2
x=7
-
减
x=y-2
x=3
*
乘
x=y*2
x=10
/
除
x=y/2
x=2.5
%
求余数（保留整数）
x=y%2
x=1
++
累加
x=++y
x=6
--
递减
x=--y
x=4
赋值运算符
等价于
=
x=y
x=5
+=
x+=y
x=x+y
x=15
-=
x-=y
x=x-y
*=
x*=y
x=x*y
x=50
/=
x/=y
x=x/y
x=2
%=
x%=y
x=x%y
x=0
条件语句
在您编写代码时，经常需要根据不同的条件完成不同的行为。
可以在代码中使用条件语句来完成这个任务。
在JavaScript中，我们可以使用下面几种条件语句：
if语句
在一个指定的条件成立时执行代码。
if...else语句
在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if...elseif....else语句
使用这个语句可以选择执行若干块代码中的一个。
switch语句
JavaScript循环
在编写代码时，你常常希望反复执行同一段代码。
我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。
JavaScript有两种不同种类的循环：
for
将一段代码循环执行指定的次数
while
当指定的条件为true时循环执行代码
5．消息框
可以在JavaScript中创建三种消息框：
警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为true。
如果用户点击取消，那么返回值为false。
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。
如果用户点击取消，那么返回值为null。
6．函数的定义与应用
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
将脚本编写为函数，就可以避免页面载入时执行该脚本。
函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。
你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js文件，那么甚至可以从其他的页面中调用）。
函数在页面起始位置定义，即
7．HTML事件处理
JavaScript使我们有能力创建动态页面。
事件是可以被JavaScript侦测到的行为。
网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。
比方说，我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。
事件在HTML页面中定义。
onload和onUnload
当用户进入或离开页面时就会触发onload和onUnload事件。
onload事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onload和onUnload事件也常被用来处理用户进入或离开页面时所建立的cookies。
例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。
姓名会保存在cookie中。
当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：
"WelcomeJohnDoe!
"。
onFocus,onBlur和onChange
onFocus、onBlur和onChange事件通常相互配合用来验证表单。
下面是一个使用onChange事件的例子。
用户一旦改变了域的内容，checkEmail（）函数就会被调用。
onSubmit
onSubmit用于在提交表单之前验证所有的表单域。
下面是一个使用onSubmit事件的例子。
当用户单击表单中的确认按钮时，checkForm（）函数就会被调用。
假若域的值无效，此次提交就会被取消。
checkForm（）函数的返回值是true或者false。
如果返回值为true，则提交表单，反之取消提交。
onMouseOver和onMouseOut
onMouseOver和onMouseOut用来创建“动态的”按钮。
Javasript与cookie的应用
1.Cookie简介
cookie是存储于访问者的计算机中的变量。
每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。
你可以使用JavaScript来创建和取回cookie的值。
有关cookie的例子：
名字cookie
当访问者首次访问页面时，他或她也许会填写他/她们的名字。
名字会存储于cookie中。
当访问者再次访问网站时，他们会收到类似"WelcomeJohnDoe!
"的欢迎词。
而名字则是从cookie中取回的。
密码cookie
当访问者首次访问页面时，他或她也许会填写他/她们的密码。
密码也可被存储于cookie中。
当他们再次访问网站时，密码就会从cookie中取回。
日期cookie
当访问者首次访问你的网站时，当前的日期可存储于cookie中。
当他们再次访问网站时，他们会收到类似这样的一条消息：
"YourlastvisitwasonTuesdayAugust11,2005!
日期也是从cookie中取回的。
2.创建和存储cookie
我们要创建一个存储访问者名字的cookie。
当访问者首次访问网站时，他们会被要求填写姓名。
当访问者再次访问网站时，他们就会收到欢迎词。
functionsetCookie（c_name,value,expiredays）
{
varexdate=newDate（）
exdate.setDate（exdate.getDate（）+expiredays）
document.cookie=c_name+"="+escape（value）+
（（expiredays==null）?
"":
";expires="+exdate.toGMTString（））
在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将cookie名称、值及其过期日期存入document.cookie对象。
之后，我们要创建另一个函数来检查是否已设置cookie：
functiongetCookie（c_name）
if（document.cookie.length>0）
c_start=document.cookie.indexOf（c_name+"="）
if（c_start!
=-1）
c_start=c_start+c_name.length+1
c_end=document.cookie.indexOf（";",c_start）
if（c_end==-1）c_end=document.cookie.length
returnunescape（document.cookie.substring（c_start,c_end））
return""
上面的函数首先会检查document.cookie对象中是否存有cookie。
假如document.cookie对象存有某些cookie，那么会继续检查我们指定的cookie是否已储存。
如果找到了我们要的cookie，就返回值，否则返回空字符串。
最后，我们要创建一个函数，这个函数的作用是：
如果cookie已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。
functioncheckCookie（）
username=getCookie（'username'）
if（username!
=null&&username!
=""）
{alert（'Welcomeagain'+username+'!
'）}
else
username=prompt（'Pleaseenteryourname:
',""）
setCookie（'username',username,365）
学院理工学院（电气信息类）
班级电子115班
学号110751156
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1