ตอนนี้กำลังคิดจะปรับปรุงเว็บไซต์ของออฟฟิศที่ตัวเองรับผิดชอบอยู่ http://acrd.tu.ac.th/ คงจะเห็นกันละครับว่ามันกากๆ พื้นๆหาความสวยงามใดๆมิได้ ก็เลยมีความคิดจะรื้อทำใหม่หมด อย่างน้อยก็ให้มันดีกว่าที่เป็นอยู่ปัจจุบัน ผลอยากจะทำลูกเล่นตรงลิงค์ให้มันเป็นลักษณะเหมือนเว็บของเดลินิวส์ แสดงเมนูย่อยใต้เมนูเมื่อเอาเมาส์ไปชี้ อันนี้แหละครับที่อยากทำ เข้าใจว่าเป็น onmouseover , onmouseout แต่พยายามทำแล้ว ทำไม่ได้สักที ;;w;; ใครพอจะทราบว่ามันทำด้วยอะไร? Javascript ? CSS ? PHP ? หรืออะไรก็แล้วแต่ รบกวนแนะนำสั่งสอนด้วยครับ จะเป็นพระคุณอย่างสูง
เมื่อราวๆปีก่อน ผมก็เขียนเป็น html ให้กับหน้าเว็บของบริษัท ถ้าอยากได้ drop down menu แบบเว็บเดลินิวส์ โดยที่ไม่ต้องไปแตะกับ php และ database ก็แนะนำให้เขียนด้วย CSS จริงๆก็มีคนแจก code CSS ฟรีนะครับ เอามาปรับแต่งใช้หน้าเว็บได้ แต่พอเวลาผ่านไป ตอนนี้ผมก็เปลี่ยนมาใช้พวก CMS แทนแล้ว เพราะอะไรหลายๆอย่างมันทำให้เกิดความสะดวกมากขึ้น แต่ก็ไม่ได้เป็นโปรแกรมเมอร์ ก็เลยไม่สามารถที่จะทำการแก้ไข CMS ให้เป็นไปได้อย่างอิสระดั่งใจเท่าไหร่
พี่เจครับ... code ที่ให้มารู้สึกว่ามันจะไม่แสดงผลเมื่อเปิดด้วย IE ครับ... ซึ่งผู้ใช้งานส่วนใหญ่ในมหาวิทยาลัยเขาใช้ IE กันเป็นหลักครับ... ผมต้องทำยังไงดี...
ผมใช้ใน ie ได้นะครับ ในหน้า html มันมี .... if IE อยู่ ลองเอาตรงนั้นใส่ในหน้าเวบดูครับ ถ้าไม่ได้อาจจะต้องหาตัวอื่น
เดี๋ยวลองดูก่อนครับ ตะกี๊ให้เพื่อนเช็คให้ด้วย IE9 ปรากฎว่าไม่มีปัญหา อาจจะเป็นเพราะ IE เครื่องของผมเป็นเวอร์เก่ากว่า เลยอาจจะแสดงผลได้ไม่หมด ขอบคุณมากครับ
ตอนนี้ มีปัญหาอีกแล้วครับ OTL มี script 2 ตัว คือ ตัวแรกที่พี่เจให้มาเพื่อทำ drop down menu แล้วผมไปหา script ของ light box เพื่อมาทำแกลลอรี่ภาพ มันมี jquery.js ซ้ำกันสองตัว ต่อให้ใส่แยกโฟลเดอร์กัน มันก็อ่านค่าซ้อนกันอยู่ดีแล้วหน้าเว็บก็พังสนิท ผมจะทำยังไงดีครับ ? copy code ใน jquery.js (lightbox) ไปไว้ใน jquery.js (drop down) ด้วยกันได้ไหมครับ ??
อันนี้เป็นส่วน drop down menu Code: <link href="style.css" rel="stylesheet" type="text/css"> <link type="text/css" href="css/jquery.navMenu.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.navMenu.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#navMenu').navMenu(); }); </script> อันนี้เป็นของ light box Code: <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> พอใส่ของ light box เข้าไป ปรากฎว่าภาพนั้นแสดงผลของ light box แต่ drop down menu พังไม่มีชิ้นดีเลยครับ ผมต้องแปะ light box แทรกไว้ตรงไหนถึงจะไม่ทำให้ drop down menu พังดีครับ ตัวนี้เป็นอีกตัวนึงที่โหลดมาใหม่ ไม่มี jquery.js เหมือนที่ถามไว้จากข้างบนครับ อันนี้เป็น code ณ เวลาปัจจุบันที่เขียนใช้งานอยู่ ยังไม่ได้แทรก light box ลงไป Code: <head> <title>Test Page</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-874"> <link href="style.css" rel="stylesheet" type="text/css"> <link type="text/css" href="css/jquery.navMenu.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.navMenu.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#navMenu').navMenu(); }); </script> <style type="text/css"> .style1 {font-size: 28px;} .style2 {font-size: 12px;} </style> </head> รบกวนผู้รู้ทุกท่านแนะนำด้วยครับ m(_ _)m
โอ๊สสสสสสสสสสสสสสสสสสสสสสสส!! **แหกปากกรีดร้อง!** ทำได้แล้วครับ ( ;;w;; ) http://acrd.tu.ac.th/Test/index.htm งมโข่งอยู่นานมาก
อันนี้น่ะครับ วางไว้บนสุด Code: <script type="text/javascript" src="js/jquery.js"></script> script อื่นๆ วางไว้หลังตัวนี้ให้หมดครับ ถ้ามี jquery อีก ก็เอาออกไปเลย ให้โหลดรอบเดียวพอ
ใช่ครับ ตอนนี้ก็ใช้วิธีนั้น อ่าน jquery.js แค่ครั้งเดียวแล้วแยกไปอ่านคุณสมบัติของ drop down menu และ light box อีกรอบหนึ่ง ส่วนที่เอามาลงให้ดูก่อนหน้านี้ ที่มันตีกันก็เพราะ prototype.js และ scriptaculous.js มันตีกับ jquery ครับ พอถอยกลับไปใช้ light box ตัวเดิมที่มี jquery.js แล้วใช้วิธีข้างต้นก็ทำให้แสดงผลเป็นปกติได้ครับ ขอบคุณพี่เจมากๆครับ
ขอตามอ่านอยู่เงียบ ๆ ครับ เป็นการพัฒนาการของเว็บไซต์ของสถาบันการศึกษาที่น่าสนใจทีเีดียว ผมเองก็อยากได้มีโอกาสพัฒนาเว็บไซต์ให้หน่วยงานทางการศึกษาเช่นกันครับ
ผมลอง CSS ตัว H1 ดูให้นะครับ HTML: #center h1{ font-size: 20px; line-height: 50px; margin-bottom: 20px; border: 1px solid #429bca; background: #429bca url(gradient-h-blue.png) repeat-x; text-indent: 20px; text-shadow: 1px 1px 1px #ffffff; border-radius: 5px; width: 400px; } เอารูปนี้ วางที่เดียวกับไฟล์ css ครับ ติดอย่างเดียว border-radius ในหน้าของ Aze มันจะติดอยู่กับ jquery.navMenu.css นะครับ อาจจะต้องไปเปลี่ยนในนั้นแทนที่รวมไว้ข้างบน EDIT - ภาพ สีฟ้าๆ ตอนเซฟไป ตั้งชื่อให้ตรงกับใน css นะครับ gradient-h-blue.png
ต่อนิดนึงครับ แนะนำว่า li นี่ ตัวใหญ่ไปครับ ลดขนาดลงหน่อย ใช้ padding-left จัดให้ทุกบรรทัดมันตรงกันไปเลยครับ แทนที่ >> ต้องภาพไอคอนไปเลยดีกว่า เพราะตอนนี้มันดูรกไปหมด เว้นที่ ทางซ้าย ทางขวา ให้มีที่หายใจอีกนิดนึงครับ ทางซ้ายควรเว้นเข้าไปให้มากกว่า H1 ครับ จะดูเป็นหมวดหมู่กว่า อ่านทั้งหมด ควรมาวางทางซ้ายดีกว่าครับ เพราะตอนนี้ทางขวามันเรียงกันมั่วพออยู่แล้ว มี อ่านทั้งหมด ไปแปะท้ายจะยิ่งดูรกเข้าไปใหญ่ หลังคำว่า อ่านทั้งหมด ใช้ตัว » ต่อท้ายได้ครับ ใน html พิมพ์ว่า » จะได้ตัวนี้
ขอบคุณสำหรับรูป li ที่อุตส่าห์แปะให้ครับผม งั้นไหนๆก็ไหนๆ สูบความรู้จากพี่เจเลยละกัน ตรงบรรทัดใหม่ของ li นั้นทำยังไงให้มันลึกเข้ามาเป็นแนวเดียวกับบรรทัดแรกครับ ??
อันนี้ผมเขียนจากความจำนะครับ ไม่รู้ถูกผิดแค่ไหน หลักการคือ ul ใส่ css เป็น list-style: none; แล้วคุมลูกสีฟ้าด้วย background แทน (ผมชอบทำแบบนี้เพราะมันคุมตำแหน่งได้ดีกว่า) สีแดง เป็น margin ของ ul น่ะครับ ใช้ตัวนี้เป็นตัวกำหนดระยะห่างจากขอบ ทั้งซ้ายขวา ส่วน li ใช้ padding-left (ลูกศรสีเขียว) กำหนดขอบเขตของตัวหนังสือไปเลย ส่วน จุดสีฟ้า ใช้เป็น background-image แบบ no-repeat ใส่ให้ li แล้วหนดระยะห่างจากมุม (ลูกศรสีฟ้า) เอาครับ css จะประมาณ background: url(blue-dot.png) no-repeat 10px 10px; อันบนเป็นแบบเหมารวม ถ้าไม่แน่ใจจะแยกกันออกมาก็ได้ครับ background-image:url(blue-dot.png); background-repeat:no-repeat; background-position:10px 10px; ลองดูตัวอย่างการใช้ background-position http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px 200px ใน quote ของเวบเราก็ใช้หลักการคล้ายๆ กันครับ แปะ ลูกน้ำ เป็น background แล้ว padding ตัวหนังสือให้หลบไปข้างๆ
