网页设计实验指导书

《网页设计实验指导书》由会员分享，可在线阅读，更多相关《网页设计实验指导书（10页珍藏版）》请在装配图网上搜索。

1、网页设计实验指导书经济与管理学院二零一一年二月实验一 网页设计基础实验一、实验目的和要求1、了解网站的相关知识，IP地址、域名、主页空间等。二、实验内容和步骤1IP地址的申请（1）了解IPV4地址申请步骤 （2）查询学校主页的IP地址信息（3）.net /index/0D/index.htm查询到学校的IP地址段范围、单位、通信地址、联系人等信息2、域名信息查询（1）查询到相关的域名状态、域名联系人、注册日期等相关信息。3、域名注册（1）（2）选择你的域名和后缀，查询注册情况，比如查询ycit，得到下面的注册情况(3) 可以看到ycit.biz等还没有注册，就可以注册，而ycit.edu 已经

2、被注册，可以查看该域名的注册信息.3、了解国内几类典型网站政府类网站：商务部统计局政府网页链接教育类网站：教育部 :/ moe.edu / 清华大学 北京大学门户类网站：新浪网网易电子商务网站： B2B代表阿里巴巴B2C代表当当网 C2C代表淘宝网 Ebay中国（原易趣） ebay 4在网上找出下列版面布局的结构形式：（1）“同”字型结构布局（2）“国”字型结构布局 （3）“匡”字型结构布局 （4）“三”字型结构布局（5）“川”字型结构布局三、实验报告要求按“实验内容和步骤”完成14的网上操作，在实验报告中要求记录如下内容：1IP地址的申请步骤，及查询学校的IP地址得到的信息；2查询任一域名地

3、址，记录相关信息；3写出域名地址的申请步骤；4浏览所列出的几种类型的风站，说明这些网站所包含的主要信息。四、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。说明：所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。实验二HTML标记的基本语法一、实验目的和要求1熟悉HTML文件的编辑环境；2掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。3学会使用HTML设计出文本与图像相结合的较为复杂的页面。二、实验内容1、根据如表2-1所示的表格写出完整的HTML代码；课程表课号

4、课程名学分1002201网络原理61003302网页设计与制作51003507管理学原理5其中，网络原理和网页设计与制作课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。2、制作一个如图2-2样式所示的个人网站首页，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等。图2-1 个人网站首页三、实验步骤1打开任何一种文本编辑工具，可以是附件中的记事本，也可以是FrontPage/Dreamweaver的代码窗口。2按各种不同标签的语法规则，输入合法的代码。 3

5、输入完成后保存代码文件，文件后缀为.htm/.html。4在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。四、程序代码（在实验报告中写出）五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。实验三 本地站点的创建和编辑一、实验目的和要求1掌握本地站点的建立和定义；2熟悉站点窗口中各菜单的功能和作用；3掌握在本地站点中新建网站文件夹与文件；4掌握站点编辑的方法。5熟悉Dreamweaver 8的工作环境；6掌握在网页中插入文本、图像和编辑文本、图像的方法；7学会给文字和图像创建超链接。二、实验内容和步骤1定义本地站点（

6、1）单击【站点】【新建站点】命令，打开图3-1所示的站点定义窗口。图3-1 图3-2（2）选择“基本”选项卡，在分类列表中选择本地信息选项开始定义站点。各选项的设置方法可参考下面的文字说明。站点名称文本框：输入网站中文名称，如：风行科技(如图3-2)；单击【下一步】,弹出图3-3，选择【否，不想使用服务器技术】图3-3 图3-4单击【下一步】,弹出图3-4，指定网站所在的本地端文件夹位置单击按钮，选择E：shiyan单击【下一步】,弹出图3-5，在如何运用服务器技术中选择【无】单击【下一步】,弹出图3-6，完成。图3-5 图3-6（3）按照上面的说明设置完成后，此时会弹出文件面板组，显示出如图

7、3-7所示的本地的站点视图。图3-7本地站点视图窗口2新建网页文件 目前我们在个人网站中只有image文件夹，没有其它的网页文件，那么接下来就是在网站文件夹中放入事先设计好的网页文件或重新创建网页文件。(1)可根据网页主题及内容的多少，创建网页文件。初期的设计可参考下例。如图3-8所示。图3-8 网站地图（2）根据设计的地图，在网站的站点窗口中新建网页文件，选择【文件】【新建文件】命令，此时新增加了默认名称为“untitled.htm”的网页文件，如图3-9所示。（3）将“untitled.htm”的网页文件更名为“index.htm”, 回车。3修改、删除文件名。直接选中要修改的文件，单击即

