Web page design by Macromedia Dreamweaver อาจารย์สู่ดิน ชาวหินฟ้า

ข้อมูลพื้นฐาน website name: Thai Clay House บ้านดินรุ่งอรุณ domianname: http://www.thaiclayhouse.info page interface: Counter Remote Login Download Search engine Guest Book Web Board e-Learning e-Books e-Commerce Frequently Asked Question (FAQ)

ข้อมูลพื้นฐาน แนวคิด: บ้านดินรุ่งอรุณ สวนไร้สาร ตำนานแห่งคนรักธรรมชาติ จัดสร้างบ้านดิน พร้อมสวนสมุนไพร ที่ผสมผสานกับสวนผัก และไม้ประดับอย่างลงตัว โดยทีมงานมืออาชีพ ที่ทุ่มเทให้กับ คนรักธรรมชาติ และสุขภาพ บ้านดินรุ่งอรุณ สร้างและตกแต่งด้วยความปราณีต อยู่บนพื้นฐานของ 5 แนวคิด Time, Ture, Turst, Taste, Tangible TIME ให้เวลาเป็นผู้ดูชีวิตและสุขภาพ TRUE ชีวิตและสุขภาพที่สมดุล ต้องอยู่บนพื้นฐานแห่งความจริง TRUST ความจริงใจที่มีให้แก่กัน รวมทั้งเราและคุณ TASTE ความสุขที่คุณสัมผัสได้ จากความตั้งใจที่เรา “ให้” คุณ TANGIBLE นี่คือ บ้านดินรุ่งอรุณ แดนสวรรค์ที่คุณชื่นชอบ และสัมผัสได้ ด้วยประสาทสัมผัสทั้งห้า ณ ปัจจุบัน

บ้านดินรุ่งอรุณ ราคาเริ่มต้นที่ 25,000 บาท (เฉพาะตัวบ้าน) ข้อมูลพื้นฐาน แนวคิด: บ้านดินรุ่งอรุณ ออกแบบแข็งแรงได้มาตรฐาน โดยสถาปนิก ที่มีประสบการณ์มากว่า 20 ปี ตกแต่งอย่างพิถีพิถันด้วยศิลปะ ที่คุณพึงพอใจ อุดมด้วยบรรยากาศของความชุ่มเย็นแห่ง สี แสง และอุณหภูมิแบบสบายๆ บริสุทธิ์ ปราศจากมลภาวะมารบกวน พิเศษสำหรับผู้สูงวัย และผู้ที่อยู่ระหว่างบำบัดทางกายภาพ ตลอดจนผู้ดูแล ที่ต้องการสัมผัสกลิ่นอายธรรมชาติอย่างแท้จริง บ้านดินรุ่งอรุณ ราคาเริ่มต้นที่ 25,000 บาท (เฉพาะตัวบ้าน) -มีแบบบ้านและแบบสวนให้เลือกกว่า 50 แบบ ด้วยราคาที่ตกลงกันได้ (ขึ้นอยู่กับวัสดุที่เลือก และขนาดของสวน) -รับประกันปลวกและความคงทนแข็งแรง

ข้อมูลพื้นฐาน แนวคิด: เข็มมุ่งของเวลา คือ การรักษาความเที่ยงตรง เข็มมุ่งของการแสวงหา คือ การค้นพบสิ่งที่พึงพอใจ สิ่งที่ดีที่สุดจากทีมงานบ้านดินรุ่งอรุณ ขอมอบสิ่งที่ดีที่สุดให้แก่คุณ โดยไม่ต้องสูญเสียเวลาแสวงหาอีกต่อไป Office: 000-000-0000 Hotline: (66) 8 0000 0000 email: morningmail@thaicrayhouse.info website: www.thaicrayhouse.info webmaster: sudinc@yahoo.com Copyright by Thai Clay House and Designing Company Limited. All rights reserved., Site Designed by Sudin Chaohinfa

Web Page contactus.html วางแผนและเตรียมข้อมูล Header Logo Picture Menu links Counter Search engine Guest Book Web Board Remote Login Download e-Learning e-Books e-Commerce FAQ Banner Home Page index.html Web Page product.html Web Page location.html Web Page contactus.html Web Page aboutus.html -Text -Picture -Banner -Links -Text -Picture -Banner -Links -Text -Picture -Banner -Links -Text -Picture -Banner -Links SUDIN CHAOHINFA

