Hướng dẫn làm web mừng Giáng Sinh tặng người yêu, bạn bè và người thân

Các bạn thân mến, thế là một mùa Giáng Sinh nữa sắp đến, báo hiệu sắp kết thúc một năm cũ để khởi đầu một năm mới.

Chắc hẳn hiện giờ không ít bạn đang rất chộn rộn và tất bật chuẩn bị để đón Giáng Sinh và mừng năm mới bên cạnh những người thân yêu nhất của mình.

Hôm nay lướt web, tình cờ Học Điện Tử tìm được 1 source code để làm web Giáng Sinh làm quà tặng rất hay nên lên đây đăng bài chia sẻ cách làm với các bạn, hy vọng các bạn sẽ tự mình làm được một món quà tinh thần thật sự ý nghĩa để tặng người yêu, người sắp yêu, người sẽ yêu, bạn nữ, bạn nam, mẹ, chị gái, em gái, … nói chung là những người thân yêu của mình nhé.

Trước tiên hocdientu xin mời các bạn xem 2 trang demo ở bên dưới:

Demo Giáng Sinh 2012: http://hocdientu.info/demo2012

Demo Giáng Sinh 2013: http://hocdientu.info/demo2013

Bạn có nhận ra sự khác nhau của 2 trang demo trên không? Có vài sự khác nhau sau đây: thứ nhất là nhạc nền, thứ hai là hình ảnh slideshow, và thứ 3 là hình chữ số 2013 với 2012.

Sẽ thế nào nếu những tấm hình slideshow đó là những tấm hình kỉ niệm của bạn với người yêu, còn nhạc nền là bài nhạc mà 2 bạn thích nhất??? Tất nhiên khi đó thì trang web sẽ trở thành món quà đáng yêu mà bạn gửi tặng người yêu hoặc người thân của mình đấy.

Giáng Sinh năm nay là Giáng Sinh 2012 nhưng sẽ có những bạn thích chữ số là 2013, việc chọn số nào là tùy ở bạn, hocdientu sẽ có hướng dẫn bên dưới.

Còn một vài thứ mà bạn có thể thay đổi nữa trên trang web Giáng Sinh theo ý bạn như hình bên dưới:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Để làm được 1 trang web mừng Giáng Sinh như demo thì bạn cần phải có 2 thứ nguyên liệu sau đây:

+ Thứ nhất là host để chứa trang web.

+ Thứ hai là source code của trang web.

Nguyên liệu thứ nhất là host thì không phải là mục đích mà bài viết này hướng tới nên các bạn có thể tìm các host free trên mạng.

