网站设计实验指导书 1
实验一JSP简介
一．实验目的
通过本次实验教学，使学生了解JSP网站开发环境的搭建。
二．实验内容
安装相关软件，搭建开发环境，进行简单测试。
三．实验步骤
（1）安装JDK 7.0
（2）安装Eclipse
（3）Tomcat并进行环境配置。
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat
实验二JSP页面设计
一．实验目的
通过本次实验教学，使学生掌握JSP页面的基本结构以及运行原理，掌握Java 开发语言。
二．实验内容
编写两个JSP页面，分别为inputName.jsp和people.jsp。
三．实验步骤
（1）inputName.jsp的具体要求
该页面有一个表单，用户通过该表单输入自己的姓名并提交给people.jsp页面。
（2）people.jsp页面在程序片中获取inputName.jsp页面提交的姓名，然后调用judge()创建person对象、调用addPerson方法将用户的姓名添加到成员变量person末尾。
如果inputName.jsp页面没有提交姓名，或姓名含有的字符个数大于10，就使用
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat
实验三JSP标记
一．实验目的
掌握JSP指令标记、动作标记以及自定义标记。
二．实验内容
编写四个JSP 页面：one.jsp 、two.jsp、three.jsp和error.jsp，one.jsp 、two.jsp和three.jsp 页面都含有一个导航条，以便让用户方便地单击超链接访问这三个页面，要求这三个页面通过使用include动作标记动态加载导航条文件head.txt。
三．实验步骤
（1）在one.jsp页面输入一个1～100之间的整数，并提交给该页面；根据输入整数的不同数值跳转到不同的页面。
（2）要求two.jsp和three.jsp能输出one.jsp传递过来的值，并显示一幅图像，该图像的宽和高刚好是one.jsp页面传递过来的值。error.jsp页面能显示有关的错误信息和一幅图像。
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat
实验四内置对象
一．实验目的
掌握常用JSP内置对象使用方法。
二．实验内容
编写一个会员系统，首页home.jsp，必须是会员登陆之后才能浏览的3个页面：tupian.jsp、dianying.jsp、wenxue.jsp
三．实验步骤
home.jsp
<%@ page contentType="text/html;charset=GB2312" %>
<%
String name=request.getParameter("name");
if(name!=null)
{ if(name.length()!=0)
{session.setAttribute("guest",name);
out.println(name+"已经登陆");
}
}
%>
tupian.jsp
<%@ page contentType="text/html;charset=GB2312" %>
<%
String str=(String)session.getAttribute("guest");
if(str==null)
response.sendRedirect("home.jsp");
else
out.print("
"+str+" 已登陆
");%>
会员活动图片区
dianying.jsp
<%@ page contentType="text/html;charset=GB2312" %>
<%
String str=(String)session.getAttribute("guest");
if(str==null)
response.sendRedirect("home.jsp");
else
out.print("
"+str+" 已登陆
");%>
会员活动电影区
wenxue.jsp
<%@ page contentType="text/html;charset=GB2312" %>
<%
String str=(String)session.getAttribute("guest");
if(str==null)
response.sendRedirect("home.jsp");
else
out.print("
"+str+" 已登陆
");%>
会员活动文学区
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat
实验五JSP与JavaBean
一．实验目的
了解JavaBean生命周期，掌握JavaBean使用方法。
二．实验内容
在一个页面使用javaBean显示当前月的月历
三．实验步骤
1.编写CalendarBean.java，编译生成一个class文件
(新建一个文本文件,改扩展名为.bat文件,编辑文件内容为javac CalendarBean.java,
然后双击这个文件即可生成CalendarBean.class文件)
2.将这个class文件拷贝到WEB-INF\classes\tom\jiafei目录下（没有相应的目录就建
立相应的目录）
3.重新启动tomcat服务器，运行jsp文件，显示日历
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat
实验六在JSP中使用数据库（一）
一．实验目的
掌握怎样在JSP中使用JDBC实现数据库的连接、查询、修改等操作。
二．实验内容
(1)采用的模式是JSP+JavaBean模式，即JSP页面调用bean来完成对数据库的操作。
(2)应用程序必须首先与数据库建立连接，两种常用的连接方式建立JDBC-ODBC桥接器和加载纯Java数据库驱动程序。
三．实验步骤
（1）将mysql-5.0.22-win32.zip解压到某个目录，如E:\mysql。
（2）双击E:\mysql下的setup.exe开始安装。出现安装界面,在该界面上单击“next”。
（3）出现选择安装方式界面。我们选择的方式是Custom,因为Typical和Complete方式不允许改变安装路径,只能安装在C盘上。
（4）出现选择MySql功能以及安装路径界面。由于我们需要MySQL是一个网络数据库,即一个数据库服务器,所以选择“MySql Server”,这也是默认选择。单击该界面上的“Change”按钮,选择安装路径,我们选择的安装路径是“D:\MySQLServer5.0”。
（5）出现确认安装界面。开始安装过程,只要按界面提示进行操作即可。
（6）出现是否需要在https://www.360docs.net/doc/fc7681385.html,上注册的界面,我们选择跳过,即“Skip Sign-Up”，然后单击“Next”按钮
（7）出现确认安装结束界面。将该界面上是否配置MySql选择为否,即使用默认配置,单击“确认”按钮，完成安装过程。
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat，mysql
实验七在JSP中使用数据库（二）
一．实验目的
掌握连接数据库的常用方式：JDBC-ODBC桥接器方式和加载Java数据库驱动程序方式。
二．实验内容
建立JDBC-ODBC桥接器和加载纯Java数据库驱动程序。
三．实验步骤
(1)与一个数据库建立连接，向已连接的数据库发送SQL语句，处理SQL语句返回的结果。
(2)创建数据源
(3)编写连接数据库代码
(4)加载纯Java驱动程序，指定的数据库建立连接。
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat，mysql
实验八在JSP中使用数据库（三）
一．实验目的
1.实现数据库表的分页查询。
2.编写JSP页面，使用JavaBean实现数据库表的分页查询。
3 启动MySql监视程序
二．实验内容
使用JavaBean实现数据库表的分页查询。
三．实验步骤
1通过启动MySql监视程序,可以实现创建数据库、建表等操作。
2执行MySql安装目录的bin子目录中的mysql.exe文件,启动MySql监视程序,执行格式为：mysql –u 用户名密码
3打开MS-DOS命令行窗口,并使用MS-DOS命令进入到bin目录中,然后使用默认的root 用户登录(在安装时root用户是默认的一个用户,没有密码)。命令如下：mysql –u root 4成功登录后,MS-DOS窗口出现“mysql>”字样的登录效果
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat，mysql
实验九Java Servlet基础
一．实验目的
1理解Servlet的工作原理以及生命周期。掌握怎样编写和使用Servlet。编写和配置和Servlet有关的web.xml文件。
2理解和掌握init()、service()、doPost()和doGet()方法的使用。
3在Servlet中怎样使用session，以及怎样使用RequestDispatcher把用户对某JSP页面或servle的请求转发给另一个JSP页面或Servlet 。
4关键实践：编写JSP页面,使用Servlet处理有关数据
二．实验内容
1Servlet对象的创建与使用
2Servlet工作原理
三．实验步骤
1编写创建Servlet对象的类
2在Tomcat服务器上保存编译后的字节码、编写部署文件
3请求Tomcat服务器创建一个Servlet对象。
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat
实验十基于Servlet的MVC模式
一．实验目的
1理解MVC模式的核心思想：“视图”、“模型”和“控制器”。掌握MVC 模式在JSP中的具体体现。
2掌握在MVC模式中怎样让Servlet用构造方法创建JavaBean 。
3掌握“控制器”的重要作用。
4根据某实际问题，用MVC模式设计一个Web应用。
二．实验内容
1模型的生命周期与视图更新
2session周期的JavaBean
3application周期的JavaBean
三．实验步骤
1用CreateJavaBeanClass类的某个构造方法创建Javabean对象
2将所创建的JavaBean对象存放到HttpServletRequest对象request中，并指定查找该JavaBean的关键字
四．实验环境
PC微机，Windows 操作系统，JDK 7.0，Eclipse ，Tomcat
网页设计实验报告
实验报告 课程名称网络技术基础实验项目TCP/IP协议配置实验仪器计算机 系别 专业 班级/学号 学生姓名 实验日期 成绩 指导教师
实验一 TCP/IP协议配置 一、实验目的（标题黑体小四） 1.熟练掌握模板的用法。 2.掌握CSS的用法。 3.掌握网站发布的方法。 二、实验内容 1. 创建和使用模板。 2. css的创建和使用。 3. 发布网站。 三、实验课时 4课时 四、实验步骤 创建网站 1、创建一个站点，并创建 images 文件夹存放图片。将示例图片拷贝至images 目录下 2、创建 CSS 文件，名称为 style.css，将其保存至 style文件夹。 3、创建模板文件 tpl.dwt，并保存。结果如下： (1) 给 tpl.dwt 附加样式表 style.css。 在 tpl.dwt 的空白处点击鼠标右键，选择“附加样式表”： 选择 style.css 文件： 完成后，在 tpl.dwt 的 head标签里有如下的代码： (2) 设置模板的背景颜色。打开 CSS 面板，为 style.css 新建一条 css 规则。过程如 下：
将背景颜色设为#ff1e70： 在 style.css 生成如下的代码： body { background-color: #ff1e70? } 3) 制作布局。插入一 2 行 2 列的表格。表格的宽度=316+634=950，其他的设置：让表格居中对齐。 (4) 消除表格两边的空隙。展开 CSS 样式表，双击 body： 双击 body后，打开“body的 CSS 规则定义”对话框，按照下面的方式设置：Style.css 的代码变为： body { background-color: #ff1e70? margin: 0px? }
网页工作设计综合实验总结报告
网页设计实验报告 课程名称： 作业名称： 学生姓名： 本人学号： 专业班级： 任课老师： 本人签名：
网页设计实验报告 《网页设计》课程综合性实验报告 第 1 页
以上是网站的部分截图 二．Dreamweaver部分 Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发 工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的 2
网页设计实验报告 网页。 本博客网站利用Dreamweaver实现静态网页，运用了表格将网站页面进行整体布局，页面专业美观，色彩和谐。网页绝大部分画面都是由其完成 三．超链接部分 超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。 本网站中，导航栏，图片及部分文字部分均设置了超链接，为查找相关的知识提供了便利的条件。 四．Flash部分 Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。 网站在视频部分，插入了视频，可供来访人员欣赏，丰富了网站内容。五．CSS部分 级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。 第 3 页
《网页设计与制作教程》实验指导书
《网页设计与制作教程》 实 验 指 导 书 班级姓名学号
实验一网页基础知识 一、实验目的 理解网页组成元素。 理解主页、静态网页、动态网页等概念。 了解常见的网页布局。 熟悉Dreamweaver CS6的桌面结构。 二、实验软硬件环境 一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。 三、实验内容 1．打开“九江学院”官网，并回答以下问题： （1）该网页上有哪些网页元素组成？ （2）在网站中打开5张不同内容风格的分页面，分析下它是静态网页还是动态网页，为什么？ （3）如果分页面中有图片，把图片下载到电脑中，如何操作？ 2．查找主页为“国字型”、“三字型”、“拐角型”、“封面型”、“Flash型”布局的网站各一个，并记录下网站地址。 3．查找若干个与图1所示布局相似的网页并记录网址。 图1网页布局 4．启动Dreamweaver CS6，并完成以下操作：
（1）新建一个空白网页，并保存，存储名为myweb.html。 （2）在文档工具栏中，切换“设计”、“拆分”、“代码”、“实时视图”，理解它的功能。 （3）对“插入栏”、“属性面板”和各种组合面板进行折叠/展开，打开/关闭操作，熟悉使用。 （4）给网页输入标题栏标题：我的第一张网页。 （5）在网页中输入一首唐诗，并完成简单排版。 （6）保存网页，并用浏览器预览。 四、实验思考 1．动态网页与静态网页如何快速区分？ 2．开发个人网站的首页，可以设计哪些栏目，试做一个布局草图。
实验二常见HTML标签与简单CSS的使用 一、实验目的 理解常见HTML标签在HTML文档中的作用。 掌握通过纯文本编辑器熟练编写简单HTML的技能。 掌握简单CSS的使用。 熟练掌握各种常用标签并利用其来实现网页的排版。 二、实验软硬件环境 一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。 三、实验内容 1．案例：唐诗欣赏 第一步：使用记事本编写网页“page01.htm l”，实现如图1所示效果。 操作提示：
段落文字 图1 关于唐诗的简单网页效果 第二步：使用记事本将网页“page01.htm l”另存为“page02.htm l”并按下列要求对新网页“page02.htm l”进行编辑，效果如图2所示。 要求： ●标题文字大小用
标记。 ●作者信息文字大小为4，字体为幼圆，颜色为红色。 操作提示：文字 ●古诗文字大小为4，字体为隶书，颜色为蓝色，字体加粗。 ●在作者信息后加一条水平线，居中，水平线宽度为浏览器的50%，水平线的粗细为5像素，颜色为棕色。 操作提示：Web网页设计实验报告
WEB系统开发 综合实验报告 题目红尘客栈网上订房页面 专业计算机科学与技术（信息技术及应用） 班级计信2班 学生蒋波涛 重庆交通大学 2013年
目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (4) 五、设计过程 (7) 六、实验心得 (10) 七、实验总结 (11)
一、设计目的 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和团队配合，逐渐培养做一个完整项目的能力。 二、设计题目 《红尘客栈》 三、结构设计 选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。 然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。 我们选做的主题是个人主页，并且选定题目为“红尘客栈”，其目的是做一个简单的网站，介绍酒店概况，提供一定的资讯信息。 四、技术分析 (一)建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。 1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。 （二）网页中的图像
网页设计的实验报告心得
网页设计的实验报告心得 一实验过程 1.资料的搜集。 2.熟悉制作软件。 3.构建站点框架。 打开dremweaver后第一步便是新建站点 4设计主页及二级页面。 5实现网页间的链接 链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。 6向静太网页插入动态效果 具体情况如下： 通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。所以我结合所学专业的内容制作了个人网站，作为实习的成果。其内容是多样化的。制作网页用的软件是ｄreamweaver,banner软件。dreamweaver大大加速了网络时代电子交易应用中的项目交付。它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成html代码，
或者嵌入到现有的网页中，或者作为单独的网页出现。主图是一个网页的门面，它能体现出这个网页的整体风格。 制作网页,首先是确定主题,经过再三考虑,就做了个关于中国的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的中国介绍和相关的事迹网站,专门介绍一些即使用,又便宜的小秘笈。于是网站主题确立。 然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，中国简介，中国历史，用户登录注册页面留言，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。 再后是收集资料与素材，大量浏览相关网站，收集关于中国的一些事迹历史图片，好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。 再后是设计网页图片，用flash制作网页的banner。 再后是建立站点，站点分布如下： 再后是制作网页了，使用dreamweaver制作。 首页内容精彩丰富，简洁明快，语言风趣，通俗易懂。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标
《网页制作与设计》实验指导书
《网页制作与设计》课程实验指导书 第一部分前言 通过上机实验不仅要验证教材和讲课内容，更重要的是能通过上机实训帮助实训者深入了解网页制作与设计的方法，掌握Html语言知识。 第二部分目录 实验1 安装Dreamweaver实训 实验2 Html语言基本标记实训 实验3 用Html语言编写网页实训 实验4 认识超链接实训 实验5 创建带有多种超链接网页实训 实验6 查询并认识CSS样式实训 实验7 网页中应用CSS样式实训 实验8 查询并认识框架网页实训 实验9 框架网页实训 实验10 网站设计实训 第三部分实验内容 实验1 安装Dreamweaver实训 一、实验目的 熟悉Dreamweaver环境；该软件运行环境的配置；简单网页的编写和运行。 二、实验原理 Dreamweaver（把图像、动画、文字链接组合管理）是一个“所见即所得”的可视化网站开发工具。 三、实验条件
四、实验内容 安装Dreamweaver，并在其上运行简单的网页界面。 五、实验步骤 1、安装Dreamweaver （1）、首先双击可打开安装文件，如图1-1所示。 图1-1 准备安装界面 （2）然后等一下，就会看到出现一个图形界面，在点下一步，如图1-2所示。 图1-2 欢迎界面 （3）然后就可以看到一个图形界面，然后点同意，如图1-3所示。 图1-3 安装界面
（4）就可以看到下面的一个安装图形界面，直到有个按扭是完成，如图1-4所示。 图1-4 安装完成界面 2、运行Html页面 （1）打开Dreamweaver8，如图1-5所示。 图1-5 打开Dreamweaver8 (2) 启动后的界面，如图1-6所示。 图1-6 开启界面
简单网页制作实验总结报告
《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日
目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)
第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”，包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句，色彩缤纷，十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐，影视，购物等非常热门的东西，本站设计的主题是花，能让人们在闲下来的时候看看花，品品诗歌，所以做有关花的网页是个不错的选择。同时，让人们分清楚春夏秋冬都各有什么典型的花。
第二章网站内容设计 1.1链接1标题：春の花 春天是生命的季节，在这个季节里，万物复苏。所以就找了虞美人，桃花，牡丹，以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题：夏の花 夏天充满了激情与阳光，我找了兰花，荷花，百合花等来代表这个季节，色彩艳丽，十分醒目夺人。 1.3 链接3标题：秋の花 大丽花，菊花，月季和牡丹花都竞相出现在本网页，色彩缤纷，赏心悦目。 1.4 链接4标题：冬の花 蝴蝶兰，水仙，迎春花，梅花是冬季的代表，他们刻画了一副傲立冬天的坚强的姿态。
网页制作综合性实验报告模板
“巴黎文化之旅”简介 华南师范大学大学网页制作基础课程综合设计性实验报告 年级专业：协作小组编号： 以小组名义写报告，一个小组一份。红字部分为提醒学生修改的部分。记得删除指导教师：李桂英 学号姓名（组长排名第一） 20080000001 张三 200802010301 李四 摘要：网页是当前Intetnet的最常见应用之一，是人们获取和发布 信息的主要途径，掌握网页制作的原理和方法，对今后工作生活有很 大的帮助。本综合实验是在了解了网页设计的原则方法，掌握了Fireworks、Dreamweaver等工具处理网页中的图形图像及建立、编 辑网页页面的操作技能后，运用所学过的所有相关知识综合设计制作 一个介绍巴黎文化和风光的网站。通过设计与制作，了解和掌握了网 站的设计建立流程与网页的制作方法。 关键词：图形图像处理、表格布局、网页模板、超链接、框架、音频、 视频 一、“巴黎文化之旅”设计要求
1、绘制网站结构图，将各模块关系用简明的图示描述出来 2、网站制作时需要使用Dreamweaver建立并管理站点，并在 站点根目录下建立images等文件夹。 3、网站至少包括10个以上的网页，每个同学至少制作2个以 上的网页。 4、要求至少要使用模板技术或框架技术中的一种来搭建网站 整体架构。 5、页面美观，包含多种媒体，如文字、图片、动画（GIF或 FLASH等）音频、视频等。 6、网站制作完成后采用压缩工具将整个网页文件夹转换成压 缩文件再上传。 二、“巴黎文化之旅”设计方案 ⑴网站标题：巴黎文化之旅 ⑵网站内容简介：本网站通过图片、视频、音乐、文字等多种媒体的形式展现花都巴黎的文化和城市风光、并为旅行者提供了旅游信息和建议。 ⑶网站结构图 网站首页 (FLASH) Index.htm 内文首页default.htm
《网页设计与制作实训》指导书
《网页设计与制作实训》指导书 --以“五岳独尊泰山”为例 一、规划网站 1．策划网站主题 在着手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。本次所创建的网站是一个名山宣传类网站，主要以五岳独尊泰山为主题，包括泰山简介、泰山文化、泰山名吃、泰山地质、环境和神话传说等内容。 2．确定网站风格 确定好站点主题后，就要根据该主题选择站点的风格。由于本次所创建的网站是一个名山宣传类网站，要求结构清晰，能够展现出泰山的魅力所在。本网站的主要特点如下： （1）设计风格要大众化，为了提高浏览速度，精选图片，同时尽量减少图片的使用，更多地使用层、表格实现效果。 （2）背景颜色以灰色和白色为主，文字颜色以黑色为主、蓝色和红色为辅。 （3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为14像素。 （4）首页的版式结构采用典型的“三”字型结构，首页如图1-1所示。 图1-1 首页设计浏览效果
二级页面采用与首页统一的风格设计。 该网站名称为“五岳独尊泰山”，所有网页的标题为“五岳独尊—泰山”，个人根据所定主题确定。英文名称为“MountTai”。 3．构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。“五岳独尊泰山”的栏目结构如表1-1所示。 表1-1“五岳独尊泰山”的栏目结构 为了简化对网站的浏览过程，大部分网页通过栏目就能浏览内容页面，首页的主菜单包括9个菜单项：泰山简介、泰山文化、泰山名吃、泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。 4．规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。“五岳独尊泰山”的目录结构，各文件夹的所存放文件类型如表1-2所示。 ※注意※ 文件夹和文件的名称建议不要使用中文名，因为中文名在HTML 文档中容易生成乱码，导致链接产生错误。 表1-2网站的目录结构及其存放的文件类型
dreamweaver网页设计实验指导书
网页设计实验指导书 （一）DreamWeaver静态网页制作 第一章网站规划 ................................................................................................... - 3 -第二章Dreamweaver静态网页设计实验 ...................................................... - 8 -实验一在Dreamweaver中建立一个站点.................................................. - 8 -实验二在网页中使用文本........................................................................... - 15 -实验三超级链接的建立............................................................................... - 21 -实验四网页图像的应用............................................................................... - 29 -实验五网页表格操作 ..................................................................................... - 36 -实验六利用表格进行网页布局..................................................................... - 39 -实验七利用层进行网页布局....................................................................... - 48 -实验八行为和图层的应用............................................................................. - 53 -
网页制作实验报告
网页制作实验报告 页制作实验报告 实验一：站点设置 一、实验目的及要求 本实例是经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域，同时接入国际互联。 2、安装windows xp操作系统；建立iis服务器环境，支持asp。 3、安装页三剑客（dreamweaver mx；flash mx；fireworks mx）等页设计软件； 三、实验原理 经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 四、实验办法与步骤 1）执行“站点＼治理站点”命令，在弹出的“治理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中挑选“站点”命令。 2）在弹出的“站点定义为”对话框中单击“高级”选项卡。 3）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中挑选所创建的站点文件夹。在“默认图象文件夹”文本框中挑选存放图象的文件夹，完成后单击“确定”按钮，返回“治理站点”对话框。 4）在“治理站点”对话框中单击“完成”按钮，站点创建完毕。 五、实验结果 六、讨论与结论 实验开始之前要先建立一具根文件夹，在实验的过程中把站点存在自己建的文件夹里，如此才干使实验条理化，别至于在实验后寻别到自己的站点。在实验过程中会浮现一些选项，计算机普通会有默认的挑选，最后别要去更改，假如要更改要先充分了解清晰该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。 实验二：页面图像设置 一、实验目的及要求： 本实例的目的是设置页面的背景图像,并创建鼠标经过图像。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域，同时接入国际互联。 2、安装windows xp操作系统；建立iis服务器环境，支持asp。 3、安装页三剑客（dreamweaver mx；flash mx；fireworks mx）等页设计软件； 4、安装acdsee、photoshop等图形处理与制作软件； 5、其他一些动画与图形处理或制作软件。 三、实验原理 设置页面的背景图像,并创建鼠标经过图像。 四、实验办法与步骤 1) 在“页面属性”对话框中设置页面的背景图像。 2) 在页面文档中单击“”插入鼠标经过图像。 五、实验结果
网页制作实验报告详细版
文件编号：GD/FS-4910 （报告范本系列） 网页制作实验报告详细版 The Short-Term Results Report By Individuals Or Institutions At Regular Or Irregular Times, Including Analysis, Synthesis, Innovation, Etc., Will Eventually Achieve Good Planning For The Future. 编辑：_________________ 单位：_________________ 日期：_________________
网页制作实验报告详细版 提示语：本报告文件适合使用于个人或机构组织在定时或不定时情况下进行的近期成果汇报，表达方式以叙述、说明为主，内容包含分析，综合，新意，重点等，最终实现对未来的良好规划。文档所展示内容即为所得，可在下载完成后直接进行编辑。 一、实验目的及要求 本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。 二、仪器用具 1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。 2、安装windowsxp操作系统；建立iis服务器环境，支持asp。 3、安装网页三剑客（dreamweavermx；flashmx；fireworksmx）等网页设计软件； 三、实验原理
通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。 四、实验方法与步骤 1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。 2）在弹出的“站点定义为”对话框中单击“高级”选项卡。 3）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。 4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。
网页制作上机实验指导(B)
网页制作上机实验指导（B） 1.创建自己的站点，名称为kaoshiB，本地目录放在根文件夹E:\kaoshiB中。（5分） 2.创建框架主界面，样式如下图。要求主框架文件名为index.htm，网页标题为：网页制 作考试网页B，其余网页文件名自定。框架结构为“左侧固定，上方嵌套”（即左、上、下样式），并分别设置成不同背景颜色（颜色自拟）。左边网页写上自己的真实班级、学号和姓名，作为评分的依据。（5分） 3.制作如下的一张表格，网页文件名为table.htm。（5分） 一班学号姓名成绩01001 赵同学85 01002 钱同学96 二班02001 孙同学75 02002 李同学56 4.制作一个网页，利用层和时间轴来实现动画效果，网页文件名为layer.htm。（5分） 5.利用行为调用JavaScript来实现网页的后退功能，即制作一个网页，在其上有一个按钮， 按钮的标签为“后退”，点击该按钮后，该网页即后退到上一个网页。网页文件名为back.htm。（5分） 6.首先在本地计算机上查找一个音乐文件，然后在网页中添加该音乐文件作为背景音乐， 文件名为music.htm。（5分） 7.制作一个下拉式菜单，界面如图所示，文件名为menu.htm。（10分）
8.创建一个如下图所示的客户留言表单guest.htm。（5分） 9.在你的计算机上搜索一幅图片，当鼠标移动到不同部位（至少两个部位）时，显示不同 的提示信息，并且超级链接到不同网页中去。(5分)
10.制作如下图所示的效果。要求当鼠标分别悬停在“花”、“蔬菜”、“椰树”三个文本时， 在图中央分别显示三种不同的图片（图片在自己计算机上查找），当鼠标移走时，相应图片消失。（5分） 11.制作如下图所示的表单，并进行验证录入数据的正确性，要求姓名为任意字符，长度为 4个汉字，E-mail符合电子邮件的格式，年龄在18－88之间。网页文件名为Validate.htm。 （5分）
网页设计实验指导书
网页设计实验指导书 经济与管理学院二零一二年二月
实验一HTML标记的基本语法 一、实验目的和要求 1．熟悉HTML文件的编辑环境； 2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。 3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。 二、实验内容 1、根据如表1-1所示的表格写出完整的HTML代码； 其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。 2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。 图1-1 个人网站首页 3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。
图1-2 列表效果图 三、实验步骤 1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver 的代码窗口。 2．按各种不同标签的语法规则，输入合法的代码。 3．输入完成后保存代码文件，文件后缀为.htm/.html。 4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。 四、程序代码（在实验报告中写出） （1）
课号 | 课程名 | 学分 |
1002201 | 《网络原理》 | 6 |