实验一基础网页制作

1、实验一 基础网页制作一、实验目的：通过上机操作，使学习者熟悉 Dreamweaver 工作界面、对工作环境进行设置； 掌握如何使用 Dreamweaver 创建、保存或打开一个网页文档； 了解使用 Dreamweaver 可以创建和打开哪些文档；掌握如何创建本地站点；掌握如何使用历史面板撤消或 重复操作。二、实验内容：1.熟悉 Dreamweaver 工作界面并进行首选参数设置；2. 创建本地站点3. 创建网页文档；4. 设置头文件标签；5. 使用历史记录面板。6. 将实验一的唐诗文件整理，放入站点内。三、实验要求：1.熟悉 Dreamweaver 工作界面并进行首选参数设置认识 Dreamw

2、eaver 界面的组成、各个菜单项包含哪些命令，并根据个人的喜好 和需要进行首选参数设置。2.创建本地站点 完成站点的创建、修改、删除等操作，并理解站点在网站设计中的重要性。3.创建网页文档采用两种方式： 直接向网页中添加文本； 将 word 文档导入网页中， 并对文本进 行属性设置。3.设置头文件标签 认识各项头文件标签的作用，向头文件中添加说明信息，并在“代码”面板中查看说明信息。5使用历史记录面板使用历史面板重复或者撤消操作。四、实验学时：4学时五、实验步骤：练习一：熟悉Dreamweaver工作界面并进行首选参数设置1. 启动 Dreamweaver（1）选择【开始】|【程序】|Mac

3、romedia|Dreamweaver命令，打开Dreamweaver 的初始工作界面（如图1.1），第一次启动Dreamweaver需要选择工作界面。 其中【代 码编辑者】是纯代码编辑界面，适合对网页编程有很高水平的设计者。选择【设计者】是本实验后面所介绍的使用界面。（2） 选择【设计者】工作界面，单击【确定】按钮，将进入图1所示的工作界面。Adobe Dreuvearer CS3； |Ll| X立:辞 Hi 褊倨隆改 Mi St3： m 点冷（T） 站点临）河口 rtU£审 Mi AX 用ftf ftfBE* DREAMWEAVER伫占M，蚯的琥冃 总程序门心html :阴&qu

4、ot;切氏應兗胖“T hUml Tiwre-bAMibu hbnl nrwh/slyie cat nywebm&lbu.hirnl nywa-bTc.hu anting html nyweWUnirtl Bd-J.lrtml nywe-b/5 hili.hEml wuywffh/cfrylgg hfrnl CJ幵口nrlTlrlIJiatjdbJHTMLColdFusionRHPABFVBSCrtptXSLTC 3EM >80Javas&npit梵ALDrpamwwawRr 站点.TJ cm宫祥式ifeT21 lose 黑lJ砂页 < 主甌> Ti超姒页（3&

5、#163;打 B JE$ .s i Drc amwiQafN'cr EHEhanpiR vn 砺増功繼” 专iffl > 性:主沁：IE證:i趣辭i評六1|5； Ajj-i ifj.* fcl . -匚勢1= 应用怪手il存站呻曾后:拄锻塞ujiriiw ll I 丨iLEHPr計曲历史记鼻图1.1 Dreamweaver欢迎界面2 .熟悉 Dreamweaver的工作界面启动Dreamweaver，一个包含空白文档的Dreamweaver的工作界面就呈现在你的面前了。Dreamweaver工作界面各部分组成如图1.2所示。折彩检杏戢m x先炼题丈档面板组童署世）插人修BI &#

6、174;文不（X）侖會站点窗口帝肋QPvetiLvex- 8 一 Llfnt i tl ed-1驰曰越空回里F #1 F画圧T VJ | B F标题:标题栏菜单栏£昭换-文件<bodv>!| T庙性常用工具栏乳I誉I+“FF1竝 FTF * RD5二桌面项目格式宇体拝式可 大比H 日吉I图1.2 Dreamweaver的工作界面注：各个工作区的作用参考教材P8 “ 1.4Dreamweaver的工作区”这一节。3.设置首选参数选择【编辑】|【首选参数】，打开首选参数对话框，如图1.3 所示XJIIBS霽 ili丈档选顼：P县示起赠可厂启动时重新打开文档(£)P打

