网页设计实验指导书
网页制作实验指导书-全稿
第一章网页制作开发工具的基本操作实验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>我的<友情链接><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)（三）可选：使用类型转换器.................................... 错误!未定义书签。
《网页设计与制作基础》实验指导书(2010-2011-2)-实验1
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。
3、配置网站运行环境。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉使用浏览器进行浏览、搜索、下载。
◆熟悉HTML的结构、语法。
◆创建与管理站点实验内容1、浏览新浪主页并保存，观察其保存结果（其中包括哪些文件和文件夹）。
2、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
3、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
4、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为“我的第一个网页”，内容为司空曙的《江村即事》（要求加入文档类型声明），如下图所示。
5、使用Dreamweaver建立一个本地站点。
6、注：站点名称用你的名字的首字母，如方清华用fqh。
1）在网站根文件夹下创建文件夹sy12）打开“文件”面板并上传，类似于下图注：请利用“管理站点”的“导入”和“导出”功能保存和恢复站点设置，减少重复配置操作。
3）配置IIS。
打开控制面板>管理工具>internet信息服务。
注：如果“管理工具”中没有“internet信息服务”，请利用“控制面板”的“添加/删除程序”工具添加（在“添加/删除组件”选项中设置）。
4）配置本地intranet附录2 课程设计报告模板《网页设计与制作基础》课程设计报告任课教师专业班级班级代码组号第组组长学号姓名设计主题《网页设计与制作基础》课程组制评语（由任课教师答辩时填写）分工情况表（该表后两列由教师填写外，其余部分由学生填写）员的最后课程设计成绩是小组课程设计成绩与个人附加分之和。
指导教师（签名）：年月日一、设计目的（正文字体为“仿宋_GB2312”，字号为四号字）二、设计环境（正文字体为“仿宋_GB2312”，字号为四号字）三、设计步骤（各主要设计流程如确立主题、规划网站以及网页架构、素材准备、制作网页等的具体步骤）（正文字体为“仿宋_GB2312”，字号为四号字）四、设计结果（各相关网页的截图）（正文字体为“仿宋_GB2312”，字号为四号字）五、心得（通过此次课程设计说说你在设计过程中遇到的问题和解决方法，以及有何收获）（正文字体为“仿宋_GB2312”，字号为四号字）实验报告课程名称实验项目名称班级与班级代码实验室名称（或课室）专业任课教师学号：姓名：实验日期：年月日广东商学院教务处制姓名实验报告成绩评语：指导教师（签名）年月日说明：指导教师评分后，实验报告交院（系）办公室保存。
2-网页设计实验指导书32
《网页设计》实验指导书上海建桥学院信息技术学院二〇一一年九月《网页设计》实验指导书目录实验1 Html5标记的综合应用 (1)1.1 实验目的 (1)1.2 实验原理 (1)1.3 实验器材和环境 (1)1.4 实验内容 (1)1.5作业 (1)实验2 Css3属性的综合应用 (2)2.1 实验目的 (2)2.2 实验原理 (2)2.3 实验器材和环境 (2)2.4 实验内容 (2)2.5作业 (2)实验3 主题网站的设计与制作 (3)3.1 实验目的 (3)3.2 实验原理 (3)2.3 实验器材和环境 (3)3.4 实验内容 (3)3.5作业 (3)1.1 实验目的综合运用html5常用标记，设计与制作静态网页，至少包含超链接、图像、背景、表单、音视频等标记。
1.2 实验原理xhtml文档的基本结构<html><head><body>标记，<meta>和<title>标记<body>、<p>等常用标记及其属性在网页中插入背景图片在网页中插入水平线，并设置水平线的属性table、form、audio、video等标记的应用1.3 实验器材和环境PC机1台、Photoshop cs3以上、dreamweaver cs3以上、flash cs3以上1.4 实验内容现要求完成主要内容如下：(1)正确建立站点、文件管理正确(2)站点下只有主页，并命名为：index.html；图像文件要放在images文件夹；子页放在Include文件夹（或index文件夹）内；正确命名所有文件。
(3)用表格布局，完成网页至少3个，并正确链接。
(4)用表单完成个人信息采集的页面，风格要与主页一致。
(5)正确使用所学过的xhtml标记(6)在作品的版权位置显示学号和姓名1.5作业提交站点文件夹，命名要求：“学号”+“姓名”实验报告书2.1 实验目的综合运用Css3常用标记，美化静态页面，至少包含段落、图像、边框、背景、项目列表、超链接等元素的美化。
网页设计作业指导书
网页设计作业指导书一、作业背景随着互联网的不断发展，网页设计已成为一门越来越重要的技能。
为了帮助学员掌握网页设计的基本知识和技巧，本指导书将为大家详细介绍网页设计的要点和步骤。
二、作业目标本次作业的主要目标是让学员了解网页设计的基本原理和流程，并能够独立完成一个简单的网页设计项目。
具体目标如下：1. 了解网页设计的基本概念和术语；2. 掌握网页设计的原则和规范；3. 学习并运用常用的网页设计工具和技术；4. 完成一个简单的网页设计项目。
三、作业要求1. 网页设计主题：自由选择，可以是个人主页、产品展示页等；2. 设计要求：注重页面的整体布局、配色和字体的搭配，使页面美观、清晰易读；3. 页面结构：通常包括导航栏、页眉、页脚和内容区域；4. 图片使用：如果需要使用图片，请确保图片质量和版权问题；5. 页面响应式设计：尽量考虑不同设备上的显示效果，使页面在各种屏幕尺寸下都能良好显示和使用；6. 使用工具：学员可自由选择适合自己的网页设计工具，如Adobe Photoshop、Adobe Illustrator等；7. 提交要求：请将设计好的网页以图片的形式提交，同时附上简要的设计思路和注意事项。
四、作业流程1. 熟悉网页设计基本知识：阅读相关书籍或在线教程，了解网页设计的基本概念、规范和原则；2. 确定网页设计主题：根据个人兴趣或实际需求选择适合的网页设计主题；3. 设计网页结构：制定页面的整体结构和布局，包括导航栏、页眉、页脚和内容区域的位置和样式；4. 选择合适的配色和字体：根据网页主题和内容选择合适的配色方案和字体样式，注重色彩的搭配和字体的易读性；5. 导入图片和多媒体素材：如果需要使用图片和多媒体素材，请确保其质量和版权问题，并将其合理地融入页面设计中；6. 进行页面响应式设计：根据不同设备的屏幕尺寸和分辨率，优化页面的布局和显示效果；7. 调整和优化页面效果：通过不断调整和优化页面的各个元素，使其整体效果更加出色；8. 完成设计并提交：将设计好的网页以图片的形式提交，同时附上设计思路和注意事项的简要说明。
电子商务网页设计与制作实验指导书 (2)
电子商务网页设计与制作实验指导书蚌埠学院经济与管理系2013年12月目录实验一认识DW界面及基本操作实验二网页中文本和图像实验三超级链接和表格的应用实验四层实验五表单的应用实验六行为实验七库、模板的应用实验八网站建设、管理与优化实验一认识DW界面及基本操作【实验目的】掌握Dreamweaver 8软件界面的构成及基本操作方法。
【实验内容】（1）熟悉Dreamweaver 8的工作界面；（2）用Dreamweaver 8定义网站；【实验步骤】1. Dreamweaver 8简介，启动，界面认识；2．创建一个站点；3．创建和打开一个文档；4．网页的新建，保存，预览，关闭，打开。
要求：用DW建立“个人简介”页面，写清学号、姓名等相关信息。
5．字体，标题级，颜色，效果设定。
6. 设置文档的属性。
【实验要求】按实验内容完成操作，完成实验报告，在实验报告中要求记录设计网页的全过程；所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果。
实验二网页中文本和图像【实验目的】掌握普通文本和图像的插入方法；掌握特殊文本的插入方法；掌握应用项目列表；掌握文本格式化的方法；掌握图像的基本编辑方法。
【实验内容】（1）在网页中插入普通文本；（2）在网页中插入特殊文本；（3）在网页中应用项目列表；（4）对插入的文本进行格式化；（5）在网页中插入图像；（6）图像的基本编辑【实验步骤】1. 制作一个“名车风范”网页。
要求在自选图片上创建三个热点，分别连接到自拟的文字段中。
并要求当鼠标悬停在相应热点上时，显示该区提示信息。
【实验要求】按实验内容完成操作，完成实验报告，在实验报告中要求记录设计网页的全过程；所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果。
实验三超级链接和表格的应用【实验目的】掌握在网页中插入表格的方法；掌握表格的基本编辑操作；了解超级链接的种类；掌握常见链接的制作方法。
【实验内容】（1）在网页中插入表格；（2）在网页中使用超级链接；（3）对表格进行美化。
DM网页制作实验指导书
DREAMWEAVER 8基础安装好Dreamweaver 8中文版后,运行，选择Dreamweaver 8工作区后，将看到下面的画面：一、①为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S)... CTRL+U[其中CTRL+U是该选项的快捷键],如下图所示：在这里，你可以把自己的DREAMWEAVER MX设置为自己喜欢的样式，一般使用默认就可以了，如下图：为了使用的方便，选中字体这一项目，把参数设置为上图所示的样子，因为默认的时候实在太难看了（当然也可以选自己喜欢的）。
如果你浏览网页时使用的不是IE的话，请选中在浏览器中预览这一项（以后制作网页的时候要用到），点一下那个“＋”添加你使用的浏览器程序。
二、②是插入项目选择工具(插入面板)，在②选中了某个项目，③中会出现相应的插入项目，下面详细介绍，选中常用这一项后如下图：锚点用于网页中的定位，如网页的上、中、下等；图像点位符是用于动态交换图片的，后面再说；片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。
在②中选中布局一项，共有标准视图和布局视图两种视图，如下图所示：在标准视图下，可以插入表格和在网页制作区画图层。
切换到布局视图下，如下图：在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格，这个比较好用，可以用来排版网页，后面将说到。
在②中选中文本一项，可以对文本进行格式化，如下图：A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体；这些比较简单，可以自己一项一项慢慢试试，看看字体有什么变化。
在②中选择表单（表格和框架两项后面再说），可以插入各种按钮，如下图：A为表单；B 为文本框；C 为隐藏域；D为文本区域；E为多选框；F 为单选框；G为单选按钮组；H为列表/菜单；I 为跳菜单；J为图像域；K为文本字段；L为按钮；M为标签；N为在②中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。
网页设计实验指导书
4、利用记事本编辑一个页面文件名为 sy1-4.html，要求在标题栏中显示“这是我的第一个 试验”，页面中显示若干段文字，字体颜色为红色，页面背景为黄色，文字不可选择，不可 复制。 参考实验步骤：
1．打开记事本，单击 [文件]菜单，选择[保存]命令，在打开的保存对话框中，先选择 要保存的文件夹，保证保存类型选择“所有文件”，在文件名中输入：sy1-4.html，注意必 须输入扩展名。
图 1-1 editplus 界面
图 1-2 新建 html 网页界面
5
2.使用 EditPlus 制作一行文字的网页 使用 EditPlus 新建一个空白网页，观察网页的基本结构，了解基本结构所用标记
的作用，保存文件，在 IE 浏览器中查看网页运行效果。 将<title>标记中的文本该为“单行文本”，在<BODY>标记之间添加文字“重庆邮
<H1>这里写书籍的名称</H1> <hr 标尺线属性> <P><font 这里设置字体属性>这里写作者姓名及书籍简介</font></P> <A href=”第一章文件的 url”>第一章</A> <A href=”第二 章文件的 url”>第二章</A>…… </body> </html> 注： 表示一个空格。 各章文件结构如下： <html> <head> <title>这里输入标题栏内容</title> </head> <body 设置主体属性> <H1>这里写 xx 章节的名称</H1> <hr 标尺线属性> <P><font 这里设置字体属性>这里写本章第一段具体内容</font></P>…… <A href=”上一章文件的 url”>上一章</A> <A href=”主页 的 url”>返回目录</A> <A href=”下一章文件的 url”>下一章</A> </body> </html> 【实验报告要求】
网页设计实验指导书实验二
《网页设计基础》上机实验指导书实验二 HTML内联元素一、实验目的：1.熟练掌握HTML的基本语法。
2.熟悉HTML内联元素的概念。
3.掌握使用HTML内联元素进行简单网页制作。
二、实验内容：1.构建最简合法的HTML文档“我的第一个网页”。
2.使用简单内联元素进行文字处理。
3.在网页中创建超级链接。
4.在网页中插入图片。
三、实验要求：1.掌握使用记事本进行简单网页编辑的方法。
2.熟练掌握基本内联元素及属性的书写。
四、实验学时：2学时五、实验步骤：0.实验准备：（1）在硬盘上为本实验建立文件夹（以下称为“实验文件夹”），用于保存本实验的实验结果；（2）准备3幅图片，其扩展名分别为.jpg，.gif和.png，.gif图片最好是一个动画，将这3幅图片放到实验文件夹中。
提示：可以使用或搜索并下载图片，这些图片搜索引擎是可以指定文件类型进行搜索的。
1.构建最简合法的HTML文档“我的第一个网页”：（1）从开始菜单启动记事本；（2）在记事本中，录入一个最简合法HTML文档；（3）设置该文档在最终在浏览器中显示的标题为“我的第一个网页”；（4）在页面添加可见的文本“我的第一个网页”；（5）使用记事本的菜单“文件”→“保存”，在“另存为”对话框中，在“保存类型”下拉列表中选择“所有文件”，录入“文件名”myfirstpage.htm，单击“保存”按钮将该页面保存到实验文件夹。
提示：最简合法HTML文档必须包含的元素有html、head、 title、 body。
2.使用简单内联元素进行文字处理：（1）从开始菜单启动记事本；（2）在记事本中，录入一个最简合法HTML文档；（3）设置该文档最终显示标题为“简单文字处理”；（4）在文档的<body>和</body>之间，插入适当元素使最终网页中显示以下内容：这是一段文本这是一段文本© Microsoft® Windows 2007A = a1 + a2 + a3这是一段文本这是一段文本注：以上文字不涉及到文字字体、大小、颜色的设置，且并不居中显示。
《网页设计与制作基础》实验指导书
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。
3、熟悉HTML基本标记的使用。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉HTML的结构、语法。
◆熟悉HTML基本标记的使用。
实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。
4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。
5、通过附录1的练习熟悉HTML基本标记的使用。
（可参考第二章内容）实验二Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。
实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆文字的插入及设置。
◆图像的插入及设置。
◆各种超链接的创建。
实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。
2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。
3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。
网页设计实训指导书
实训1 创建本地站点、整体控制页面一．实训目的（1）熟悉Dreamweaver 8的界面布局和工作环境。
（2）熟练掌握本地站点创建和管理的方法。
（3）掌握页面属性的设置方法。
(4)掌握在网页中输入文本、输入空格、实现文本换行和编辑文本的方法。
（5）学会在网页中插入水平线和日期。
（6）掌握网页文本格式化操作。
（7）掌握图像的插入方法，图像属性的设置方法。
（8）掌握图像与文本混合编排的方法二．预览效果本次实训的浏览效果如图1所示。
图1 网页效果三．实训内容（1）创建一个命名为“site”的本地站点。
（2）创建一个命名为“huiyi.html”的网页文档。
（3）根据图1所示的网页浏览效果合理设置页面属性，页面属性的各个参数值自行确定。
(3）在网页中输入文字、水平线和日期，设置文本的属性。
（4）在网页中插入图像，设置图像的属性，实现图文混排效果。
实训2 网页布局之一一．实训目的（1）掌握利用表格布局网页中的文字、图像等页面元素的方法。
（2）掌握应用表格存储文本或数据，且对数据进行有序排列。
（3）掌握利用表格将形状规则的小图片合成形状不规则的大图片的操作方法。
（4）掌握应用布局表格和层的方法布局网页中的文字和图片的方法。
二．预览效果本次实训的浏览效果如图2所示。
三．实训内容（1）在站点“site”根文件夹中新建一个子文件夹“实训2”，在该子文件夹中创建一个命名为“shuiguo.html”的网页文档。
（2）设置网页shuiguo.html的页面属性。
（3）先插入一个2行2列的表格（4）将第1行的两个单元格合并，再插入图片（5）在第2行第1列的单元格内再插入6个鼠标经过图像（6）第2行第2列的单元格内再在插入一个2行4列的表格（7）在新插入的表格各单元格内分别插入图片、输入文字实训3 "布局表格"的运用一．实训目的（1）掌握布局表格和布局单元格的插入方法。
（2）掌握布局表格和布局单元格的编辑方法（3）能够综合运用“布局”表格和“标准”表格完成页面的布局设计二．预览效果本次实训的浏览效果如图3所示图3 页面效果三．实训内容（1）在站点“site”根文件夹中新建一个子文件夹“实训3”，在该子文件夹中创建一个命名为“fuxinlou.html”的网页文档。
- 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"><!--.STYLE1 {font-family: "宋体";font-size: xx-large;}.STYLE4 {font-family: "宋体"; font-size: xx-large; font-weight: bold; }.STYLE5 {font-family: "宋体";font-size: x-large;}.STYLE6 {font-family: "新宋体"; font-size: x-large; }--></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。