《Internet与网页设计》实验指导书

1、Internet与网页设计实验指导书信息学院 电子商务系二一三年一月目 录实验1 Internet基础11、Internet起源12、WWW工作原理23、浏览器24、搜索引擎的使用35、网站规划56、网站发布方法（IIS）6实验2 Internet基本应用101、Internet基本服务102、常用IP命令113、LOGO设计软件12实验3 HTML基础与Dreamweaver操作161、HTML语言简介162、Dreamweaver CS5窗口布局193、创建与管理站点204、新建与保存文件225、设置页面基本属性236、表格与列表277、超链接308、多媒体329、表单3510、框架*40

2、11、使用模板*4612、行为面板*5013、CSS面板*57实验4 Fireworks基本操作621、Fireworks CS5窗口布局622、基本知识663、常用操作68实验5 CSS基础901、CSS（层叠样式表）简介902、CSS样式的声明903、CSS样式的应用914、CSS高级语法945、CSS的常用属性1026、CSS页面布局113实验6 JavaScript语言和JQuery基础*1431、JavaScript的使用1432、JavaScript的基本元素1453、JavaScript基本语句1534、使用JavaScript函数1585、JavaScript中的对象1616、

3、JavaScript的内置对象1667、对象的操作语句1778、DOM对象及事件编程1809、jQuery基础*197- II -实验6 JavaScript语言和JQuery基础*实验1 Internet基础Internet，中文正式译名为因特网，又叫做国际互联网。它是由那些使用公用语言互相通信的计算机连接而成的全球网络。一旦你连接到它的任何一个节点上，就意味着您的计算机已经连入Internet网了。Internet目前的用户已经遍及全球，有超过几亿人在使用Internet，并且它的用户数还在以等比级数上升。一、实验目的1、 了解Internet起源与常用浏览器；2、 了解搜索引擎的基本原理

4、；3、 了解网站发布方法；二、实验准备1、 实验环境：Windows XP professional以上（包含IIS）、Internet三、实验资料1、Internet起源Internet的雏形是ARPANet。ARPANet是美国国防部高级研究计划局ARPA（Advanced Research Project Agency）为了将几个军事及研究用计算机主机连接起来而建立的，该网于1969年投入使用。1974年，TCP/IP协议诞生，随后美国国防部决定将协议公开，全世界可以无条件免费使用。1983年，ARPANet分裂为两部分：ARPANet和纯军事用的MILNet。并在1983年初，ARPA

5、Net的所有主机的协议都转换成为TCP/IP协议。1983年至1989年，Internet逐渐在教育、科研领域发展和普及。其中，最为引人注目的是NSFNet。这是美国国家科学基金会NSF（National Science Foundation）在1986年建立的主要用于教育科研的网络。NSFNet使得Internet向全社会开放，而不象以前那样仅仅由计算机研究人员、政府职员和政府承包商使用。1989年，从ARPANet分离出来的MILNet和NSFNet实现连接，开始采用Internet这个名称，ARPANet宣告解散。自此，各类局域网和广域网相继并入到Internet中，Internet逐步

6、壮大起来。而1989年诞生的万维网（World Wide Web，WWW）更是为Internet解决了信息的存储、发布和交换的难题，从此Internet进入了高速成长期。20世纪90年代初开始，商业机构开始进入Internet，成为Internet发展的强大推动力，Internet开始了它的商业化进程，而Internet的服务也逐渐向多样化发展。现在Internet已进入到日常生活的各个领域，其在规模和结构上都有了巨大的发展，可以说Internet已成为一个名副其实的“全球网”。图1.1 Internet发展史2、WWW工作原理WWW是一种B/S结构（Browse/Server，客户机/服务器

7、）的系统。在WWW方式下，客户端使用浏览器访问服务器，过程大致如下：（1）用户通过客户端浏览器向Web服务器发出一个请求，通常是一个URL。（2）Web服务器接收到请求后，把URL转换成页面所在服务器上的文件路径名。（3）如果URL指向的是一个普通的HTML文档，Web服务器直接将它的代码传送给客户端浏览器。HTML中可能包含Java、JavaScript、VBScript等编写的小程序，这些程序也传送到浏览器。（4）如果URL指向的是CGI、ASP或JSP等类型的文档，则Web服务器先执行其中的程序，再将结果以HTML的形式传送到浏览器。（5）客户端浏览器根据HTML的格式显示网页，由于HT

