用记事本建立网页

1、用记事本建立网页制作人：正元设计 个人设计网站：邮箱：网页制作实验一 用记事本建立简单的HTML文件【实验目的】学会用HTML语言建立一个简单的网页。【实验内容】建立一个网页，布局自定，包括自我介绍、图 片、自己的电子信箱地址等，要求在标题与正文 之间插入一条水平线。（实验中所用到的图片、音 乐等素材均可在计算中心配备的计算机中找到， 具体路径为C:DATA）【实验步骤】1、启动“记事本”和“ IE浏览器”，并纵向平 铺两窗口；2、在“记事本”窗口输入下面的代码：欢迎光临悠悠小屋v/titlev/head3、保存该文件到D:myweb文件夹中，取名为“ yoyo.htm ”；（注意，文件的扩展

2、名一定为.htm或html ;如果没有myweb文件夹，请 建立之）4、在IE浏览器的地址栏输入 d:mywebyoyo.htm ;显示如图 9-1 ；务就迎光临悠恕小屋-m. BEIQ|1文怦吵编转査看收嚴 口片二址（|创朮附:bfmyoy觇htm二| :楽少. “it,戏迎出爸恵悠丿卜辰tiriPk Fii/Jim图9-1网页头部代码与相应显示color=blueborder=0Width=138丙欢辿允临悠悠小屋-.qllxl岀讪：山）劲D: mywiebyDyci云| b辖劉移口鸟饰:电国欢迎进入悠悠网立件締預接索糕印*巴itjtip 卅I唏犀 判啊Cfuiil cul jf- IiI

3、uw77L 冲弱迎进人誌网imgi hoiBripr-,= fli, srcdXnyiwhwoman gIfTl iligniddillB*1 width-0height181d9 7p55、在“记事本”窗口输入以下语句:欢迎进入悠悠网v/fontvpximgsrc=d:mywebwoma n. gif height=1696、保存记事本文件，并刷新IE浏览器窗口，显示如图9-2；（请先将C:data中的woman.gif 文件复制到D:myweb下）图9-2字体与图片代码与相应显示7、在“记事本” 窗口输入以下语句 （注意被超 链接的文件地址书写格式 ）： 我叫悠悠，这里 是我的家，欢迎大家

4、来这里听歌喝茶（当然 也有 coffee了）! v/fontv/p 撒 拉 . 布 莱 曼 的 There for me v/av/p vp align=center 撒 拉 . 布 莱 曼 的 va href=file:/D:/Myweb/Music/moon/THe Winter of July.mp3 The Winter of July v/av/p8、保存记事本文件，并刷新 IE 浏览器窗口， 显示如图 9-3；垢坯：）古古出 收商*）工且 帮自*匸后迟屮 a宙g談按羽固駁御屯三代略j睚迪 山) |j b!itywebi1；-oy*z.r 湘计文供巳样吃准氏7ttnlheadCt I

5、MG衣涣先临您悠小屋im咔炊迪进入烙烙网rvu您密.这里足我的京.农也盍京审送三瞋笊喝茶当議也育沁eE 撷拉布莱号的 辽曲匕r .j- rLt?播扌它.右乗員的 _Tt.rTTtt-r nf Julyj3叩h2 dlign-ccnter- 欢迎戟入怪诧网S2Ahrf-nnt幼圜si2D-,a*b coiDr naa&ftFF*-?我屮wpWWThprp JFqt ng盂#和卜#|fp dliqn-lFntHi-冷桩布茱枣吩m 血并=吓口0：口 i/flyuctj/HuMlcfiitJonmu UlntEf u 一mpU ： 积柚 WlntPi* df Jii丄卽图9-3超链接代码与相应显示9、

6、在“记事本”窗口输入以下语句（注意发送 电子邮件的超链接的书写格式）：p alig n=leftxfo ntcolor=#808000face=幼圆还想听什么歌，告诉我啊！youyo u2001263.n etv/av/fo ntv/pv/body10、翠存记事本文件，并刷新IE浏览器窗口， 显示如图9-4；ppp 希牺杏者切收邸通工貝帮啟n址丄:二宙匚亦矗忑匚臥二品H除旷|黑按素復孰闻我汕轻烘，世更是戟的宸.双江尢菠亲这更厅卿氐茶当蛊也ecofferI撒拉.布菜變的yThsra fcr nE.；撒拉布莱虽的 削圧 壯山上r応Jul必/冬亦听什询一吉诉毀嶼！唾至旳诸炖QDU）鶉工net cu

