Chatbox

Các bạn vui lòng dùng từ ngữ lịch sự và có văn hóa,sử dụng Tiếng Việt có dấu chuẩn. Chúc các bạn vui vẻ!
21/01/2010 16:01 # 1
Luckystar
Cấp độ: 2 - Kỹ năng: 3

Kinh nghiệm: 14/20 (70%)
Kĩ năng: 2/30 (7%)
Ngày gia nhập: 21/12/2009
Bài gởi: 24
Được cảm ơn: 32
Thiết kế website _ Thiết kế web nhạc bằng HTML


thông thường, hầu hết các trang web nhạc online đều sử dụng các ngôn ngữ lập trình web như PHP,ASP…kết hợp cơ sở dữ liệu (Access, SQL…) để thực hiện. Nhưng, với các bạn mới “làm quen với máy vi tính” thì việc này dường như quá sức. Bài viết sau nhằm hướng dẫn các bạn đã biết sơ qua ngôn ngữ web tĩnh HTML (thậm chí chưa từng học qua cũng không sao) cách viết một Web Site nhạc online bằng ngôn ngữ HTML.


Ngôn ngữ HTML vốn “dễ tính”, nên bạn có thể dùng bất kỳ chương trình soạn thảo nào để viết code (FrontPage, Dreamweaver, WordPad, NotePad, ETôi nói bậyTôi nói bậyTôi nói bậyPlus…). Theo tôi, nếu biết sử dụng Microsoft FrontPage hoặc Macromedia Dreamweaver thì bạn nên dùng một trong 2 chương trình này, còn nếu chưa biết sử dụng thì bạn dùng NotePad là tốt nhất, vì NotePad là chương trình tích hợp sẵn trong Windows lại nhỏ gọn, dễ sử dụng và nhất là chạy nhanh trên các máy tính có cấu hình thấp. Ở đây, tôi sử dụng NotePad để thiết kế (trong FrontPage và Dreamweaver thực hiện tương tự, nhưng trước tiên phải chuyển sang giao diện HTML).
Trang web nhạc online thường có 2 loại giao diện :

Giao diện thứ nhất : Trên trang web là danh sách bài nhạc, bạn click vào bài nhạc nào thì một cửa sổ WindowMedia sẽ hiện ra và chơi đúng bài nhạc đó.

Giao diện thứ hai : Bên trái trang web là danh sách bài hát, bên phải là khung WindowMedia, bạn click vào bài hát trong danh sách thì khung WindowMedia ở bên phải sẽ chơi đúng bài hát bạn đã chọn.

Điểm chung của cả 2 loại giao diện : bạn phải thiết kế nhiều trang HTML riêng biệt, mỗi trang dùng để chơi 1 bài nhạc. Ví dụ : bạn có 2 file nhạc là “bai1.wmv” và “bai2.wmv” thì bạn phải thiết kế 2 file tương ứng là “bai1.htm” và “bai2.htm” để chơi 2 bài nhạc đó. Bạn đừng lo ngại phải mất công thiết kế quá nhiều trang, bên dưới sẽ có thủ thuật để bạn thực hiện việc thiết kế rất nhanh.






Cách làm trang chơi nhạc : (ví dụ “bai1.htm” ở trên)

Thực hiện :
Mở NotePad : Vào Start>Run, gõ Notepad.exe rồi Enter.
Nhập đoạn code sau vào khung soạn thảo :
<html>
<body leftmargin="0" topmargin="0">
<embed src=”địa chỉ file nhạc” width=”128” height=”128”></embed>
</body>
</html>

Giải thích :

Phần “địa chỉ file nhạc” chính là url của file nhạc trên Internet, ví dụ : src=”http://www.freewebs.com/nhac/bai1.wmv

Width, height : chiều ngang và chiều rộng của cửa sổ Window Media sẽ hiển thị trên trang web.

Leftmargin, topmargin : Độ dày lề trái, lề trên của trang web

Sau đó, vào menu File>Save as , chọn thư mục lưu file, gõ tên file trong khung “File name” là “tênbàihát.htm” hoặc “tênbàihát.html” (Lưu ý : Tên file tốt nhất không chứa ký tự đặc biệt, không dùng tiếng Việt có dấu và không chứa khoảng trắng. Ví dụ : bai1.htm)

Bây giờ bạn thử nhấp đúp chuột vào file vừa tạo để xem bài hát có nghe được hay không, nếu không được hãy xem lại đường dẫn file nhạc có chính xác hay không.

Các trang HTML chơi các bài nhạc khác thực hiện tương tự.

