跟著W3C做~JSON(完，但有些不成功)

因為範例都是直接將JSON資料寫入，但現在想要用讀取的方式寫到HTML中。感謝GRAY的分享，JSON要用JS才能寫到HTML中。

跟著W3做~JQUERY

 跟著w3schools做，遇到問題如下：做完後再去做JS

WP6204~Astra版，試試看阿榮的厝分享

 之前用2023版型，大致上都完成了，只剩手機畫面找不到地方修改(是自己不會修改)，所以...找有手機版的版型(感謝阿榮的厝分享Astra、犬哥也是用Astra 但，是Pro的) 下面是安裝Astra遇到的問題。戰國策有OceanWP跟Astra的選項。WebLai分享十個布景主題。(wp6204---瀨WMWM)

還有Started Templates 可以安裝，下次再測試看看@@

主要是要有 slide秀、圖片集。說不定這兩個可以是同個外掛@@

目前進度：WebLai分享十個布景主題。(寫在wp6205)

網頁版型處理，搭配JQuery

 話說，舊型網站沒有用資料庫，完全都是手工打造的，當要移動分類時@@

先將版型規劃一下，最上面是header(共有十個總選項，當在第一個選項時，第一個選項是紅色顏色，其他都是藍色@@)

左邊選單。(進去每個總選項，左邊又有大概十幾個分類，幸好這裡沒有顏色區分)

右邊選單。(點選左邊選單後，右邊又有十幾個分類，真的快昏倒了@@)

sublime Visual Studio Code 安裝與使用html5

 Sublime

1.  先下載 sublime。
   https://www.sublimetext.com/3
2. 下載package control，這是我覺得奇怪的地方，若是每個使用者必須安裝的功能，為什麼不能直接就在軟體中呢???(商業考量@@)。
   https://packagecontrol.io/installation
3. 安裝package control，照著上面網頁中的指示。先安裝package control(install package control)，然後再下載(control.sublime-package)放到sublime安裝位置中的Packages裡。
4. 安裝中文套件。
   先(shift + ctrl + p)叫出command，簡單輸入install，就會呼叫package control:install package，點選這個。裡面有很多套件可以使用，這邊再輸入chineseLocalizations並點選就安裝成功了。
5. 新增html
   一開始新增的檔案都是plain text，要點選右下角改成html，即可。並在檔案中輸入<html>就完成了。
6. emmet套件可以快速產生html、CSS，第一次覺得tab好用(雖然平常都是用tab縮排)
   先安裝emmet，接著在html中輸入div*4 再按 tab鍵，就可以直接產出四個div。
   div+a 、div>div*2、div#wrapper、.background
   

 VS Code

1. 先看看說明，並下載portable(zip)
   https://code.visualstudio.com/docs/editor/portable

normalize
https://necolas.github.io/normalize.css/

JQuery
https://jquery.com/

html5shiv 讓舊的瀏覽器認識html5
https://github.com/aFarkas/html5shiv

Adobe color
https://color.adobe.com/zh/create/color-wheel

MediaQuery 用html與css來判斷螢幕寬度

1.  html那邊在head加入，好讓不同寬度的裝置搭配不同的CSS
   <link rel="stylesheet" href="mediaQuery480.css" media="screen and (max-width:480px)">
2.  html那邊在head加入，讓螢幕初始縮放比例為100%
   
   <meta name="viewport" content="width=device-width; inital-scale=1.0">
3. CSS那邊就加入，開始調整畫面囉
   
   @media screen and (max-width:480px){

       /* 如果裝置寬度小於或等於480px，就會載入這個CSS */

   
   

   } 

 Bootstrap

1. https://getbootstrap.com/
2.  加入bootstrap.css與 bootstrap.js。CSS通常放在head那邊，js放在footer之後(JQUERY也是)
   

 變成Android App

1. 下載安裝java JDK
   將JDK的BIN加入到環境變數
   
2. 下載安裝 Android Studio
   要取得並安裝 Android SDK(4.1.3直接內建)
   
3. 下載安裝 Node.js
   npm install -g cordova
   