8、可修改，或右击并从快捷菜单选择【重命名】。直接选中要删除的文件，按delete键，或右击并从快捷菜单选择【删除】。图3-9建立网页文件 图3-10站点编辑窗口6编辑网站内容（1）在定义了一个或多个本地端的站点之后，往往由于某种原因需要编辑网站的相关数据，这时打开图3-10编辑站点窗口，再按照下面的步骤操作。（2）选择要修改的网站，完成修改网站的相关设置，完成后单击ok。（3）回到编辑站点对话框，单击完成按钮结束工作。7、创建ODBC连接（1）单击“开始”/“资源管理器”/“控制面板”/“管理工具”/“数据源”；（2）启动ODBC，在ODBC窗口中选择“系统DSM”；（3）单击“添加”，在“创建

9、新数据源”对话框中选择“Microsoft Access Driver(*.mdb)”驱动；（4）单击“完成”，在出现的“ODBC Microsoft Access安装”对话框中输入数据源名及说明，并选择要进行链接的数据源；（5）单击“确定”即可建立DSN。8熟悉Dreamweaver 8的基本工作环境（1）打开Dreamweaver 8，自行熟悉各菜单、面板等的使用。（2）设置网页背景属性。点击主菜单上的【修改】【页面属性】,弹出图4-1所示的对话框。在对话框中可以设置背景标题、背景图像、文本颜色以及各种链接的颜色等等。设置好之后，选择【应用】【确定】即可。图3-11页面属性设置窗口（3）网

10、页的创建、保存与打开。选择【文件】【新建】，打开如图4-2所示的对话框，就可新建各种类型的网页，此时新建页面的文件名默认为“Untitled-1.htm”，点击保存图标，即可进行保存更改文件名的操作。图3-12 新建文档窗口9文本的插入和编辑（1）插入文本在Dreamweaver中，对文本的输入及编辑，与word极其相似。打开新建或已经建立的页面，把光标放在编辑区中，就可以输入文字/特殊的字符了。（2）添加中文字体或中文组合字体到字体列表（两种步骤不同）下面为中文字体的添加步骤：n 在属性面板中，单击“大小”左侧的图标，选择编辑字体列表,就可看到图3-13的对话框。n 从可用字体框中，选择要添

11、加的字体，单击“，这种字体就会添加到选择的字体框中了。n 单击ok按钮，就可以将这种字体，添加到字体列表中了。图3-13 编辑字体列表框 图3-14 选择图像源窗口（3）设置文本格式可以通过属性面板，包括段落的格式、字体、字号、字的颜色等等，将“单词识记”设置“标题2”其于文字设置成列表格式。 单词识记 英文单词Do的含义: 做，干；制作，产生；算出，研究；行，合适；Do away with 废掉Do without 没有也行Have nothing to do with 和 毫无关系Have(something) to do with 和 有点关系 （4）插入其他文本插入水平线在文档编辑区将

12、插入点定位到所需位置，选择插入HTML水平线菜单命令或单击“插入”栏中的“HTML”选项卡在其中单击 按钮即可添加水平线。（如图3-15） 图3-15 水平线的属性面板插入日期插入面板中【常用】【日期】，图3-16； 图3-16 插入日期 10添加图像（1）添加图像n 将光标想要插入图片的位置，点击主菜单上的【插入】【图像】这时出现选择图像源的对话框窗口。n 在窗口中选择需要插入的图片。如果选择的图片文件在网站目录以外，系统会询问是否将图片复制到网站内，此时应该选择“是”。n 将选择好的图片存放在网站内的特定位置。n 保存完毕，就可以看到插入的图片效果了，并且可以通过图片属性面板来改变图片的属

13、性。（2）编辑图像利用图像属性面板，设置图像的各种属性。11创建超链接（以文字为例）（1）可以采用以下的任一种方法n 在网页中选中要建立超链接的文字，选择文件“插入/超链接”命令，在超链接对话框中选择页面作为超链接的URL。n 在网页中选中要建立超链接的文字，单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，在超链接对话框中选择页面作为超链接的URL。n 选中超链接文本后，在常用工具栏中单击超链接按钮图标都可以打开对话框。（2）设置超链接属性n 选择“文件/属性”命令，打开“网页属性”对话框，单击进入“背景”选项卡。n 单击“启动超链接翻转效果”复选框，单击“翻转样式”按钮，打开“字体”对话

