1、Web前端設計與開發(fā)技術（HTML+CSS+JavaScript）主講人： 學生作品展示西安正安環(huán)境技術有限公司 域祺實業(yè)中國有限公司 www.xledlight.tw西安意隆財務咨詢有限公司 西安他米零食網 西京學院經濟管理一系貴州美菱冠萱凈化設備有限公司 最便捷的售后最優(yōu)質的服務聯(lián)系我們西安信而富 西安迪沃特西安紫鳳園青年旅舍西安必爾補習學校西安我愛我妻家政網/ 站酷/ 藍色理想/ 天極網設計在線/ 網頁設計手冊/ 三聯(lián)教程推薦參考書朱印宏. 全球最值得模仿的500個網站. 2011.北京：北京希望電子出版社胡崧，于慧. 2007. 新銳網頁配色設計案例分析. 北京：中國青年出版社旭日東升

2、. 2011. 網頁設計與配色經典案例解析（第2版）. 北京：電子工業(yè)出版社潘基凱，江泓. 2008. 大視覺創(chuàng)意寶典網頁設計. 南京：江蘇美術出版社第1章 網站規(guī)劃 1.11.2網站和網頁的基礎知識網頁設計的思考認識Dreamweaver CC 2018其他網頁制作工具上機練習要制作精美的網頁，除了要熟練使用Dreamweaver CC 2018外，在動手設計網頁之前，還要了解一些有關的概念和知識。本章主要介紹動手設計網頁之前要做的一些準備、網頁設計流程和認識Dreamweaver CC 2018。學習目標網站和網頁的基礎知識選定網站主題和名稱設計網站CI形象認識 Drea

3、mweaver CC 20181.1網站和網頁的基礎知識一個好的網站其實是由多個精美的網頁組成的一個整體，網頁上又展現(xiàn)了各種圖文并茂的信息。在進入學習制作網頁之前，我們有必要先了解網站和網頁的基礎知識。認識互聯(lián)網域名與空間網頁與網站靜態(tài)網頁與動態(tài)網頁1.靜態(tài)網頁靜態(tài)網頁是基于HTML和HTTP技術的，在沒有網頁制作軟件之前，制作網頁時需要專門的程序員來逐行編寫代碼，編寫的文檔稱為HTML文檔。現(xiàn)在我們可以利用諸如圖形化網頁制作軟件，方便快捷的“畫”出想要的網頁文件。靜態(tài)網頁擴展名為.html。靜態(tài)網頁完全由HTML標簽構成，可以直接響應瀏覽器的請求，它的特點包括：制作速度快、成本低。模板一旦確

4、定，不易修改，更新開銷大，常用于固定版式的網頁。除非網頁設計者修改了網頁的內容，否則網頁的內容不會發(fā)生變化。不能實現(xiàn)與瀏覽網頁的用戶之間的交互。通常由文本、圖像、動畫、音頻和視頻等元素組成。網頁的URL是固定的。本書的主要內容為靜態(tài)網頁的設計。2.動態(tài)網頁動態(tài)網頁是區(qū)別于靜態(tài)網頁而言的。相比與傳統(tǒng)的靜態(tài)網頁，動態(tài)網頁有了明顯的交互性、自動更新性，以及因時因人而變的靈活性。動態(tài)網頁里包含了程序代碼，通過后臺數(shù)據(jù)庫與Web服務器的信息交互，由后臺數(shù)據(jù)庫提供實時數(shù)據(jù)更新和數(shù)據(jù)查詢服務，動態(tài)網頁以數(shù)據(jù)庫技術為基礎，網站維護的工作量較小。動態(tài)網頁的特點：交互性，即網頁會根據(jù)用戶的要求和選擇而動態(tài)改變和響

5、應，將瀏覽器作為客戶端界面,這將是今后WEB發(fā)展的大勢所趨。自動更新，即無須手動地更新HTML文檔,便會自動生成新的頁面，可以大大節(jié)省工作量。因時因人而變，即當不同的時間，不同的人訪問同一網址時會產生不同的頁面。除了早期的CGI外，目前主流的動態(tài)網頁技術有JSP、ASP、PHP、.NET等網站的類型1.門戶網站門戶網站是指通向某類綜合性互聯(lián)網信息資源并提供有關信息服務的應用系統(tǒng)。在全球范圍中，最為著名的門戶網站是雅虎等；在我國，著名的門戶網站有新浪、網易、搜狐、騰訊、百度、新華網、人民網等。門戶網站又可以分為綜合性門戶網站和地方性門戶網站。2.電子商務網站電子商務網站就是企業(yè)、機構或者個人在互

6、聯(lián)網上建立的一個站點，是企業(yè)、機構或者個人開展電子商務的基礎設施和信息平臺，是實施電子商務的交互窗口，是從事電子商務的一種手段。我國著名的電子商務網站有淘寶網、京東商城、蘇寧易購等3.娛樂網站娛樂網站和眾多內容型網站一樣，以內容為重點，用內容吸引用戶。娛樂網站的內容主要為休閑娛樂的內容，我國比較有名的娛樂網站有愛奇藝、搜狐視頻、騰訊視頻、起點中文網等4.教育文化網站教育文化網站主要是教育和文化從業(yè)機構或者個人在互聯(lián)網上建立的一個站點，是交流學習方法、提供教育信息、進行知識管理、傳播文化的一些信息平臺。我國著名的教育文化網站有各大高等院校網站、各大MOOC網站等5.個人網站個人網站是指個人或團體

7、因某種興趣、擁有某種專業(yè)技術、提供某種服務或把自己的作品、商品展示銷售而制作的具有獨立空間域名的網站。 個人網站是萬維網由個人創(chuàng)建的網頁包含的內容，而不是個人性質的公司，組織或機構的代表。網頁元素網頁是一個由多種元素組成的頁面，主要包括：文本、圖像、超鏈接、聲音、動畫、視頻、表格、表單等。1.2 網頁設計的思考網站設計，包含的內容非常多。大體分兩個方面：一方面是純網站本身的設計比如文字排版，圖片制作，平面設計，三維立體設計，靜態(tài)無聲圖文，動態(tài)有聲影像等；另一方面是網站的延伸設計，包括網站的主題定位和瀏覽群的定位，智能交互，制作策劃，形象包裝，宣傳營銷等等。這兩方面相輔相成，加之網絡技術的飛速發(fā)

