Mở đầu về JavaScript

Với HTML and Microsoft FrontPage bạn đã biết cách tạo ra trang Web tuy nhiên chỉ mới ở mức biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đáp ứng các sự kiện từ phía người dùng. Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript để thực hiện chức năng này. Sau đó ngôn ngữ này được đổi tên thành JavaScript để tận dụng tính đại chúng của ngôn ngữ lập trình Java. Mặc dù có những điểm tương đồng giữa Java và JavaScript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt.JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML. Nó không được biên dịch mà được trình duyệt diễn dịch. Không giống Java phải chuyển thành các mã dễ biên dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn. Chính vì vậy bạn có thể dễ dàng học JavaScript qua ví dụ bởi vì bạn có thể thấy cách sử dụng JavaScript trên các trang Web. JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không là ngôn ngữ hướng đối tượng như C++ hay Java do không hỗ trợ các lớp hay tính thừa kế. JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả năng này cho phép JavaScript trở thành một ngôn ngữ script động. Giống với HTML và Java, JavaScript được thiết kế độc lập với hệ điều hành. Nó có thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngoài ra JavaScript giống Java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào file của người dùng. Các trình duyệt web như Nescape Navigator 2.0 trở đi có thể hiển thị những câu lệnh JavaScript được nhúng vào trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửi đầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới client. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả của HTML và xử lý các câu lệnh JavaScript khi nào chúng xuất hiện. Các câu lệnh JavaScript được nhúng trong một trang HTML có thể trả lời cho các sự kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng trang. Ví dụ bạn có thể kiểm tra các giá trị thông tin mà người sử dụng đưa vào mà không cần đến bất cứ một quá trình truyền trên mạng nào. Trang HTML với JavaScript được nhúng sẽ kiểm tra các giá trị được đưa vào và sẽ thông báo với người sử dụng khi giá trị đưa vào là không hợp lệ. Mục đích của phần này là giới thiệu về ngôn ngữ lập trình JavaScript để bạn có thể viết các script vào file HTML của mình.

Read More

10 bí quyết trong lập trình Ajax

Giờ đây, khi nhắc đến Ajax, chắc hẳn bạn - những người yêu thích lập trình - không còn cảm thấy xa lạ như trước kia mà thậm chí còn hình dung ra sự giản đơn và thuận tiện biết bao khi ứng dụng nó. Nhưng, liệu bạn đã nắm vững những quy tắc then chốt, những “mẹo nhỏ” hữu ích khi lập trình với Ajax chưa nhỉ? Dù bạn đã rõ hay...trót quên, vẫn xin mời bạn tham khảo bài viết này như một cách ôn lại kiến thức trọng tâm đầy bổ ích!

A. 10 lưu ý vàng cần ghi nhớ

1. Đánh dấu trang và quay lại 
Khi tự bạn điều khiển những gì đang diễn ra trên website, sử dụng JavaScript để làm xuất hiện hay biến mất các đối tượng trên trang hay thậm chí là sau khi toàn bộ trang được hiển thị hoàn toàn, bạn sẽ nhanh chóng nhận ra rằng, nút Quay lại (Back) của trình duyệt đã mất hoàn toàn tác dụng! Nút Quay lại này hoạt động bằng cách dùng đối tượng ‘history’ của trình duyệt, lưu lại danh sách tất cả các trang đã được truy cập liên tiếp gần đây nhất. Nhưng, nếu bạn không mở bất kỳ trang mới nào (vâng, như bạn biết, Ajax không cần phải refresh trang khi cần hiển thị thông tin), thì đối tượng ‘history’ kia rõ ràng chẳng lưu được chút manh mối gì. Đây là điều bạn cần lưu ý khi viết các ứng dụng Ajax.

Và nếu như cần thiết, hãy trang bị cho site của bạn một nút Back của riêng mình. Người dùng có thể muốn quay lại cửa sổ trước đó và bạn có nhiệm vụ phải lưu giữ những thông tin di chuyển này. Thật đáng tiếc là ngay cả tiện ích đánh dấu trang (Bookmark) cũng trở nên vô dụng như thế! Đáp án cụ thể cho bài toán này ra sao, xin được dành câu trả lời cho bạn nghiên cứu.

