หลั�กการในการออกแบบWeb Page

ภั�ทร�ภั�ร� จงเฟื่�� องปร�ญญา 31 พ.ค . 43

สถาบ�นวิ�ทยบร�การ จ!ฬาฯ

Workshop on Developing Strategic Information Service

s and Teaching the Use of Tec - hnology as an aid in End User

Education in Engineering and Science Libraries CU

By Prof. Robert Stueart. T -JTTP March 20 31,2000

Web Page : Concept &Design

What is a web page Think about topics which should

be included on the home page Find the best Library Home

Page Introduce HTML

Mr. Nam, Systems Direc tor at AIT

Web Page ค%ออะไร

Web Page ค%อ สารสนเทศ หร%อเอกสารท��อย�)บน

อ�นเตอร�เน+ต Web Page จะเขี�ยนด้.วิยภัาษา HTML (Hyper Text Markup Language) ซึ่1�งจะ

ก2าหนด้ให. มี�เน%4อหาแลัะร�ปแบบต)างๆ เช่)น ขี.อควิามี ร�ปภัาพ

ภัาพเคลั%�อนไหวิท��มี�เส�ยงประกอบ (video & audio files) hypertext links เป7นต.น

Web Page ที่��เขี�ยนเสร็�จแล้�ว จะต้�องน��ไปเก็�บไว�ที่�� Web Server

หร็�อ HTTP Server Web Page จะถู�ก็ส�งจ�ก็ Server ไป

ย งคอมพิ$วเต้อร็%ขีองผู้��ร็ บ ผู้��นHTTP (hypertext transfer protocol)

HTTP เป'นว$ธี�ร็ บแล้ะส�งWeb Page (hypertext files ซึ่*�งม�น�มสก็+ล้ “.html”) บน

อ$นเต้อร็%เน�ต้ โดยผู้��ใช้�ส�ม�ร็ถูเร็�ยก็Web Page ม�ด� โดยใช้�โปร็แก็ร็ม

ที่��เร็�ยก็ว�� Browser เช้�นNetscape หร็�อ Internet Explorer

Principles of Web

Page DesignConsiderations

1 2Content Organization ffff ff3

ffffff fff ffff ff fff ffff ffffffff fff ffffffff fffffff ff fffffff ff ff

fffffff ffffffffff

ContentContent DeciDecidd ing on the ing on thecontentcontent Decide what to put Decide what to put

on the web site on the web site Identify the Identify theaudienceaudience Define the goal of Define the goal of

the page the page The goal is to inform, The goal is to inform,

instruct & even persuad instruct & even persuad e the user to facilitate e the user to facilitate

access to the collection, access to the collection, information & services of information & services of

the library the library -by creating a well -by creating a well

- organized well design an - organized well design an d d

user friendly WWW user friendly WWWresourceresource

Quality of Content• ในแต)ลัะหน.าขีอง Web Page ควิรก2าหนด้จ!ด้ประสงค�ท��

ช่�ด้เจน• ขี.อควิามีท�4งหมีด้ควิรกระช่�บแลัะช่�ด้เจน• ขี.อมี�ลัขีองห.องสมี!ด้จะต.องถ�กต.องเสมีอ• แหลั)งขี.อมี�ลัท��เลั%อกมีาควิรจะสน�บสน!นการเร�ยน การสอนแลัะ

การวิ�จ�ยขีองมีหาวิ�ทยาลั�ย• มี�การ link ไปย�งแหลั)งขี.อมี�ลัท��มี�ประโยช่น�ท��เก��ยวิขี.อง ควิามี

ส2าค�ญอย�)ท��เน%4อหาใน Page ขีองเรา• Web อ%�นๆ ท��จะท2าการเช่%�อมีต)อด้.วิย ต.องตรวิจสอบควิามีถ�ก

ต.องแลัะควิามีน)าเช่%�อถ%อ• จะต.องไมี)มี�การสน�บสน!นขี.อมี�ลัท��ผิ�ด้กฎหมีายหร%อลัะเมี�ด้ลั�ขีส�ทธิ์�=• เคร%�องหมีายควิรมี�ค2าอธิ์�บายประกอบ• ไมี)ควิรใช่.เส�ยงแลัะภัาพเคลั%�อนไหวิ ใช่.เฉพาะท��จ2าเป7นต)อการส%�อ

ถ1งเน%4อหาน�4นๆ• ควิรใช่.กราฟื่?กท��จ2าเป7นสร.างสรรค�ท��เหมีาะสมีก�บเน%4อหา

Content :Librar y Information Web page statement

Contact email Physical address Update date Staff Directory/Description of

departments News/Events Description of Services andPolicies

Content : References Link to Web search engines Link to Internet directories Own and other OPAC Link to Local information Encyclopedias andDictionaries

Content : Research

• Link to Net Subject Resources

• Link to local Resources• Link to Subscriptionservices

• Link to freeperiodicals

Content : Instructions• Net software

tutorials• Library use tutorials

• Software tutorials• Search enginesguides

หลั�กในการจ�ด้ระบบงาน• การจ�ด้ระบบงานใน Web ต.องรวิด้เร+วิต)อผิ�.ใช่.ในการเขี.าถ1ง

