全球資訊網技術 Web Technologies

全球資訊網技術Web Technologies Student: Cheng-Chin Tsao Professor: Cheng-JyeLuh Project :Nangang Introduction Date: 2014/04/22

Outline • Web Framework(Menu) • Fluid Layouts • Media Query • Responsive Image • Content

Web Framework

Fluid Layouts(1 / 3) • 1232~769px

Fluid Layouts(2 / 3) • 768~481px

Fluid Layouts(3 / 3) • 480px以下

Media Query(1 / 3) • 1232~769px

Media Query(2 / 3) • 768~481px(Acer Android A110)

Media Query(3 / 3) • 480px以下(PadFone T008)

Responsive image(1 / 3) • 1232~769px

Responsive image(2 / 3) • 768~481px

Responsive image(3 / 3) • 480px以下

Content(1 / 6) • 內容 • 介紹南港的區花(桂花)&常見的蕨類 • 介紹南港具有代表性的5大景點 • 更寮古道、南港公園、南港埤塘、台北找茶園、大坑溪 • 介紹在南港舉辦的代表性的活動 • 更寮百合復育、南港桂花節、四分溪淨溪、茶文化探源、埤塘文化祭 • 功能 • Fluid Layouts • Media Query • Responsive Image • Google Map • Add Video

Content(2 / 6) • 內容-首頁 • 點選導覽列可連結網站所有網頁項目。 • 最上層的區塊呈現南港區地圖(電腦&平板)。 • 中間區塊輪播本網站會介紹到的相關景點照片。 • 下方區塊呈現跟南港有關的相關網站連結。

Content(3 / 6) • 內容-南港花草(南港桂花) • 點選導覽列可連結網站所有網頁項目。 • 最上層的區塊介紹南港區花。 • 第2區塊介紹跟桂花相關的景點和活動簡介。 • 第3區塊呈現跟南港區花有關的照片。 • 最下層區塊呈現本網頁參考的相關網站連結(點選即可連結到該網站)。

Content(4 / 6) • 內容-南港花草(常見蕨類) • 點選導覽列可連結網站所有網頁項目。 • 最上層的區塊輪播六大科別蕨類。 • 中間區塊介紹跟6大常見蕨類簡介(電腦&平板)。 • 最下層區塊呈現本網頁參考的書籍。

Content(5 / 6) • 內容-景點介紹(ex:南港公園) • 點選導覽列可連結網站所有網頁項目。 • 最上層的區塊運用google map呈現南港公園位置。 • 第2區塊呈現該景點的相關導覽圖(電腦&平板)。 • 第3&4區塊做該景點的相關介紹跟相關照片。 • 最下層區塊呈現本網頁參考的相關網站連結(點選即可連結到該網站)。

Content(6 / 6) • 內容-活動專區(ex:南港桂花節) • 點選導覽列可連結網站所有網頁項目。 • 最上層的區塊呈現舉辦該活動的相關介紹。 • 第2&3區塊呈現該景點的相關影片&輪播活動相關照片。 • 最下層區塊呈現本網頁參考的書籍或相關網站連結(點選即可連結到該網站)。

Thank for your listening!

全球資訊網技術 Web Technologies