《信息技術(shù)》62：網(wǎng)頁制作(共34張)課件

1、6.2 網(wǎng)頁制作6.2 網(wǎng)頁制作1、網(wǎng)站規(guī)劃網(wǎng)站的風(fēng)格1網(wǎng)站的結(jié)構(gòu)2網(wǎng)站的配色3根據(jù)個人需要設(shè)置網(wǎng)站風(fēng)格，如：活潑、清純、莊嚴。網(wǎng)站如一本書，需要有大綱，主要目錄、具體內(nèi)容顏色的搭配非常重要，怎么配色才能吸引用戶進來觀看1、網(wǎng)站規(guī)劃網(wǎng)站的風(fēng)格1網(wǎng)站的結(jié)構(gòu)2網(wǎng)站的配色3根據(jù)個人需要2、 色彩搭配紅色熱情橙色時尚藍色寧靜綠色清新紫色神秘黑色深沉灰色高雅白色明快配色方案的操作：*點擊菜單“格式”-“主題”*點擊任務(wù)窗口“主題” *點擊某個主題右擊-“自定義”2、 色彩搭配紅色熱情橙色時尚藍色寧靜綠色清新紫色神秘黑色深3、 設(shè)計草圖3、 設(shè)計草圖二、網(wǎng)站1.制作網(wǎng)站的流程主題風(fēng)格規(guī)劃配色素材版面上傳測

2、試編輯二、網(wǎng)站1.制作網(wǎng)站的流程主題風(fēng)格規(guī)劃配色素材版面上傳測試編網(wǎng)站的設(shè)計原則1）目標明確，重點突出2）主題鮮明，層次清晰3）合理設(shè)置欄目4）正確定位整體風(fēng)格5）頁面布局合理6）色彩搭配，和諧統(tǒng)一7）多媒體功能適當(dāng)應(yīng)用。網(wǎng)站的設(shè)計原則1）目標明確，重點突出4、網(wǎng)站元素級別網(wǎng)站網(wǎng)頁1網(wǎng)頁2網(wǎng)頁3文字表格圖片動畫視頻4、網(wǎng)站元素級別網(wǎng)站網(wǎng)頁1網(wǎng)頁2網(wǎng)頁3文字表格圖片動畫視頻二、編輯網(wǎng)頁新建網(wǎng)頁：單擊命令菜單欄中的“文件”，選擇“新建”，在屏幕的右面出現(xiàn)一個“新建”工具欄，選擇“新建網(wǎng)頁”下的 “空白網(wǎng)頁”，于是一個新的網(wǎng)頁“new_page_1.htm”就產(chǎn)生了。二、編輯網(wǎng)頁新建網(wǎng)頁：單擊命令菜

3、單欄中的“文件”，選擇“新建二、編輯網(wǎng)頁1、預(yù)覽：單擊屏幕左下角的“預(yù)覽”按鈕，于是新網(wǎng)頁在瀏覽器下的顯示效果就出現(xiàn)了。再單擊“設(shè)計”返回頁面設(shè)計狀態(tài)，可以繼續(xù)修改。也可以單擊菜單欄“文件”下的“在瀏覽器中預(yù)覽/ Microsoft Internet Explorer”或直接按鍵可以在IE下預(yù)覽制作的網(wǎng)頁。2、保存：單擊 “文件”/“保存”，為文件起個名字，并修改“保存位置”為D盤上“座號姓名”文件夾，然后單擊“確定”。這樣所有網(wǎng)頁使用的文件都放在這個文件夾中，便于使用和管理。例如：888張三二、編輯網(wǎng)頁1、預(yù)覽：單擊屏幕左下角的“預(yù)覽”按鈕，于是新網(wǎng)二、編輯網(wǎng)頁3、設(shè)置網(wǎng)頁屬性：在網(wǎng)頁上方右

