Submit Search
Upload
หลักการออกแบบเว็บไซต์
•
1 like
•
367 views
Pongpitak Toey
Follow
นายพงศ์พิทักษ์ รัตนภักดี
Read less
Read more
Education
Report
Share
Report
Share
1 of 13
Download now
Download to read offline
Recommended
Outline
Outline
Meaw Sukee
โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์
Pongpitak Toey
นายพงศ์พิทักษ์ รัตนภักดี
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
เขมิกา กุลาศรี
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
Samorn Tara
Unit2
Unit2
Phannee Yenbamroong
หลักการออกแบบเว็บเพจ
หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
kruple
อธิบายหลักการออกแบบเว็บไซต์
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
khon Kaen University
Introduction to Designing of Web-Based Instruction of Education
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
sommat
Recommended
Outline
Outline
Meaw Sukee
โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์
Pongpitak Toey
นายพงศ์พิทักษ์ รัตนภักดี
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
เขมิกา กุลาศรี
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
Samorn Tara
Unit2
Unit2
Phannee Yenbamroong
หลักการออกแบบเว็บเพจ
หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
kruple
อธิบายหลักการออกแบบเว็บไซต์
Designing of Web-Based Instruction of Education
Designing of Web-Based Instruction of Education
khon Kaen University
Introduction to Designing of Web-Based Instruction of Education
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
sommat
Webpagemaker2
Webpagemaker2
beauten
คู่มือการสร้างเว็บเพจ
Webpagemaker2
Webpagemaker2
beauten
การสร้างเว็บเพจอย่างง่าย ด้วยโปรแกรม WebPageMaker
Outline
Outline
Meaw Sukee
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
duangnapa27
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
sommat
ออกแบบ
ออกแบบ
JiJee Pj
Frontpage
Frontpage
0882324871
เล่มเล็ก New
เล่มเล็ก New
Kanokporn Raksaken
Chapter 1
Chapter 1
Nattriya1212
Chapter 1
คู่มือ Word
คู่มือ Word
keeree samerpark
Web development processes
Web development processes
Meaw Sukee
E book4
E book4
sisiopp
E book4
คู่มือ Power point
คู่มือ Power point
keeree samerpark
เรื่องสัตว์ป่าสงวน
หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
CC Nakhon Pathom Rajabhat University
Author :: อาจารย์สุธารัตน์ ชาวนาฟาง NPRU Open Courseware more info :: http://courseware.npru.ac.th/index.php
ใบความที่ 3
ใบความที่ 3
วุฒิพงษ์ บุตรโพธิ์ศรี
lec03_webdesign.pdf
lec03_webdesign.pdf
MAiMAi339516
เว็ป
Chapter4
Chapter4
aumtall
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
jompon
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
เปรียบเทียบหลักสูตร 2560
เปรียบเทียบหลักสูตร 2560
Pongpitak Toey
เปรียบเทียบหลักสูตร 2560
เครื่องมือพื้นฐานของโปรแกรม
เครื่องมือพื้นฐานของโปรแกรม
Pongpitak Toey
นายพงศ์พิทักษ์ รัตนภักดี
More Related Content
Similar to หลักการออกแบบเว็บไซต์
Webpagemaker2
Webpagemaker2
beauten
คู่มือการสร้างเว็บเพจ
Webpagemaker2
Webpagemaker2
beauten
การสร้างเว็บเพจอย่างง่าย ด้วยโปรแกรม WebPageMaker
Outline
Outline
Meaw Sukee
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
duangnapa27
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
sommat
ออกแบบ
ออกแบบ
JiJee Pj
Frontpage
Frontpage
0882324871
เล่มเล็ก New
เล่มเล็ก New
Kanokporn Raksaken
Chapter 1
Chapter 1
Nattriya1212
Chapter 1
คู่มือ Word
คู่มือ Word
keeree samerpark
Web development processes
Web development processes
Meaw Sukee
E book4
E book4
sisiopp
E book4
คู่มือ Power point
คู่มือ Power point
keeree samerpark
เรื่องสัตว์ป่าสงวน
หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
CC Nakhon Pathom Rajabhat University
Author :: อาจารย์สุธารัตน์ ชาวนาฟาง NPRU Open Courseware more info :: http://courseware.npru.ac.th/index.php
ใบความที่ 3
ใบความที่ 3
วุฒิพงษ์ บุตรโพธิ์ศรี
lec03_webdesign.pdf
lec03_webdesign.pdf
MAiMAi339516
เว็ป
Chapter4
Chapter4
aumtall
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
jompon
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
Similar to หลักการออกแบบเว็บไซต์
(20)
Webpagemaker2
Webpagemaker2
Webpagemaker2
Webpagemaker2
Outline
Outline
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
ออกแบบ
ออกแบบ
Frontpage
Frontpage
เล่มเล็ก New
เล่มเล็ก New
Chapter 1
Chapter 1
คู่มือ Word
คู่มือ Word
Web development processes
Web development processes
E book4
E book4
คู่มือ Power point
คู่มือ Power point
หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
ใบความที่ 3
ใบความที่ 3
lec03_webdesign.pdf
lec03_webdesign.pdf
Chapter4
Chapter4
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
More from Pongpitak Toey
เปรียบเทียบหลักสูตร 2560
เปรียบเทียบหลักสูตร 2560
Pongpitak Toey
เปรียบเทียบหลักสูตร 2560
เครื่องมือพื้นฐานของโปรแกรม
เครื่องมือพื้นฐานของโปรแกรม
Pongpitak Toey
นายพงศ์พิทักษ์ รัตนภักดี
บทที่ 2
บทที่ 2
Pongpitak Toey
Network
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
Pongpitak Toey
4/5
กลุ่ม2
กลุ่ม2
Pongpitak Toey
กลุ่ม2
กลุ่ม2
Pongpitak Toey
กลุ่ม2
กลุ่ม2
Pongpitak Toey
ใบงาน 3.1
ใบงาน 3.1
Pongpitak Toey
นายพงศ์พิทักษ์ รัตนภักีด
More from Pongpitak Toey
(8)
เปรียบเทียบหลักสูตร 2560
เปรียบเทียบหลักสูตร 2560
เครื่องมือพื้นฐานของโปรแกรม
เครื่องมือพื้นฐานของโปรแกรม
บทที่ 2
บทที่ 2
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
กลุ่ม2
กลุ่ม2
กลุ่ม2
กลุ่ม2
กลุ่ม2
กลุ่ม2
ใบงาน 3.1
ใบงาน 3.1
Recently uploaded
โครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิต...
โครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิต...
SweetdelMelon
โครงงาน
Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf
Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf
NuttavutThongjor1
Recap JavaScript and TypeScript.pdfRecap JavaScript and TypeScript.pdfRecap JavaScript and TypeScript.pdf
กำหนดการ การประชุมวิชาการวิทยาการหลังการเก็บเกี่ยวครั้งที่ 21
กำหนดการ การประชุมวิชาการวิทยาการหลังการเก็บเกี่ยวครั้งที่ 21
Postharvest Technology Innovation Center
กำหนดการ การประชุมวิชาการวิทยาการหลังการเก็บเกี่ยวครั้งที่ 21
Fullstack Nest.js and Next.js.pdfFullstack Nest.js and Next.js.pdfFullstack N...
Fullstack Nest.js and Next.js.pdfFullstack Nest.js and Next.js.pdfFullstack N...
NuttavutThongjor1
Fullstack Nest.js and Next.js.pdfFullstack Nest.js and Next.js.pdfFullstack Nest.js and Next.js.pdfอ
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
CholapruekSangkamane1
สอวนชีววิทยา
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
Pattie Pattie
ความสุจริตทางวิชาการ เชื่อมไทยเชื่อมโลก Connect Thailand, Connect the World in The “Academic Honesty” With Five Tools to Drive The Universities to Build The Smart Graduates With Integrity
Artificial Intelligence in Education2.pdf
Artificial Intelligence in Education2.pdf
Prachyanun Nilsook
AI in Education สำนักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยราชภัฏรำไพพรรณี และ D-Tech วันที่ 11 มิถุนายน พ.ศ.2567
โรคทางพันธุกรรมมมมมมมมมมมมมมมมมมมมมม.ppt
โรคทางพันธุกรรมมมมมมมมมมมมมมมมมมมมมม.ppt
pakpoomounhalekjit
าาาาาา
Recently uploaded
(8)
โครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิต...
โครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิตโครงงานคณิต...
Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf
Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf
กำหนดการ การประชุมวิชาการวิทยาการหลังการเก็บเกี่ยวครั้งที่ 21
กำหนดการ การประชุมวิชาการวิทยาการหลังการเก็บเกี่ยวครั้งที่ 21
Fullstack Nest.js and Next.js.pdfFullstack Nest.js and Next.js.pdfFullstack N...
Fullstack Nest.js and Next.js.pdfFullstack Nest.js and Next.js.pdfFullstack N...
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
bio62สอวน.ชีววิทยา-ชีววิทยาปี62-ข้อสอบแข่งกัน
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
ความสุจริตทางวิชาการ “เชื่อมไทยเชื่อมโลก”.pdf
Artificial Intelligence in Education2.pdf
Artificial Intelligence in Education2.pdf
โรคทางพันธุกรรมมมมมมมมมมมมมมมมมมมมมม.ppt
โรคทางพันธุกรรมมมมมมมมมมมมมมมมมมมมมม.ppt
หลักการออกแบบเว็บไซต์
1.
หลักการออกแบบเว็บไซต์ DESIGN WEBSITE
2.
หลักในการสร้างและออกแบบเว็บเพจ ในการสร้างเว็บเพจ หรือหน้าเอกสารแต่ละหน้าของเว็บไซต์นั้น จาเป็นต้องมีขั้นตอนการสร้างเว็บเพจได้ดังนี้
3.
การวางแผน 1) กำหนดเนื้อหำ ก่อนทำเว็บเรำจะต้องรู้ว่ำเรำจะทำเว็บเกี่ยวกับ อะไร
เนื้อหำเป็นอย่ำงไร กลุ่มเป้ำหมำยเป็นกลุ่มใด ทั้งนี้เพื่อที่จะได้ นำเนื้อหำ เหล่ำนั้นมำใส่ในเว็บเพื่อแสดงให้รู้ว่ำ เนื้อหำโดยรวม เกี่ยวกับอะไรบ้ำง 2) ออกแบบมุมมองหน้ำเว็บ (Layout) เป็นกำรจัดวำง องค์ประกอบในเว็บเพจว่ำส่วนใดควรจะมีอะไร โดยกำรร่ำงใส่ กระดำษเปล่ำ ๆ ไว้ก่อนหรือใช้โปรแกรมคอมพิวเตอร์ช่วยในกำร ออกแบบก็ได้ สำมำรถใช้ตำรำงช่วยในกำรจัดองค์ประกอบในหน้ำ เว็บนั้น ซึ่งจะทำให้เว็บเพจมีควำมเป็นระเบียบยิ่งขึ้น และสะดวก ต่อกำรแก้ไข ปรับปรุงต่อไป
4.
การเตรียมการ • 1) กำรเตรียมกำรด้ำนข้อมูล
เช่นเนื้อหำ ภำพ เสียง หรือสิ่งจำเป็นต่ำงๆ ที่คิด ว่ำต้องกำรจะนำเสนอในกำรทำเว็บเพจนั้น เมื่อเรำรู้แล้วว่ำเรำจะทำเว็บ เกี่ยวกับอะไร • 2) กำรรวบรวมข้อมูล เช่น ถ้ำจะทำเว็บ เกี่ยวกับโรงเรียน ก็ต้องไปหำคติพจน์ ประจำโรงเรียน สีประจำโรงเรียน บุคลำกรในโรงเรียน ประวัติโรงเรียน ฯลฯ มำ รวบรวมไว้เพื่อจัดรูปแบบต่อไป • 3) กำรหำเครื่องมือในกำรจัดทำ หมำยถึงโปรแกรมกำรทำงำนต่ำง ๆ เช่น โปรแกรมจัดกำรรูปภำพ เสียง ภำพเคลื่อนไหวต่ำงๆ โปรแกรมในกำรจัดทำเว็บ เพจเป็นต้น
5.
การสร้างและออกแบบเว็บเพจ • เมื่อวางแผนและเตรียมการเรียบร้อยแล้ว ก็ถึงเวลา จัดสร้างเว็บเพจ
ซึ่งอาจจะทาคนเดียวหรือทาเป็นกลุ่มก็ ได้ โดยใช้เครื่องมือที่เตรียมไว้ ซึ่งมีขั้นตอน ดังนี้
6.
• 1) กาหนดโครงสร้างของเว็บไซต์ การสร้างเว็บไซต์นั้น
ควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่ เรียกว่า Site Map ซึ่งสามารถเขียนแผนผังออกมาเพื่อกาหนดจานวนหน้าเว็บ เพจที่ต้องการ หน้าเว็บเพจ-1 (โฮมเพจ) index.html หน้าเว็บเพจ-2 ลงทะเบียน reg.html หน้าเว็บเพจ-3 รายชื่อชุมนุม list.html หน้าเว็บเพจ-4 เช็ครายชื่อ ck.html
7.
กาหนดการเชื่อมโยงระหว่างเว็บเพจ • เป็นการกาหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าให้เชื่อมโยงถึงกันระหว่าง หน้าต่าง ๆ
ได้โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์แต่ละ ไฟล์อย่างชัดเจน index.html history.html list.html about.html vision.html ck.html ckhis.html food.html room.html phu.html
8.
การออกแบบเว็บเพจแต่ละหน้า เป็นการออกแบบหน้าเว็บเพจแต่ละหน้า หรือเลย์เอาท์ (Lay
Out) ให้สวยงาม โดยเฉพาะในเว็บเพจหน้าแรก ซึ่งเรียกว่า “โฮมเพจ” นั้น สามารถออกแบบให้สวยงาม เพื่อดึงดูดความสนใจของผู้เข้าชม โดยการเขียนลงในกระดาษ หรือใช้โปรแกรม คอมพิวเตอร์ช่วยในการออกแบบก็ได้
9.
หน้าหลัก ประวัติ แหล่งท่องเที่ยว
ร้านอาหาร ที่พัก ข่าวท่องเที่ยว ติดต่อเรา ชื่อเว็บไซต์ Logo เมนู Link ที่อยู่ ที่ติดต่อ อีเมล์ รูป และข้อความ กำรออกแบบเว็บเพจแต่ละหน้ำ
10.
การสร้างเว็บเพจแต่ละหน้า • เป็นการนาเว็บเพจที่ออกแบบไว้มาสร้างโดยใช้ภาษา html
หรืออาจใช้โปรแกรม สาเร็จรูป เช่น FrontPage, Macromedia Dreamweaver หรือโปรแกรมสาเร็จรูปอื่น ๆ ตามความถนัด
11.
ทดสอบและการแก้ไขข้อบกพร่อง • กำรสร้ำงเว็บควรจะมีกำรทดสอบก่อนเผยแพร่ทุกครั้ง เพื่อตรวจสอบ ควำมถูกต้องของกำรแสดงผล
โดยทดสอบที่เครื่องของตัวเอง ด้วย โปรแกรมเว็บบรำวเซอร์ที่ใช้อ่ำนข้อมูลภำษ html เช่น Internet Explorer, Firefox, Google Chrome เป็นต้น พร้อมทั้งสำมำรถอัพ โหลดขึ้นไปยังที่จัดเก็บเว็บเพจเพื่อหำข้อบกพร่องและนำมำแก้ไข ต่อไป
12.
การนาเว็บเพจต่าง ๆ มารวบรวมเป็นเว็บไซต์ •
เมื่อสร้างเว็บเพจเสร็จ จัดรวบรวม และเรียบเรียงหน้าเว็บเพจแต่ละหน้า ทาการทดสอบ แก้ไขปรับปรุงเสร็จแล้ว ก็สามารถเผยแพร่เว็บเพจทั้งหมดสู่ สาธารณชนในรูปแบบของเว็บไซต์ได้
13.
ลงทะเบียนขอพื้นที่เว็บไซต์ • เป็นกำรเผยแพร่เว็บไซต์ที่สร้ำงเสร็จแล้วสู่ระบบเครือข่ำย อินเทอร์เน็ต เพื่อให้บุคคลอื่น
ๆ สำมำรถเข้ำชมเว็บไซต์ของเรำ ได้ วิธีกำรก็คือ นำเว็บไซต์ที่เรำสร้ำงขึ้นไปไว้บนพื้นที่ที่ให้บริกำร (Web Hosting) ซึ่งมีพื้นที่ ที่ให้บริกำรฟรีและแบบที่ต้องเสีย ค่ำบริกำร ตัวอย่ำงเว็บ host ที่ให้พื้นที่ฟรี เช่น google site เป็นต้น
Download now