成為網頁設計師的第一步！快速上手 HTML & CSS 展開你的網頁設計之旅！
ฝัง
- เผยแพร่เมื่อ 26 มิ.ย. 2024
- 註 1：10:40 秒簡報中的 margin 中文誤植為「內邊距」，應為「外邊距」。
註 2：06:37 img 應該是「行內元素」而非區塊元素 (感謝網友留言指出)。這個錯誤是我的疏忽，對於造成的困惑向大家說聲抱歉 ~
🔹 內容綱要
00:00 開場白
01:19 建立 HTML 文件結構
02:50 HTML 常用標籤
06:54 如何用 CSS 修改樣式
09:29 HTML5 語意標籤（Semantic Elements）
10:28 CSS 盒子模型 (Box Model)
14:08 CSS Position 佈局
16:12 CSS Class 選擇器
17:42 CSS Flexbox 佈局
22:38 HTML 表單設計
24:31 使用 CSS 固定導覽列
25:22 CSS 響應式設計 (Responsive Design)
🔹 教學資源
練習檔 (載點一) tinyurl.com/2bs8dwom
練習檔 (載點二) share.weiyun.com/JCw3NMMj
HTML & CSS 原始碼 tinyurl.com/29n9ljru
Visual Studio Code 下載：code.visualstudio.com/
🔹 小額贊助 Papaya 電腦教室
方式一：加入頻道會員 (加入後可觀看會員專區的影片喔) tinyurl.com/sxt3d2b
方式二：在 TH-cam 影片右下角點擊「超級感謝」按鈕 🎉
#HTML #CSS #網頁設計 #響應式 #教學
當了多年工程師，主要以後端為主，前段半桶水，很多專業都是一知半解。
PAPAYA老師短短半小時，大增一甲子功力，說明淺顯易懂，沒有半句廢話，範例精美又實用
台灣最強講師當之無愧了!!
想問後端工程師用到的數學會不會比前端還多還要難，我非本科然後數學又不太好
@@dan_rr01 您好，我覺得要看開發系統而定，如果系統本身就需要一些數據計算，很可能就需要一些數學知識
三十分鐘的影片，比我大學某堂課老師花一個學期上的還清楚
沒錯，對比其他人來說，就一個a標籤就講半天了😂
黑马程序的老师能讲80节课
22:32 22:3❤ 22:44 3
23:45 23:47
PAAYA老師真的太強了 ，而且講解得很仔細
之前上政府課的時候，聽裡面的講師說都不懂這個是在幹嘛的
老師邊執行的時候畫面也會跟著做變動，讓人一目了然
真的很謝謝PAPAYA老師持續做這些影片 ❤
PAAYA
老師真的太強了，這影片的內容相當於是我修了一學期網頁設計的總量，而且還更淺顯易懂！
快笑死😂
老師真的太神了 之前有學一些HTML跟CSS 但有些觀念還沒有很清楚 看完又讓我拾起熱情繼續學習 希望有機會可以看到老師講解 javascript !
老師把我一個月學的濃縮成30分鐘精華，連漢堡表單跟RWD都教了，期待老師後面的JS課程延續
敲板 javascript 😂
👍🏻期待下一集Papaya老師能一次性教如何使用HTML,CSS和JavaScript。
Oh My God! 最近剛好有接觸到CSS，馬上就看到P大的教學，超級淺顯易懂，又用非常實用的例子示範解決我好多疑惑～太感謝了！
謝謝PAPAYA老師總是無私的制作、分享這些教程，現在即便上班了，也會花些時間來看 很感恩
謝謝老師！以前在大學有學過DW，但是完全聽不懂，進度很快又跟不太上，這裡資料整理的很齊全，不懂得還能一直看！真的是我的福音太謝謝了
老師真的太佛又太神了！
真的是濃縮精華！
而且濃縮又不馬虎講解又很仔細！
真的很感謝papaya電腦教室每次都帶給人驚喜又實用的教學🥹
內容清晰、闡述簡單明瞭、教學動畫生動，謝謝老師!
哇～老師太強了！如果老師繼續這樣教下去，我們一直學，相信做網站的能力真的會被你這影片普及！
老師能否教我們怎樣做自己的Portfolio網站？無論如何，先感謝老師。
我見到最佳的教學影片，完整易懂。
你这个课讲的是真的好，给你个大大的赞👍，加油，继续出好课程
謝謝PAPAYA老師用心的解說 打通學習網頁設計的要領!
老師真的是太厲害了，這麼好的影片教學根本造福社會大眾
短短半小時的影片，就教了學校老師大概6堂課的內容，而且講的淺顯易懂。
老師真厲害~我自學了很久但也有很多地方是我沒有用過的耶！
期待您下次能分享後端得python 及 javascript 的用法，目前我撰寫網站大部分都是遇到這個困難
例如我想要有一個可以給大家互相講話的地方，但是做不好後台設計
實在是太神奇了。需要啥來啥😍😍😍
太感謝了！雖然大學時念的是多媒體設計，設計網頁也是核心科目之一，但出來工作后幾乎都沒有用到。最近教會讓我做網頁，剛好刷到這視頻，真的讓我好好地溫習了一遍。真的太謝謝你的用心做這影片，太有幫助了！
太厉害了，这种讲解能力真的令人震惊🎉
謝謝Papaya老師讓我學到不少用法，又好懂！我目前這學期專題正在自學網站設計，正好看到這個新影片，覺得好幸運而且超實用！！！！敲碗以後有機會看到老師教學javascript 🙏🏻🙏🏻
😮頭香！要開始網站教程了
老師好厲害，之前線上自學HTML和CSS卻一知半解，讓我不敢再繼續學JavaScript，謝謝老師詳細的解說，期待有機會能看到老師其他有關網頁設計的課程❤
太厲害啦~簡單明瞭，謝謝PAPAYA老師
非常期待後端的內容！！
謝謝！你是最棒的教學老師！
強，實例講解整理得非常棒，PAPAYA真的好會教~。
下集該講 JavaScript 了吧
讲的又好又清晰，真的是太棒了，谢谢
太强了，学校分那么多学期学的HTML CSS，PAPAYA老师只需要半个小时就教清楚了❤。
期待了很久这个前端课程，谢谢 老师
謝謝老師的講解!! 真的太太太感謝了!
真的很愛這些影片 謝謝❤
PAPAYA是我见过会最多电脑软体的，也是中文教学中的最强者！
哇，完美製做耶，期待出教學課程
还有，不敢相信，前几天看了老师的pgt教程，我就让bing ai给我写一段vba代码好输入数据，没想到真的弄出来了，以前只是看过一丢丢vba内容，太赞了
谢谢老师，讲的真的很好！希望可以继续出一个系列讲解网站javascript的开发
PAPAYA老師，我的超人❤
10:40 抓個錯字，margin（外邊距）
製作教學影片辛苦了，真的非常用心！
已在字幕中加上註解了，非常感謝您的提醒 😊😊
媽呀! 大手筆! 我真的嚇到了!
PAPAYA終於開啟了當代網頁基石的課程專案!
未來所有的系列影片都會收入典藏!!!
简洁，易懂 🙏多谢！
木瓜老師超猛，比很多老師講的很好也更仔細
完美的教程❤❤❤期待papaya老師接著出 後端的教程java php
太夸张了！做这么好的视频！papaya总是有惊喜！
看到傻掉😮
謝謝老師慷慨大方的分享😊
Wow，從python到前端！papaya真的太神啦！！！！！
很厲害教得很詳細
你是神！我買了超多線上課程還是不太會，但是你的完全暸解..
太棒啦，讲解简单直接高效～做好了首页设计～可是问题来了，下一步内页和内链教程
老師有讀心術吧！最近才在想用Midjourney生成的圖片來製作一個網站，結果就看到了這支教學影片。已跪著看完，最後居然還有響應式網站教學，弟子感激涕零，謝謝老師❤
很棒的教程
謝謝老師！
真的很淺顯易懂欸！ 太神啦
最近恰正著手了解網頁設計，這難道是吸引力法則嗎！（感動）
敲碗與後端伺服器（MS SQL）互動的教學 這個真的太棒惹🎉
居然！💙最近正要學的說
實例式教學，很清晰，謝謝
連前端都能教，真的猛
說明淺顯易懂，非常感謝說明，以前學習都很片段，透過這個影片大幅度的都串起來了
很利害的教程 謝謝
太精彩了。真的希望能够推出前端设计的类似教学视频，或者开个bootcamp，我一定报名
老師真強
老師講解非常清楚，十分期待下一期
老師真得是太厲害了, 怎麼會這麼多東西😂 期待下一集網頁設計師相關的影片
我也非常期待😂
謝謝, 很清楚實用!
看完後
讓我更加了解
Wordpress真香
但還是要學點css更方便操作
希望再有一期，介绍流行的网页排版和要素，比如可以滑动的图片。
看了老師的教學我找到工作了
感动😭
謝謝, 很受用
十分期待JavaScript，我已經透過影片教學做好HTML和CSS
都是很常用的基础知识，想自学还是w3chool更多内容
封神🥰🥰
期待后端的内容！
謝謝老師讓我複習大學必修
感謝PAPAYA大大，跟着完整做了一遍。這樣的tutorial太容易理解了。贊贊贊！
希望以後多出課程，會願意買付費課程的，毫不猶豫。
只在26:17 logo居中設置的邏輯，腦袋裡還沒有太懂。（相信多練習以後會明白的）
header h1 {
left:50%;
transform:translateX(-50%);
}
left:50%; 是把元素的左邊緣將定位在其容器的中間
而 transform:translateX(-50%); 將 元素水平平移其自身寬度的 50% 向左
所以最後的位置是水平居中
@@jerry-lu 明白了，解釋得很清楚，謝謝你！這幾天還做了其他練習，發現居中有很多辦法，大大的這個屬於比較費腦的。😛
好讚
太狠了老師
神人，我excel也是看老師的影學的
谢谢老师~期待后续的JS教程
超讚
期待下一期的資料庫和js~~~
天啊 這方面我是門外漢
不過很喜歡老師的精華講解
會讓人產生興趣 把複雜變簡單的感覺
推謝謝
喜欢，我要学习！
希望老师能否讲一些网络安全网络工程方面主题系列 多谢！
謝謝PAPAYA老師
再繼續教後端我的下巴就要掉到地上了，有夠完整的教程，讚喔
老师，JavaScript 也靠你了！
現在連網頁都來了，會不會以後連unity也教
一定會的，等待中
一定要的吧
之前連Blender都交了，Uinty只是時間的問題😂
UE5呢😂
10:42 margin 外邊距寫成內邊距
推
好棒的教學，實在太強了
可以介紹JavaScript在網頁上的應用嗎?
讚讚讚
我愛你
期待您讲一下vue
建議都講基礎網頁了 順便把業界實際會用的框架講一講 更有實際幫助~ Vue....React...
在B站看过你的视频，现在在这里又看到了
希望教網域和伺服器如何使用和購買
想請問老師，在CSS裡使用background-image:url插入圖片的語法部分，語法都有完整按照教學，也有確認路徑皆正確，VS CODE本身也沒有偵測的語法有錯誤，但實際在網頁裡圖片卻顯示不出來，除了圖片外的其他語法設定皆正常，是有哪些可能的因素呢~