任務3美化簡單學院網站_第1頁
任務3美化簡單學院網站_第2頁
任務3美化簡單學院網站_第3頁
任務3美化簡單學院網站_第4頁
任務3美化簡單學院網站_第5頁
已閱讀5頁，還剩10頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

教案名稱任務3美化簡單學院網站計劃學時4學時知識目標掌握CSS樣式表的概念掌握樣式表的創建及使用方法掌握CSS選擇器：標記選擇器、類選擇器、ID選擇器掌握交集選擇器、并集擇器、后代選擇器、通配符選擇器掌握CSS常用文本屬性及使用方法理解CSS的層疊性、繼承性和優先級能力目標掌握使用CSS對網頁進行美化的方法素質目標引導學生做好職業規劃，在課程學習中樹立職業理想。激發學生愛國熱情、為科技強國而努力學習教學重點樣式表的創建及使用方法CSS選擇器：標記選擇器、類選擇器、ID選擇器交集選擇器、并集擇器、后代選擇器、通配符選擇器CSS常用文本屬性：字體、字號、粗細、傾斜、文本裝飾、顏色、對齊方式、首行縮進、行高CSS的層疊性、繼承性和優先級教學難點CSS各種樣式屬性的靈活使用教學模式教學做一體化線上+線下混合教學教學活動及主要環節思政元素切入點第1學時（引入CSS樣式）課前發布任務：觀看學習通平臺相關學習視頻。做課前測試題。=1\*ROMANI.學生討論：（5分鐘）為什么網頁結構和樣式要分離？分離的好處有哪些？網頁變得美觀的途徑有哪些？=2\*ROMANII.重難點內容講授：一、HTML中引入CSS的方法（25分鐘）（1）行內式行內式即在標記的style屬性中設定CSS樣式，這種方式本質上沒有體現出CSS的優勢，因此不推薦使用。例如：<h1style=“color:white;background-color:blue”>這是一行文本</h1>(2)嵌入式：即內部樣式表嵌入式將對頁面中各種元素的設置寫在<head></head>之間。例如： <styletype="text/css"> h1{ color:white; background-color:blue } </style>(3)鏈接式:外部樣式表最常用的方式例：<linkhref="mystyle.css"rel="stylesheet"type="text/css"/>二、練習：將任務2中創建的個人介紹頁面進行美化。（15分鐘）第2學時（CSS基本選擇器）=1\*ROMANI.學生討論：（10分鐘）CSS選擇器的作用是什么？=2\*ROMANII.重難點內容講授：（30分鐘）一、CSS基本選擇器1.標記選擇器是指用HTML標記名稱作為選擇器，為頁面中的該類標記指定統一的CSS樣式，其語法格式如下：例，使用p選擇器定義HTML頁面中所有段落的樣式。2.類選擇器類選擇器指定的樣式可以被網頁上的多個標記元素選用。類選擇器以“.”開始，其后跟類名稱。其語法格式如下.class{屬性：值;屬性：值;}class為選擇器類別的名稱（名稱不能是中文，最好是英文單詞或拼音）例如：<title>CSS類別選擇器</title><styletype="text/css">.title1{background-color:#0CF;color:#fff;}.title2{background-color:#9C0;color:#f00;}</style></head><body><pclass="title1">這是第一段的內容。</p><pclass="title2">這是第二段的內容。</p></body></html>3.ID選擇器(代表唯一)ID選擇器用于對某個元素定義單獨的樣式，ID選擇器以“#”開始，其語法格式如下:例如：<styletype="text/css">#one{background-color:#0CF;color:#fff;width:200px;height:200px;}#two{background-color:#9C0;color:#f00;width:200px;height:200px;}</style></head><body><divid="one">這是第一個塊的內容。</div><divid="two">這是第二個塊的內容。</div></body></html>注意：CSS樣式的優先規則：行內樣式>ID樣式>類別樣式>標記樣式4.交集選擇器交集選擇器由兩個選擇器構成，第一個是標記選擇器，第二個是類選擇器，表示二者各自元素范圍的交集。兩個選擇器之間不能有空格。其語法格式如下：標記名稱.類名稱{屬性：屬性值；屬性：屬性值；...}5.并集選擇器如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式，并集選擇器由各個選擇器通過逗號連接而成，任何形式的選擇器（標記選擇器、類選擇器、ID選擇器等），都可以作為并集選擇器的一部分。h1,h2,p{font-size:24px;color:blue;6.后代選擇器后代選擇器也叫包含選擇器，用于對容器對象中的子對象進行控制，使其他容器對象中的同名子對象不受影響。后代選擇器書寫時將容器對象寫在前面，子對象寫在后面，中間用空格分隔。若容器對象有多層時，則分層依次書寫。pstrong{font-size:24px;color:red;}7.通配符選擇器通配符選擇器用“*”表示，它是所有選擇器作用范圍最廣的，能匹配頁面中的所有元素。其基本語法格式如下：*{屬性：屬性值；屬性：屬性值；...}=3\*ROMANIII.課堂小結：（5分鐘）重點理解引入CSS選擇器的方式，CSS選擇器的使用。作業1：課本實訓3作業2：使用學習通平臺的教學視頻自學任務3中的CSS文本樣式第3學時（CSS文本屬性）課前發布任務：觀看學習通平臺相關學習視頻。做課前測試題。=1\*ROMANI.學生討論：（10分鐘）各種選擇器書寫方式有何區別？=2\*ROMANII.重難點內容講授：（35分鐘）一、CSS字體樣式屬性（1）font-weight:字體粗細font-weight屬性用于定義字體的粗細。例如：p{font-weight:bold;}h2{font-weight:normal;}(2)font-style:字體風格font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：normal：默認值，瀏覽器會顯示標準的字體樣式。italic：瀏覽器會顯示斜體的字體樣式。oblique：瀏覽器會顯示傾斜的字體樣式。(3)@font-face屬性@font-face是CSS3新增屬性，用于定義服務器字體。通過該屬性，開發者可以在網頁中使用任何喜歡的字體，而不管用戶計算機是否安裝這些字體。定義服務器字體的基本語法格式如下。二、CSS文本外觀屬性使用HTML可以對文本外觀進行簡單的控制，但是效果并不理想。為此CSS提供了一系列的文本外觀樣式屬性，具體如下：(1)color:文本顏色color屬性用于定義文本的顏色，其取值方式有如下3種：使用顏色的英文單詞，如red，green，blue等。十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。(2)letter-spacing:字間距letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數值，允許使用負值，默認為normal。(3)word-spacing:單詞間距word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數值，允許使用負值，默認為normal。word-spacing和letter-spacing均可對英文進行設置。不同的是letter-spacing定義的為字母之間的間距，而word-spacing定義的為英文單詞之間的間距。(4)line-height:行間距，即行高。line-height屬性用于設置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px。例如，p{line-height:25px;}(5)text-transform:文本轉換text-transform屬性用于控制英文字符的大小寫，其可用屬性值如下：none：不轉換（默認值）。capitalize：首字母大寫。uppercase：全部字符轉換為大寫。lowercase：全部字符轉換為小寫。(6)text-decoration:文本裝飾text-decoration屬性用于設置文本的下劃線，上劃線，刪除線等裝飾效果，其可用屬性值如下：none：沒有裝飾（正常文本默認值）。underline：下劃線。overline：上劃線。line-through：刪除線。例如，a{text-decoration:none;}a:hover{text-decoration:underline;}(7)text-align:水平對齊方式text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：left：左對齊（默認值）right：右對齊。center：居中對齊。例如，h1{text-align:center;}P{text-align:center;}(8)text-indent:首行縮進text-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,建議使用em作為設置單位。例如，p{text-indent:2em;}(9)white-space:空白符處理使用HTML制作網頁時，不論源代碼中有多少空格，在瀏覽器中只會顯示一個字符的空白。在CSS中，使用white-space屬性可設置空白符的處理方式，其屬性值如下：normal：常規（默認值），文本中的空格、空行無效，滿行（到達區域邊界）后自動換行。pre：預格式化，按文檔的書寫格式保留空格、空行原樣顯示。nowrap：空格空行無效，強制文本不能換行，除非遇到換行標記<br/>。內容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條。text-overflow設置元素內文本溢出時如何處理。基本語法格式如下：說明：clip：修剪元素內溢出的文本，使溢出的文本不顯示，也不顯示省略標記“…”。ellipsis：在元素文本末尾用省略標記“…”標示被修剪的文本。設置省略標記表示溢出文本的步驟如下：為包含文本的元素定義寬度。設置元素的white-space屬性值為nowrap，強制文本不能換行。設置元素的overflow屬性值為hidden，使溢出文本隱藏。設置text-overflow屬性值為ellipsis，顯示省略標記。第4學時（CSS高級特性）=1\*ROMANI.學生討論：（5分鐘）先演示案例——我很調皮，猜猜我是什么顏色？再讓學生討論為什么顯示案例中的顏色。<styletype="text/css">p{font-family:"方正隸變簡體";}.one{ color:#00F;}#two{ font-size:68px;}span{ color:#FF0;}</style><body><pclass="one"id="two">giveyousomecolorto<span>seesee</span></p></body>=2\*ROMANII.重難點內容講授：（35分鐘）CSS的高級特性是指CSS的層疊性、繼承性和優先級等。對于網頁設計師來說，應深刻理解這些特性。一、層疊性所謂層疊性是指多種CSS樣式的疊加。例如，當使用內嵌式CSS樣式定義<p>標記字號大小為12像素，外部樣式表定義<p>標記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產生了疊加。二、繼承性所謂繼承性是指書寫CSS樣式表時，子標記會繼承父標記的某些樣式，如文本顏色和字號等。例如，定義頁面主體標記body的文本顏色為黑色，那么頁面中所有的文本都將顯示為黑色，這是因為其他標記都是body標記的子標記。注意：當為body元素設置字號屬性時，標題文本不會采用這個樣式。因為標題標記h1~h6有默認的字號樣式。CSS優先級定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級問題。根據規定，樣式表的優先級別從高到低為：行內樣式、嵌入式和外部樣式表。也就是最接近目標元素的樣式優先級越高，即就近原則。任務實現：美化簡單學院網站本節在前面學習CSS內容的基礎上，綜合使用CSS樣式屬性將簡單學院網站進行修飾美化。將任務2創建的簡單學院網站項目school復制一份，放入chapter03目錄中，在HBilderX中，打開school目錄，依次給每個頁面添加CSS樣式。1.美化首頁樣式分析分析首頁效果圖，可以為body元素統一設置字體、顏色等樣式，標題、段落文字的對齊方式等信息分別設置即可。搭建結構<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>未來信息學院</title> </head><body> <h2>歡迎來到未來信息學院</h2> <hr> <p><ahref="intr.html">學院簡介</a><br> <ahref="news.html">學院新聞</a><br> <ahref="spe.html">專業介紹</a><br> <ahref="rec.html">招生就業</a> </p> <</p> <p>友情鏈接：<ahref=""target="_blank">百度</a>  

<ahref=""target="_blank">學院官網</a><br> <hr> <p>版權所有©未來信息學院</p></body></html>定義CSS樣式 <styletype="text/css"> body{ font-family:"微軟雅黑"; /*設置字體*/ font-size:14px; /*設置網頁中除標題外的文字大小*/ color:#333; /*設置網頁中文字的顏色*/ } h2{ /*設置標題的文字顏色和對齊方式*/ color:#F00; text-align:center; } p{ /*創建段落的樣式*/ text-align:center; } </style>美化學院簡介頁面樣式分析分析學院簡介頁面效果圖，可以為body元素統一設置字體、顏色等樣式，標題、段落和版權信息的樣式須分別設置。搭建結構<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>學院簡介</title></head><body> <h2>學院簡介</h2> <hr> <pclass="text1">未來信息學院是省人民政府批準設立、教育部備案的公辦省屬普通高等學校，學校秉持“以服務發展為宗旨，以促進就業為導向”的辦學方針，遵循“以人為本、德技雙馨、產教融合、服務社會”的辦學理念，以“建設有特色高水平高職院校”為目標，建立了開放創新強校模式，累積了優質的教育資源，形成了良好的育人環境。學校的管理水平、教學質量、辦學特色得到社會各界的廣泛肯定。</p> <pclass="text1">學校是教育部批準的“國家示范性軟件職業技術學院”首批建設單位,部隊士官人才培養定點院校，“3+2”對口貫通分段培養本科招生試點院校，示范性高職單獨招生試點院校；是國家首批“電子信息產業高技能人才培訓基地”“省級服務外包人才培訓基地”“省級勞務外派培訓基地”“省信息安全培訓中心”；榮獲“全國信息產業系統先進集體”“職業教育先進集體”“德育工作優秀高校”等稱號。</p> <hr> <pclass="text2">版權所有©未來信息學院</p> <pclass="text3"><ahref="index.html">返回</a></p></body></html>定義CSS樣式 <styletype="text/css"> body{ font-family:"微軟雅黑"; /*設置字體*/ font-size:14px; /*設置網頁中除標題外的文字大小*/ color:#333; /*設置網頁中文字的顏色*/ } h2{ /*設置標題樣式*/ color:#F00; text-align:center; } .text1{ /*設置正文樣式*/ text-indent:2em; line-height:25px; } .text2{ /*設置版權信息樣式*/ text-align:center; } .text3{ /*設置超鏈接樣式*/ text-align:right; } </style>美化學院新聞頁面樣式分析分析學院簡介頁面效果圖，可以為body元素統一設置字體、顏色等樣式，標題、列表項和版權信息的樣式須分別設置。搭建結構<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>學院新聞</title></head><body> <h2>學院新聞</h2> <hr> <ul> <li><ahref="news1.html"target="_blank">學校聯合發起成立軟件行業產教聯盟(2021-04-09)</a></li> <li><ahref="#"target="_blank">學校“四個推進”掀起黨史學習教育熱潮(2021-04-08)

</a></li> <li><ahref="#"target="_blank">學校召開2021年度體育工作會議(2021-04-02)

</a></li> <li><ahref="#"target="_blank">我校舉行“銘記歷史緬懷先烈”清明節祭掃先烈活動(2021-04-01)</a></li> <li><ahref="#"target="_blank">中國工業互聯網研究院來我校交流訪問(2021-03-30)

</a></li> < <li><ahref="#"target="_blank">我校舉行示范課建設專題講座(2021-03-30)

</a></li> </ul> <hr> <pclass="text1">版權所有©未來信息學院</p> <pclass="text2"><ahref="index.html">返回</a></p></body></html>定義CSS樣式 <styletype="text/css"> body{ font-family:"微軟雅黑"; font-size:14px; color:#333; } h2{ /*設置標題樣式*/ color:#F00; text-align:center; } li{ /*設置列表項的樣式*/ line-height:25px; /*行高*/ } .text1{ /*設置版權信息樣式*/ text-align:center; } .text2{ /*設置超鏈接樣式*/ text-align:right; } </style>美化新聞詳情頁面樣式分析分析新聞詳情頁面效果圖，可以為body元素統一設置字體、顏色等樣式，標題、副標題、正文和版版信息的樣式須分別設置。搭建結構<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>學校聯合發起成立軟件行業產教聯盟</title> </head><body> <h2>學校聯合發起成立軟件行業產教聯盟</h2> <h4>撰稿人：軟件與大數據系時間：2021-04-0920:33:17瀏覽次數：181次</h4> <hr><pclass="text1">4月9日，軟件行業產教聯盟成立大會在濟南舉行。會議舉行了成立儀式及省優秀軟件企業和優秀軟件產品頒獎儀式，主題演講活動于同日舉辦。</p> <pclass="text1">軟件行業產教聯盟是在山東省工業和信息化廳指導下，由我校和大學軟件學院、浪潮集團、省軟件協會聯合發起成立，聯盟有企業會員196家、高校會員55所。我校任聯盟副理事長單位。</p> <pclass="text2"><imgsrc="images/lianmeng.jpg"width="400"alt="成立現場"></p> <hr> <pclass="text2">版權所有©未來信息學院</p> <pcl

溫馨提示

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

評論

0/150

提交評論