網頁設計筆記

prettyPhoto｜

prettyPhoto是一款基於jQuery的輕量級的lightbox圖片播放瀏覽外掛，它不僅支援圖片，還同時支援視訊、flash、YouTube、iframe和ajax。而且prettyPhoto配置和使用都十分簡單，擴充套件性也不錯，你可以最大限度地自定義prettyPhoto。目前，prettyPhoto相容大部分主流的瀏覽器，包括令人糾結的IE6。

---

參考文章｜ jQuery圖片播放瀏覽外掛 prettyPhoto 使用詳解

prettyPhoto｜ prettyPhoto外掛專案網址

---

OnePage作業範例

範例網址

---

延續上一個單元，本單元說明相簿設定方式，範例中應用了prettyPhoto於作品或相片的分類整理，以分類相簿整理相片，點擊以幻燈效果放大顯示，語法解析如下：

---

index.html

index.html｜workArea相簿區塊｜相簿標題｜相簿分類｜說明



---

workArea相簿區塊｜單張相片設定｜說明

包含：每張照片之分類、欄位設定及相片資訊。
• webdesign為分類
• col-sm-4為分欄大小，目前為三欄
• 請自行設定相簿需要的相片張數，每張照片須儲存兩種尺寸照片，小張為預覽之相簿畫面，大張為放大之幻燈效果，一為顯示大小550x480，一為燈箱照片大小820x620。
• 相片說明需修改為該照片的說明
• class="img-responsive" 響應式圖片，圖片會隨著螢幕大小縮放。



---

workArea相簿區塊｜相簿列表｜示意



---

workArea相簿區塊｜相片幻燈效果｜示意



---

workArea相簿區塊｜HTML完整語法｜圖示

---

style.css

---

style.css ｜ workArea相簿區塊｜CSS設定與修改

在 style.css檔案中，Ctrl+F 搜尋 workArea

• 圖片設定連結後之底色設定：background: #E67E22;(可自行設定新色彩)
• 圖片設定連結後，滑鼠移過後所顯示之底色透明度設定： opacity: 0.2;(可自行調整透明度)
• 其他設定也可設著改變，並觀看效果。

---

地圖設定｜GoogleMap

1. 打開 GoogleMap，搜尋所欲出現地圖的位置（不要設定自家住址，以學校為主）。



---

2. 點選『分享』 按鈕。



---

3. 點選『嵌入地圖』 按鈕，並複製HTML語法，貼至 index.html 放置地圖之適當位置。



---

在 index.html 檔案中，貼上googlemap定位地圖語法，寬度改為100%，可充滿版面寬度，高度可自行調整為適合之高度。

RWD｜OnePage一頁式網頁設計

作業範例網址與檔案下載

1. 範例網址
2. 範例下載

OnePage作業說明

1. 請以個人網站、作品集、自訂有興趣的等主題製作，作品須原創，不可使用他人作品。
2. 需參照上課範例。
3. 需完成之製作項目：
1. 製作『個人圖示favicon』、『LOGO』。
2. 使用『圖示字體(icon font) Font Awesome』。
3. 製作『輪播圖』。
4. 了解『網頁格線概念』，並進行修改。
5. 製作『相簿作品分類』，並進行修改。
6. 製作『表格』，並進行修改。
7. 製作『地圖』，並進行修改。
8. 其他部分請替換文字及圖片修改，可選擇需要的部分即可。
9. 請務必調整為與主題相符的色彩，以及調整字體、粗細等樣式設定，使修改之網站產生全新的風格與面貌，並與設定之網頁屬性相符。
10. 需要連結的部分，請務必補上連結，每個連結都必須有作用。不必要的地方務必刪除，整個網站需無錯誤。
4. 評分標準：
1. 美感性與精緻性（配色、圖片、排版效果、字體調整、整體效果、擺脫原有的感覺、表現獨特風格）。
2. 完整性（符合規定，且連結點選都完整）。
3. 正確性（語法正確，不出錯、連結需完整）。
4. 加分項（內容豐富且完整，超過規定的要求）。
5. 請分別點選作業連結，並回覆 ｜ 北視傳【 OnePage作業 】｜ 竹視傳【 OnePage作業 】｜