---
title: 網頁程式設計教學(114)
description: 114學年度資處科網頁程式設計教學
image:
tags: 教學, 網頁設計
robots: noindex, nofollow
GA:
---

:books: 資處科網頁程式設計教學(114)
===

:::info
:memo: :pushpin: :pencil2: :orange_book: :clipboard: :key: :pill: :warning: :no_entry: :arrow_right: :arrow_forward: :high_brightness: :bangbang: :question: :o: :x: :triangular_flag_on_post:
:star:
:::

## :green_book: 教學進度
{%pdf https://drive.google.com/file/d/1E3-VVcZbDHr6G41rPzuxNM-WqKMpjvsZ/preview
%}

## :green_book: 參考資料

:memo: 老師
* Email:email: [e-mail]
* Line:id: @878jnluy
* 第1次通訊先自我介紹一下姓名、班級、座號

:memo: **網站**

* 教學影片
* [動畫互動網頁程式入門 (HTML/CSS/JS)](https://youtube.com/playlist?list=PLzQk5dOLy-au5Qnf1Mh65-pq-NqCD0dpW)
* [動畫互動網頁特效入門](https://youtube.com/playlist?list=PLzQk5dOLy-aubgGsyZi2Pi-ptQfFzkPq-&si=jix10JpVeGc8Iq4H)
* [修課學員作品展1](https://2017.awiclass.monoame.com/proj/1)、[修課學員作品展2](https://2017.awiclass.monoame.com/proj/2)
* [hahow校園版 https://campus.hahow.in](https://campus.hahow.in)
帳號：你在彰商的email([e-mail])
密碼：s123xxxx

* 教學
* [十分鐘快速入門上手CodePen](https://israynotarray.com/other/20201020/1425713503)
* [IT邦幫忙2018_菜鳥前端奮鬥史](https://ithelp.ithome.com.tw/users/20107640/ironman/1462)
* [CSS 選取器(基本篇)卡斯伯](https://www.casper.tw/development/2021/09/11/css-selector/)
* 電子書
* [網頁設計電子書](https://drive.google.com/drive/folders/0ByGM-lH6LtyjNWxSSjlQU0JTcFk?resourcekey=0-AScLRATcZ75HgfMc1Fc1tw&usp=sharing)
* 相關網站
* [113學年度教學網站](https://hackmd.io/@James/113html)
* [codepen.io](https://codepen.io/)
* [github.com](https://github.com/)
* [六角學院_卡斯伯 www.casper.tw](https://www.casper.tw)
* [w3School簡體中文](https://www.w3school.com.cn/)
* [110下_第2次期中考同學作品](https://codepen.io/james-dp/full/bGLeBXV)
* [FANCY-BORDER-RADIUS奇妙的圓角](https://9elements.github.io/fancy-border-radius)

:memo: **其它**
* [FSCapture螢幕截圖錄影](https://cld.chsc.tw/~james/s/files/FSCapture104.zip)
<br>

:palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree: :palm_tree:

<br>

## :orange_book: 上課重點記錄

### :clipboard: 常用的 html 標籤

#### :memo: 常用1

* h1 ~ h6 標題（大->小）
* p 段落
* br 換行
* img 圖片
* a 超連結

==**實際程式碼**==

<iframe height="300" style="width: 100%;" scrolling="no" title="第一次上課測試" src="https://codepen.io/james-dp/embed/PoEgwyL?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

#### :memo: 常用2

* ol ul li 清單
* div 區塊（方形）
* css 屬性
* display: inline-block 顯示方式「行內區塊」
* border: solid 1px #rrggbb 框線（實線 1px線粗 框線顏色）
* border-radius: 5px 框線圓角半徑
* background-color: #00ffff 背影顏色
* a 超連結

==**實際程式碼**==

<iframe height="500" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/james-dp/embed/vYpqojx?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

#### :memo: 電子名片試作-1

==**實際程式碼**==

<iframe height="500" style="width: 100%;" scrolling="no" title="電子名片試作-1" src="https://codepen.io/james-dp/embed/LYQVXGG?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

#### :memo: 我的名片(114上-1期中考)

==**實際程式碼**==

<iframe height="500" style="width: 100%;" scrolling="no" title="我的名片" src="https://codepen.io/twjames/embed/yyOKrWb?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

#### :memo: 我的蛋糕到哪去了(114上-2期中考)

==**實際程式碼**==

<iframe src="https://codepen.io/twjames/embed/emZWwwa" loading="lazy" height="500" frameborder="no"></iframe>

#### :memo: 美麗城市(114上-3期末考)

==**實際程式碼**==

<iframe src="https://codepen.io/twjames/embed/RNazWjR" loading="lazy" height="500" frameborder="no"></iframe>