web网页设计与制作实习报告Word文件下载.docx
《web网页设计与制作实习报告Word文件下载.docx》由会员分享，可在线阅读，更多相关《web网页设计与制作实习报告Word文件下载.docx（10页珍藏版）》请在冰点文库上搜索。
三、操作步骤
1．创建“潜水俱乐部”站点
（1）在D盘新建文件夹，命名为shiyan1；
（2）将images文件夹和gallery文件夹复制到中shiyan1中；
（3）启动Dreamweaver，使用“站点｜新建站点”命令创建站点。
2．制作“俱乐部首页”。
（1）新建网页。
（2）使用“文件｜保存”命令保存网页，命名为index.html。
（3）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。
（4）从“文本.txt”中将首页的相关文字粘贴到网页中。
（5）设置一级标题、二级标题、三级标题、项目列表、编号列表。
（6）插入图像。
（7）在Copyright后插入版权符号©
。
（8）在电话号码之间插入半角空格。
（9）在电子邮箱地址上建立超链接，mailto:
vip@BubbleU。
（10）选中网页内容，然后单击“插入Div标签”按钮，分别插入header、navigation、mainContent、footer共4个Div。
（11）保存网页，按F12，预览网页。
四.实验结果
实验二XHTML语言
1．掌握XHTML语法。
2．掌握XHTML标记及属性。
3．掌握XHTML标记校验的方法。
二、实验内容
制作“学校主页-新闻中心-学校新闻-校领导赴包装设计艺术学院调研”的网页
校领导赴包装设计艺术学院调研
浏览：
2827次日期：
2015-03-21
1）创建站点
（1）在D盘新建文件夹，命名为shiyan2；
（2）将“文本.txt”和images文件夹复制到中shiyan2中；
2）用记事本打开“文本.txt”。
3）选择“文件|另存为”命令，将文件另存为shiyan2.html。
4）在网页中添加XHTML标记和属性。
实验标题字体黑体蓝色40px
日期字体宋体灰色大小12px正文字体楷体大小14px
5）用浏览器打开，并修改发现的错误。
四、实验制作结果
实验三导航栏制作
1．掌握垂直导航条的制作方法。
2．掌握水平导航条的制作方法。
制作学校样式的导航条。
<
title>
导航栏制作<
/title>
styletype="
text/css"
>
body,div,ul,li,h1,h2,h3,h4,h5,h6{
margin:
0px;
padding:
}
#nav{
width:
800px;
height:
51px;
100pxauto;
background:
url（nav_bg.jpg）repeat-x;
#navul{
list-style-type:
none;
#navulli{
float:
left;
100px;
url（nav_01.jpg）no-repeatrightcenter;
#navullia{
display:
block;
line-height:
text-align:
center;
color:
#ffffff;
text-decoration:
#navullia:
hover{
url（nav_03.jpg）no-repeat;
/style>
/head>
body>
divid="
nav"
<
ul>
li>
ahref="
#"
学校概况<
/a>
/li>
学科建设<
科学研究<
师资队伍<
教学管理<
招生就业<
对外交流<
学校首页<
/ul>
/div>
/body>
/html>
四、实验制作结果图
实验四应用背景图像
1．掌握CSS背景（background）属性。
2．掌握设置背景图像位置的方法。
3．掌握使用背景图像替换文本的方法。
4．掌握使用背景图像制作圆角框的方法。
1．制作圆角框。
2．制作泡泡俱乐部首页。
三、实验步骤
（1）创建站点。
（2）创建内部样式表。
在浏览器中的效果如下：
制作圆角框
四、实验结果
实验五浮动（float）页面布局
1．掌握固定宽度网页布局的方法。
2．深入理解浮动的概念。
3．掌握三列布局网页的典型逻辑结构。
4．熟练掌握CSS浮动布局的方法。
制作一个简易的博客首页。
1.整体布局与公共CSS定义
分析页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，
2.布局Logo栏
首先我们需要把页面上的logo给切割出来，其大小为173*46,名字为：
logo.gif
一般网站都会做到点击logo，就会回到主页，应该怎么做呢，大家首先会想到，给图片加上链接就可以了，代码一般会这么写
id="
logoLink"
imgsrc="
/>
不过KwooJan要介绍另外一种方法，将图片做成链接a的背景，同样可以达到上面说的效果，并且HTML代码就会更精简，少了<
img...>
，看看下面Logo栏的页面代码，红色的为将logo.gif作为背景的链接
3.布局导航栏Nav
4.Banner布局
第一种：
将图片作为<
Banner"
背景
第二种：
直接将图片插入<
之间，代码：
"
5.内容Content板块布局
从图片上我们看到，内容板块分为左右两个区域，左边ContentL宽度是600px，右边ContentR宽度是300px，但是由于我们要将内边距设置成15px（这样才会好看），所以ContentL的宽度在CSS中就要设置成600-15*2=570px,而右侧的ContentR则需要设置成300-15*2=270px；
6.Footer布局内容左侧板块（ContentL）布局
7.内容右侧板块（ContentR）布局
四、实验总结
升级会员 