例 2-3:
超级连接 (2_3.html)
超级连接字体颜色
这是段落 P!
(1、HTML编写的网页会由于使用机器的不同而进行不一样的显示吗?
注意分辨率
2、通过修改相关的参数你发现运行结果有什么变化?
)
实验三 Dreamweaver 初步与进阶
一、实验目的及要求
1.熟练掌握 Dreamwear 制作静态网页的基本操作
2.掌握两种布局的基本方法。
二、实验内容
1.在 Dreamweaver 中创建基于表格的页面布局。
页面布局将确定您的页面在浏览器中会
如何显示。
2.在 Dreamweaver 中创建基于层的页面布局。
要求在 Dreamweaver中使用层叠样式表
(CSS)。
三、实验过程
例3_1 div+css布局
附:
css.css
body {
margin:
0px;
padding:
0px;
}
div#header {
clear:
both;
height:
50px;
background-color:
aqua;
padding:
1px;
}
div#left {
float:
left;
width:
150px;
background-color:
red;
}
div#right {
float:
right;
width:
150px;
background-color:
green;
}
div#middle {
padding:
0px 160px 5px 160px;
margin:
0px;
background-color:
silver;
}
div#footer {
clear:
both;
background-color:
yellow;
}
说明:
HTML 代码中各部分出现的顺序是非常重要的。
左栏和右栏 div 必须在中栏之前出现。
这样才可
以让这两个边栏浮动到它们的位置上(屏幕两侧),并让中栏的内容将“流”入它们之间的空间。
如果浏览
器在一个或者两个边栏 div 之前先发现中栏,那么中栏将占据屏幕的一侧或者两侧,这样浮动的部分就会
跑到中栏的下面而不是中栏的旁边了。
div#header 和 div#footer 样式(style)中的 clear:
both 申明用来确保这浮动部分不会占据标
题和页脚的空间。
div#header 样式中的 padding:
1px 申明用来消除页头背景色中的异常边,如果
padding 设置为零,那么在 Netscape 浏览器中就会看到这个异常。
div#left 样式中的 float:
left 申明是用来把左栏挤压到左侧。
width:
150px 申明用来设置栏的固定
宽度,不过你也可以把它的宽度设置为其它具体值。
类似的,div#right 样式中的 float:
right 申明用来
把右栏 div 挤压到右侧。
在本例中,float 把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。
然而,
如果这些 div 被其它 div 包含,那么 float 将会把它们挤压到包含它们的 div 的边缘。
在 div#middle 样式中,clear 申明允许中栏的内容“流淌”在两个边栏之间。
padding:
0px 160px
5px 160px 申明设置了到左栏和右栏的填充,这样允许 150 象素宽度的栏 div,在加上 10 象素的间距。
这个例子非常粗糙和简单,但是它很好的演示了用浮动 div 来创建三栏液态布局的边栏这一基本技术
(附:
使用DIV+CSS布局网站的优点和缺陷
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用IV+CSS制作方法,奋斗网络也
成为了CSS网页布局技术学习的先锋站点,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。
如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉、比较
上手;但是,它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法——
DIV+CSS。
CSS网页布局的意义体现在如下方面:
一、使页面载入得更快
由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。
相对于表格嵌套的方式,
DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。
而不像表格嵌套那样将整个页面圈在
一个大表格里,使得加载速度很慢。
二、降低流量费用
页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率
由于使用了DIV+CSS制作方法,在修改页面的时候更加容易省时。
根据区域内容标记,到CSS里找到
相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性
DIV+CSS最重要的优势之一:
保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或
者区域与区域之间的显示效果会有偏差。
而使用DIV+CSS的制作方法,将所有页面,或所有区域统一用
CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,
便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,DIV+CSS在这方面更具优
势。
由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和
不变形。
说了这么多CSS网页布局的意义与优点,同时也不能轻视CSS网页布局的副作用:
一、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出
现问题,更不要说初学者了。
二、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞
大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。
三、虽然说DIV+CSS解决了大部分浏览器兼容问题,但是也有在部分浏览器中使用出现异常,比如火
狐浏览器,在IE中显示正常的页面,到了火狐浏览器中可能会面目全非。
当然这应该是浏览器的问题,但
是可以说在目前来看,DIV+CSS还没有实现所有浏览器的统一兼容。
四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。
DIV+CSS网页
设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索
引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局
制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。
因为
对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
综合以上讨论的DIV+CSS优势和略势,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0设
计标准,这需要很长时间的学习和锻炼。
而如何将DIV+CSS运用的更好,我觉得这需要通过不断的实践和
体检,积累丰富的设计经验,才能很好的掌握这门技术。
)
实验四 ASP 网页设计
一、实验目的及要求
1.熟悉一两种脚本语言
2.能使用ASP进行简单的网页编程,掌握几种常见的ASP的内建对象使用方法,了解
几种ASP常用外部组件的使用方法
二、实验内容
1.使用脚本语言显示一个时钟
2.做一个用户登陆的简单ASP网页
三、实验过程
4_1 一个显示时间的vbscript网页 datetime.html/datatime.asp
document.write("今天的日期是:
" & date())
document.write("
")
document.write("时间是:
" & time())
4_2 一个显示时钟的javascript网页 clock.html/clock.asp
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":
"+m+":
"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
4_3 一个带客户端认证(javascript)的用户登陆网页 login.html
--
function check (){
if (document.form.name.value=="")
{
alert("帐号不能为空");
return false;
}
if (document.form.pass.value=="")
{
alert("请填写密码");
return false;
}
}
-->
4_4 一个接受客户端信息的页面 login.asp
<%
response.write "姓名:
"&request.form("name")&"
"
response.write "密码:
"&request.form("pass")
%>
实验五 网站建设中的数据库应用
一、实验目的及要求
1、ACCESS数据库建立的方法;
2、ASP中数据库连接的方法
3、在网页中如何进行数据库查询和插入、修改等基本操作;
二、实验内容
1.建立一个数据库,其中有一个表 news(title,content,readnum,new)
其中 readnum 是数字,其他为文本格式,自动编号字段为”编号”
2.在 ASP 中进行各种操作
三、实验过程
5_1 查询并显示数据库中所有的记录,按自动编号的降序排列
<%
'单引号解释说明,大小写 vbscript 不敏感
Set ConnObj=Server.CreateObject("ADODB.Connection")
DbPath= Server.MapPath("./company.mdb")
ConnObj.Open "DRIVER={Microsoft Access Driver (*.mdb)};dbq=" & DbPath
sql="SELECT * FROM news ORDER BY 编号 DESC"
Set rsobj=Server.CreateObject("ADODB.RecordSet")
rsobj.Open sql,ConnObj
do until rsobj.EOF
for each x in rsobj.Fields
Response.Write(x.value & " ")
next
Response.Write("
")
rsobj.MoveNext
loop
rsobj.close
connobj.close
%>
5_2 删除编号为 1 的记录 dell.asp
<%
Set ConnObj=Server.CreateObject("ADODB.Connection")
DbPath= Server.MapPath("./company.mdb")
ConnObj.Open "DRIVER={Microsoft Access Driver (*.mdb)};dbq=" & DbPath
SQL="delete * From news Where 编号=1 "
ConnObj.Execute(SQL)
set connobj=nothing
' response.redirect "index.asp"
%>
5_3 按照一定格式显示某条记录的全部内容,并修改其中的一个字段 readnum
Readnum 为数字数据 newsview.asp
break-word; word-break:
break-all;" >
—英文自动换行-->
<% Set ConnObj=Server.CreateObject("ADODB.Connection")
DbPath= Server.MapPath("./company.mdb")
ConnObj.Open "DRIVER={Microsoft Access Driver (*.mdb)};dbq=" & DbPath
sql="SELECT * FROM news order by 编号 desc"
Set RSobj=Server.CreateObject("ADODB.RecordSet")
RSobj.Open sql,ConnObj
set name1=RSobj("title")
set name2=RSobj("content")
set name3=RSobj("readnum")
set name4=RSobj("编号")
set name6=RSobj("new")
response.Write"楷体
;color:
blue;'>"&name1&""
response.Write "
"&name6&"
"
response.Write"
展开阅读全文
相关搜索