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

Advanced

[講義04] 以CSS製作網頁導覽列

接下來的幾份講義將以下莫內網站,來解說不同的網頁設計功能

[color=#0033CC]永遠的印象--莫內,範例網址:[/color]

[color=#CC3366]1.透過CSS,以清單 <ul>及<li>製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/ (滑入僅文字變色的導覽列)
http://mepopedia.com/~jinjin/web/hw04-1/ (滑入底色變色及文字置中的導覽列)

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/ 




首先談到的是[color=#CC0099]網頁導覽列的製作[/color],其中分為以清單 ul 及 li 製作與圖片製作兩類

[color=#990000]一、透過CSS,以清單 ul 及 li 製作網頁導覽列[/color]




[color=#666600]導覽列對於網頁設計來說,是一個非常重要的部分,敘述網站的導覽架構,並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中,肩負著重要資訊的描述以及視覺注視的任務,不能搶過主要的視覺焦點,卻要能醒目及兼具設計質感,達到網頁設計的平衡。

以往許多類似的做法,有用表格table製作,或用圖片製作,各有其優缺點:

以表格製作雖然看似架構簡單,但表格本身實際內容複雜(包含TR TD),以CSS設定會更為繁瑣。

以圖片來製作雖然變化較多,但修改不易(例如只是修改文字內容,整張圖片或一組圖片就需重作)。

以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢,既簡潔又富設計感,修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定,但圖片則要整組重作(有時數目可能非常多)。

有關以 table 製作與以 CSS 製作的差異可以從觀察下面二個例子發現:

Table: http://www.sitepoint.com/examples/cssvtables/tables4.html
(此例中的留著許多邊框是為了凸顯多層表格,不是設計得不好看)
CSS: http://www.sitepoint.com/examples/cssvtables/butterflycss.html
[/color]

[hr]

以下則講解,透過CSS樣式,把清單(list)文字調整成導覽列使用的方法:


清單文字採用[color=#CC0066]<ul>標籤定義清單的範圍[/color],並使用[color=#CC0066]<li>標籤定義個別項目[/color],例如:

<ul> <li>About</li> <li>Works</li> <li>Video</li> <li>Links</li> <li>Story</li> </ul>
即會產生以下的清單列


  • About

  • Works

  • Video

  • Links

  • Story




接著,加入[color=#CC0066]連結[/color]的語法

<ul> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>
即會產生以下有連結的清單列



接著[color=#CC0066]設定導覽列的ID名稱為#button,直接設定於<ul>[/color]

語法為:

<ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>

1. 完整語法(含header )


<!DOCTYPE html> <html> <head> <title>網頁導覽列</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrapper"> <div id="header"></div> <ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul> <div id="content"></div> <div id="footer"></div> </div> </body> </html>

[hr]


接下來就開始開始[color=#CC0066]設定CSS[/color]的部分

#button {
        [color=#CC3300]/*高度設定*/[/color]
        height: 22px;
        
        [color=#CC3300]/*文字設定*/[/color]
        font-weight: bolder;
        color: #FFF;
        font-size: 14px;
        
        [color=#993300]/*將內定的邊距清除*/[/color]
        margin: 0px;

        [color=#993300]/*將清單內定的內距清除(無清除,則左側會多出約40px,範例二可不用加這一項*/[/color]
        padding:0px;
        }
                

1. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]



#button li {
           [color=#CC0099]/* 讓各個清單元素靠左對齊,由原本的垂直排列變成水平排列,形成水平清單 */[/color]
       float:left;

         [color=#CC0099]/* 設定清單文字範圍的寬度 */[/color]
       width:178px;
        
         [color=#CC0099]/* 去除清單文字前面的小點*/[/color]
       list-style-type:none;
                 
         [color=#CC0099]/* 讓清單文字居中對齊 */[/color]
       text-align:center;
         
           [color=#CC3300]/* 設定背景色,依個人喜好調整背景色,但要符合整設計風格 */[/color]
           background-color:#6E6E6E;

         [color=#CC3300]/* 設定字距為2px,非必要 */[/color]
         letter-spacing: 2px;
        
         [color=#CC3300]/* 設定左邊的白邊樣式,可依個人喜好調整 */[/color]
         border-left-width: 1px;
         border-left-style: solid;
         border-left-color: #FFF;
        
         [color=#CC3300]/* 右邊留白1像素 ,可依個人喜好調整*/[/color]
           margin-right:1px;
   }
                
#button li a {
         [color=#CC0099]/* 連結範圍充滿整個區塊 */[/color]
       display: block;
        
         [color=#CC0099]/* 單個連結範圍的框度和高度*/[/color]
         width: 180px;
         height:20px;
        
           [color=#CC3300]/* 設定連結範圍向上的內距,依狀況調整 */[/color]
         padding-top:2px;
        
         [color=#CC3300]/* 連結的文字設為白色以及無裝飾(無底線) ,依個人喜好調整背景色,但要符合整設計風格*/[/color]
         color: #FFF;
         text-decoration: none;
   }

#button li a:hover{
           [color=#993300]/* 設定滑鼠移過時,清單改變的底色設定 */[/color]
           background-color:#39919F;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04-1/ (滑入底色變色及文字置中的導覽列)


[hr]


2. [color=#CC3300]2.改變文字顏色的做法[/color]


#button li {        
        float: left;
        list-style-type: none;
        letter-spacing: 2px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #FFF;
        padding-left: 10px;
}
                
#button li a {
      display: block;
        width: 169px;
        height: 22px;
        padding-top:2px;
        color: #FFF;
        text-decoration: none;
}

#button li a:hover{
   /* 設定滑鼠移過時,改變文字顏色的設定 */
        color: #7CCBDC;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04/ (滑入僅文字變色的導覽列)


[hr]


[color=#990000]二、以圖片置入製作網頁導覽列[/color]



[color=#CC0066]※以圖片製作導覽按鈕的優點:可依設計者喜好設計多樣風格的按鈕
※以圖片製作導覽按鈕的缺點:修改較不方便,一定要進繪圖軟體修改,製作時間較長,檔案容量較大[/color]


1.以photoshop製作頂圖及按鈕

設定與裁切好尺寸,此範例設定為寬900px,按鈕寬180px,高21px
以參考線(尺規CTRL+R 拉出參考線)拉出所需的長寬

[IMG]http://mepopedia.com/~jinjin/web/img/4-01.jpg[/IMG]

[hr]
2.在清單列打入文字,並設定文字陰影,以增加閱讀性

[IMG]http://mepopedia.com/~jinjin/web/img/4-02.jpg[/IMG]

[hr]
3.在同一位置放上中英文字

[IMG]http://mepopedia.com/~jinjin/web/img/4-03.jpg[/IMG]

[hr]
4.將文字分別複製修改至適當位置

[IMG]http://mepopedia.com/~jinjin/web/img/4-04.jpg[/IMG]

[hr]
5.選擇工具箱中,裁切工具底下的切片工具,進行切片工作

[IMG]http://mepopedia.com/~jinjin/web/img/4-05.jpg[/IMG]

[hr]
6.使用切片工具,將頂圖案按鈕依照參考線手動切片,(或按參考線自動產生切片後,將頂圖部份合併)

[IMG]http://mepopedia.com/~jinjin/web/img/4-06.jpg[/IMG]

[hr]
7.直接按確定

[IMG]http://mepopedia.com/~jinjin/web/img/4-07.jpg[/IMG]


[hr]
8.格式選[color=#CC0066]僅影像[/color],全部使用者切片,按確定

[IMG]http://mepopedia.com/~jinjin/web/img/4-08.jpg[/IMG]


[hr]
9.將頂圖與按鈕將切割大小自動輸出至自動產生的images資料夾中

[IMG]http://mepopedia.com/~jinjin/web/img/4-09.jpg[/IMG]


[hr]
10.將英文按鈕的部分,按住SHIFT分別選取,按確定輸出

[IMG]http://mepopedia.com/~jinjin/web/img/4-10.jpg[/IMG]


[hr]
11.在切片的選項,選取 [color=#CC0066]選取的切片[/color]

[IMG]http://mepopedia.com/~jinjin/web/img/4-11.jpg[/IMG]

即會在images資料夾,自動產生英文組的按鈕

[hr]

放入按鈕的方法,請見講義三

連結按鈕的方法請參考下圖

[IMG]http://mepopedia.com/~jinjin/web/img/4-12.jpg[/IMG]

[hr]

3. 三、範例語法



4. [color=#CC0099]1.範例圖片按鈕的語法如下[/color]



1. 1.HTML語法:



<!DOCTYPE html> <html> <head> <title>永遠的印象--莫內</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('images/back02_02.jpg','images/back02_03.jpg','images/back02_04.jpg','images/back02_05.jpg','images/back02_06.jpg')"> <div id="wrapper"> <div id="header"> <h1> <strong>Claude Monet</strong></h1> <span class="header-text">forever Impressionism </span> </div> <div id="button"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/back02_02.jpg',1)"><img src="images/back_02.jpg" name="Image2" width="180" height="26" border="0"></a><a href="works.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/back02_03.jpg',1)"><img src="images/back_03.jpg" name="Image3" width="179" height="26" border="0"></a><a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/back02_04.jpg',1)"><img src="images/back_04.jpg" name="Image4" width="180" height="26" border="0"></a><a href="links.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/back02_05.jpg',1)"><img src="images/back_05.jpg" name="Image5" width="180" height="26" border="0"></a><a href="story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/back02_06.jpg',1)"><img src="images/back_06.jpg" name="Image6" width="181" height="26" border="0"></a></div> <div id="content"> <p><img src="images/MONET_03.jpg" width="835" height="312"></p> <p class="text-s">藍色調的睡蓮</p> <p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p> <p> 莫內是法國畫家, 是印象主義的創立者之一,而且只有他一人終其一生都堅持印象主義的原則和目標,也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力,直到他早期的印象主義繪畫還保留著這項特質,使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮,忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p> </div> <div id="footer"> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br> │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br> │最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by JinJin </div> </div> </body> </html>

2. 2.CSS部分的語法如下:



@charset "utf-8"; /* CSS Document */ body { background-color: #4188A6; /*底色*/ margin: 0px; /*緊貼頂部*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ border: 2px solid #DEECDF; } #header { background-image: url(images/back_01.jpg); background-repeat: no-repeat; padding-top: 20px; padding-bottom: 30px; padding-left: 30px; } #button { } #content { font-family: "微軟正黑體", "Arial Unicode MS"; font-size: 14px; line-height: 2em; color: #333; padding: 30px; background-color: #DDE3E3; } #footer { font-size: 12px; line-height: 1.5em; color: #DDE3E3; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background-image: url(images/header01.jpg); background-repeat: no-repeat; } /************標題設定************/ h1{ color: #FFF; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 30px; margin: 0px; /*清除原有的距離*/ } .header-text { font-size: 15px; color: #D2EFF7; font-family: "Times New Roman", Times, serif; font-weight: bolder; font-style: italic; margin: 0px; /*清除原有的距離*/ } .title-1 { font-size: 18px; line-height: 2em; border-bottom-width: 1px; border-left-width: 12px; border-bottom-style: dotted; border-left-style: dotted; border-bottom-color: #417C9A; border-left-color: #417C9A; color: #187E95; } .text-s { font-size: 13px; color: #6F6CA1; border-left-width: 2px; border-left-style: dotted; border-left-color: #8081B1; padding-left: 5px; font-weight: bolder; } /************表格設定************/ #content table { border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #278092; } #content table tr td { padding: 5px; font-size: 12px; line-height: 1.5em; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #278092; } /************表格標題************/ .table_title { font-size: 14px; font-weight: bolder; color: #E9F0E0; background-color: #278092; } /************連結設定************/ #content a { color: #278092; text-decoration: none; } /************連結滑鼠移過時的設定************/ #content a:hover { color: #903; text-decoration: underline; } /************靠左浮動的設定(繞圖排文時,圖片的設定)************/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /************靠右浮動的設定(繞圖排文時,圖片的設定)************/ .floatright { float: right; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; } /************清除浮動的設定(繞圖排文時,文字的設定)************/ .clearboth { clear: both; }

5. [color=#CC0099]2.透過CSS,以清單 ul 及 li 製作網頁導覽列的語法如下[/color]



1. 1.HTML語法:



<!DOCTYPE html> <html> <head> <title>永遠的印象--莫內</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrapper"> <div id="header"> <h1> <strong>Claude Monet</strong></h1> <span class="header-text">forever Impressionism </span> </div> <ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul> <div id="content"> <p class="text-s">藍色調的睡蓮</p> <p class="title-1"> 關於莫內 <strong>Claude Monet</strong></p> <p> 莫內是法國畫家, 是印象主義的創立者之一,而且只有他一人終其一生都堅持印象主義的原則和目標,也是唯一在生前贏得大眾認可的印象主義畫家。他少年時代所畫的諷刺漫畫就已具備了驚人的形似能力,直到他早期的印象主義繪畫還保留著這項特質,使他和十九世紀中葉風景畫家的朦朧概括迥然不同。他的風景畫完全以主題的視覺經驗感知為首要的考慮,忽視傳統的概念﹝構圖、題材、潤飾等﹞。</p> </div> <div id="footer"> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br> │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br> │最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by JinJin </div> </div> </body> </html>

2. 2.CSS部分的語法如下:



@charset "utf-8"; /* CSS Document */ body { background-color: #4188A6; /*底色*/ margin: 0px; /*緊貼頂部*/ } #wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ border: 2px solid #DEECDF; } #header { background-color: #4B92B0; padding-top: 20px; padding-bottom: 30px; padding-left: 30px; } /*******按鈕不同部分*******/ #button { /*高度設定*/ height: 22px; /*文字設定*/ font-weight: bolder; color: #FFF; font-size: 14px; /*背景色設定*/ background-color:#6E6E6E; /*將內定的邊距清除*/ margin: 0px; /*將內定的內距清除*/ padding:0px; } #button li { /* 讓各個清單元素靠左對齊 */ float:left; /* 設定清單文字範圍的寬度 */ width:178px; /* 去除清單文字前面的小點*/ list-style-type:none; /* 設定背景色 */ background-color:#6E6E6E; /* 讓清單文字居中對齊 */ text-align:center; /* 設定字距為2px */ letter-spacing: 2px; /* 設定左邊的白邊樣式 */ border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; /* 右邊留白1像素 */ margin-right:1px; } #button li a { /* 連結範圍充滿整個區塊 */ display: block; /* 單個連結範圍的框度和高度*/ width: 180px; height:20px; /* 連結範圍向上的內距 */ padding-top:2px; /* 連結的文字設為白色以及無裝飾(無底線) */ color: #FFF; text-decoration: none; } #button li a:hover{ /* 設定滑鼠移過時,清單改變的底色設定 */ background-color:#39919F } /*******按鈕部分結束*******/ #content { font-family: "微軟正黑體", "Arial Unicode MS"; font-size: 14px; line-height: 2em; color: #333; padding: 30px; background-color: #DDE3E3; } #footer { font-size: 12px; line-height: 1.5em; color: #DDE3E3; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background-color: #4B92B0; } /************標題設定************/ h1{ color: #FFF; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 30px; margin: 0px; /*清除原有的距離*/ } .header-text { font-size: 15px; color: #D2EFF7; font-family: "Times New Roman", Times, serif; font-weight: bolder; font-style: italic; margin: 0px; /*清除原有的距離*/ } .title-1 { font-size: 18px; line-height: 2em; border-bottom-width: 1px; border-left-width: 12px; border-bottom-style: dotted; border-left-style: dotted; border-bottom-color: #417C9A; border-left-color: #417C9A; color: #187E95; } .text-s { font-size: 13px; color: #6F6CA1; border-left-width: 2px; border-left-style: dotted; border-left-color: #8081B1; padding-left: 5px; font-weight: bolder; } /************表格設定************/ #content table { border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #278092; } #content table tr td { padding: 5px; font-size: 12px; line-height: 1.5em; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #278092; } /************表格標題************/ .table_title { font-size: 14px; font-weight: bolder; color: #E9F0E0; background-color: #278092; } /************連結設定************/ #content a { color: #278092; text-decoration: none; } /************連結滑鼠移過時的設定************/ #content a:hover { color: #903; text-decoration: underline; } /************靠左浮動的設定(繞圖排文時,圖片的設定)************/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /************靠右浮動的設定(繞圖排文時,圖片的設定)************/ .floatright { float: right; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; } /************清除浮動的設定(繞圖排文時,文字的設定)************/ .clearboth { clear: both; }
[hr]
依然沒有錄到聲音>"<

http://youtu.be/Q3QV5El081c




Edited 29 time(s). Last edit at 11/22/2017 04:53PM by JinJin.
(編輯記錄)

MEPOERs said:
HP: JinJin老師講義製作得真是超級用心。不僅有完整的 HTML/CSS 原始碼,連怎麼用Photoshop作圖片都有Step-by-Step的教學呢!
(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1035445156

(2).請回答以下問題:
1.導覽列配色與風格設定:龍貓
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片 結果根本不用是我誤會大了
4.製作作業的時間 30分

Re: [講義04] 以CSS製作網頁導覽列

(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1035445090

(2).請回答以下問題:
1.導覽列配色與風格設定:唐老鴨
2.有無遇到的問題? 有一些忘光
3.製作感想 :一開始不知道從哪著手,之後慢慢做
4.製作作業的時間 一小時

(1).作業網址 : http://mepopedia.com/~web105-2c/final/final-1045445217/index2.html

(2).請回答以下問題:
1.導覽列配色與風格設定:簡單黑白灰
2.有無遇到的問題? 很大的問題
3.製作感想 :累
4.製作作業的時間 兩小時

(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1035445018

(2).請回答以下問題:
1.導覽列配色與風格設定:小王子
2.有無遇到的問題? 無
3.製作感想 :比前面作業還要容易上手
4.製作作業的時間 30分

(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1035445027

(2).請回答以下問題:
1.導覽列配色與風格設定:魯魯米
2.有無遇到的問題? 無
3.製作感想 :容易上手
4.製作作業時間:30分鐘

(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1035445201

(2).請回答以下問題:
1.導覽列配色與風格設定:美國恐怖故事
2.有無遇到的問題?
3.製作感想 :容易上手
4.製作作業時間:30分鐘

Re: [講義04] 以CSS製作網頁導覽列

(1).作業網址 :file:///C:/Users/gina/Desktop/hw04-1035445114/index.html

(2).請回答以下問題:
1.導覽列配色與風格設定:柴犬
2.有無遇到的問題? 無
3.製作感想 : 心想事成
4.製作作業的時間 30分鐘

(1).作業網址 :http://mepopedia.com/~cg104-1a/final/final-1045440012/
(2).請回答以下問題:
1.導覽列配色與風格設定:繽紛
2.有無遇到的問題? 一開始一直無法讓清單的那個小點點不見,弄了好久終於不見了QQ
3.製作感想 :網頁真的好難做嗚嗚,語法也都亂七八糟,希望不會有人拿我得去改應該會很痛苦spinning smiley sticking its tongue out
4.製作作業的時間 :好久好久

(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1045440020

(2).請回答以下問題:
1.導覽列配色與風格設定:多莉
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :波棒
4.製作作業的時間 30分

1).作業網址 :file:///C:/Users/tr558/Desktop/10/hw04-1045445108/index.html
(2).請回答以下問題:
1.導覽列配色與風格設定:灌籃高手
2.有無遇到的問題? 無
3.製作感想 :我剛開始以為很難還在切片 結果根本不用是我誤會大了
4.製作作業的時間 20

(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1045445177

(2).請回答以下問題:
1.導覽列配色與風格設定:荳荳
2.有無遇到的問題? 老師教學影片沒聲音很難做
3.製作感想 :還好沒太多感觸
4.製作作業的時間 一天一點點

(1).作業網址 : http://mepopedia.com/~web104-2c/hw04/hw04-1055445081

(2).請回答以下問題:
1.導覽列配色與風格設定:簡單的
2.有無遇到的問題? 影片沒聲音只能靠自己的眼睛跟腦袋
3.製作感想 :還好不會很難
4.製作作業的時間 20min(?)