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