Change History
Message: [講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
Changed By: JinJin
Change Date: November 20, 2019 08:15AM
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
<h2>本單元範例下載</h2>
[color=#FF1493]✱[/color] [url=http://mepopedia.com/~jinjin/ex/rwd-video.zip]<b>範例下載</b>[/url]
學長姐參考範例:
<a href="http://mepopedia.com/~jinjin/ex/final-1055445017/" target="_blank'><b>http://mepopedia.com/~jinjin/ex/final-1055445017</b></a>
/final-1055445017/" target="_blank'><b>http://mepopedia.com/~jinjin/ex/final-1055445017</b></a>
<hr>
jinjin/ex/final-1055445017</b></a>
<hr>
<h3>head需修改之項目</h3>
請於下列標示部分,替換成自己的設計元素
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-01.png" border="0">
<hr>
<h3>skins/css/網頁主色設定</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-02.png" border="0">
skin / <b>[color=#CC0066]mycolor.css[/color]</b> 網頁主色設定
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-03.png" border="0">
使用搜尋快速鍵<b>Ctrl+F(或搜尋與取代Ctrl+shift+F)</b> 將原來色碼替換成欲取代的色碼
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-04.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-06.png" border="0">
<hr>
<h3>等待動畫page-loader</h3>
等待動畫,可自行設計gif動畫後替換
<img width="70%" src="http://mepopedia.com/~jinjin/web/img/rwd-07.png" border="0">
<xmp> <div class="page-loader">
<img src="assets/img/loader.gif" alt="">
</div></xmp>
<hr>
<h3>Toggle navigation行動版導覽列/桌機版logo圖檔</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-09.png" border="0">
<b>行動版導覽列logo文字及圖示設定</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-10.png" border="0">
<hr>
<h3>導覽列設定/navbar/dropdown</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-08.png" border="0">
<b>導覽列原始碼位置</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-11.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-12.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-13.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-14.png" border="0">
<hr>
<h3>首頁video影片設定 / videowrap影音區塊 / script</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-17.png" border="0">
<b>html /script導覽列原始碼位置</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-15.png" border="0">
<hr>
<b>html 影片代碼位置修改</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-18.jpg" border="0">
<hr>
<h2>上課影音</h2>
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
https://youtu.be/ZfnETBim57c
<iframe width="800" height="400" src="https://www.youtube.com/embed/ZfnETBim57c?start=4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Changed By: JinJin
Change Date: November 20, 2019 08:15AM
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
<h2>本單元範例下載</h2>
[color=#FF1493]✱[/color] [url=http://mepopedia.com/~jinjin/ex/rwd-video.zip]<b>範例下載</b>[/url]
//mepopedia.com/~jinjin/ex/final-1055445017/" target="_blank'><b>http://mepopedia.com/~jinjin/ex/final-1055445017</b></a>
com/~jinjin/ex/final-1055445017</b></a>
jinjin/ex/final-1055445017</b></a>
<hr>
<h3>head需修改之項目</h3>
請於下列標示部分,替換成自己的設計元素
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-01.png" border="0">
<hr>
<h3>skins/css/網頁主色設定</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-02.png" border="0">
skin / <b>[color=#CC0066]mycolor.css[/color]</b> 網頁主色設定
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-03.png" border="0">
使用搜尋快速鍵<b>Ctrl+F(或搜尋與取代Ctrl+shift+F)</b> 將原來色碼替換成欲取代的色碼
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-04.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-06.png" border="0">
<hr>
<h3>等待動畫page-loader</h3>
等待動畫,可自行設計gif動畫後替換
<img width="70%" src="http://mepopedia.com/~jinjin/web/img/rwd-07.png" border="0">
<xmp> <div class="page-loader">
<img src="assets/img/loader.gif" alt="">
</div></xmp>
<hr>
<h3>Toggle navigation行動版導覽列/桌機版logo圖檔</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-09.png" border="0">
<b>行動版導覽列logo文字及圖示設定</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-10.png" border="0">
<hr>
<h3>導覽列設定/navbar/dropdown</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-08.png" border="0">
<b>導覽列原始碼位置</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-11.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-12.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-13.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-14.png" border="0">
<hr>
<h3>首頁video影片設定 / videowrap影音區塊 / script</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-17.png" border="0">
<b>html /script導覽列原始碼位置</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-15.png" border="0">
<hr>
<b>html 影片代碼位置修改</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-18.jpg" border="0">
<hr>
<h2>上課影音</h2>
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
https://youtu.be/ZfnETBim57c
<iframe width="800" height="400" src="https://www.youtube.com/embed/ZfnETBim57c?start=4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Changed By: JinJin
Change Date: November 19, 2019 11:53PM
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
<h2>期末作業【RWD多頁網頁】線上範例與範例下載</h2>
以下說明與練習皆以本範例為主
線上範例
[color=#FF1493]✱[/color] <a href="http://mepopedia.com/~jinjin/ex/onepage/" target="_blank'><b>http://mepopedia.com/~jinjin/ex/final-rwd/</b></a>
[color=#FF1493]✱[/color] [url=http://mepopedia.com/~jinjin/ex/final.zip]<b>範例下載</b>[/url]
<h2>本單元範例下載</h2>
[color=#FF1493]✱[/color] [url=http://mepopedia.com/~jinjin/ex/rwd-video.zip]<b>範例下載</b>[/url]
com/~jinjin/ex/final-1055445017</b></a>
jinjin/ex/final-1055445017</b></a>
<hr>
<h3>head需修改之項目</h3>
請於下列標示部分,替換成自己的設計元素
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-01.png" border="0">
<hr>
<h3>skins/css/網頁主色設定</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-02.png" border="0">
skin / <b>[color=#CC0066]mycolor.css[/color]</b> 網頁主色設定
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-03.png" border="0">
使用搜尋快速鍵<b>Ctrl+F(或搜尋與取代Ctrl+shift+F)</b> 將原來色碼替換成欲取代的色碼
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-04.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-06.png" border="0">
<hr>
<h3>等待動畫page-loader</h3>
等待動畫,可自行設計gif動畫後替換
<img width="70%" src="http://mepopedia.com/~jinjin/web/img/rwd-07.png" border="0">
<xmp> <div class="page-loader">
<img src="assets/img/loader.gif" alt="">
</div></xmp>
<hr>
<h3>Toggle navigation行動版導覽列/桌機版logo圖檔</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-09.png" border="0">
<b>行動版導覽列logo文字及圖示設定</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-10.png" border="0">
<hr>
<h3>導覽列設定/navbar/dropdown</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-08.png" border="0">
<b>導覽列原始碼位置</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-11.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-12.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-13.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-14.png" border="0">
<hr>
<h3>首頁video影片設定 / videowrap影音區塊 / script</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-17.png" border="0">
<b>html /script導覽列原始碼位置</b>
<img width="100%" src="http://me<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-16.png" border="0">popedia.com/~jinjin/web/img/rwd-15.png" border="0">
<hr>
<b>html 影片代碼位置修改</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-18.jpg" border="0">
<hr>
<h2>上課影音</h2>
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
https://youtu.be/ZfnETBim57c
<iframe width="800" height="400" src="https://www.youtube.com/embed/ZfnETBim57c?start=4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Changed By: JinJin
Change Date: November 19, 2019 11:22PM
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
<h2>期末作業【RWD多頁網頁】線上範例與範例下載</h2>
以下說明與練習皆以本範例為主
線上範例
[color=#FF1493]✱[/color] <a href="http://mepopedia.com/~jinjin/ex/onepage/" target="_blank'><b>http://mepopedia.com/~jinjin/ex/final-rwd/</b></a>
[color=#FF1493]✱[/color] [url=http://mepopedia.com/~jinjin/ex/final.zip]<b>範例下載</b>[/url]
com/~jinjin/ex/final-1055445017</b></a>
jinjin/ex/final-1055445017</b></a>
<hr>
<h3>head需修改之項目</h3>
請於下列標示部分,替換成自己的設計元素
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-01.png" border="0">
<hr>
<h3>skins/css/網頁主色設定</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-02.png" border="0">
skin / <b>[color=#CC0066]mycolor.css[/color]</b> 網頁主色設定
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-03.png" border="0">
使用搜尋快速鍵<b>Ctrl+F(或搜尋與取代Ctrl+shift+F)</b> 將原來色碼替換成欲取代的色碼
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-04.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-06.png" border="0">
<hr>
<h3>等待動畫page-loader</h3>
等待動畫,可自行設計gif動畫後替換
<img width="70%" src="http://mepopedia.com/~jinjin/web/img/rwd-07.png" border="0">
<xmp> <div class="page-loader">
<img src="assets/img/loader.gif" alt="">
</div></xmp>
<hr>
<h3>Toggle navigation行動版導覽列/桌機版logo圖檔</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-09.png" border="0">
<b>行動版導覽列logo文字及圖示設定</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-10.png" border="0">
<hr>
<h3>導覽列設定/navbar/dropdown</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-08.png" border="0">
<b>導覽列原始碼位置</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-11.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-12.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-13.png" border="0">
<img width="100%" src="http://mepopedia.com/~jinjin/web/i
<b>html /script導覽列原始碼位置</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-15.png" border="0">
<hr>
<b>html 影片代碼位置修改</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-16.png" border="0">mg/rwd-14.png" border="0">
<hr>
<h3>首頁video影片設定 / videowrap影音區塊 / script</h3>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-17.png" border="0">
<b>html /script導覽列原始碼位置</b>
<img width="100%" src="http://me<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-16.png" border="0">popedia.com/~jinjin/web/img/rwd-15.png" border="0">
<hr>
<b>html 影片代碼位置修改</b>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-18.jpg" border="0">
<hr>
<h2>上課影音</h2>
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
https://youtu.be/ZfnETBim57c
<iframe width="800" height="400" src="https://www.youtube.com/embed/ZfnETBim57c?start=4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Original Message
作者: JinJin
Date: November 19, 2019 11:19PM
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video