4. 接下來都用cordova 來新增(只能用一般 cmd 操作，不用管理員)
5. cmd D槽，然後 codrova create 專案資料夾
6. 複製相關檔案到專案中，cmd 到專案中，cordova platform add android
7. 編譯出apk，cordova build android
8. 還是要去下載gradle，然後再android studio設定gradle的目錄位置，並在執行gradle.bat(在下載的gradle中)

 

 感謝"秒懂，行動網頁設計"的作者

 

 

 

 

跟著書做~~"Dreamweaver CC網頁製作比你想的簡單"

這本書是線上閱讀，所以...

1.加入檢驗表單行為(避免一些表格要填但使用者未填寫)
先選取form，接著→行為→檢驗表單

2.跳頁選單(之前DW好像有兩種，好像要這種搭配JS才可以)
先製作表單裡的選取，接著→行為→跳頁選單
也可以搭配"按鈕"來到另一個網頁，行為→前往URL，就可以囉

3.google搜尋引擎登錄    https://support.google.com/webmasters/
會被導入到"Search Console"，需登入

4.Fackbook 增加 like 與 share 按鈕    https://developers.facebook.com/docs/plugins
看這本主要就是要處理FB的問題...
4-1.先選取要按讚的網頁(這樣不就是要一頁一頁處理???)
4-2.處理寬高度，接著取得程式碼(程式碼分兩個區塊，一個(JS)要放在<body>之後。一個則是圖片，看要放在哪裡給他人按讚。
4-3.看到很多網站是使用Like Box，就是顯示很多粉絲區塊。
4-4.Comments快速留言
4-5.posts內嵌貼文，這樣留言就直接顯示在網頁上，是嗎??

5.jQuery UI
插入→jQuery UI，這裡有很多選項。

閱讀 "免費架站王 weebly" 此書

這本書是利用各種免費的工具，來達成網站的功能需求，其中有一些還不錯，先記錄下來。

1.氣象天氣：現在都沒有iframe可以放在網站裡方便網友看(我找不到)，但各國氣象台還是有提供RSS，這就可以處理了!

2.SEO策略
加入下面兩個，雖然上次google說好像已經不用這個了~ ~
<meta name="description" content="說明">
<meta name="keywords" content="關鍵字">
檢視搜尋引擎索引狀態→ info:網站網址、site:網站網址
看看連結或相似的網頁→link:網站網址、related:網站網址

3.申請google網站管理工具   https://www.google.com/webmaster/
先在 search console加入網站→接著驗證。

4.google analytics   https://www.google.com/analytics/
登入→註冊→輸入一些資料後→複製追蹤碼貼在 頁尾上即可。

5.Facebook，管理權限不在我，所以...

6.google簡報(不支援內有影片的PPT)
將PPT放在雲端硬碟中，開啟工具選擇google簡報。接著在選單上的檔案→發佈到網路→內嵌，就可以將程式碼複製放在網站上囉!!

7.還有dropbox、Flickr、Instagram應用，但都還沒有用到...

8.CSE用法  https://cse.google.com.tw/cse/all
輸入一些網站的資料，就可以取得程式碼。主要是要放在哪裡，我是放在最上面(先一個放大鏡)，點選後，下方出現google搜尋。這邊是放在選單UL外面，用的是collapse。

但因為CSS關係，要稍微調整一下，最後是將自己的CSS放在最下面，就可以覆蓋過google的CSS喔!!外觀與風格也選一下，就可以出現google藍囉~~

9.訪客計數器
這個功能我一直覺得沒有必要，反而覺得分析讀者來看的目的是甚麼比較重要...

10.youtube音樂庫    https://www.youtube.com/audiolibrary/music
提供了免費的各種音樂喔!!!工具聲、動物聲、武器音效等...

11.jQuery各種特效    http://www.dynamicdrive.com/dynamicindex17/
這本書介紹的是右下角有個往上的按鈕，可以到頁面最頂。

12.favicon 自訂網站圖示    http://www.favicon.cc/
將圖片上傳後，變成icon(不可以超過5MB)
<link rel="shortcut icon" href="圖示位置" />

jquery 套件

今天第一次使用jquery套件，但firefox卻顯示"You don't have permission to access /mobile/tablesort/themes/blue/style.css"本機測試還出現這樣問題。

看了一下資料夾是綠色的，右鍵取消"加密內容，保護資料"就可以讀取囉!!