點這看期中考筆試題(會換掉此窗)
(壓著 CTRL 鍵再點即可開新窗)
(0)先把以下答案範例複製到你今天簽到區文章
(1)我的 WeeBLY 是 tsaiwn.weeBLY.com (要換成你的並正確連結)
以下是我的 WeeBLY 首頁畫面:
這裡當然要放你 WeeBLY 首頁畫面(用 ALT_PrintScr 抓下的畫面)
** 如果你連這WeeBLY都還沒有, 最好今天立即做一個,
否則你這門課分數最高不會超過75分!
(再次提醒: 全勤或通過 DW CS6 證照可及格, 全勤且通過 DW CS6 證照則至少70分)
(2)我的 LionFree 是 tsaiwn.LionFree.Net 新版首頁(tsaiwn 要換成你的, 設定正確連結)
以下是我的舊版 LionFree 首頁畫面:
這裡放你目前的 xxx.LionFree.Net 首頁 用 ALT_PrintScr 抓下的畫面
** 如果你連這都還沒有, 請先依據1018改用LionFree.Net...那篇,
把你的 xxx.LionFree.Net 申請並建置好,
抓下你正在設定 FTP 帳號密碼的畫面繳交在這!
(3)以下是我的 LionFree.Net:2083 管理 FTP 帳號設定畫面:
這裡放你目前的 LionFree.Net:2083 管理 FTP 帳號設定畫面
**沒錯, 如果你今天第一次開設你的 LionFree.Net 則(2)與(3)畫面相同即可!
(4)我的舊版 LionFree 網站請看夾檔案 old_你學號_Web.zip
(5)我的新版 LionFree 可連接到 tsaiwn.LionFree.Net (換成你的並正確連結)
要管理網站可連到後台 http://LionFree.Net:2083
(6)我的新版 LionFree 網站也有夾檔 new_你學號.zip
(7)以下是我的 tsaiwn.LionFree.Net 新版首頁(tsaiwn 要換成你的, 設定正確連結)
這裡放你目前的 xxx.LionFree.Net 首頁 用 ALT_PrintScr 抓下的畫面
(1)接著當然是先把該抓的畫面抓下夾檔並設定為點入你文章就可看到,
目前為止檔案包括:
(a)四個抓下的畫面,
包括在(1)Weebly,(2)舊LionFree首頁,(3)LionFree管理,(7)新LionFree首頁
(b)兩個 .zip 壓縮檔,
包括(4)舊版 LionFree 的 old_你學號_Web.zip, (6)新版 LionFree 的 new_你學號.zip
還有, 該設定的連結也要設定正確!!
好啦, 準備砍掉舊版 LionFree 首頁並做新的 LionFree 首頁 ...
壓縮為 old_你學號_Web.zip 夾檔繳交
Hint: (a)開啟DW6, 建立一個新網站, 電腦上對應目錄名稱
建議命名 old_你學號_Web
(b)設定遠端網站對應到你的 LionFree.Net
(c)確定 FTP 帳號密碼正確(必要時登入 LionFree.net:2083 作設定)
(d)把你的 LionFree.Net 下載到電腦
(e)關閉 DW6 (Dream Weaver CS6)
(f)找到你存放網站的目錄, 整個目錄壓縮並夾檔繳交
也可以不刪除, 等下做好新的網站直接上傳蓋掉(有些沒蓋掉也OK)
(故意不要有 _Web) (這是方便等做好要壓縮夾檔繳交:-)
點更多然後選 2欄流動左邊列, 標題 . . .那個(參考下圖)。
準備修改, 先改整個 body 的背景顏色, 再改右邊內容(content)的顏色;
這兩種背景色自己決定, 但必須不同色, 還有, 看起來不可以太難看 !!
以下示範先把整個 body 背景用接近 淡藍色,
再把右邊內容(content)用接近淡綠做底色。
這兩種背景色請你自己決定, 但必須不同色, 還有, 看起來不可以太難看 !!
建議用分割畫面在 HTML 程式碼窗內複製貼上。
還有, 把該列以下的都砍掉不要了 !
最底下頁尾 footer 的地方等全部做好再回頭弄五個簡易連結 。
注意, 點設計窗(右邊)後要改到 HTML 程式碼看看。
要確定其前後的標記有選起來 !! 複製貼上弄成五份 !
準備插入命名錨點, 以便設定左邊的五個連結 . . .
為了方便等下測試連結錨點是否正確,
可先把右邊五個標題 "說明" 依序補上 1, 2, 3, 4, 5 變 "說明1", "說明2", ..
命名要方便自己記住,
五個錨點都命名好之後, 依序點左邊五個連結設定正確連結。
(13)開始 修改/填入 右邊的網頁內容
首先, 當然是先換掉連結一
請把左方的連結一 改為
如何移動/轉存 CSS 規則;
阿內容呢?
好啦, 這也會 Demo 給大家看看 :-)
(a)請點數位學習"開始上課"左方 1101Week08..上方兩列的
黃色底 移動/轉存 CSS 規則
忽略該頁中最開始的標題和四個連結,
只把 "Dreamweaver 中的 CSS 管理功能..." 直到那句
"您也可以使用「編碼」工具列移動規則。只能在「程式碼」檢. . .。"
複製來當作連結一的內容,
緊接著該些內容之後, 在 [Top] 之前(上一列)請補上這列提示:
更多關於 移動/轉存 CSS 規則 請點這
(b)當然, 記得為這提示設定正確連結到 Adobe 的 helpx 網頁(就你剛剛在看的啦!)
(14)剩下的四個連結及其內容請找最近十天內新聞來填
(a)對每篇要用的新聞, 把內容用"貼上特殊效果"(就是Word的選擇性貼上)只貼上文字
然後很快的把格式美化一些 !
善用底下的屬性頁面做設定 !
(b)
接著把左方的連結?? 改為
各篇新聞的標題;
必要時自行把標題稍微精簡以免太長 !
隨時可按 F12 預覽 (可先把 F12 改為會使用 Chrome 瀏覽器)
(15)在頁尾的 footer 改為如下樣子
我是 008009007 張君雅
點這連到我的WeeBLY tsaiwn.weebly.com
[ 關於CSS移出 | 重要新聞 | 大新聞一 | 大新聞二 | 最鳥新聞 ]
(把以上的五個連結依序也設定為跟左方五個連結一樣)
(16)有頁尾(footer), 別忘了還有頁首(head)的Logo與標題 (a)左上角放一張 Logo 圖, 可以用自己照片加工特效處理, 如需要你自己照片可在數位學習"開始上課"左邊捲到最後有連結可以點; Hint: 可連到 PixLR.com做處理 當然你要自己畫個Logo也可以 :-) (b)Logo 右邊的橫幅 (Banner)先用大字打入你的學號與姓名 注意, 現在規定字的顏色必須是白色 ! (c)幫頁首橫幅 (Banner)設定一張暗色的背景圖(要有些花紋, 不可全黑色!) 主要是要讓白色的 你學號與姓名 可以很清楚但又不會太難看 ! 可以用 Gogle 找 "免費網頁背景圖" 或 "free web background" 或你要自己畫一張也可以 !
(17)快好了, 上傳之前請先把 CSS 獨立出來
(a)在你網站建立一個資料夾命名 css
(b)照之前兩次教過的方法把 CSS 規則移出去放 css/myStyle.css
(c)再按下 F12 確認網頁仍正常, 也要測試各個連結。
(18)大功告成, 上傳到你的 LionFree.Net 準備其他該繳交資料
(a)全部存檔, 把整個網站上傳後, 用瀏覽器連入你的 LionFree.Net
然後用ALT_PrintScr抓下畫面備用!
(b)關閉 Dream Weaver, 找到你的新網站目錄, 壓縮為 new_你學號.zip
(c)回到討論區你的簽到文章, 夾檔繳交,
再提醒必須點入文章可立即看到各圖片喔 !
(到現在還不會的務必小聲問同學, 不要吵到別人!)
提醒大家冬天真的到了(昨天為24節氣的立冬);
今天晚上開始變冷喔,
未來一個月的早晨都大約20度, 早上起床注意衣服避免感冒!
點這看看未來一個月的天氣
點這連到CWB中央氣象局
點這聽聽洗腦神曲"好想你"
點這看期中考筆試題(會換掉此窗)
(壓著 CTRL 鍵再點即可開新窗)