8、展，要提出一個絕對正確和權威的設計思路是不可能的，所以筆者根據(jù)建設一個網站的思路，將幾年以來的心得整理如下，希望大家在真正動手之前理清思路，為后續(xù)的學習帶來幫助。 選定網站主題和名稱如何選定主題，也就是如何明確打算設計的網站的題材。對于主題的選擇，給讀者的一點建議是：主題要小而精。定位要小，內容要精。最新的調查結果也顯示，“主題站”比“綜合站”更受人們喜愛。主題最好是喜愛或者拿手的內容。所謂“知之者不如好之者,好之者不如樂之者?！迸d趣愛好是收集網站素材的動力，只有有興趣才能制作出較好的網站作品。主題不要太濫。讀者要避免選擇到處可見，人人都有的主題；也要避免已經有非常優(yōu)秀、很知名站點的主題。網站

9、命名與現(xiàn)實生活中一樣，網站名稱是否正氣、易記、響亮，對網站的形象和宣傳推廣影響很大。給讀者的建議是：名正。名正則言順，網站的命名要弘揚時代主旋律、要合法、和理、和情。不能用反動、低俗、迷信、危害社會安全的名詞命名。簡短易記。根據(jù)中文網站瀏覽者的特點，網站名稱最好使用中文名稱，不建議用英文。網站名稱字數(shù)建議6個漢字以內，同樣為了好記；同時，站點logo也方便排版。出色。如果能體現(xiàn)一定的內涵，給瀏覽者更多的視覺沖擊和空間想象力，那就很出色了。當然實在做不到出色，名稱平實也可以接受。設計網站CI形象CI(corporate identity)指通過視覺來統(tǒng)一企業(yè)的形象。一個網站，和實體公司一樣，也需

10、要整體的形象包裝和設計。CI設計，對網站的宣傳推廣有事半功倍的效果。在網站主題和名稱定下來之后，需要思考的就是網站的CI形象。標志、色彩、字體，是一個網站樹立CI形象的關鍵1.設計網站的標志(logo)首先需要設計制作一個網站的標志(logo)。標志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化。網站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標志。最常用和最簡單的方式是用自己網站的英文名稱作標志。2.網站色彩的搭配網站給人的第一印象來自視覺沖擊，網站的色彩搭配是網站是否成功的重要因素。不同的色彩搭配產生

11、不同的效果，并可能影響到訪問者的情緒。一個網站的標準顏色最好不要超過3種，太多則讓人眼花繚亂。標準顏色要用于網站的標志、標題、主菜單和主色塊。給人以整體統(tǒng)一的感覺。至于其他色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。一般來說，適合于網頁標準色的顏色有：藍色、黃/橙色、黑/灰/白色三大系列色。3.設計網站的標準字體和標準顏色一樣，標準字體是指用于標志、標題，主菜單的特有字體。一般我們網頁默認的字體是宋體。為了體現(xiàn)站點的“與眾不同”和特有風格，我們可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設計精美可以用廣告體，體現(xiàn)親切隨意可以用手寫體等等。應該根據(jù)自己網站所表達

12、的內涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網絡上還有許多專用藝術字體下載。需要說明的是：使用非默認字體最好采用圖片的形式。倘若瀏覽者的計算機里沒有所用的特別字體，那么辛苦設計制作便無效。網頁設計的一般流程規(guī)劃網站結構。規(guī)劃網頁布局。收集網站素材。編輯網頁內容。測試發(fā)布網頁。認識Dreamweaver CC 2018Dreamweaver CC 2018新功能1HiDPI 分辨率支持 2多顯示器支持3Git 支持的增強功能4全新歡迎界面Dreamweaver CC 2018工作界面其他網頁制作工具FrontpageFlashFireworksPhotosho

13、pHTML的概念HTML 指的是超文本標記語言（HyperText Markup Language）是一種用于創(chuàng)建網頁的標準標記語言。HTML 不是一種編程語言，而是一種標記語言，是一套標記標簽 (markup tag)。HTML標記是有括住的指令，主要分為單標記指令和雙標記指令。HTML文件的基本結構如下所示：放置文章標題 /這里是網頁編碼現(xiàn)在是gb2312 這里就是正文內容1.5 上機練習本章上機練習介紹了在Dreamweaver CC 2018 中定義工作環(huán)境并保存定義的工作環(huán)境。對于本章中的其他內容，請讀者根據(jù)相應內容進行練習?！纠?.1】啟動Dreamweaver CC 2018，在

14、“標準”工作區(qū)布局的基礎上，在文檔窗口下方嵌入“屬性”面板，并保存自定義的工作區(qū)布局為“我的工作區(qū)”。Web前端設計與開發(fā)技術（HTML+CSS+JavaScript）江西農業(yè)大學計算機與信息工程學院主講人： 第2章規(guī)劃網站結構創(chuàng)建站點2.2規(guī)劃網站結構創(chuàng)建本地站點創(chuàng)建站點文件上機練習建立一個網站好比寫一篇文章，首先要擬好提綱，文章才能主題明確、層次清晰；網站要做到結構清晰、目錄簡明、內容貼切。在創(chuàng)建網站之前，首先要設計并規(guī)劃好整個站點需要有哪些欄目，有哪些頁面，然后才能進行具體的網頁制作的過程。本章主要介紹如何規(guī)劃網站結構，如何創(chuàng)建和管理站點，如何創(chuàng)建不同類型的網頁文檔。學

15、習目標規(guī)劃網站結構創(chuàng)建本地站點創(chuàng)建站點文件夾網頁文檔的基本操作顯示和編輯頁面頭部信息2.1 規(guī)劃網站結構在確定了網站的主題和整體風格之后，結合網站主題確定網站的目錄結構、鏈接結構和整體風格創(chuàng)意設計。設計目錄結構規(guī)劃鏈接結構設計目錄結構1.目錄應切合主題（1）主要目錄一定要緊扣主題。（2）次要目錄適當設置。（3）所有程序一般都存放在特定目錄，便于維護管理。（4）注意與瀏覽者的交互。2根目錄下盡量少存放文件3在每個主要目錄下都要有獨立的images目錄4目錄命名要科學。5目錄層次要簡明。規(guī)劃鏈接結構網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。規(guī)劃鏈接結構的目的在于：用最少的鏈接，使得網頁的瀏覽最