7、开只读立件时轡告用户(1) 移动玄件时更新琏捋业):展奈 刁満辑逵顶；回插入球拥吋显示时话框広)117允许弱字节内联输入(E)P标题后切换到晋週趾篦17朮许多个连续的空格吵P 用 <slFdng> 和 <«代替 <h> 和 <i>(l£)P便用CSS両不是HTML标签P S <#> SE <bl><hE>标签中放送可蹄医城时塩出程告 历史步囁颯吳次数F排益宇典- I英语o国53确定 | 取梢 | 帮助 |图1.3首选参数设置此处设置历史步骤最多次数设多点。练习二：创建本地站点要制作一个能够被大家浏

8、览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网 web服务器里的网站被称为远程站点。Dreamweaver提供了对本地站点和远程站点强大的管理功能。1.规划站点结构网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何Web站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页 是如何互相连接起来的。我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明 了，便于管理和查找。2. 创建站点在Dre

9、amweaver中可以有效的建立并管理多个站点。搭建站点可以有两种方法, 一是利用向导完成，二是利用高级设定来完成（自己完成高级设定步骤）。在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件 夹。（1）选择菜单栏【站点】|【管理站点】，出现“管理站点”对话框。点击“新建”按钮，选择弹出菜单中的“站点”项。，如图1.4所示。图1.4管理站点（2 ）在打开的窗口上方有“基本”和“咼级”两个标签，可以在站点向导和咼级设置之间切换。可以先选择 ”高级”标签，如下图所示：填写相应内容即可。也可以选择“基本”标签，如图1.5所示。图1.5(3)在文本框中，输入一个站点名字以在Dreamw

10、eaver中标识该站点。这个名字可以是任何你需要的名字。单击“下一步”。出现向导的下一个界面，询问是否要使用服务器技术，如图1.6所示。我们现在建立的是一个静态页面，所以选择“否”图1.6(4)点下一步，在文档框设置本地站点文件夹的地址。如图1.6所示。图1.7(5 )点下一步，进入站点定义，我们将在站点建设完成后在与FTP链接，这里选择“无”，如图1.8所示。图1.8(6)单击“完成”按钮，结束“站点定义“对话框的设置，如图1.9所示。xnwcb的站点定义为图1.9(7)单击“完成”按钮，“管理站点”窗口中会显示刚才建立的站点名。如图1.10所示。图 1.101.11(5)到此，我们完成了站

11、点的创建。 文件面板显示出刚才建立的站点如图所示。图 1.113. 搭建站点结构站点是文件与文件夹的集合，下面我们根据前面对 xmweb网站的设计，来新建xmweb站点要设置的文件夹和文件。新建文件夹，在文件面板的站点根目录下单击鼠标右键，从弹出菜单中选择 新建文件夹”项（如图1.12所示），然后给文件夹命名。这里我们创建新建8个文件夹，分别命名为： img、med swf、txt、css、js、moan和 fy 。图 1.12创建页面，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择 新建文件”项，然后给文件命名。首先要添加首页，我们把首页命名为index.html，再分别新建 01.

12、html、02.html、03.html、03.html 和 05.html。如图 1.13 所示。图 1.133编辑和删除站点选择菜单【站点】|【管理站点】，弹出图1.14所示的窗口:图 1.14单击“编辑”选项，弹出“站点定义为”窗口，此时可以编辑站点信息。如图 1.15所示。图 1.15若选择“删除”选项，则弹出如图1.16提示窗口:图 1.16单击“是”，删除该站点，这个动作无法恢复，所以操作的时候要谨慎。练习三：创建网页文档（1）启动Dreamweaver软件，选择【文件】|【新建】命令打开【新建文档】对话框，如图1.17所示，从【类别】列表中选择【基本页】，从右侧的列表中选择HTM

