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）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。（ 4）从“文本 .txt ”中将首页的相关文字粘贴到网页中。（ 5）设置一级标题、二级标题、三级标题、项目列表、编号列表。（ 6）插入图像。（ 7）在 Copyright 后插入版权符号 ?。（ 8）在电话号码之间插入半角空格。（ 9）在电子邮箱地址上建立超链接， mailto: 。（ 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正文 字体楷体大小 14px5）用浏览器打开，并修改发现的错误。四、实验制作结果实验三导航栏制作一、实验目的1掌握垂直导航条的制作方法。2掌握水平导航条的制作方法。二、实验内容制作学校样式的导航条。三、操作步骤 导航栏制作 body,div,ul,li,h1,h2,h3,h4,h5,h6margin:0px;padding:0px;#navwidth:800px;height:51px;margin:100px auto;background:url(nav_bg.jpg) repeat-x;#nav ullist-style-type:none;#nav ul lifloat:left;width:100px;height:51px;background:url(nav_01.jpg) no-repeat right center;#nav ul li adisplay:block;width:100px;height:51px;line-height:51px;text-align:center;color:#ffffff;text-decoration:none;#nav ul li a:hoverwidth:100px;height:51px;background:url(nav_03.jpg) no-repeat;学校概况 学科建设科学研究师资队伍教学管理招生就业对外交流学校首页四、实验制作结果图实验四应用背景图像一、实验目的1掌握 CSS 背景（ background）属性。2掌握设置背景图像位置的方法。3掌握使用背景图像替换文本的方法。4掌握使用背景图像制作圆角框的方法。二、实验内容1制作圆角框。2制作泡泡俱乐部首页。三、实验步骤1制作圆角框。（ 1）创建站点。（ 2）创建内部样式表。在浏览器中的效果如下：制作圆角框四、实验结果实验五浮动 (float) 页面布局一、实验目的1掌握固定宽度网页布局的方法。2深入理解浮动的概念。3掌握三列布局网页的典型逻辑结构。4熟练掌握 CSS 浮动布局的方法。二、实验内容制作一个简易的博客首页。三、实验步骤1. 整体布局与公共 CSS 定义分析页面主要分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)布局四、实验总结在浏览器中的效果如下：