16、有效率。樹狀結構全網結構混合策略首頁1級頁面11級頁面21級頁面31級頁面442級頁面12級頁面22級頁面32級頁面42級頁面52級頁面6首頁1級頁面11級頁面21級頁面31級頁面442級頁面12級頁面22級頁面32級頁面42級頁面52級頁面6混合策略首頁1級頁面11級頁面21級頁面31級頁面442級頁面12級頁面22級頁面32級頁面42級頁面52級頁面62.2 創(chuàng)建本地站點對同一網站中的文件是以“站點”為單位來進行組織和管理的，創(chuàng)建站點后用戶可以對網站的結構有一個整體的把握，而創(chuàng)建站點并以站點為基礎創(chuàng)建網頁也是比較科學、規(guī)范的設計方法。在創(chuàng)建站點之前，一般在本地將整個網站完成，然后再將站點上

17、傳到網絡中的WEB服務器上給定的空間。2.3 創(chuàng)建站點文件創(chuàng)建好本地站點后，可以根據(jù)需要創(chuàng)建各欄目文件夾和文件，對于創(chuàng)建好的站點，也可以進行再次編輯、刪除或復制這些站點。2.3.1 創(chuàng)建文件夾和文件2.3.2 管理文件夾和文件2.3.3 創(chuàng)建空白網頁文檔2.3.4 保存和打開網頁文檔2.3.5查看和編輯文件頭內容2.3.6 HTML 元素2.4上機練習Web前端設計與開發(fā)技術（HTML+CSS+JavaScript）江西農業(yè)大學計算機與信息工程學院主講人： 第3章首頁設計與網頁布局3.2首頁布局設計視圖選項 使用表格上機練習首頁是網站中非常重要的一頁，網頁內容的布局方式取決于

18、網站的主題定位。在Dreamweaver中，表格是最常用的網頁布局工具，表格在網頁中不僅可以排列數(shù)據(jù)，還可以對頁面中的圖像、文本、動畫等元素進行準確定位，使網頁頁面效果顯得整齊而有序。本章主要介紹如何使用表格規(guī)劃首頁布局。學習目標網頁布局設計視圖選項網頁中表格的作用在網頁中插入表格編輯表格導入和導出表格3.1首頁布局網站首頁的設計是非常重要的，關系著網站成功與否。瀏覽者往往看到第一頁就已經對站點有一個整體的感覺。是否能夠吸引瀏覽者繼續(xù)單擊進入，是否能夠留住瀏覽者，就看首頁。版面布局規(guī)劃鏈接結構“國”字型（同字型）、T型、標題正文型、框架型、封面型、Flash型、變化型首頁布局簡要步驟版面布局對

19、于版面布局的技巧，提供四個建議，請讀者自己推敲：加強視覺效果加強文案的可視度和可讀性統(tǒng)一感的視覺新鮮和個性是布局的最高境界首頁布局簡要步驟畫草圖新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，讀者可以盡可能的發(fā)揮你的想象力，將想象畫上去。這仍然屬于創(chuàng)意階段，只需要粗陋的線條勾畫出創(chuàng)意的輪廓?？梢远喈嫀讖埐輬D，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。粗略布局在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。例如：網站標志、主菜單、新聞、搜索、友情鏈接、廣告條、郵件列表、計數(shù)器、版權信息等。注意，必須遵循突出重點、平衡諧調的原則，將網站標志、主菜單等最重要的模塊放在最顯眼，最突出的位

20、置，然后再考慮次要模塊。定稿最后將粗略布局具體化、精細化，覺得滿意就可以定稿。設計視圖選項“設計視圖選項”功能，用于輔助設計網頁文檔。該功能包括“可視化助理”“樣式呈現(xiàn)”“輔助線”“跟蹤圖像”“網格設置”“窗口大小”“縮放比率”和“標尺”等子菜單。其中，“標尺”功能可以輔助測量、組織和規(guī)劃布局?！熬W格設置”功能可以使絕對定位的網頁元素在移動時自動靠齊網格，還可以通過指定網格設置更改網格或控制靠齊行為。使用“標尺”功能在設計頁面時需要設置各種頁面元素的位置，此時，可以使用“標尺”功能。選擇“查看”“設計視圖選項”“標尺”“顯示”命令，可以在文檔中顯示標尺，如圖3.9所示。重復操作，可以隱藏或顯示

21、標尺。1.設置標尺的原點在標尺的左上角區(qū)域單擊，然后拖拽，會出現(xiàn)十字準星，將其拖拽到文檔窗口中的適當位置。2.恢復標尺初始位置要恢復標尺初始位置，可以選擇“查看”“設計視圖選項”“標尺”“重設原點”命令，或者在標尺左上角交點處雙擊鼠標。使用“網格設置”功能“網格設置”功能的作用是在“設計”視圖中對Div進行那個繪制、定位或大小調整時做可視化向導，可以對齊頁面中的元素。選擇“查看”“設計視圖選項”“網格設置”“顯示網格”命令，可以在網頁文檔中顯示網格。如果要設置網格的相關屬性，可以選擇“查看”“設計視圖選項”“網格設置”“網格設置”命令。使用“跟蹤圖像”功能可以采取臨摹字帖的方法進行布局?？梢詫?/p>

22、喜歡的某個網站進行截屏，并存為圖片形式，然后利用“跟蹤圖像”功能，將其載入，進行臨摹，照著布局。【例3.1】新建頁面，臨摹給定圖片的布局，并將其載入為跟蹤圖像。3.3使用表格網頁能夠向訪問者提供的信息是多樣化的，包括文字、圖像、動畫和視頻等。如何使這些網頁元素在網頁中的合理位置上顯示出來，使網頁變得不僅美觀而且有條理，是網頁設計者在著手設計網頁之前必須要考慮的問題。表格的作用就是幫助用戶高效、準確地定位各種網頁數(shù)據(jù)，并直觀、鮮明地表達設計者的思想。網頁中表格的用途表格是網頁中最常用的排版方式之一插入表格選擇“插入”Table命令(或按下【Ctrl+Alt+T】組合鍵)，可以打開Table對話框

