-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
256 lines (253 loc) · 11.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Quest for Web Design</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/main.css">
<script type="text/javascript" src="assets/javascripts/main.js"></script>
</head>
<body>
<header>
<div class="banner">
<h1 class="title">Web Design</h1>
<h3 class="sub-title">A webquest for final project of web design.</h3>
</div>
<nav class="nav-front-page">
<h3 class="small-title">WebQuest</h3>
<ul>
<li><a class="link" href="#introduction"><span>Introduction</span></a></li>
<!--介紹-->
<li><a class="link" href="#task"><span>Task</span></a></li>
<!--任務-->
<li><a class="link" href="#process"><span>Process</span></a></li>
<!--過程-->
<li><a class="link" href="#resource"><span>Resource</span></a></li>
<!--資源-->
<li><a class="link" href="#evaluation"><span>Evaluation</span></a></li>
<!--評估-->
<li><a class="link" href="#conclusion"><span>Conclusion</span></a></li>
<!--結論-->
</ul>
</nav>
</header>
<div id="main">
<div id="introduction">
<div class="site-content">
<div class="site-title">Introduction 簡介</div>
<p>
近年來，科技越來越發達，幾乎人人都有電子設備，也常常會瀏覽各式各樣的網站。
</p>
<p>
樣式精美排版整潔的網站，總是會讓人想一看再看，以現在的科技來說，自己做一個網站並非難事，網路上有滿滿的資源可以使用，讓我們簡簡單單就能設計出一個獨具風格的網站。
</p>
</div>
</div>
<div id="task">
<div class="site-content">
<div class="site-title">Task 任務</div>
<p>
假設你是一個新進的網頁設計師，有許多單位都要求你幫他們設計一個符合他們理念的網站，請找一個自己最有興趣的單位(慈善機構、藝人、事件……等等)，替他們設計出一個能表達出其核心理念和特色的網站。
</p>
<p>
利用資料蒐集及彙整，如有需要也能做採訪，了解其核心理念及特色。
</p>
<p>
完成一個符合理念的網站，並以口頭報告解釋選擇此單位的理由和網站的設計理念。
</p>
</div>
</div>
<div id="process">
<div class="site-content">
<div class="site-title">Process 過程</div>
<p>
同學需以3~5人為一組
<br> 共同構思一個主題，並以該主題完成一個專題網站。
</p>
<ol>
<li>蒐集該主題相關資料</li>
<li>整理所得資訊</li>
<li>繪出網頁基本架構(有幾頁、每頁內容)</li>
<li>利用CSS完成符合主題的排版設計(可考慮加入RWD)</li>
<li>可加入Javascript / jQuery 讓網頁有互動性</li>
<li>放上一頁組員個人心得</li>
<li>於最後一周專題網站展示時和同學口頭報告設計理念</li>
</ol>
<p>
<br>參考網站：
<a href="http://cyberfair.taiwanschoolnet.org/history.htm">網界博覽會-歷屆作品</a>
</p>
</div>
</div>
<div id="resource">
<div class="site-content">
<div class="site-title">Resource 資源</div>
<a href="http://www.codecademy.com" target="_blank"><img src="images/codecademy.png" alt="codecademy"></a>
<a href="http://www.w3schools.com" target="_blank"><img src="images/w3schools.png" alt="w3schools"></a>
</div>
</div>
<div id="evaluation">
<div class="site-content">
<div class="site-title">Evaluation 評估</div>
<p>HTML架構 40%</p>
<div class="table-content">
<table>
<tr>
<td></td>
<td>
<p>需要努力</p>
<p>0 ~ 10</p>
</td>
<td>
<p>還不錯唷</p>
<p>11 ~ 20</p>
</td>
<td>
<p>你好優秀</p>
<p>21 ~ 30</p>
</td>
</tr>
<tr>
<td>
<p>內容</p>
<p>20%</p>
</td>
<td>
<ol>
<li>很少符合W3C標準</li>
<li>標籤語意不清，無法辨識內容區塊</li>
</ol>
</td>
<td>
<ol>
<li>部分符合W3C標準</li>
<li>語意尚可，能分辨內容區塊</li>
</ol>
</td>
<td>
<ol>
<li>完全符合W3C標準</li>
<li>語意清晰，能清楚分辨內容區塊</li>
</ol>
</td>
</tr>
<tr>
<td>
<p>組織架構</p>
<p>20%</p>
</td>
<td>
<ol>
<li>欠缺組織架構，內容順序性不佳，資訊查找不易</li>
</ol>
</td>
<td>
<ol>
<li>組織架構尚可，易於閱讀，但部分資訊查找不易</li>
</ol>
</td>
<td>
<ol>
<li>組織架構優美，方便讓人閱讀、查找資訊</li>
</ol>
</td>
</tr>
</table>
</div>
<p>CSS排版設計 60%</p>
<div class="table-content">
<table>
<tr>
<td></td>
<td>
<p>需要努力</p>
<p>0 ~ 10</p>
</td>
<td>
<p>還不錯喔</p>
<p>11 ~ 20</p>
</td>
<td>
<p>你好優秀</p>
<p>21 ~ 30</p>
</td>
</tr>
<tr>
<td>
<p>內容</p>
<p>30%</p>
</td>
<td>
<ol>
<li>很少符合W3C標準</li>
<li>語法繁雜，重複的語法太多</li>
</ol>
</td>
<td>
<ol>
<li>部分符合W3C標準</li>
<li>語法尚可，但還是不夠簡潔優美</li>
</ol>
</td>
<td>
<ol>
<li>完全符合W3C標準</li>
<li>語法簡潔，能清楚分辨每個部份的語法</li>
</ol>
</td>
</tr>
<tr>
<td>
<p>排版設計</p>
<p>30%</p>
</td>
<td>
<ol>
<li>沒有排版，使人不易閱讀</li>
<li>缺乏設計，不太能吸引人閱讀</li>
</ol>
</td>
<td>
<ol>
<li>有排版，閱讀觀感尚可</li>
<li>設計尚可，能吸引部分人閱讀</li>
</ol>
</td>
<td>
<ol>
<li>排版優良，閱讀起來很舒適</li>
<li>設計優美，能吸引大多數人閱讀</li>
</ol>
</td>
</tr>
</table>
</div>
<p>
<span style="font-weight:bold;">額外加分：</span>
<br> JS互動性10%
<br> RWD 5%
</p>
</div>
</div>
<div id="conclusion">
<div class="site-content">
<div class="site-title">Conclusion 結論</div>
<p>
學生透過此學習活動的過程，學習收集統整資料，歸納出自己的看法。
</p>
<p>
進而將理念付諸實行，並設計出一個符合理念的網站。
</p>
<p>
此外，透過小組合作，能培養溝通協調的能力。
</p>
<p>
並且了解一個專案分工的重要性，提早接觸未來工作時會體驗到的過程。
</p>
</div>
</div>
</div>
<footer>
<p>© 2015 Hane Liu in Web Design. Fork me on Github.</p>
</footer>
</body>
</html>