用記事本建立網(wǎng)頁

1、用記事本建立網(wǎng)頁制作人：正元設計 個人設計網(wǎng)站：郵箱：網(wǎng)頁制作實驗一 用記事本建立簡單的HTML文件【實驗目的】學會用HTML語言建立一個簡單的網(wǎng)頁?！緦嶒瀮热荨拷⒁粋€網(wǎng)頁，布局自定，包括自我介紹、圖 片、自己的電子信箱地址等，要求在標題與正文 之間插入一條水平線。（實驗中所用到的圖片、音 樂等素材均可在計算中心配備的計算機中找到， 具體路徑為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文怦吵編轉査看收嚴 口片二址（|創(chuàng)朮附:bfmyoy覘htm二| :楽少. “it,戲迎出爸恵悠丿卜辰tiriPk Fii/Jim圖9-1網(wǎng)頁頭部代碼與相應顯示color=blueborder=0Width=138丙歡辿允臨悠悠小屋-.qllxl岀訕：山）勁D: mywiebyDyci云| b轄劉移口鳥飾:電國歡迎進入悠悠網(wǎng)立件締預接索糕印*巴itjtip 卅I唏犀 判啊Cfuiil cul jf- IiI

3、uw77L 沖弱迎進人誌網(wǎng)imgi hoiBripr-,= fli, srcdXnyiwhwoman gIfTl iligniddillB*1 width-0height181d9 7p55、在“記事本”窗口輸入以下語句:歡迎進入悠悠網(wǎng)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咔炊迪進入烙烙網(wǎng)rvu您密.這里足我的京.農(nóng)也盍京審送三瞋笊喝茶當議也育沁eE 擷拉布萊號的 遼曲匕r .j- rLt?播扌它.右乗員的 _Tt.rTTtt-r nf Julyj3叩h2 dlign-ccnter- 歡迎戟入怪詫網(wǎng)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、在“記事本”窗口輸入以下語句（注意發(fā)送 電子郵件的超鏈接的書寫格式）：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、自此，該網(wǎng)頁設計結束，點擊超鏈接，檢 查鏈接是否正確，如果不正確，檢查被鏈接 文件是否在其設定的目錄內。實驗二 使用FrontPage 2000設計個人網(wǎng)頁實驗目的】

8、通 過本實 驗， 使學生 掌握 利用 FrontPage 2000建立簡單個人網(wǎng)頁的方法。實驗內容】1、創(chuàng)建有框架網(wǎng)頁；2、插入圖片，并設置圖片的超級鏈接；3、設置背景圖案和背景音樂；4、插入活動字幕；5、設置懸停按鈕；6、設置郵件地址超鏈接。實驗步驟】1、創(chuàng)建有框架網(wǎng)頁。(1) 啟動 Fro ntPage 2000;( 2) 單擊“文件” “新建” “網(wǎng)頁” ；( 3) 在彈出的“新建”對話框中，選擇“框 架網(wǎng)頁”選項卡；( 4) 單擊“目錄”圖標 “確定”，如圖 95;圖9 5新建框架網(wǎng)頁(5) 單擊左側和右側框架的“新建網(wǎng)頁”按 鈕，建立兩個新頁面；(6) 單擊“保存”按鈕；(7) 在彈

9、出的“另存為”對話框中，給左邊 的框架取名為“ left ”，給右邊的框架取名為“right ”，給整個框架取名為“ index”，如圖9另夕為JLl墳IS：卉igfljtig呵暑l.Ti4,gpS5irid.43T-3注存E!pZft圖96框架網(wǎng)頁的保存(8) 在左側框架任意位置右擊，在彈出的快 捷菜單中，選擇“框架屬性”；(9) 在彈出的“框架屬性”對話框中，將“可 在瀏覽器中調整大小”前的對勾去掉，并在“顯 示滾動條”下拉列表中選擇“不顯示”，如圖 9 7；圖9 7 “框架屬性”設置(10) 單擊“框架網(wǎng)頁”按鈕，在彈出的“網(wǎng) 頁屬性”對話框中，去掉“顯示邊框”前的對勾， 如圖9 8;刪

10、| 城|巨就I語言柱畀|工件坦| faffed). I-廠丘示邊m即圖9 8 “網(wǎng)頁屬性”對話框(11) 在右窗口輸入網(wǎng)頁介紹文字，其字體、 段落格式的設置同WORD，略；2、插入圖片，并設置圖片的超級鏈接(1) 在左窗口任意位置單擊，點擊“插入” “圖片”一 “來自文件”；(2) 在彈出的窗口中選擇已經(jīng)編輯好的圖 片(C:DATA目錄中)；(3) 單擊圖片，出現(xiàn)“圖片”工具欄；(4) 選擇“圖片”工具欄中的“長方形熱點” 工具按鈕；(5) 在圖片的“網(wǎng)頁介紹”四個字區(qū)域自左 上至右下拖動鼠標，拖出熱點區(qū)域；(6) 松開鼠標，在彈出的“插入超鏈接”對 話框中，選擇文件RIGHT.HTM ;3、

11、設置背景圖案和背景音樂。(1) 單擊右框架任意位置，單擊“格式” “背景”，在彈出的“網(wǎng)頁屬性”對話框中，選 擇已存在的圖片，如圖9-9;埶 n-S- 迫距|目定卅語百工怦姐廠采麗価fcierELWP師 醴童陞世 廠Jfe.電州擔空解弓取杲觀卑鷺祥式心.I頡色自動超墻接H: 2T自動已產(chǎn)中帕并商|封自動-自助廠小另一叱史的寺E鴛屋擔圖9-9設置背景圖案(2) 右擊左窗口，在彈出的快捷菜單中，選 擇“網(wǎng)頁屬性”；(3) 在“網(wǎng)頁屬性”對話框中，選擇“常規(guī)” 選項卡，單擊“瀏覽”按鈕選擇背景音樂文件；(4) 如果希望音樂循環(huán)播放，則選擇“不限 次數(shù)”，如圖9 10;圖910設置背景音樂4、插入活動

12、字幕(1) 在需要插入活動字幕的位置單擊，設置 插入點；(2) 單擊“插入” “組件” “字幕”， 彈出“字幕屬性”對話框，如圖9 11;圖9 11 “字幕屬性”對話框(3) 在“文本”編輯框中輸入顯示的活動字 幕；(4) 適當設置“方向”、“速度”、“表現(xiàn)方式”，單擊“確定”，如圖912;圖9 12 “字幕屬性”輸入5、設置懸停按鈕。(1) 選擇相應文字，如郵件地址；(2) 選擇“格式” “動態(tài)HTML ”，顯 示“DHTML效果”工具條，如圖9 13;甚密 幼罅一理爭伴、”應用出，冊用.頂昊(T 畫圖9 13“ DHTML效果”工具條(1) 在“選擇一種事件”下拉列表中，選擇“鼠標懸?！?；(2) 在“應用”下拉列表中選擇“格式”；(3) 在“選擇設置”下拉列表中選擇“字體”;(4) 在“字體”對話框中適當設置，使得鼠 標在此處懸停時，產(chǎn)生變化；6、設置郵件地址超鏈接。(1) 選中郵件地址，在選中區(qū)域右擊；(2) 在彈出的快捷菜單中，選擇“超鏈接”;(3) 在彈出的“插入超鏈接”對話框中，選 擇“鏈接到”一 “電子郵件地址”；(4) 在電子郵件文本框中輸入自己的電子 郵件地址，如圖9 14;自此，一個簡單的個人網(wǎng)頁已經(jīng)初具規(guī)模，讀 者可以依照本節(jié)的