ขี.อมี�ลัท��ต.องการ โด้ยมี�อ!ปกรณ์�ช่)วิย เช่)นมี�ด้�ช่น� หร%อสารบ�ญค.น

• ถ.าขี.อมี�ลัยาวิมีากควิรใช่. link เขี.ามีาช่)วิย โด้ยแบ)งขี.อมี�ลั ออกไปสร.าง page ใหมี)ท��มี� link เช่%�อมีโยงไปหาได้.

• ขี.อควิามีท��เป7นห�วิเร%�อง หร%อ link ควิรเป7นค2า หร%อวิลั� ท��น)า สนใจ แต)ต.องไมี)เก�นควิามีจร�ง

• ขี.อมี�ลัท��ส2าค�ญท��ส!ด้ควิรอย�)ด้.านบนขีอง page• ควิรมี�ขี.อควิามีบอกให.ผิ�.ใช่.ทราบวิ)าอย�) ณ์ บร�เวิณ์ใด้ ตลัอด้

ท�4ง site• การกลั�บไปย�ง home page ควิรจะท2าได้.จากท!กๆ

page• เป7นการออกแบบส2าหร�บ WWW มี�ผิ�.ใช่.ท��วิโลัก ต.องเตร�ยมี

การเร%�องการเปลั��ยนแปลังภัาษา

หลั�กในการจ�ด้ร�ปแบบ• ใน home page ขีองห.องสมี!ด้ หน.าแรก ควิรจะใช่.พ%4นท��เพ�ยงหน.า

เด้�ยวิ เพ%�อควิามีสะด้วิกในการอ)าน โด้ยไมี)ต.องเลั%�อนหน.าจอแลัะควิามี รวิด้เร+วิในการ load ขี.อมี�ลั

• ท2าให.มี�ขี.อมี�ลัท��ใช่.ประโยช่น�ได้.มีาก แต)ไมี)แน)นจนเก�นไป จ�ด้ท��วิ)างให. เหมีาะสมี ให.แสด้งขี.อมี�ลั โด้ยท2าเป7นตาราง หร%อรายการท��สามีารถ

เลั%อกใช่.ได้.ง)าย• ไมี)สร.าง Web page ท��มี�ลั�กษณ์ะภัาพอย�)ในภัาพ ให.ใช่.พ%4นท��วิ)างให.

เป7นประโยช่น�บนหน.าจอมี�ท��วิ)างมีากพอจ1งควิรใช่.มีากกวิ)าท��จะประหย�ด้เน%4อท��จนไมี)น)าด้�

• ให.แสด้งขี.อมี�ลัแต)ลัะส)วินให.มี�ร�ปแบบคลั.ายก�น แต)ลัะย)อหน.าไมี)ควิรมี�ควิามียาวิมีากเก�นไป

• ท!กๆหน.าควิรจะมี�ขี.อควิามีส)วินท.าย ประกอบด้.วิย ช่%�อ แลัะ email link ไปย�งผิ�.ท��สามีารถต�ด้ต)อได้. วิ�นท��ในการ update ลั)าส!ด้ แลัะช่%�อขีองสถาบ�นต.นส�งก�ด้

• ท!กหน.าควิรมี�ช่%�อห.องสมี!ด้แสด้ง• ตรวิจทาน page อย)างเต+มีร�ปแบบ เพ%�อแก.ไขีไมี)ให.เก�ด้ควิามีผิ�ด้

พลัาด้• มี�การ update แลัะบ2าร!งร�กษาอย)างต)อเน%�อง

URL ท��แนะน2าการสร.าง Web Page ค�)มี%อการจ�ด้ร�ปแบบบน Web Page www .w3.org/Provider/Style/Overview.html www.sun.com/styleguide ค�)มี%อ HTML บน Web www.nashville.net/~carl/htmlguide ต�วิอย)าง homepage ห.องสมี!ด้ท��ด้� www.usc.edu/isd/locations/libraries.html

www.harvard.edu/museums libweb.princeton.edu www.lib.pku.edu.cn/enhtml/index.htm library.eng.chula.ac.th

www.w3.org/Provider/Style/Overview.html

www.sun.com/styleguide

www.nashville.net/~carl/htmlguide

www.usc.edu/isd/locations/libraries.html

www.harvard.edu/museums

libweb.princeton.edu

www.lib.pku.edu.cn/enhtml/index.htm

library.eng.chula.ac.th

ต�วิอย)าง home page ห.อง สมี!ด้มีหาวิ�ทยาลั�ย***

www.lib.auburn.edu

www.library.cmu.edu

www.lib.ksu.edu/

www.lib.lsu.edu/

www.calvin.edu/library

www.uky.edu/Libraries

www.lib.virginia.edu/

How toachieve• Make it easy to find us (worldwide)

• Make it easy to navigate our pages• Make it informative and interesting• Make it look good (fashionable ???)• Make it a collection of collections

Carefully outline and lay out the page i n advance

-before beginning HTML mark up

- -v[86Iขีอบค!ณ์ค)ะ