《电子商务网页制作》实验指导书.doc

电子商务网页设计实验指导书实验一 网站基础知识一、实验目的和实验内容要求了解网站相关基础知识，IP地址、域名、主页空间等。二、实验基本原理和方法访问网站，熟悉ip地址和域名的申请注册方法和流程，并了解虚拟主机情况。三、实验使用的仪器设备及其基本工作原理计算机，互联网四、实验基本步骤（一）IP地址申请/index/0D/index.htm1.了解IPv4地址申请步骤2.查询学校主页的IP地址信息 可以查询到学校的IP地址段范围、单位、通信地址、联系人等信息 注：目前使用IPv4，IPv6仍处于试验阶段（二）域名信息查询/index/0A/index.htm 可以查询到域名的相关信息，目前比较好的域名都被关注着，过期后未及时注册就会被抢注，时间可能只有几分钟。（三）域名注册/选择你的域名和后缀，查询注册情况（四）域名服务器(DNS)使用ping 命令查询 的ip地址通过该命令可以知道域名的ip地址，是否连通，连接速度，线路是否有数据丢失等（五）了解国内几类典型网站政府类网站：商务部 / 统计局 / 政府网页链接 /govinfo/教育类网站：教育部 / 清华大学 北京大学 门户类网站：新浪网 网易 TOM 电子商务网站： B2B代表 阿里巴巴 / B2C代表 当当网 C2C代表 淘宝网 Ebay中国（原易趣） （六）了解不同类型的主页空间/了解虚拟主机、服务器托管、整机租用的介绍和费用。（七）网站推广1. 了解竞价排名，搜索“汽车”关键词，看赞助商列表2. 看看新浪上面有哪些网络广告，说出给你印象最深的那个广告 五、实验记录与数据处理要求要求详细记录实验步骤，严禁抄袭他们或实验指导书中画面，所有画面必须是自己操作过程中的画面。六、实验中注意事项在实验操作过程中，要仔细阅读相关说明。七、实验思考题1.建立一个网站的主要步骤及要注意的问题？八、实验报告基本要求 按照实验报告格式，详细写出你的操作步骤，关键画面采用烤屏的方式贴到文档中。46实验二 网站建设一、实验目的和实验内容要求学会安装并配置web站点和ftp站点，使用ftp客户端软件进行网页的上传维护。二、实验基本原理和方法利用提供的软件和网站代码配置一个web站点，掌握web服务器和ftp服务器的配置和使用三、实验使用的仪器设备及其基本工作原理计算机，互联网，Serv-U，IIS5.0四、实验基本步骤（一）web服务器软件安装与配置1.web服务器软件的安装Windows操作系统主要选择IIS，Apache，tomcat，其中IIS适合asp，Apache适合php，tomcat适合jsp，本机器IIS已经安装，可以看演示录像了解。Linux操作系统主要使用Apache + php + Mysql组合。2.IIS的配置（1）解压缩以下的一个源代码包（推荐西亚购物系统，配置简单，多次测试无任何问题）到桌面，也可以自己另找源代码解压到任意其它位置。名称演示地址电子商务网站源代码蔚蓝网上商店/西亚购物系统 2004 整合论坛版/SiacartProA/xiya/SiacartProA/动感购物4.0完全正式商业版本/zyshop 正源网上商城程序/文章管理系统源代码Joekoe_CMS_1.2_free/晓宇听幽新闻管理系统/梦凌文章管理系统(终极版)/gb/index.aspMY动力管理系统v3.6正式版/index.asp论坛系统源代码dvbbs7.1.0_ac（动网论坛）/bbsxp/（2）在F盘中建立一个名为web的文件夹，我的电脑右键管理服务与应用层程序设置网站ip地址设置网站主目录为F盘中的xiya文件夹设置默认文档。（二）ftp服务器软件安装与配置1.安装ftp服务器软件，最常用的是serv-u，设置好帐号，文件夹访问权限，只读权限下只能下载不能上传，要上传需要设置为写权限。文件夹设置为xiya站点中的主目录。（三）网站源代码上传并测试网站1使用ftp客户端软件，如flashfxp，cuteftp等将解压后网站源代码全部上传到网站空间（实际上与ftp空间是同一个文件夹，即通过ftp来管理网页文件的上传和更新）。2.通过ip地址访问网站，有些网站需要简单配置一下，请查看源代码包中的说明文本，同时，管理帐号、密码也见说明文档。思考题：理一理你的网站建设的思路，若你想建一个网站，如何操作？ 以后自己需要做比较复杂的网站，如何利用好成熟的网站源代码？五、实验记录与数据处理要求实验报告中画面必须是本人自己实验过程中的画面显示内容。六、实验中注意事项在实验操作过程中，要仔细阅读相关说明。七、实验思考题1.如何在自己的计算机上建立一个可供访问的网站？2当你的网站放在虚拟主机上，如何进行远程更新维护？3如果你想给客户提供虚拟主机服务，如何实现？八、实验报告基本要求 按照实验报告格式，详细写出你的操作步骤，关键画面采用烤屏的方式贴到文档中，打印后上交。实验三 网页设计一、实验目的：了解并掌握使用Dreamweaver制作网页二、实验基本原理和方法利用Dreamweaver MX 2004中文版制作网页三、实验使用的仪器设备及其基本工作原理Dreamweaver MX 2004中文版，可视化网页集成编辑环境四、实验基本步骤综合应用Dreamweaver MX中的文字、图片、超级链接、表格、层、行为等网页制作技术，设计出自己的网页。参考教材，提供的视频演示和本实验项目指导书内容。五、实验记录与数据处理要求自己搜集素材制作网页，不能和实例网页相同六、实验中注意事项在实验操作过程中，要注意课堂上提到的一些注意事项，否则会容易出现图片、链接不正常。七、实验思考题1如何保证自己的网页维护起来更容易？八、实验报告基本要求本实验内容不需要打印，在最后一次实验课上直接提交所制作的网页作品。附录 网页制作技术第一章：界面介绍安装好Dreamweaver MX 中文版(或者汉化版)后,运行，选择Dreamweaver MX工作区后，将看到下面的画面：一、 为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(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 为字段集。（详细的使用方法后面将说到）在 中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。在 中选中字符可以插入一些特殊的字符，如：，其中BR为换行符（快捷键为CTRLENTER，此项与ENTER有所不同，可以自己试试），其它的可以自己试试。在 中选中媒体，可以插入FLASHFLASH按扭FLASH文本Applet等插件。在 中选中文本头，将出现下面的画面：关键字为网页的关键词，可以让搜索引擎搜索到；说明为网页的说明，如作者、介绍等；刷新可以设定多长时间后刷新网页或跳转到其它网页；基础为网页的基本链接，如插入一个目标为_blank基础，网页中的一切默认链接都将打开新窗口；其它比较少用不再详细讲述。在 中选中脚本，可以插入各种Javascript、Vbscript或其它脚本。在 中选中ASP（编辑ASP网页时用到，新手可不必理会），可以插入各种ASP编程里用到的标签。在 中选中应用程序（编辑动态网页时候用到，新手可不必理会），可以对数据库进行操作。三、对 区的详解如下图：在上图中，点击带有向下小箭头的工具，会弹出更多选择。四、 区为网页设计区，你所设计的网页或代码将出理在该区。五、 区为属性区(属性面板)，在该区可以对选中的对象进行一些设置（后面将有详细讲解）。六、 区如下图所示，详细的使用将在后面的章节详细讲述。第二章：定义站点 在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接出错（特别是新手），当熟练掌握了DREAMWEAVERMX的使用后，并且只需制作单个网页时候可以省去这一步；还值得说的是，新手做网页，就只知道做网页，不懂得条理性、结构性，一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。我提倡的做法是：建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内，当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。还有文件的命名也是非常重要的，新手通常不注意这些，随便乱起些名字，这样过些时候自己也搞不懂是什么了（特别是文件比较多的时候），我们要做到一看文件的名字就知道是什么内容的文件。我提倡的做法是：用英文或者拼音给文件命名（推荐英文），不要使用中文的名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。下面开始讲述如何建立站点：方法一：找到 区（第一章已经讲过），展开文件一项，选中站点，然后再选编辑站点，如下图：选中后将出现：然后点击新建:站点名称（N）处填上你要建立的站点的名称，这个名字只起着识别的作用，与网站发布后真实的名字无关；本地根文件夹（F）处选择设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议大家在这里打上钩；其它的可以默认，当然你可以试试选择不同的，默认图像文件夹为站点默认存放图片的文件夹（以后在做网页的过程中，使用非站点内的图片时，它会提示是否把该文件复制到这个文件夹内）；HTTP 地址（H）为你站点的网址 。上图中远程信息一项也是非常有用的，可以用它来管理你的网站（网站不在本机上的时候），如下图：在访问处选中FTP这一项，其中FTP主机（H）为你的网站的FTP地址；主机目录（D）为你的网站所在FTP主机上的目录（一般为根目录,可以不填）；登录（L）为你的用户名；密码（P）为登录密码；如果你链接服务器要用到防火墙，请勾中使用防火墙（U）这一项，并设置好参数；其它的可以根据自己需要选择（保存时自动将文件上传到服务器（A）这一项可以考虑勾选）。其它的如测试服务器，遮盖 ，设计备注，站点地图布局，文件视图列这些，较少用到，为了熟练掌握，可以自己偿试。方法二：找到 区（第一单已经讲过）， 点击站点（S），再选新建站点（N）,其它的操作与方法一相同。站点定义完毕之后，就可以正式制作属于你自己的网页了，下面举个例子：回到 区（第一章已经讲过），展开文件一项，选中站点一项，按上面的方法建立一个站点dwmx(当然可以另起一个名字，这里只是为了方便)，再选文件，将弹出菜单选项，如下图：在上图中：选新建文件夹，然后建立html、image、style三个文件夹，再选新建文件，建立一个index.htm的网页文件（这个为站点的首页），同样你可以在文件这一项内对文件进行其它操作（如删除，设置文件属性，检查链接等）。小提示：所有带有小箭头的选项都是带有弹出菜单的编缉一项可以对站点的文件进行复制，条件选择等操作，可以自己练习。视图一项可以改变站点文件的显示方法和其它的一些信息，可以自己练习。站点一项也是对站点进行操作的，如上传，下载，检查链接，同步等，可以自己练习。在上图中：a 为链接远端主机的操作（如上面建立站点过程中远程信息中提及的FTP主机）；b 为刷新站点内文件的操作（如你修改了站点内的内容，点一下，可以取得最新的列表）；c 为获取文件（从远程主机把文件下载）；d 为上 传文件（把文件上传到远程主机或服务器）；e 为取出文件（从远程主机把文件取出）；f 为存回文件（把文件存回远程主机）；g 为展开/折叠（可以把上图中的窗口展开或收回）。如果你切换到资源，将看到：这里是你站点内的，图片，颜色，链接等（所有用到的资源都可以找到），下面对上图中的各个按钮加以说明：点编辑，可以编辑选取的文件，收藏可以把选中的加入收藏，把一些常用的加入收藏，当文件众多的时候方便查找（特别是做大网站时）切换到收藏，将显示收藏夹里的项目。第三章：学习从最简单的开始一般推荐大家在站点窗口完成新建网页文件的操作，这样有助大家清楚新建的页面在整个网站的具体位置，找到 区(第一章已经讲述)，在站点窗口里新建一个index.htm或index.html文件（上一章定义站点已经讲述过）；当然你也可以从 区(第一章已经讲述)中的文件（F）菜单，选新建（N）其中后面的CTRLN是该操作的快捷键，将出现下面的画面：其中，如果选中模板，将使用模板创建一个新的网页文件，参数选择（P）.处就是第一章中说的参数选择,这里使用默认文档类型为HTML就行了,创建好之后，将文件保存为index.htm（注意：将它保存到站点文件夹里）。htm既是文件的后缀，也是这个网页文件的类型说明，表示这个网页文件是属于静态的HTML文件（也可以用后缀html表示），以后大家紧记将网页的后缀改为htm或html，否则传上到服务器之后，浏览器就无法正常打开，当然以后将会用到ASP或PHP后缀的动态网页。何为CSS？CSS就是Cascading Style Sheets（层叠样式表单）的简称，可以用来统一网页的风格，后面将用详细讲述。提示：为什么网站的第一页的名字通常是index.htm、index.html、index.asp等，而不是其他？举个例子，当你在浏览器打入 这个网址时，其实并没有明确地指定打开哪一个页面，但服务器就会自动寻找index.htm、index.html、index.asp等，道理就在于此处了设置页面属性设置页面属性，是在正式开始制作网页前一个必不可少的工序。双击打开刚才新建的index.htm，就自动转入编辑窗口。选择 区(第一章已经讲述)中的修改(M)， 页面属性(P) CTRL+J为该操作的快捷键，设置一些必要的页面属性，如下图：a 标题（T）：页面的标题会直接显示在浏览器的左上方，例如用浏览器打开草原孤星网站，可以在浏览器的左上角看到该页的标题“草原孤星-轻轻松松做网页(清爽新版)”。务必要养成为每一页都设定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。虽然标题并不是一个网页必要的元素，但却是体现着网页制作者有否从细处为浏览者着想。b 背景图像（I）：点击浏览（B）按钮，可以为网页添加背景图片。c 背景（G）：默认为白色，点击可以选择其他的颜色。后面“#FFFFFF”是以16进制形式显示的RGB色值。d 文本（E）：在这里将文字默认设置为黑色。要注意，假如不对背景及文字的颜色进行设置（此时RGB色值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。但因为不同的系统的设置都可能会有所区别，这样就回导致页面的显示效果也是千差万别。因为，为了更好地让页面体现出你的设计思想，就千万别忘记设定页面的背景颜色及文字颜色。e 链接（L）：设定超级链接的颜色，不设定则默认为蓝色。f 顶部边界和左边界：设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。其它的可以自行设置一次，看看有何不同。以便熟练。确保页面的设置正确后，点击 确定结束。制作一个最简单的网页万事起头难，就让我们先从最简单的网页做起。如果你是按照先前的步骤一步一步做下来，那么应该可以如下类似的画面：此时光标处于 区编辑窗口的最最左上角，现在可输入你喜欢的任何文字，例如：“欢迎来来品味人生网站”，选取文字，在 区属性面板上的大小（S）下拉菜单选取文字的大小，例如“7”，再点击面板上的（这个是让对象居中的操作，旁边分别为居左居右）使文字置中，再在文字前敲几个回车，使文字下移，直到使文字完全至于页面中央高度为止，如下图：选取 区菜单中的文件(F) 保存(S)该操作的快捷键为：CTRL+S保存页面，恭喜你，你的第一个网页就已经完成了，按 F12 注：F12为预览网页的快捷操作，你可以从 区菜单中的文件（F）在浏览器中预览这里操作看看页面效果，满意吗？第四章：用图片美化你的页面上面的网页实在也太单调了，当然无法让大家满意，现在我们来一步一步美化我们的页面。而最简单直接的方法是在网页上添加图片。而很大程度上，人们说一个网页漂亮，通常就是指网页上的图片漂亮。点击对象面板上的( 区中选中常用将在 区找到)按钮，然后弹出对话框，选择需要插入的的图片，如下图：如果被选择的文件，是网站目录以外的文件，系统就会问你时候将图片复制到网站内，如下图。答案当然是“是”，否则网页传上服务器后，图片就不会被显示，因为图片根本就不在网站里面：接着，选择图片在网站的存放位置，如下图。我的做法是将所有图片另存放在同一个目录，例如如图所示的“image”，这样可以方便查找。也有人喜欢将图片和网页文件混放在一起，看各人习惯，没有什么特别好，也没什么特别不好。(不过当站点的文件多起来时就显得不好了)但不知道你有没有留意到第二章里讲述新建站点里提及的默认图像文件夹，如果你设置了这个，将会自动把文件复制到你的默认图片文件夹里去而不会出现上图的对话框。如果你觉得这个操用比较实用，可以现在设置一下（参考第二章，你可以把站点内的image文件夹设为默认图片文件夹）。保存完毕，就可以看页面的效果：复习：细心的朋友可能发现了，上图右边 区的站点小窗口里并没有看到刚才插入的图片，不是按了确定让文件复制进去了吗？，不用急，回头看一下第二章，新建站点里的介绍，是不是说到了一个刷新的按钮，点一下就可以找到刚才插入的图片了,如下图的 b 插入图片后，下面接着讲格式化插入的图片：假设现在我们插入的是如下这张图片：展开区（第一章已经提及）属性面板，点选该图片A 图片的缩略图及图片的大小。B 图片的长宽，如果图片长于宽跟原图的大小不一致的话，这里的数字会用粗体显示；点取一张图片，你可以看到图片会被套上一个框和三个点，三个点分别代表将图片向三个不同的方向拉伸，从而达到放大和缩小的效果；在拉伸过程中，按着Shift键，再拖动角上的点，可以使图片保持宽高比例拉伸，如下图。如果要将图片恢复为原始大小，可以按属性面板右下角的“重置大小”按钮。C 源文件(S)是图片所在的位置；链接(L)是该图片对应的超链接，由于没有做成链接，所以这里显示为空；后面的两个按钮 ，前者可以拉出一个箭头，直接将图片或链接指向文件夹的某一个文件，后者则是按照传统的方法打开文件夹去寻找某一个文件，按照实际操作的经验，前者作用不大；目标(R)是链接的打开方式。关于链接的建立与注意事项将在后面介绍。D 对齐(A)：图片的对齐方式，这是最基本的网页排版方式之一，方式大家可以自行调试，在此就不占篇幅了。替代（T），是图片的说明，假如我在这里输入：“本站LOGO”，在浏览的时候，将鼠标移到图片上，就可以看到这些说明；边框（B）：图片的边框宽度，例如输入 10：E 图片的置左、居中、置右，相信只要你使用过Word2000 ，就不会对他感到陌生。 H 垂直距:指图片离上面的距离，水平距也是同理，只是水平方向。F 用于在一个图片上的不同区域制作多个不同链接，也留待后面介绍如何建立链接时介绍。 第五章：文字处理与链接适当的图片，可以令网页生色不少，但也不要忘记，文字，才是一个网页最基本的要素。现在让我们回过头来看看Dreamweaver可以在文字上耍些什么花招。选取一段文字，此时的属性窗口（ 区）显示如下：A 格式(F)：可以选择几种预设的文字格式；B 选择文字的字体，这里可以选择的全是是英文字体，如果想选择其他字体，就要选择最底的一项，编辑字体列表.(一般的文字编辑，默认字体就可以了),在那里，你可以加入删除字体列表，这里就不多说了；注意：因为别人的系统上不一定装有与你相同的字体，所以不要将一些特殊的字体加到列表中并使用。如果真有需要用到这些字体，应当做成图片后再使用。C 大小(S)：文字的大小，数字越大，文字也越大；D 在这里选择文字的颜色：你不仅可以在上面这个调色版上选取颜色，还可以选取屏幕上的任意颜色。其中可以去掉文字上的颜色，使其显示为默认颜色值；可以选择其他样式的调色版（可以试试选择不同的，看看调色板有什么变化）；可以在扩展调色版上选取颜色：在这里，不仅可以选取更为丰富的颜色，还可以通过填写RGB数值来选取颜色并将该颜色值保存起来方便以后调用。E 是设置字体为粗体和斜体。 F 设置文字的置左、置中、置右。G 为链接的网址，或文件的路径，如：选中文字，填上,刚文字链接到品味人生网站。H 设置文字段落标号，如： 新浪 搜狐 网易 或 1. 新浪 2. 搜狐 3. 网易 是设置文本的凸出和缩进的，如：品味人生品味人生其实属性面板上还有一些小按钮的，不知道你有没有留意到了：a 点击可以显示或隐藏该面板（所有面板上的该按钮均有此功能）；b 点击可出现弹出菜单（所有面板上的该扭钮均有此功能），如下图：如果选择了关闭面板，可以在菜单区（ 区）找回属性面板；d 展开或隐藏非常用的项目（所有面板上的该扭钮均有此功能）；e 快速标签编辑器，如果对HTML标签了解的话，使用该项可以事并功倍。超级链接（L），简称链接，是页面与页面之间一个单向的关联关系。通过点击链接，我们可以从一个页面跳到另一个页面。我们可以在文字、图片建立链接。1、文字链接在页面中选取需要建立链接的文字，如下图：在属性面板的链接(L)一项，填写链接地址，当浏览者点击该链接的时候，浏览器就回跳转到该页面，例如这里填写的是：如果你希望该页面是在一个新窗口打开，可以在目标(T)中选择“_balnk”。如果要链接到网站内的文件，可以点击 ：上图中，我们是将文字链接到dwmx04.htm这个文件，特别注意的是最底的相对于的选项，意思是选择相对路径的形式，默认是文件，也可以选择根目录，区别在于，文件是指相对路径是从本页开始计算，而根目录是从根目录开始计算（即“/”）另外，如果使用站点根目录的模式做成的链接，在本地硬盘直接打开页面浏览通常会出错，但在Dreamweaver的预浏模式和上传上服务器后，都不会有问题。2、图片链接图片链接的建立过程与文字链接相似，就不多作介绍了。但特别要提出的是，某些图片，在加上链接后，会出现一个蓝色的边框，要将边框去掉，将边框(B)设为0即可。3、热区链接前面介绍的图片链接，一张图只能对应一个链接，能不能一张图对应多个链接呢？答案是可以的，选取一张图片后，可以在属性面板( 区)看到地图（M）选项：其中： 创建矩形热区， 创建原形热区， 创建多边形热区。例如我们现在点，光标变成一个十字，此时可以在图片上画出一个蓝色矩形的热区：此时对应的属性面板为：同样地，在链接(L)输入链接地址（“#”表示一个空链接），而替代(T)则为当鼠标指向热区时所显示的文字，与图片的替代(T)相似。我们可以通过 选择不同的热区，并通过调整热区四个角的控制点调整热度的大小。通过热区，我们可以在图片的任何地方做一个链接，当然可以在一张图片画很多热点，做很多链接，分别链接到不同的页面。关于链接的提示：1、如果要链接到一个E-mail地址，则在链接(L)处填写：“mailto:地址”，例如mailto:，或者点 区为常用时 区中的，填上文本和E-Mail。那么点击该链接的时候，就回打开默认的E-mail程序，例如Outlook，发送E-mail到这个地址。2、如果链接到浏览器无法打开的文件，例如exe、Zip等文件，那么浏览者在点击这个链接的时候，就会弹出对话框，询问是将文件保存到硬盘的什么地方，这就实现了文件下载的功能。思考：何为相对链接和绝对链接？绝对链接指示文件的完整路径，如：htttp://homepage/homepage.asp或者：D:草原孤星新版homepagedwdw4dw42.htm相对链接指示文件的相对路径，如：文件index.htm和defaule.htm在同一目录下，从index.htm链接到default.htm只需要在链接处填上：default.htm就可以了，如果default.htm在index.htm的上级目录则：./default.htm,“./”用于返回上级目录。一般将链接做为相对的，因为这样兼容性比较好，可移植。如果做成绝对的链接，当把网站换了目录后，所有链接将要重新做过。目标（T）的说明：_blank为打开新窗口；_parent为父窗口（使用框架时）；_seft为本窗口；_top为上级窗口（使用多级框架时）第六章：网页的排版(表格篇)表格是网页的一个非常重要元素，因为HTML本身并没有提供更多的排版手段，我们往往就要借助表格实现网页的精细排版。可以说表格的是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了了网页设计师的水平。点击对象面板的，看到如下的对话框：A 行数：表格的行数；列数：表格的列数；B 宽度：表格的宽度，单位可以是像数（Pixels）或百分比（Percent）。按像素定义的表格大小是固定的，而按百分比定义的表格，会按照浏览器的大小而变化。后面会继续深入讲解两种定义方法的区别；C 边框：表格线的宽度；D 单元格间距：单元格间距；单元格填充：单元格内距。所谓的单元格，就是表格里面的每一小格。按照如图的设置后，就得到下面这个表格： 在表格线上点一下，可以全选整个表格，此时可在属性面板看到：A 行(R)，列(C)：表格的行和列；B 宽(W)，高(H)：表格的宽和高，通常情况下，我们都不会定义表格的高度；C 间距(S)，边距(P)：单元格间距和单元格边距；边框(B)：表格线的宽度；D 对齐(A)：表格的对齐方式，可以将表格靠左（Left）、置中（Center）、靠右（Right）；E 消除列的宽度设置；消除行的高度设置；将表格宽度的设置由百分比转换为像素；将表格高度转化为象素；将表格宽度转化为百分比；将表格高度转化为百分比；F 背景颜色(G)：设置表格的背景颜色；G 边框颜色(R)：设置表格线的颜色；H 背景图像(B)：设置表格的背景图，如果设置了背景图，背景颜色就失效了；点击后面的公文包按钮选择背景图；如果我们把光标移到其中一个单元格，此时看到的属性面板又有所不同：A ：合并单元格（之前要先选择相应的需要合并单元格）；：拆分单元格，拆分为多行或多列；B 水平(Z)：单元格内部的水平对齐方式，作用与 类似；垂直(T)：单元格内部的纵向对齐方式；C 宽(W)，高(H)：单元格的宽度与高度；D 背景(B)：单元格背景图；E 背景颜色(G)：单元格背景颜色；F 边框(R)：单元格边框颜色。如果你的网页里没有一个表格，那可以说算不上一个网页（FLASH做的除外），表格的重要性就可想而知。表格的参数说得差不多了，使用表格有很多的技巧，你可否知道呢？1.使用表格排版网页，可以使你的网页更美观。（将表格的宽设为100%,可以使网页的兼容性更好），有的人喜欢有层来排版，但层在不同分辨率的浏览器中有不同的效果，兼容性不好。2.不要把整个网页放在一个大的表格里，因为一个大表格里的内容要全部LOAD完才会显示，如果整个网页放在一个表格里，那么你的网页就只会两种情况：1）全部不显示。2）全部显示出来。3.插入一个表格，边框大小设为0（border=0），间距设为1（cellspacing=1 ），背景色设为深色（如bgcolor=#000000），全部选定单无格，并将单无格的背景色设为浅色（如:bgcolor=#FFFFFF），这样可以得到一个细线边框的表格，请看下面的例子： 当然你也可以另一种方法做到：将表格的边框设为0，选取表格，用CSS样式，为表格设一个大小为1的边框（这种方法做出来的兼容性会差一些）。4.动态改变表格的颜色，可让网页更有动感，把鼠标移到下面表格看看效果。 在单元格的标记里加上：onMouseOut=this.style.backgroundColor= onMouseOver=this.style.backgroundColor=lightgreen就可以了；这些是些javascript脚本，如果你看不懂，可以暂时不必理会，其中lightgreen为鼠标移上去的时候单元格出现的颜色。5.用表格代替水平线，插入一个表格，将高度设为1（按需要设定），当然也可以将宽设为1，制作竖线。注：在DREAMWEAVER里制作时，先将高设为1后，切换到代码窗口，将表格里的空格符去掉（ ）,如果不去了，将看不到效时。请看下面 6.制作有立体感的表格，请先看下面的几个例子：A B C A 表格的参数：border=1 cellspacing=0 cellpadding=0 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CCB 表格的参数：border=1 cellspacing=2 cellpadding=0 bgcolor=#9999CCC 表格的参数：border=1 bordercolor=#FFFFFF bordercolorlight=#000000 bgcolor=#9999CC其实有一个技巧：把bordercolor设为浅色一点，表格就会凸起来了。表格的特殊属性，请看下面的例子：表格的说明 代码如下： 表格的说明 表格的嵌套在网页制作中被经常使用到，尤其是在新浪、搜狐、网易等门户网站中，为了使大量的信息整齐地展示在浏览者面前，表格的嵌套就使用得最为频繁。下图是品味人生的首页在编辑状态下的情况，可以看到，页面密密麻麻地布满了表格线：在刚开始时候，对上面表格应用可能看得不太懂，但做网页时间长了，就可以领悟出其中道理了。第七章：网页的排版(层的使用)如果你觉得用表格对页面元素进行定位太难掌握，不妨尝试利用层（Layer）这个好东西。点击属性面板的（ 区选中常用 区中可找到）按钮，光标会成为一个十字，在编辑窗口上拖动，就可以创建出一个层，我们可以在层上输入绝大部分的网页元素，例如图片、文字等、表格。层的好处是可以放置在页面的任何位置，如下图：选择一个层后，对应的属性面板如下：A 层编号：层的名称，用于识别不同的层；B 左(L)，上(T)：层的位置，左是距离页面左边界的距离，上是距离页面上边界的距离；宽(W)，高(H)：层的宽和高；C Z轴(Z)：层的Z轴顺序；D 背景图像(I)：层的背景图；E 显示(V)：层的显示状态，其中的隐藏是将层隐藏，处于不可见状态；F 背景颜色(C)：层的背景颜色；G 标签(A)：层使用的代码方式，一般使用默认的DIV即可；H 溢出：如果层里面的文字太多，或图片太大，层的大小不足以全部显示的时候，可以选择：visible：超出的部分照样显示；hidden：超出的部分隐藏；scrool：不管有否超出，都显示滚动条；auto：有超出时才出现滚动条；层的优点很明显，但缺点也同样明显，例如难以制作一个适应不同分辨率的网页；当一个页面使用了多个层后，页面的复杂程度增加而导致编辑起来非常烦琐；编辑状态与浏览状态的实际效果有相当明显的差别等。通常人们是采用利用层(Layer)进行排版，然后将层转换为表格的做法（修改(M) 转换(C) 转换图层为表格(L)），大家可自己尝试一下。下面讲述用图层排版：前面之所以以将图层与表格互换的功能一笔带过，是因为在dreamweaver 4.0以来，推出了一个新的Layout排版功能，能够更加直接方便地对页面布局进行编排，在 区（插入面板）中选中布局，将看到：在标准视图下，可以像常规一样，插入表格，图层；切换到布局视图，如果你第一次使用，将遇到下图的对话框：如果你勾了不再显示此消息一项，在以后的切换将不在出现；切换到布局视图后，将看到：其中：绘制布局表格：象画图一样在页面里面排版表格；绘制布局单元格：在表格中画单元格。现在我们尝试利用以上的工具排版一个新页面：新建一个页面，点在页面上画出表格，再点，在表格中画出单元格，其中表格会以绿色框表示，单元格会以蓝色表示，未确定的单元格会以灰色表示，如下图：在这里，每一个表格，单元格的大小都可以随意的调整。最后切换标准视图，你会发现，刚才画的“布局表格”已经全部转化为表格了。如下图：另外，在布局视图上的表格上有一个数字，表示的是表格的宽度，单击数字，可以看到以下菜单：列设置为自动伸展：列自动伸缩，就是表格可以按照屏幕比例来自动调整宽度，相当于将表格的宽度定义为百分比。添加间隔图像：增加/移去透明图片。透明图片的作用就是撑住表格的宽度。清除单元格高度：把单元格高度清除掉。第八章：互动效果(行为应用)互动效果一：在网页上经常看到这样的效果，当鼠标移到一张图片上的时候，原来的图片就切换为另一张图片，鼠标移开后，又恢复原来的模样，是怎么做的呢？Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在，我们就利用Dreamweaver制作这个最简单的互动效果变换图片。 准备两张大小相同的图片，一张是鼠标还没有移上的状态，另一张是鼠标移上去后的图片，例如以下两图：点击对象面板上的 （ 区选中常用，在 区可找到），看到如下的对话框：A 图像名称(Image Name)：变换图片效果的标记名称，Dreamweaver会自动分配；B 原始