本書有DRM加密保護,需使用HyRead閱讀軟體開啟
  • HTML5、CSS3、RWD、 jQuery Mobile跨裝置網頁設計:掌握建立電腦&行動網站的關鍵技術
  • 點閱:793
  • 作者: 陳惠貞著
  • 出版社:碁峰資訊
  • 出版年:2015[民104]
  • ISBN:978-986-347-739-6 ; 986-347-739-7
  • 格式:PDF
  • 附註:原紙本書ISBN: 978-986-347-655-9

內容簡介

*徹底學會HTML5和CSS3的最新功能與設計技巧
*Responsive Web Design(RWD)讓網頁同時在PC/平板/手機完整呈現
*使用jQuery Mobile打造行動裝置專用網站

隨著無線上網的蓬勃發展,網站推出「行動版」已成為時勢所趨,然而市面上有數種不同的行動平台,例如Android、iOS、Windows等,即便是相同平台,也有不同品牌、不同尺寸的裝置,總不能針對各個裝置推出專屬的網站吧?!顯然我們需要一個跨平台、跨裝置的解決方案,讓網站在不同的裝置上顯示,而本書

正是為了此目標所撰寫,主要內容如下:
*HTML5:介紹HTML5元素和各種表單輸入類型,包括表單的後端處理。
*CSS3:CSS3的字型、文字、清單、色彩、背景、漸層、表格、陰影、邊界、留白、框線、多欄位排版、2D/3D變形處理、媒體查詢等屬性,尤其是透過媒體查詢功能,依據PC或行動裝置的特徵設計網頁樣式。

*Responsive Web Design (RWD):RWD會根據瀏覽器環境 (例如螢幕的寬度、解析度、長寬比、方向等),自動調整網頁的版面配置,只要設計單一版本的網頁,就能完整顯示在PC、平板電腦、智慧型手機等裝置,達到One Web One URL的目標。