2. Đưa ra thông báo trực quan

Phần lớn thời gian của mình, Ajax hoạt động một cách “thầm lặng” và điều này đôi khi “làm khó” người dùng. Nếu bạn tải về một lượng lớn thông tin và đang chờ đợi phản hồi từ phía máy chủ, chắc chắn một hình ảnh “nhấp nháy” nào đấy sẽ vô cùng có ích với người dùng. Một chiếc đồng hồ cát xoay tròn, và khách hàng sẽ biết rằng họ cần kiên nhẫn! Bức hình này nên là dạng ảnh động (.gif), đồng thời phối hợp với đoạn mã JavaScript dưới đây, hiệu ứng “ẩn, hiện” sẽ càng thêm phần thú vị:

document.getElementById(“image1”).style.visibility= “visible”;
document.getElementById(“image1”).style.visibility= “hidden”;

Rõ ràng rằng, người dùng luôn muốn thấy một tín hiệu nào đấy báo cho họ biết rằng kết nối đang được thực hiện, dạng như thanh tiến trình màu xanh với các gạch nối càng lúc càng đầy cũng là một ý tưởng không tồi, và chắc chắn họ sẽ hài lòng với site của bạn!

3. Hãy để người dùng "tự nhiên"

Các ứng dụng Ajax dường như đang tự mình thi hành “phận sự” bởi chúng được thực thi phía sau giao diện người dùng. Chúng luôn sẵn sàng kết nối tới server, ngay cả khi người dùng không hề mong muốn – trong trường hợp họ vô tình gõ nhầm thông tin chẳng hạn. Rất dễ hình dung cảm giác lúc đó của bạn ra sao, khi ngay lúc bạn vừa gõ một chữ nào đấy, lập tức thông tin này đã được lưu lại database mà chẳng hề “xin phép” lấy một lời. Vậy nên, để tốt nhất, bạn hãy lưu ý một số điều nhỏ sau:

- Đừng bao giờ lưu thông tin ngay lập tức, vừa tốn băng thông mà chưa chắc đã được sự đồng ý của người dùng.

- Hãy nhớ rằng, người dùng luôn muốn “giao tiếp” nhiều hơn với ứng dụng. Hãy làm các thủ tục xác thực dữ liệu ngắn gọn hơn, đỡ mất thời gian hơn và cho người dùng quyền quyết định khi nào thì cần xác thực. Đấy chính là yếu tố tiên quyết trong quá trình thiết kế giao diện người dùng!

- Cuối cùng, đừng quên cung cấp cho người dùng cách thức “sửa sai” thao tác (Undo).

4. Ghi nhớ các trình duyệt

Thế giới thật rộng lớn và cũng có rất nhiều trình duyệt! Người dùng sử dụng trình duyệt họ yêu thích, còn bạn, sẽ ra sao khi chỉ kiểm tra ứng dụng của mình trên một loại trình duyệt mà thôi? Sẽ thật tệ nếu bạn chỉ viết riêng cho Internet Explorer, Firefox mà quên mất rằng, trong thế giới World Wide Web, có vô vàn trình duyệt khác nhau, có loại thậm chí còn không hỗ trợ JavaScript, loại khác lại mặc định tắt chúng đi! Hãy ghi nhớ điều này và xây dựng trước một phương án dự phòng không bao giờ là thừa cả.

5. Cho người dùng thấy sự thay đổi

Sức mạnh của Ajax chính là việc hiển thị dữ liệu trên một trang không cần refresh bằng cách dùng thẻ <meta id="refresher"> hay ngay cả các đối tượng thuần HTML như textbox chẳng hạn. Ứng dụng Ajax có thể thay đổi dữ liệu ngay sau khi chúng thông báo tới server, nhưng lại không thông báo với người dùng. Lấy ví dụ, bạn có một bảng dữ liệu và mặc định rằng sẽ được tự động cập nhật ngay khi database có thay đổi. Người dùng có thể không nhận thấy rằng thông tin đã không còn như trước, rằng bạn đã thay đổi thành phần trang, và đương nhiên là họ đã hụt mất những thông tin quan trọng. Lại một lần nữa, việc phát ra “tín hiệu” thay đổi tới người dùng sẽ giúp bạn rất nhiều. Nếu bạn vừa thay đổi một số chữ, đơn giản thôi, hãy làm cho nó hiển thị khác đi một chút. Đoạn mã sau dùng để thay đổi màu chữ trong thẻ<Div> thành màu đỏ bằng cách sử dụng linh hoạt thuộc tính style:

document.getElementById(“targetDiv”).style.color = “red”;

Còn nếu bạn muốn thay đổi màu nền, hãy dùng đoạn mã

document.getElementById(“targetDiv”).style.background-color = “red”;

Trong đó, “targetDiv” là mã ký hiệu của thẻ Div mà bạn gán cho.

6. Tránh làm chậm trình duyệt

Những ứng dụng Ajax có thể rất lớn và chắc chắn chiếm dụng một lượng tài nguyên vật lí không nhỏ. Tốc độ CPU, bộ nhớ RAM có thể bị “ngốn” rất nhiều nếu như bạn không quan tâm xử lí những đối tượng phức tạp trong quá trình khởi tạo hay tham chiếu. Thông thường, một số nhà phát triển ứng dụng lại xài Ajax cũng chỉ bởi vì nó đang “nóng”!! Quan niệm này cần được lưu tâm hơn! Đúng vậy, Ajax có thể giải quyết được nhiều vấn đế, nhưng bạn không nhất thiết phải dùng nó nếu chẳng có lí do gì. Đừng quên rằng, không phải trình duyệt nào cũng hỗ trợ Ajax (hoặc thậm chí ở chế độ mặc định tắt JavaScript). Vậy nên, đừng vì độ “hot” của Ajax mà quên đi mất tính khả dụng và tôc độ của chương trình bạn nhé!

7. Quản lý những thông tin riêng tư

Với Ajax, thật dễ để bạn gửi thông tin lên server mà không cần sự chú ý của người dùng. Nói theo cách khác, quá trình liên lạc giữa máy khách (client) và máy chủ (server) được diễn ra một cách “thầm lặng”. Nhưng sự thật là, không phải người dùng nào cũng muốn gửi thông tin lên server ngay. Bạn hãy lưu tâm đến vấn đề nhạy cảm này! Mặc dù thương mại điện tử tại Việt Nam chỉ mới chập chững những bước đầu tiên, những tổn thất xảy ra là điều không thể tránh khỏi, nhưng chính vì thế bạn càng phải nâng cao tinh thần bảo vệ người dùng. Internet rõ ràng đầy rẫy những cạm bẫy và sự thật thì môi trường này không phải là nơi hoàn hảo để lưu giữ thông tin có tính riêng tư. Nếu bạn định gửi mã số Thẻ tín dụng hoặc mã Bảo mật của thẻ mà không được sự đồng ý của người dùng, rất có thể bạn sẽ phải đói mặt với nhiều rắc rối! Do đó, hãy cho người dùng thấy được lợi ích của việc hoài nghi: Luôn hỏi trước khi gửi dữ liệu!

8. Xây dựng phương án dự phòng

Sự sống còn của Ajax phụ thuộc vào tín hiệu kết nối tới server, nhưng người dùng thì không phải lúc nào cũng trực tuyến. Server của bạn có thể bị “chết đứng” bất cứ lúc nào, và người dùng rất có thể đang làm việc với các thông tin được lưu trong bộ đệm trình duyệt từ trước đó! Nếu bạn không thể kết nối đến server khi đang online, thì việc xây dựng một phương án dự phòng là rất cần thiết (một server dự trữ chẳng hạn). Cũng đừng quên việc hỗ trợ các trình duyệt không có JavaScript nữa nhé!

9. Hiển thị thông tin trên các cỗ máy tìm kiếm