8、ML文件与其中要显示的元素是分开存放的，因此如果网页中包含图片等元素，浏览器还要再次向服务器请求相应的元素文件。（6）当所有HTML代码文件和其中的元素文件都传送完毕，访问过程结束。图1.2 WWW工作原理3、浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。网页浏览器主要通过HTTP协议与网页服务器交互并获取网页，这些网页由URL指定，文件格式通常为HTML，并由MIME在HTTP协议中指明。一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。大部分的浏览器本身支持除了HTML之外的广泛的格式，例如JPEG、PNG、GIF等图像格式，

9、并且能够扩展支持众多的插件（plug-ins）。另外，许多浏览器还支持其他的URL类型及其相应的协议，如FTP、Gopher、HTTPS（HTTP协议的加密版本）。HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。图1.1 主流浏览器四大类浏览器：(1) IE内核：包括IE、360安全浏览器、MyIE9、Greenbrowser、Maxthon2、世界之窗、以及刚开始的搜狗。(2) Chrome内核：如 Chrome浏览器。(3) 双核（IE和Chrome/webkit内核）：双核的意思是一般网页用Chrome内核（即高速模式）打开，网银等指定的网页用

10、IE内核打开。如360高速浏览器、搜狗高速浏览器。(4) Firefox。提示：不同浏览器采用不同排版引擎，因此显示同一网页的效果会有较大差异，即使同是IE浏览器，不同版本的差异也很大，在网页制作过程中要考虑不同浏览器的效果。4、搜索引擎的使用搜索引擎按其工作方式主要可分为三种，分别是全文搜索引擎（Full Text Search Engine）、目录索引类搜索引擎（Search Index/Directory）和元搜索引擎（Meta Search Engine）。Ø 全文搜索引擎 全文搜索引擎是名副其实的搜索引擎，国外具代表性的有Google、Fast/AllTheWeb、Alta

11、Vista、Inktomi、Teoma、WiseNut等，国内著名的有百度（Baidu）。它们都是通过从互联网上提取的各个网站的信息（以网页文字为主）而建立的数据库中，检索与用户查询条件匹配的相关记录，然后按一定的排列顺序将结果返回给用户，因此他们是真正的搜索引擎。从搜索结果来源的角度，全文搜索引擎又可细分为两种，一种是拥有自己的检索程序（Indexer），俗称“蜘蛛”（Spider）程序或“机器人”（Robot）程序，并自建网页数据库，搜索结果直接从自身的数据库中调用，如上面提到的7家引擎；另一种则是租用其他引擎的数据库，并按自定的格式排列搜索结果，如Lycos引擎。 图1.2 常用全文搜索

12、引擎Ø 目录索引 目录索引虽然有搜索功能，但在严格意义上算不上是真正的搜索引擎，仅仅是按目录分类的网站链接列表而已。用户完全可以不用进行关键词（Keywords）查询，仅靠分类目录也可找到需要的信息。目录索引中最具代表性的莫过于大名鼎鼎的Yahoo雅虎。其他著名的还有Open Directory Project（DMOZ）、LookSmart、About等。国内的搜狐、新浪、网易搜索也都属于这一类。 图1.3 常用目录搜索引擎Ø 元搜索引擎 (META Search Engine)元搜索引擎在接受用户查询请求时，同时在其他多个引擎上进行搜索，并将结果返回给用户。著名的元搜索

13、引擎有InfoSpace、Dogpile、Vivisimo等（元搜索引擎列表），中文元搜索引擎中具代表性的有搜星搜索引擎。在搜索结果排列方面，有的直接按来源引擎排列搜索结果，如Dogpile，有的则按自定的规则将结果重新排列组合，如Vivisimo。除上述三大类引擎外，还有以下几种非主流形式：1、集合式搜索引擎：如HotBot在2002年底推出的引擎。该引擎类似META搜索引擎，但区别在于不是同时调用多个引擎进行搜索，而是由用户从提供的4个引擎当中选择，因此叫它“集合式”搜索引擎更确切些。2、门户搜索引擎：如AOL Search、MSN Search等虽然提供搜索服务，但自身即没有分类目录也没

14、有网页数据库，其搜索结果完全来自其他引擎。3、免费链接列表（Free For All Links，简称FFA）：这类网站一般只简单地滚动排列链接条目，少部分有简单的分类目录，不过规模比起Yahoo等目录索引来要小得多。由于上述网站都为用户提供搜索查询服务，为方便起见，我们通常将其统称为搜索引擎。其他专用的搜索引擎：i. 职位搜索 : ii. 房产搜索： iii. 购物搜索： iv. 旅行搜索 : v. 生活搜索: vi. 论坛搜索： vii. Blog 搜索： 5、网站规划(1) 网站目录结构通常网站中的文件和图片素材较多，为了使网站目录清晰、便于管理，需要建立网站根目录，并在根目录下建立不同

