綜合應用:CSS+DIV Position+Scrolling 練習 (作業範例下載)

<Div >可以設定一個Division / Block 的區域來放置圖片、文字,如同Office Word中的文字框功能,相較於html中 <Table>的指令,排版Layout的自由度較高,因此在位置、對位也需要更多指令來設定。

同類型的指令為<Span>,但Span較常用於小範圍的文字區域設定(類似文字+<br>)。

position:static :預設值 ,若設為static時則由上而下排列 。
position:fixed :固定位置,將Div/Span固定在指定位置,不隨瀏覽器捲軸捲動而改變位置。
position:relative:相對位置, 可用top、right 、bottom和 left來放置其位置。
position:absolute:絕對位置, Div/Span會隨著瀏覽器內的指定位置,隨著瀏覽器捲軸(Scroll)捲動而移動。
position:inherit:繼承父層(parent)的 position 定位的屬性值,較常用於在Div中的Span或是P文字段落的對位。

繼續閱讀

發表於 課程公告 | 發表迴響

[104]學年-期中馬拉松題目

  • 請於 2014/5/19(四)下午 16:30~18:30內完成。
  • 依照分組,兩人一組作答,可參考線上講義。
  • 完成後上傳至學校 FTP,將網址連結mail至eric@techart.tnua.edu.tw。 。
  • 限定只能在教室內完成,請勿與組員以外的同學交談。
  • 正確作法參考

繼續閱讀

發表於 課程公告 | 發表迴響

彈性頁面練習

圖檔1: 下載

圖檔2: 下載

發表於 課程公告 | 發表迴響

[104學年度]學校主機

除了可以使用申請的免費/付費主機,也可以使用學校主機。
帳號:學號
密碼:如資料
發表於 課程公告 | 發表迴響

[104學年] 課程介紹

※公開使用本網站教材,需經過同意※

課程名稱:網頁創意設計 (國立臺北藝術大學_新媒體藝術學系大一下學期課程)

  • 任課教師:
    黃裕雄(大雄) / eric@techart.tnua.edu.tw
    許素朱(小牛) / suchu@techart.tnua.edu.tw
    _____
  • 上課時間:大學部 週(四) 16:30PM-18:20PM
  • 上課地點:研究大樓一樓 R106 電腦教室
  • 課程網址:http://web.oddist.org

【課程目標】:
網路是目前新媒體中重要的媒介之一,本課程是大一的課程,是針對大一還不熟稔複雜程式設計的同學而規劃的網頁藝術〝創意〞(Web Art)的課程,除期盼同學能成為網頁設計者,更重要的是成為創意網頁設計者。針對網路資訊時代來臨,本課程乃期望訓練一批能因應這個時代的網頁藝術〝創意〞人才。本門課程,將從〝解〞與〞構〞網頁,來說明網站設計原則,課程規劃有網頁程式碼HTML撰寫、CSS使用、Javascript使用、網頁畫面構成設計、網頁套裝軟體使用用。另外,配合國際在HTML 5的發展潮流,本課程也將針對HTML 5 相關創意設計工具進行應用教學,帶領學生未來可發揮在網頁空間中的互動創意設計。

繼續閱讀

發表於 [104學年] 課程, 課程公告 | 發表迴響

[104學年] FTP &HTML 編輯軟體推薦

本週介紹FTP上傳工具與HTML編輯軟體,同學們可以在課後練習,未來課程中這些工具也會經常使用,不論使用Windows和Mac的同學都可以自行安裝不同版本。

延伸閱讀:Filezilla 操作說明

 

發表於 [104學年] 課程 | 發表迴響

受保護的文章:[104學年] 課程分組

該內容受密碼保護。如欲檢視請在下方輸入你的密碼:

發表於 [104學年] 課程, 課程公告 | 輸入你的密碼方能觀看迴響。

[103學年度]期末作業-學校主機

除了可以使用申請的免費/付費主機,也可以使用學校主機。
帳號:學號
密碼:身份証字號(有分大小寫)
發表於 課程公告 | 發表迴響

綜合應用:基礎選單(MENU)在CSS與JavaScript的兩種撰寫方式

1.文字方式:(完整範例下載

使用<ul>+CSS設計"文字"的基礎選單的樣式
<ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
</ul>

2.圖片方式:(完整範例下載

繼續閱讀

發表於 [103學年] 課程 | 發表迴響

JavaScript 測驗練習

第一題: for迴圈

1. 利用JavaScript 的for 迴圈設定50~1數字中,抽出"偶數",到1為止(倒數)。
2.利用Chrome瀏覽器console 介面編寫與測試。

提示: for(var i=數字; i >=<數字  ; i+或-=數字 ),for(迴圈變數初值;迴圈條件;迴圈變數增/減量)

解答
<script>
for(var i=50; i>=1;i-=2) ///從50開始 ,到1為止,遞減2
{   
 console.log(i)
 confirm(i)
 }
</script>

第二題:prompt彈出視窗 、if/else 判斷式

1. 利用JavaScript 詢問使用者的年齡(age),並讓使用者填入。
2.依照不同年齡,使用if/else 判斷。如果年齡小於18,以consloe顯示"Grow up!";若大於18,顯示"You are an adult!"。
3.須同時以console與confirm輸出方式顯示結果。
3.利用Chrome瀏覽器console 介面編寫與測試。
繼續閱讀

發表於 課程公告 | 發表迴響