网页设计实验指导书

合集下载

网页制作实验指导书-全稿

第一章网页制作开发工具的基本操作实验1.1 Dreamweaver 8软件的基本操作【相关知识】1. Dreamweaver8相对于其他以前的版本增加和增强的功能有：支持XML数据、增加样式呈现工具栏、增强CSS设计、增加代码折叠功能。

2. Dreamwaver 8支持Windows和Macintosh两种操作系统。

3. 在Dreamweaver 8中可以使用HTML、CSS、XML等多种文件类型，主要的文件类型是HTML文件，可以使用.html或.htm扩展名保存HTML文件。

一、实验目的和要求学会Dreamweaver 8的安装和卸载的方法。

二、实验步骤1. 安装Dreamwaver 8（1）运行，打开安装向导对话框。

（2）单击[下一步]按钮，打开安装向导的许可证协议页面。

（3）选中[我接受该许可证协议中的条款]，单击[下一步]按钮，打开选择安装路径的对话框。

（4）可以通过选中[创建快速启动栏快捷方式]或[在桌面上创建快捷方式]复选框来创建快速启动栏快捷图标或桌面快捷图标，单击[更改]按钮，打开更改当前目的地文件夹页面。

（5）在[文件夹名称]文本框中输入新的文件夹路径，单击[确定]按钮，返回安装路径对话框，单击[下一步]，打开默认的文件类型对话框。

（6）单击[下一步]按钮，打开[已做好安装程序的准备]对话框。

（7）单击[安装]按钮，开始安装Dreamweaver 8，安装过程会持续几分钟，然后显示[完成Dreamweaver8 安装工作]对话框，如图1-1所示。

（8）单击[完成]按钮，完成Dreamweaver 8的安装工作。

2. 卸载Dreamwaver 8（1）在[开始]菜单中选择[控制面板]命令后，打开相应面板。

（2）选择[添加/删除程序]命令后，打开相应面板。

（3）在[添加或删除程序]对话框的[当前安装的程序]列表中选择[Micromedia Dreamweaver 8]一项，单击[删除]按钮。

《网页设计与制作》课程实验指导书

XXX学院男生宿舍X号楼综合布线系统设计方案设计单位：设计指导：宿舍布线系统的设计一、综述A.布线系统将贯穿雨1~5楼的各个平面。

主要为语音、数据、图像等系统信号提供高性能传输路由。

B.作为一个综合性的线路平台，应具有一定的兼容性和开放性，可满足各类通讯及计算机等传输需要和网络结构，提供一个标准化、高带宽、低成本的网络环境。

C.系统应具有开放的模块化结构，可灵活地进行资源分配，线路管理、变更和扩展。

D.系统应提供一个安全、有序。

便于管理的设备安装及连接环境，可快捷简便地进行系统安装和运行。

E.在充分考虑目前应用情况下，以高起点和适度超前的原则来规划本系统。

为各种高性能应用踢狗充足的传输带宽，为日后系统的升级提供充足的空间。

F.宿舍楼基本情况：楼层面积约为16*9米，且已有中国移动和中国电信的无线网络热点分布。

二、具体布置系统包括工作区子系统、配线(水平)子系统、干线子系统、设备问子系统、管理子系统和建筑群子系统。

1.工作区子系统。

工作区子系统是由学生信息插座到计算机网络的连接线缆。

学生宿舍的房间设置一般为6人间其内部语音及网络数据点的位置不像大开问办公那样难以布置，因室内床位布置均已确定，很容易确定其数据端口的位置。

日前宿舍布置一般为上铺居住，床铺下设置学习书桌，因此数据端安装在书桌下，高度为0．3 m。

应根据校方的要求，选择数据端口的安装数量。

对于要求较高的，每个学生书桌下方设置一个数据端口，房间内公共部位设置一个电话端『_J。

要求较低的，可每两个同学共用一个数据端口，然后采用交换机分别接引至电脑。

其优点是减少了水平引来线路和保护管线(槽)，缺点是影响网络速度，需自加分配没备。

除考虑数据端r]的位置外，还需相应布置供电电源插座，间距应为0．2 m。

2.配线(水平)子系统配线(水平)子系统由楼层配线架(FD)至信息插座之间的线缆、信息插座(含转换点及配套设施)组成，它将偻层弱电竖井内配线架与每个宿舍室内的信息插座相连。

dreamweaver网页设计实验指导书