15、的文件夹来存放各种素材，如“images”文件夹存放各种图片素材、“style”文件夹存放样式表（.css）文件、“js”文件夹存放网页脚本（.js）文件等，如果网页文件（.html或.htm）也很多，建议也分类存放，如下图所示。网页制作过程中使用的素材、链接的外部文件必须要复制到根目录下，并且使用后不能随意移动，否则会影响网页的浏览。MyWebimagesjsstyleswfindex.htmljianjie.htmllogo.giftop_bg.gifmenu.jsweb.cssfly.swf图1.4 网站目录结构提示：由于汉字编码在不同操作系统或软件中存在差异，所以网站文件夹或网页文件名

16、应当使用英文或拼音字母。(2) 页面风格设计一个网站应该具有一个相对统一的风格，如页面布局、主要颜色、文字大小等，因此，在设计网站之初就应该确定一些通用的属性，如链接样式、正文字体、网页背景等，这些功能都可以通过CSS来实现，另外，合理的使用Dreamweaver的模板功能也能够让网页设计事半功倍。(3) 首页网站都有一个首页，是网站的主要入口，通常网站主页命名为“index.htm”或“index.html”，通过首页中的链接可以找到其他的网页。一个好的网站应该是所有的页面都可以通过链接的跳转打开，并且其他页面也可以随时跳回首页（是页面链接，而不是使用IE的“退回”功能），并且每个页面都没有

17、“死链接”，即链接到不存在的位置。(4) 图片素材网站素材是网站最重要的组成部分，网站LOGO、背景、一些导航图片和按钮等，都要用到各种图片素材。通常网页中的图片素材可以通过一些素材网站下载，也可以使用fireworks等图像工具制作。为了能让网站的素材也符合网站的总体风格，可以使用fireworks制作网页整体效果图，然后分割成不同部分，以备网页设计时使用。6、网站发布方法（IIS）(1) 安装IIS 5.0IIS是微软出品的可以架设WEB、FTP、SMTP服务器的一套整合软件，捆绑在 Windows XP中，但在部分版本的默认安装中是不会安装的，可以在操作系统安装时选择安装IIS，或者在操

18、作系统安装后，在控制面板的【添加/删除程序】|【添加/删除Windows组件】|【Internet信息服务(IIS) 】。 图1.4 选择IIS组件 图1.5 安装过程安装完成后，系统自动创建一个Web服务器，设置了一个默认的Web站点，该站点位于C:InetPubwwwroot下，默认的IP地址为，域名为http:/localhost。(2) 启动IIS启动【控制面板】|【管理工具】中找到应用程序【Internet信息服务】（IIS），IIS程序窗口如下图：图1.6 IIS程序窗口选择目录树中的【默认网站】，可以通过点击窗口工具栏中的“”、“”和“”来控制IIS程序的运行、

19、停止、暂停。提示：IIS成功安装以后，IIS服务在Windows启动时是自动启动运行的，可以在【控制面板】中的【管理工具】的【服务】中设置是否自动启动【IIS Admin Service】服务。(3) 设置主目录与主文档每个Web站点必须有一个主目录，也应该在该目录下设置一个主文档。主目录映射为站点的域名、服务器名或IP地址。当客户端在浏览器地址栏内输入Web服务器的域名、服务器名或IP地址后，浏览器就会查找主目录下的主文档。要改变Web服务器默认的主目录，在如图1.6所示的IIS程序窗口中，用鼠标右键单击目录树中的【默认网站】项，打开如图1.7所示的属性页，指定主目录的位置。主目录可以是计算

20、机硬盘上的目录、另一计算机上的共享位置、重定向到新的URL。本例主目录指向D:MyWebSite。 图1.7 默认Web站点属性-主目录 图1.8 默认Web站点属性-主文档要改变Web服务器的主文档，可在如图1.7所示的对话框中选择【文档】选项卡，打开主文档设置对话框，如图1.8所示。选中【启用默认文档】复选框，点击【添加】按钮后，在【添加默认文档】对话框中，输入主文档名。主文档名可以使用任何名称，但必须是操作系统支持的文件名。名称必须由字母和数字组成，不能包含空格。最常用的名称是default.htm和Index.htm。当主文档不止一个时，系统会自动从上到下查找主文档是否存在，可以使用“