Nguyên liệu thứ 2 là source code thì hocdientu sẽ cung cấp cho các bạn link tải bên dưới, bạn nào thích năm 2012 thì tải file christmas-web-2012.rar, bạn nào thích năm 2013 thì tải file christmas-web-2013.rar nhé.
Link tải source code:
Christmas-web-2012.rar:
http://www.mediafire.com/?7a1klz17d6zur68
http://upfile.vn/Mme
http://up.4share.vn/f/3f0d080d0c0c0608/christmas-web-2012.rar
http://www.fileswap.com/dl/EEGnbUNr55/
Christmas-web-2013.rar:
http://www.mediafire.com/?y2mfs9ppg5a692a
http://upfile.vn/Mmh
http://up.4share.vn/f/6e5c595c5d5d575c/christmas-web-2013.rar
http://www.fileswap.com/dl/g0BSBeUci/
Sau khi tải source code về thì chúng ta bắt tay vào chế biến theo như ý mình trước khi upload chúng lên host nhé bạn. Bây giờ hocdientu sẽ hướng dẫn các bạn từng bước để thay đổi theo như mong muốn của mình. Ta sẽ thay đổi những thứ sau đây:
+ Nhạc nền.
+ Hình ảnh Slideshow và video hiển thị.
+ Text hiển thị.
Trước tiên bạn hãy giải nén file được tải về ra, rồi vào thư mục christmas-web-2013\xml bấm nút phải chuột vào file global.xml chọn Open with —> Notepad:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Với file global.xml này thì ta có thể thay đổi được những gì??? Bạn hãy xem nội dung của file global.xml như hình dưới:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Thay đổi nội dụng của file này thì ta sẽ thay đổi được: hình ảnh slideshow, số lượng ảnh mặc định là 8, bạn có thể tăng lên hoặc giảm xuống; thay đổi được nhạc nền và thay đổi được 2 dòng text bên dưới chữ số 2013.
Để thay đổi hình ảnh và video thành ảnh và video của bạn thì bạn hãy chép 8 file hình ảnh mà bạn thích có đuôi là .jpg vào thư mục christmas-web-2013\assets\images , xóa 8 file “img1.jpg” đến “img8.jpg” có sẵn trong đó rồi đổi tên 8 file ảnh mà bạn vừa chép vào thành tên của 8 file mà bạn vừa xóa là img1.jpg —> img8.jpg , với video bạn cũng làm tương tự như với hình ảnh là bạn hãy thay thế file video.mp4. Bạn lưu ý: hình ảnh các bạn nên resize lại với kích thước nhỏ với độ phân giải nên là 800×600 hoặc nhỏ hơn 1 chút, không nên chép thẳng từ máy chụp hình, vì máy chụp hình có độ phân giải rất lớn, khi đưa lên web sẽ không thấy hết toàn cảnh tấm hình của bạn mà chỉ thấy phần trung tâm của hình ảnh mà thôi. Bạn làm theo hình:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Để thay đổi nhạc thì bạn hãy chép file nhạc mp3 của bạn vào thư mục christmas-web-2013\assets\audio với lưu ý: để không xảy ra lỗi thì tên file của bạn nên là tiếng Việt không dấu và không có khoảng trắng, VD bạn có file giấc mơ tình yêu.mp3 thì bạn nên đổi tên thành giac-mo-tinh-yeu.mp3 hoặc giacmotinhyeu.mp3 . Rồi sau đó sửa tên file mp3 trong file global.xml như hình dưới:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Tiếp theo ta sẽ thay đổi 2 dòng text 1 và text 2 như trong hình dưới:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Dòng text 1 chỉ là dòng text bình thường, còn dòng text 2 là 1 link, khi người xem bấm vào dòng text 2 thì sẽ ra 1 trang web nào đó do bạn định sẵn. Cách làm như sau:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)


(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Để thêm số lượng hình ảnh cho slideshow thì bạn làm như hình dưới:

(Hình có kích thước lớn nên đã được resize cho phù hợp độ rộng trang web, nếu bạn không nhìn rõ hãy save hình về máy để xem bằng cách click chuột phải lên hình chọn “Save Image As…“)

Để thay dòng chữ chạy trên thanh tiêu đề trang web thì bạn hãy dùng Notepad mở file index.html trong thư mục christmas-web-2013 và chỉnh sửa như hình dưới:


Thế là bạn đã làm xong mọi việc thay đổi để trang web hiển thị được như mong muốn của bạn. Vấn đề bây giờ là bạn chỉ cần upload source code đã được chỉnh sửa này lên host nữa mà thôi.
Nhưng làm thế nào để kiểm tra lại thành quả của bạn đã hoàn hảo hay chưa để đưa lên host đây? Rất đơn giản, bạn hãy mở file index.html trong thư mục christmas-web-2013 bằng trình duyệt Firefox hoặc Chrome là được. Làm cách nào để mở file index.html??? Có 3 cách như sau:
+ Bạn bấm chuột trái 2 lần (double click) vào nó.
+ Kéo file index.html và thả vào trình duyệt Firefox hoặc Chrome.
+ Bấm phải chuột vào file index.html chọn Open with —> Firefox
nguồn: http://hocdientu.info/huong-dan-lam-web-mung-giang-sinh-tang-nguoi-yeu-ban-be-va-nguoi-than/

hay!