空大小熊

---------------------------------

!-- A basic input -->

空中大學

Click me to Natioal Open Iniversity

中央氣象局 7 日 08:30 中央氣象局 解除輕颱菲特警報

html 5 語法網站

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

-------------------------------------------- 

• 空大各學科系 move滑鼠自動列出▼

  • 空大首頁
  • 人文系
  • 商學系
  • 管理與資訊系
  • 社會科學系
  • 公共行政學系
  • 生活科學系
  • 氣象學系
  • 氣象雲圖觀測
  • 目前天氣

    This is object Only using edu, and don't work to business or other ways.

School name:National Open University http://www.nou.edu.tw
Department of Business: http://www.nou.edu.tw/~eng/Links/Links.htm
Student name: wen xiong

 fist words ... loading ....then photo

圖上的颱風是強颱丹娜絲

(中央氣象局7日上午0830解除了輕度颱風<菲特>的警報)

(資料來源:中央氣象局2013_10_05) 星期六day5_下午的狀態，3:30雲圖/下午路徑/04雨量累積/日雨量

(資料來源:中央氣象局2013_10_06) 星期日day6_上午的狀態，:08AM雲圖;PM雲圖/下午路徑/下午雨量累積/日雨量

(資料來源:中央氣象局2013_10_07) 星期日day7_上午的狀態，:10AM雲圖/路徑圖

前兩天的雨量住要落在<新竹縣的尖石/玉峰鄉、桃園縣復興鄉、新北市的烏來>

前五名雨量縣市，最高的約在533-400毫米

<天氣動態>

摘要:day 6日下午2點位置，台北東北方約200KM的海面上，方向>往西北西，速度18-15KM/h, 位置北26.3度/東經122.9度，

半徑250KM

作法:

>上傳一張.png或 .gif 圖檔，所有的網路地圖圖檔都要上傳，最好先編好再上傳，更改超連時就很好用了。

>在部落格點選html, 加入圖檔的w和H

>最後再將在GIMP上做好的網路地圖圖檔(先開啟.png, 接著到濾鏡_點選網路地圖_開啟舊檔中的html檔，在功能選單上

選示_原始檔_複製區域 area.....後面的方塊座標及hera:超連結_)

修正在GIMPalt 為 title，才會顯現超連結的小標籤為正確連結位置，不然他會抓部落格預設的 title，

以直觀的(圖標)替代(文字)作為超連結(連到網站外或是部落格內部的連結點)是觸控式電腦或網際網路的作法。

也許受到部落格幅寬的影響(網站預設的圖片仍多以左右橫幅為準則較多)，但似乎也可以考慮改為直幅式，

中央氣象局為例:修改後圖標超連結

<area title="交通部中央氣象局" shape="rect" coords="11,12,83,57" href="http://www.cwb.gov.tw/V7/observe/" />

限教育用>空大為範例:

更正前<area shape="rect" coords="94,2,154,63" href="http://www.nou.edu.tw" alt="國立空中大學" />

更正後<area  title="國立空中大學" shape="rect" coords="94,2,154,63" href="http://www.nou.edu.tw"/>

限教育用>

<img title="菲特中颱.png" src="http://pic.pimg.tw/assf0102/1380949774-1813281762.png"  width="674" height="536" usemap="#map" border="0" /></span></span></p>
<p><map name="map">
 <!-- #$-:Image map file created by GIMP Image Map plug-in -->
 <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --> <!-- #$AUTHOR:National Open University student of business    -->

<area title="交通部中央氣象局" shape="rect" coords="11,12,83,57" href="http://www.cwb.gov.tw/V7/observe/" />
 
<area title="NOU國立空中大學" shape="rect" coords="94,2,154,63" href="http://www.nou.edu.tw" />

http://www.taipei.gov.tw/     

<img src="http://pic.pimg.tw/assf0102/1380949774-1813281762.png"  width="513" height="672" usemap="#map" border="0" /></span>
</p>

<p><map name="map">

-------

中文的意思:

第一段語法