21、”、“”调整主文档的次序。也可以使用【删除】按钮删去一些主文档名。提示：只有当客户端浏览器只请求域名、服务器名或IP地址时，系统才会查找主文档，如果请求中包含所需要的文件名，则主文档不会起作用。设置完成后，在浏览器窗口中输入http:/localhost/、/或http:/本机机器名，即可看到如图1.9所示的效果。图1.9 浏览网页如果要在网络中的其他计算机上访问上述站点，则窗口输入对应主机名或IP地址。(4) 创建虚拟目录Web服务器只能建立一个默认站点，若要在同一台计算机上同时建立其他站点，可以创建虚拟目录。虚拟目录的原理与默认Web站点类似，也有一个供浏览器

22、读取的目录，但并不具有独立的地址，而是假设为默认站点中的一个子目录。虚拟目录有一个别名，用于在Web浏览器中访问此目录。创建虚拟目录的步骤：（1）右键点击【默认网站】，选择【新建】|【虚拟目录】命令；（2）在向导中输入别名，如ec；（3）选择Web站点内容目录，如E:projectec；（4）完成向导。这时在【Internet信息服务】窗口中，在【默认网站】目录树下多了一个“Site”虚拟目录，右键点击该项，打开属性页，同样可以设置【虚拟目录】和【文档】，如图1.10所示。图1.10 虚拟目录的属性在浏览器窗口中输入http:/localhost/ec或/ec即可

23、测试该虚拟目录。(5) 使用其他Web Server（Sws Asp Web Server）由于IIS服务器较为复杂，且包含了其他不必须的组件，因此并不是普通网页开发者的首选。目前也有很多小巧的服务器软件，功能强大且操作简单，如迷你ASP服务器(Sws Asp Web Server) 是一款小巧轻盈的Asp Web服务器，能几近完美的支持html网页以及ASP。使用说明： 1. 将应用程序放置在网站根目录下，双击运行；2. 双击右下角任务栏图标即可为您开启网站，也可以使用“http:/localhost:端口号/”访问网站。图1.11 Sws AspWebServer运行界面提示：在【默认端口

24、】中可输入多个端口号，系统自动选择最前面且未被占用的端口。四、实验内容和要点1、利用搜索引擎查找以下内容（请利用Word保存搜索结果）：i. 写出常见的几种浏览器软件（至少4种）及其主页地址ii. 利用搜索引擎查找：我们学校在互联网上申请的是A类网，B类网还是C类网，IP地址为多少？并记录（其中IP地址记录地址段即可）。iii. 互联网的组织结构是怎么样的，互联网由谁来管理？iv. 目前IPv4的使用状况如何，IPv4和IPv6分别是如何分配的？v. 如何申请域名和IP地址？vi. 互联网的接入方式有哪些？2、制作一个简易的网页，步骤：a) 创建以自己学号命名的文件夹，并按图1.4的要求建立网

25、站目录结构；b) 在文件夹内新建一记事本文件，并直接编辑网页内容；<html><head><title>我的第一张网页</title></head><body>大家好，欢迎访问*（此处为学生姓名）的个人主页！</body></html>c) 选择【文件】【另存为】1-1.htm或1-1.html，注意文件取名写上扩展名“.htm”或“.html”都可以。d) 双击刚才保存的网页文件进行浏览。e) 下次再编辑可直接在网页上单击右键，选择【查看源文件】进行编辑。3、将以上网页在本地系统中发布五、实验课时

26、：3课时六、课后练习1、浏览学校网站，查看部分网页的HTML代码，并分析学校网站的网站结构。2、了解Google、Baidu搜索引擎的原理，思考如何利用其规则对网站进行优化，以便让网站排名更靠前（SEO，搜索引擎优化）。- 232 -实验2 Internet基本应用当我们进入Internet后，就可以利用其中各类网络和各种计算机上无穷无尽的资源，同世界各地的人们自由通信和交换信息，以及去做通过计算机能做的各种各样的事情，享受Internet为我们提供的各种服务。一、实验目的1、 了解Internet中的常用服务；2、 了解常用的IP命令；3、 熟悉LOGO设计软件；二、实验准备1、 实验环境：

27、Windows XP professional以上、Internet2、 使用软件：AAA Logo三、实验资料1、Internet基本服务1信息浏览（WWW） 服务 www，也叫做web，是我们登录Internet后最常利用到的Internet的功能。人们连入Internet后，有一半以上的时间都是在与各种各样的web页面打交道。在基于web方式下，我们可以浏览、搜索、查询各种信息，可以发布自己的信息，可以与他人进行实时或者非实时的交流，可以游戏、娱乐、购物等等等等。 2电子邮件（E-mail） 服务 在Internet上，电子邮件或称为E-mail系统是使用最多的网络通信工具，E-mail

