大學信息技術基礎教程課件 第5章 信息的展示 5.3 網頁制作基礎_第1頁
大學信息技術基礎教程課件 第5章 信息的展示 5.3 網頁制作基礎_第2頁
大學信息技術基礎教程課件 第5章 信息的展示 5.3 網頁制作基礎_第3頁
大學信息技術基礎教程課件 第5章 信息的展示 5.3 網頁制作基礎_第4頁
大學信息技術基礎教程課件 第5章 信息的展示 5.3 網頁制作基礎_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

5.3網頁制作基礎目錄頁contents網頁制作基本概念1表格5HTML語言2多媒體對象6網站的建立與管理3表單7網頁制作4綜合練習81ONE網頁制作基本概念網站網站是具有共同主題的網頁集合，是網頁的有機結合體，存在于特定計算機地址中，供瀏覽者通過地址訪問網頁網頁是HTML編寫的文本文件，包含文字、表格、圖像等元素，是磁盤上的文件，常以.htm、.html等擴展名存在主頁主頁是網站的起始頁，展示主要信息并提供網站內部鏈接CSSCSS是用于控制網頁元素樣式和布局的語言，讓內容呈現(xiàn)更加美觀和個性化HTMLHTML是超文本標記語言，用于創(chuàng)建和設計網頁，通過標記符指導瀏覽器展示內容網頁制作基本概念

常用術語網頁編輯器01網頁編輯器分類分為文本編輯器和所見即所得編輯器，前者需熟練HTML，后者通過鼠標操作，自動生成代碼，如Dreamweaver02文本編輯器特點直接輸入HTML標記，使用如記事本的文字處理軟件，要求制作者熟練掌握HTML語言03所見即所得編輯器優(yōu)勢降低網頁制作門檻，提高效率，用戶通過鼠標操作，實時預覽結果，自動生成HTML代碼網站建設的流程確定主題規(guī)劃網站收集素材制作網頁預覽和測試網站申請域名和服務器上傳和部署網站維護和更新網站宣傳與推廣網站圖像圖像在網頁設計中扮演重要角色，常用于標題、Logo、背景等，JPEG和GIF是最常用的格式表格網頁中的表格可用于網頁頁面布局，從而使網頁中的文字、圖像等信息在指定的位置進行展示。文本網頁的主體以文本為主。在制作網頁時，可以根據需要設置文本的字體、字號、顏色以及所需要的其他格式。超鏈接超鏈接是網頁中指向其他網頁的地址，可指向本地或外部網站表單表單用于收集信息，主要功能是接收瀏覽器端輸入，發(fā)送到服務器處理網頁的基本元素多媒體對象網頁可包含動畫、聲音、視頻等多媒體元素，以及懸停按鈕、Java控制、ActiveX控件等，從而使網頁具有更豐富的信息傳遞信息。網站愿景該網站愿景是：“中華傳統(tǒng)文化”社團宣傳網站的建設，將是社團傳承與弘揚中華優(yōu)秀傳統(tǒng)文化的重要舉措。我們相信，通過全體社員的共同努力，這個網站將成為連接過去與未來的橋梁，讓更多人感受到傳統(tǒng)文化的魅力與力量，共同書寫中華傳統(tǒng)文化的新篇章！網頁規(guī)劃利用AI技術幫忙生成一個網站規(guī)劃，以百度“文心一言”為例（文心大模型3.5），我們可以提問“作為高校學生社團“中華傳統(tǒng)文化”社的一員，擬為社團建立一個宣傳網站，應該如何規(guī)劃該網站？”，百度將給出一份詳細的規(guī)劃方案?！痉独?-3-1】規(guī)劃“中華傳統(tǒng)文化”學生社團網站2ONEHTML語言HTML（HypertextMarkupLanguage）是超文本標記語言，HTML是最基本的Web網頁開發(fā)語言，可以使用于各種操作平臺。HTML網頁使用HTML語言編寫，該語言不區(qū)分大小寫，不需要編譯，由瀏覽器解釋執(zhí)行。HTML文件是一個純文本文件，由標記語言編寫，通常，標記用一對尖括號“<>”括起來，書寫格式為：<標記>顯示內容</標記>。HTML語言HTML網頁的基本結構HTML文件由<html>開始，</html>結束，包含HEAD和BODY兩部分HTML文件結構概述創(chuàng)建"網頁.html"，輸入代碼設置標題為"學生社團網頁"，內容為"中華傳統(tǒng)文化"，保存后用瀏覽器打開查看效果創(chuàng)建HTML網頁示例<head>包含網頁序言信息，不直接顯示在瀏覽器中。<title>是網頁標題，顯示在瀏覽器標題欄，用于概括網頁內容文件頭（HEAD）解析<body>標簽定義網頁主體內容，用于編輯網頁顯示，其屬性如bgcolor可設置背景色，text可設置文本顏色文件體（BODY）解析步驟步驟如下：新建一個記事本文件，命名為“網頁.html”。在該文件中輸入代碼。保存并關閉該文件，使用瀏覽器打開該文件。網頁創(chuàng)建新建一個HTML網頁，命名為“網頁.html”，要求在網頁的標題為“學生社團網頁”，網頁的內容為“中華傳統(tǒng)文化”文本?！痉独?-3-2】在網頁中顯示“中華傳統(tǒng)文化”文本文件體顯示一行文字網頁結束文件頭網頁標題網頁開始3ONE網站的建立與管理規(guī)劃網站文件結構按文件類型規(guī)劃，如文本、圖片、媒體各占一文件夾，或按主題如“新聞”、“體育”等欄目創(chuàng)建文件夾，便于管理和查找站點根文件夾設立站點根文件夾相當于大文件夾，存放所有網站相關文件，通過規(guī)劃的文件結構來組織內容文件管理方式方法一：按文件類型，如TXT、images、media等分設文件夾方法二：按網頁主題，如“新聞”、“體育”等建立欄目文件夾，便于對應欄目內容的管理與更新Dreamweaver是Adobe公司開發(fā)的網頁設計軟件，該軟件提供了可視化的網頁開發(fā)環(huán)境，具有“所見即所得”的功能，是網頁設計領域中使用用戶較多，應用較廣，功能較強的一款應用軟件?！咀ⅰ勘窘滩暮罄m(xù)介紹均使用DreamweaverCC2018版本。Dreamweaver的工作窗口主要由菜單欄、文檔工具欄、文檔窗口、浮動面板等組成，如圖5-3-5所示，整體布局顯得緊湊、合理、高效，這為設計和制作網頁提供了很大便利。Dreamweaver簡介界面介紹菜單欄文檔工具欄浮動面板通用工具欄