23、，通過在該對話框中設置表格參數(shù)，可以在網頁中插入表格?！纠?.2】在例3.1的基礎上插入用于布局的表格，并設置相關屬性。接例3.1得到的效果，觀察“跟蹤圖像”，進行分析，最上一行為網站標志，下面可能有若干行展示不同目錄。設置標尺原點為“跟蹤圖像”有內容展示的最左端，觀察最右端的標尺讀數(shù)為“1000”，表示實際展示內容的尺寸為1000像素，左右兩邊有相同的留白。通過上述兩步驟，明確了插入表格的相關參數(shù)，選擇“插入”Table命令，設置相應參數(shù)如下：“行數(shù)”為“5”、“列”為“1”、“表格寬度”為“1000”像素、“邊框粗細”為“0”。選中該表格，或者在標簽選擇器中選擇table標簽，在下方“屬性

24、”面板可以看到剛插入表格的屬性。設置Align（對齊）屬性為“居中對齊”。可以發(fā)現(xiàn)，表格寬度正好匹配“跟蹤圖像”。編輯表格表格的編輯功能包括選擇表格、調整大小、更改列寬和行高、添加和刪除行列、拆分與合并單元格、設置表格屬性、設置單元格屬性、設置行列屬性等。選擇表格是對表格進行編輯操作的前提?？梢砸淮涡赃x擇整個表、行或列，也可以選擇連續(xù)的單元格。HTML 元素設置表格屬性選中一個表格后，可以在屬性面板中編輯表格的屬性。1）表格名稱。2）行、列和寬?！靶小薄傲小蔽谋究蝻@示所選表格中行和列的數(shù)量?！皩挕蔽谋究蝻@示所選表格的寬度，以像素為單位或表示為占瀏覽器窗口寬度的百分比。可以通過修改這些文本框中的

25、數(shù)值，從而改變對應的屬性。3 ） CellPad(單元格邊距)、CellSpace(單元格間距)Align（對齊）、Border（邊框）4）Class。Class（類）用于對該表格設置一個 CSS 類。5）“清除列寬”“清除行高”“將表格寬度轉換成像素”“將表格寬度轉換成百分比”按鈕。設置單元格、行或列屬性選中一個表格元素后，可以使用“屬性”面板編輯該元素的相關屬性。1）水平，用于指定單元格、行或列內容的水平對齊方式。2）垂直，用于指定單元格、行或列內容的垂直對齊方式。 3）寬和高 ，所選單元格的寬度和高度，以像素為單位或按整個表格寬度或高度的百分比指定。若要指定百分比，請在值后面使用百分比符

26、號 (%)。4）背景，用于指定單元格、列或行的背景顏色。 5）合并單元格，將所選的單元格、行或列合并為一個單元格。6）拆分單元格，將一個單元格分成兩個或更多個單元格。7）不換行，勾選此項屬性可以防止換行，從而使給定單元格中的所有文本都在一行上。8）標題，勾選此項屬性可以將所選的單元格格式設置為表格標題單元格。默認情況下，表格標題單元格的內容為粗體并且居中。調整表格、列和行的大小1）調整表格大小。2）調整列和行的大小。3）更改列寬度并保持整個表的寬度不變。4）更改某個列的寬度并保持其他列的大小不變。5）清除表格中所有設置的寬度和高度?！纠?.3】在例3.2的基礎上，對用于布局的表格進行編輯，達到

27、大約1個滿屏大小的大塊布局的效果。觀察例3.2所插入的表格，發(fā)現(xiàn)寬度基本與跟蹤圖像吻合，但是行的高度上需要進行進一步編輯。鼠標指向第1行的下邊沿，進行拖拽，到合適的位置釋放鼠標。依次修改第2、3行的行高，因為跟蹤圖像可能只截了一個屏幕的高度，因此，下方的圖不能完全展示，可以參照第2行的行高，設置下方各行的高度，如圖3.29所示，插入點設置在第2行是，“屬性”面板中“高”的值可以做為后續(xù)各行行高的參考。網頁的高度，會隨著布局表格各行的高度的擴展自動更新插入及刪除行或列要添加和刪除行和列，請使用“編輯”“表格”下的各個菜單命令。 1）插入行或列。2）刪除行或列。拆分或合并單元格 使用屬性面板或選擇

28、“編輯”“表格”“拆分單元格”或“合并單元格”命令可以拆分或合并單元格。 選擇連續(xù)行中形狀為矩形的單元格?？梢栽谝粋€矩形的單元格中合并單元格，如果所選部分不是矩形，不能合并單元格。復制、粘貼和刪除單元格選定某表格元素后，執(zhí)行“編輯”“剪切”、“拷貝”或“粘貼”可以剪切、復制或粘貼該表格元素，并保留單元格的格式設置。嵌套表格嵌套表格是在另一個表格的單元格中的表格。可以像對任何其他表格一樣對嵌套表格進行格式設置；但是，其寬度受它所在單元格的寬度的限制。表格的其他操作對表格進行排序可以選擇“編輯”“表格”“排序表格”命令對表格進行排序?？梢愿鶕?jù)單個列的內容對表格中的行進行排序，還可以根據(jù)兩個列的內容

29、執(zhí)行更加復雜的表格排序，但是不能對包含合并單元格的表格進行排序。導入表格式數(shù)據(jù)可以將在另一個應用程序（例如 Microsoft Excel）中創(chuàng)建并以分隔文本的格式（其中各項以制表符、逗號、冒號或分號隔開）保存的表格式數(shù)據(jù)導入到網頁文檔中并設置為表格格式。導出表格選擇表格后，可以選擇“文件”“導出”“表格”命令，用于導出表格HTML 表格表格由 標簽來定義。每個表格均有若干行（由 標簽定義），每行被分割為若干單元格（由 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格標簽描述定義表格定義表格的表頭定義表