14、框，设置鼠标光标指向超链接时显示出的效果。n 在“超链接”、“已访问的超链接”和“当前超链接”的颜色列表框中，选择要使用的颜色。（3）单击进入“预览”选项卡，预览网页，在主页中单击超链接文字，察看链接到的网页。（4）单击进入“普通”选项卡，返回网页编辑状态，单击“保存”按钮保存设置。（5）关闭网页。6在网页中插入多媒体对象注：在网页中插入多媒体对象的基本方法为：“插入”/“媒体”/“插件”三、实验心得体会实验四 网页布局（4课时）一、实验目的和要求1掌握在Dreamweaver8中使用表格布局网页的操作；2掌握在Dreamweaver8中使用框架布局网页的操作；3掌握在Dreamweaver8

15、中使用层布局网页的操作。二、实验内容和步骤1使用表格布局网页表格是将页面中的内容以表格的形式排列，常用于单一页面内图片与文字的安排，是最常用的布局命令。在网页中利用表格完成如图4-1所示的网页,一般经过如下步骤：（1）插入表格（2）修改表格样式（3）填充内容写并对各个网页创建超能链接。如:“”图4-1 表格网页注：实验报告中要求写出详细步骤。2使用框架布局网页在网页中利用框架布局一般经过如下步骤：（1） 创建框架（2） 设置框架属性（3） 设定初始页面（4） 确定框架间的调用关系(5) 保存框架文件（6） 建立“简介”“基本元素”“超链接”等页面显示在主框架中。完成如图4-2所示的网页,并依据

16、一般步骤写出详细步骤，图像可自行选择。图4-2 框架网页3使用层布局网页建立如图所示的页面（1）利用菜单“插入”/“布局对象”/“层”或利用插入栏中的常用面板来实现插入图；（2）从属性面板中设置图层的基本属性（3）并对其中的任一个图片设置动画图径。注：完成如图5-3所示的网页,并依据一般步骤写出详细步骤，图像可自行选择。图4-3 层布局网页三、实验心得体会实验五 使用模板和库快速设计网页一、实验目的1掌握模板的制作方法；2掌握使用模板和库快速制作网页的方法。二、实验内容自行设计并制作完成一个主题精小的网站；要求：1.制作至少二个以上的模板，分别应用在不同级别的页面中； 2.必须使用库完成。 3

17、.要求在在所设计的网页中有表单的应用和各种行为的应用。实验六Flash基本动画的制作一、实验目的1熟悉时间轴面板和其他属性面板的使用方法；2掌握动作动画的制作方法；3掌握形状动画的制作方法；4掌握交互动画的制作方法。二、实验内容1动作动画的制作完成第一个FLASH影片：在黄色背景的屏幕中间，由小到大逐渐扩展显示蓝色文字“第一个FLASH影片”，同时从右向左展开一幅云图图像，一个红色立体球由左上方缓慢移到屏幕中间的下边，移动的同时球由小变大。基本步骤：(1) 新建一个影片文件和设置影片的基本属性；(2) 输入文字“第1个FLASH影片”，设置文字的属性；(3) 创建文字由小到大逐渐扩展的动画操作

18、；(注:文字要进行两次打散)(4) 增加图层绘制一个立体彩球；(5) 创建红色立体彩球从左下角向中间偏下移动的动画；(6) 创建云图图像从左下右移动的动画；(7) 调整图层的上下位置；(8) 测试影片。提示：运动渐变动画在使用组合、符号和可编辑文本等对象进行动画制作时经常使用。运动渐变动画主要用于将一个对象从一个地方移动到另一个地方，也可以用于制作缩放、扭曲或旋转对象的动画，或用于制作符号的颜色和透明度的动画。2形状动画的制作（1）将一个“正方形”的图形放到工作区的左边位置。（2）选中第60帧，按F6键插入关键帧，将“正方形”的图形删除。（3）将一个“圆”的图形放到工作区的右边位置。（4）选中

19、第1帧到60帧的所有单元格，调出动画关键帧的“帧属性”面板的“补间”标签右边的列表中选择“形状”项，这时在时间轴上，会出现一个指向右边的箭头，帧单元格的背景为浅绿色。（5）按Enter键或Ctrl+Enter组合键，播放动画。3交互动画的制作（1）打开“实验内容2”中制作的“形状渐变动画”，先创建3个按钮元件，分别显示为“播放”、“暂停”和“返回”,按钮可从公用库中导入,并在属性面板中将其改为“图形”。（2）回到场景1中新建一个图层命名为“按钮”并将做好的三个按钮元件拖到文档窗口中。（3）选择“按钮”图层的第1帧单击“动作”面板，在其中输入“stop();”。提示： 关键帧上的动作是在影片播放