文檔窗口狀態(tài)欄

屬性面板

標簽選擇器網站的建立與管理創(chuàng)建“學生社團網站”站點，設置站點參數(shù)，構建“images”和“TXT”文件夾，新建“index.html”網頁文件站點建立在Dreamweaver中執(zhí)行“站點”|“新建站點”，管理站點文件和文件夾，維護站點結構和內容更新站點管理根據“中華傳統(tǒng)文化”學生社團網站的規(guī)劃，利用Dreamweaver創(chuàng)建網站站點，要求站點中包含“images”和“TXT”兩個文件夾以及“index.html”網頁文件。步驟如下：（1）在C盤上新建一個文件夾，命名為“學生社團網站”。（2）在Dreamweaver中，執(zhí)行“站點”︱“新建站點”菜單命令。在彈出的“站點設置對象”窗口中設置參數(shù)（3）在Dreamweaver的“文件”面板中，選擇新建的站點，在該站點中新建兩個文件夾，分別命名為“images”和“TXT”。（4）在Dreamweaver的“文件”面板中，選擇新建的站點，在該站點中新建一個網頁文件，命名為“index.html”。（5）最終網站的站點結構如圖5-3-7所示，電腦硬盤中也會建立相應的文件夾和文件。【范例5-3-3】創(chuàng)建學生社團網站站點4ONE網頁制作在Dreamweaver中，創(chuàng)建網頁文件的方法有以下兩種：在網站站點中新建擴展名為html的文件，即創(chuàng)建了一個網頁文件。執(zhí)行“文件”|“新建”菜單命令，在彈出的“新建文檔”對話框中選擇新建文檔類型為“HTML”，點擊“創(chuàng)建”按鈕，即可完成網頁的創(chuàng)建。如當前網頁有內容被編輯但未被保存，其文件名的右上角會出現(xiàn)“*”標記，網頁保存后，該標記會消失。保存網頁文件的方法有以下兩種：執(zhí)行“文件”|“保存”菜單命令，如該文件是第一次保存，會彈出“另存為”對話框，設置路徑、文件名和保存類型等，點擊“保存”按鈕，即可完成網頁的保存。一般默認的保存路徑是當前站點所指向的文件夾，即站點文件夾，默認的擴展名為“.html”。如該文件非第一次保存，執(zhí)行“文件”|“保存”菜單命令后，會直接保存網頁內容，不再彈出對話框。使用快捷鍵<Ctrl>+<S>。網頁的創(chuàng)建和保存網頁的預覽設計者可通過瀏覽器預覽網頁，按<F12>鍵或使用"文件"→"實時預覽"→"InternetExplorer"菜單命令。所見即所得，瀏覽器中顯示的與文檔窗口中基本相同網頁屬性的設置設置網頁屬性可調整默認字體、大小、背景顏色等，實現(xiàn)頁面一致性。通過“文件”|“頁面屬性”命令打開對話框進行設置網頁制作：超鏈接的使用文本的編輯在Dreamweaver中，文本的編輯和其他字處理系統(tǒng)（例如：Word、WPS等）較為相似，同時，還可以通過屬性面板來設置文本的字體、字號、顏色等屬性。在屬性面板中有兩個選項卡，“HTML”選項卡和“CSS”選項卡。在“HTML”選項卡中可設置文本的一些基本屬性，例如，加粗、傾斜、超鏈接等。如需要進一步設置當前對象的屬性，例如，字體、大小等，則需要在“CSS”選項卡中進行設置。在“CSS”選項卡中可設置文本的屬性，需要新建CSS樣式才能進行屬性設置，故在設置時需在“目標規(guī)則”中選擇“新內聯(lián)樣式”。超鏈接的創(chuàng)建方式在Dreamweaver中創(chuàng)建，鼠標懸停變手形，點擊跳轉至指定網頁，文本樣式變化提示鏈接存在文本超鏈接允許一幅圖像含多個鏈接，特定區(qū)域點擊跳轉，Dreamweaver功能支持復雜交互圖像熱點超鏈接網頁內置，點擊自動啟動默認郵件程序，簡化用戶發(fā)送郵件流程電子郵件超鏈接超鏈接的使用超鏈接是網頁中最常見的對象，能夠實現(xiàn)頁面與頁面之間的跳轉，有機地將網站中的各個頁面聯(lián)系起來。超鏈接有兩部分組成，即源和目標。超鏈接中有超鏈接的一端稱為超鏈接源（響應鼠標單擊操作的圖像或文本等），跳轉到的網頁或文件等稱為超鏈接目標。網頁中的超鏈接按照鏈接路徑的不同，可以分為絕對路徑和相對路徑兩種。水平線水平線用于分割網頁內容，劃分不同區(qū)域，使信息分類更清晰。通過插入菜單或設置屬性面板可調整其樣式和屬性日期Dreamweaver允許用戶插入可自動更新的日期對象，以便在文檔保存時保持日期的最新狀態(tài)不換行空格在Dreamweaver中插入不換行空格，可使用“插入”|“HTML”|“不換行空格”命令，快捷鍵是【Ctrl】+【Shift】+【Space】換行符在Dreamweaver中按Enter產生新段落，若需換行不換段，可使用“插入”|“HTML”|“字符”|“換行符”或按<Shift+Enter>其他網頁對象的使用特殊符號除了一般文本以外，有時還需要在網頁中插入特殊符號，例如，注冊商標符號?、版權符號?、英鎊符號￡等。【范例5-3-4】創(chuàng)建“聯(lián)系我們”網頁按下列要求操作創(chuàng)建網頁。步驟如下：（1）在“中華傳統(tǒng)文化”學生社團網站的站點中新建一個網頁文件，命名為“聯(lián)系我們.html”。（2）打開該網頁，設置網頁的標題為“聯(lián)系信息”。（3）在“頁面屬性”中設置網頁的文本顏色為“#0099CC”（藍色），鏈接顏色為“#998877”（褐色），已訪問鏈接顏色為“#993366”（紫色）。（4）將素材“文字素材.txt”復制到網站站點下的“TXT”文件夾中，并將其中的文字粘貼到網頁中。（5）選中文字“聯(lián)系我們”，在“屬性”面板中，將其格式設置為“標題1”，粗體、宋體，顏色為“#D97D97”（粉色），居中對齊?！痉独?-3-4】創(chuàng)建“聯(lián)系我們”網頁按下列要求操作，創(chuàng)建網頁。步驟如下：（6）在第一行下方插入水平線，顏色為“#D97D97”（粉色），寬度為800像素，高度為3像素。操作方法為：選擇水平線，單擊“屬性”面板最右側的“快速標簽編輯器”圖標按鈕，在彈出的“編輯標簽”對話框中輸入設置顏色的代碼。默認情況下，會出現(xiàn)代碼“<hr>”，將鼠標光標定位在字母“r”的后面，輸入空格和字母“c”，軟件會出現(xiàn)代碼列表供用戶選擇，如圖5-3-14所示。在代碼列表中選擇“color”，“編輯標簽”文本框中會出現(xiàn)“<hrcolor="">”代碼，在雙引號中間輸入顏色代碼即可?！咀ⅰ緿reamweaver文檔窗口不會顯示水平線的顏色設置效果，用戶需要保存文檔后在瀏覽器中才能看到設置的彩色水平線；或者切換到Dreamweaver的“實時視圖”，查看所設置的顏色效果?！痉独?-3-4】創(chuàng)建“聯(lián)系我們”網頁按下列要求操作，創(chuàng)建網頁。步驟如下：（7） 將網頁正文的文本均設置為居中對齊。（8） 設置文本“abc@”為郵件鏈接，鏈接郵箱為abc@。在“屬性”面板中，打開“頁面屬性/鏈接（CSS）”對話框，將鏈接顏色設置為“#998877”（褐色），已訪問鏈接顏色設置為“#993366”（紫色）。（9） 在最后一行的文本“版權所有”后插入一個版權符號，并將顏色設置為“#CC0000”（紅色）。（10） 在最后一行文本的最后插入8個不換行空格，然后再插入日期，要求星期格式為“星期*”，“日期格式”為“****年*月*日”，“時間格式”為“**:**”，儲存時自動更新。5ONE表格表格是常用的網頁布局工具，表格在網頁中不僅僅可以用來排列數(shù)據，還可以對網頁中的圖像、文本等對象進行定位，使得網頁條理清晰，整齊有序表格是行和列的組合，單元格可包含各種對象，如文本、數(shù)字或圖像。邊框、邊距、間距是表格的樣式元素表格簡介通過"插入"菜單選擇"Table"，設置好表格屬性后點擊"確定"，即可在網頁中創(chuàng)建表格表格的創(chuàng)建在“屬性”面板中，可編輯表格的行、列數(shù)、寬度、邊框，以及單元格的寬度、高度、對齊方式和顏色等屬性表格的編輯按住鼠標左鍵拖拽表格邊線，可調整表格或單元格大小，表格內單元格大小會相應改變調整表格與單元格大小選中單元格區(qū)域，使用菜單或屬性面板合并單元格圖標，合并為單個單元格表格合并表格的結構調整要插入或刪除行/列，選中目標行/列，然后通過“編輯”|“表格”菜單選擇“插入行”/“刪除行”或“插入列”/“刪除列”命令插入與刪除行或列停留在目標單元格，使用菜單或屬性面板拆分單元格圖標，設置參數(shù)后拆分單元格表格拆分【范例5-3-5】創(chuàng)建學生社團主頁按下列要求操作創(chuàng)建網頁。步驟如下：（1）打開“中華傳統(tǒng)文化”學生社團網站的站點中的“index.html”網頁文件。（2）插入一個4行3列的表格，表格寬度為800像素，邊框、間距和邊距均為0像素，表格居中對齊。（3）合并第一行所有單元格。將第二行的每個單元格均拆分成兩列。6ONE多媒體對象多媒體對象范圍比較廣，包括圖像、動畫、音頻、視頻等，在網頁中使用這些對象會使網頁增色不少將鼠標光標停留在需要插入視頻的位置，執(zhí)行“插入”︱“HTML”︱“HTML5Video”菜單命令，網頁中會出現(xiàn)一個視頻的占位符，選中該占位符，可在“屬性”面板中設置其屬性。將鼠標光標停留在需要插入該圖像的位置，執(zhí)行“插入”︱“HTML”︱“鼠標經過圖像”菜單命令，彈出對話框，通過該對話框設置相應屬性后點擊“確定”按鈕，即可插入一個鼠標經過圖像。將鼠標光標停留在需插入圖像的位置，執(zhí)行“插入”︱“Image”菜單命令，彈出“選擇圖像源文件”對話框，通過該對話框選擇相應的圖像，點擊“確定”按鈕即可完成圖像的插入。圖像鼠標經過圖像