28、已成为倍受欢迎的通信方式。你可以通过E-mail系统同世界上任何地方的朋友交换电子邮件。不论对方在哪个地方，只要他也可以连入Internet，那么你发送的信只需要几分钟的时间就可以到达对方的手中了。 3远程登录（Telnet） 服务 远程登录就是通过Internet进入和使用远距离的计算机系统，就像使用本地计算机一样。远端的计算机可以在同一间屋子里，也可以远在数千公里之外。它使用的工具是Telnet。它在接到远程登录的请求后，就试图把你所在的计算机同远端计算机连接起来。一旦连通，你的计算机就成为远端计算机的终端。你可以正式注册（login）进入系统成为合法用户，执行操作命令，提交作业，使用系统

29、资源。在完成操作任务后，通过注销（logout）退出远端计算机系统，同时也退出Telnet。 提示：试试启动【命令提示符】，输入以下命令telnet 、telnet towel.blinkenlights.nl4文件传输（FTP） 服务FTP（文件传输协议）是Internet上最早使用的文件传输程序。它同Telnet一样，使用户能登录到Internet的一台远程计算机，把其中的文件传送回自己的计算机系统，或者反过来，把本地计算机上的文件传送并装载到远方的计算机系统。利用这个协议，我们就可以下载免费软件，或者上传自己的主页了！2、常用IP命令(1) IPCONFIG ：用于显示当前计算机的TCP

30、/IP配置值使用格式： IPCONFIG 或者 IPCONFIG -all，主要练习：查看本机的TCP/IP配置，并请比较以上两者的不同。方法如下:提示：【开始】【运行】，键入CMD命令，回车；键入ipconfig /all 或ipconfig图2.1 “ipconfig /all”运行结果(2) PING：用于检验与远端计算机或本地计算机是否相连使用格式：Ping 参数 地址 参数介绍如下：i. t：检验与指定计算机的连接，直到用户中断（按ctrl+c键）ii. -a：将地址解析为计算机名 例如：ping a iii. -n count：发送由count指定数量的ech

31、o报文。在默认情况下，一般都只发送4个数据包，通过这个命令可以自己定义发送的个数，对衡量网络速度很有帮助。比如想测试发送25个数据包的返回的平均时间为多少，最快时间为多少，最慢时间为多少就可以通过以下获知：Ping n 25 iv. l length：定义echo数据包的大小，最大为65500。v. 常规使用 ping 地址 如ping 5 即为测试本机与IP地址为5是否互通。主要练习：查询你的电脑与自己同学的电脑是否互通，请写出查询的ping命令。提示：【开始】【运行】，键入CMD命令，回车；键入对应的ping命令，可以不用

32、参数(3) NSLOOKUP：（选作）可以查询一台机器的IP地址和其对应的域名。它通常需要一台域名服务器来提供域名服务。如果用户已经设置好域名服务器，就可以用这个命令查看不同主机的IP地址对应的域名。格式：nslookup IP地址域名 如 nslookup 查询一个地址下的所有主机名（四级域名），例如nslookup （表示回车）Ls 主要练习：利用nslookup命令和子命令ls查询财经学院所有的主机名称，并写出其中4个。提示：【开始】【运行】，键入CMD命令，回车；键入nslookup命令，回车；再键入ls ，回车(4) 跟踪路径命令：TRACERT（选作）功能：tracert 命令显示

33、 用于将数据包从计算机传递到目标位置的一组 IP 路由器，以及每个跃点所需的时间。如果数据包不能传递到目标，tracert 命令将显示成功转发数据包的最后一个路由器。 命令格式：TRACERT -d-h max_hops-w timeout 名称或地址i. -d:指定不将地址解析为计算机名ii. -h max_hops:指定搜索目标的最大跃点数iii. -w timeout：指定每次应答的等待时间（微秒计）主要练习：查询从学校访问新浪网的路径。提示：【开始】【运行】，键入CMD命令，回车；键入tracert 3、LOGO设计软件AAA Logo 是一个功能强大的 LOGO 设计软件，提供100

34、余种模板，2080多种素材。所有的素材都是向量图，可以方便的放大缩小。你也可以自己创作素材，用于设计。(1) 软件注册图2.2 注册界面和注册码 (2) 选择模板运行AAALogo后，就会弹出模板选择窗口，该软件集成100余种LOGO模板，可以点击右下角的【Next Page】或【Previous Page】按钮切换，浏览并选择自己中意的模板，如果你不希望使用软件集成的模板，相通过自己的创意制作来制作LOGO图标，可以按下ESC键直接进入软件主界面。图2.3 选择模板(3) 编辑图标点击选中的模板就可以进入软件的编辑窗口，这也是软件的主界面。中间的就是我们的LOGO模板重点的操作区域，我们的操

