《网站设计与制作》文档格式.docx
《《网站设计与制作》文档格式.docx》由会员分享，可在线阅读，更多相关《《网站设计与制作》文档格式.docx（18页珍藏版）》请在冰豆网上搜索。
charset=utf-8"
title>
ThinkPadSL系列笔记本电脑<
/title>
/head>
2，页面主题基本设置，我的代码为：
bodybgcolor="
#5555555"
background="
images/blank.gif"
text="
#666666"
link="
#0000CC"
alink="
#0066CC"
vlink="
#006666"
topmargin="
100"
leftmargin="
>
3，页面主体内容编写：
（1），文本材料标题头编写，关键代码如下：
imgsrc="
images/top1.jpg"
align="
left"
alt="
公司Logo"
width="
200"
height="
65"
h1align="
ThinkPadSL系列笔记本介绍<
/h1>
br>
p>
hralign="
center"
1200"
size="
3"
color="
#999999"
/>
（2），编写文字材料的内容格式。
（由于都是对四段文字进行设置段落、字体、换行、斜体等，就不写代码了）
（3），编写页面页脚，代码如下：
2"
divalign="
>
fontsize="
#6666666"
face="
楷体"
版权所有：
同创科技有限公司|2011-2020|苏ICP备017513<
/font>
/div>
实验3：
HTML列表和表格标签的应用
1，设计列表页面
（1），页面基本信息编写，代码如下：
同创科技有限公司企业文化<
bodybackground="
#333333"
同创科技有限公司企业文化<
1250"
4"
（2），插入无序列表，部分关键代码：
ultype="
square"
li>
承诺——大声说出自己的责任，主动展现自己的最大价值<
/li>
（3），插入有序列表，部分关键代码：
oltype="
i"
不贪婪、不取巧<
（4），插入定义列表。
代码略>
（5），插入嵌套列表。
2,用表格表达数据内容，部分举例代码如下：
tr>
<
throwspan="
valign="
middle"
bgcolor="
#EFEBEF"
scope="
row"
软件开发<
/th>
tdalign="
软件外包项目<
/td>
是<
￥325.0<
/tr>
3应用表格局面：
（1），页面基本信息编写。
（2），插入布局表格：
tablewidth="
border="
0"
（3），布局公司logo和网页主题：
tdwidth="
240"
210"
92"
850"
bottom"
h1>
同创科技有限公司热门产品展示<
tdcolspan="
hrsize="
td>
（4），布局产品列表。
（5），布局产品详情：
部分代码
tdvalign="
top"
835"
333"
169"
222"
images/ceLEEnBQi28w.jpg"
111"
82"
523"
strong>
联想ThinkPadE40（0578MDC）<
/strong>
br/>
所属：
联想ThinkPadE40系列屏幕尺寸：
14英寸16:
9处理器型：
Intel酷睿i3380M处理器主：
2.53GHz内存容量：
2GBDDR31066MHz硬盘容量：
320GB5400转，SATA显卡芯片：
ATIMobilityRadeonHD操作系统：
Windows7<
/p>
129"
￥45602011-03-07<
（6），布局页脚版权信息。
tdheight="
50"
&
nbsp;
images/bottom.gif"
943"
70"
实验4：
HTML框架网页与超级链接应用
1，应用嵌套框架布局网页
（1），新建网页。
（2），水平分割三行框架。
（3），嵌套垂直分割窗口，代码如下：
主框架<
framesetrows="
22%,60%,20%"
frameborder="
yes"
5"
framespacing="
bordercolor="
#F5F5F5"
noresize>
framesrc="
top.html"
name="
topFrame"
scrolling="
No"
noresize="
noresize"
id="
title="
framesetcols="
200,900"
left.html"
leftFrame"
marginheight="
20"
marginwidth="
middle.html"
middleFrame"
auto"
/frameset>
bottom.html"
bottomFrame"
noframes>
2，浮动窗体的应用
（1），打开页面文件。
（2），建立浮动窗口。
3，超级链接：
（部分代码）
781"
779"
thwidth="
138"
#8CA6BD"
col"
ahref="
#1"
联想系列笔记本<
/a>
204"
#2"
惠普系列笔记本<
203"
#3"
戴尔系列笔记本<
218"
#4"
华硕系列笔记本<
em>
aname="
1"
lenovo<
/em>
hr/>
images/lenovo1.jpg"
75"
联想Z460A-ITH（酷黑）<
联想Z460系列上市时间:
2010上半年处理器:
IntelCorei3-350M（2.26GHz）内存容量:
2GB硬盘容量:
320GB屏幕尺寸:
14英寸<
fontcolor="
#FF0000"
￥3900
images/lenovo2.jpg"
right"
联想Y460N-IFI<
联想Y460系列上市时间:
2010下半年处理器:
IntelCorei5-460M（2.53GHz）内存容量:
500GB屏幕尺寸:
14英寸全部参数网友推荐度：
68%2983网友投票<
1104"
images/top.jpg"
1100"
132"
usemap="
#Map"
四、实验结论（讨论）：
实验二
DIV、CSS的使用
2011年10月实验地点:
1、学会DIV和CSS的操作使用方法。
2、掌握用DIV、CSS创建页面布局。
3、掌握使用DIV、CSS创建基于模板的网页。
实验要求：
完成实验指导书中实验6、实验7的内容
3、删除数据库MYDB。
三、实验内容及步骤：
实验6：
使用DIV、CSS创建页面布局
本实验的关键代码都是div和css标签，代码如下：
/*CSSDocument*/
*{
margin:
0px;
border:
padding:
}
body{
font-size:
12px;
color:
#787878;
span{
margin-right:
20px;
#box{
width:
980px;
height:
698px;
0auto;
#top-right{
background-image:
url（../EX6/top2.gif）;
background-repeat:
no-repeat;
768px;
92px;
float:
left;
#
#right{
470px;
300px;
#left-login{
url（../EX6/left1.jpg）;
118px;
#txtid{
position:
absolute;
top:
33px;
left:
39px;
16px;
86px;
border-bottom:
1px#cccccc;
#txtpass{
56px;
#CCCCCC;
#right_newstop{
url（../EX6/right1.jpg）;
31px;
#right_newscontent{
url（../EX6/right2.jpg）;
195px;
#right_newsbottom{
url（../EX6/right3.jpg）;
37px;
#bottom{
180px;
实验7：
使用DIV、CSS创建基于模板的网页
1，CSS.CSS
*{
margin:
border:
padding:
font-size:
color:
2，DIV.CSS（部分，由于太多了）
padding-left:
18px;
.txtsearch{
background-color:
#CCC;
100px;
#top_logo{
url（../images/top1.gif）;
202px;
95px;
#main{
width:
height:
660px;
clear:
both;
#right_productpic02{
61px;
#right_productpic03{
59px;
3.subdiv.css（部分，由于太多了）
#submain{
605px;
780px;
#submain_topleft{
url（../images/sub/submain_topleft.gif）;
66px;
#submain_bottom{
clear:
#submain_bottomleft{
url（../images/sub/submain_bottomleft.gif）;
实验三
JavaScript的使用
1、掌握JavaScript的基本语法。
2、掌握使用JavaScript制作菜单的方法。
3、掌握使用JavaScript完成注册功能的方法。
完成实验指导书中实验8和实验9的内容。
实验8：
使用DHTML、JavaScript制作菜单
1，源代码（部分）：
菜单演示<
linkhref="
style/css.css"
rel="
stylesheet"
type="
text/css"
style/div.css"
style/subdiv.css"
styletype="
#menu{
line-height:
23px;
list-style-type:
none;
margin:
10px20px20px20px;
font-size:
10px;
font-weight:
bold;
}
#menua{
display:
block;
80px;
text-align:
center;
#FFF;
}
#menua:
link{
text-decoration:
none;
divid="
main"
left_login"
inputname="
txtid"
text"
class="
txtsearch"
txtpass"
password"
left_product01"
images/left2.jpg"
191"
58"
left_product02"
images/left3.jpg"
60"
left_product03"
message_list.asp"
images/left4.jpg"
45"
2，css，css：
3，div．css：
（部分）：
#top-menu{
940px;
margin-top:
10px;
text-align:
right;
font-weight:
bold;
14px;
url（../images/top1.jpg）;
#top_right{
url（../images/menu_bg.jpg）;
48px;
relative;
30px
}
4，sundiv.css:
36px;
#submain_topcenter{
url（../images/sub/subma
升级会员 