4、擊，選中“網(wǎng)頁屬性”； (1)修改標題 (2)修改邊距注意：標題與名稱區(qū)別二、編輯網(wǎng)頁3、設(shè)置網(wǎng)頁屬性：在網(wǎng)頁上方右擊，選中“網(wǎng)頁屬性1、直接輸入漢字：在新建的“new_page_1.htm”頁面上輸入漢字信息，并進行字體、字號、顏色等相關(guān)修飾。 2、 導(dǎo)入文字：打開“插入”菜單“文件”（注意選擇文件的類型），就可以插入你需要的內(nèi)容。 注意：導(dǎo)入文字內(nèi)容的格式，如：word、wps、txt、htm等二、編輯網(wǎng)頁(文本)注：1、先輸入文字，再進行排版。 2、邊輸文字邊排版。1、直接輸入漢字：在新建的“new_page_1.htm”頁二、編輯網(wǎng)頁(文本)選擇文本： 方法1：按住鼠標左鍵拖動即可 方

5、法2：按住“shift”鍵選擇連續(xù)文本 方法3：連續(xù)按鼠標左鍵三次可選中整段文字 方法4：按住“alt”鍵，點擊鼠標左鍵可選中整段文字設(shè)置文本格式方法1：選中文字右擊“字體”方法2：按住“格式”菜單“字體”方法3：在格式工具欄，也可以設(shè)置字體二、編輯網(wǎng)頁(文本)選擇文本：設(shè)置文本格式二、編輯網(wǎng)頁(文本)刪除文本格式： 方法1：選中文字，在字體對話框里進行更改。這樣速度很慢。 方法2：選中文字，點擊“格式”菜單“刪除格式”（快捷鍵ctrl+shift+z） 方法3：撤消（快捷鍵ctrl+z）撤銷、恢復(fù) ： ctrl+z、 ctrl+y格式刷：如果要連續(xù)使用格式刷，可以雙擊“格式刷”，即可多次使用

6、，再次點擊“格式刷”可取消。添加邊框、底紋：點擊“格式”菜單“邊框和底紋”二、編輯網(wǎng)頁(文本)刪除文本格式：撤銷、恢復(fù) ： ctrl+二、編輯網(wǎng)頁(文本)復(fù)制： 方法1： Ctrl+c、Ctrl+v 方法2：選擇文字，按住“Ctrl”鍵 拖動鼠標左鍵放到存放的位置即可。剪貼板：先打開“編輯”菜單“office剪貼板”,選擇多個對象復(fù)制，后再粘貼即可。移動： 方法1：選擇文字，點擊“編輯”菜單“剪切”Ctrl+X 方法2：選擇文字，按住鼠標左鍵拖動放到存放的位置即可。二、編輯網(wǎng)頁(文本)復(fù)制：二、編輯網(wǎng)頁(文本)設(shè)置段落格式：1、 段落間距：(1)直接按“enter”鍵換行，距離較大。其代碼；(

7、2)、直接按“shift+enter”鍵換行，距離很小。其代碼；2、插入符號：在“插入”菜單“符號”對話框，可以添加所需要的符號。浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)二、編輯網(wǎng)頁(文本)設(shè)置段落格式：浙教版高一必修信息技術(shù)三、修飾網(wǎng)頁(表格)新建表格：點擊“表格”菜單“插入”“表格”對話框刪除表格：選中表格“表格”菜單“刪除單元格”或按DEL鍵即可刪除添加單元格、行和列：在“表格”菜單“插入”“單元格”刪除單元格、行和列：將光標放在單元格上，點擊“表格”菜單-“選擇”“單元格”，再點擊“表格”菜單“刪除單元格”。行和列

8、方法相同。選擇表格、單元格、行、列：將光標放在單元格上，點擊“表格”菜單”-“選擇”“單元格、行、列、表格”。浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(表格)新建表格：點擊“表格”菜單“插入”三、修飾網(wǎng)頁(表格)添加、刪除標題：將光標放在任意一個單元格上，點擊“表格”菜單”-“插入”“標題”合并單元格：選中兩個或以上單元格右擊合并單元格或選中“表格”菜單“合并單元格”。拆分單元格：選定要拆分的單元格，選中“表格”菜單“拆分單元格”。文本表格互轉(zhuǎn)：選中對象，點擊“表格”菜單“轉(zhuǎn)換”“將文本轉(zhuǎn)換成表格”浙教版高一必

