ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Web page design by Macromedia Dreamweaver
อาจารย์สู่ดิน ชาวหินฟ้า
2
ข้อมูลพื้นฐาน website name: Thai Clay House บ้านดินรุ่งอรุณ domianname: page interface: Counter Remote Login Download Search engine Guest Book Web Board e-Learning e-Books e-Commerce Frequently Asked Question (FAQ)
3
ข้อมูลพื้นฐาน แนวคิด: บ้านดินรุ่งอรุณ สวนไร้สาร ตำนานแห่งคนรักธรรมชาติ จัดสร้างบ้านดิน พร้อมสวนสมุนไพร ที่ผสมผสานกับสวนผัก และไม้ประดับอย่างลงตัว โดยทีมงานมืออาชีพ ที่ทุ่มเทให้กับ คนรักธรรมชาติ และสุขภาพ บ้านดินรุ่งอรุณ สร้างและตกแต่งด้วยความปราณีต อยู่บนพื้นฐานของ 5 แนวคิด Time, Ture, Turst, Taste, Tangible TIME ให้เวลาเป็นผู้ดูชีวิตและสุขภาพ TRUE ชีวิตและสุขภาพที่สมดุล ต้องอยู่บนพื้นฐานแห่งความจริง TRUST ความจริงใจที่มีให้แก่กัน รวมทั้งเราและคุณ TASTE ความสุขที่คุณสัมผัสได้ จากความตั้งใจที่เรา “ให้” คุณ TANGIBLE นี่คือ บ้านดินรุ่งอรุณ แดนสวรรค์ที่คุณชื่นชอบ และสัมผัสได้ ด้วยประสาทสัมผัสทั้งห้า ณ ปัจจุบัน
4
บ้านดินรุ่งอรุณ ราคาเริ่มต้นที่ 25,000 บาท (เฉพาะตัวบ้าน)
ข้อมูลพื้นฐาน แนวคิด: บ้านดินรุ่งอรุณ ออกแบบแข็งแรงได้มาตรฐาน โดยสถาปนิก ที่มีประสบการณ์มากว่า 20 ปี ตกแต่งอย่างพิถีพิถันด้วยศิลปะ ที่คุณพึงพอใจ อุดมด้วยบรรยากาศของความชุ่มเย็นแห่ง สี แสง และอุณหภูมิแบบสบายๆ บริสุทธิ์ ปราศจากมลภาวะมารบกวน พิเศษสำหรับผู้สูงวัย และผู้ที่อยู่ระหว่างบำบัดทางกายภาพ ตลอดจนผู้ดูแล ที่ต้องการสัมผัสกลิ่นอายธรรมชาติอย่างแท้จริง บ้านดินรุ่งอรุณ ราคาเริ่มต้นที่ 25,000 บาท (เฉพาะตัวบ้าน) -มีแบบบ้านและแบบสวนให้เลือกกว่า 50 แบบ ด้วยราคาที่ตกลงกันได้ (ขึ้นอยู่กับวัสดุที่เลือก และขนาดของสวน) -รับประกันปลวกและความคงทนแข็งแรง
5
ข้อมูลพื้นฐาน แนวคิด: เข็มมุ่งของเวลา คือ การรักษาความเที่ยงตรง เข็มมุ่งของการแสวงหา คือ การค้นพบสิ่งที่พึงพอใจ สิ่งที่ดีที่สุดจากทีมงานบ้านดินรุ่งอรุณ ขอมอบสิ่งที่ดีที่สุดให้แก่คุณ โดยไม่ต้องสูญเสียเวลาแสวงหาอีกต่อไป Office: Hotline: (66) website: webmaster: Copyright by Thai Clay House and Designing Company Limited. All rights reserved., Site Designed by Sudin Chaohinfa
6
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
9
การออกแบบโครงสร้างเว็บ แบบที่ 1
วางแผนและเตรียมข้อมูล การออกแบบโครงสร้างเว็บ แบบที่ 1
10
การออกแบบโครงสร้างเว็บ แบบที่ 2
วางแผนและเตรียมข้อมูล การออกแบบโครงสร้างเว็บ แบบที่ 2
11
การออกแบบโครงสร้างเว็บ แบบที่ 3
วางแผนและเตรียมข้อมูล การออกแบบโครงสร้างเว็บ แบบที่ 3
12
การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Frame page
วางแผนและเตรียมข้อมูล เลือกรูปแบบในการเชื่อมโยง การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Frame page
13
การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Single page
วางแผนและเตรียมข้อมูล เลือกรูปแบบในการเชื่อมโยง การออกแบบและ การเชื่อมโยงหน้าเว็บ (Web page Link) – แบบ Single page
14
หน้าก่อน Home page หรือ Splash page
ตัวอย่าง หน้าก่อน Home page หรือ Splash page
15
ตัวอย่างหน้า Home page
16
ตัวอย่าง ตัวอย่างหน้า Web page
17
ตัวอย่าง ตัวอย่างหน้า Web page หรือ Sub Home page กรณีที่ออกแบบเว็บไซต์ที่มีเนื้อหาแบ่งเป็น Domain อื่น
18
ตัวอย่าง
19
ขนาดจอภาพของหน้าเว็บ -800 x 600 pixel -1024 x 768 pixel
วางแผนและเตรียมข้อมูล – Screen Area: pixel x pixel ขนาดจอภาพของหน้าเว็บ -800 x 600 pixel x 768 pixel หรือตามความเหมาะสม
20
วางแผนและเตรียมข้อมูล – Image: Format, Resolution, Size
21
วางแผนและเตรียมข้อมูล
22
(1) สร้าง Folder สำหรับเก็บไฟล์ที่ใช้ออกแบบและสร้าง
วางแผนและเตรียมข้อมูล - เตรียมโปรแกรม (1) สร้าง Folder สำหรับเก็บไฟล์ที่ใช้ออกแบบและสร้าง (2) คีย์ไฟล์ข้อความ ตกแต่งภาพให้เรียบร้อยเก็บไว้ใน ข้อ (1) (3) ติดตั้งโปรแกรม Marcromedia Dreamweaber (4) ปรับแต่งโปรแกรม Marcromedia Dreamweaber -Preference... -Option... / Properties... -Add New Site... -Page Properties... (5) ลงมือ
23
วางแผนและเตรียมข้อมูล - สร้าง Folder
Root Site Folder
24
เก็บภาพเล็กๆ ที่ใช้ประกอบหัวข้อ หรือ หัวเรื่อง
วางแผนและเตรียมข้อมูล - สร้าง Folder เก็บภาพเล็กๆ ที่ใช้ประกอบหัวข้อ หรือ หัวเรื่อง
25
เก็บภาพที่ใช้วางบนหน้าเว็บ
วางแผนและเตรียมข้อมูล - สร้าง Folder เก็บภาพที่ใช้วางบนหน้าเว็บ
26
วางแผนและเตรียมข้อมูล - Macromedia Dreamweaver 8.0
27
วางแผนและเตรียมข้อมูล - Add New Site 1/4
28
วางแผนและเตรียมข้อมูล - Add New Site 2/4
บอกชื่อเว็บไซต์ บอกซื่อโดเมน
29
บอกสถานที่เก็บไฟล์ของเว็บไซต์ ที่อยู่ในฮาร์ดดิสก์ = Root Site Path
วางแผนและเตรียมข้อมูล - Add New Site 3/4 บอกสถานที่เก็บไฟล์ของเว็บไซต์ ที่อยู่ในฮาร์ดดิสก์ = Root Site Path บอกสถานที่เก็บไฟล์รูปภาพทั้งหมด จะมีผลต่อการ Link ภาพไปยังหน้าอื่นๆ
30
วางแผนและเตรียมข้อมูล - Add New Site 4/4
31
คลิกเมาส์เมนู Edit / Preferences...
วางแผนและเตรียมข้อมูล - Font Settings คลิกเมาส์เมนู Edit / Preferences...
32
วางแผนและเตรียมข้อมูล - Font Settings
33
วางแผนและเตรียมข้อมูล - Page / Encoding Properties
เลือกสีภาพ พื้นหลัง
34
กำหนดภาพ พื้นหลัง คลิก ที่ Browse...
วางแผนและเตรียมข้อมูล - Page / Encoding Properties กำหนดภาพ พื้นหลัง คลิก ที่ Browse...
35
วางแผนและเตรียมข้อมูล - Page / Encoding Properties
36
วางแผนและเตรียมข้อมูล - Page / Encoding Properties
เลือก Thai Encoding
37
วางแผนและเตรียมข้อมูล - Page / Encoding Properties
ผลที่ได้
38
วางแผนและเตรียมข้อมูล - Page / Encoding Properties
จัดเก็บไฟล์
39
หลังจัดเก็บไฟล์แล้ว ชื่อจะเปลี่ยน จาก untitled-1.html เป็น index.html
วางแผนและเตรียมข้อมูล - Page / Encoding Properties หลังจัดเก็บไฟล์แล้ว ชื่อจะเปลี่ยน จาก untitled-1.html เป็น index.html
40
Page Design - Lay out view / Tools
41
Page Design - Lay out view / Tools
Code ที่โปรแกรม Brower เป็นตัวอ่านและ ตีความ แล้วนำไปแสดงผลบนจอภาพ Code เหล่านี้จะเปลี่ยนไปตามวัตถุ (เช่น text, table, image, e.g.) ที่ถูกวางบนหน้าออกแบบ (หน้า Design)
42
Page Design - Lay out view / Tools
43
Page Design - Lay out view / Tools
44
Page Design - Lay out view / Tools
45
ไอคอนเครื่องมือเสริม (Option tool) จะเปลี่ยนไปตาม เครื่องมือหลัก
Page Design - Lay out view / Tools ไอคอนเครื่องมือเสริม (Option tool) จะเปลี่ยนไปตาม เครื่องมือหลัก
46
Page Design - Lay out view / Tools
47
Page Design - Lay out view / Tools
48
สร้างตารางสำหรับวางข้อความและภาพ
Page Design – ลงมือสร้าง -Table สร้างตารางสำหรับวางข้อความและภาพ
49
Page Design - ลงมือสร้าง -Table
สร้างตาราง เพื่อวางรูปภาพและข้อความ
50
Page Design - ลงมือสร้าง –ใส่ข้อความในตาราง
51
Page Design - ลงมือสร้าง - ใส่ข้อความในตาราง
ใส่คำอธิบายที่ช่องAlternet text เพื่อบอกรายละเอียดเกี่ยวกับภาพนั้น เมื่อลากเมาส์ผ่าน (Tool tips)
52
Page Design - ลงมือสร้าง
สร้างตาราง ซ้อนข้างใน เพื่อวางข้อความให้เป็นสัดส่วน คราวนี้สร้างตารางแบบ 2 คอลัมน์
53
ปรับความกว้างของตารางได้ตามเหมาะสม
Page Design - ลงมือสร้าง ปรับความกว้างของตารางได้ตามเหมาะสม
54
Page Design - ลงมือสร้าง
ข้อความในตาราง ถูกกำหนดตำแหน่งปกติ (Default) จะอยู่กลางตาราง ควรจัดให้อยู่ชิด ขอบบนตาราง
55
Page Design - ลงมือสร้าง
เชื่อมโยงหน้าเว็บ (Hyper Links) ป้ายข้อความที่ต้องการลิงค์ แล้วคลิกเลือก Link
56
save file ชื่อ index.html วางไว้ที่ Root Site เสมอ
Page Design - ลงมือสร้าง save file ชื่อ index.html วางไว้ที่ Root Site เสมอ
57
โปรดฝึกทักษะด้วยตัวของท่านเอง แล้วจะพบความหัศจรรย์ และความภาคภูมิใจ
Page Design - ลงมือสร้าง โปรแกรมยังประโยชน์ให้แก่ท่านอีกมากมาย นี่เป็นเพียงส่วนหนึ่ง แค่ 10 % ของโปรแกรม เท่านั้น โปรดฝึกทักษะด้วยตัวของท่านเอง แล้วจะพบความหัศจรรย์ และความภาคภูมิใจ
58
(2) คือการสร้าง "ความเป็นจริง" ที่มาจาก "รหัสความหมาย”
ของฝากจากใจ อารยธรรมของไอที 5 ยุค (1) คือการสร้างและพัฒนา "รหัสความหมาย" ให้กับคอมพิวเตอร์ (Code marked langued: CML) (2) คือการสร้าง "ความเป็นจริง" ที่มาจาก "รหัสความหมาย” (3) คือการแก้ไข "ความผิดพลาด" ที่เกิดจาก "รหัสความหมาย" (error) (4) คือการป้องกัน "ความเสียหาย" ที่เกิดจาก "ความผิดพลาด" ของ "รหัสความหมาย" (bug) (5) คือการทำลาย "รหัสความหมาย" ที่เกิดจาก "เจตนาอันชั่วร้าย" ของมนุษย์ (virus)
59
(1) คือการกระทำ "ความจริง" ให้กับ "ความรู้" ที่มนุษย์ควรรู้
ของฝากจากใจ อารยธรรมของมนุษย์ (1) คือการกระทำ "ความจริง" ให้กับ "ความรู้" ที่มนุษย์ควรรู้ (2) คือการงดกระทำ "ความจริง" ที่เกิดจาก "ความรู้" ที่มนุษย์ไม่ควรรู้ (3) คือการเปิดเผย "ความรู้" ที่เป็น "ความจริง" ที่มนุษย์ควรมี (4) คือการปกปิด "ความรู้" ที่เกิดจาก "ความจริง" ที่มนุษย์ไม่ควรมี
60
บ่อนทำลายอารยธรรมของมนุษย์ มาจากสาเหตุ 2 ประการ คือ
ของฝากจากใจ บ่อนทำลายอารยธรรมของมนุษย์ มาจากสาเหตุ 2 ประการ คือ (1) ไอทีวัตถุ (technology hardware & technology software) และ (2) ไอทีจิต (techonology mentality)* ที่มีอิทธิพลครอบงำเหนือมนุษย์ และ มนุษย์ใช้เป็นเครื่องมือ ในการ "ทำลายความผาสุก" ของมนุษย์ด้วยกันเอง ("ศาตรา" โดยแท้ หรืออาวุธ) สิ่งที่ตรงข้ามกับการกระทำดังกล่าว ก็คือ "หายนธรรม" ทั้งสิ้นทั้งปวง
61
-3. อารมณ์ และ ความรัก (motive & love)**
ของฝากจากใจ ไอทีจิต (techonology mentality) หมายถึง "วิธีคิด" และ "การบูรณาการทางความคิด" ระหว่าง 5 องค์ประกอบของ "เครื่องมือและ สภาพแวดล้อมที่ส่งเสริมความคิด" ต่อไปนี้ -1. สุขภาพจิตที่เป็นมนุษย์ปกติ (มนุสสมนุสโส - physical wellbeing human) -2. ความรู้ (knowledge) -3. อารมณ์ และ ความรัก (motive & love)** -4. การสื่อสาร (communication) -5. เวลา (Q-SPORT time dimension)
62
มนุษย์มี อารมณ์ (motive) เป็นแรงผลักดันให้เกิด พฤติกรรม (behavior)
ของฝากจากใจ ความรัก มิใช่ความถูกต้อง แต่เป็นอารมณ์ที่ทำให้มนุษย์อยู่กันได้อย่างผาสุก มนุษย์มี อารมณ์ (motive) เป็นแรงผลักดันให้เกิด พฤติกรรม (behavior) คอมพิวเตอร์มี โปรแกรม (software) เป็นแรงผลักดันให้เกิด การตอบสนอง (interactive output) ระหว่างมนุษย์กับคอมพิวเตอร์ สู่ดิน: 2550
63
แต่ถ้าจะทำให้ "ความรัก" เป็น "ความถูกต้อง" ต้องอ่าน ความรักสิบมิติ
ของฝากจากใจ…จริงจริง แต่ถ้าจะทำให้ "ความรัก" เป็น "ความถูกต้อง" ต้องอ่าน ความรักสิบมิติ
64
วางแผนและเตรียมข้อมูล - Page / Encoding Properties
งานนำเสนอที่คล้ายกัน