35、作将会在这里进行，同时这也是你制作出来的LOGO的雏形。图2.4 软件主界面在AAA Logo软件中把每个模型分为若干个矢量图，这些矢量图叠加组成一个LOGO图标，同时每一个矢量图都可以看作是一层。如图2.4所示的模板中我们可以看出是由“TOUCHMEDIA”、“interactive”、“手”及两个形状等五层组成，点击模型中的某层，就可以在左上角显示该层的矢量图，同时会在窗口上方生成专门针对该层进行操作的工具，用【前】【后】 来选择其它对象。工具栏的其他按钮如下图所示：图2.5 编辑工具栏点击【Text】按钮，就可以打开基本文字选项窗口，在这里可以对文字内容、字体大小、字符间距及文字的纵横比

36、等进行设置，在设置的同时在预览窗口中可以实时看到调整后的效果，另外还可以通过点击其它按钮对文字的效果、渐变、变形及颜色来进行设置，我们也可以通过点击【窗口】菜单中的菜单项来对各个层进行设置，也能起到同样的效果。编辑对象时，可以使用窗口右下角的系统默认的颜色方案。其它各层的设置与文字层基本一致，在这里就不再赘述。提示：AAA_Logo不支持中文字体，如果想使用中文，可先预留空白，导出图标后在Photoshop或Fireworks中进行编辑。 图2.6 “Text”对话框 图2.7 “Effects”对话框 图2.8 “Gradient”对话框 图2.9 “Transform”对话框 图2.10

37、“Colors”对话框图 2.11 系统默认的颜色方案如果在选取层对象的时候不方便选择，我们可以点击主界面左上角的【Current Object】按钮，在弹出菜单中选择相应的层对象就可以了，我们还可以通过调整层与层之间的前后关系来对LOGO图标进行设置，从而使之做的更完美，只要点击【项目】菜单里的相应菜单项就可以了。现在整个LOGO图标就制作完成了，为了让LOGO图标更加完美，还可以点击【文件】|【图像选项】，在对话框中对LOGO图标的色调、饱和度、光亮度等进行设置，使整体看起来更漂亮。(4) 导出图标现在一个完美的LOGO图标就完成了，最后一步就是把图标输出以备使用，点击【文件】【保存log

38、o文件】菜单，然后在弹出窗口中选择图像保存的格式，最后点击保存就可以了，如果想以后多次使用这个LOGO，只要把它存为模板就可以了。图2.11 “输出Logo图像”对话框四、实验内容和要点1、 使用以上常用IP命令，选择一个结果界面截图；2、 设计一个LOGO并导出；3、 使用Dreamweaver新建一张网页，命名为2-1.htm，输入内容：“这是我的实验成果”，并将以上两张图插入网页中。五、实验课时：3课时六、课后练习1、 利用搜索引擎，搜索以下问题：a) Internet的常用服务的服务端工具有哪些；b) 什么是计算机的物理地址，如何获得物理地址；c) 如何利用PING命令判断基本的网络故

39、障；d) 设计LOGO应该注意哪些方面。2、 结合AAA Logo与Fireworks或Photoshop设计LOGO。实验3 HTML基础与Dreamweaver操作HTML（Hypertext Marked Language，即超文本标记语言）是一种用来制作超文本文档的简单标记语言。自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。Dreamweaver是目前最常用的网页设计软件之一。Dreamweaver CS5是Dreamweaver的最新版本,

40、 用于对Web站点、Web页和 Web应用程序进行设计、编码和开发。 Dreamweaver CS5 包含有一个崭新、简洁、高效的界面，且性能也得到了改进。此外，还包含了众多新增的功能，改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方便地生成页面。一、实验目的1、了解HTML的特点，熟悉HTML的用法，熟悉常用标记的功能和属性；2、掌握Dreamweaver CS5的基本操作；3、了解框架类页面的制作，了解模板、库的应用，熟悉常见行为的添加4、掌握Dreamweaver CS5中“CSS样式”面板的使用二、实验准备1、 实验环境：Dreamweaver CS5、IE8以上浏览器三、

41、实验资料1、HTML语言简介所谓超文本，是在普通的文本文件中加入图片、声音、动画、影视等内容，并且加入超链接以从一个文件跳转到另一个文件，从而实现网络文件的连接。超文本标记语言是一种用于制作超文本文档的简单标记语言，可以制作包含图像、文字、声音、超链接等精彩内容的网页。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。在HTML文档中，字符和数据的语法结构是通过标记来表示的。所谓标记，就是采用一系列的指令符号来控制输出的效果，这些指令符号用“<标记名字 属性>”来表示。常用的HTML标记有：Ø HTML文档的基本结构&

