What is MusicStyle for U?

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

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

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

“NextBeat.Com”

glur1

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++ เป็นการเขียนโค้ดทั้งหมด โดยหน้าโปรแกรมตามด้านล่างเลย

Notepad-plus-plus

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

1.ส่วนของ Home Page

glur1

รูปแบบ Code

HTML

homepage code

ในส่วนของ 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>

<DIV ID= “container”>

CSS

homepage code1

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

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


2.ส่วนของ Upper List

ul code

รูปแบบ Code

HTML

ul1 code

ส่วนของ 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

ul2 code

การจัดรูปแบบและลูกเล่นสำหรับ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

section code

รูปแบบ Code

HTMLsection1 code

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

<SECTION>
<ARTICLE>
<BR></BR>
</ARTICLE>
<ARTICLE>
<div class=”center”>
<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/158M5KiZceg” align=”top” frameborder=”0″ allowfullscreen>
</iframe>
</div>

</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>

CSS

 

section2 code section3 code section4 code

สิ่งสำคัญของ CSS ส่วนนี้คือ การกำหนดค่าขนาดของ Section Aside การกำหนดตำแหน่งของ Video และส่วนของ Background ดังนี้

section{
float:left;
width: 1200px;

}

aside{
float:left;
width:1200px;
}

.center {
margin: auto;
width: 70%;
}

html {
background: url(bg.jpg) no-repeat center fixed;
background-size: cover;
}


4.ส่วนของ Footer และลูกเล่นการ Opacity รูป

foter code

รูปแบบ Code

HTML

foter1 code

ส่วนสำคัญของFooter ก็คือการใส่ Credit ของผู้พัฒนาเว็บไซต์ ดังนี้

<FOOTER>
<P>Copyright Mr.Sirichai Wongploychompoo Department Computer Engineering</P>
<P>Bankok University website 2016</P>
</FOOTER>

CSS

foter2 code

สิ่งสำคัญในส่วนนี้คือ การกำหนดขนาดของ Footer และการใส่ Opacity ดังนี้

footer{
background:white;
color:black;
padding:1px;
clear:both;
}

img {
float: left;
display: block;
margin: auto;
}

img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}


จบกันไปแล้วนะครับสำหรับรูปแบบ Code ถ้าสงสัยหรืออยากทราบรายละเอียดเชิงลึกสามารถดูได้ที่ Video นี้ได้เลยมีคำตอบให้พร้อมครับ

 

แหล่ง Source Code ในการเขียนเว็บไซต์


เป็นอย่างไรกันบ้างครับสำหรับเว็บไซต์ NextBeat หวังว่าจะถูกใจสำหรับผู้ที่มาเยี่ยมชมกันนะครับ ถ้าข้อมูลหรือได้ให้เนื้อหาที่ผิดไปขออภัยมา ณ ที่นี้ด้วยครับ แล้วเจอกันใหม่โอกาสหน้าครับสวัสดีครับ.

 

Sirichai Wongploychompoo
at GlurGeek.Com
กำลังศึกษาอยู่ที่ Department Computer Engineering,Bangkok University
ชั้นปีที่ 1.

Leave a Reply

© 2022 GlurGeek.Com