การออกแบบโครงสร้างเว็บ แบบที่ 1 วางแผนและเตรียมข้อมูล การออกแบบโครงสร้างเว็บ แบบที่ 1

การออกแบบโครงสร้างเว็บ แบบที่ 2 วางแผนและเตรียมข้อมูล การออกแบบโครงสร้างเว็บ แบบที่ 2

การออกแบบโครงสร้างเว็บ แบบที่ 3 วางแผนและเตรียมข้อมูล การออกแบบโครงสร้างเว็บ แบบที่ 3

การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Frame page วางแผนและเตรียมข้อมูล เลือกรูปแบบในการเชื่อมโยง การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Frame page

การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Single page วางแผนและเตรียมข้อมูล เลือกรูปแบบในการเชื่อมโยง การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Single page

หน้าก่อน Home page หรือ Splash page ตัวอย่าง หน้าก่อน Home page หรือ Splash page

ตัวอย่างหน้า Home page

ตัวอย่าง ตัวอย่างหน้า Web page

ตัวอย่าง ตัวอย่างหน้า Web page หรือ Sub Home page กรณีที่ออกแบบเว็บไซต์ที่มีเนื้อหาแบ่งเป็น Domain อื่น

ตัวอย่าง

ขนาดจอภาพของหน้าเว็บ -800 x 600 pixel -1024 x 768 pixel วางแผนและเตรียมข้อมูล – Screen Area: pixel x pixel ขนาดจอภาพของหน้าเว็บ -800 x 600 pixel -1024 x 768 pixel หรือตามความเหมาะสม

วางแผนและเตรียมข้อมูล – Image: Format, Resolution, Size

วางแผนและเตรียมข้อมูล

(1) สร้าง Folder สำหรับเก็บไฟล์ที่ใช้ออกแบบและสร้าง วางแผนและเตรียมข้อมูล - เตรียมโปรแกรม (1) สร้าง Folder สำหรับเก็บไฟล์ที่ใช้ออกแบบและสร้าง (2) คีย์ไฟล์ข้อความ ตกแต่งภาพให้เรียบร้อยเก็บไว้ใน ข้อ (1) (3) ติดตั้งโปรแกรม Marcromedia Dreamweaber (4) ปรับแต่งโปรแกรม Marcromedia Dreamweaber -Preference... -Option... / Properties... -Add New Site... -Page Properties... (5) ลงมือ

วางแผนและเตรียมข้อมูล - สร้าง Folder Root Site Folder

เก็บภาพเล็กๆ ที่ใช้ประกอบหัวข้อ หรือ หัวเรื่อง วางแผนและเตรียมข้อมูล - สร้าง Folder เก็บภาพเล็กๆ ที่ใช้ประกอบหัวข้อ หรือ หัวเรื่อง

เก็บภาพที่ใช้วางบนหน้าเว็บ วางแผนและเตรียมข้อมูล - สร้าง Folder เก็บภาพที่ใช้วางบนหน้าเว็บ

วางแผนและเตรียมข้อมูล - Macromedia Dreamweaver 8.0

วางแผนและเตรียมข้อมูล - Add New Site 1/4

วางแผนและเตรียมข้อมูล - Add New Site 2/4 บอกชื่อเว็บไซต์ บอกซื่อโดเมน

บอกสถานที่เก็บไฟล์ของเว็บไซต์ ที่อยู่ในฮาร์ดดิสก์ = Root Site Path วางแผนและเตรียมข้อมูล - Add New Site 3/4 บอกสถานที่เก็บไฟล์ของเว็บไซต์ ที่อยู่ในฮาร์ดดิสก์ = Root Site Path บอกสถานที่เก็บไฟล์รูปภาพทั้งหมด จะมีผลต่อการ Link ภาพไปยังหน้าอื่นๆ

วางแผนและเตรียมข้อมูล - Add New Site 4/4

คลิกเมาส์เมนู Edit / Preferences... วางแผนและเตรียมข้อมูล - Font Settings คลิกเมาส์เมนู Edit / Preferences...