42、lt;HTML><HEAD><!-头部信息-></HEAD><BODY><!-文档主体，正文部分-></BODY></HTML>Ø 标记的类型² 单标记：<br/>（换行）、<hr>（水平线）² 成对标记：又称为容器，<marquee>滚动字幕</marquee>² 标记加属性：属性设置的一般格式为：属性名属性值，属性值部分可以用英文的双引号（ " ）或单引号（ ' ）引起来，也可以不使用任何引号，如

43、<font face="隶书" color='red' size=5>字体</font>Ø 颜色的表示网页中的颜色表示为“#”+ 六位十六进制数字，两位一组，分别代表R（红色）G（绿色）B（蓝色）的值，常用颜色也可用英文名称表示。 图3.1 常用颜色名 图3.2 文件结构Ø 文件路径的表示网页中引用外部文件（图片、样式、脚本和链接等）需要使用文件路径，如图3.2的文件系统中，引用文件路径分别表示为：² 同级使用“文件名”：index.html中引用word.html，"word.html&quo

44、t;；² 下级使用“目录名/文件名”：index.html中引用footer_bg.gif， "images/footer_bg.gif"² 上级以外目录使用“./目录名/文件名”：index.html中引用nav_bg.gif，"./zsw/images/nav_bg.gif"² 根：如果网站根目录（IIS中的主目录）是websites，则以上文件表示为："/web/word.html"、"/web/images/footer_bg.gif"、"/zsw/images/na

45、v_bg.gif"。Ø 在网页中显示表格表格：<table width="100%"></table>行：<tr></tr>单元格：<td></td>Ø 表现出丰富多彩的设计风格图片调用：<img src="文件url">文字格式：<font size="3" color="00ffff">文字</font>Ø 实现页面之间的跳转页面跳转：<a href=&quo

46、t;文件路径/文件名">链接的文字</a>Ø 展现多媒体的效果音频：<embed src="音乐文件名" autostart=true>视频：<embed src="视频文件名" autostart=true>提示：(1) html的标记：识别页面元素、描述元素的样式、指向其它资源，不分大小写。但推荐使用小写，这样符合xhtml的规范；(2) 不同的标记可嵌套使用，但不可交叉；(3) 标记的属性：要放在开始标记的尖括号中，可以有多个属性，用空格分隔，通常不分大小写；(4) 可以采用纯文本文件编

47、辑html文件。例如记事本、editplus。以下html代码是一个简单的网页示例，命名为“3-1.html”，该页在浏览器中的效果如图3.1所示。<html><head><title>一个简单的html示例</title></head><body><center><h3>欢迎光临我的主页</h3><br><hr><font size=2>这是我第一次做<a href="">主页</a>，无论怎么样，我都会努

48、力做好！</font></center></body></html>图3.1 HTML示例提示：随着CSS的流行，部分HTML标记或属性完全可以被CSS替代，因此不被新的XHTML标准支持，如bgcolor、text，有些虽然目前还支持，但不推荐使用，并且已被HTML5废弃，如<font>、<center>等。2、Dreamweaver CS5窗口布局Adobe Dreamweaver CS5，是Adobe 最新开发的集网页制作和管理网站于一身的所见即所得网页编辑器，也是第一套针对专业网页设计师特别发展的视觉化网页开发工具

49、，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver CS5的起始页分为三栏：最近打开、新建文档、主要功能，为用户编辑和设计网页提供了一个快捷通道。图3.2 Dreamweaver CS5的起始页若要新建网页，可直接在起始页的中间栏单击“新建àHTML”命令。此时进入中文版Dreamweaver CS5的操作界面，也即新建页面的编辑界面，如下图所示：1、菜单栏2、工具栏：右键选择【文档】、【标准】、【编码】等工具栏3、设计器：可调整界面布局4、代码视图5、设计视图6、浮动面板组7、属性面板8、对象选择器和状态栏9、编码工具栏10、编辑文档列

50、表图3.3 中文版Dreamweaver CS5的操作界面其中：1、编辑和查看HTML代码2、编辑和查看网页界面3、在浏览器中预览4、网页标题（<title>）图3.4 【文档】工具栏 图3.5 【插入】面板、【CSS样式】面板、【文件】面板3、创建与管理站点在制作网页之前先定义站点，这样有助于理清网站的结构，方便管理网页文档和内容。在创建站点之前，先在相应磁盘创建将要放置站点的文件夹，而后再创建本地站点。步骤1：在本地磁盘（如：D:盘）创建站点的根文件夹（如：myweb），并在其中创建“images”文件夹作为总的存放图片的文件夹。提示：由于汉字编码在不同操作系统或软件中存在差异