30、格的行定義表格單元定義表格標題定義表格列的組定義用于表格列的屬性定義表格的頁眉定義表格的主體定義表格的頁腳3.4 上機練習請讀者參照例3.1-例3.4，選取江西農業(yè)大學官方網站為臨摹對象，將該網站截圖設置為跟蹤圖像，并進行網頁的布局。Web前端設計與開發(fā)技術（HTML+CSS+JavaScript）江西農業(yè)大學計算機與信息工程學院主講人： 第4章 4.2 文本的使用編輯文本圖像的使用編輯圖像4.54.6HTML中的文本與圖像上機練習文本和圖像時網頁最基本的元素，文本是傳遞和展示信息的主要手段，圖像不僅可以美化網頁，還可以展現(xiàn)生動的視覺效果。本章主要介紹Dreamweaver

31、CC 2018如何在網頁中插入文本和圖像，并對文本和圖像進行編輯操作，制作基本網頁，實現(xiàn)圖文并茂。學習目標在網頁中插入文本編輯文本在網頁中插入圖像編輯圖像4.1 文本的使用文本既是網頁中不可缺少的內容，也是網頁中最基本的對象。由于文本的存儲空間非常小，所以在一些大型網站中，其占有不可代替的主導地位。在一般網頁中，文本一般以普通文字、段落或各種項目符號等形式顯示。向文檔添加文本直接輸入文本：默認輸入文本的排列方式是由左到右。復制文本：可以將其他文檔中的文本內容復制粘貼到網頁文檔中。插入特殊字符單擊“插入”面板，選擇“HTML”，往下拖動右側滾動條，在“字符”菜單中選擇字符名稱還有很多其他特殊字符

32、可供使用；可以選擇“插入”“HTML”“字符”“其他字符”命令。版面布局不換行空格HTML 只允許字符之間有一個空格；若要在文檔中添加其他空格，必須插入不換行空格。設置允許添加多個連續(xù)的空格首選項為了能方便的輸入多個連續(xù)的空格，還可以設置允許添加多個連續(xù)空格選擇“編輯”“首選項”命令，在“常規(guī)”類別中勾選“允許多個連續(xù)的空格”插入日期直接插入日期如果要在網頁文檔中插入日期，可以選擇“插入”面板中的“HTML”“日期”命令插入動態(tài)變化的日期是通過插入代碼來實現(xiàn)的?！纠?.1】新建一個網頁文檔，輸入代碼插入即時日期和時間。新建網頁文檔，插入一個2行1列的表格。在第一行輸入相應文字。選擇“查看”“代

