งานมอบหมาย : เว็บเพจ 3 หน้าแบบ responsive (หากเพิ่มอีก 2 หน้า จะเพิ่มอะไร)
|
|
หน้าแรก (index) เป็นสารบัญ ดัชนี หรือบทนำ ที่ฉายภาพรวมความเป็นตัวเรา แต่ไม่ลึกเท่า โปรเจค หรือ เกี่ยวกับเรา หน้าแรกของนักศึกษาน่าจะมีเนื้อหา ที่มุ่งขายตัวเรา ตัวอย่างหัวข้อดังนี้ - คนต้นแบบมืออาชีพที่ประทับใจ - กลุ่มที่สนใจที่เราติดตามประจำ - บทความ ประเด็น หรือข่าวสำคัญ - เว็บไซต์ที่แนะนำ - รายการผลงานเด่นที่สะท้อน skill - ข้อมูลการติดต่อ หรือ อวตารของเรา http://www.thaiall.com/webmaster/responsive/index.html |
|
|
หน้าโครงการ หรือโปรเจค (Project) เป็นการขายตัวเรา (ถ้ามี linkedin จะดีมาก) ที่ผ่านมาสวมบท "นักศึกษา" แล้วทำอะไรไปบ้าง มีงานอะไรที่เราทำส่งอาจารย์แล้วประทับใจ เทอมหนึ่งเรียน 6 วิชา ๆ ละ 1 งานก็ปีละ 12 งาน เลือกนำมาแบ่งปัน เพราะนั่นสะท้อนให้เห็น skill เว็บเพจหน้านี้จะบ่งบอกอัตลักษณ์ของเรา ผลงานต้องเป็นที่ประจักษ์ อยู่ในความทรงจำไม่ได้ แนะนำว่าผลงานทุกชิ้นให้เขียนเป็นบล็อก จะทำเอง ร่วมกัน หรือฟังเขามาก็เขียนบล็อกได้ แต่ถ้านักศึกษาไอทีจะต้องมีโฮมเพจเป็นของตนเอง แล้วเชื่อมทุกอย่างเข้ากับ social media + blog เนื้อหาในหน้านี้ มีรายละเอียดผลงานที่ครบถ้วน มีที่มา เนื้อหา สรุป และลิงค์ดาวน์โหลดจะดีมาก ทั้งหมดในหน้านี้ก็จะสะท้อน skill เพื่อขายตัวเรา http://www.thaiall.com/webmaster/responsive/project.htm |
|
|
หน้าเกี่ยวกับเรา (About me) ความเป็นส่วนตัวสำคัญมาก แต่การอยู่ในสังคมก็ต้องลดความเป็นส่วนตัวลงบ้าง และไม่เปิดเผยอะไรที่ไม่มีวัตถุประสงค์ที่ชัดเจน เราต้องเป็นนักประชาสัมพันธ์ตนเองอย่างมีเป้าหมาย นักศึกษาต้องบอกว่าตนเอง มี skill อะไร มี project อะไรผ่านมือมาบ้าง มี avatar ให้ว่าที่นายจ้างไปติดตามที่ไหน มี experience กับอะไรที่เป็นงานอดิเรก มี interested กับอะไรที่เป็นแผนในอนาคต แต่ถ้าทำงานในองค์กรเมื่อใด ระดับความเป็นส่วนตัว จะแปรผันตามนโยบายขององค์กรทันที http://www.thaiall.com/webmaster/responsive/aboutme.htm |
HTML (HyperText Markup Language)
http://www.thaiall.com/html/html.htm
http://www.thaiall.com/html5
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
http://www.w3schools.com/html/default.asp
ต.ย. 1
<body id=main>
<table border=1 width=80% bgcolor=yellow align=center>
<td>a</td><td>b</td>
<td>c</td></table>
ต.ย.2
<table class=m_still>
<tr><td>a</td><td bgcolor=#9ccfff width=100>b</td><td>c</td>
<td bgcolor=#9ccfff width=100>d</td></tr>
<tr bgcolor=#9ccfff><td colspan=4 height=5>e</td></tr>
<tr bgcolor=#9ccfff><td colspan=3 height=400>f</td><td>g</td></tr>
</table>
ต.ย.3
<table style="width:230px;height:180px;" align="left"><tr><td valign="top">
a</td></tr></table>
<table style="width:230px;height:180px;" align="left"><tr><td valign="top">
b</td></tr></table>
<table style="width:230px;height:180px;" align="left"><tr><td valign="top">
c</td></tr></table>
ต.ย.4
<table class="m_still"><tr><td>
<fieldset><legend><b>a</b></legend>
<table bgcolor="#dddddd">
<tr bgcolor="#ffffdd"><td>
<table class="m_min300"><tr><td valign="top">
<pre>a
B
C
</pre></td></tr></table>
<table class="m_min300"><tr><td valign="top">
D
</td></tr></table>
<table class="m_min100"><tr><td valign="top">
E
</td></tr></table>
</td></tr></table>
</fieldset>
</td></tr></table>
https://www.color-hex.com/color/ffddff
|
12 #ffff00 |
3 6 #ffddff |
|
|
4 7 #ddffff |
5 200px |
|
|
#ddffdd 89 |
||
แนะนำเว็บไซต์ (website guide)
1. http://www.thaiall.com/html
2. http://www.thaiall.com/html5
3. http://www.thaiall.com/web2
4. http://www.thaiall.com/html5/table.htm
5. http://www.thaiall.com/web2/prettify.htm
6. https://www.facebook.com/groups/1163015470385414/permalink/2061703150516637/ (std prettify)
7. http://www.thaiall.com/web2/github.htm
8. http://www.thaiall.com/office/wordpage/
9. http://www.thaiall.com/html/website49.ppt
10. http://www.thaiall.com/office/wordpage/slides.pptx
11. http://www.thaiall.com/webmaster/somee
12. http://www.thaiall.com/learn/useftp.htm
13. http://www.thaiall.com/html/responsive.htm
14. http://www.thaiall.com/java
15. https://thaiall.github.io/www/web2/blank_menu.htm
16. http://www.thaiall.com/source
17. http://www.thaiall.com/java/canvasjs
18. http://www.thaiall.com/java/bootstrap.htm
19. http://www.thaiall.com/isinthai
20. http://www.thaiall.com/android
21. http://www.thaiabc.com/marry.htm
22. http://www.thaiall.com/web2/lightbox.htm
23. http://www.thaiall.com/update.htm
24. http://www.facebook.com/thaiall
25. http://www.facebook.com/ajburin
26. http://www.thaiall.com/me/picme.jpg
27. http://thaiall.github.io/programming-page/me.png
CSS (Cascading Style Sheet)
http://www.thaiall.com/web2/rsp61.css
http://www.thaiall.com/webmaster/responsive/rsp61s.css
http://www.thaiall.com/web2/rsp71.css
https://thaiall.github.io/www/web2
ความหมาย . คือ คลาส ส่วน # คือ id เช่น <body id="main"> <table class="topbar">
Section 1
#main{background-color:#000099;font-family:microsoft sans serif;font-size:12px;margin:0px 0px 0px 0px}
Section 2
fieldset{margin:10px 0px 0px 0px;padding:0px}
legend{background-color:#444444;color:#ffffdd;font-size:14px;display:block;padding-left:5px;padding-right:10px;border:2px solid #f9f9f9}
Section 3
.topbar{width:100%;font-size:20px;background-color:black;color:white;text-align:center;height:90px;padding:0px;border-spacing:0px;border-style:none}
.topbar a:link, .topbar a:visited{color:#aaffaa;text-decoration:none}
.topbar td {text-align:center}
.foot_text{color:yellow;text-decoration:none}
Section 4
.m_still{width:728px;background-color:white;margin-left:auto;margin-right:auto;padding:0px;border-spacing:0px}
.m_hidden{width:728px;vertical-align:top;margin:0px 0px 0px 0px;margin-left:auto;margin-right:auto;padding:0px;border-spacing:0px}
.m_min300{width:300px;float:left}
.m_min400{width:400px;float:left}
Section 5
@media only screen and (max-width:320px) {.m_still {visibility:visible;width:310px} .m_min400, .m_min300{width:300px;} .m_hidden {visibility:hidden;display:none} }
@media only screen and (min-width:321px) and (max-width:375px) { .m_still{visibility:visible;width:321px} .m_min400, .m_min300{width:321px;} .m_hidden{visibility:hidden;display:none} }
@media only screen and (min-width:376px) and (max-width:414px) { .m_still{visibility:visible;width:376px} .m_min400, .m_min300{width:376px;} .m_hidden{visibility:hidden;display:none} }
@media only screen and (min-width:414px) and (max-width:728px) { .m_still{visibility:visible;width:414px} .m_min400, .m_min300{width:414px;} .m_hidden{visibility:hidden;display:none} }
Section 6
#bar_topnav{width:100%;height:30px;background-color:#000044;margin:0px 0px 0px 0px;padding:0px;border-spacing:0px;border-style:none}
Section 7
ul.topnav{list-style-type: none;margin:0px;padding:0px;overflow:hidden;background-image:url(rspbar.png)}
ul.topnav li{float:left}
ul.topnav li a {display:inline-block;margin:0px;color:white;text-align:center;padding:5px 5px;text-decoration:none;font-size:10px;height:20px}
ul.topnav li a:hover {color:yellow;}
ul.topnav li.icon {display:none}
Section 8
@media screen and (max-width:414px){
ul.topnav li:not(:first-child) {display: none}
ul.topnav li.icon{float:right;display:inline-block}
ul.topnav.responsive {position: relative}
ul.topnav.responsive li.icon{position: absolute;right:0px;top:0px}
ul.topnav.responsive li{float:none;display:inline }
ul.topnav.responsive li a {display: block;text-align: left}
}