วางแผนและเตรียมข้อมูล - Font Settings

วางแผนและเตรียมข้อมูล - Page / Encoding Properties เลือกสีภาพ พื้นหลัง

กำหนดภาพ พื้นหลัง คลิก ที่ Browse... วางแผนและเตรียมข้อมูล - Page / Encoding Properties กำหนดภาพ พื้นหลัง คลิก ที่ Browse...

วางแผนและเตรียมข้อมูล - Page / Encoding Properties

วางแผนและเตรียมข้อมูล - Page / Encoding Properties เลือก Thai Encoding

วางแผนและเตรียมข้อมูล - Page / Encoding Properties ผลที่ได้

วางแผนและเตรียมข้อมูล - Page / Encoding Properties จัดเก็บไฟล์

หลังจัดเก็บไฟล์แล้ว ชื่อจะเปลี่ยน จาก untitled-1.html เป็น index.html วางแผนและเตรียมข้อมูล - Page / Encoding Properties หลังจัดเก็บไฟล์แล้ว ชื่อจะเปลี่ยน จาก untitled-1.html เป็น index.html

Page Design - Lay out view / Tools

Page Design - Lay out view / Tools Code ที่โปรแกรม Brower เป็นตัวอ่านและ ตีความ แล้วนำไปแสดงผลบนจอภาพ Code เหล่านี้จะเปลี่ยนไปตามวัตถุ (เช่น text, table, image, e.g.) ที่ถูกวางบนหน้าออกแบบ (หน้า Design)

Page Design - Lay out view / Tools

Page Design - Lay out view / Tools

Page Design - Lay out view / Tools

ไอคอนเครื่องมือเสริม (Option tool) จะเปลี่ยนไปตาม เครื่องมือหลัก Page Design - Lay out view / Tools ไอคอนเครื่องมือเสริม (Option tool) จะเปลี่ยนไปตาม เครื่องมือหลัก

Page Design - Lay out view / Tools

Page Design - Lay out view / Tools

สร้างตารางสำหรับวางข้อความและภาพ Page Design – ลงมือสร้าง -Table สร้างตารางสำหรับวางข้อความและภาพ

Page Design - ลงมือสร้าง -Table สร้างตาราง เพื่อวางรูปภาพและข้อความ

Page Design - ลงมือสร้าง –ใส่ข้อความในตาราง

Page Design - ลงมือสร้าง - ใส่ข้อความในตาราง ใส่คำอธิบายที่ช่องAlternet text เพื่อบอกรายละเอียดเกี่ยวกับภาพนั้น เมื่อลากเมาส์ผ่าน (Tool tips)

Page Design - ลงมือสร้าง สร้างตาราง ซ้อนข้างใน เพื่อวางข้อความให้เป็นสัดส่วน คราวนี้สร้างตารางแบบ 2 คอลัมน์

ปรับความกว้างของตารางได้ตามเหมาะสม Page Design - ลงมือสร้าง ปรับความกว้างของตารางได้ตามเหมาะสม

Page Design - ลงมือสร้าง ข้อความในตาราง ถูกกำหนดตำแหน่งปกติ (Default) จะอยู่กลางตาราง ควรจัดให้อยู่ชิด ขอบบนตาราง

Page Design - ลงมือสร้าง เชื่อมโยงหน้าเว็บ (Hyper Links) ป้ายข้อความที่ต้องการลิงค์ แล้วคลิกเลือก Link

save file ชื่อ index.html วางไว้ที่ Root Site เสมอ Page Design - ลงมือสร้าง save file ชื่อ index.html วางไว้ที่ Root Site เสมอ

โปรดฝึกทักษะด้วยตัวของท่านเอง แล้วจะพบความหัศจรรย์ และความภาคภูมิใจ Page Design - ลงมือสร้าง โปรแกรมยังประโยชน์ให้แก่ท่านอีกมากมาย นี่เป็นเพียงส่วนหนึ่ง แค่ 10 % ของโปรแกรม เท่านั้น โปรดฝึกทักษะด้วยตัวของท่านเอง แล้วจะพบความหัศจรรย์ และความภาคภูมิใจ