网页设计实验指导书（一）DreamWeaver静态网页制作第一章网站规划 ................................................................................................... - 3 - 第二章Dreamweaver静态网页设计实验 ...................................................... - 8 - 实验一在Dreamweaver中建立一个站点.................................................. - 8 - 实验二在网页中使用文本........................................................................... - 15 - 实验三超级链接的建立............................................................................... - 21 - 实验四网页图像的应用............................................................................... - 29 - 实验五网页表格操作 ..................................................................................... - 36 - 实验六利用表格进行网页布局..................................................................... - 39 - 实验七利用层进行网页布局....................................................................... - 48 - 实验八行为和图层的应用............................................................................. - 53 -实验九框架型网页的制作........................................................................... - 66 - 实验十一交互式表单的应用..................................................................... - 84 - 实验十二HTML语言基础应用 .................................................................... - 90 - 实验十三网页动态效果辑............................................................................. - 97 - 实验十四CSS样式表的创建及运用....................................................... - 106 -第一章网站规划一、网站建设的基本流程网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。

网页设计与制作实验指导书

网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系2007年9月实验一网页设计基础实验一、实验目的1．掌握商务网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．熟悉页面排版，掌握网页布局的方法。

二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。

2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局⑵．“口”型（“国”字型）布局⑶．“三”型布局⑷．对称对比布局⑸．POP布局3．找出使用大色块和抽象线条构图风格的网站（至少各2个）；4．使用电脑中的图片工具（Photoshop）把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。

三、实验步骤与要求按“实验内容”中1～4完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：⑴．所访问各商务网站的风格及特点；⑵．各种版面布局网站的域名和所采用的版面布局形式；⑶．使用大色块和抽象线条构图风格网站的域名和所采用的构图形式；⑷．10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。

四、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

2、存成doc文件和html文件，上传到教师机D：\zuoye目录下实验二建立站点（2学时）一、实验目的：(1)熟悉DreamWeaverMX的界面及其操作(2)熟悉使用DreamWeaverMX建立站点，理解本地站点和远程站点的概念二、实验内容本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。

三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。

实验过程中记录发生的现象并分析原因。

实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。

HTML网页设计基础实验指导书2016

wordHTML网页设计根底实验指导书实验一网页设计根底与HTML根本标签【实验目的】1．掌握利用因特网进展信息游览、搜索，下载网页、图片、文字和文件；2．对给定的，能指出的结构、目录结构、页面布局方式；3．掌握HTML的根本标签<HTML><HEAD> <BODY><TITLE><META>标记；【实验环境】Window xp操作系统，机器联网。

【实验重点与难点】熟练使用浏览器进展浏览、搜索、下载。

【实验内容】1、根据制作的需要，从网上下载网页制作时需要的文字、小图片、动画与flash。

2、上网访问实际假如干，了解各的风格〔主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等〕、页面布局方式；在网上找出如下版面布局的结构形式：⑴“T〞结构布局⑵“口〞型〔“国〞字型〕布局⑷对称比照布局⑻海报型布局3、利用搜索引擎，浏览因特网上较为著名的5个，记录这些的名称、地址和以与相应的网页文件格式〔扩展名〕；4、查看我院主页的源代码，收藏到收藏夹中，将其设为主页，并指出该的结构、目录结构和页面布局方式。

5、构建HTML文档“我的第一个网页〞：〔1〕从开始菜单启动记事本；〔2〕在记事本中，录入一个HTML文档；〔3〕设置该文档在最终在浏览器中显示的标题为“我的第一个网页〞；〔4〕在页面添加可见的文本“我的第一个网页〞；〔5〕使用记事本的菜单“文件〞→“保存〞，在“另存为〞对话框中，在“保存类型〞下拉列表中选择“所有文件〞，录入“文件名〞myfirstpage.htm，单击“保存〞按钮将该页面保存到实验文件夹。

实验二 HTML文本格式的应用【实验目的】1．掌握使用<body>标记设置网页背景颜色和文本颜色。

学习使用分段标记<p></p>；2．掌握使用<font>标记设置文字的属性；3．掌握在网页中插入背景图片；4．掌握在网页中插入水平线，并设置水平线的属性；5．掌握在网页中插入背景音乐。

网页设计实习指导书

网页设计实习指导书（54学时for 信计）邹青编信息工程学院二００六年八月实习一掌握HTML的格式一、实习目的1. 掌握网页的基本结构及必须的标记；2. 了解Web页面中特殊字符及颜色的显示，掌握页面整体颜色配比。

3. 学会并掌握从网上获取HTML的知识及下载网页元素；二、实习要求1. 掌握网页的基本结构，熟悉html、head、body、title基本标记2. 了解Body标记的BackColor、BackGround、Text、Link、VLink、ALink属性，特殊字符的显示3. 用记事本完成简单的网页4. 学会从InterNet上获取网页元素三、实习内容及方法1. 网页基本结构<html> ……表示网页的开始<head> ……网页头，用来保存对网页的一些注释及规定一些动作<title>网页标题</title> ……在浏览器标题栏显示的内容</head> ……结束网页头<body> ……正文开始正文……显示在浏览器中的内容</body> ……正文结束</html> ……网页结束2. 用记事本建立一个简单的网页第一步：从开始菜单栏中启动记事本；第二步：在记事本中输入一下内容<html><head><title>我的第一个网页</title></head><body>Hollo, World!!!!</body></html>第三步：在文件菜单中单击保存→选择保存类型为：所以类型→输入文件名为test.html→单击确定按钮；第四步：找到刚才建立的文件，双击打开，浏览自己的网页3. Body属性的使用及特殊字符的显示。

用记事本建立一个网页sec.htm，内容如下：<html><head><title>我的第二个网页</title></head><body BGColor＝#cccccc Text=blue Link=black ALink=redVLink=green>我的&lt友情链接&gt<a href=””>搜狐</a><br><a href=” ”>西北农林科技大学</a><br><a href=” http://127.0.0.1”>我自己</a></body></html>4. 从网上保存3个自己感兴趣的页面及10张图片到自己的软盘上。

ASP实验指导书

《ASP动态网页设计》实验指导书系部：计算机系专业：计算机科学与技术专业目录实验一 WINDOWS XP IIS的安装与配置 (3)实验二 HTML标记符的使用（表格、表单对象、CSS样式） (4)实验三 SQL语言 (5)实验四 VBSCRIPT编程 (6)实验五 ASP内建对象 (8)实验六利用ADO对象实现对数据库的存取操作 (10)实验七简单BBS，用户注册 (13)实验八简单BBS，用户登录 (17)实验一 Windows xp IIS的安装与配置一、实验目的：熟悉IIS的安装过程与配置方法。

通过编写简单的ASP页面，掌握ASP网页的编写和运行方法。

二、实验要求：学生掌握关于动态网页的相关知识；具备制作静态网页的基础；具备一定的网络基础知识。

三、实验器材：Windows xp计算机系统；安装IIS、Dreamweaver 8、Access 2003数据库系统等。

四、实验内容（步骤、结果）：1、ASP Web服务器的安装与配置；[参考步骤]：1.检测本机的TCP/IP协的运行情况：运用Ping和IPconfig命令；2.将windows 2000/XP光盘插入教师机中，将其共享；3.学生机器将查看自己的IP地址，在网络中配置；4.在添加和删除程序中，添加IIS；5.在自己的本地硬盘中用03soft建一文件夹；6.在管理工具中Internet 信息服务中配置IIS；7.运行Dreamweaver 8建立站点，完成相关的设置，其中根目录与IIS中一致，并使用服务器技术；8.启动Dreamweaver 8，然后切换到源代码显示方式；9.在<body>与</body>之间，加入以下ASP代码：<%Response.write(“这是利用ASP网页输出的信息”)%>；10.将网页保存到C：\03soft目录下，文件命名为first.asp；11.启动IE浏览器，在地址栏中键入：http://localhost/first.asp或http://127.0.0.1/first.asp，然后按回车。

《Java Web程序设计》实验指导书SSM

《Java Web程序设计》实验指导河南大学计算机与信息工程学院二〇一七年七月目录说明 (1)实验一HTML应用 (1)一、实验目的 (1)二、实验学时 (1)三、实验环境 (1)四、实验内容 (1)五、实验报告书写要求 (2)实验二JSP应用 (3)一、实验目的 (3)二、实验学时 (3)三、实验环境 (3)四、实验内容 (3)五、实验报告书写要求 (4)实验三JDBC应用 (6)一、实验目的 (6)二、实验学时 (6)三、实验环境 (6)四、实验内容 (6)（一）MySQL数据库管理操作 (6)（二）使用JDBC访问数据库 (10)（三）在实验三实现的功能中增加数据库访问功能 (11)五、实验报告书写要求 (11)实验四Servlet应用 (12)一、实验目的 (12)二、实验学时 (12)三、实验环境 (12)四、实验内容 (12)（一）使用Servlet技术改写用户登录 (12)（二）使用Filter技术解决中文乱码 (12)五、实验报告书写要求 (12)实验五JSP+Servlet+JavaBean综合应用 (13)一、实验目的 (13)二、实验学时 (13)三、实验环境 (13)四、实验内容 (13)五、实验报告书写要求 (13)实验六DAO和MVC模式 (15)一、实验目的 (15)二、实验学时 (15)三、实验环境 (15)四、实验内容 (15)五、实验参考界面 (15)六、实验报告书写要求 (15)实验七 Struts 2应用 (17)一、实验目的 (17)二、实验学时 (17)三、实验环境 (17)四、实验内容 (17)（一）基本Struts 2应用编写 ..................................... 错误!未定义书签。

（二）可选：编写并使用拦截器 (17)（三）可选：使用类型转换器.................................... 错误!未定义书签。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网页设计实验指导书经济与管理学院二零一二年二月实验一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）<table width="500" border="1"><caption>课程表</caption><tr><td><div align="center">课号</div></td><td><div align="center">课程名</div></td><td><div align="center">学分</div></td></tr><tr><td><div align="center">1002201</div></td><td><div align="center"><u>《网络原理》</u></div></td><td><div align="center">6</div></td></tr><tr><td><div align="center">1003302</div></td><td><div align="center"><u>《网页设计与制作》</u></div></td><td><div align="center">5</div></td></tr><tr><td><div align="center">1003507</div></td><td><div align="center">《管理学原理》</div></td><td><div align="center">5</div></td></tr></table>2.还没弄3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"></style></head><body><ul><li><h1><span class="STYLE1">列表项目1</span></h1><ol><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul><ul><li><p class="STYLE4">列表项目2</p><ol><li class="STYLE5"> <a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE5"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul></body></html>五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。

实验二本地站点的规划、创建和网页的编辑一、实验目的和要求1．熟悉站点的规划；2．掌握本地站点的建立和定义，熟悉站点窗口中各菜单的功能和作用；3．掌握在本地站点中新建网站文件夹与文件；4．熟悉Dreamweaver 8的工作环境；5．掌握在网页中插入文本、图像和编辑文本、图像的方法；6．学会给文字和图像创建超链接。

二、实验内容和步骤1．浏览国内几类典型网站，熟悉站点的规划、布局等方法。

政府类网站：商务部 /统计局 /政府网页链接 /govinfo/教育类网站：教育部 /清华大学北京大学门户类网站：新浪网网易 TOM 电子商务网站：B2B代表阿里巴巴 /B2C代表当当网 C2C代表淘宝网 Ebay中国（原易趣）2. 在网上找出下列版面布局的结构形式：（1）“同”字型结构布局（2）“国”字型结构布局（3）“匡”字型结构布局（4）“三”字型结构布局（5）“川”字型结构布局3．定义本地站点（1）单击【站点】【新建站点】命令，打开图2-1所示的站点定义窗口。

图2-1 图2-2（2）选择“基本”选项卡，在分类列表中选择本地信息选项开始定义站点。

■各选项的设置方法可参考下面的文字说明。

站点名称文本框：输入网站中文名称，如：风行科技(如图2-2)；单击【下一步】,弹出图2-3，选择【否，不想使用服务器技术】图2-3 图2-4单击【下一步】,弹出图2-4，指定网站所在的本地端文件夹位置单击按钮，选择E：\实验\单击【下一步】,弹出图2-5，在如何运用服务器技术中选择【无】单击【下一步】,弹出图2-6，完成。

图2-5 图2-6（3）按照上面的说明设置完成后，此时会弹出文件面板组，显示出如图2-7所示的本地的站点视图。

图2-7本地站点视图窗口3．新建网页文件目前我们在个人网站中只有image文件夹，没有其它的网页文件，那么接下来就是在网站文件夹中放入事先设计好的网页文件或重新创建网页文件。

(1)可根据网页主题及内容的多少，创建网页文件。

初期的设计可参考下例。

如图2-8所示。

图2-8 网站地图（2）根据设计的地图，在网站的站点窗口中新建网页文件，选择【文件】【新建文件】命令，此时新增加了默认名称为“untitled.htm”的网页文件，如图2-9所示。

（3）将“untitled.htm”的网页文件更名为“index.htm”, 回车。

4．修改、删除文件名。

直接选中要修改的文件，单击即可修改，或右击并从快捷菜单选择【重命名】。

直接选中要删除的文件，按delete键，或右击并从快捷菜单选择【删除】。

图2-9建立网页文件图2-10站点编辑窗口6．编辑网站内容（1）在定义了一个或多个本地端的站点之后，往往由于某种原因需要编辑网站的相关数据，这时打开图2-10编辑站点窗口，再按照下面的步骤操作。

（2）选择要修改的网站，完成修改网站的相关设置，完成后单击ok。

（3）回到编辑站点对话框，单击完成按钮结束工作。

7．创建ODBC连接（1）单击“开始”/“资源管理器”/“控制面板”/“管理工具”/“数据源”；（2）启动ODBC，在ODBC窗口中选择“系统DSM”；（3）单击“添加”，在“创建新数据源”对话框中选择“Microsoft Access Driver(*.mdb)”驱动；（4）单击“完成”，在出现的“ODBC Microsoft Access安装”对话框中输入数据源名及说明，并选择要进行链接的数据源；（5）单击“确定”即可建立DSN。