7、aliga-ncMtorH衣迎进入朋两.inq bgrder=,iGF, src-*ad zXnwbuFaFian auidthi-我叫堆搐 滾車是社笊家欢世大家莉戈甲听畝喝荼(f/FLintP应nw严耳臧.4樂曼9吐Lk”cente严播拉布莱旻旳 rh9 Winter of align-bleft,|K*urA hbr- ns曲的旷face- |b,述馆折什么歌, MiflllBSM. wt图94 邮件超链接代码与相应显示11、自此，该网页设计结束，点击超链接，检 查链接是否正确，如果不正确，检查被链接 文件是否在其设定的目录内。实验二 使用FrontPage 2000设计个人网页实验目的】

8、通 过本实 验， 使学生 掌握 利用 FrontPage 2000建立简单个人网页的方法。实验内容】1、创建有框架网页；2、插入图片，并设置图片的超级链接；3、设置背景图案和背景音乐；4、插入活动字幕；5、设置悬停按钮；6、设置邮件地址超链接。实验步骤】1、创建有框架网页。(1) 启动 Fro ntPage 2000;( 2) 单击“文件” “新建” “网页” ；( 3) 在弹出的“新建”对话框中，选择“框 架网页”选项卡；( 4) 单击“目录”图标 “确定”，如图 95;图9 5新建框架网页(5) 单击左侧和右侧框架的“新建网页”按 钮，建立两个新页面；(6) 单击“保存”按钮；(7) 在弹

9、出的“另存为”对话框中，给左边 的框架取名为“ left ”，给右边的框架取名为“right ”，给整个框架取名为“ index”，如图9另夕为JLl坟IS：卉igfljtig呵暑l.Ti4,gpS5irid.43T-3注存E!pZft图96框架网页的保存(8) 在左侧框架任意位置右击，在弹出的快 捷菜单中，选择“框架属性”；(9) 在弹出的“框架属性”对话框中，将“可 在浏览器中调整大小”前的对勾去掉，并在“显 示滚动条”下拉列表中选择“不显示”，如图 9 7；图9 7 “框架属性”设置(10) 单击“框架网页”按钮，在弹出的“网 页属性”对话框中，去掉“显示边框”前的对勾， 如图9 8;刪

10、| 城|巨就I语言柱畀|工件坦| faffed). I-厂丘示边m即图9 8 “网页属性”对话框(11) 在右窗口输入网页介绍文字，其字体、 段落格式的设置同WORD，略；2、插入图片，并设置图片的超级链接(1) 在左窗口任意位置单击，点击“插入” “图片”一 “来自文件”；(2) 在弹出的窗口中选择已经编辑好的图 片(C:DATA目录中)；(3) 单击图片，出现“图片”工具栏；(4) 选择“图片”工具栏中的“长方形热点” 工具按钮；(5) 在图片的“网页介绍”四个字区域自左 上至右下拖动鼠标，拖出热点区域；(6) 松开鼠标，在弹出的“插入超链接”对 话框中，选择文件RIGHT.HTM ;3、

11、设置背景图案和背景音乐。(1) 单击右框架任意位置，单击“格式” “背景”，在弹出的“网页属性”对话框中，选 择已存在的图片，如图9-9;埶 n-S- 迫距|目定卅语百工怦姐厂采丽価fcierELWP師 醴童陞世 厂Jfe.电州担空解弓取杲观卑鹭祥式心.I颉色自动超墙接H: 2T自动已产中帕并商|封自动-自助厂小另一叱史的寺E鴛屋担图9-9设置背景图案(2) 右击左窗口，在弹出的快捷菜单中，选 择“网页属性”；(3) 在“网页属性”对话框中，选择“常规” 选项卡，单击“浏览”按钮选择背景音乐文件；(4) 如果希望音乐循环播放，则选择“不限 次数”，如图9 10;图910设置背景音乐4、插入活动

12、字幕(1) 在需要插入活动字幕的位置单击，设置 插入点；(2) 单击“插入” “组件” “字幕”， 弹出“字幕属性”对话框，如图9 11;图9 11 “字幕属性”对话框(3) 在“文本”编辑框中输入显示的活动字 幕；(4) 适当设置“方向”、“速度”、“表现方式”，单击“确定”，如图912;图9 12 “字幕属性”输入5、设置悬停按钮。(1) 选择相应文字，如邮件地址；(2) 选择“格式” “动态HTML ”，显 示“DHTML效果”工具条，如图9 13;甚密 幼罅一理爭伴、”应用出，册用.顶昊(T 画图9 13“ DHTML效果”工具条(1) 在“选择一种事件”下拉列表中，选择“鼠标悬停”；(2) 在“应用”下拉列表中选择“格式”；(3) 在“选择设置”下拉列表中选择“字体”;(4) 在“字体”对话框中适当设置，使得鼠 标在此处悬停时，产生变化；6、设置邮件地址超链接。(1) 选中邮件地址，在选中区域右击；(2) 在弹出的快捷菜单中，选择“超链接”;(3) 在弹出的“插入超链接”对话框中，选 择“链接到”一 “电子邮件地址”；(4) 在电子邮件文本框中输入自己的电子 邮件地址，如图9 14;自此，一个简单的个人网页已经初具规模，读 者可以依照本节的