9、修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(表格)添加、刪除標題：將光標放在任意一個單元格三、修飾網(wǎng)頁(表格)設(shè)置細線邊框：方法：首先打開“表格屬性”，將邊框顏色與背景顏色均設(shè)置為黑色，邊框線設(shè)為0。再選中所有“單元格”，點擊“單元格屬性”，將單元格的邊框顏色與背景顏色改為白色；最后再次打開“表格屬性”，將單元格間距設(shè)為1即。 原理：利用表格的底紋（黑色）與單元格的底紋（白色），中間有單元格與單元格之間的距離，然后就產(chǎn)生了這條細線。浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作

10、(共34張PPT)三、修飾網(wǎng)頁(表格)設(shè)置細線邊框：原理：利用表格的底紋（黑色三、修飾網(wǎng)頁(圖片)插入圖片：點擊“格式”菜單“插入”“圖片”設(shè)置圖片屬性：大小、位置等。插入自選圖形：點擊“格式”菜單“插入”“自選圖形”設(shè)置圖形屬性：填充顏色、邊框、陰影樣式、三維效果等。插入藝術(shù)字： 編輯文字浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(圖片)插入圖片：點擊“格式”菜單“插入”三、修飾網(wǎng)頁(文字超鏈接)1、文字超鏈接：先選中文字或其它對象： (1)點擊右鍵超鏈接 (2)常用工具欄插入超鏈接 (3)點擊“插入”菜單超鏈

11、接（ctrl+K）2、創(chuàng)建同一文件的超鏈接 ： (1)先選中某些文字或其它對象進行標記，制作標簽。選定文字“插入”菜單書簽（ctrl+k） (2)選定其它文字鏈接到上面的文字上。選定文字超鏈接屬性本文檔中的位置，選中即可。3、設(shè)置超鏈接字體效果：打開“網(wǎng)頁屬性”“高級”“啟動超鏈接翻轉(zhuǎn)效果”“翻轉(zhuǎn)樣式”打開后進行設(shè)置思考題：1、如何從子頁中返回主頁？浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(文字超鏈接)1、文字超鏈接：先選中文字或其它對三、修飾網(wǎng)頁(文字超鏈接)設(shè)置超鏈接顏色：打開“網(wǎng)頁屬性”“格式”超鏈接、已

12、訪問過的鏈接、當(dāng)前超鏈接。設(shè)置超鏈接屏幕提示：先選中文字：打開“插入超鏈接”對話框右上方“屏幕提示”，輸入相應(yīng)的內(nèi)容即可。刪除鏈接文字的下劃線：選中文字打開“字體”對話框效果下劃線。創(chuàng)建電子郵件：先選中文字或其它對象：點擊右鍵插入超鏈接設(shè)置電子郵件地址即可。浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(文字超鏈接)設(shè)置超鏈接顏色：打開“網(wǎng)頁屬性”三、修飾網(wǎng)頁(圖片超鏈接)不同元素的鏈接： 1、利用圖片本身屬性自帶的鏈接默認鏈接選中圖片圖片屬性常規(guī)默認超鏈接。 2、利用圖片工具欄里圖形工具建立熱點鏈接。包括：長方形熱

13、點、圓形熱點、多邊形熱點。打開圖片工具選中圓形熱點在圖像內(nèi)拖動鼠標編輯超鏈接。浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(圖片超鏈接)不同元素的鏈接： 浙教版高一必修三、修飾網(wǎng)頁(音頻、視頻)添加FLASH：點擊“插入”菜單“圖片”“Flash影片”，選中你要添加的Flash動畫即可。擴展名：swf設(shè)置FLASH屬性：設(shè)置質(zhì)量、大小、背景等。制作按鈕：打開“插入”菜單“交互式按鈕”對話框； 按鈕類型：（1）按鈕 （2）字體 （3）圖像浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6