Cơ chế tìm kiếm của Google dựa trên việc sàng lọc thông tin từ hàng tỉ website theo thông số mà người dùng cung cấp, nhưng ứng dụng Ajax của bạn lại load thông tin lên dựa trên sự tương tác của người dùng mà chẳng cần refresh lại trang - điều này khiến Google sẽ không thể “nhìn” thấy được những thông tin như thế. Vậy nên ghi nhớ kỹ rằng, để thông tin trên website của bạn có thể được các cỗ máy tìm kiếm “mò” tới, bạn cần cung cấp những dữ liệu đặc tả nội dung trang. Làm điều này như thế nào? Không khó! Chỉ cần sử dụng các thẻ <meta> đặt trong phân đoạn của mã trang, các cỗ máy tìm kiếm có thể “đánh dấu” bạn dễ dàng! Và nếu thực sự hứng thú về các thẻ <meta> này, mời bạn ghé qua địa chỉ sau đây để tìm hiểu thêm cặn kẽ:http://www.searchenginewatch.com/webmasters/meta.html

10. Cuối cùng, xin lưu ý đến bộ đệm trình duyệt

Một số trình duyệt như Internet Explorer thường lưu lại thông tin về các website đã truy cập trong bộ đệm riêng của nó (thuật ngữ chuyên ngành gọi là “cache”). Điều này đồng nghĩa với việc, nếu ai đó truy cập đến cùng một địa chỉ URL trong một khoảng thời gian giới hạn nào đấy, thông tin hiện lên cho họ có thể chính là những thông tin vừa xem (được lấy ra từ cache).

Về nguyên tắc, điều này làm quá trình tải trang nhanh chóng hơn, các thông tin được coi là giống với lần truy cập trước có thể sẽ không cần phải tải về lần nữa, mà chỉ cần lấy từ cache ra và hiển thị lên. Nhưng với các website có ứng dụng Ajax thì đây đúng là một vấn đề lớn! Tại sao lại như vậy? Rất đơn giản, ở Ajax không có tính năng làm mới toàn bộ trang mà chỉ là một vài thành phần trong trang! Do đó, nếu khi bạn đã thay đổi dữ liệu trên trang mà kết quả trả về giống hệt như lúc trước thì không còn nghi ngờ gì nữa, bạn chắc hẳn đã gặp rắc rối rồi! Vậy nên, để hạn chế việc lưu thông tin đệm trong ứng dụng Ajax, bạn có thể đặt nhiều thông số header khác nhau khi gửi trả dữ liệu từ server, như đoạn code PHP dưới đây:

header(“Cache-Control”, “no-cache”);
header(“Du-lieu-header-tuy-y”, “no-cache”);
header(“Expires”, “-1”);

Mặc dù vậy, đoạn code trên lại không có tác dụng gì với Internet Explorer do việc lưu thông tin trong cache của IE lại phụ thuộc phần lớn vào địa chỉ trình duyệt. Do đó, có một cách rất hay là luôn thay đổi địa chỉ ứng dụng khi truy vấn đến server. Để làm điều này, bạn chỉ cần khai báo một biến ngẫu nhiên nào đấy (mà server chẳng dùng làm gì) vào phần cuối của địa chỉ, chẳng hạn như:

var myUrl = “data.php?name=bcvt” + “&t=” + new Date().getTime();

Một ý tưởng không tồi khi đưa thêm biến “t” vào địa chỉ URL trên, với “t” là thời gian hiện tại tính bằng mili giây. Vì địa chỉ này chắc chắn chưa từng được truy cập, nó sẽ không bị lưu trong bộ đệm cache trước đây và ứng dụng của bạn chắc chắn sẽ chạy “ngon lành”!

B. Lời kết

Như bạn thấy đó, việc lập trình Ajax tuy hết sức thú vị những cũng ẩn chứa nhiều “rắc rối nho nhỏ” phải không nào? Nếu không biết cách khắc phục chúng hoặc không để ý lưu tâm, các ứng dụng của bạn rất có thể sẽ hoạt động không được như mong muốn khi thiết kế. Hy vọng qua bài viết, các bạn hiểu được phần nào những “yếu điểm” của Ajax để từ đó tìm tòi hơn, sáng tạo ra những “chiêu thức” khắc phục cho riêng mình.