視頻【范例5-3-6】編輯學生社團主頁按下列要求操作創(chuàng)建網頁。步驟如下：（1）打開“中華傳統(tǒng)文化”學生社團網站的站點中的“index.html”網頁文件，設置網頁標題為““中華傳統(tǒng)文化”學生社團主頁”。（2）將素材“建筑1.png”、“建筑2.png”、“社名.jpg”和“學生社團介紹.mp4”復制到網站站點下的“images”文件夾中。（3）在第一行中插入“社名.jpg”圖像文件，設置圖像寬度為800像素。（4）在第二行的單元格中分別輸入文本“社團信息”、“傳統(tǒng)文化展示”、“學習資源”、“信息服務”、“社交交流”和“聯(lián)系我們”，文字居中對齊，行高50像素，背景顏色為灰色（#E9E9E9），設置文本“聯(lián)系我們”的超鏈接為“聯(lián)系我們.html”網頁文件?！痉独?-3-6】編輯學生社團主頁按下列要求操作創(chuàng)建網頁。步驟如下：（5）在第三行第一列的單元格中插入鼠標經過圖像，原始圖像為“建筑1.png”，鼠標經過圖像為“建筑2.png”，設置圖像寬度為200像素。（6）在第三行第三列的單元格中插入“學生社團介紹.mp4”視頻文件，設置視頻寬度為200像素，單元格對齊方式為水平右對齊。7ONE表單表單簡介Dreamweaver可以創(chuàng)建帶有文本框、密碼框、隱藏域、文本區(qū)域、復選框、單選按鈕以及其它對象的表單。在實現(xiàn)與用戶交互中，表單是必不可少的，例如，用戶注冊、在線申請、調查問卷等。通過表單，用戶可以把信息從客戶端遞交到服務器端，再由服務器端的腳本或者應用程序來進行相應的處理，從而實現(xiàn)站點的交互功能。在Dreamweaver中創(chuàng)建表單，將鼠標光標停留在需要插入表單的位置，然后，執(zhí)行“插入”|“表單”|“表單”菜單命令，即可生成一個表單區(qū)域，即紅色虛線框區(qū)域，之后創(chuàng)建的所有表單對象都必須放置在該紅色虛線框內。01接受文本類型的信息，默認情況下，文本是單行形式，文本區(qū)域是多行形式。02可為用戶提供選擇的按鈕，每個按鈕都有自己的名稱，Dreamweaver按照名稱分組，當名稱相同時即為同一組。單選按鈕組內只能選一個，復選框可多選，互不影響03為用戶提供選擇的下拉列表，用戶可在列表內選擇所需要的選項。04為用戶提供上傳文件的功能，它包括一個文本域和一個“瀏覽”按鈕，用戶可以在文本域輸入所要上傳的文件的路徑和文件名，也可以通過“瀏覽”按鈕定位和選擇所需的文件。05可將表單信息提交到服務器端，或者重置該表單。常用的表單按鈕有“提交”按鈕和“重置”按鈕?！疤峤弧卑粹o可將表單內的信息遞交到服務器端，“重置”按鈕可將表單內的已填寫的信息恢復至默認設置。文本/文本區(qū)域單選與復選按鈕選擇文件按鈕表單對象與屬性【范例5-3-7】創(chuàng)建“調查問卷”表單按下列要求操作創(chuàng)建表單。步驟如下：（1）打開“中華傳統(tǒng)文化”學生社團網站的站點中的“index.html”網頁文件。（2）設置第三行第二列單元格的對齊方式為水平居中對齊，并在其中插入一個表

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論