模塊1Web基礎知識“尋找家鄉(xiāng)記憶”網站制作準備任務1.1任務描述家鄉(xiāng)是夢想出發(fā)的地方，情系家鄉(xiāng)沉淀依戀，是當代學子寄托鄉(xiāng)愁、找尋鼓舞力量的地方。家鄉(xiāng)的一聲鄉(xiāng)音、一彎明月、美景、名人古跡等無不承載著在外學子的鄉(xiāng)源情懷。通過整理素材，了解家鄉(xiāng)的文化歷史，厚植鄉(xiāng)源情懷；通過制作網頁，將家鄉(xiāng)厚重歷史挖掘和宣傳相結合，以專業(yè)系家鄉(xiāng)情源。任務分析在創(chuàng)建“尋找家鄉(xiāng)記憶”網站之前，首先要對網頁、網站及網頁的基本構成元素有所了解，然后選擇并安裝一款適合的網頁開發(fā)工具、掌握網站的建設流程，最后建立站點并根據需要創(chuàng)建目錄、整理素材。相關知識網頁和網站是兩個相關但不同的概念，網站就是網頁的集合。也就是說，網站的設計者先把整個網站的結構規(guī)劃好，再依據結構制作出不同的網頁，并讓網頁間彼此相連，這種完整的結構就稱為“網站”。1.1.1認識網頁網頁基礎概念01網頁定義網頁是互聯網上由HTML等語言編寫的頁面，經瀏覽器編譯展示信息，含文字、圖像、動畫等元素02首頁功能首頁是網站的門面，負責導航和展示最新消息，引導瀏覽者快速找到感興趣的主題并跳轉至詳細內容1.1.2網頁與網站靜態(tài)網頁與動態(tài)網頁內容固定，需手動更新HTML，維護困難，信息更新慢靜態(tài)網頁內容視覺動態(tài)如.GIF動畫，無交互，功能限制大，搜索引擎友好靜態(tài)網頁動態(tài)效果無數據庫支持，信息量大時維護困難，交互性差靜態(tài)網頁維護動態(tài)網頁的特點01動態(tài)網頁定義服務器根據用戶請求生成內容，與數據庫交互，使用ASP、JSP、PHP等技術02動態(tài)網頁特點基于數據庫，減少維護，實現用戶注冊、登錄等功能，按需生成頁面網頁是網站的組成部分，網站由多個網頁集合而成，如新浪網含新聞、財經等多板塊，每個板塊有多網頁網頁是單一頁面，網站是多個網頁的集合，網站有整體結構和導航，網頁則側重內容展示，二者在規(guī)模和功能上存在差異網頁是展示網站內容和功能的頁面，由HTML、CSS、JavaScript等語言編寫，可包含文章、圖片、音頻或視頻等元素網頁展示信息、播放多媒體，還提供交互功能如在線購物、用戶認證。網站是這些網頁的集合，包含豐富媒體資源和后臺技術，構成互聯網應用生態(tài)系統網頁與網站基礎網頁與網站區(qū)別內容功能網頁是獨立的HTML文件或網址部分，網站是多個相關聯網頁的整體，彼此可相互鏈接獨立性1.1.3網頁的基本構成元素網頁包含了許多元素，內容豐富，引人入勝，其基本構成元素包括文本、圖像、多媒體、超鏈接等1.文本網頁主要通過文字傳達信息，可設置字體、字號、顏色等屬性改變文本視覺效果2.圖像圖像可以用來豐富網頁的內容，提高用戶體驗。通過插入圖片，可以讓網頁更加生動、直觀，讓用戶更容易理解網頁的內容。同時，圖片也可以用來美化網頁，讓網頁看起來更加吸引人。在網頁中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的圖像文件。多媒體是計算機結合聲音、圖像、視頻等信息載體的交互技術，網頁中的多媒體常指音頻和視頻功能3.多媒體超鏈接是網頁中指向其他網頁或位置的鏈接關系，按路徑可分為內部、錨點和外部鏈接4.超鏈接1.1.4網站建設流程在建設網站之前應該有一個整體的規(guī)劃和目標。在規(guī)劃好網頁的大概結構后，就可以著手設計頁面了。因此，前期策劃對網站的運作至關重要。在規(guī)劃一個網站時，可以使用網站制作流程圖，先把每個頁面的內容大致列出來1.分析客戶需求明確網站目標，與客戶溝通網站主題，是制作網站前的關鍵步驟2.規(guī)劃站點01網站規(guī)劃結構采用樹形目錄結構，如家鄉(xiāng)記憶網站，規(guī)劃家鄉(xiāng)簡介、美食、風景、人物等一級目錄，每個最低級模塊對應一個網頁，包含文字、圖片、動畫等元素02文件存放方式每個一級模塊對應一個文件夾，下設圖片、動畫等子文件夾，共用部分單獨存放，便于管理和使用3.搜集素材搜集素材是創(chuàng)建網站的關鍵步驟，包括圖片、文字、音頻、視頻和動畫，它們能豐富網站內容，吸引瀏覽者4.頁面設計根據客戶需求和品牌形象創(chuàng)建頁面布局，考慮顏色方案、圖像元素和交互元素，確保設計符合網站受眾喜好常見網頁布局形式包括“廠”字型、清晰主次，適合企業(yè)二級頁面；“口”字型，布局緊湊信息豐富；“同”字型，適用于大型網站首頁；“海報”型，吸引人但下載慢；“三”字型，視覺沖擊強；“框架”型，結構清晰一目了然前端頁面開發(fā)完成后，程序員進行后臺程序開發(fā)，依據設計師和前端工程師的成果編寫代碼5.程序開發(fā)網站發(fā)布后需持續(xù)維護和更新，以確保運行順暢和內容的新鮮度，吸引并保持用戶訪問7.后期維護及更新完成網頁設計后，需進行功能性測試、完整性測試和安全性測試，以確保所有鏈接正常工作，并兼容各種設備和瀏覽器6.測試網站1.1.5網頁的設計基礎1.網頁設計的基本原則網站內容應合理分類，便于訪問者快速定位，提升用戶體驗分類合理網站設計需圍繞明確主題，所有頁面緊扣目的，確保內容聚焦主題明確首頁設計至關重要，直接影響第一印象，需精心布局吸引訪問者首頁設計互動性良好及時更新和維護避免濫用技術圖像應用技巧良好互動性增強用戶參與感，設計應響應用戶操作，提升網站吸引力恰當使用圖像可美化網頁，注意圖像大小與格式，優(yōu)化加載速度技術應服務于內容，避免過度使用導致用戶反感，保持頁面簡潔定期更新網站內容，保持信息新鮮，吸引并留住訪問者2.網頁設計的色彩搭配01色彩原理顏色源于光的折射，網頁色彩以RGB為主，非彩色為黑、白、灰，色彩變化產生數百萬種色相02網頁色彩搭配技巧統一色彩調整透明度或飽和度，使用對比色豐富頁面，選用一個色系或黑色搭配彩色，避免色彩過多，確保對比度3.網頁設計要點整體布局干凈整潔，條理清晰，避免過多色彩與動畫，確保瀏覽舒適信息價值提供有價值內容，如資訊、娛樂或聯系方式，吸引并留住瀏覽者下載速度主頁打開速度關鍵，控制圖像大小，確?？焖偌虞d，提升用戶體驗文字可讀性使用通用字體，如宋體、微軟雅黑，確保正文易讀，特殊字體限標題導航清晰采用超文本或圖片鏈接，放置左側，底部設簡單導航，便于瀏覽操作1.HTML5概述HTML是互聯網上編寫網頁的主要語言，它是純文本類型的，允許通過文本編輯器查看和編輯源代碼HTML簡介01網頁瀏覽器主要負責解釋HTML代碼，將文字轉化為豐富多彩的頁面。精簡高效的HTML源代碼對網頁顯示速度至關重要瀏覽器與HTML02HTML是通過簡潔的語法創(chuàng)建超文本鏈接和多媒體信息的解釋型語言，瀏覽器在打開網頁時動態(tài)生成效果HTML的工作原理03任務規(guī)劃HTML（HypertextMarkupLanguage，超文本標記語言）是Internet上用于編寫網頁的主要語言。HTML是純文本類型的語言，使用HTML編寫的網頁文件也是標準的純文本文件?？梢杂萌魏挝谋揪庉嬈鳎ㄈ鏦indows系統中的“記事本”程序）打開，查看其中的HTML源代碼。查看網頁內容必須使用網頁瀏覽器，瀏覽器的主要作用就是解釋超文本文件中的代碼，將單調乏味的代碼顯示為豐富多彩的內容。HTML的語法非常簡單，它采用簡潔明了的語法命令，通過對各種標記、元素、屬性、對象等進行設置，建立圖形、音頻、視頻等多媒體信息及其他超文本的鏈接。1.HTML5概述2.常用開發(fā)工具及安裝VSCode是一款由微軟公司開發(fā)的免費、開源的跨平臺代碼編輯器。它在軟件開發(fā)和編程任務中廣受歡迎，提供了豐富的功能和靈活的擴展性。VisualStudioCode01WebStorm是一款由JetBrains公司開發(fā)的集成開發(fā)環(huán)境（IDE），主要用于前端開發(fā)。WebStorm02HBuilderX是一款基于Eclipse的HTML5開發(fā)工具，它支持多種前端框架和語言，如Vue.js、React、TypeScript等。HBuilder03SublimeText是輕量級代碼編輯器，支持多平臺，具備友好界面和豐富插件，可自定義設置，提高編碼效率SublimeText04VSCode下載從VSCode官網上下載VSCode安裝包HBuliderX安裝右擊該安裝包，在彈出的快捷菜單中選擇“以管理員身份運行”命令，打開“安裝-MicrosoftVisualStudioCode”窗口，開始安裝。任務實施1.站點的創(chuàng)建和素材的整理可以通過站點對網站的相關頁面及各類素材進行統一管理，還可以借助站點管理實現將文件上傳到網頁服務器中。2.網頁文檔的創(chuàng)建與保存網頁文檔的創(chuàng)建網頁文檔的保存單擊主菜單內的“文件”菜單中的“保存”命令，或者按Ctrl+S組合鍵，即可保存網頁文檔。在通常情況下，第一次保存文件時，VSCode會自動將文件保存在與當前工作區(qū)相關的文件夾中。3.網站的運行LiveServer是一個具有實時加載功能的小型服務器，可以實現自動刷新，也就是文件重新編輯、保存后可以即時看到最