Read More

Xây dựng bộ đếm cho Website bằng ngôn ngữ ASP

Bạn muốn biết tại một thời điểm có bao nhiêu người đang truy cập website của mình? Việc này không thể thực hiện được với mã lệnh HTML thuần túy hay JavaScript mà phải dùng đến ngôn ngữ kịch bản chạy trên server (server-side scripting language) như ASP, PHP hay JSP.

Bài viết này giới thiệu cách hiển thị thông tin thống kê về số người đang truy cập (online), số lượt truy cập, số lần duyệt xem các trang trong website bằng ngôn ngữ ASP thông dụng của Microsoft. Những thông tin về số lượt truy cập được gọi là bộ đếm cho website - một trong những ứng dụng cơ bản mà các website chuyên nghiệp thường dùng đến. Bộ đếm giúp cho chính bạn và khách truy cập biết được website hoạt động hiệu quả như thế nào, “đông khách” hay “vắng khách”.

1.Hiển thị số người đang truy cập website:

Mỗi ứng dụng web ASP đều có thể có một file cấu hình chung là GLOBAL.ASA. File GLOBAL.ASA được server đọc và thực thi khi ứng dụng web bắt đầu chạy mỗi khi có một yêu cầu tải trang web từ client (phía người dùng). Trong file GLOBAL.ASA thường có các thủ tục sau:

Application_OnStart: Được gọi khi ứng dụng web bắt đầu chạy. Như vậy thủ tục này chỉ được gọi duy nhất một lần khi website của bạn có yêu cầu truy cập đầu tiên cho tới khi ứng dụng web kết thúc hoặc file GLOBAL.ASA có thay đổi. Chúng ta sẽ khởi tạo biến đếm số người đang truy cập website tại đây:

Application(“So_Nguoi_Online”) = 0

Biến Application có ảnh hưởng tới toàn bộ ứng dụng web, tức là tất cả các trang của website đều dùng chung biến này.

Session_OnStart: Được gọi khi có một yêu cầu kết nối của client tới server được thiết lập, tức là khi người dùng gõ vào địa chỉ của website trong trình duyệt để truy cập. Khi đó, chúng ta sẽ tăng biến đếm số người online:

Application(“So_Nguoi_Online”) = Application(“So_Nguoi_Online”) + 1
Session_OnEnd: Được gọi khi client ngắt kết nối với server, tức là khi người dùng chuyển qua trang web khác hoặc đóng trình duyệt lại. Khi đó chúng ta sẽ giảm biến đếm số người online:

Application(“So_Nguoi_Online”) = Application(“So_Nguoi_Online”) -1

Nội dung của file GLOBAL.ASA như sau:

<SCRIPT LANGUAGE=”VbScript” RUNAT=“Server”>
Sub Application_OnStart()

Khởi tạo giá trị ban đầu cho biến = 0

Application(“So_Nguoi_Online”) = 0

End Sub

Sub Session_OnStart()

Mỗi khi có một yêu cầu truy cập khác thì tăng số người truy cập lên 1

Khóa biến Application để tránh trường hợp có nhiều yêu cầu truy cập cùng một lúc

Application.Lock

Application(“So_Nguoi_Online”) = Application(“So_Nguoi_Online”) + 1
Mở khóa biến Application để yêu cầu truy cập sau sẽ thay đổi được giá trị của biến

Application.UnLock

End Sub

Sub Session_OnEnd()
Mỗi khi có một có một kết nối bị ngắt thì giảm số người truy cập đi 1

Application.Lock

Application(“So_Nguoi_Online”) = Application(“So_Nguoi_Online”) - 1

Application.UnLock

End Sub

</SCRIPT>
Bạn phải đặt file GLOBAL.ASA trong thư mục gốc của website của mình, sau đó để hiển thị số người đang truy cập website bạn thực hiện như sau:

<h1>
Số người đang xem website: <% = Application(“So_Nguoi_Online”) %> </h1>

2.Hiển thị số lượt truy cập website:

Số lượt truy cập website được tính bằng số lần yêu cầu truy cập website trên server của bạn. Số lượt truy cập website luôn tăng, do đó chúng ta chỉ cần khai báo biến trong thủ tục Application_OnStart:

Application(“So_Luot_Truy_Cap”) = 0

Và tăng biến này lên 1 trong thủ tục Session_OnStart:

Application(“So_Luot_Truy_Cap”) = Application(“So_Luot_Truy_Cap”) + 1

Và hiển thị trong website:

Số lượt truy cập: <% = Application(“So_Luot_Truy_Cap”)

3.Hiển thị số lần duyệt xem các trang của website:
Trong một phiên truy cập thì người dùng có thể duyệt xem nhiều trang trong website của bạn, chúng ta phải lưu thông tin này vào cơ sở dữ liệu. Mỗi trang ASP trong website của bạn sẽ include file chứa bộ đếm (chúng ta tạm đặt tên là bodem.asp) vào đầu trang để đếm số lần duyệt xem website.

Chúng ta sẽ dùng cơ sở dữ liệu Access để lưu trữ thông tin về số lần duyệt xem website. Bạn tạo một bảng DUYETXEM với các trường như sau:

Tên trường Kiểu

ID AutoNumber

SO_LAN_XEM Long Integer

Nội dung của file bodem.asp như sau:

<%

'Biến để truy xuất CSDL

Dim rs

'Biến ghi số lần duyệt xem các trang trong website

Dim SoLanXem

'Chứa chuỗi lệnh SQL cần thực hiện

Dim strSQL

'Chuỗi kết nối với CSDL

Dim strConnection

'Biến thiết lập kết nối

Dim myConnection

'Đầu tiên xác định chuỗi kết nối với CSDL, thay đổi đường dẫn tới CSDL

'cho phù hợp với đường dẫn và tên CSDL của website của bạn

strConnection = “provider=microsoft.jet.oledb.4.0; data source = “ & Server.MapPath(“../db/DATA.MDB”)

'Câu lệnh SQL dùng để truy xuất CSDL

strSQL = “SELECT * FROM DUYETXEM WHERE SO_LAN_XEM > 0”

'Khởi tạo kết nối

Set myConnection = Server.CreateObject(“ADODB.Connection”)

'Mở kết nối và thực hiện câu lệnh SQL

myConnection.Open strConnection

Set rs = myConnection.Execute(strSQL)

'Nếu số lần xem > 0 thì tăng biến đếm lên 1

If Not rs.EOF Then

SoLanXem = rs(“SO_LAN_XEM”)

SoLanXem = (SoLanXem + 1)

'Cập nhật vào CSDL

strSQL = “UPDATE DUYETXEM SET SO_LAN_XEM = “ & SoLanXem
Set rs = myConnection.Execute(strSQL)

Else 'Nếu chưa có lần xem nào

SoLanXem = 1

'Thêm vào CSDL

strSQL = “INSERT INTO DUYETXEM (SO_LAN_XEM) VALUES (“ & SoLanXem & “);”

Set rs = myConnection.Execute(strSQL)

End If

'Đóng kết nối

Set myConnection = Nothing

Set rs = Nothing

%>

Trong đầu mỗi trang ASP bạn include file bodem.asp vào và hiển thị như sau:

<!--#INCLUDE FILE = bodem.asp -->
<%
Response.Write(“Trang web đã được duyệt “ & SoLanXem & “ lần”)
%>

Chúc các bạn thành công!

Hà Minh Nam
ha_minh_nam@hotmail.com

Read More

Webplus Starter Edition Chương trình có giao diện rõ ràng, cung cấp sẵn các mẫu web, có sẵn các công cụ cần thiết

Nếu bạn đang tập thực hiện một website nhưng cảm thấy khó khăn với những phần mềm thiết kế web thông dụng thì hãy thử dùng Webplus Starter Edition xem sao.Chương trình có giao diện rõ ràng, cung cấp sẵn các mẫu web, có sẵn các công cụ cần thiết và đặc biệt là miễn phí.

1. Giao diện chương trình