20、到该帧时触发。这样影片一开始就会停留在第1帧不动。（4）选择“播放”按钮,并在“动作”面板中输入如下命令：On(press)Play();这样当单击该按钮时，影片就会开始播放。 （5）选择“停止”按钮,并在“动作”面板中输入如下命令：On(press) stop();这样当单击该按钮时，影片就会停止播放。 （6）选择“返回”按钮,并在“动作”面板中输入如下命令：On(press) gotoandplay(2);这样当单击该按钮时，影片就会回到起始状态。 （7）关闭动作面板，保存文件后输出影片观看效果。可以看到当单击“播放”按钮时，影片开始播放。如果在播放过程中单击“暂停”按钮，影片会停止在当前

21、位置，再单击“播放”按钮，影片继续播放。在任何时候单击“返回”按钮，影片都会返回到最初状态。(效果如下图所示)三、实验心得体会实验七 Flash动画特效的制作实验一、实验目的1了解属性面板的使用方法；2掌握为影片添加声音的方法；3掌握应用遮罩技术制作特效的动画方法；4掌握引导动作动画的制作方法。二、实验内容1为影片添加声音，其步骤如下：（1）事先在文件中制作完成除声音以外的所有内容。（2）选择“文件”菜单中的“导入”命令，这时系统会弹出如图7-1的“导入”对话框。图7-1 导入声音对话框 图7-2库中的声音文件（3）选择要导入的声音文件，然后单击“打开”按钮。这时在资料库面板中会显示已导入的声

22、音文件，如图7-2所示。（4）创建一个新图层，并选中第1关键帧，在属性面板中选择要使用的声音文件。提示：声音是加在关键帧中的，所以要添加声音，必须在选中某个关键帧的情况下进行。（5）从效果弹出菜单（图7-3）中选择一种效果。（6）从同步弹出菜单中（图7-3）选择一个同步选项。（7）为循环次数输入声音循环播放的次数（图7-3）。图7-3 声音设置面板提示：要想不停的播放声音，可以输入一个较大的值。（8）按Ctrl+Enter组合键输出影片，可以听到影片中的声音。2应用遮罩技术制作动画特效（1）创建一个新文件，通过“修改”菜单中的“影片”命令将影片尺寸调整为500PX*100PX，背景颜色调整为黑

23、色。（2）选择“插入”菜单中的“新建元件”命令，创建一个名为“球”的图形元件，然后使用椭圆形工具在图形元件“球”中绘制一个直径为100像素的正圆形，将其填充颜色设定为经向的黑白渐变色，如图7-4所示。 图7-4 小球元件的创建图 7-5动作动画 （3）单击工作区左上角的“场景1”标签，切换到影片的主场景。从库面板中将刚刚创建的图形元件“球”拖拽到舞台的最左侧，然后在该图层的第50帧使用F6键插入关键帧，并将图形元件“球”的实例拖拽到舞台的最右侧。重新选择该图层的第1帧，通过属性面板将第1帧设定为动作动画，如图7-5所示。（4）创建一个新图层，使用文本工具在新建图层中输入文字“人民邮电出版社”。

24、设定合适的字体和字号，尽量让其充满整个工作区，如图7-6所示。图7-6 遮罩层的制作 图7-7遮罩层的设定（5）在“图层2”上单击鼠标右键，在弹出的快捷菜单中选择“遮罩”命令，将图层2设定为遮罩层，如图7-7所示。提示：只有在遮罩图层和被遮罩图层同时被锁定的情况下才能正确显示遮罩效果。取消锁定，可以调整图层的内容，但是并不显示遮罩效果。（6）按Enter键或Ctrl+Enter组合键，播放动画。3引导动作动画的制作（小球的曲线运动）（1）在舞台动作区中创建一个小球或从“库”面板中拖拽一个小球实例到工作区，此时“图层1”的第一帧自动变为关键帧。（2）单击选中关键帧，在右快捷菜单中选择“创建补间动画”命令，即可将该帧创建为动作动画的第一帧；（3）在60帧处创建一个关键帧作为终止帧，此时在1和10帧之间会产生一个制向右边的水平箭头线，表示过渡动画创建成功。（4）调整起始和终止帧中对象的大小、颜色和透明度等。（5）在“图层1”上增加一个“运动引导层”。（6）单击选中引导层，在舞台工作区内绘制一条曲线，在引导层的60帧处出入一关键帧。（7）在第1和60帧处，把小球分别拖拽到曲线的起点和终点，让小球的中心十字与引导线的起点和重点重合。（8）测试影片，发现此时小球沿曲线运动，但引导线不会显示出来。三、实验心得体会