<img src= (以這個圖檔路徑為準="http://XXXXXXXXX-yyyyyyyy.png",

以這個例子為例:先插入之前上傳的tw.png 圖檔，接者，選取圖檔>按右鍵>內容_出現方塊，複製>網址(URL)後面http://xxxxxx-yyyy.png, 接者把寬、高尺寸打進去如:width="xxx" height="xxx" border通常預設為="0", 暫且翻成使用地圖的定義usemap="#map")，完成。簡言之，告訴電腦程式，這個要超連結的電腦圖檔放在哪，圖檔的寬高的尺寸，最後定義定義他是#地圖，/反斜線代表結束設定。

第二段語法

<p>印出

<map name="map"> 地圖名稱="地圖"，意思要程式是找出前段設定的中usemap="#map"

-------

注意:在你的圖片資料夾裡必須先存有tw.png的原台灣圖檔，否則html無法正常開啟，因為抓不到原圖圖檔，程式無法呼叫，

html只能看到空白圖檔,把原圖檔tw.png存到與html相同資料夾內,就可以抓到圖做出超連結了，po上後，標籤中文不顯示或亂碼，
改成英文就OK了。

1>上傳一張網路地圖tw.png到pixnet相簿裡

2>發表文章，插入圖片

3>點選Html>檢視語法>先刪除原來圖的影像圖片<p><img href="pixnet/010101010">

4> 加入(複製貼上) 座標值,及超連結(例子:基隆、台北、台中)

5>中文字不顯現，可以改用英文字

6> 原部落格的tag標籤不見了，後加的Alt也無法顯現

<img src="tw.png" usemap="#map" border="0" height="672" width="513">
<map name="map">

<area shape="rect" coords="439,25,484,44" alt="Klcg gov" href="http://www.klcg.gov.tw/">
<>
<area shape="rect" coords="223,206,266,234" alt="abc_台中市政府" href="http://www.taichung.gov.tw/">
</map>

GIMP2.6軟件

GIMP>濾鏡_網頁/影像地圖編輯器，在編輯完成後另存新檔為 001xx.html

打開之後，發現圖檔是空白，無法顯現圖檔和超連結時，那是<原始檔>亂掉了，

以下是說明如何更新亂碼

>開啟GIMP2.6

>從資料夾裡開啟一個.png檔(可攜式網路圖型)，

開始編輯，選擇要超連結的位置的圈選形狀(方或圓)和填上網址(做超連結)，

>存檔>選(另存新黨) nou123.html

>到檔案位置上(c:xxxxxx)找到剛存檔的 nou123.html，無法做超連結

>go>上面的>檢視_原始檔>把原始檔複製下來，

接著到電腦左下>開始>記事本(建立及編輯文字檔)，貼上剛複製的原始碼

<img src="tw.png" width="513" height="672" border="0" usemap="#map" />

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:COMPAQ -->

上面的語法不動，下面的更正

部分亂碼的顯示出現在在座標位置 href="前xdnw口

在座標位置 coords="439,25,484,44"後面，修正如下

 alt="台北市政府" href="http://www.taipei.gov.tw/" /

正確的顯示方式應該是:如下:

<area shape="rect" coords="439,25,484,44" href="http://www.klcg.gov.tw/" />

<area shape="rect" coords="379,40,421,65" alt="abc456" href="http://www.taipei.gov.tw/" />

<area shape="rect" coords="223,206,266,234" alt="abc_台中市政府" href="http://www.taichung.gov.tw/" />

</map>

>存回去原nou123.html，選擇<取代原檔>

從新打開檔案nou123.html

PS

area shape="rect" --區域形狀是矩形

coords="439,25,484,44" 表示要連結的座標位置的x和Y軸的(x=439,25,Y=484,44)

 alt="台中市政府" --表示當出現超連結時所要出現的文字對方方塊

href="http://www.klcg.gov.tw/" /--表示超連結的網址

參考範例:

http://mail.mcjh.kl.edu.tw/~lin/teach/gimp/map/map.htm

動畫GIF圖檔練習，可以先從中央氣象局的小圖檔來練習

雨量圖示我選擇，GIMP圖像處理軟件具有這種功能，在功能列<濾鏡>下拉式選單中選單中有<播放>

最後是要存成GIF的動畫選項中，而不是一般的.jpg檔名或.gif檔名，否則無法成為動畫檔。

pixnet 部落格也支援用戶可以做這種GIF檔，來豐富部落格的多元性和趣味性

只是有時候圖檔會卡卡的，中途圖檔或播放lost圖檔，出現不完整，原因是限制或是不穩定

還在確認中，以下這個圖檔共傳了兩次，第一次傳似乎失敗，圖檔播出有失圖現象

第二次傳OK，現在預覽狀況圖像完整呈現，等等看看發表後的情形如何

 今日測試結果，正常播放，播放速度參數設定似乎有有回應，圖像沒有lose. OK

明日(25)再來上傳22日的雨量gif, (建議製作時先存成.xcf,在另存gif動畫，好處，事後要修改只能在.xcf做)

要等幾10幾秒才會出現圖檔，天兔由強颱轉為中度颱風，雖然沒有登路南臺灣，但卻帶來豐沛的與雨量

即使中央氣象局解除了陸上颱風警報，但颱風外圍氣流依舊夾帶水氣帶給台灣不小的雨量。

我將透過中央氣象局的分時(30分鐘)雨量累計圖的變化，製作成gif來呈現過程的變化
圖1:下載中請稍後

 圖2:下載中請稍後....(後傳先出較圖1快幾秒5s)
25日test上傳修正後的雨量圖 start 1212PM,

 測試結果:OK 12:28PM 圖像正常沒有lose,

本次測試增加_修改圖層屬性_目的是<延緩顯示動作，在開頭即結尾時，讓主題能定格停住，感覺像在做幻燈片。
>(將預設質100ms,修改為1000ms~1500ms),
>點選作用圖層，如圖層1,按滑鼠右鍵，點選最上方的<修改塗層屬性>，在對話方塊中圖層1後面添加(1000ms)(combine),按卻確定，跳回原作用圖層就可以看到修改後的屬性在作用圖層中顯示

註:先存成.xcf(GIMP的預設檔名)以方便修改，預覽要在(濾鏡)選單中選(播放)，完成後再另存新檔，動畫GIF檔。

使用GIMP 2.6 自由軟體