Các thành phần để tạo trang Web

b. Kết nối với CSDL

3.2 Các thành phần để tạo trang Web

3.2.1 Thông tin yêu cầu từ khách hàng

Đây là những thông tin thu thập từ những ngời sử dụng trang Web, nó phản ánh những yêu cầu cần thiết thực tế của ngời sử dụng, bao gồm những đầy đủ mọi sở thích, khuynh hớng, đặc điểm mà ngời sử dụng cần đến. Nhờ việc phân tích rõ thông tin của ngời dùng mà nhà thiết kế dễ dàng định dạng thông tin, thiết lập các dự án, định ra hớng thiết kế một trang Web cụ thể sau này. Những thông tin này cần phải xem xét cập nhật liên tục, mọi lúc để giúp việc thiết kế đợc chính xác và không bị lỗi thời.

3.2.2 Xác định tổng thể

Đây là yếu tố xác định phạm vi và mục tiêu chung của trang Web cần thiết kế, ảnh hởng tới sự sống còn của trang Web sau này, nó định dạng chung về trang Web mình đang thiết kế cũng giống nh thiết kế khung của

một ngôi nhà, việc xác định này có ảnh hởng đến việc thiết kế, phát triển và bổ sung thêm những thông tin cần thiết sau này.

3.2.3 Xác định mục tiêu chi tiết

Từ việc xác định tổng thể ở trên, bây giờ ta đa ra các mục đích chi tiết của trang Web cần thiết kế để từ đó hoàn thành trang Web, yếu tố này xác định loại hình thông tin, hình ảnh đồ hoạ, biểu đồ... mà ta sẽ đa vào trang Web này. Giống nh hai yếu tố trên, yếu tố này cũng thúc đẩy, hỗ trợ việc thiết kế và phát triển trang Web. Nó đòi hỏi có sự thay đổi một cách thích nghi của trang Web khi yêu cầu của ngời dùng thay đổi, mà không ảnh hởng nhiều tới các yếu tố khác.

3.2.4: Phạm vi thông tin

Tập hợp các tri thức và thông tin về các lĩnh vực cụ thể, nó giúp cho sự thiết kế và phát triển trang Web một cách thuận tiện, không phải tất cả các thông tin cần thiết của ngời dùng trang Web đều sẵn có, bởi vậy để đáp ứng đợc nhu cầu sử dụng thì yếu tố này rất quan trọng cho nhà phát triển và thiết kế.

3.2.5. Trang Web cụ thể

Miêu tả chi tiết các thành phần, ràng buộc mà mình sẽ đa vào trong trang Web này. Liệt kê tất cả các thông tin đa vào trang Web, và sự tác động giữa các yếu tố, sự kiện với nhau trong trang Web thông qua các mối liên kết.

3.2.6. Trình bày trang Web

Phơng tiện biểu diễn thông tin cụ thể tới ngời dùng, nó là kết quả của quá trình thiết kế và trình bày trang Web cụ thể. Trong quá trình này ngời tạo Web sử dụng các kỹ thuật thiết kế và các kỹ thuật trình bày để tạo nên một trang Web cụ thể sao cho nó đợc thuận lợi, có tính mỹ thuật và có thể sử dụng những mẫu sẵn có.

3.3 Các quá trình phát triển Web site

•Lập kế hoạch

Đây là quá trình thiết lập dự án để xây dựng trang Web, nó lựa chọn các cơ hội truyền thông để đạt đợc mục đích tổng thể. Xác định thông tin để làm gì, cho ai, đối tợng nào. Việc đặt kế hoạch xác định đợc tất cả các thông tin về lĩnh vực thông qua quá trình tập hợp các thông tin liên quan và sự cập nhật của nó nh thế nào. Ngời thiết lập dự án xây dựng trang Web phải xác định các kĩ năng cần thiết để thiết lập toàn bộ trang Web cụ thể cũng nh thiết lập từng phần của trang Web. Chẳng hạn một trang Web có sử dụng đến giao diện form thì phải xác định các kỹ thuật cần thiết để tạo nên nó. Ngời thiết lập dự án phải dự tính các tài nguyên cần thiết khác để hỗ trợ điều hành và phát triển Web.

•Phân tích

Quá trình xử lý tập hợp, so sánh thông tin về trang Web và sự hoạt động để cải thiện toàn bộ chất lợng Web. Một yếu tố quan trọng là khảo sát phân tích trang Web dựa vào các thông tin của ngời dùng sao cho thích hợp với các quá trình và các yếu tố khác trong việc phát triển trang Web, các thông tin đó có ảnh hởng lớn tới việc thiết lập nên một trang Web và sự phát triển trang Web sau này .Quá trình này cân nhắc, lựa chọn, tập hợp các thông tin để giúp đỡ các quá trình khác và phân tích mục tiêu phát triển của trang Web.

