<p><span style="font-weight: bold;">周次? ? ? ? ? ? ? ? ? ? ? ? ?課程要點? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?閱讀資料</span><br />1? ? ? ? ?網頁設計與制作與工具介紹? ? ? ? ? ? ? ? ? ? ? ? RWD1?<br />2? ? ? ? ?從用戶體驗切入響應式設計實踐? ? ? ? ? ? ? ? ?RWD2, WSG0?<br />3? ? ? ? ?HTML基本元素:碼云Pages搭建? ? ? ? ? ? ? ?w3school, 碼云Pages<br />4? ? ? ? ?頁面結構(Page Structure)? ? ? ? ? ? ? ? ? ? ? WSG6<br />5? ? ? ? ?頁面制作案例一 ☉期中在線考查 A? ? ? ? ? ? ? WP2,WSG4,DMMT?<br />6? ? ? ? ?圖像和視頻(Images&Video)? ? ? ? ? ? ? ? ? ?WSG11, 12<br />7? ? ? ? ?彈性布局與響應式圖片? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? RWD3?<br />8? ? ? ? ?HTML5與響應式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?RWD4<br />9? ? ? ? ?CSS3新特性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?RWD5<br />10? ? ? ?☉期中考查 B<br />11? ? ? ?網站結構(Site Structure)? ? ? ? ? ? ? ? ? ? ? ? WSG5?<br />12? ? ? ?CSS3高級技術? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?RWD6<br />13? ? ? ?介面設計(Interface Design)? ? ? ? ? ? ? ? ? ?WSG7<br />14? ? ? ?圖形設計(Graphic Design)? ? ? ? ? ? ? ? ? ? WSG8<br />15? ? ? SVG與響應式Web設計 ☉期中在線考查 C? RWD7?<br />16? ? ? CSS3過渡、變形和動畫? ? ? ? ? ? ? ? ? ? ? ? ? ? ?WSG9<br />17? ? ? ☉期末應用項目開發(fā)成果展示考查<br />18? ? ? ☉期末應用項目開發(fā)成果點評總結</p>
<h2>學習目標</h2>
<p>1.了解Web標準及基本概念</p>
<p>2.能夠使用sublime、Github等軟件創(chuàng)建簡單的網頁。</p>
<p>3.熟悉HTML5、CSS3語言的基本元素及響應式設計的基本操作。</p>
<p>4.掌握網頁設計及基本范式與理念。</p>
標簽的解釋:
 相當于空格鍵,
<span>是進行分類選項</span>
定義簡單的拆行
<h1><h2><h3><h4>都是定義標題的字體大小
<p>簡單的換段
WORD文檔格式轉化到HTML格式后有著很明顯的改變,由非常之簡單的格式變成由著多重的代碼和文字共同組成的HTML格式。在電腦的辦公中想要以WORD格式轉換HTML格式,我們可以使用記事本,然后轉換文件的格式,記事本使用基本的HTML格式,或者我們下載WEBSTORM,可以有著HTML的基本格式,之后我們利用簡單的代碼就可以轉換形成HTML網頁格式。
心得:在我們制作基本的HTML格式,我們在首行就要確定定義文檔的類型,就如同打入代碼<!DOCTYPE>,之后我們在列入換行打入<HTML>,然后輸入<head>和<title>確認主題。我們一切的都要以</>這個格式作為結尾。同時,我們有時候為了讓網頁檢查時候大家可以看清楚代碼的作用,我們可以進行注釋,而為了注釋信息不影響網頁的顯示,我們可以使用代碼格式,由此我們就能夠在每一段需要注釋的代碼注入注釋信息,方便檢查代碼結構和信息而不影響網頁的顯示。大家都知道響應式Web設計是非常棒的一種創(chuàng)新,他不像自適應的網頁設計,自適應只是為了滿足部分的屏幕分辨率,不能夠達到全適應,而響應式Web設計他是為了滿足大部分乃至所有的屏幕分辨率而創(chuàng)造的,避免了馬賽克和看不清的狀況產生,而且,他的成本也較低,只需要用一個網站就可以適應所有分辨率的屏幕,總會比維護多個網站去適應多個屏幕分辨率更為之合適吧,對于營銷部門來說不需要增加額外的工作量,適應所有設備,更容易管理。一個URL:讓用戶在移動設備上更容易找到,而且不需要任何的重定向,這在較慢的網速下特別的有用。但是,凡事都是有利有弊,響應式設計他是一種較新的技術,在一些老的設備和瀏覽器中加載頁面速度過慢,甚至是完全不支持,移動端和PC機上的用戶體驗是完全不同的。所以一個網,甚至是響應式設計,在兩個平臺上都會損害您整體UX(用戶體驗)。如果你試圖使用相同的界面來滿足移動和桌面的兩個平臺的用戶使用,到最后可能誰都無法滿足。
HTML5和CSS3的綜合運用,就會使得網頁更加鮮艷亮麗,也是適應了現(xiàn)代化因特網的需求,進行了改革和創(chuàng)新。代碼的多重變化就會早就不一樣的網頁設計,每一個代碼都有著極為重要的作用,學好HTML和CSS,可以讓網頁豐富多彩,成為一個合格的網頁工程師。