Homework 1

你被服貿了嗎？

【你被服貿了嗎】是 g0v 服貿相關專案的其中一個。它是一個簡單的網站，讓大眾輸入自己所在的公司，網站背後就會去比對公司營業登記項目和服貿開放的項目，告知使用者自己是否會被服貿影響，並且提供整理過後的延伸閱讀連結、服貿文件原文。【你被服貿了嗎】藉著告訴公民自己與服貿的關聯，並降低服貿資訊的理解門檻，讓公民自發性地去汲取關於服貿的細節資訊，讓民眾足以判斷自己將接受的衝擊、決定自己應該採取什麼樣的行動。

『

有時候我們看得到結果，

而那個結果讓我們感到憂慮，

讓我們感到不安，或者是讓我們感到我們必須要阻止一些事情。

但是在阻止的同時，

沒有什麼事情是比得上，我們是因為深入去了解這件事情、

所以交換我們之間的意見，產生最大的社會共識，

而不是社會輿論。

』

『

讓我們停止產生這些聳動的標題。

但是我們要加強，社會裡面每一份子對於這個東西更深入的認識，

請把你知道的跟更多人分享。

用正確的方式，用真正回歸知識跟回歸我們判斷的方式傳遞下去，

讓他真正變成一個公民的共識。

』

-- 張懸，20140308 全台廢核大遊行晚會直播

作業要求

同學們要實作的，是專案中收集使用者回饋的部份，類似新聞網站「這則新聞讓你感到？」那樣功能的東西，但不需要有任何功能，只要用 HTML、CSS，排出下面頁面即可。

[1:1 圖片下載]

請同學下載樣板專案，修改裡面的 index.html 與 css/styles.css，以符合下面規定：

• 參考量測版面、參考顏色圖。未量測的 padding、margin 與寬高，可隨意指定順眼的數字。請相信自己的美感 (?)
• 頁面核心部分為 1140px 寬，左右置中。
• 紫色、灰色、深灰色區塊必須水平延伸至整個視窗。
• 拉桿不需要會動、滑鼠移到按鈕上也不用變色。
• 除樣板專案內付的七張圖片之外，不可以用到其他圖片。但裁切這七張圖片產生的新圖片，則不在此限。（助教試切這個版的時候也是用這七張圖片，沒用其他圖或再做修改。）
• 字型已經幫同學設定完畢。Windows 上由於字型不同，看起來會和圖中不太一樣，是正常現象，不需額外設定。

繳交規定

請於 3/24 (一) 以前的任何 TA hour，至該 TA 所在處進行 Live demo。

版面不要差太多（橫向排版的就該排成橫的，直向的就該排成直的）的話即可滿分。

Hint

想參考作法的同學，請反白以下。

• 最上面的部份

• display: block 物件要置中，請使用 margin-left: auto; margin-right: auto
• display: inline / inline-block / 一般文字要置中，請在父元素下 text-align: center
• CSS 三角形請參考這個文件。
• 字母間距可用 letter-spacing 微調。

• 中間的部份

• 灰色 / 橘色拉桿，可以用 position: absolute 的 <div>、<span> 或 pseudo-elements，用 width, height 做成寬寬的長方形、用 background 來填色，並使用 border-radius 來導圓角。
• 深色點點、橘色大點點也可以用上述方式達成，先作一個正方形並且擺定位，然後用 border-radius 弄成圓形。
• 把東西從左排到右的方式：float: left 或 display: inline-block
• 單行文字直排，只需將容器寬度設得夠窄，使得容器裡每個字都斷行即可。

版權宣告

服貿 mockup 由視覺設計凜希製作，CC 4.0 BY 授權。