• Thiết kế

Với các trang Web cụ thể ta cần thiết lập mục đích, sắp xếp các thành phần của trang Web sao cho phù hợp nhất. Việc thiết kế phải đảm bảo làm sao cho trang Web phải đạt kết quả tốt nhất về chất lợng, sự thuận tiện cho ngời sử dụng... Thiết kế trang Web chịu ảnh hởng lớn của các quá trình khác và các thành phần khác của sự phát triển trang Web. Nó có thể không quan trọng nh các quá trình hay các yếu tố khác nhng nó đòi hỏi một sự cung cấp toàn diện cho khả năng thực hiện sau này.

• Thực hiện

Xây dựng các trang Web dựa trên các công cụ phổ dụng nh HTML, quá trình thực hiện này cũng giống nh việc phát triển các phần mềm bởi nó liên quan tới việc sử dụng các cú pháp cụ thể để mã hoá cấu trúc trang Web lu trong các file, mặc dù có những công cụ tự động có sẵn giúp ta xây các trang HTML nhng chúng ta cần có một nền tảng vững chắc về HTML để xây dụng các trang Web tốt nhất.

•Lập trình

Quá trình này làm cho trang Web trở nên sinh động phù hợp với yêu cầu ngời dùng hơn.

•Cải tiến

Tiếp tục phát triển trang Web nắm bắt thông tin và các kỹ thuật mới ứng dụng vào trang Web.

3.4 Thiết kế giao diện

Các đọc giả không chỉ xem thông tin, họ tơng tác với nó theo cách thức mới không nh các tiền lệ trong việc thiết kế tài liệu trên giấy. Giao diện ngời dùng đồ hoạ (GUI) của hệ thống, cộng thêm các tơng tác ẩn dụ, hình ảnh và các quan niệm đợc dùng để chuyển tải mọi tính năng, thông tin lên màn hình, và trải qua thời gian các đặc thù trực quan của các thành phần giao diện đồ hoạ và sự tơng tác chức năng hoá đã tạo nên đặc trng "nhìn thấy và cảm nhận" của các trang Web cùng các mối liên kết Hypertext.

Thiết kế đồ hoạ và các hình ảnh "Ký hiệu" trực giác không chỉ làm đẹp trang Web mà đồ hoạ trở thành một phần đợc tích hợp kình nghiệm của độc giả đối với Web site của chúng ta. Trong các tài liệu có ảnh, không thể hoàn toàn tách rời thiết kế đồ hoạ và thiết kế giao diện.

Giao diện đồ hoạ cho ngời sử dụng (GUI) đợc thiết kế nhằm cho ngời dùng điều khiển trực tiếp máy tính của họ thuận lợi. Ngày nay, ngời sử dụng yêu cầu một mức độ hoàn hảo của mọi thiết kế giao diện đồ hoạ, kể cả các trang Web.

Mục đích là cung cấp cho ngời sử dụng những thông tin cần thiết, mô phỏng công nghệ Web cho các thông tin mà họ mong chờ với đòi hỏi đa dạng trong giao diện nhng loại bỏ đợc cản trở không cần thiết trên con đờng tìm kiếm thông tin của họ. Vì vậy thiết kế giao diện phải hớng tới ngời sử dụng.

Thiết kế trang Web phải nghiên cứu về các nhu cầu và tâm lý khách hàng. Không thể thiết kế cho một độc giả vô danh mà chúng ta không biết đến các yêu cầu của ngời đó. Nên tạo các kịch bản mẫu cho các nhóm đọc giả đang tìm kiếm thông tin trên Web site của chúng ta. Một độc giả có kinh nghiệm tìm một mẫu tin nhất định có đợc giúp đỡ hay cản trở bởi thiết kế cuả chúng ta? Một độc giả mới có bị lúng túng trớc một hệ thống menu phức tạp hay không?

Thử nghiệm các thiết kế và nhận các phản hồi từ độc giả là phơng pháp tốt nhất để tìm ra các ý tởng thiết kế cho phép đọc giả nhận đợc cái họ muốn từ Web site của chúng ta. Nói nh vậy có nghĩa là có thể điều chỉnh thiết kế của Web site cho phù hợp khi đã có những góp ý đúng từ độc giả.