Nhìn chung, chương trình có giao diện thân thiện, các tính năng được gom gọn vào từng menu, chỉ để lại các công cụ cần thiết trên cửa sổ. Giao diện gồm có các khu vực: thanh menu, thanh công cụ chuẩn (Standard, View, Web Properties), thanh công cụ quản lý và thiết lập website, thanh công cụ chèn và quản lý nội dung đa phương tiện (nằm dọc bên trái cửa sổ), khung tương tác với các đối tượng trên mẫu website, khung chứa các thẻ tính năng Studio Tabs (nằm dọc bên phải cửa sổ), thanh trạng thái và chuyển trang (phía dưới cùng). Nếu muốn thêm hay bớt thanh công cụ hiển thị trên cửa sổ thì bạn vào menu View và chọn trong danh sách xổ xuống của hai nhóm Toolbars, Studio Tabs. Trong quá trình sử dụng chương trình, cửa sổ Upgrade Information có thể xuất hiện khi thực hiện một tính năng nào đó, bạn bấm nút Close để tiếp tục tiến trình (vì đây là phần mềm miễn phí nên sẽ có một số quảng cáo như thế).

2. Thiết kế mẫu website

Khi khởi động vào chương trình thì bạn sẽ được lựa chọn một trong hai hình thức Start New Site hoặc Use Design Template. Nếu chưa quen làm việc với giao diện của chương trình thì bạn có thể chọn Use Design Template để làm quen với các tính năng thông qua mẫu web có sẵn, thay vì chọn Start New Site để bắt đầu từ trang web trắng. Trong cửa sổ Create New Site From Template, bạn chọn một mẫu trong khung bên trái rồi kéo thanh trượt bên trái để xem qua các trang thành phần. Trường Color Scheme giúp thay đổi nhóm màu sắc chủ đạo trên mẫu website. Khi xong bấm Open

- Tạo sơ đồ web:

Để xây dựng một hệ thống trang web có cấu trúc và bố trí khoa học, giúp cho người xem định hướng tốt những công việc của họ trên website, tránh cho họ sự lúng túng, mất kiên nhẫn, bạn cần xây dựng một sơ đồ web và hệ thống liên kết phù hợp. Trong thẻ Site ở khung Studio Tabs ở bên phải, bạn bấm vào biểu tượng Add new page or link. Ở hộp thoại hiện ra, bạn chọn kích thước trang tại hai mục Width và Hight của khung Appearance, chọn vị trí đặt trang mới ở khung Placement (Before - trước trang, After - sau trang, Child of - trang con của trang đang chọn), bấm OK. Ngoài ra, bạn có thể tạo ra nhiều Master Page (trang quy định các yếu tố nền tảng như biểu tượng, hình nền, thanh điều hướng) bằng cách bấm vào nút Add new master page hoặc bấm chuột phải vào Master A chọn Copy để tạo trang chính giống với Master A. Trong hộp thoại Copy Master Page, bạn chọn các thuộc tính Copy Objects - sao chép các đối tượng, Copy Background - sao chép cả hình nền, Copy attached HTML - sao chép mã HTML đính kèm.

- Tạo thanh điều hướng:

Bạn bấm đôi chuột vào trang chính Master A và bấm vào thanh menu (thanh điều hướng) mặc định của website mẫu. Trong hộp thoại Navigation Bar Settings, chọn thẻ Type rồi chọn Create New Navigation Bar, bấm Select ở dạng cần chọn. Thẻ Navigation Type, bạn chọn kiểu xổ xuống của các trang con (menu con) ở mục Base on site structure hoặc tự tạo thanh menu theo cách riêng ở mục Custom. Bạn có thể dùng chuột kéo thả để thay đổi kích thước của thanh điều hướng.

- Thiết lập thuộc tính trang:

Để thiết lập thuộc tính cho trang web, bạn bấm chuột phải vào một vùng trống trên trang, chọn Page Properties. Ở hộp thoại hiện ra, bạn thay đổi thiết lập trong các thẻ Navigation (tên trang, tên tập tin, thuộc tính thanh điều hướng), Appearance (canh chỉnh nội dung, quy định kích thước trang), Effects (hiệu ứng chuyển trang), Page Security (chỉ định nhóm người được phép truy cập trang web thông qua danh sách thành viên tại Serif Web Resources), Search Engine (tối ưu các thẻ meta để giúp cho các robot tìm kiếm phân tích và thu thập dữ liệu nhanh hơn).