Thủ thuật : Sau khi save as trang thứ nhất (ví dụ : bai1.htm), bạn sửa source code ở ngay dòng src=”địa chỉ file nhạc 1” thành src=”địa chỉ file nhạc 2” rồi save as với tên bai2.htm…cứ thế thực hiện tuần tự các trang chơi nhạc.
Bây giờ bạn cần xác định sẽ chọn loại giao diện nào trong 2 loại đã đề cập ở trên rồi mới bắt tay thực hiện.



Làm trang danh sách bài hát :

Giao diện thứ nhất :

Thực hiện :
Vẫn trong chương trình NotePad, xóa đi các dòng lệnh (nếu có) rồi nhập đoạn code sau vào :
<html>
<head>
<script language="JavaScript">
function openWin(URL) { window.open(URL,'','width=300,height=280'); }
</script>
</head>
<body>
<a href="#" onClick="openWin('bai1.htm')">Tên bài hát 1</a><br>
<a href="#" onClick="openWin('bai2.htm')">Tên bài hát 2</a><br>
…...
</body>
</html>
Có bao nhiêu bài hát thì gõ bấy nhiêu dòng lệnh <a href=….></a></br>
Vào menu file>save as dưới dạng file .htm hoặc .html (ví dụ : nhac1.htm)

Giải thích :

Thuộc tính width, height : chiều ngang và dọc của cửa sổ popup chơi nhạc
Bai1.htm, bai2.htm : các file .htm đã tạo ra ở bước trên.

Thẻ <br> : Để mỗi tên bài hát ở 1 dòng khác nhau.

Giao diện thứ hai :

Thực hiện :
Xóa hết các câu lệnh trong NotePad, nhập đoạn code sau vào :
<html>
<body leftmargin="0" topmargin="0">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="2" align="center" height="80">NHẠC ONLINE</td>
</tr>
<tr>
<td width="50%">
<a href="bai1.htm" target="nhac">Bai 1</a><br>
<a href="bai2.htm" target="nhac">Bai 2</a><br>
……
</td>
<td width="50%">
<iframe name="nhac" src="bai1.htm" width="300" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe> </td>
</tr>
</table>
</body>
</html>
Vào menu File>save as dưới dạng file .htm hoặc .html (Ví dụ : nhac2.htm)


Giải thích :

Đoạn code trên có ý nghĩa : kẻ 1 bảng, dòng trên cùng là tiêu đề “NHẠC ONLINE”, dòng thứ 2 chia làm 2 cột : cột bên trái là tên các bài hát kèm liên kết đến file htm tương ứng, cột bên phải là 1 frame chứa cửa sổ window media để chơi nhạc.

Chú ý : <iframe name=”nhac” src=”bai1.htm”…>

Thuộc tính name : tên của frame, nếu bạn lấy tên khác thì thay đổi tên tương ứng trong thuộc tính target của thẻ <a href=….> ở trên. Ví dụ : <iframe name=”frame1”…> thì ở trên nó phải là <a href=”bai1.htm” target=”frame1”>

Thuộc tính src : địa chỉ file .htm mặc định của frame, ví dụ ở đây chọn src=”bai1.htm” thì khi gọi file nhac2.htm, frame sẽ hiển thị nội dung mặc định là nội dung trang bai1.htm cho đến khi click chuột vào 1 liên kết khác.

Các thuộc tính khác :

Frameborder : độ dày khung frame

Scrolling : Hiển thị thanh cuộn hay không

Marginheight, marginwidth : độ dày lề trên-dưới, trái-phải.

Đối với loại giao diện này, nếu danh sách bài hát quá dài trông sẽ rất xấu, vì vậy bạn nên cho mỗi trang hiển thị khoảng 15-20 bài hát, nếu còn bài hát khác thì ngắt sang một trang mới. Ngoài ra, bạn cũng có thể cho danh sách bài hát vào một iframe (Inline Frame) khác để cuộn dần xuống, tuy nhiên, tôi không trình bày phương pháp này vì trông không hay lắm.

Lời kết : Về cơ bản thì 1 web nhạc online viết bằng HTML chỉ có thế, tùy theo óc thẩm mỹ, bạn có thể thiết kế sao cho giao diện bắt mắt hơn, thêm hình ảnh và các JavaScript nếu thấy cần thiết.
<Nguồn : tuoitrecuoi.com>
Nhớ Thanks nếu cảm thấy hay...



 

 
Các thành viên đã Thank Luckystar vì Bài viết có ích:
21/01/2010 16:01 # 2
luongnguyenit
Cấp độ: 3 - Kỹ năng: 2