51、，所以网站文件夹或网页文件名应当使用英文或拼音字母，制作网页过程中使用的图片或其他素材也在网站根文件夹下分类存放，如：images存放图片、js存放脚本程序、swf存放FLASH素材等。步骤2：【站点】|【新建站点】或者【文件】面板 |【管理站点】|【新建】，打开站点设置对话框，输入【站点名称】并指定网站根文件夹。图3.6 站点设置对话框提示：指定网站根文件夹时，当打开窗口能看到images文件夹时单击【选择】即可。图3.7 选择根文件夹步骤3：设置完成后，单击“保存”按钮以完成站点的创建，弹出【管理站点】对话框，并可在文件面板中查看当前站点下的全部文件。单击【站点】|【管理站点】或【文件】面

52、板 |下拉列表中的【管理站点】会弹出“管理站点”对话框，在这个对话框中可以对已有的站点进行“编辑”、“复制”、“删除”、“导出”和“导入”等操作， 图3.8 当前站点下的文件 图3.9 管理站点对话框4、新建与保存文件在熟悉了Dreamweaver CS5的操作界面并且创建了站点之后，用户就可以大展手脚，在站点中创建网页、编辑网页内容完成网页制作。Ø 新建文件在Dreamweaver CS5中新建网页可以通过“起始页”（图3.2）创建，也可以通过【文件】|【新建】来完成，如下图。除了可创建普通网页外，还可创建具有默认风格的网页，如图3.10所示。图3.10 “新建文档”对话框图3.1

53、1 “2列固定，右侧栏”界面效果Ø 保存文件网页新建之后，建议马上进行保存操作，这样可以确定网页的存放路径，并且使后续应用图片、超链接等对象时生成的URL地址为相对路径。【文件】菜单提供了多种保存网页的方式。除了常规的“保存”和“另存为”之外，还有“保存全部”、“另存为模板”等命令。其中“保存全部”是指将当前应用程序中在编辑的所有网页文档都保存，而“另存为模板”是将当前的页面保存为模板的形式。针对新建的网页，一般直接选择“保存”命令即可。5、设置页面基本属性(1) 文件头Ø 网页标题：<title> 页面标题 </title>在Dreamweaver

54、 CS5中设置页面标题主要有3种方式：1、通过Dreamweaver CS5文档工具栏中的标题文本框来设置网页的标题，如下图所示；2、直接在代码视图中的<title></title>标记中设置网页标题；通过单击【页面属性】按钮，在弹出的“页面属性”对话框中选择“标题/编码”选项来设置页面标题。 图3.12 标题文本框中设置标题 图3.13 在“页面属性”对话框中设置标题Ø <meta>标记<!- 说明页面编码 -><meta http-equiv="Content-Type" content="tex

55、t/html; charset=UTF-8"><!- 页面关键字，思考一下关键字有什么用！ -><meta name="keywords" content="web,education,internet" ><!- 5秒后跳转到new.htm -><meta http-equiv="refresh" content="5;url=new.htm" ><!- 页面加载动画效果 -><meta http-equiv="Page-

56、Enter" content="RevealTrans(duration=3,Transition=12)">Ø 注释：<!-注释性文字->(2) 页面总体效果Ø 标记：<body> 页面内容 </body>Ø 常用属性：背景颜色（bgcolor）、文本颜色（text）、背景图片（background="图片URL"）、链接颜色：link（链接）、alink（当前链接）、vlink（已链接）、滚动条（scroll=yes | no）、页左边留白（leftmarging=值）

57、；在“设计”视图单击“属性”面板中的“页面属性”按钮，弹出 “页面属性”对话框。图3.14 页面属性对话框² “外观（CSS）”选项：通过CSS方式设置页面的字体、背景和边距等，出现在CSS文件的BODY样式中。² “外观（HTML）”选项：通过HTML标记方式设置背景、文本颜色等，出现在HTML文件的BODY属性中。² “链接（CSS）”选项：通过CSS设置页面中超链接的相关显示效果。² “标题（CSS）”选项：通过CSS来设置页面中正文标题标记的显示效果。² “标题/编码”选项：设置页面的标题、文档类型、编码格式等信息。这些设置有可能影响到网页的显示格式。² “跟踪图像”选项：选择跟踪图像，在设计时将通过背景图像的方式显示在设计视图中，为页面的布局等设计提供参考。(3) 正文标题和文字Ø 标题：<h1> </h6>Ø 换行符：<br>、<br/>（不改变上下文格式）Ø 段落：<p> </p>（上下文格式有所变化，主要是段前段后）Ø 水平线：<hr>，主要属性：粗细（size）、宽