14、.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(音頻、視頻)添加FLASH：點擊“插入”菜單-三、修飾網(wǎng)頁(音頻、視頻)添加視頻：點擊“插入”菜單“圖片”“視頻”，選中你要添加的視頻文件，再將添加的視頻文件拖動放大即可。設(shè)置視頻屬性：（1）外觀（2）常規(guī)（3）視頻添加背景音樂：點擊“網(wǎng)頁屬性”菜單“常規(guī)”“背景音樂”。浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁(音頻、視頻)添加視頻：點擊“插入”菜單“三、修飾網(wǎng)頁1、主題：選擇“格式/主題”，從任務(wù)窗口選擇一種樣式，會改變整體網(wǎng)頁的背景效果。2、動態(tài)字幕：在網(wǎng)頁上選

15、定一個位置，單擊“插入/WEB組件/組件類別/選擇一種效果/字幕” ，單擊“完成”，在文本框中輸入文字。也可以添加背景圖片。3、在網(wǎng)頁中使用網(wǎng)站計數(shù)器：在網(wǎng)頁上選定一個位置，單擊“插入/WEB組件/組件類別/選擇計數(shù)器” 浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)浙教版高一必修信息技術(shù)6.2：網(wǎng)頁制作(共34張PPT)三、修飾網(wǎng)頁1、主題：選擇“格式/主題”，從任務(wù)窗口選擇一種四、制作滾動字幕1、插入：在網(wǎng)頁空白處：單擊：“插入/web組件/滾動字幕”，輸入要顯示的信息。2、鼠標懸停：如何在滾動字幕上實現(xiàn)：當(dāng)鼠標懸在上面時就停止?jié)L動，按下時就實現(xiàn)超級鏈接，離開時繼續(xù)滾動，下面粉色

16、代碼為實現(xiàn)代碼。也可以直接用下面代碼替換原來的代碼。 學(xué)習(xí) 工作 生活當(dāng)鼠標懸停上面時,字幕停止?jié)L動.超鏈接地址和名稱四、制作滾動字幕1、插入：在網(wǎng)頁空白處：單擊：“插入/web3、滾動圖片：利用滾動字幕制作滾動圖片，并實現(xiàn)超級鏈接。動態(tài)滾動圖片第5個單元格第7個單元格第8個單元格第10個單元格顯示圖片命令圖片地址和名稱3、滾動圖片：利用滾動字幕制作滾動圖片，并實現(xiàn)超級鏈接。m一種簡單滾動圖片制作方法1： 將下面代碼放在和之間就可以了： 滾動圖片 圖片邊框?qū)挾葹? (無邊框)圖片地址和名稱一種簡單滾動圖片制作方法1： 將下面代碼放在和一種簡單滾動圖片制作方法2：將下面代碼放在和之間就可以了 有

17、超鏈接的滾動圖片 超鏈接地址和名稱一種簡單滾動圖片制作方法2：將下面代碼放在和/五、使用超級鏈接使用超級鏈接技術(shù)可以使多個網(wǎng)頁相互鏈接在一起，方便瀏覽。1、分別按照前面的方法做好主(首)頁和與其鏈接的子頁文件（*.htm），并保存在一個文件夾中。2、在主頁上輸入提示進入子頁的文字，作為超鏈接的按鈕文字。3、選中按鈕文字，再單擊“插入/超鏈接”，找到要鏈接的文件，確定?！局黜摗俊究蚣芫W(wǎng)頁】【滾動新聞】【熱點鏈接】【布局表格】 【網(wǎng)頁主題】【留言薄】 五、使用超級鏈接使用超級鏈接技術(shù)可以使多個網(wǎng)頁相互鏈接在一起六、使用書簽1、制作書簽：在網(wǎng)頁中選中某一段落的開頭作為書簽的起始入口地址，然后單擊“插入”/“書簽”，確定。2、制作目錄：將各個做好的書簽名字以目錄方式做好。3、使用標簽：選中目錄某一項，超鏈