web网页设计和制作实习报告.docVIP

 网页设计与制作 实验报告 学生姓名 班级 学号 指导教师 文 志 华 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: 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 style type=text/css 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: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; } /style /head body div id=nav ul lia href=#学校概况/a/li lia href=#学科建设/a/li lia href=#科学研究/a/li lia href=#师资队伍/a/li lia href=#教学管理/a/li lia href=#招生就业/a/li lia href=#对外交流/a/li lia href=#学校首页/a/li /ul /div /body /html 四、实验制作结果图 实验四应用背景图像 一、实验目的 1．掌握CSS背景（background）属性。 2．掌握设置背景图像位置的方法。 3．掌握使用背景图像替换文本的方法。 4．掌握使用背景图像制作圆角框的方法。 二、实验内容 1．制作圆角框。 2．制作泡泡俱乐部首页。 三、实验步骤 1．制作圆角框。 （1）创建站点。 （2）创建内部样式表。