13、L选项，然后单击【创建】按钮建一个空白文档。(2)选择(见图1.Sf建文档鬲规怏文着与irnnt菇容©帮肋曲| 首选养数.|靱酋监莊眾帀容内容.刨建曲图1.17【新建文档】对话框可以直接在网页工作区输入文本，还可以导入已有文档。【文件】|【导入】命令可以看到，Dreamweaver支持导入多种类型的文档18 ）。图1.18【导入】子菜单在这里我们选择【Word文档】，弹出【导入 Word文档】对话框(如图1.19)。图1.19【导入 Word文档】对话框(3)在【导入 Word文档】对话框中选择要导入的Word文件，单击【打开】按钮，将在网页文档中显示该Word文档的内容，如图1.2

14、0所示。-D1 X£画丽画鬲阳两勰；匡标敕档1at 匕通过本课程的学习.使学生能轄达對敬下目标：' 了解參霖俸的定义、分咲及其岌厭勢；的语音骗闪技术，了解音频蝙码标准1韋握数需压缩的基本原理和常用方法；1拿握CD的工柞原理、勒理格財逻辑格武；孰悉VCD和DVD的基本器檜和工作療理1'帧爭探体硬件谕备的使用方毘； r解多煤体网鋼应用的技术和方法！A堂梅HTML和KKL语肓的覩蔬劇旬用*VOody。CT6 x 233.K / £ 秒图1.20导入文档后效果练习四：设置头文件标签(1) 启动Dreamweaver，创建空白文档。选择【插入记录】工具栏中的 HTML

15、 选项卡，切换到头文件插入栏。(2) 单击【文件头】按钮，在弹出菜单中选择【说明】按钮，打开【说明】对 话框，如图1.21所示。图1.21【说明】对话框1.22所示。(3) 将文档切换到【代码】视图，查看说明信息，如图< IDOCTYPE KIID. PTm.IC -/A3C/DJD HTW. <l-0 Tvajsitional/F)TV rt'httpE/Zww- *3, or j/TE/ht/ loose. dtdrt ><htnl><head><*eta ht t p-e q.uiv= "Cent ent-Typ-e&qu

16、ot; cont ent=* t ext /htr1 ; charset=gb23l2Jr> it无标题文档</title>najie= n descrlptian- cont en±=-这是第二次上机柞业自</he：ad><body></body>图1.22【代码】视图中的说明信息(4) 自己试着加入 meta关键字，关键字专门为搜索引擎而提供，不同的关键 字之间用逗号隔开。<Meta rLame=<rKeywordsr, content=r,病垂 > 手机"/>练习五：使用历史记录面板在【历史

17、记录】面板中，记录了用户在【文档】窗口中操作的历史，使用【历史记录】可以撤消或重复操作步骤。（1）选择【窗口】|【历史记录】命令，打开【历史记录】面板，如图 1.23所 示。B 历史记录耳"目描述：name= *deseripti -匡| 表格：table widthFSOO"* loo臣调整大小；236. 90A键入ooooo昌设置背景験色：#FF0030A键入Um昌设置对齐方式：匚曲泄制作超琏接：图1.23【历史记录】面板（2 ）如果想要撤消对【文档】窗口的操作，拖动【历史记录】面板中的滑块，选中要撤消的操作，被选中的操作呈灰色。如图1.24所示。这是【文档】窗口回到 撤消操作后的状态。T历史记录迁述：Kmieta iLajne=4rlaseript 11乍目表格:Stable widtkif200|W bos0调整犬小；236, 90A 键入：00000设置背員颜色：#FFUODDAA： mil图1.24选中要撤消的操作（显示为灰色）（3）如果要恢复操作则可以重新拖动滑块到相应位置，这样就可以恢复被撤消的动作。如果撤消操作后进行了新的操作，则原来被撤消的操作就不能再被恢复了。（4 ）如果要清空记录，单击【历史记录】面板右上方的按钮，或者在【历史记录】面板中右击，在弹出的快