3. Thêm nội dung vào trang

Webplus Starter Edition cung cấp cho người dùng đầy đủ công cụ giúp quản lý tốt nội dung ở các trang. Những công cụ này tập trung ở các menu Insert, Text, Table và thanh công cụ nằm dọc ở bên trái cửa sổ.

- Chèn văn bản: Bạn bấm vào biểu tượng chữ A (Artistic Text Tool) trên thanh công cụ để thêm nội dung văn bản vào bất kỳ một vị trí nào trên trang. Bên cạnh đó, bạn có thể sử dụng tính năng Freehand Path Text Tool (đường cong vẽ bằng tay), Straight Path Text Tool (đường thẳng), Curved Path Text Tool (đường cong) trong biểu tượng chữ A để nhập văn bản theo những đường vẽ tương ứng. Ngoài ra, bạn sử dụng tập tin văn bản sẵn có để nhập vào trang web, bằng cách sử dụng tính năng Text File trong menu Insert. Định dạng tập tin văn bản mà tính năng này hỗ trợ là txt, doc, odt, rtf.

- Chèn bảng biểu: Có các dạng bảng HTML Table Tool (bảng có hỗ trợ ngôn ngữ HTML, thích hợp với các bộ máy tìm kiếm), Creative Table Tool (bảng sáng tạo, hỗ trợ nhiều tính năng, có cả hiệu ứng 3D), Insert Calendar (chèn bảng dạng lịch).

- Chèn hình ảnh: Bạn sử dụng công cụ Import Image để đưa hình ảnh từ thư mục trên máy tính vào từng trang web. Với hình ảnh đưa vào, chương trình còn cung cấp một số công cụ chỉnh sửa cơ bản giúp cho hình ảnh thêm bắt mắt hơn. Ví dụ như tính năng Boder trong menu Format giúp tạo khung viền cho hình ảnh.

- Chèn các nội dung đa phương tiện khác: Bạn bấm vào nút xổ xuống cạnh biểu tượng hình nốt nhạc trên thanh công cụ rồi chọn nội dung cần chèn, gồm có: Sound Clip - âm thanh, Video Clip - đoạn phim, Flash File - tập tin dạng swf, YouTube Video - đường dẫn đến tập tin video trên YouTube, Google Map - bản đồ, Animated GIF - hình ảnh động, Java Applet - ứng dụng Java trên trình duyệt, Animated Marquee - hình ảnh động chuyển động ngang trên web.

4. Xuất bản website

Sau khi đã hoàn tất việc thiết kế, bạn cần sử dụng tính năng Preview Site trong menu File để xem lại sản phẩm trước khi xuất bản nội dung. Để kiểm tra tính tương thích trên các trình duyệt, bạn hãy xem trước website bằng tính năng Preview Site in Mozilla Firefox (Internet Explorer hoặc Browse Preview List). Khi không có gì thay đổi thì bạn vào menu File > Publish Site, chọn hình thức xuất bản:

- Publish to Disk Folder: giúp xuất bản website ra một thư mục trên máy tính, bạn chọn thư mục lưu trữ tại khung Output Folder. Khi đó, bạn có thể sao lưu toàn bộ website vào đĩa CD/DVD hoặc tải lên máy chủ một cách độc lập nhờ vào chương trình FTP.

- Publish to Web: Tính năng này giúp đưa website vào hoạt động ngay trên Internet. Bạn cần có một tài khoản quản lý máy chủ (hosting), điền thông tin cần thiết vào các ô trong hộp thoại Account Details như: Account name - tên tài khoản tại WebPlus, FTP Address - địa chỉ máy chủ, Username và Password - tên tài khoản và mật khẩu đăng nhập hosting. Nếu cần tải tất cả các trang web lên máy chủ thì bạn đánh dấu chọn vào ô Publish All Pages tại khung Page Range.

Theo vietcntt

Read More