在Dreamweaver中,建立新的CSS規則,做法如下 http://i1136.photobucket.com/albums/n481/parkparkyang/css-01.jpg 四種規則說明如下 1.類別(可套用至任何HTML元素) 類別名稱的命名不可為HTML標籤相同名稱 若類別名稱為main-table寫法: 1.在段落中: html語法: 這是一個表格標題 2.設定div的類別: html語法: 這是一個表格標題 CSS檔案中,則會前面有一小點 . 呈現 .main-table{ } 2.ID (僅套用至一個HTML元素) 每個ID只能套用至一個DIV 若ID名稱為header的寫法: html寫法: 這是一個header的區塊 CSS檔案中,by JinJin - 100-1《中國》北視傳一B-網頁設計
1. 一、製作說明:2. 二、繳交作業方式[作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 1. 一、製作說明: 1.請參考 [講義] 利用Div標籤與CSS建立基本網頁版型 的步驟製作 2.下載附件 3.每個同學記得在title的部分打上"自訂的主題" 在#footer 註明 Designed by 某某某(可自行取名) 1001445ooo 4. 在#wrapper寬度上打上 px的數值 5. #content內,自行打入不同的內容文字,自行隨意設定 6. 以本單元的架構下,文字、圖片及設定,可依講義或自行發揮 7. 本次作業的重點在於: (1) 練習 Dreamweaver 的操作與使用 (2) 透過 Dreamweaver 的練習,比較藉由 Dreamweaver 輔助與直接by JinJin - 100-1《中國》北視傳一B-網頁設計
1. 一、製作說明:2. 二、繳交作業方式3. 一、製作說明:4. 二、繳交作業方式[作業03] 利用Div標籤與CSS建立基本網頁版型--Dreamweaver圖片篇 3. 一、製作說明: 1.請參考 [講義] 利用Div標籤與CSS建立基本網頁版型 的步驟製作 2.下載附件 3.每個同學記得在title的部分打上"自訂的主題" 在#footer 註明 Designed by 某某某(可自行取名) 1001445ooo 4. 在#wrapper寬度上打上 px的數值 5. #content內,自行打入不同的內容文字,自行隨意設定 6. 以本單元的架構下,文字、圖片及設定,可依講義或自行發揮 7. 本次作業的重點在於: (1) 練習 Dreamweaver 的操作與使用 (2) 透過 Dreamweaver 的練習,by JinJin - 100-1《中國》北視傳一A-網頁設計
FileZila FTP上傳圖例教學 因學校網路似乎有阻擋FTP上傳功能 因此請在自己的電腦中依圖例說明之方式上傳 http://i1136.photobucket.com/albums/n481/parkparkyang/web01-01.jpg http://i1136.photobucket.com/albums/n481/parkparkyang/web01-02-1.jpg http://i1136.photobucket.com/albums/n481/parkparkyang/web01-03.jpg http://i1136.photobucket.com/albums/n481/parkparkyang/web01-04.jpgby JinJin - 100-1《中國》北視傳一B-網頁設計
FileZila FTP上傳圖例教學 因學校網路似乎有阻擋FTP上傳功能 因此製作圖例說明上傳方式 http://i1136.photobucket.com/albums/n481/parkparkyang/web01-01.jpg http://i1136.photobucket.com/albums/n481/parkparkyang/web01-02-1.jpg http://i1136.photobucket.com/albums/n481/parkparkyang/web01-03.jpg http://i1136.photobucket.com/albums/n481/parkparkyang/web01-04.jpgby JinJin - 100-1《中國》北視傳一A-網頁設計
請參考 上課講義: 電腦的過去現在未來 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ ===================== 這門課將帶領大家進入電腦的世界 相信大家都對電腦有種既熟悉又陌生的感覺 期待透過課程能讓大家對於電腦有更深入的了解 並且對於視傳的資訊概論領域的更進一步的認識 ===================== 上完本單元後,請回答以下問題:(請註明學號) 1.你從幾歲開始接觸電腦?那時都使用電腦做些甚麼事? 2.你有自己的電腦嗎?擁有甚麼樣的電腦?(筆記型電腦、桌上型電腦、智慧型手機、EPC、PAD......) 3.你知道自己的機型和配備嗎 ( 廠牌(型號)、系統、CPU處理器,記憶體、硬碟、數位板、獨立顯示卡...)?請寫下來by JinJin - 100-1《中國》竹視傳一B-資訊概論
請參考 上課講義: 電腦的過去現在未來 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ ===================== 這門課將帶領大家進入電腦的世界 相信大家都對電腦有種既熟悉又陌生的感覺 期待透過課程能讓大家對於電腦有更深入的了解 並且對於視傳的資訊概論領域的更進一步的認識 ===================== 上完本單元後,請回答以下問題:(請註明學號) 1.你從幾歲開始接觸電腦?那時都使用電腦做些甚麼事? 2.你有自己的電腦嗎?擁有甚麼樣的電腦?(筆記型電腦、桌上型電腦、智慧型手機、EPC、PAD......) 3.你知道自己的機型和配備嗎 ( 廠牌(型號)、系統、CPU處理器,記憶體、硬碟、數位板、獨立顯示卡...)?請寫下來?by JinJin - 100-1《中國》竹視傳一C-資訊概論
本週講義 1.職涯規劃 2.均衡的職涯發展 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ ========================================== 上完本周的進度 請同學們說說自己的想法 (可以老師列的問題回答,或依自己的形式回答,請寫上學號) 1.想要繼續進修的原因? 2.期待能在大學學到甚麼? 3.想過未來想過甚麼樣的生活嗎?可以描述一下嗎? 4.如果你是老闆,你想要甚麼樣的員工? 5.專業技能、可移轉的技能、自我管理,三者哪個最重要? 6.該如何均衡的學習與培養這三樣技能? (每次課題的回答列為平時分數)by JinJin - 100-1《中國》竹進視傳一A-職涯探索
1. 一、製作說明:2. 二、繳交作業方式3. 一、製作說明:4. 二、繳交作業方式5. 相關網站6. 相關文章7. 相關影音8. 觀後心得設計人的介紹 蕭青陽 5. 相關網站 部落格:http://blog.yam.com/shoutstu 官網:http://www.shout.com.tw/ 6. 相關文章 蕭青陽 永不放棄18歲的夢想 http://www.gvm.com.tw/Board/content.aspx?ser=16414 YA!破天荒請到蕭青陽設計封面! 蕭青陽的雜誌封面處女秀,就在《Cheers》! http://www.cheers.com.tw/doc/page.jspx?id=40288ac81e81972b011e868084c160dd 得人如得魚的唱片人生─蕭青陽 http://tw.myblog.yby JinJin - 100-1《中國》竹進視傳一A-職涯探索
全國大專院校連結頁面 http://www.tkblearning.com.tw/2006actions/20060925_university/index.htm 台灣大專院校列表 维基百科,自由的百科全書 http://zh.wikipedia.org/wiki/%E5%8F%B0%E7%81%A3%E5%A4%A7%E5%B0%88%E9%99%A2%E6%A0%A1%E5%88%97%E8%A1%A8 大專院校網址 http://140.114.42.11/edu/allschool.html 中華民國政府機關網址索引 http://win.dgbas.gov.tw/eyimc/webindex/srclist.htmby JinJin - 網頁設計與語法(HTML/CSS)
請參考 上課講義: 1.數位相片基礎編修 2.簡易相片處理 3.練習檔下載 補充: 4.Adobe Bridge 影像管理 ACA講義: 5.CH01 設定影像設計專案企劃的必要條件 1.1 確認設計的目的、使用者以及使用者需求 6.CH02 在準備影像時應理解的設計 2.1 網頁.視訊.印刷的影像解析度/影像尺寸/ 檔案格式 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ --------------------------------------------------------------------------------- 利用上課所教之數位相片編修步驟 以及技巧,如: 1.裁切並調正影像。 2.調整影像的對by JinJin - 100-1《中國》竹視傳一C-電腦輔助設計與繪圖(一)
請參考 上課講義: 1.數位相片基礎編修 2.簡易相片處理 3.練習檔下載 補充: 4.Adobe Bridge 影像管理 ACA講義: 5.CH01 設定影像設計專案企劃的必要條件 1.1 確認設計的目的、使用者以及使用者需求 6.CH02 在準備影像時應理解的設計 2.1 網頁.視訊.印刷的影像解析度/影像尺寸/ 檔案格式 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ --------------------------------------------------------------------------------- 利用上課所教之數位相片編修步驟 以及技巧,如: 1.裁切並調正影像。 2.調整影像的對by JinJin - 100-1《中國》竹視傳一B-電腦輔助設計與繪圖(一)
請參考 上課講義: 1.數位相片基礎編修 2.簡易相片處理 3.練習檔下載 補充: 4.Adobe Bridge 影像管理 ACA講義: 5.CH01 設定影像設計專案企劃的必要條件 1.1 確認設計的目的、使用者以及使用者需求 6.CH02 在準備影像時應理解的設計 2.1 網頁.視訊.印刷的影像解析度/影像尺寸/ 檔案格式 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ --------------------------------------------------------------------------------- 利用上課所教之數位相片編修步驟 以及技巧,如: 1.裁切並調正影像。 2.調整影像的對by JinJin - 100-1《中國》竹視傳一A-電腦輔助設計與繪圖(一)
前言: 基本的網頁是由html與css所組成 希望大家在進入Dreamweaver之前,能夠先對html與css有基礎的概念 所以我們的第一個網頁先由單純的html與css出發 希望大家這一個星期回去能反覆練習,自己寫出html及css語法的簡單網頁 這樣未來在做網頁的時候,能更如虎添翼,舉一反三了! Let's go!!!大家一起加油吧!!!! =========================================== 建議需先安裝的軟體 --------------------------------------------------------------------------------------- 好用的免費記事本軟體 Notepad++官方網頁:http://notepad-plus-plus.org/ --by JinJin - 100-1《中國》北視傳一B-網頁設計
前言: 基本的網頁是由html與css所組成 希望大家在進入Dreamweaver之前,能夠先對html與css有基礎的概念 所以我們的第一個網頁先由單純的html與css出發 希望大家這一個星期回去能反覆練習,自己寫出html及css語法的簡單網頁 這樣未來在做網頁的時候,能更如虎添翼,舉一反三了! Let's go!!!大家一起加油吧!!!! =========================================== 建議需先安裝的軟體 --------------------------------------------------------------------------------------- FileZilla 免費又好用的FTP軟體,供客戶端和伺服器端使用 官方下載網頁:http://filezilla-by JinJin - 100-1《中國》北視傳一A-網頁設計
本週講義 1.班級公約 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ 第一週須完成的任務: 一、填寫完學生資訊系統裡的Cute卡 二、填寫完ican系統裡的e-protfolio 三、填寫期初安置性評量問卷,讓老師了解大家。 https://docs.google.com/spreadsheet/viewform?formkey=dFFEczBOSFZWdU15TzFWZzh4ZXo5c1E6MQ 四、請進入老師教學網站註冊 註冊網址:http://mepopedia.com/forum/register.php?301 註冊時請填寫「學號」(請至右上角『設定』→『個人資訊(編輯)』),每位同學都必須註冊,有任何註冊問題請隨時反應,或留下email幫忙開通。by JinJin - 100-1《中國》竹進視傳一A-職涯探索
本週講義 1.電腦輔助設計與繪圖課程規範與課程目標 2.電腦輔助設計與繪圖(一)本學期範例與作業 3.電腦繪圖基本概念 以上pdf 講義請至學生系統下載 http://192.192.78.86/student_portal/ 第一週須完成的任務: 一、安裝photoshop及illustrator軟體 二、多看多觀摩相關設計或軟體書籍及作品,建立起基本概念(請多多利用圖書館或網路資源) 三、填寫期初安置性評量問卷,讓老師了解大家。 https://docs.google.com/spreadsheet/viewform?formkey=dGU0ZnZNSlhoODdCaVNKeS10WjJhOXc6MQ 四、請進入老師教學網站註冊 視傳一A http://mepopedia.com/?page=856 視傳一B hby JinJin - 100-1《中國》竹視傳一A-電腦輔助設計與繪圖(一)
本週講義 1.網頁設計課程規範與課程目標 2.網站基本概念 3.Dreamweaver 環境介紹 4.網站的概念與開發流程 以上PPT講義請至學生系統下載 http://192.192.78.86/student_portal/ ================================================================== 第一週須完成的任務: 一、安裝Dreamweaver軟體 二、開始閱讀關於html、css相關書籍,建立起基本概念 (請多多利用圖書館或網路資源) 三、填寫期初安置性評量問卷,讓老師了解大家。 https://docs.google.com/a/mepopedia.com/sby JinJin - 100-1《中國》北視傳一A-網頁設計
HTML5是HTML下一個的主要修訂版本,現在仍處於發展階段。 目標是取代1999年所定訂的HTML 4.01和XHTML 1.0 標準,以期能在網際網路應用迅速發展的時候,使網路標準達到符合當代的網路需求。 廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。 它希望能夠減少瀏覽器對於需要外掛程式的豐富性網路應用服務(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強網路應用的標準集。 html5 相關網頁整理 HTML5維基百科 http://zh.wikipedia.org/wiki/HTML_5 HTML 5 教程 http://wby JinJin - 網頁設計與語法(HTML/CSS)
請蒐集具設計感之PROFILE個人簡介頁面 越多越好,國內外皆可 可說明優點,也可以附上網址即可 如: pixnet的不同類型: http://www.cwyuni.tw/profile http://mix78.pixnet.net/profile http://raindog.pixnet.net/profile http://www.giddens.tw/profile http://lovetabris.pixnet.net/profileby JinJin - 網頁設計與語法(HTML/CSS)
請蒐集設計優良的網站,列出網址與下列資訊,並分析其網站的優劣 範例: 基本資料 1.網址:http://www.apple.com/tw/ 2.名稱:Apple台灣官方網站 3.類型:科技類商業網站 4.族群:年輕,追求時尚與科技感 5.網站性質:科技產品介紹與產品販售 分析 1.色系:以白色、灰色系、黑色為主調,輔助色為藍色 http://i556.photobucket.com/albums/ss1/whc915/apple-color.jpg 2.風格:科技與時尚感 一致的版面設計,用色與字型,可以立即感覺到網站經營的俐落風格 3.編排分析 採用的是,導覽列於上方的一目瞭然簡單俐落的編排方式 以產品名及重要選項列於上方便於點擊 下方是產品分類 主商品出現在產品分類下以大張照片瀏覽方式呈現 其後是以by JinJin - 網頁設計與語法(HTML/CSS)
不同論壇樣式範例 全民國防教育暑期戰鬥營 http://www.mepopedia.com/forum/718 美寶莊園 http://mepopedia.com/forum/list.php?699 ============================================== 以全民國防教育暑期戰鬥營為例,需修改的部分 1. 修改 template 名稱(info.php) 將第5行的 $name = 'emerald' 的 emerald 改為新的 template 名稱 (可以是中文名稱) 2. 風格顏色設定 (setting.tpl) 設定下列三個顏色變數後(可以將 #0079B7 改為要設定的顏色碼),整個論壇的風格就會有很大的改變。 {VAR border_color "#0079B7"} (第54行)by JinJin - 網頁設計與語法(HTML/CSS)
一.這週請自選一個部落格樣式修改 http://www.serendipity-templates.org/all-templates/screenshot/ 修改完後請回復本篇文章 註明: 1.修改的樣式原名稱: 2.新命名: 3.風格: 4.使用族群: 5.色彩計畫: (1)色調: (2)主色系: (3)輔助色系: 6.修改原樣式截圖: 7.修改後樣式截圖: 二.將前兩週的風格做修正,同樣附上前述說明 ======================================= 製作提示 1.在illustrator做的圖,到photoshop可以切得更精確 2.如果不確定要修改的CSS,請逐項修改看看,也可更深入了解其各項設定 3.每修改完一個項目,請上傳看效果,並註明修改項目by JinJin - 網頁設計與語法(HTML/CSS)
本週進度 以youngbutstrong延伸的設計 1.原有樣式 2.YoungButStrong (Angela) 3.YoungButStrong (Elena) 4.My Blog,My Lifeby JinJin - 網頁設計與語法(HTML/CSS)
樣式二 youngbutstrong 下載網址 http://www.serendipity-templates.org/template/60-youngbutstrong/ ========================================================== Serendipity templates youngbutstrong 為架構清楚的Blog樣式,DIV建構方式清楚明瞭,圖像也使用較簡潔的設計方式 首先了解基本的檔案內容: 相較於 Brown-paper 有較多部分設定的樣式檔(.tpl ) 1.主要以index.tpl 作為部落格基本架構設定,為基本的Layout編排架構設定 2.entries.tpl:以文章為單位,不同形式的設定,內容較為複雜 3.plugin_calendar.tplby JinJin - 網頁設計與語法(HTML/CSS)
以Brown-paper咖啡色系樣式為基礎 修改的藍紫色系小花版本 語法修改說明如下: http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/paper-001.jpg 原Brown Paper (預覽圖) Brown Paper (小花版預覽圖) Brown Paper (Angela第一版預覽圖)by JinJin - 網頁設計與語法(HTML/CSS)
CSS參考網站 CSS語法教學攻略篇 http://andyliudesign.idv.tw/31 CSS 語法教學 http://css.1keydata.com/tw/ 語法 | 基本的css語法縮寫 http://blog.mukispace.com/css-shorthand/ CSS 樣式表簡介 http://www.pt.ntu.edu.tw/hmchai/ptcomputer03_2/hcss/cssintroduction.htm CSS教程(簡體)http://www.dreamdu.com/css/ =============================== 背景控制: /* XXX */(註解):註解幫助自己看懂,這部分程式不會執行!XXX可以自行填寫! textarea(文字區塊):這個部分稱作CSS樣式定義類別,一by JinJin - 網頁設計與語法(HTML/CSS)
部落格或網路日誌(英語:Blog,為Web Log的混成詞)是線上日記演化而成的,在線上日記中可記錄個人的生活和圖片。 而大部分作者稱自己為日記作者或記者。是一種通常由個人管理、不定期張貼新的文章、圖片或影片的網頁。 目前有非常多不同形式的部落格 ================== 本網站所使用的是 Serendipity - a PHP Weblog/Blog software 網站 http://www.s9y.org/ 部落格 http://blog.s9y.org/ 樣式下載 http://www.serendipity-templates.org/ ================== The free FTP solution FileZilla http://filezilla-project.org/ ======by JinJin - 網頁設計與語法(HTML/CSS)
樣式一 Brown-paper 下載網址 http://www.serendipity-templates.org/template/15-brown-paper/ ========================================================== Serendipity templates Brown-paper 為較簡單的Blog樣式,為入門了解html架構與css設計樣式的範例 首先了解基本的檔案內容: 1.主要以index.tpl 作為部落格基本架構設定,為基本的Layout編排架構設定 2.entries.tpl:以文章為單位,不同形式的設定,內容較為複雜 3.style.css:設計樣式 4.info.txt:版權聲明 5.preview.png 預覽圖片 ================by JinJin - 網頁設計與語法(HTML/CSS)
9/5文茜世界週報-世界設計之都 首爾躍升世界級城市 http://www.youtube.com/watch?v=SIHHWuD-3ag 首爾改變可以創意到什麼樣的程度,譬如說他的火車站是可以以,6萬9千個LED燈組成的,像俄羅斯魔術方塊一樣,他的公共汽車站也令人非常驚嘆,因此得到了德國IF的設計大獎,還有他的仁寺洞,這是很有名的賣場,到那個地方去,你到處可以找到IT服務的,就是不斷的可以在裡頭,可以使用各種網路通訊,各種寬頻合一的各種服務,而且你還可以留下你自己的影像。 =========================================================== 9/5文茜世界週報-時尚科技新首爾 夜晚綻放迷人風華 http://www.youtube.com/watch?v=6R8rsObXDhE 首爾by JinJin - 99-2《中國》竹視傳二A-在地設計創意美學