第一單元

用網(wǎng)頁展示美食第三節(jié)

分享我的美食1項(xiàng)目主題美食之旅項(xiàng)目背景能對(duì)信息進(jìn)行編輯、整理、發(fā)布、評(píng)價(jià)，是信息社會(huì)公民的基本素質(zhì)。本項(xiàng)目以“美食介紹”為例，讓同學(xué)們學(xué)會(huì)簡(jiǎn)單的網(wǎng)頁編輯、發(fā)布技能，提升信息評(píng)價(jià)能力，并在此過程中感受我國(guó)傳統(tǒng)美食文化的博大精深。項(xiàng)目目標(biāo)以“美食介紹”為項(xiàng)目載體，掌握簡(jiǎn)單的Markdown標(biāo)記語言，能使用Markdown撰寫“美食介紹”文檔，并能使用靜態(tài)網(wǎng)頁生成工具M(jìn)kdocs，將撰寫的文檔發(fā)布為網(wǎng)頁。通過完成本項(xiàng)目提升信息編輯、發(fā)布、評(píng)價(jià)等方面的信息素養(yǎng)。學(xué)習(xí)過程·確定要展示的主題·利用智能搜索引擎，圍繞主題收集、整理素材確定主題·了解HTML和Markdown各自的優(yōu)缺點(diǎn)·選定編輯工具·掌握常用Markdown標(biāo)記，并使用標(biāo)記編寫頁面編輯頁面·用Mkdocs將編寫完畢的頁面發(fā)布為網(wǎng)頁·同學(xué)間交流、互評(píng)，根據(jù)互評(píng)優(yōu)化頁面交流發(fā)布教學(xué)目標(biāo)：1、掌握Markdown文件的導(dǎo)出方法。2、掌握將Markdown文件導(dǎo)出為HTML網(wǎng)頁文件。3、能使用Mkdocs發(fā)布Markdown文件為網(wǎng)頁。4、能通過分享交流，正確評(píng)價(jià)并優(yōu)化作品。一、發(fā)布作品Markdown文件可導(dǎo)出為文檔、圖片、網(wǎng)頁、PDF、演示文稿等格式。導(dǎo)出為哪種格式，取決于發(fā)布信息的需要。高效點(diǎn)撥11、導(dǎo)出為HTML網(wǎng)頁文件使用Markdown編輯器能夠?qū)С鲋T多格式的文件，例如導(dǎo)出HTML文件，再用瀏覽器打開查看導(dǎo)出的文件。（1）打開Markdown編輯器。（2）選擇“文件”→“導(dǎo)出”→“HTML”。（3）保存HTML文件到指定位置。實(shí)踐活動(dòng)：打開導(dǎo)出的HTML網(wǎng)頁文件，看顯示是否正常；如果不正?？赡苁鞘裁丛?，如何解決？圖片路徑問題、代碼格式問題、瀏覽器兼容性問題、導(dǎo)出設(shè)置問題。2、將文件發(fā)布為網(wǎng)頁發(fā)布Markdown文件為網(wǎng)頁，有多種工具可用。此處選擇使用Mkdocs。（1）什么是MKdocs：Mkdocs是一個(gè)快速，簡(jiǎn)單的基于python的markdown的靜態(tài)網(wǎng)頁生成工具，可以將Markdown文件生成網(wǎng)頁并發(fā)布。（/）MkDocs可以同時(shí)編譯多個(gè)markdown文件，形成書籍一樣的文件，文檔源碼在Markdown編寫，使用單個(gè)的YAML文件作為配置文檔。3、對(duì)比網(wǎng)頁的源代碼和編輯器的源代碼，討論HTML和Markdown的關(guān)系。HTML與Markdown的聯(lián)系與區(qū)別語法復(fù)雜程度：HTML源代碼包含大量的標(biāo)簽對(duì)，如<div>、<a>、<h2>等，結(jié)構(gòu)較為復(fù)雜。比如圖中通過<div>標(biāo)簽的各種class屬性來定義不同的模塊，通過<a>標(biāo)簽來設(shè)置鏈接。而Markdown語法相對(duì)簡(jiǎn)潔直觀，用#表示標(biāo)題，##表示二級(jí)標(biāo)題，通過簡(jiǎn)單的符號(hào)來標(biāo)識(shí)文本格式，不需要閉合標(biāo)簽等復(fù)雜結(jié)構(gòu)。用途側(cè)重：HTML是網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言，不僅能定義文本格式，還用于構(gòu)建網(wǎng)頁的整體結(jié)構(gòu)，嵌入圖片、鏈接、多媒體等元素，控制網(wǎng)頁布局。Markdown主要用于快速排版文本內(nèi)容，更適合創(chuàng)作者專注于內(nèi)容創(chuàng)作，比如寫博客、筆記等，方便在不同平臺(tái)間轉(zhuǎn)換。HTML（超文本標(biāo)記語言）和Markdown都是用于網(wǎng)頁和文本內(nèi)容格式化的語言。功能相似：兩者都能對(duì)文本進(jìn)行格式化，如設(shè)置標(biāo)題、段落、列表、鏈接等。轉(zhuǎn)換關(guān)系：Markdown格式的文本可以通過工具轉(zhuǎn)換為HTML代碼。因?yàn)镠TML是網(wǎng)頁顯示的基礎(chǔ)，將Markdown轉(zhuǎn)換為HTML后，就能在網(wǎng)頁上正確顯示，這也使得Markdown的內(nèi)容可以很方便地融入到網(wǎng)頁開發(fā)流程中。區(qū)別聯(lián)系4、填寫下表，對(duì)比導(dǎo)出HTML網(wǎng)頁與用Mkdocs發(fā)布網(wǎng)頁的區(qū)別HTMLMKdocs更改后需要重新導(dǎo)出即時(shí)預(yù)覽，不用重新導(dǎo)出…………HTMLMKdocs更改后需要重新導(dǎo)出即時(shí)預(yù)覽，不用重新導(dǎo)出語法復(fù)雜，需掌握眾多標(biāo)簽和屬性來構(gòu)建頁面結(jié)構(gòu)與樣式基于Markdown語法，簡(jiǎn)潔易上手，專注內(nèi)容創(chuàng)作手動(dòng)編寫頁面布局和樣式，調(diào)整繁瑣可使用主題，輕松統(tǒng)一網(wǎng)站風(fēng)格，樣式調(diào)整相對(duì)方便一般需借助單獨(dú)的工具進(jìn)行測(cè)試和調(diào)試自帶本地服務(wù)器，方便實(shí)時(shí)預(yù)覽和調(diào)試內(nèi)容更新后需手動(dòng)更新整個(gè)網(wǎng)頁文件內(nèi)容更新后，自動(dòng)重新生成相關(guān)頁面大型項(xiàng)目中，文件管理和維護(hù)難度較大適合文檔類網(wǎng)站，目錄結(jié)構(gòu)清晰，便于管理適用于復(fù)雜交互網(wǎng)頁、定制化設(shè)計(jì)適用于文檔類網(wǎng)站、個(gè)人博客二、分享我的美食高效點(diǎn)撥2（1）準(zhǔn)確（信息正確）（2）正面（信息具有積極意義）（3）高效（信息表達(dá)形式簡(jiǎn)潔直觀，計(jì)信息獲取更方便、更快速）任務(wù)：分享自己的作品，并以上述三個(gè)要點(diǎn)為評(píng)價(jià)指標(biāo)在同學(xué)間進(jìn)行互評(píng)。整理同學(xué)提出的建議，思考如何優(yōu)化自己的作品，填寫下表。評(píng)價(jià)指標(biāo)同學(xué)評(píng)價(jià)我的優(yōu)化方案準(zhǔn)確正面高效信息發(fā)布應(yīng)注意的三個(gè)要點(diǎn)1、信息發(fā)布應(yīng)注意的要點(diǎn)2、網(wǎng)頁評(píng)價(jià)標(biāo)準(zhǔn)（1）內(nèi)容是否完整、清晰。（2）網(wǎng)頁格式是否美觀。（3）是否符合網(wǎng)絡(luò)發(fā)布規(guī)范。