(2) คือการสร้าง "ความเป็นจริง" ที่มาจาก "รหัสความหมาย” ของฝากจากใจ อารยธรรมของไอที 5 ยุค (1) คือการสร้างและพัฒนา "รหัสความหมาย" ให้กับคอมพิวเตอร์ (Code marked langued: CML) (2) คือการสร้าง "ความเป็นจริง" ที่มาจาก "รหัสความหมาย” (3) คือการแก้ไข "ความผิดพลาด" ที่เกิดจาก "รหัสความหมาย" (error) (4) คือการป้องกัน "ความเสียหาย" ที่เกิดจาก "ความผิดพลาด" ของ "รหัสความหมาย" (bug) (5) คือการทำลาย "รหัสความหมาย" ที่เกิดจาก "เจตนาอันชั่วร้าย" ของมนุษย์ (virus)

(1) คือการกระทำ "ความจริง" ให้กับ "ความรู้" ที่มนุษย์ควรรู้ ของฝากจากใจ อารยธรรมของมนุษย์ (1) คือการกระทำ "ความจริง" ให้กับ "ความรู้" ที่มนุษย์ควรรู้ (2) คือการงดกระทำ "ความจริง" ที่เกิดจาก "ความรู้" ที่มนุษย์ไม่ควรรู้ (3) คือการเปิดเผย "ความรู้" ที่เป็น "ความจริง" ที่มนุษย์ควรมี (4) คือการปกปิด "ความรู้" ที่เกิดจาก "ความจริง" ที่มนุษย์ไม่ควรมี

บ่อนทำลายอารยธรรมของมนุษย์ มาจากสาเหตุ 2 ประการ คือ ของฝากจากใจ บ่อนทำลายอารยธรรมของมนุษย์ มาจากสาเหตุ 2 ประการ คือ (1) ไอทีวัตถุ (technology hardware & technology software) และ (2) ไอทีจิต (techonology mentality)* ที่มีอิทธิพลครอบงำเหนือมนุษย์ และ มนุษย์ใช้เป็นเครื่องมือ ในการ "ทำลายความผาสุก" ของมนุษย์ด้วยกันเอง ("ศาตรา" โดยแท้ หรืออาวุธ) สิ่งที่ตรงข้ามกับการกระทำดังกล่าว ก็คือ "หายนธรรม" ทั้งสิ้นทั้งปวง

-3. อารมณ์ และ ความรัก (motive & love)** ของฝากจากใจ ไอทีจิต (techonology mentality) หมายถึง "วิธีคิด" และ "การบูรณาการทางความคิด" ระหว่าง 5 องค์ประกอบของ "เครื่องมือและ สภาพแวดล้อมที่ส่งเสริมความคิด" ต่อไปนี้ -1. สุขภาพจิตที่เป็นมนุษย์ปกติ (มนุสสมนุสโส - physical wellbeing human) -2. ความรู้ (knowledge) -3. อารมณ์ และ ความรัก (motive & love)** -4. การสื่อสาร (communication) -5. เวลา (Q-SPORT time dimension)

มนุษย์มี อารมณ์ (motive) เป็นแรงผลักดันให้เกิด พฤติกรรม (behavior) ของฝากจากใจ ความรัก มิใช่ความถูกต้อง แต่เป็นอารมณ์ที่ทำให้มนุษย์อยู่กันได้อย่างผาสุก มนุษย์มี อารมณ์ (motive) เป็นแรงผลักดันให้เกิด พฤติกรรม (behavior) คอมพิวเตอร์มี โปรแกรม (software) เป็นแรงผลักดันให้เกิด การตอบสนอง (interactive output) ระหว่างมนุษย์กับคอมพิวเตอร์ สู่ดิน: 2550

แต่ถ้าจะทำให้ "ความรัก" เป็น "ความถูกต้อง" ต้องอ่าน ความรักสิบมิติ ของฝากจากใจ…จริงจริง แต่ถ้าจะทำให้ "ความรัก" เป็น "ความถูกต้อง" ต้องอ่าน ความรักสิบมิติ http://www.asoke.info/09Communication/DharmaPublicize/Book/book009/index.html

วางแผนและเตรียมข้อมูล - Page / Encoding Properties