Bài Mới Nhất | Gửi SMS miễn phí | Code ZB | Hỏi Đáp ZB | Chit Chat | Thủ Thuật Blog| Up Hình & TL | Giải Trí |
Welcome Guest [Log In] [Register]


Add Reply
Thiết kế web nhạc bằng HTML; Thiết kế web nhạc bằng HTML
Topic Started: 07/05/2010 - 07:11 pm (16,971 Views)
Posted ImageHiếu Armstrong
Member Avatar
Armstrong

Thiết kế web ca nhạc bằng HTML
Nguon: copy tren mang
TTHL online giới thiệu tới các bạn cách làm một web nhạc đơn giản nhất

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, EditPlus…). 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 chóng. 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.^-^^-^^-^ rồi Enter. Nhập đoạn code sau vào khung soạn thảo :
Code: HTML
 
<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 :
Code: HTML
 
<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
Code: HTML
 
<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ẻ
: Để 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 :
Code: HTML
 
<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ẻ ở trên. Ví dụ : <iframe name=”frame1”…> thì ở trên nó phải là 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. Loại HTML mà TTC đang dùng là:
dành cho nhạc WMA:
Code: HTML
 
<div><div align="center"><object>
<embed type="application/x-mplayer2"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
src="LINK NHAC"
ShowControls="TRUE" ShowDisplay="0" ShowStatusBar="TRUE" AutoStart="FALSE" Loop="FALSE" Volumn="100" >
</embed>
</object></div></div>

dành cho nhạc REAL:
Code: HTML
 
<DIV>
<[html]OBJECT>
<embed type="application/x-mplayer2"pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"src="LINK NHAC"ShowControls="TRUE" ShowDisplay="0" ShowStatusBar="TRUE" AutoSize="1" AutoStart="FALSE" Loop="FALSE" Volumn="100" Width="320" Height="68"></embed></OBJECT></DIV>

dành cho nhạc MP3
<div><object>
<embed type="application/x-mplayer2"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
src="http://dime52.dizinc.com/~anhsaod/music/blue/alive.MP3"
ShowControls="TRUE" ShowDisplay="0" ShowStatusBar="TRUE" AutoStart="FALSE" Loop="FALSE" Volumn="100" Width="320" Height="68">
</embed>
</object></div>[/html]
Đây là các loại HTML mà TTC đang dùng dành cho music player không dấu link, em muốn xin các bác đổi lại mã HTML thành mã dấu link để những bài hát em tốn công đăng lên không bị ăn cắp. Ở đây em có mấy loại mã dấu link. Mong rằng sẽ giúp được các bác: DÀNH CHO NHẠC WMV
Code: HTML
 
<DIV>
<DIV align=center>
<OBJECT>
<embed type="application/x-mplayer2"pluginspage="LINK NHAC"ShowControls="TRUE”ShowDisplay="0" ShowStatusBar="TRUE"AutoStart="FALSE" Loop="FALSE"Volumn="100" ></embed></OBJECT></DIV></DIV>
DÀNH CHO NHẠC MP3
<DIV>
<OBJECT>
<embed type="application/x-mplayer2"pluginspage="LINK NHAC"ShowControls="TRUE"ShowDisplay="0"ShowStatusBar="TRUE"AutoStart="FALSE"Loop="FALSE"Volumn="100"Width="320"Height="68"></embed></OBJECT></DIV>
DÀNH CHO NHẠC WMA
<BR>
<OBJECT>
<embed type="application/x-mplayer2"pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"src="LINK NHAC"ShowControls="TRUE" ShowDisplay="0" ShowStatusBar="TRUE"AutoStart="FALSE" Loop="FALSE" Volumn="100" Width="320"Height="68"></embed></OBJECT><BR>


[/big]

== bạn sẽ là những gì bạn nghĩ ==
:r2:


Offline Profile Quote Post Goto Top
 
trionpro
NGUYỄN DUY TÓI

cho xin ti demo đi hehe
.•´¨ `*:•.::.(¯`°•.¸¤TRIONPRO¤¸.•°´¯ ).::.•´¨`...
-:¦:-•»-(¯`°•.¸¯`°•._12b6pro.tk_.•°´¯¸.•° ´¯)-«•-:¦:-:-

Posted Image
Offline Profile Quote Post Goto Top
 
anhbimq


=)) đeo cái kính của bà già mày ak` ==))
Edited by anhbimq, 27/12/2010 - 02:41 pm.
Offline Profile Quote Post Goto Top
 
trionpro
NGUYỄN DUY TÓI

anhbimq
27/12/2010 - 02:37 pm
=)) đeo cái kính của bà già mày ak` ==))
cái thảng này mày thích gi??? :m10: :m10: :m10: :m10: :m10:
.•´¨ `*:•.::.(¯`°•.¸¤TRIONPRO¤¸.•°´¯ ).::.•´¨`...
-:¦:-•»-(¯`°•.¸¯`°•._12b6pro.tk_.•°´¯¸.•° ´¯)-«•-:¦:-:-

Posted Image
Offline Profile Quote Post Goto Top
 
url


Cũng được giờ lên mạng search nhiều mà. Template thì càng dễ kiếm hơn. Thiết kế web giờ cũng dễ chỉ cần biết 1 chút về HTML , và 1 ngôn ngữ lập trình nào đó ( PHP , ASP).... mún kinh doanh thì biết thêm chút ít về seo là đủ.




Tham khảo:

Code:
 
http://www.url.vn
http://www.thietkewebvietnam.net
http://www.thietkewebhanoi.vn
http://www.thietkewebseo.com
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Create your own social network with a free forum.
« Previous Topic · Tphượt cẩm nang · Next Topic »
Add Reply




Xem tốt nhất trên các trình duyệt FireFox hoặc Google Chrome ở độ phân giải 1024 x 768 pixels.
Diễn đàn là một hệ thống mở, chúng tôi sẽ không chịu trách nhiệm về nội dung đăng tải do người dùng đưa lên.