*jQuery Mobile:使用jQuery Mobile打造行動裝置專用網站,將跨平台、跨裝置所面臨的相容性問題交給jQuery Mobile處理。

  • Part 1 HTML5 篇(第1-1頁)
    • 第1章 網頁設計簡介(第1-1頁)
    • 第2章 文件結構(第2-1頁)
    • 第3章 資料編輯與格式化(第3-1頁)
    • 第4章 超連結與圖片(第4-1頁)
    • 第5章 表格(第5-1頁)
    • 第6章 影音多媒體(第6-1頁)
    • 第7章 表單與後端處理(第7-1頁)
  • Part 2 CSS3 篇(第8-1頁)
    • 第8章 CSS 基本語法(第8-1頁)
    • 第9章 文字與清單屬性(第9-1頁)
    • 第10章 色彩、背景與漸層屬性(第10-1頁)
    • 第11章 Box Model 與定位方式(第11-1頁)
    • 第12章 表格屬性(第12-1頁)
    • 第13章 特殊效果與媒體查詢(第13-1頁)
  • Part 3 行動版網頁設計篇(第14-1頁)
    • 第14章 回應式網頁設計(第14-1頁)
    • 第15章 行動版網頁的實用技巧(第15-1頁)
    • 第16 章 使用jQuery Mobile開發行動網頁(第16-1頁)
    • 第17章 jQuery Mobile UI 元件(第17-1頁)
  • 附錄 附錄A HTML 框架元素(第A-1頁)
    • A-1 建立框架- 、、 元素(第A-2頁)</li><li>A-2 包含水平框架與垂直框架的網頁(第A-17頁)</li><li>A-3 嵌入浮動框架- <iframe> 元素(第A-20頁)</li><li>A-4 製作導覽列(第A-22頁)</li></ul></li> <div id="jumpChapter" class="collapse fade"> </div> <div class="more_wrap"> <button type="button" class="btn btn-light moreBtn collapsed" data-toggle="collapse" data-target="#jumpChapter"><i class="icon icon-arrow-top-01"></i></button> </div> </ul> </div> </div> </div> </div> </div> </div> </div> <!-- [E] 簡介、章節、作者簡介 Tab --> <!-- End 中間欄位區塊 --> <!-- 右側欄位區塊 --> <div class="col-sm-5 col-md-4 col-lg-3 d-none d-sm-block"> <div class="right_side_info ml-md-0 ml-xl-4"> <div class="card border-0 bg-light mb-3"> <div class="card-body"> <div class="card-text book_price_group"> <div class="book_paper_price">紙本書 NT$ 540</div> <div class="text1 bold">單本電子書</div> <div class="book_price"> <span class="text2 ft-azure bold h5">NT$</span> <span class="price ft-azure bold h5">378</span> <span class="coin ft-azure small"> </span> </div> </div> <!--直接購買--> <div class="card-text"> <button type="button" id="buynow" class="btn btn-lg btn-outline-primary custom_blue_outline_style btn-block" brn="76117" onclick="detailPageAddSpCart(true, this)"> <i class="icon icon-indicator"></i>直接購買 </button> </div> <!--放入購物車--> <div class="card-text"> <button type="button" id="addtocart" class="btn btn-lg btn-primary btn-block custom_blue_outline_style " brn="76117" onclick="detailPageAddSpCart(false, this)"> <i class="icon icon-indicator-add"></i>放入購物車 </button> </div> <!--買書送人--> <hr> <div class="card-text"> <button type="button" id="buyasgift" class="btn btn-lg btn-outline-primary custom_deep_seablue_outline_style btn-block" brn="76117" onclick="detailPageAddSpCart(true, this)">買書送人</button> </div> </div> </div> <!--右邊套書按鈕--> <!--右邊活動--> <!-- <div class="book_promo_info mb-3"> <span class="badge badge-pill badge-danger mr-0 mb-2 mb-lg-2 px-2 promo_info_text d-block">20周年慶/最HOT新書三本75折</span> <span class="badge badge-pill badge-danger mr-0 mb-2 mb-lg-2 px-2 promo_info_text d-block">HyRead選書~任選2本,現折30元!</span> </div> --> <!--右邊神秘的作家專欄--> <!-- <div class="writer_column card bg-light"> <div class="card-body"> <div class="card-text book-badge"> <span class="badge badge-dark ">作家專欄</span> </div> <div class="card-text ft-azure bold">看見你所聽的,聽見你所想的──五月選書《蜜蜂與遠雷》 </div> <div class="card-text ps_note_text"> 文/林小滿 2018年05月03日 </div> <div class="card-text small-sm"> 蜜蜂與遠雷 每個人選擇讀/不讀某一本書的原因有很多,但「不懂音樂」絕對不足以成為放下《蜜蜂與遠雷》的理由──它並非 <a href="javascript:;" class="ft-azure">more</a> </div> </div> </div> --> </div> </div> <!-- End 右側欄位區塊 --> </div> </div> </div> </section> <style> a.anchor { display: block; position: relative; top: -120px; visibility: hidden; } </style> <a class="anchor" id="cpSetOfBook"></a> <!-- 為您推薦 --> <section class=""> <div class="container-fluid free_book pb-5"> <div class="container-1280"> <div class="titleBar py-3 py-md-4 d-flex justify-content-between"> <div class="blkTitle h5">同分類熱門書</div> </div> </div> <div class="container-1320"> <div class="row"> <div class="swiper-container" data-inner-slider> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=136352" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=136352" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/136352978986434208220184923010143.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=136352">Python程式設計入門:金融商管實務案例</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=145675" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=145675" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/145675978986476713720180404050531.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>JPG</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=145675">鳥哥的Linux基礎學習訓練教材</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=120290" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=120290" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/120290978986434165820174119080730.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=120290">Python新手使用Django架站的16堂課:活用Django Web Framework快速建構動態網站</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=13467" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=13467" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/13467978986276144120125524041242.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=13467">簡單X簡報:化繁為簡的簡報藝術</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=60026" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=60026" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/60026978986565006320153925080340.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=60026">管理信息系統實驗</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=45305" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=45305" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/45305978986347021220142704110304.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=45305">跨裝置網頁設計:HTML 5、CSS 3、JavaScript、jQuery Mobile快速建立電腦&行動網站</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=16640" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=16640" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/1664020123403110912.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><i class="icon icon-cover-voice"></i></span> <span class="btn btn-dark"><small>PDF</small></span> <span class="btn btn-dark"><small>EPUB</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=16640">大師輕鬆讀 2012/09/05 [第455期] [有聲書]:行動浪潮 : 看行動智慧如何顛覆整個世界</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=26279" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=26279" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/26279978986655183320132625110639.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=26279">Java網路程式與資料傳遞</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=27059" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=27059" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/27059978986276677420134913110353.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=27059">HTML 5&CSS 3網頁程式設計</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=51472" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=51472" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/51472986591551020142813090623.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=51472">淘寶網入門密技</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=88392" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=88392" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/88392978957224456220165115110358.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=88392">Java 8入門進階</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=54754" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=54754" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/54754978986568743420143407040835.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=54754">AfterEffects CC電影特效大師</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=116653" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=116653" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/116653978986476235420175101050648.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=116653">讓響應式(RWD)網頁設計變簡單:Bootstrap開發速成</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=101322" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=101322" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/101322978957224565120161427011010.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=101322">實戰PHP7+MySQL:從0開始寫出自己想要寫的程式</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=144074" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=144074" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/144074978986136507720182602050427.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>EPUB</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=144074">超越地表最強小編!社群創業時代:FB+IG經營這本就夠, 百萬網紅的實戰筆記</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=58801" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=58801" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/58801978986347243820144415021004.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=58801">3D印表機自造全書:初學就可以動手裝</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=19869" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=19869" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/19869978986257378520121224041243.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=19869">丙級建築製圖應用:電腦繪圖</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="/service/ebookService.jsp?act=storeTrial&BRN=14779" target='_blank' class="btn buyBtn d-none d-lg-inline-block" ><i class="icon icon-zoom_out1"></i>試閱</a> </div> <a href="/bookDetail.jsp?id=14779" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/14779978986201412720121517050808.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=14779">網路程式設計初學指引:使用Java</a></div> </div> </div> </div> <!-- Add Arrows --> <button class="swiper-button-next"></button> <button class="swiper-button-prev"></button> </div> </div> </div> </div> </section> <!-- End 為您推薦 --> </div> </div> </div> <!-- APP Promo Banner --> <div class="row container-fluid bg-light border-top no-gutters align-items-center py-4"> <div class="col col-md-12 col-lg-3 ml-3 ml-xl-auto appPromoSlogon"> <a href="https://goo.gl/myZzoD" target="_blank" class="py-3" title="還沒安裝 HyRead 3 嗎?馬上免費安裝~"> <img src="/Template/store/images/footer-logo-pc.png" class="footer_logo img-fluid py-3" alt="HyRead"> <span class="rightnow d-block d-sm-inline-block text-dark">還沒安裝 HyRead 3 嗎?馬上免費安裝~</span> </a> </div> <div class="col col-md col-lg-auto mr-1 mr-xl-auto appPromoStoreLink justify-content-sm-center d-none d-md-block"> <a href="https://goo.gl/1ZkUJb" target="_blank" class="p-1"><img src="/Template/store/images/appstore.svg" class="img-fluid" alt="App Store"></a> <a href="https://goo.gl/WNmstc" target="_blank" class="p-1"><img src="/Template/store/images/googleplay.svg" class="img-fluid" alt="Google Play"></a> <a href="https://goo.gl/kGEflg" target="_blank" class="p-1"><img src="/Template/store/images/windowsstore.svg" class="img-fluid" alt="Windows Store"></a> <a href="javascript:;" class="p-1" data-toggle="modal" data-target="#pcdownloadModal"><img src="/Template/store/images/pc.svg" class="img-fluid" alt="pc download"></a> </div> <div class="col col-lg-1 mr-xl-auto d-none d-xl-block"><img src="/Template/store/images/app_qrcode.svg" class="img-fluid qr_code " alt="QR Code"></div> </div> <!-- APP Promo Banner --> <!--========== FOOTER ==========--> <footer class="footer"> <!-- PC/Mobile sitemap footer --> <div class="container-fluid"> <div class="container-1280 px-md-3 mx-xl-auto" id="pcMobileFooter"> <div class="row no-gutters"> <!-- PC sitemap --> <ul class="col footer_link_list d-none d-lg-block"> <li class="title">關於HyRead</li> <!--熱門活動--> <!-- <li><a href="javascript:;" class="footer_link" title="熱門活動">熱門活動</a></li> --> <li><a href="/Template/store/serviceRule.html" target="_blank" class="footer_link" title="服務政策">服務政策</a></li> <li><a href="/Template/store/privacy.html" target="_blank" class="footer_link" title="隱私權政策">隱私權政策</a></li> </ul> <ul class="col footer_link_list d-none d-lg-block"> <li class="title">會員服務</li> <li><a href="javascript:;" class="footer_link" title="免費註冊" data-toggle="modal" data-target="#registerMemberModal">免費註冊</a></li> <li><a href="javascript:;" class="footer_link" title="忘記密碼" data-toggle="modal" data-target="#forgotPasswordModal">忘記密碼</a></li> <li><a href="https://hyweb.zendesk.com/hc/zh-tw/categories/200041446" target="_blank" class="footer_link" title="常見問題">常見問題</a></li> </ul> <ul class="col footer_link_list d-none d-lg-block"> <li class="title">合作提案</li> <li><a href="https://ebook.hyread.com.tw/activity/cooperation.html" target="_blank" class="footer_link" title="出版社合作">出版社合作</a></li> <li><a href="http://hyweb.ebook.hyread.com.tw/resource/features.html" target="_blank" class="footer_link" title="團體採購優惠">團體採購優惠</a></li> </ul> <ul class="col footer_link_list d-none d-lg-block"> <li class="title">聯絡客服</li> <li><span class="plain_text">客服時間:週一~五9:00~18:30</span></li> <li><span class="plain_text">客服專線:02-2395-6966*2555</span></li> <li><span class="plain_text"><a href="mailto:service@hyread.com.tw">Email:service@hyread.com.tw</a></span></li> <li><span class="plain_text">100台北市中正區重慶南路二段51號5樓(台北分公司)</span></li> </ul> <!-- PC sitemap --> <!-- Mobile sitemap --> <div class="container-fluid d-block d-lg-none" id="MobileSiteMap"> <ul class="footer_link_list d-block d-lg-none mb-0 d-flex align-content-start flex-wrap"> <li class="col-4 px-0"><a href="/Template/store/serviceRule.html" target="_blank" class="footer_link" title="服務政策">服務政策</a></li> <li class="col-4 px-0"><a href="/Template/store/privacy.html" target="_blank" class="footer_link" title="隱私權政策">隱私權政策</a></li> <!--熱門活動--> <!-- <li class="col-4 px-0"><a href="javascript:;" class="footer_link" title="熱門活動">熱門活動</a></li> --> </ul> <div class="collapse" id="mobileFooterSitemap"> <ul class="footer_link_list d-block d-lg-none d-flex align-content-start flex-wrap"> <li class="col-4 px-0"><a href="javascript:;" class="footer_link" title="免費註冊" data-toggle="modal" data-target="#registerMemberModal">免費註冊</a></li> <li class="col-4 px-0"><a href="javascript:;" class="footer_link" title="忘記密碼" data-toggle="modal" data-target="#forgotPasswordModal">忘記密碼</a></li> <li class="col-4 px-0"><a href="https://hyweb.zendesk.com/hc/zh-tw/categories/200041446" target="_blank" class="footer_link" title="常見問題">常見問題</a></li> <li class="col-4 px-0"><a href="https://ebook.hyread.com.tw/activity/cooperation.html" target="_blank" class="footer_link" title="出版社合作">出版社合作</a></li> <li class="col-4 px-0"><a href="http://hyweb.ebook.hyread.com.tw/resource/features.html" target="_blank" class="footer_link" title="團體採購優惠">團體採購優惠</a></li> </ul> </div> <div class="justify-content-center text-center"> <a href="#mobileFooterSitemap" data-toggle="collapse" class="btn mobileFooterSitemapBtn"> <i class="footer_sitemap_open icon-arrow-down-01 pr-2" aria-hidden="true"></i> <i class="footer_sitemap_close icon-arrow-top-01 pr-2" aria-hidden="true" style="display:none"></i> </a> </div> </div> <!-- Mobile sitemap --> <div class="w-100 d-flex d-lg-none sep_line"></div> <!-- PC/Mobile social btn --> <ul class="col footer_link_list rounded-btn text-center text-lg-left my-1 social_btn_group"> <li class="title d-none d-lg-flex text-center text-lg-left">社群動態</li> <li class="mt-2 mt-lg-2 text-center text-lg-left"> <a href="https://www.facebook.com/hyread.ebook" target="_blank" class="footer_link mr-2 mr-xl-3" title="Facebook"><i class="icon-facebook pr-2" aria-hidden="true"></i></a> <a href="https://www.youtube.com/channel/UC_nWrFmNhashbV8hi8EUqtw" target="_blank" class="footer_link mr-2 mr-xl-3" title="Youtube"><i class="icon-youtube pr-2" aria-hidden="true"></i></a> <a href="https://line.me/R/ti/p/%40zrv5224k" target="_blank" class="footer_link mr-0 mr-xl-3" title="Line"><i class="icon-line-square pr-2" aria-hidden="true"></i></a> </li> </ul> <!-- PC/Mobile social btn --> <div class="w-100 d-flex d-lg-none"></div> <!-- Mobile lang/coin menu btn --> <div class="col d-block d-lg-none text-center text-lg-right py-4 py-lg-0"> <div class="dropdown"> <a href="javascript:;" class="langDropdownMenu btnStyle" data-toggle="modal" data-target="#langcoinMenuModal"><span class=""><i class="fa fa-globe pr-2" aria-hidden="true"></i>正體中文</span><span class="px-1">|</span><span class="">NT$ TWD</span></a> </div> </div> <!-- Mobile lang/coin menu btn --> <!-- PC go to top btn --> <a href="javascript:topFunction();" class="js-back-to-top d-none d-lg-block"><i class=" icon-chevron-with-circle-up" aria-hidden="true"></i></a> <!-- PC go to top btn --> </div> </div> </div> <!-- PC/Mobile sitemap footer --> <!-- PC footer credit & lang/coin menu --> <div class="container-fluid"> <div class="container-1280 mx-xl-auto" id="pcFooterCredit"> <div class="row py-4 align-items-center"> <div class="col-12 col-lg-8 py-2 text-center text-lg-left"> 凌網科技股份有限公司<br class="d-block d-lg-none">Copyright&copy; 2019 hyread <em > IP=3.231.228.109(71) </em> </div> </div> </div> </div> <!-- PC footer credit & lang/coin menu --> </footer> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-TVTP73V');</script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TVTP73V" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <!--========== END FOOTER ==========--> <script> $().ready(function(){ var rdurl = 'https://ebook.hyread.com.tw/bookDetail.jsp?id=76117'; var isExistPara = true; $('#mobileForm1 input[type=radio][name=lang]').change(function() { //location.href='/index.jsp?webpacLang='+$('input[type=radio][name=lang]:checked','#mobileForm1').val(); if(isExistPara){ rdurl += "&"; }else{ rdurl += "?"; } rdurl += "webpacLang=" + $('input[type=radio][name=lang]:checked','#mobileForm1').val(); location.href = rdurl; }); $('#mobileForm2 input[type=radio][name=coin]').change(function() { $.ajax({ url: '/Template/store/ajax/setCookie.jsp', type: 'GET', async: false, cache: false, data: { coin: $('input[type=radio][name=coin]:checked','#mobileForm2').val() }, error: function(xhr) { alert('Ajax request 發生錯誤'); }, success: function(data) { },complete : function () { location.reload(); } }); }); }) </script> <!-- language/coin Modal --> <div class="modal fade" id="langcoinMenuModal" tabindex="-1" role="dialog" aria-labelledby="langcoinMenuModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="dropdown-menu langcoin_style shadow show lightbox_style"> <!-- 更換語言/幣別 表單 --> <h6 class="dropdown-header px-3 text-center">更換語言/幣別</h6> <div class="dropdown-divider"></div> <form id='mobileForm1' class="px-1 py-1"> <div class="container-fluid lang-selector"> <div class="row"> <div class="col-12"> <input type="text" readonly class="form-control-plaintext" id="staticText" value="選擇語言:"> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="zh_TW" class="custom-control-input" name="langSelectorModal" id="langSelectorModal1" checked=''> <label class="custom-control-label" for="langSelectorModal1"> 正體中文</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="zh_CN" class="custom-control-input" name="langSelectorModal" id="langSelectorModal2"> <label class="custom-control-label" for="langSelectorModal2">簡體中文 </label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="en_US" class="custom-control-input" name="langSelectorModal" id="langSelectorModal3"> <label class="custom-control-label" for="langSelectorModal3">English</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="ja_JP" class="custom-control-input" name="langSelectorModal" id="langSelectorModal4"> <label class="custom-control-label" for="langSelectorModal4"> 日本語</label> </div> </div> <!-- <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="in_ID" class="custom-control-input" name="langSelectorModal" id="langSelectorModal5"> <label class="custom-control-label" for="langSelectorModal5">Indonesia</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="ms_MY" class="custom-control-input" name="langSelectorModal" id="langSelectorModal6"> <label class="custom-control-label" for="langSelectorModal6">Malay</label> </div> </div> --> </div> </div> </form> <div class="dropdown-divider"></div> <form id="mobileForm2" class="px-1 py-1"> <div class="container-fluid coin-selector"> <div class="row"> <div class="col-12"> <input type="text" readonly class="form-control-plaintext" id="staticText" value="選擇幣別:"> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="TWD" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal1" checked> <label class="custom-control-label" for="coinSelectorModal1">TWD(NT$)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="HKD" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal2"> <label class="custom-control-label" for="coinSelectorModal2">HKD(HK$)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="USD" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal3"> <label class="custom-control-label" for="coinSelectorModal3">USD($)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="CNY" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal4"> <label class="custom-control-label" for="coinSelectorModal4">CNY(¥)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="JPY" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal5"> <label class="custom-control-label" for="coinSelectorModal5">JPY(¥)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="THB" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal6"> <label class="custom-control-label" for="coinSelectorModal6">THB(฿)</label> </div> </div> </div> </div> </form> <!-- 更換語言/幣別 表單 --> </div> </div> </div> </div> <!-- language/coin Modal --> <!-- Mobile side navbar menu --> <nav id="mobileSideMenu"> <ul> <li> <a href="javascript:;" data-toggle="modal" data-target="#langcoinMenuModal">更換語言/幣別</a> </li> <li> <a href="/Template/store/shoppingcart/point/buyPoint.jsp">還沒有點數嗎?<span class="ft-yellow">立即儲值</span><br/> 就送你紅利點數,最高500點。</a> </li> <li><span>電子書</span> <ul> <li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=D0307*&theme=人際溝通&target=lib&pagesize=30&viewtype=2">說進心坎裡</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=J0208*&theme=&op=AND&search_field=BSU&search_input=J0208&theme=&op=AND&search_field=L&search_input=CHI&sortinfo=&EPUB=1">拉近關係秘笈</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=B*&theme=文學&op=AND&search_field=BSU&search_input=B0104&theme=文學&pagesize=30&sortinfo=&viewtype=2">翻譯文學誌</a></li><li><a href="/searchList.jsp?search_input=收納&search_field=FullText&op=OR&search_input=整理術&search_field=FullText&op=OR&search_input=不整理&search_field=FullText">收納整理術</a></li><li><a href="/searchList.jsp?search_field=BSU&search_input=B0312*">短而有力度</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=C0102*&theme=日文學習&pagesize=30&sortinfo=&viewtype=2">日文好流利</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=D*&theme=財經&op=AND&search_field=BSU&search_input=D0205&theme=財經&pagesize=30&sortinfo=&viewtype=2">行銷大數據</a></li><li><a href="/searchList.jsp?search_input=囤積&search_field=FullText&op=OR&search_input=零雜物&search_field=FullText&op=OR&search_input=簡單生活&search_field=FullText&op=OR&search_input=簡樸生活&search_field=FullText">簡單零雜物</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=J0211*&theme=&sortinfo=">眼睛流口水</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=D0101*&theme=國際市場趨勢&pagesize=30&sortinfo=&viewtype=2">掌握趨勢者</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=D0103*&theme=&sortinfo=">賺錢要做功課</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=I*&theme=藝術&op=AND&search_field=BSU&search_input=I0105&theme=藝術&pagesize=30&sortinfo=&viewtype=2">戲劇電影迷</a></li><li><a href="/searchList.jsp?search_field=BSU&search_input=H0106*&theme=銀髮族照護&sortinfo=rank%2C1&sortinfo=rank%2C1&op=AND&search_field=BSU&search_input=H0106">我來照顧你</a></li> <li><a href="/Template/store/category_list.jsp">瀏覽電子書所有分類</a></li> </ul> </li> <li><span>雜誌</span> <ul> <li><a href="/Template/store/magazineList.jsp?cate=M02">財經商管</a></li><li><a href="/Template/store/magazineList.jsp?cate=M01">新聞新知</a></li><li><a href="/Template/store/magazineList.jsp?cate=M03">數位資訊</a></li><li><a href="/Template/store/magazineList.jsp?cate=M04">語言學習</a></li><li><a href="/Template/store/magazineList.jsp?cate=M05">親子教育</a></li><li><a href="/Template/store/magazineList.jsp?cate=M06">生活居家</a></li><li><a href="/Template/store/magazineList.jsp?cate=M07">旅遊行腳</a></li><li><a href="/Template/store/magazineList.jsp?cate=M08">時尚風格</a></li><li><a href="/Template/store/magazineList.jsp?cate=M09">影視娛樂</a></li><li><a href="/Template/store/magazineList.jsp?cate=M10">知識專業</a></li><li><a href="/Template/store/magazineList.jsp?cate=M11">人文藝術</a></li><li><a href="/Template/store/magazineList.jsp?cate=M12">休閒運動</a></li> </ul> </li> <li><span>即時排行</span> <ul> <li><a href="/Template/store/bestSelling.jsp">暢銷排行</a></li> <li><a href="/Template/store/rentalRating.jsp">租書排行</a></li> <li><a href="/Template/store/magazineRating.jsp">雜誌排行</a></li> <li><a href="/Template/store/trialRating.jsp">試閱排行</a></li> </ul> </li> <!-- 最新上架 --> <li><span>最新上架</span> <ul> <li><a href="/Template/store/newbooks.jsp">熱門新書</a></li> <li><a href="/Template/store/magazineList.jsp">新刊上架</a></li> </ul> </li> <!-- [S] 熱門活動 --> <li><span>熱門活動</span> <ul> <li><a href="/Template/store/eventPage.jsp?id=304">心生.慾 / 詩歌節</a></li> <li><a href="/Template/store/eventPage.jsp?id=306">心.發聲 / 詩歌節</a></li> <li><a href="/Template/store/eventPage.jsp?id=234">父母教養TOP100</a></li> <li><a href="/Template/store/eventPage.jsp?id=299">中小學讀物-自然科普&叢書工具書類</a></li> <li><a href="/Template/store/eventPage.jsp?id=297">中小學讀物-人文社科類</a></li> <li><a href="/Template/store/eventPage.jsp?id=305">心牆 / 詩歌節</a></li> <li><a href="/Template/store/eventPage.jsp?id=302">西洋文學享宴</a></li> <li><a href="/Template/store/eventPage.jsp?id=303">詩歌節推薦 / 詩歌節</a></li> <li><a href="/Template/store/eventPage.jsp?id=258">職場英語一把罩</a></li> <li><a href="/Template/store/eventPage.jsp?id=307">10月新書優惠</a></li> </ul> </li> <!-- [E] 熱門活動 --> <li><a href="/Template/store/article.jsp">小編文摘</a></li> <li><a href="https://ebook.hyread.com.tw/activity/201902gaze/index.html">Gaze閱讀器</a></li> <li><a href="/Template/store/freeBooks.jsp">免費好書</a></li> <li><a href="javascript:alertLogin();">兌換專區</a></li> </ul> </nav> <!-- Mobile side navbar menu --> <!-- 使用HyRead帳號登入 Modal --> <div class="modal fade hyread_type frame_login" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row"> <div class="col px-0"> <img src="/Template/store/images/hyread-logo-no-text.png" class="img-fluid" alt="Small Logo"></div> <div class="col-9 col-md-9 pl-0 pl-md-5 pr-0 align-self-center"> <h5 class="modal-title">使用HyRead帳號登入</h5> </div> <div class="col-1 col-md-2 align-self-center"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <hr class="mb-0 d-block d-md-none"/> <div class="modal-body pb-3 pb-md-5"> <div class="container-fluid"> <div class="row d-block"> <form name="loginForm" action="/SSO/storeLogin.jsp" method="post"> <input type="hidden" name="loginmethod" value="hyread"> <div class="anim_form_control mt-4"> <input type="text" id="inputName" name="account2" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputName">請輸入帳號</label> </div> <div class="anim_form_control mt-4"> <input type="password" id="inputPassword" name="passwd2" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputPassword">請輸入密碼</label> </div> </form> </div> <div class="row mt-4"> <button type="button" data-dismiss="modal" class="btn btn-primary custom_blue_solid_style w-100 py-2" onclick="login();" >登入</button> </div> <div class="row mt-3"> <div class="col px-0 suggest_login"> 還沒有帳號? <br class="d-inline d-md-none"/> <a href='javascript:;' data-toggle="modal" data-target="#registerMemberModal" class="ft-deepseablue" data-dismiss="modal" title="立即免費註冊">立即免費註冊</a> </div> <div class="col-4 col-md-3 px-0 text-right forgot_password"> <a href='javascript:;' data-toggle="modal" data-target="#forgotPasswordModal" class="ft-warm-grey" data-dismiss="modal" title="忘記密碼">忘記密碼</a> </div> </div> <div class="row mt-3"> <div class="col px-0 ft-warm-grey login_note"> HyRead品牌整合,提供您更多服務!<br/>您可以使用HyRead journal全文資料庫會員帳號、密碼登入。 </div> </div> </div> </div> <div class="modal-footer pb-5"> <div class="row justify-content-between no-gutters"> <div class="col pb-4"> <div class="stroke_line_text"><span>連結現有帳號登入</span></div> </div> <div class="w-100 pt-3"></div> <div class="col-12 col-md-4"> <button type="button" onclick="GoFacebook();" data-dismiss="modal" class="btn btn-primary custom_facebook_solid_style w-100 py-2"> <i class="icon-facebook mr-2"></i>Facebook </button> </div> <div class="col-12 col-md-4 px-0 px-md-2 pt-2 pt-md-0"> <button type="button" onclick="GoGmail();" data-dismiss="modal" class="btn btn-danger custom_googleplus_solid_style w-100 py-2"> <i class="icon-google mr-2"></i>Google </button> </div> <div class="col-12 col-md-4 pt-2 pt-md-0"> <button type="button" onclick="" data-dismiss="modal" class="btn btn-warning custom_openid_solid_style ft-white w-100 py-2"> <i class="icon icon-openid mr-2"></i>OpenID </button> </div> </div> </div> </div> </div> </div> <script> function login() { document.loginForm.submit(); } function GoFacebook(){ window.location = "http://www.facebook.com/dialog/oauth/?scope=email&client_id=241738632518448&redirect_uri=https://ebook.hyread.com.tw/SSO/FBAuth.jsp&response_type=token"; } function GoGmail(){ window.location = "https://accounts.google.com/o/oauth2/auth?response_type=token&scope=email&state=google&redirect_uri=https://ebook.hyread.com.tw/SSO/GmailAuth.jsp&client_id=30212826069-9n9dup3i54ha2luuj7bgho32bdj0amic.apps.googleusercontent.com&approval_prompt=auto&access_type=online"; } function GoOpenID(){ form12.submit(); } </script> <!-- 使用HyRead帳號登入 Modal --> <!-- 註冊HyRead帳號 Modal --> <div class="modal fade hyread_type frame_register" id="registerMemberModal" tabindex="-1" role="dialog" aria-labelledby="registerMemberModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row"> <div class="col px-0"> <img src="/Template/store/images/hyread-logo-no-text.png" class="img-fluid" alt="Small Logo"></div> <div class="col-9 col-md-9 pl-0 pl-md-5 pr-0 align-self-center"> <h5 class="modal-title">註冊HyRead帳號</h5> </div> <div class="col-1 col-md-2 align-self-center"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <hr class="mb-0 d-block d-md-none"/> <div class="modal-body pb-3 pb-md-5"> <div class="container-fluid"> <div class="row d-block"> <form method="POST" id="regForm" action="javascript:;"> <div class="anim_form_control mt-4"> <input type="text" id="regAccount" name="regAccount" required> <span class="highlight"></span> <span class="bar"></span> <label for="regAccount">請輸入帳號 <span class="ft-grapefruit ml-3" id="accountChkInfo"></span></label>(<a href="javascript:chkAccountExist()">查看帳號是否被使用</a>) </div> <div class="anim_form_control mt-4"> <input type="text" id="regEmail" name="regEmail" required> <span class="highlight"></span> <span class="bar"></span> <label for="regEmail">請輸入電子信箱</label> </div> <div class="anim_form_control mt-4"> <input type="password" id="regPassword" name="regPassword" required> <span class="highlight"></span> <span class="bar"></span> <label for="regPassword">請輸入密碼</label> </div> <div class="anim_form_control mt-4"> <input type="password" id="regConfirmPassword" name="regConfirmPassword" required> <span class="highlight"></span> <span class="bar"></span> <label for="regConfirmPassword">請再輸入一次密碼</label> </div> <div class="anim_form_control mt-4 g-recaptcha" data-sitekey="6LeAGiAUAAAAAH9aFWeUdCn2rJQtUV-LbSJtIgCJ" data-callback="isNotRobot"></div> </form> </div> <div class="row mt-4"> <div class="form-group mb-3"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="register_rule_agree"> <label class="custom-control-label" for="register_rule_agree">我同意 <a href="/Template/store/serviceRule.html" target="_blank">服務條款</a> & <a href="/Template/store/privacy.html" target="_blank">隱私權條款</a></label> </div> </div> </div> <!-- <div class="row"> <div class="form-group mb-3"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="register_order_epaper"> <label class="custom-control-label" for="register_order_epaper">我要訂閱電子報,好康消息不漏接。</label> </div> </div> </div> --> <div class="row"> <button type="button" onclick="submitRegForm();" class="btn btn-primary custom_blue_solid_style w-100 py-2" >註冊</button> </div> <div class="row mt-4"> <div class="col px-0 suggest_login text-center"> 已有帳號了?<a href="javascript:;" data-dismiss="modal" data-toggle="modal" data-target="#loginModal" class="ft-deepseablue" title="馬上登入">馬上登入</a> </div> </div> </div> </div> <div class="modal-footer"></div> </div> </div> </div> <!-- 註冊HyRead帳號 Modal --> <script> var isValidRecaptcha = false; var isNotRobot = function() { isValidRecaptcha = true; }; function chkAccountExist(){ if (!$("input[name='regAccount']").val()) { alert('請填寫帳號!'); return false; } var account = $("input[name='regAccount']").val(); $.ajax({ url: '/Template/store/ajax/chkAccountExist.jsp', type: 'GET', async: false, cache: false, data: { account: account }, error: function(xhr) { alert('Ajax request 發生錯誤'); }, success: function(data) { var result = data.trim(); if(result == "true"){ //alert("此帳號已被申請"); $('#accountChkInfo').text("此帳號已被申請"); } else{ //alert("此帳號可以申請註冊"); $('#accountChkInfo').text("此帳號可以申請註冊"); } },complete : function () { //location.reload(); }, beforeSend:function(){ $('#accountChkInfo').text(""); //$('#exchangeZoneResult').empty(); //$('#exchangeZoneResult').append('<dd class="h5 bold my-4"></dd><br>'); } }); } function submitRegForm(){ var emailRegxp = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if(!isValidRecaptcha){ alert('請勾選我不是機器人!'); return false; } if (!$("input[name='regAccount']").val()) { alert('請填寫帳號!'); return false; } if ($("input[name='regAccount']").val().length > 50) { alert('帳號請填入50個字元內,小寫或大寫英文字母(a~z,A~Z)、數字(0~9)'); return false; } if (!$("input[name='regEmail']").val()) { alert('請填寫email!'); return false; } if (emailRegxp.test($("input[name='regEmail']").val()) == false){ alert('請檢查email格式!'); return false; } if (!$("input[name='regPassword']").val()) { alert('請輸入密碼!'); return false; } if (!$("input[name='regConfirmPassword']").val()) { alert('請再次確認密碼!'); return false; } if($("input[name='regPassword']").val() != $("input[name='regConfirmPassword']").val()){ alert('兩次輸入的密碼不相同,請重新確認!'); return false; } if ($("input[name='regPassword']").val().length < 7 || $("input[name='regPassword']").val().length > 20) { alert('密碼請填入7至20個字元的小寫或大寫英文字母!'); return false; } if($('#register_rule_agree').is(":checked") == false){ alert('請同意服務條款 與 隱私權條款!'); return false; } $('#regForm').attr('action', '/Template/store/service/register_act.jsp'); $('#regForm').submit(); } </script> <!-- 忘記密碼 Modal --> <div class="modal fade hyread_type frame_forgotpassword" id="forgotPasswordModal" tabindex="-1" role="dialog" aria-labelledby="forgotPasswordModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row"> <div class="col px-0"> <img src="/Template/store/images/hyread-logo-no-text.png" class="img-fluid" alt="Small Logo"></div> <div class="col-9 col-md-9 pl-0 pl-md-5 pr-0 align-self-center"> <h5 class="modal-title">忘記密碼?</h5> </div> <div class="col-1 col-md-2 align-self-center"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <hr class="mb-0 d-block d-md-none"/> <div class="modal-body pb-3 pb-md-5"> <div class="container-fluid"> <div class="row mt-3"> <div class="col px-0 ft-warm-grey login_note"> 請輸入您註冊時的會員帳號及電子信箱,<br class="d-none d-md-block"/>我們會將您的帳號資訊E-mail給您 </div> </div> <div class="row d-block"> <form method="POST" id="forgetPwdForm" action="javascript:;"> <div class="anim_form_control mt-4"> <input type="text" id="inputAccount" name="FPwdAccount" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputAccount">會員帳號</label> </div> <div class="anim_form_control mt-4"> <input type="email" id="inputEmail" name="FPwdEmail" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputEmail">電子信箱</label> </div> </form> </div> <div class="row mt-4"> <div class="anim_form_control mt-4 g-recaptcha" data-sitekey="6LeAGiAUAAAAAH9aFWeUdCn2rJQtUV-LbSJtIgCJ" data-callback="isNotRobot"></div> </div> <div class="row mt-4"> <button type="button" onclick="submitFPwdForm();" class="btn btn-primary custom_blue_solid_style w-100 py-2">確認</button> </div> </div> </div> <div class="modal-footer"></div> </div> </div> </div> <!-- 忘記密碼 Modal --> <script> var isValidRecaptcha = false; var isNotRobot = function() { isValidRecaptcha = true; }; function submitFPwdForm(){ var emailRegxp = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if(!isValidRecaptcha){ alert('請勾選我不是機器人!'); return false; } if (!$("input[name='FPwdAccount']").val()) { alert('請填寫帳號!'); return false; } if (!$("input[name='FPwdEmail']").val()) { alert('請填寫email!'); return false; } if (emailRegxp.test($("input[name='FPwdEmail']").val()) == false){ alert('請檢查email格式!'); return false; } $('#forgetPwdForm').attr('action', '/Template/store/service/forgotPassword_act.jsp'); $('#forgetPwdForm').submit(); } </script> <!-- PC下載閱讀軟體安裝 Modal --> <div class="modal fade hyread_type frame_register_success" id="pcdownloadModal" tabindex="-1" role="dialog" aria-labelledby="pcdownloadModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row justify-content-end"> <div class="col-1 col-md-2 align-items-end"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <div class="modal-body pt-0 pb-3 pb-md-3"> <div class="container-fluid"> <form method="POST" id="downloadPcAppForm" action="javascript:;"> <div class="col text-center ft-greyish-brown shopping_page_complete_icon"> <span class="ft-greyish-brown mt-0 mt-md-3">PC下載閱讀軟體安裝</span> </div> <div class="row mt-3"> <div class="col px-0 ft-warm-grey login_note"> 版本編號:1.12.824.0<br>更新日期:2017/08/24<br> <span class="text-danger small">※若PC Reader程式執行出現錯誤,請先執行更新windows update。</span> <ul><span class="font-weight-bold text-dark">環境需求參考</span> <li>主記憶體:512M,1GB更佳 <li>硬碟空間:500MB以上,3.5GB以上更佳(視下載書量預留空間)</li> <li>作業系統:Windows 10 / 8 / 7 / Vista / XP / 2000 /</li> <li>其它:.Net Framework 4以上版本 /<br>Windows XP需加裝適用於Windows XP 32位元的<a href="http://www.microsoft.com/zh-tw/download/windows-media-player-details.aspx">Windows Media Player</a></li> </ul> <ul><span class="font-weight-bold text-dark">版本自動升級</span> <li>安裝完成閱讀軟體後,當您每次開啓使用時,會自動進行版本升級,不需再重新安裝。</li> </ul> </div> </div> <div class="row mt-1"> <div class="col-12 mt-1 anim_form_control mt-4 g-recaptcha" data-sitekey="6LeAGiAUAAAAAH9aFWeUdCn2rJQtUV-LbSJtIgCJ" data-callback="isNotRobot"></div> <button type="button" onclick="submitDownloadPcAppForm();" class="btn btn-primary custom_blue_solid_style w-100 py-2 mt-3">確認下載</button> </div> </form> </div> </div> </div> </div> </div> <!-- PC下載閱讀軟體安裝 Modal --> <script> var isValidRecaptcha = false; var isNotRobot = function() { isValidRecaptcha = true; }; function submitDownloadPcAppForm(){ if(!isValidRecaptcha){ alert('請勾選我不是機器人!'); return false; } $('#downloadPcAppForm').attr('action', '/Template/store/service/downloadPcAppForm_act.jsp'); $('#downloadPcAppForm').submit(); } </script> </body> </html>