Với thực tại của công nghệ Web, đa số độc giả tơng tác với các trang Web bằng cách thực hiện các liên kết giữa các tài liệu. Vấn đề chủ yếu của giao diện trong các Web site là độc giả không ý thức đợc họ đang ở đâu trong tổ chức thông tin. Các biểu tợng nhất quán, dễ hiểu, các lợc đồ đồ hoạ đồng nhất và bản khái quát (đồ hoạ hay văn bản), màn hình tổng hợp có thể cho đọc giả sự tin tởng là họ có thể tìm thấy cái họ tìm mà không lãng phí thời gian. Độc giả luôn có khả năng quay trở lại trang chủ trên Web site. Các liên kết cơ bản này nên có trên mọi trang Web, nó thờng các nút ấn đồ hoạ với hai mục đích: tạo các mối liên kết cơ bản và giúp đỡ tạo một biểu t- ợng đồ hoạ thông báo cho độc giả biết họ vẫn còn đang ở trong Web site. Ví dụ, trên Web site của Netscape, có thanh biểu tợng quay lại tại cuối mỗi trang Web. Thanh nút ấn hay đợc sử dụng (có ở chân tất cả các trang), và tạo một đặc tính đồng nhất cho mọi trang Web của Netscape site.

Không nên có trang cuối cùng (died-end). Mọi trang Web nên có ít nhất một liên kết. Các trang " died-end"- các trang không móc nối đến các trang khác trong cùng site - không chỉ là một sự thất vọng với đọc giả, chúng thờng làm mất khả năng đa đọc giả đến với các trang Web site khác của chúng ta.

Đọc giả hay đi theo các liên kết thẳng đến các trang cất sâu trong cấu trúc của Web site. Do vậy họ có thể không bao giờ nhìn thấy trang chủ (Homepage) hoặc các thông tin mở đầu trên trang Web site của chúng ta. Nếu các trang phía dới của site không có liên kết quay lên, về trang chủ hoặc quay lại menu, đọc giả thực chất là bị loại bỏ việc truy nhập đến các phần còn lại của Web site.

3.6 Tính ổn định thiết kế

Nếu muốn thuyết phục độc giả rằng cái mà chúng ta cung cấp là chính xác, đáng tin cậy, chúng ta cũng phải thiết kế Web site của chúng ta cẩn thận, giống nh chúng ta tạo các liên hệ với doanh nghiệp khác, với cùng sự biên tậpvà các trình độ thiết kế cao. Một site trông luộm thuộm, với thiết kế trực quan nghèo nàn, trình độ biên tập kém sẽ không truyền đợc sự tin cậy cho các đọc giả.

Tính ổn định chức năng trong thiết kế Web có nghĩa là giữ các thành phần giao tiếp của Web site làn việc ổn định chức năng có hai thành phần.

• Đặt các vật đúng chỗ ngay từ đầu khi thiết kế Web site • Giữ chúng hoạt động nhịp nhàng

Các Web site tốt tự nó đã có tác động qua lại, với nhiều liên kết đến các trang trong site đó, và có các liên kết đến các site khác. Trong khi thiết kế, cần kiểm tra thờng xuyên các liên kết để đảm bảo chúng còn tồn tại, mọi cái trên Web thay đổi rất nhanh, cả trên Web site của chúng ta và các Web site khác. Chúng ta cần có lịch kiểm tra lại các liên kết và cả nội dung của nó có còn thích hợp không.

3.7.1 Mục đích của Web site

Web site Quảng cáo Di lịch Angkor đợc thiết kế và xây dựng nhằm mục đích nh sau:

- Để tăng cờng khả năng thiết kế và lập trình trang Web trên Internet và hiểu biết hơn về lĩnh vực Internet.

- Để bảo tồn bản sắc văn hoá của dân tộc mình để tránh khỏi sự hiểu lầm của các nớc khác.

- Phục vụ cho những ngời tìm hiểu về văn hoá và muốn đi du lịch sang Cămpuchia.

- Phục vụ cho những ngời muốn tra cứu thông tin về Cămpuchia và nhất muốn tìm hiểu về lịch sử của Angkor là một trong những kỳ quan thế giới.

3.7.2 Xây dựng Web Site Du lịch ANGKOR

Theo các quá trính phân tích và thiết kế nh trên Web site đợc tổ chức nh sơ đồ sau: (1) Văn hoá Giới thiệu Phong tục, tập quán Ngôn ngữ, văn học nghệthuật Những ngày lễ cổ truyền Tôn giáo Ngôn ngữ và văn học Kiến trúc và điêu khắc Âm nhạc, ca hát, điệu múa Danh sách ngân hàng và tiền tệ Danh sách khách sạn và nhà hàng ăn ở Phnôm Pênh Bộ máy nhà n ớc Danh sách khách sạn và nhà hàng ăn ở SiemReap Giao thông vận tải Giới thiệu chung về Campuchia Lịch sử Angkor Thủ tục Visa Những thông tin bổ ích Văn hoá Tìm kiếm Trang chủ (1)

3.7.3 Thiết kế chi tiết cho từng Modula). Thiết kế cho trang chủ (default.htm) a). Thiết kế cho trang chủ (default.htm)

1) Nội dung

