跳到主要內容

臺灣博碩士論文加值系統

(216.73.216.176) 您好!臺灣時間:2025/09/08 04:07
字體大小: 字級放大   字級縮小   預設字形  
回查詢結果 :::

詳目顯示

: 
twitterline
研究生:蔡宗廷
研究生(外文):TSUNG-TING TSAI
論文名稱:響應式網站技術應用與實作
論文名稱(外文):Responsive websites design application and research
指導教授:陳偉銘陳偉銘引用關係
指導教授(外文):Wei-ming Chen
口試委員:黃德成沈偉誌
口試委員(外文):Der-chen HuangWei-Chin Shen
口試日期:2019-01-17
學位類別:碩士
校院名稱:國立宜蘭大學
系所名稱:多媒體網路通訊數位學習碩士在職專班
學門:電算機學門
學類:網路學類
論文種類:學術論文
論文出版年:2019
畢業學年度:107
語文別:中文
論文頁數:38
中文關鍵詞:RWD響應式自適應網頁
外文關鍵詞:RWDresponsiveresponsive webpage
相關次數:
  • 被引用被引用:3
  • 點閱點閱:448
  • 評分評分:
  • 下載下載:83
  • 收藏至我的研究室書目清單書目收藏:0
網頁技術發展的時間已經有20個年頭了,還記得十年前第一支智慧型手機的誕生,之後隨著其演進,智慧型手機、平板等各種行動裝置融入我們的生活當中從此改變了我們的生活,人們的生活習慣也受到改變,各式智慧行動裝置已成為我們日常生活當中不可或缺的一環,根據調查每20個人當中,就有18人有在使用行動裝置,不論是搭乘大眾交通運輸,行進路上,甚至於家中,都可以見到使用著行動裝置的人們,而此現象也影響了網路上的設計思維。過去的網頁設計預設對象大多是以一般家用電腦或筆記型電腦的瀏覽者為主,所以在製作網頁時都會以此規格為預計頁面的大小,隨著使用平板電腦及智慧型手機上網的人數增加,傳統網頁設計已經沒有辦法滿足需求,用畫面較小的平板或智慧型手機來瀏覽傳統設計的網頁時,將會因為頁面寬度過寬而導致瀏覽者在瀏覽頁面時的不便利,因此為了滿足手機瀏覽者的需求,一般在進行網站製作時通常會再另外製作「手機版」的網站,以滿足這些族群的需求,但由於手機螢幕較小,且早期大多以Flash等受限於行動裝置運算力不足的限制之下不支援手機顯示的網站元件,而之後更發展出對應智慧型手機系統的APP程式,不過由於行動裝置版的網頁在開發上會面臨到一些技術上的問題,以及一些使用者對於APP的不信任與不適應,而為了要能夠迎接這股時代的趨勢,變促使了發展響應式網頁設計;響應式設計又稱為自適應網頁設計、回應式網頁設計,其全名是(Responsive Web Design)簡稱為RWD,這是一項於2011年發展出的網頁技術,原理是以HTML5的標準及CSS3中的media queries來完成,在HTML5的標準中,我們可以指定頁面的寬度且可以依照裝置的檢視寬度來呈現,再利用CSS3的media queries 來設定不同寬度下使用不同的CSS來呈現頁面。由此就能夠自行配合各種不同大小的裝置進行縮放,以符合裝置最適合的瀏覽大小,而這項技術有許多值得探討的地方,諸如對於網頁開發者來說,使用這項技術又能得到甚麼好,是一項新的商機還是危機?就讓我們透過此篇論文來探討響應式網站技術有哪些應用與實作的範例吧。
The development of web technology has been around for 20 years. I remember the birth of the first smart phone ten years ago. After that, with the evolution of it, smart phones, tablets and other mobile devices have been transformed into our lives. Life, people's living habits have also been changed, and various smart mobile devices have become an indispensable part of our daily lives. According to the survey, 18 out of every 20 people use mobile devices, whether they are taking public transportation. Transport, travel, and even home, you can see people using mobile devices, and this phenomenon also affects the design thinking on the Internet. In the past, most of the default web design objects were based on the viewers of ordinary home computers or notebook computers. Therefore, the size of the expected page will be used in the production of web pages, and the number of people using the tablet and smart phones to access the Internet. Adding, traditional web design has no way to meet the demand. When browsing a traditionally designed webpage with a small tablet or smart phone, the page width will be too wide, which will cause the viewer to be inconvenient when browsing the page. In order to meet the needs of mobile phone viewers, the "mobile version" website is usually created separately to meet the needs of these groups, but the mobile phone screen is small, and most of the early days are limited by mobile devices such as Flash. Under the limitation of insufficient computing power, the website components of the mobile phone display are not supported, and then the APP program corresponding to the smart phone system is developed, but the webpage of the mobile device version faces some technical problems, and some Users don't trust and adapt to APP, but in order to be able to meet the trend of this era The change has prompted the development of responsive web design; responsive design, also known as responsive web design, responsive web design, its full name is (Responsive Web Design) referred to as RWD, which is a web page developed in 2011. The principle of technology is based on HTML5 standards and media queries in CSS3. In the HTML5 standard, we can specify the width of the page and can be rendered according to the width of the device's view. Then use CSS3 media queries to set different widths. Use different CSS to render the page. This allows you to scale with a variety of different sized devices to match the device's optimal viewing size, and there are many areas worth exploring in this technology, such as what can be obtained for web developers using this technology. Ok, is it a new business opportunity or a crisis? Let us use this paper to explore examples of the application and implementation of responsive website technology.
摘要 I
Abstract II
目錄 III
表目錄 V
圖目錄 VI
第一章 緒論 1
1.1 研究背景 1
1.2 研究動機 2
1.3 研究目的 2
1.4 研究架構與流程 3
第二章 文獻探討 5
2.1 網頁技術發展的類型 5
2.1.1 使用傳統Html搭配Table網頁設計排版 5
2.1.2 使用Flash動態網頁設計 5
2.1.3 使用優化型CSS+DIV網頁設計排版優化型CSS+DIV網頁設計排版 5
2.1.4 JS動態網頁設計 6
2.1.5 手機版網頁設計 6
2.1.6 HTML5+CSS3網頁設計 7
2.1.7 RWD Responsive Web Design 響應式網頁設計 8
2.1.8 Bootstrap 9
2.2 Web1.0、2.0、3.0 10
2.2.1 Web1.0 10
2.2.2 Web2.0 11
2.2.3 Web3.0 12
2.3 行動裝置網頁發展應用 12
2.3.1 viewport解放了網頁寬度 12
2.3.2 行動裝置用網頁與支援行動裝置網頁 13
第三章 研究方法 16
3.1 研究架構 16
3.2 研究流程 17
3.3 研究工具 18
3.3.1 ASUS筆記型電腦 19
3.3.2 紅米5智慧型手機 19
3.3.3 Webnode網站架設系統 20
3.4 系統開發 21
3.4.1 系統架構 21
3.4.2 功能設計 22
第四章 實作結果分析 23
4.1 實驗環境 23
4.2 開發與執行畫面 24
4.2.1 系統開發功能 24
4.2.2 系統執行畫面 25
第五章 結論與未來展望 35
5.1 結論 35
5.2 未來展望與建議 37
參考文獻 38
1.馬路科技網頁設計公司 QA-網頁設計的建議頁面寬度為何。
https://www.iware.com.tw/qa-%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E7%9A%84%E5%BB%BA%E8%AD%B0%E9%A0%81%E9%9D%A2%E5%AF%AC%E5%BA%A6%E7%82%BA%E4%BD%95%EF%BC%9F.html
2.李振宏。「智慧型行動裝置變革之探討-以作業系統iOS及Android為例」。碩士論文,世新大學傳播管理學研究所(含碩專班) 2012。https://hdl.handle.net/11296/v39xnp。
3.維基百科-Html5
https://zh.wikipedia.org/wiki/HTML5
4.梅問題教學網-Html5 Drag&Drop拖拉上傳檔案
https://www.minwt.com/webdesign-dev/html/3655.html
5.維基百科-網景通訊
https://zh.wikipedia.org/wiki/%E7%B6%B2%E6%99%AF
6.搜狐-互聯網黃頁
http://www.sohu.com/a/3596565_116138
7.維基百科-web2.0
https://zh.wikipedia.org/wiki/Web_2.0
8.維基百科-Less(層疊樣式表)
https://zh.wikipedia.org/wiki/Less_(%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8)
9.行動裝置網頁(Mobile Web)的發展(科普)
https://blog.gasolin.idv.tw/2016/10/06/how-mobile-web-works/

QRCODE
 
 
 
 
 
                                                                                                                                                                                                                                                                                                                                                                                                               
第一頁 上一頁 下一頁 最後一頁 top