Kinh nghiệm: 12/30 (40%)
Kĩ năng: 11/20 (55%)
Ngày gia nhập: 19/01/2010
Bài gởi: 42
Được cảm ơn: 21
Phản hồi: Thiết kế website _ Thiết kế web nhạc bằng HTML


Bài ni hay lắm.Cảm ơn anh.Cái mà em đang cần



Ngày buồn nhất...



 
21/01/2010 17:01 # 3
anhem2012
Cấp độ: 5 - Kỹ năng: 3

Kinh nghiệm: 19/50 (38%)
Kĩ năng: 1/30 (3%)
Ngày gia nhập: 20/01/2010
Bài gởi: 119
Được cảm ơn: 31
Phản hồi: Thiết kế website _ Thiết kế web nhạc bằng HTML


Hay thật đấy như anh lucky ui bữa ni trên mạng source Web nhạc đầy ra đấy mà, Html thì làm ra chỉ dành cho mình nghe thuii
Dù sao cũng thank cái khuyến khích


Thất tình tự tử đu dây điện, điện giật tê tê chết từ từ =((

 
22/01/2010 08:01 # 4
Luckystar
Cấp độ: 2 - Kỹ năng: 3

Kinh nghiệm: 14/20 (70%)
Kĩ năng: 2/30 (7%)
Ngày gia nhập: 21/12/2009
Bài gởi: 24
Được cảm ơn: 32
Phản hồi: Thiết kế website _ Thiết kế web nhạc bằng HTML


Mình nghĩ mỗi cái nó có ích cho những người khác nhau nên thấy cái gì hay post lên cho mọi người cùng xem!
 



 

 
18/03/2010 15:03 # 5
tuanhoangdev
Cấp độ: 3 - Kỹ năng: 3

Kinh nghiệm: 28/30 (93%)
Kĩ năng: 24/30 (80%)
Ngày gia nhập: 10/12/2009
Bài gởi: 58
Được cảm ơn: 54
Phản hồi: Thiết kế website _ Thiết kế web nhạc bằng HTML


lucky nói đúng gồi đó


-- đã kí tên đóng dấu


 
18/03/2010 16:03 # 6
KoCoNick
Cấp độ: 5 - Kỹ năng: 4

Kinh nghiệm: 44/50 (88%)
Kĩ năng: 17/40 (42%)
Ngày gia nhập: 09/01/2010
Bài gởi: 144
Được cảm ơn: 77
Phản hồi: Thiết kế website _ Thiết kế web nhạc bằng HTML


Trích:

Điểm chung của cả 2 loại giao diện : bạn phải thiết kế nhiều trang HTML riêng biệt, mỗi trang dùng để chơi 1 bài nhạc. Ví dụ : bạn có 2 file nhạc là “bai1.wmv” và “bai2.wmv” thì bạn phải thiết kế 2 file tương ứng là “bai1.htm” và “bai2.htm” để chơi 2 bài nhạc đó. Bạn đừng lo ngại phải mất công thiết kế quá nhiều trang, bên dưới sẽ có thủ thuật để bạn thực hiện việc thiết kế rất nhanh Tôi nói bậyTôi nói bậyTôi nói bậyng.

Nhớ Thanks nếu cảm thấy hay...

Sao tự dưng post bài mà lại hô là mình nói bậy thế bạn ???
 


GIA SƯ LẬP TRÌNH TẠI NHÀ

(http://giasulaptrinh.net)

Thường xuyên chiêu sinh các khóa học từ cơ bản đến nâng cao:

1.   Lập trình PHP & MySQL .

2.   Joomla thiết kế website thương mại điện tử.

3.   C# .Net cơ bản luyện thi tuyển dụng lập trình viên.

4.   Lập trình web thương mại điện tử với Asp.Net (C#)

5.   Lập trình ứng dụng Winform (C#)

6.   Khóa học HTML & Css thiết kế giao diện website

7.   Khóa học lập trình Android căn bản

8.   Khóa học lập trình Android nâng cao

9.   Khóa học lập trình Java cơ bản, Java web servies.

 
30/03/2010 14:03 # 7
Luckystar
Cấp độ: 2 - Kỹ năng: 3

Kinh nghiệm: 14/20 (70%)
Kĩ năng: 2/30 (7%)
Ngày gia nhập: 21/12/2009
Bài gởi: 24
Được cảm ơn: 32
Phản hồi: Thiết kế website _ Thiết kế web nhạc bằng HTML


Cảm ơn bạn đã nhắc nhở nhé ...



 

 
Copyright© Đại học Duy Tân 2010 - 2021