教研中心研習:JS(Jquery)動態網頁程式設計-基礎(1070709-10)

日期:107年7月9、10日

地點:新北市教研中心

主題:JS(Jquery)動態網頁程式設計-基礎

講師:正義國小資訊組長詹博文

上課講義:Jquery 研習簡報

課程使用環境和軟體:

jQuery

jQuery引用方法:

<scriptsrc="./jquery-3.3.1.min.js"></script>

JavaScript 簡介:

作業練習:

一、輸出下列資料:

*
**
***
****
*****
******

參考網站:

教研中心研習:HTML5+CSS網頁設計-基礎篇(1070705-06)

日期:107年7月5、6日

地點:新北市教研中心

主題:HTML5+CSS網頁設計-基礎篇

講師:Amos Lee

課程使用軟體:

網頁開發工具簡介:

網頁開發工具

網頁開發相關教學資源:

Brackets 網頁設計 練習教學影片

主課程:HTML 5

主課程:CSS

安裝中文Lorem外掛:

  1. 按下Ctrl+Shift+P
  2. 輸入「Install Package」
  3. ChineseLoremIpsum
  4. 在網頁文件中,打 CTlorem,再按 Alt + C

CSS Box Model

名稱翻譯:

  • margin: 外距
  • padding:內距/留白/墊充

可見尺寸:width + padding + border

佔據空間尺寸:width + padding + border + margin

例如:

.amos{
  width: 200px;
  padding: 15px;
  border: 10px solid #f00;
  margin: 20px;
}

可見尺寸:200 + 15*2 + 10*2 = 250
佔據空間尺寸:200 + 15*2 + 10*2 + 20*2 = 290


設定 box-sizing: border-box; 後:
可見尺寸:width
佔據空間尺寸:width + margin

例如:

 .box{
   width: 400px;
   background-color: #ccc;
   border: 25px solid #f00;
   padding: 25px;
   box-sizing: border-box;
 }

可見尺寸:400


CSS Tools: Reset CSS:

Reset CSS 過度Over的作法:

 <style type="text/css">
   *{
     margin:0;
     padding: 0;
     line-height: 1;
     list-style-type: none;
   }
 </style>

版面配置:

RWD 網頁設計

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Bootstrap

新北市107年度程式軟體應用研發研習(1070627)

日期:107年6月27日

地點:新北市教研中心

研習重點摘要:

一、Sass

二、CodeIgniter

三、[Alex 宅幹嘛] 教學影片

從 CSS 到 SASS (SCSS) 超入門觀念引導

從 jQuery 入門到認識 JavaScript

Javascript 30

網站開發直播主題集合

 

教研中心研習:新北市 OpenID 服務應用(1061114)

日期:106年11月14日

地點:教研中心

講師:李宗龍老師

公文:

課程相關網站:

課程相關程式下載:

Django 課程研究

高慧君老師 Django 課程講義

課程內容:

學習資源: