TIN HỌC ỨNG DỤNG 2 - K11
Bạn hãy đăng ký làm thành viên để có thể xem các thông tin trong lớp và viết bài trong diễn đàn.

Không những thế, sau khi đăng ký bạn sẽ nhận được sự hỗ trợ của diễn đàn nhiều hơn.
Change background image
TIN HỌC ỨNG DỤNG 2 - K11

Khoa CNTT - ĐH Công nghiệp Hà Nội


Go downMessage [Page 1 of 1]

© FMvi.vn

on 18/9/2011, 13:43

Admin

rong bài trước, chúng ta đã lần lượt theo các bước và đã có trong tay bộ font Cufón ở định dạng JavaScript (UTM_Flamenco_400.font.js). Ở phần 2 này, chúng ta sẽ từng bước tích hợp Cufón vào một tập tin HTML đơn giản để qua đó thấy được tác dụng của nó.
Phần 2: Nhúng Cufón vào website thông thường


Đầu tiên, chúng ta tạo một thư mục Cufon Demo, trong đó tạo một file index.html có nội dung cơ bản như sau:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cufón Demo</title>
</head>
 
<body>
<h1>Chào mừng các bạn đến với Cufón demo</h1>
 
<h2>Chào mừng các bạn đến với Cufón demo</h2>
 
<h3>Chào mừng các bạn đến với Cufón demo</h3>
 
<h4>Chào mừng các bạn đến với Cufón demo</h4>
 
<h5>Chào mừng các bạn đến với Cufón demo</h5>
 
<h6>Chào mừng các bạn đến với Cufón demo</h6>
 
</body>
</html>

Xem thử file index thấy như sau:
Trang HTML bình thường chưa tích hợp Cufón


Đã có trong tay tập tin js của font muốn dùng chưa đủ, chúng ta cần thêm một tập tin js của riêng Cufón nữa là cufon-yui.js (download)

Trong thư mục Cufon Demo, tạo một thư mục con là js và copy 2 file UTM_Flamenco_400.font.js, cufon-yui.js vào.
Hai tập tin cần thiết cho Cufón


Quay trở lại màn hình soạn thảo nơi chúng ta vừa tạo tập tin
index.html. Chèn thêm dòng code dưới đây vào phần thẻ HEAD của trang:
Code:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/UTM_Flamenco_400.font.js"></script>



Tiếp tục chèn tiếp đoạn mã này vào trước thẻ đóng BODY
Code:

<script type="text/javascript">
    Cufon.replace('h1');
    Cufon.replace('h2');
</script>



Save lại và xem thành quả vừa làm được:
Font đã đổi theo UTM-Flamenco


Chúng ta thêm vào một chút Css để xem thế nào nhé:
Code:

<style type="text/css">
    h1 {color:green;}
    h3 {color:orange;}
</style>

Font với màu sắc


Và đây là toàn bộ nội dung tập tin index.html
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cufón Demo</title>
 
    <script type="text/javascript" src="js/cufon-yui.js"></script>
    <script type="text/javascript" src="js/UTM_Flamenco_400.font.js"></script>
 
    <style type="text/css">
        h1 {color:green;}
        h3 {color:orange;}
    </style>
</head>
 
<body>
<h1>Chào mừng các bạn đến với Cufón demo</h1>
 
<h2>Chào mừng các bạn đến với Cufón demo</h2>
 
<h3>Chào mừng các bạn đến với Cufón demo</h3>
 
<h4>Chào mừng các bạn đến với Cufón demo</h4>
 
<h5>Chào mừng các bạn đến với Cufón demo</h5>
 
<h6>Chào mừng các bạn đến với Cufón demo</h6>
 
    <script type="text/javascript">
        Cufon.replace('h1');
        Cufon.replace('h3');
    </script>
 
</body>
</html>


Ký tên:
Gemini Photo là nơi cung cấp gói dịch vụ chụp ảnh thời trang, chụp ảnh giá rẻ, chụp ảnh ngoài trời, chụp ảnh cưới,chụp ảnh bé yêu ... dành cho cộng đồng đặc biệt là giới trẻ

Add: 37/144 Ngô Gia Tự - Long Biên - Hà Nội
SĐT: 0166 623 5623
Map: tinyurl.com/map-geminiphoto
Báo giá: tinyurl.com/geminiphoto-baogia

Các bạn có thể coi thêm tại đây:
facebook.com/GeminiPhotoStudio
View user profile http://my.opera.com/anhlavip12a4/blog/

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà MinhTuan
Trả lời nhanh
on 24/9/2011, 13:34

Member

View user profile

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà omaichua
Trả lời nhanh

Back to topMessage [Page 1 of 1]

  © FMvi.vn

« Xem bài trước | Xem bài kế tiếp »

Bài viết liên quan

    Quyền hạn của bạn:

    You cannot reply to topics in this forum