Trang này sẽ tự động chạy sau khi đợc tải về máy ngời sử dụng. Trang này giới thiệu toàn bộ chức năng chính của hệ thống, cho phép ngời dùng nhảy tới các trang khác nh trang Văn hoá, Lịch sử Angkor,...

Trang chủ đợc thể hiện nh hình sau:

2) Viết mã lệnh cho trang chủ

<TITLE> AngKor Tourism </TITLE> </HEAD>

<frameset rows="70,*" framespacing="0"> <frame marginwidth=0 name="Header"

src="htm/TopHome.htm"framespacing="0" frameborder="0" scrolling="no" target="contents">

1) Nội dung

Trang này sẽ giới thiệu về Angkor, nền văn hoá Angkor, lịch sử, quá trình xây dựng, diện tích,vị trí địa lý, địa hình và một số đền ở trong Angkor khác đặc biệt trình bày về điêu khắc của Angkor.

Trang Lịch Sử Angkor hiện nh hình sau:

2). Viết mă lệnh

<html>

<head>

content="revealTrans(Duration=1.0,Transition=4)"> <META content="Microsoft FrontPage 4.0"

BACKGROUND-COLOR: lightyellow; BORDER-BOTTOM: blue 1px solid; BORDER-LEFT: blue 1px solid; BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; FONT: bold 11px/25px Verdana; LEFT: 155px; POSITION: absolute; TOP: 0px; WIDTH: 158px

}

#slidemenubar2 {

BACKGROUND-COLOR: lightGreen; BORDER-BOTTOM: blue 1px solid; BORDER-LEFT: blue 1px solid; BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; FONT: bold 11px/25px Verdana; LEFT: 155px; POSITION: absolute; TOP: 0px; WIDTH: 158px

} </STYLE> </head> <body background="../images/lighttealbg.gif"> <SCRIPT language=JavaScript1.2> if (document.all)

document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')

</SCRIPT>

var sitems=new Array() var sitemlinks=new Array()

//extent or short the list sitems[1]="Ve trang chu" sitems[2]="Ve Campuchia" sitems[3]="Van Hoa Campichia" sitems[4]="Thu Tuc Visa"

sitems[5]="Dai su Quan Campuchia" sitems[6]="Thong Tin Du Lich"

//These are the links pertaining to the above text. sitemlinks[1]="../Default.htm" sitemlinks[2]="VeCampuchia.htm" sitemlinks[3]="VH.htm" sitemlinks[4]="ThuTucViSa.htm" sitemlinks[5]="CambodiaEmbass.htm" for(i=1;i<=sitems.length-1;i++) document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a> ') </SCRIPT> </LAYER> <SCRIPT language=JavaScript1.2> function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate" ,400) } window.onload=regenerate2 if (document.all){ document.write('</div>') themenu=document.all.slidemenubar2.style rightboundary=0 leftboundary=-150 } else{ themenu=document.layers.slidemenubar rightboundary=150 leftboundary=10 } function pull(){ if (window.drawit)

clearInterval(drawit) pullit=setInterval("pullengine()",50) } function draw(){ clearInterval(pullit) drawit=setInterval("drawengine()",50) } function pullengine(){ if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=30 else if(document.layers&&themenu.left<rightboundary) themenu.left+=30 else if (window.pullit) clearInterval(pullit) } function drawengine(){ if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=30 else if(document.layers&&themenu.left>leftboundary) themenu.left-=30 else if (window.drawit) clearInterval(drawit) } </SCRIPT> </head> <body background="../images/lighttealbg.gif">

<a target="TopMain" href="../Htm/TrangGTVH.htm">Lời

giới thiệu</a>

<a target="TopMain" href="../Htm/AngkorThom.htm">AngKor Thom</a>

<a target="TopMain" href="../Htm/AngkorWat.htm"><font face=".VnClarendon" color="#660000"

size="2">AngkorWat</a>

<a target="TopMain" href="../Htm/BakSeiChamKrong.htm">Baksei

Chamkrong</a>

<a target="TopMain" href="../Htm/BanTeaySrey.htm">Banteay Srei</a>

<a target="TopMain" href="../Htm/Bayon.htm"><font face=".VnClarendon" color="#660000"

size="2">Bayon</a>

<a target="TopMain" href="../Htm/SrashSrang.htm">Srash Srang</a>

</body> </html>

c). Thiết kế trang tìm kiếm (Search.asp) 1). Thiết kế

Ng ời tìm kiếm Trang Web

Du Lịch Angkor Thông tin tìm kiếm

Việc trao đổi dữ liệu xảy ra thông qua trang search.asp đợc kết nối với Server. Nếu ngời ta cần tìm kiếm, trong hộp search sẽ gửi thông tin cần

Sử dụng các Script trong ASP

Các quá trình phát triển Web site