33、碼”命令切換到“代碼”視圖，將光標移至標簽之間，輸入如下代碼。document.write()/輸出顯示時間日期的容器setInterval(function() with(new Date)time.innerText =(getFullYear()+年+(getMonth()+1)+月+getDate()+日星期+日一二三四五六.charAt(getDay()+ +getHours()+:+getMinutes()+:+getSeconds() ,1000) /設置 id 為 time 的對象內的文本為當前日期時間/每1000毫秒(即1秒) 執(zhí)行一次本段代碼單擊“狀態(tài)欄”右側“實時預覽”按

34、鈕，在快捷菜單中選擇任意瀏覽器，按彈出的“Dreamweaver”對話框提示保存網頁文檔后，在瀏覽器顯示動態(tài)時間插入水平線水平線對于組織信息很有用。在頁面上，可以使用一條或多條水平線以可視方式分隔文本和對象。選擇“插入”“HTML”“水平線”命令，可以插入水平線?！懊Q”文本框：可用于為水平線指定 ID。“寬”、“高”文本框：以像素為單位或以頁面大小百分比的形式指定水平線的寬度和高度?！皩R”下拉列表框：指定水平線的對齊方式，包括默認、左對齊、居中對齊或右對齊。僅當水平線的寬度小于瀏覽器窗口的寬度時，該設置才適用?！瓣幱啊?指定繪制水平線時是否帶陰影。取消選擇此選項將使用純色繪制水平線。Cla

35、ss（類）:可用于附加樣式表，或者應用已附加的樣式表中的類。水平線對應的HTML代碼是，在括號中設置“color”屬性4.2 編輯文本編輯文本操作，可以將網頁中的文本進行各種設置，使得枯燥的文本更生動。文本格式設置與使用標準的字處理程序類似?？梢詾槲谋緣K設置默認格式設置樣式（段落、標題 1、標題 2 等）、更改所選文本的字體、大小、顏色和對齊方式，或者應用文本樣式（如粗體、斜體、代碼（等寬字體）和下劃線）。設置文本格式文本的格式主要包括縮進方式、粗/斜體和縮進方式等。應用標準格式可以將光標定義在段落中，使用“屬性”面板的“格式”下拉列表框，可以應用標準文本格式。應用標準格式的最小單位是段落，所

36、以無法再同一段落中應用不同的標準格式。設置粗或斜體文本的加粗或傾斜也在“屬性”面板中設置，單擊“粗體” 或“斜體” 按鈕，可以將所選文字進行加粗或者傾斜，此項設置最小單位是單個文本，所以在同一段落可以設置不同的加粗或者傾斜效果。讀者切換到“代碼”視圖可以發(fā)現(xiàn)，此項設置是將或應用于所選文本。3設置文本縮進設置文本縮進包括增加縮進和減少縮進。將光標移至文檔中需要設置格式的段落，在“屬性”面板中設置單擊“文本縮進”按鈕 ，增加該段落的縮進；單擊“文本凸出”按鈕 ，減少段落的縮進。讀者切換到“代碼”視圖可以發(fā)現(xiàn)，此項設置是將或應用于所選文本。設置列表在網頁中，用戶可以使用很多種方法來排列項目，可以將多

37、種項目沒有順序地排列，也可以為每個項目賦予編號后再進行排列。一般情況下，沒有順序的排列方式稱為無序列表，也叫項目列表；而賦予編號排列的方式被稱為有序列表，也叫編號列表;還可以由用戶自定義列表，不使用項目符號點或數(shù)字這樣的前導字符，并且通常用于詞匯表或說明。列表可以嵌套。嵌套列表是包含其他列表的列表。創(chuàng)建新列表將插入點放置在要添加列表之處，然后執(zhí)行以下某項操作可以實現(xiàn)：在 HTML 屬性檢查器中，單擊“編號列表”或“列表項目”。選擇“插入”面板“HTML”，然后選擇所需的列表類型：“項目列表”、“編號列表”或“列表項”命令。輸入完某一列表項目文本后，回車換行后，在下一行創(chuàng)建該列表下一項文本，可以

38、繼續(xù)輸入，若要結束該列表，按兩次回車即可。使用現(xiàn)有文本創(chuàng)建列表可以將一系列段落創(chuàng)建為列表。選中若干段落之后，再選擇“插入”面板“HTML”“項目列表”、“編號列表”或“列表項目”即可。創(chuàng)建嵌套列表選擇要嵌套的列表項目，再選擇“編輯”“文本”“縮進”命令或“屬性”面板上的“縮進”按鈕。將縮進文本并創(chuàng)建一個單獨的列表，該列表具有原始列表的 HTML 屬性。設置整個列表的列表屬性對列表進行屬性設置，需要該列表至少有一個項目的文字。將插入點放到列表項目的文本中，然后單擊“屬性”面板右下方的“列表項目”按鈕；或右鍵單擊后，在彈出的快捷菜單中選擇“列表”“屬性”；或者在菜單欄選擇“編輯”“列表”“屬性”命

39、令。4.3 圖像的使用圖像是多媒體元素的代表之一，正因為網頁中有了圖像，才使得整個互聯(lián)網豐富多彩。制作精美的圖像可以大大增強網頁的視覺效果。在網頁中插入圖像通常是用于展示具有視覺沖擊力的內容、添加交互式設計元素或者做為圖形界面元素網頁中的圖像格式JPEG（JPG） 大約1670萬種顏色GIF 最多顯示256種顏色 PNG 支持透明背景插入圖像直接插入圖像直接插入圖像時最常用的插入圖像方法。將光標移至所需插入圖像的位置。選擇“插入”面板“HTML”“image”命令，打開“選擇圖像源文件”對話框，選中圖像文件后，單擊“確定”按鈕即可。設置網頁背景圖像通過設置頁面屬性，可以將某個圖像文件設置為網頁

40、的背景圖像?！纠?.2】新建一個網頁文檔，設置頁面背景圖片，并在網頁中插入一個透明的PNG圖像文件。新建網頁文檔，在“屬性”面板單擊“頁面屬性”按鈕。默認打開的是“外觀”分類選項，單擊右側“背景圖像”文本框右側的“瀏覽”按鈕，彈出“選擇圖像源文件”對話框。選擇要設置為網頁背景圖像的文件，單擊“確定”按鈕，返回“頁面屬性”對話框。如果要設置背景圖片重復的效果，在“頁面屬性”對話框的“重復”下拉列表框選擇不同的選項。默認“重復”選項是“repeat”選擇“插入”“image”命令，在網頁中插入一個PNG應用鼠標經過圖像鼠標經過圖像時由原始圖像和鼠標經過圖像兩個圖像文件組成，功能是當鼠標經過原始圖像

41、上方時，原始圖像變成另一張圖像，因此組成鼠標經過圖像的兩張圖像一般應該是相同大小。如果兩張圖像大小不同，系統(tǒng)會自動按照原始圖像的大小來調整鼠標經過圖像。鼠標經過圖像多用于達到進入某欄目的按鈕。選擇“插入”“HTML”“鼠標經過圖像”命令，打開“插入鼠標經過圖像”對話框。4.4 編輯圖像Dreamweaver CC 2018 提供了基本的圖像編輯功能，無需使用外部圖像編輯應用程序即可修改圖像。在 Dreamweaver 中對圖像進行重新取樣并裁切、優(yōu)化和銳化圖像，還可以調整圖像的亮度和對比度。設置圖像屬性選中圖像后，在“屬性”面板允許設置圖像的屬性內部編輯器Dreamweaver CC 2018

42、集成了Fireworks的基本圖像編輯技術，可以不用借助外部圖形圖像編輯軟件如 Photoshop等，直接對圖形進行基礎的圖像編輯。選中網頁文檔中的圖像，在“屬性”面板中部，可以看到“編輯”系列按鈕【例4.3】對網頁文件中的圖像執(zhí)行裁切操作。打開包含要裁切的圖像的頁面，選擇圖像，單擊“屬性”面板中的“裁剪”按鈕 ，或者選擇“編輯”“圖像”“裁剪”命令。彈出永久性改變警告，單擊“確定”按鈕。所選圖像周圍會出現(xiàn)裁剪控制柄。調整裁切控制柄直到邊界框包含的圖像區(qū)域符合所需大小。在邊界框內部雙擊或按 Enter 裁切選定內容。所選位圖的定界框外的所有像素都將被刪除，但圖像中的其他對象會被保留?！爸匦氯?/p>

43、”按鈕 ：添加或減少已調整大小的 JPEG 和 GIF 圖像文件的像素，以與原始圖像的外觀盡可能地匹配。對圖像進行重新取樣會減小該圖像的文件大小并提高下載性能。調整圖像大小時，可以對圖像進行重新取樣，以適應其新尺寸。對位圖對象進行重新取樣時，會在圖像中添加或刪除像素，以使其變大或變小。對圖像進行重新取樣以取得更高的分辨率一般不會導致品質下降。但重新取樣以取得較低的分辨率總會導致數(shù)據(jù)丟失，并且通常會使品質下降?！傲炼群蛯Ρ榷取卑粹o ：可以修改圖像中像素的對比度或亮度。亮度和對比度會影響圖像的高亮、陰影和中間色調。修正過暗或過亮的圖像時通常使用“亮度/對比度”。“銳化”按鈕 ：可以通過增加圖像中邊

44、緣的對比度調整圖像的焦點。掃描圖像或拍攝數(shù)碼照片時，大多數(shù)圖像捕獲軟件的默認操作是柔化圖像中各對象的邊緣。這樣掃描可以防止特別精細的細節(jié)從組成數(shù)碼圖像的像素中丟失。不過，要顯示數(shù)字圖像文件中的細節(jié)，往往需要銳化圖像。使用“銳化”選項會增加邊緣對比度，使圖像更加清晰。HTML 中的文本與圖像 HTML中的標題HTML中的標題（Heading）是通過 - 標簽進行定義的。定義最大的標題。定義最小的標題。在進行網頁設計時，不要僅僅是為了生成粗體或大號的文本而使用標題，請注意將 HTML 標題標簽只用于標題。因為搜索引擎使用標題為網頁的結構和內容編制索引，而且用戶可以通過標題來快速瀏覽網頁，所以用標題

45、來呈現(xiàn)文檔結構很重要。注意應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。HTML中的注釋可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。注釋寫法如下: 合理地使用注釋可以對未來的代碼編輯工作產生幫助。HTML中的段落HTML 可以將文檔分割為若干段落。段落是通過標簽定義的。瀏覽器會自動地在段落的前后添加空行。但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。如果您希望在不產生一個新段落的情況下進行換行（新行），請使用標簽。HTML 格式化標簽HTML 使用標簽(bold) 與

46、(italic) 對輸出的文本進行格式, 如：粗體或斜體。這些HTML標簽被稱為格式化標簽HTML中的圖像在 HTML 中，圖像由標簽定義。是空標簽，它只包含屬性，并且沒有閉合標簽。要在頁面上顯示圖像，需要使用源屬性（src）。src 指 source。源屬性的值是圖像的 URL 地址。4.6 上機練習本章的上機練習主要是在上一章節(jié)完成網頁布局的基礎上，插入文本和圖像，制作一個基本網頁，并應用鼠標經過圖像制作相關目錄的進入按鈕。對于其他內容，讀者可以根據(jù)相應內容和例題進行練習。【例4.4】在上一章節(jié)例3.4所完成布局的網頁文件index的基礎上，制作網站主頁。Web前端設計與開發(fā)技術（HTML

47、+CSS+JavaScript）江西農業(yè)大學計算機與信息工程學院主講人： 第5章 精美內容網頁的制作5.15.2網頁復用自制導航條插入FLASH動畫插入HTML5 Video和HTML5 Audio插入插件背景音樂滾動條上機練習主頁制作完之后，快速的制作內容網頁，學會網頁復用，提高制作內容網頁的效率。除此之外，網頁內容還可以加入Flash動畫、音樂、Java Applet等動態(tài)元素和網頁特效，可以使網頁更具動感效果、讓網頁更加精美。本章主要介紹Dreamweaver CC 2018如何插入多媒體元素來設計精美內容網頁；另外還要求讀者掌握重復使用網頁部分內容，

48、從而提高內容網頁的制作效率。學習目標網頁復用 自制導航條在網頁插入Flash動畫 插入其他媒體文件插入聲音文件 應用網頁特效5.1網頁復用一般來說網站的主頁和內容網頁，或者內容網頁和目錄的主網頁之間總有一些地方是幾乎不會變化的。那么那些幾乎不會變化的部分就可以重復使用，提高制作內容網頁的效率?！纠?.1】在已有主頁的基礎上，利用復用思維，創(chuàng)建內容網頁。進入站點，打開已有主頁index.html文件。通過觀察發(fā)現(xiàn)，網頁最上方和最下方的內容在其他內容網頁需要保留。將不需要的內容刪除，選擇“文件”“另存為”命令。為其取名“RGB01”，然后單擊“保存”按鈕。此時，布局表格的最外層還在。適當調整表格各

49、行的高度，進行內容網頁布局。第二行用于放置整個網站的目錄結構，也就是后續(xù)小節(jié)的自制導航條；第三行用于放置明確本頁面所在網站的位置；第四行為頁面的主體內容區(qū)域。分別在網頁位置和主體內容區(qū)域插入相應表格、文本、圖像后，就可以快速得到一個內容網頁的初稿。5.2自制導航條Dreamweaver CC 2018取消了導航條功能，但是在網站設計的工作中，發(fā)現(xiàn)網站中的所有網頁中都應該有一個像圖書目錄一樣部分，用于全面了解網站目錄結構，也方便快速跳轉到所需的頁面。因此，本書單列此小節(jié)，以保證網站使用的方便快捷。文本導航條導航條可以使用文本制作的一個目錄，再加上后續(xù)超鏈接章節(jié)的內容就可以方便的實現(xiàn)跳轉功能。【例

50、5.2】為例5.1制作的RGB01.html文件制作文本導航條。打開RGB01.html網頁文件，在預留做導航條的空白單元格插入表格。表格的行列根據(jù)網站目錄結構設置，此處插入2行6列的表格。選擇“插入”“Table”命令，彈出“Talbe”對話框，設置設置“行數(shù)”為“2”，“列”為“6”，“表格寬度”為“100%”，“邊框粗細”為“0”，“單元格邊距”為“0”，“單元格間距”為“0” 。調整外層單元格的高度，與所插入表格匹配。分別在各個單元格輸入網站規(guī)劃時設定的目錄名稱，并設置為“粗體” 。在學習后續(xù)章節(jié)超鏈接知識之后，就可以真正實現(xiàn)導航功能。圖像導航條可以利用文本創(chuàng)建導航條，在事先準備好圖像

51、文件的前提下也可以用圖像文件或鼠標經過圖像創(chuàng)建導航條?！纠?.3】為某欄目創(chuàng)建該欄目的圖像導航條。參照上一小節(jié)的方法，刪除主體內容，將網頁位置修改為“第七章紅色系”，上方表格中的文本導航暫時不變。將空白區(qū)域的一個大單元格拆分成兩列，左側1列用于豎排若干導航圖像，右側1列則為主體內容區(qū)域。此目錄下，預計有8個頁面，因此，左側單元格內，嵌套一個9行1列的表格，第1行用于留白，其他8行用于安排豎向導航條。展開右側的“文件”面板，在“本地文件”欄目下找到“red”文件夾，雙擊展開，再進入“images”文件夾，可以看到事先準備好的導航圖像正在其中?？梢詫ⅰ氨镜匚募敝械膱D像文件圖標直接拖放到對應的單元

52、格中，完成插入圖像文件的操作。選中圖像文件所在的整列表格，修改“水平”屬性為“居中對齊”。到此為止，本欄目的圖像導航條的制作完畢5.2 插入Flash動畫Flash 動畫是網頁上最流行的動畫格式。Flash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內容加入到一個文件中，并能制作較好的動畫效果，同時使用了優(yōu)化的算法將多媒體數(shù)據(jù)進行壓縮，是文件變得很小，因此非常適合在網上傳播。認識Flash文件FLA 文件 (.fla) 是Flash的源文件，使用 Flash 創(chuàng)作工具創(chuàng)建。只能在 Flash 中打開。需要時，可以在 Flash 中打開 FLA 文件，然后將它發(fā)布為 SWF 或 SWT

53、 文件以在瀏覽器中使用。SWF 文件 (.swf) SWF 文件是FLA (.fla) 文件的編譯版本，已進行優(yōu)化，可以在 Web 上查看。SWF文件可以在瀏覽器中播放并且可以在 Dreamweaver 中進行預覽，但不能在 Flash 中編輯此文件。FLV 文件 (.flv) FLV 文件是一種視頻文件，它包含經過編碼的音頻和視頻數(shù)據(jù)，用于通過 Flash Player 進行傳送。例如，如果具有 QuickTime 或 Windows Media 視頻文件，可以使用編碼器將該視頻文件轉換為 FLV 文件。插入SWF 文件在“文檔”窗口的“設計”視圖中，將插入點放置在要插入內容的位置，選擇“插

54、入”“HTML”“Flash SWF”命令。在彈出的“選擇SWF”對話框中，選擇一個 SWF 文件 (.swf)，并單擊“確定”按鈕。將在“文檔”窗口中顯示一個 SWF 文件占位符。按F12預覽該網頁，在彈出確認保存網頁文件的警告框之后，還會彈出“復制相關文件”對話框，Dreamweaver CC 2018提示正在將兩個相關文件（expressInstall.swf 和 swfobject_modified.js）保存到站點中的 Scripts 文件夾。在將 SWF 文件上傳到 Web 服務器時，不要忘記上傳這些文件，否則瀏覽器無法正確顯示 SWF 文件。設置 SWF 文件屬性在Dreamwe

55、aver CC 2018中可以使用“屬性”面板設置 SWF 文件的屬性。這些屬性也適用于 Shockwave 影片。選擇一個 SWF 文件或 Shockwave 影片，然后在“屬性”面板中設置選項。Flash Video視頻Flash VIdeo視頻并不是Flash動畫，它的出現(xiàn)是為了解決Flash以前對連續(xù)視頻只能使用JPEG圖像進行幀內壓縮，并且壓縮效率低，文件很大，不適合視頻存儲的弊端。Flash VIdeo視頻采用幀間壓縮的方法，可以有效地縮小文件大小，并保證視頻的質量。在Dreamweaver中選擇“插入”“HTML”“Flash Video”命令，彈出“插入FLV”對話框。【例5.

56、4】新建一個網頁文件，在合適的位置插入FLV視頻文件。新建一個空白網頁文件。選擇“插入”“HTML”“Flash Video”命令，在彈出的“插入FLV”對話框中選擇文件。在“文檔”窗口可以看到FLV文件標記。5.3插入 HTML5 Video和HTML5 Audio允許在網頁中插入 HTML5 視頻Video和HTML5 Audio，以使用戶能夠在瀏覽器中播放視頻和音頻文件，而無需使用外部增效工具或播放器。插入 HTML5 VideoHTML5 視頻元素提供一種將電影或視頻嵌入網頁中的標準方式。選擇“插入”“HTML”“HTML5 Video”。HTML5 視頻元素將會插入指定位置。雖然可以

57、在網頁中嵌入任何視頻，但“實時”視圖并非始終呈現(xiàn)所有視頻，往往只顯示一個HTML5 Video圖標。Dreamweaver CC 2018使用 Apple QuickTime 增效工具來支持音頻和視頻標簽。在 Windows 中，如果已安裝 Apple QuickTime 插件，網頁會呈現(xiàn)媒體播放器和媒體內容；否則不會呈現(xiàn)媒體內容。插入 HTML5 AudioHTML5 音頻元素提供一種將音頻內容嵌入網頁中的標準方式。選擇“插入”“HTML”“HTML5 Audio”。音頻文件將會插入到指定位置，此時，“文檔”窗口出現(xiàn)音頻文件圖標。5.4 插入插件現(xiàn)在瀏覽器支持的多媒體文件越來越多，文件也越來

58、越小，但是表現(xiàn)的效果卻一點也不遜色以前。允許在網頁中通過插入插件的方式嵌入音頻和視頻。網頁中的音頻格式MP3格式 最大的特點就是能以較小的比特率，較大的壓縮比達到近科完美的CD音質。WAV格式 具有較好的聲音品質，許多瀏覽器都支持此格式，并且不要求安裝插件。AIF格式 AIF格式的音頻文件也具有較好的聲音品質，容量通常較大。MIDI格式 這種格式一般用于器樂類的音頻文件。.ra、.ram、.rpm或Real Audio具有非常高的壓縮比，文件大小比MP3小。歌曲文件可以在合理的時間范圍內下載。必須下載并安裝RealPlayer軟件才能播放。插入音頻要在網頁中加入聲音，選擇“插入”“HTML”“

59、插件”命令，彈出“選擇文件”對話框，選中要插入的音頻文件，單擊“確定”按鈕即可。在“文檔”窗口的“設計”視圖，只能看到插件圖標，并不會顯示播放聲音的狀態(tài)。只有在實時預覽時才能看到播放器。插件的默認“寬”和“高”的值均為“32”。因此，在實時預覽只能看到播放器的部分，那么需要對插件修改大小，以便網頁中能完整顯示播放器。修改插件大小可以直接用鼠標拖放插件的定位標尺，也可以在“屬性”面板設置“寬”和“高”屬性的值為合適大小。1AVI格式2MOV格式（QuickTime）3MPEG/MPG/DAT格式4RM(Real Media)格式5ASF(Advanced Streaming Format)格式網

60、頁中的視頻格式插入視頻選擇“插入”“HTML”“插件”命令，彈出“選擇文件”對話框，選中要插入的視頻文件，單擊“確定”按鈕即可。在“文檔”窗口的“設計”視圖，只能看到默認32*32像素大小的插件圖標，因此必須拖放插件大小，以便完整播放視頻的需要。5.5 背景音樂插件隱身設置背景音樂在標簽后輸入“”, 在下拉列表中選擇“bgsound”標簽5.6滾動條插入滾動條這里是滾動條【例5.5】新建一個網頁文件，在文檔中插入一張圖片，并使圖片滾動起來。新建一個網頁文件，在文檔中插入一張圖片。選擇“查看”“代碼”命令，切換到“代碼”視圖。找到其中的標簽，在標簽前面和后面分別加入和，如圖5.35所示。5.7上