ใหม่เค้าโครงตาราง Fluid Grid Dreamweaver CS6

• อาจ 14, 2024

หากคุณพัฒนาเว็บไซต์อย่างง่ายหรือ CMS ที่ซับซ้อนคุณมีคำถามที่จู้จี้อยู่เสมอในใจของคุณฉันทำทุกอย่างเท่าที่ทำได้เพื่อกำหนดเป้าหมายไปยังผู้ชมทุกประเภทและความละเอียดหน้าจอหรือไม่ ดี Dreamweaver^R CS6 มีคุณสมบัติใหม่ที่ทำให้งานนี้ง่ายขึ้น

ก่อนหน้านี้หนึ่งจะต้องสร้างไฟล์ CSS ที่แตกต่างกันสำหรับความละเอียดหน้าจอที่แตกต่างกันและใช้แบบสอบถามสื่อเพื่อกำหนดไฟล์ CSS ที่จำเป็น นี่ใช้เวลานานและเพิ่มค่าใช้จ่ายโดยรวมในการพัฒนาเว็บไซต์ซึ่งเป็นข่าวร้ายสำหรับทั้งนักพัฒนาและลูกค้า Dreamweaver CS6 ใช้แรงงานจำนวนมากในการสร้างเว็บไซต์ที่ปรับเปลี่ยนได้

กระบวนการเวิร์กโฟลว์ใหม่นี้ขึ้นอยู่กับเค้าโครงตาราง Fluid Grid ใหม่ซึ่งค่อนข้างจะเหมือนกับเทมเพลตเริ่มต้นที่มีเค้าโครงและตัวอักษรเริ่มต้นสำหรับความละเอียดหน้าจอแต่ละรายการสำหรับเว็บไซต์ของคุณ

1. เพียงคลิกไฟล์ - เค้าโครงกริด Fluid Grid ใหม่จาก Menubar
   
   
2. ในกล่องโต้ตอบเอกสารใหม่คุณจะเห็นค่าเริ่มต้นสำหรับหน้าเว็บที่ปรับเปลี่ยนใหม่นี้ ความกว้างได้รับการแก้ไขสำหรับความละเอียดหน้าจอที่แตกต่างกัน
   
   มือถือ 480px
   ตารางที่ 768px
   เดสก์ท็อป 1232px
   
   
3. คุณมีตัวเลือกในการเปลี่ยนจำนวนคอลัมน์เริ่มต้นและร้อยละของความกว้างคอลัมน์สำหรับแต่ละความละเอียดหน้าจอ ค่าเริ่มต้นคือ:
   
   มือถือ 5 คอลัมน์ - 91%
   แท็บเล็ต 8 คอลัมน์ - 93%
   เดสก์ท็อป 10 คอลัมน์ - 90%
   
   
4. พื้นที่ทำงานเริ่มต้นสามารถแสดงรหัสและมุมมองออกแบบ ดังที่คุณเห็นในมุมมองออกแบบไฟล์ใหม่มีแท็ก div หนึ่งแท็กแล้ว คุณสามารถเปลี่ยน ID เริ่มต้นและคลาสสำหรับ div ในแผงคุณสมบัติ
   
   แน่นอนหน้าเว็บของคุณจะต้องมีมากกว่าหนึ่ง div ดังนั้นเราสามารถเพิ่ม divs เพิ่มเติมสำหรับส่วนหัวการนำทางหลักด้านข้างและส่วนท้าย
   
   
5. หากต้องการเพิ่ม div ใหม่ให้เลือกแทรกแท็ก Div Fluid Grid Layout ในแผงแทรก
   
   
6. ในกล่องโต้ตอบคุณสามารถตั้งชื่อ ID สำหรับแท็ก
   
   
7. เมื่อเราเพิ่ม div ที่สำคัญทั้งหมดสำหรับหน้าของเราเราสามารถคลิกและลากเพื่อเปลี่ยนตำแหน่งภายในกริด
   
   

ขอแนะนำให้เราเริ่มสร้างเว็บไซต์สำหรับมือถือและเลื่อนขึ้นเป็นขนาดที่ใหญ่ขึ้น คุณสามารถเปรียบเทียบผลลัพธ์ภาพที่มองเห็นได้อย่างง่ายดายโดยใช้ Resolution Resolutioner สำหรับมือถือแท็บเล็ตและเดสก์ท็อป

เมื่อเราบันทึกเลย์เอาต์ของเราเราจะได้รับหนึ่งไฟล์ HTML5 และ CSS3 ที่จะทำงานได้สำหรับความละเอียดหน้าจอทั้งสาม หากเราพิจารณาไฟล์เหล่านี้เราสามารถค้นหาข้อมูลเกี่ยวกับวิธีการทำงานของไฟล์เพื่อสร้างเว็บเพจที่ปรับเปลี่ยนได้

* Adobe มอบสำเนาของซอฟต์แวร์นี้ให้ฉันเพื่อการตรวจสอบ

ลิขสิทธิ์ 2018 Adobe Systems Incorporated สงวนลิขสิทธิ์. ภาพหน้าจอผลิตภัณฑ์ Adobe พิมพ์ซ้ำได้รับอนุญาตจาก Adobe Systems Incorporated Adobe, Photoshop, อัลบั้ม Photoshop, องค์ประกอบ Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, องค์ประกอบรอบปฐมทัศน์, สะพาน, After Effects, InCopy, Dreamweaver, แฟลช, ActionScript, ดอกไม้ไฟ, Contribute, Flash Catalyst และ Flash Paper เป็น / เป็น [a] เครื่องหมายการค้าจดทะเบียน [s] หรือเครื่องหมายการค้า [s] ของ Adobe Systems Incorporated ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