donuzz's blog » css http://www.donuzz.com Life, Travel, Web Design Tue, 31 Jan 2012 07:41:04 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 ซ่อน/แสดงเนื้อหาในเว็บเพจ โดยใช้ JavaScript http://www.donuzz.com/2008/javascript-show-hide-div-content http://www.donuzz.com/2008/javascript-show-hide-div-content#comments Wed, 25 Jun 2008 04:47:41 +0000 Donuzz http://www.donuzz.com/?p=211 Continue reading →]]> การทำ Link ให้ผู้ใช้กดเพื่อ ซ่อน/แสดง เนื้อหาในเว็บเพจ สามารถทำได้โดยใช้ JavaScript และเนื้อหาที่อยู่ในแท็บ DIV ดังนี้ครับ

ตัวอย่าง: ลองกดดูสิครับ !!

.

1. โค้ด JavaScript สำหรับฟังก์ชันสำหรับ ซ่อน/แสดง เนื้อหา (Copy โค้ด JavaScript ด้านล่างนี้ไปวางในไฟล์ html)

.

2. ส่วนเนื้อหาที่อยู่ใน DIV (ใช้โค้ดด้านล่างนี้สำหรับส่วนที่จะ ซ่อน/แสดง เนื้อหา)

.

3. โค้ดสำหรับสร้าง Link ให้ผู้ใช้กดเพื่อซ่อนหรือแสดงเนื้อหาในข้อ 2

กดที่นี่เพื่อ แสดง/ซ่อน เนื้อหา

.

จบแล้วครับ ลองนำไปประยุกต์ใช้กับการออกแบบเว็บ เผื่อจะเป็นประโยชน์ได้บ้างครับ

]]> http://www.donuzz.com/2008/javascript-show-hide-div-content/feed 11 รวมเครื่องมือออนไลน์ช่วยทำเว็บ http://www.donuzz.com/2008/online-web-design-tools http://www.donuzz.com/2008/online-web-design-tools#comments Sun, 18 May 2008 07:38:25 +0000 Donuzz http://www.donuzz.com/?p=200 Continue reading →]]> เดี๋ยวนี้มีเว็บดีๆ อยู่มากมายที่ให้บริการเครื่องมือ และเครื่องทุ่นแรงสำหรับนักออกแบบและพัฒนาเว็บไซต์ ลองไปใช้งานกันดูนะครับ แต่ละเว็บเจ๋งๆ ทั้งนั้น มีประโยชน์และช่วยอำนวยความสะดวกในการทำเว็บได้มากเลย !!

___________________________________________________________

เครื่องมือสร้าง XML Sitemap

เครื่องมือสร้างไฟล์ Robots.txt

เครื่องมือสร้าง Password

เครื่องมือสร้าง META Tags

เครื่องมือสร้างไฟล์ htaccess

เครื่องมือสร้าง Form สวยๆ

เครื่องมือสร้างรูป Favicon.ico

เครื่องมือสร้างกราฟิก E-mail

เครื่องมือสร้าง CSS

เครื่องมือสำหรับเลือกโทนสีในการออกแบบเว็บ

ที่มา: Online Tools For Web Design

]]> http://www.donuzz.com/2008/online-web-design-tools/feed 3 ตัวอย่างการทำ CSS Menu สำหรับเว็บไซต์ http://www.donuzz.com/2007/css-menu-navigation-example http://www.donuzz.com/2007/css-menu-navigation-example#comments Sat, 12 May 2007 19:09:12 +0000 Donuzz http://www.donuzz.com/portfolio/%e0%b8%95%e0%b8%b1%e0%b8%a7%e0%b8%ad%e0%b8%a2%e0%b9%88%e0%b8%b2%e0%b8%87%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%97%e0%b8%b3-css-menu-%e0%b8%aa%e0%b8%b3%e0%b8%ab%e0%b8%a3%e0%b8%b1%e0%b8%9a%e0%b9%80%e0%b8%a7% Continue reading →]]> วันนี้เรามาลองศึกษาการทำ CSS Menu กันดีกว่าครับ

CSS Menu ก็คล้ายๆ กับการทำ Rollover Image ใน Dreamweaver จะต่างกันที่ Rollover Image นั้นเป็นการใช้ HTML + JavaScript ส่วนการนำ CSS มาใช้ทำ Navigation หรือเมนูของเว็บไซต์นั้น จะเป็นการนำค่าต่างๆ ที่เรากำหนดไว้ในไฟล์ CSS มาควบคุม Style ของแท็ก ul, li ในไฟล์ HTML ซึ่งจะทำให้โค้ด HTML ที่ได้นั้นสะอาด เบา และเป็นมาตรฐานกว่าครับ

วันนี้ผมผ่านไปพบกับเว็บ 13Styles.com ซึ่งมีตัวอย่าง CSS Menu ให้เราดาวน์โหลดไปใช้ได้ฟรีๆ โดยเมนูแต่ละรูปแบบจะมีไฟล์ .css, .html และไฟล์รูปภาพมาให้ด้วย หากสนใจลองดาวน์โหลดมาศึกษาดูนะครับ

CSS Menu

 


]]> http://www.donuzz.com/2007/css-menu-navigation-example/feed 14