Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

期末作業【RWD多頁網頁】線上範例與範例下載


以下說明與練習皆以本範例為主
線上範例
[color=#FF1493]✱[/color]


skins/css/網頁主色設定




skin / [color=#CC0066]mycolor.css[/color] 網頁主色設定


使用搜尋快速鍵Ctrl+F(或搜尋與取代Ctrl+shift+F) 將原來色碼替換成欲取代的色碼





等待動畫page-loader


等待動畫，可自行設計gif動畫後替換

<div class="page-loader"><br /> <img src="assets/img/loader.gif" alt=""><br /> </div>


Toggle navigation行動版導覽列/桌機版logo圖檔




行動版導覽列logo文字及圖示設定



導覽列設定/navbar/dropdown





導覽列原始碼位置










html 影片代碼位置修改
mg/rwd-14.png" border="0">



首頁video影片設定 / videowrap影音區塊 / script




html /script導覽列原始碼位置

popedia.com/~jinjin/web/img/rwd-15.png" border="0">



html 影片代碼位置修改



上課影音


[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
https://youtu.be/ZfnETBim57c