ทุกๆคนย่อมมี LifeStyle ที่แตกต่างกันไปเป็นธรรมดา แต่จะเป็นอะไรไหมถ้าวันนี้เราจะมาแชร์ Style ดนตรี ที่ตอนนี้กำลังจะเป็นแนวดนตรีที่ได้ยินติดหูแทบจะทุกที่ ดนตรีแนวนี้ไม่ใช่แนวที่ไหนอื่น นั่นก็คือ EDM

ต้องพูดก่อนเลยว่าปัจจุบันนี้ดนตรี Electric ในบ้านเรานั้นกำลังได้รับความนิยมมากขึ้นจากเมื่อก่อนเนื่องจากเป็นแนวเอาใจขาแดนซ์หรือจังหวะที่เอาใจวัยรุ่นเป็นพิเศษเพราะเอกลักษณ์ของดนตรี Electric นี้คือเสียงที่ได้มาจากซอฟแวร์คอมพิวเตอร์ในรูปแปปดิจิตอล BPM4/4 ช่วงระหว่าง 120 BPM ต่อนาที ไปจนถึง 200 BPM ต่อนาที เพียงมีคอมพิวเตอร์และโปรแกรมก็สามารถที่จะแต่งเพลงแนวนี้ได้.

วันนี้ผมมี Website ที่จะมาให้ทุกคนได้ชมและทำความรู้จักกับดนตรี Electric อย่างลึกซึ้งว่าเป็นแบบไหนโดย Website นี้มีชื่อว่า

“NextBeat.Com”

NextBeat.Com คืออะไร?

NextBeat นั้นเป็นเว็บไซท์ที่รวมรวมรายละเอียดต่างๆเกี่ยวกับดนตรีแนว Electric ไว้ทั้งหมดสำหรับผู้ชมที่มีความสนใจหรือต้องการที่จะศึกษาดนตรีแนว Electric
รวบรวมข่าวสาร ทุกความเคลื่อนไหวเกี่ยวกับวงการ EDM ทั้งหมดไว้ในนี้
Single ไหนฮิตโนใจจะถูกรวบรวมไว้ที่นี่ทั้งหมด
รวบรวมภาพบรรยากาศของเทศกาลดนตรี Electric Music Festival ทั้งไทยและเทศไห้ได้ชมกัน

รออะไรหล่ะครัช ไปชมกันเลย

“NextBeat.Com”

สามารถเยี่ยมชมตัวเว็บไซต์ได้จากลิงค์ด้านล่างนี้ได้เลยครับ

Link Download SorceCode and Data : NextBeat.Com (Download All Files)

“Teach-Code”

โดยโปรแกรมที่ใช้ทำเว็บไซต์คือ Notepad++ เป็นการเขียนโค้ดทั้งหมด โดยหน้าโปรแกรมตามด้านล่างเลย

ในส่วนถัดไปจะเป็นส่วนของการทำเว็บไซต์นี้ขึ้นมาจะประกอบไปด้วย Code วิธีการทำส่วนต่างๆ ผลของการ Run และสัดส่วนต่างๆ โดยใช้โปรแกรม Notepad++ ในการเขียนครับ

1.ส่วนของ Home Page

รูปแบบ Code

HTML

ในส่วนของ HTML ที่สำคัญคือส่วนของ Home Page นี้คือการกำหนดค่าของการอ่านตัวโค้ดใน notpade++ การลิงค์ส่วนของโค้ด CSS การกำหนดหัว TITLE ของเว็บไซต์ รวมถึงการกำหนดขนาดของตัวสัดส่วนเว็บดังโค้ดนี้โดยใช้เป็นคำสั่ง Container ดังนี้

<!DOCTYPE HTML>
<HTML lang=”TH”>
<HEAD>
<META charset=”utf-8″>
<TITLE>NextBeat.com</TITLE>
<LINK rel=”stylesheet” href=”main.css”>
</HEAD>

CSS

โดยตัวของ <DIV ID= “container”> นั้น จะกำหนดค่าใน CSS ดังนี้

#container{
width: 1200px;
margin:0 auto;
text-align:left;
}

2.ส่วนของ Upper List

รูปแบบ Code

HTML

ส่วนของ Upper List ใน HTML ส่วนสำคัญจะอยู่ที่ Navigation โดยการกำหนดค่าต่างๆในลิสต์ดังนี้ (โดยส่วนลูกเล่นการ Dropbox จะอยู่ในของ CSS )

<NAV>
<ul><a href=”index.html”><img id”www” src=”banner.jpg” style=”width:15.5%”/></a>
<li><a href=”http://www.edmhunters.com/top-100-djs/”>Artists</a></li>
<li><a href=”https://djmag.com/”>News</a></li>
<li><a href=”http://music.sanook.com/2379885/”>Style</a></li>
<li class=”dropdown”>
<a href=”javascript:void(0)” class=”dropbtn”>Festival</a>
<div class=”dropdown-content”>
<a href=”https://www.youtube.com/watch?v=Q8CaDITIhRc”>Thailand</a>
<a href=”https://www.youtube.com/watch?v=Hfg3RY3LCnY&list=PLYIuQCuGfrvdQubcIlUAoNcY4mfORhCI-“>Worldwide</a>
</div>
</li>
<li style=”float:right”><a class=”active” href=”http://www.bu.ac.th/tha/”>About</a></li>
</ul>
</NAV>

CSS

การจัดรูปแบบและลูกเล่นสำหรับUpper List ในการทำ Dropbox สามารถเขียนได้ดังนี้

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: red;
}

3.ส่วนของ Section, Aside และ Background

รูปแบบ Code

HTML

ส่วนสำคัญของตัวนี้คือ ส่วนของตัว Video โดยจะนำโค้ดจาก YouTube มาวางและส่วนของตัวลิงค์ภาพของ Section ดังนี้

</ARTICLE>
<BR></BR>
<BR></BR>
<ARTICLE>
<a href=”http://men.sanook.com/12301″>
<img id”www” src=”aside1.jpg” style=”width:50%”/>
</a>
<a href=”http://www.billboard.com/charts/dance-electronic-songs”>
<img id”www” src=”aside2.jpg” style=”width:50%”/>
</a>
</ARTICLE>
</SECTION>