网页设计实验指导书
网页制作实验指导书-全稿
第一章网页制作开发工具的基本操作实验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所示。
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，然后按回车。
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常用标记，美化静态页面，至少包含段落、图像、边框、背景、项目列表、超链接等元素的美化。
网页设计与制作实验指导书
网页设计与制作实验指导书主编教师：李显萍吉林省经济管理干部学院国际商务系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建立站点，理解本地站点和远程站点的概念二、实验内容本实验的内容主要是制作一个“我最喜欢的歌曲”的站点，它包括一个用来描写自己喜欢的歌曲的介绍的简单主页和若干介绍单个歌曲的网页。
三、实验步骤与要求实验前认真预习，熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
实验完毕将所有文件打包交给老师，并保存设计结果供下一个实验使用。
网页设计作业指导书
网页设计作业指导书一、作业背景随着互联网的不断发展，网页设计已成为一门越来越重要的技能。
为了帮助学员掌握网页设计的基本知识和技巧，本指导书将为大家详细介绍网页设计的要点和步骤。
二、作业目标本次作业的主要目标是让学员了解网页设计的基本原理和流程，并能够独立完成一个简单的网页设计项目。
具体目标如下：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）对表格进行美化。
网页设计实验指导书
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这是一段文本这是一段文本注：以上文字不涉及到文字字体、大小、颜色的设置，且并不居中显示。
DM网页制作实验指导书
DREAMWEA VER 8基础安装好Dreamweaver 8中文版后,运行，选择Dreamweaver 8工作区后，将看到下面的画面：一、①为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S)... CTRL+U[其中CTRL+U是该选项的快捷键],如下图所示：在这里，你可以把自己的DREAMWEAVER MX设置为自己喜欢的样式，一般使用默认就可以了，如下图：为了使用的方便，选中字体这一项目，把参数设置为上图所示的样子，因为默认的时候实在太难看了（当然也可以选自己喜欢的）。
如果你浏览网页时使用的不是IE的话，请选中在浏览器中预览这一项（以后制作网页的时候要用到），点一下那个“＋”添加你使用的浏览器程序。
二、②是插入项目选择工具(插入面板)，在②选中了某个项目，③中会出现相应的插入项目，下面详细介绍，选中常用这一项后如下图：锚点用于网页中的定位，如网页的上、中、下等；图像点位符是用于动态交换图片的，后面再说；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。
在②中选中布局一项，共有标准视图和布局视图两种视图，如下图所示：在标准视图下，可以插入表格和在网页制作区画图层。
切换到布局视图下，如下图：在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格，这个比较好用，可以用来排版网页，后面将说到。
在②中选中文本一项，可以对文本进行格式化，如下图：A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体；这些比较简单，可以自己一项一项慢慢试试，看看字体有什么变化。
在②中选择表单（表格和框架两项后面再说），可以插入各种按钮，如下图：A为表单；B 为文本框；C 为隐藏域；D为文本区域；E为多选框；F 为单选框；G为单选按钮组；H为列表/菜单；I 为跳菜单；J为图像域；K为文本字段；L为按钮；M为标签；N为字段集。
《网页设计与制作基础》实验指导书
实验一网页的认识实验目的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)。
在Dreamweaver中，对文本的输入及编辑，与word极其相似。打开新建或已经建立的页面，把光标放在编辑区中，就可以输入文字/特殊的字符了。
（2）添加中文字体或中文组合字体到字体列表（两种步骤不同）
下面为中文字体的添加步骤：
在属性面板中，单击“大小”左侧的∇图标，选择编辑字体列表,就可看到图3-13的对话框。
在窗口中选择需要插入的图片。如果选择的图片文件在网站目录以外，系统会询问是否将图片复制到网站内，此时应该选择“是”。
将选择好的图片存放在网站内的特定位置。
保存完毕，就可以看到插入的图片效果了，并且可以通过图片属性面板来改变图片的属性。
（2）编辑图像
利用图像属性面板，设置图像的各种属性。
11．创建超链接（以文字为例）
■设置好之后，选择【应用】【确定】即可。
图3-11页面属性设置窗口
（3）网页的创建、保存与打开。
选择【文件】→【新建】，打开如图4-2所示的对话框，就可新建各种类型的网页，此时新建页面的文件名默认为“Untitled-1.htm”，点击保存图标，即可进行保存更改文件名的操作。
图3-12新建文档窗口
9．文本的插入和编辑
（1）插入表格
（2）修改表格样式
（3）填充内容写并对各个网页创建超能链接。如:“”
图4-1表格网页
注：实验报告中要求写出详细步骤。
2．使用框架布局网页
在网页中利用框架布局一般经过如下步骤：
（1）创建框架
（2）设置框架属性
（3）设定初始页面
（4）确定框架间的调用关系
图3-3图3-4
单击【下一步】,弹出图3-4，指定网站所在的本地端文件夹位置单击 按钮，选择E：\shiyan\
单击【下一步】,弹出图3-5，在如何运用服务器技术中选择【无】
单击【下一步】,弹出图3-6，完成。
图3-5图3-6
（3）按照上面的说明设置完成后，此时会弹出文件面板组，显示出如图3-7所示的本地的站点视图。
2、制作一个如图2-2样式所示的个人网站首页，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等。
图2-1个人网站首页
三、实验步骤
1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是FrontPage/Dreamweaver的代码窗口。
2．按各种不同标签的语法规则，输入合法的代码。
网页设计
实验指导书
经济与管理学院
二零一一年二月
实验一网页设计基础实验
一、实验目的和要求
1、了解网站的相关知识，IP地址、域名、主页空间等。
二、实验内容和步骤
1．IP地址的申请
（1）了解IPV4地址申请步骤
（2）查询学校主页的IP地址信息202.119.136.0
（3）/index/0D/index.htm
查询到学校的IP地址段范围、单位、通信地址、联系人等信息
2、域名信息查询
（1）/index/0A/index.htm
查询到相关的域名状态、域名联系人、注册日期等相关信息。
3、域名注册
（1）/
三、实验报告要求
按“实验内容和步骤”完成1～4的网上操作，在实验报告中要求记录如下内容：
二、实验内容
1．动作动画的制作
完成第一个FLASH影片：在黄色背景的屏幕中间，由小到大逐渐扩展显示蓝色文字“第一个FLASH影片”，同时从右向左展开一幅云图图像，一个红色立体球由左上方缓慢移到屏幕中间的下边，移动的同时球由小变大。
基本步骤：
(1) 新建一个影片文件和设置影片的基本属性；
(2) 输入文字“第1个FLASH影片”，设置文字的属性；
从可用字体框中，选择要添加的字体，单击“《“，这种字体就会添加到选择的字体框中了。
单击ok按钮，就可以将这种字体，添加到字体列表中了。
图3-13编辑字体列表框图3-14选择图像源窗口
（3）设置文本格式
可以通过属性面板，包括段落的格式、字体、字号、字的颜色等等，将“单词识记”设置“标题2”其于文字设置成列表格式。
（2）启动ODBC，在ODBC窗口中选择“系统DSM”；
（3）单击“添加”，在“创建新数据源”对话框中选择“Microsoft Access Driver(*.mdb)”驱动；
（4）单击“完成”，在出现的“ODBC Microsoft Access安装”对话框中输入数据源名及说明，并选择要进行链接的数据源；
（4）单击进入“普通”选项卡，返回网页编辑状态，单击“保存”按钮保存设置。
（5）关闭网页。
6．在网页中插入多媒体对象
注：在网页中插入多媒体对象的基本方法为：“插入”/“媒体”/“插件”
三、实验心得体会
实验四网页布局（4课时）
一、实验目的和要求
1．掌握在Dreamweaver8中使用表格布局网页的操作；
（5）单击“确定”即可建立DSN。
8．熟悉Dreamweaver 8的基本工作环境
（1）打开Dreamweaver 8，自行熟悉各菜单、面板等的使用。
（2）设置网页背景属性。
■点击主菜单上的【修改】【页面属性】,弹出图4-1所示的对话框。
■在对话框中可以设置背景标题、背景图像、文本颜色以及各种链接的颜色等等。
3．输入完成后保存代码文件，文件后缀为.htm/.html。
4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。
四、程序代码（在实验报告中写出）
五、实验心得体会
主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
实验三本地站点的创建和编辑
2．掌握在Dreamweaver8中使用框架布局网页的操作；
3．掌握在Dreamweaver8中使用层布局网页的操作。
二、实验内容和步骤
1．使用表格布局网页
表格是将页面中的内容以表格的形式排列，常用于单一页面内图片与文字的安排，是最常用的布局命令。
在网页中利用表格完成如图4-1所示的网页,一般经过如下步骤：
(5)保存框架文件
（6） 建立“简介”“基本元素”“超链接”等页面显示在主框架中。
完成如图4-2所示的网页,并依据一般步骤写出详细步骤，图像可自行选择。
图4-2 框架网页
3．使用层布局网页
建立如图所示的页面
（1）利用菜单“插入”/“布局对象”/“层”或利用插入栏中的常用面板来实现插入图；
（2）从属性面板中设置图层的基本属性
（2）设置超链接属性
选择“文件/属性”命令，打开“网页属性”对话框，单击进入“背景”选项卡。
单击“启动超链接翻转效果”复选框，单击“翻转样式”按钮，打开“字体”对话框，设置鼠标光标指向超链接时显示出的效果。
在“超链接”、“已访问的超链接”和“当前超链接”的颜色列表框中，选择要使用的颜色。
（3）单击进入“预览”选项卡，预览网页，在主页中单击超链接文字，察看链接到的网页。
（1）可以采用以下的任一种方法
在网页中选中要建立超链接的文字，选择文件“插入/超链接”命令，在超链接对话框中选择页面作为超链接的URL。
在网页中选中要建立超链接的文字，单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，在超链接对话框中选择页面作为超链接的URL。
选中超链接文本后，在常用工具栏中单击超链接按钮图标都可以打开对话框。
在文档编辑区将插入点定位到所需位置，选择[插入][HTML][水平线]菜单命令或单击“插入”栏中的“HTML”选项卡在其中单击 按钮即可添加水平线。（如图3-15）
图3-15水平线的属性面板
②插入日期
插入面板中【常用】→【日期】，图3-16；
图3-16插入日期
10．添加图像
（1）添加图像
将光标想要插入图片的位置，点击主菜单上的【插入】【图像】这时出现选择图像源的对话框窗口。
1．定义本地站点
（1）单击【站点】【新建站点】命令，打开图3-1所示的站点定义窗口。
图3-1图3-2
（2）选择“基本”选项卡，在分类列表中选择本地信息选项开始定义站点。
■各选项的设置方法可参考下面的文字说明。
站点名称文本框：输入网站中文名称，如：风行科技(如图3-2)；
单击【下一步】,弹出图3-3，选择【否，不想使用服务器技术】
（3）将“untitled.htm”的网页文件更名为“index.htm”,回车。
3．修改、删除文件名。
直接选中要修改的文件，单击即可修改，或右击并从快捷菜单选择【重命名】。
直接选中要删除的文件，按delete键，或右击并从快捷菜单选择【删除】。
图3-9建立网页文件图3-10站点编辑窗口
6．编辑网站内容
单词识记
英文单词Do的含义:
做，干；
制作，产生；
算出，研究；
行，合适；
Do away with 废掉
Do without 没有┄┄┄也行
Have nothing to do with 和 ┄┄┄┄毫无关系
Have(something) to do with 和 ┄┄┄有点关系
（4）插入其他文本
①插入水平线
1．IP地址的申请步骤，及查询学校的I地址得到的信息；2．查询任一域名地址，记录相关信息；
3．写出域名地址的申请步骤；
4．浏览所列出的几种类型的风站，说明这些网站所包含的主要信息。
四、实验心得体会
主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
（1）在定义了一个或多个本地端的站点之后，往往由于某种原因需要编辑网站的相关数据，这时打开图3-10编辑站点窗口，再按照下面的步骤操作。
（2）选择要修改的网站，完成修改网站的相关设置，完成后单击ok。
（3）回到编辑站点对话框，单击完成按钮结束工作。