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

CSS คลิกแผนภูมิ

CSS สูตรโกง

สไปรท์บ็อกซ์

เครื่องสร้างแผนที่พิกเซล

ทำความสะอาด CSS

CSS เคลื่อนไหว

พวกคุณแอนิเมชั่นเหรอ? ใช้และเล่นกับการเปลี่ยนภาพใน CSS

การไล่ระดับสี UI

รอ! เคลื่อนไหว

การสร้างการหยุดซ้ำแบบกำหนดเองระหว่างภาพเคลื่อนไหว CSS ไม่ใช่เรื่องง่าย แต่ด้วยความช่วยเหลือของแอปพลิเคชันนี้ ความซับซ้อนของขั้นตอนจะลดลงเหลือศูนย์

เครื่องกำเนิด CSS3

ชุดประเภท CSS

ต้องการดูว่าแบบอักษรที่แตกต่างกันมีลักษณะอย่างไร ไปที่ชุดประเภท CSS สิ่งที่คุณต้องทำคือใส่ข้อความและเลือกตัวเลือกแบบอักษร

เพลิดเพลินไปกับ CSS

กล่องเฟล็กซี่

หากคุณมีปัญหาในการเข้าใจ flexbox คุณควรลองใช้ Flexy Boxes ในแอพนี้คุณสามารถเปรียบเทียบ flexbox และการตีความไวยากรณ์เวอร์ชันต่างๆ

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

CSS คลิกแผนภูมิ

CSS สูตรโกง

สไปรท์บ็อกซ์

เครื่องสร้างแผนที่พิกเซล

ทำความสะอาด CSS

CSS เคลื่อนไหว

พวกคุณแอนิเมชั่นเหรอ? ใช้และเล่นกับการเปลี่ยนภาพใน CSS

การไล่ระดับสี UI

รอ! เคลื่อนไหว

การสร้างการหยุดซ้ำแบบกำหนดเองระหว่างภาพเคลื่อนไหว CSS ไม่ใช่เรื่องง่าย แต่ด้วยความช่วยเหลือของแอปพลิเคชันนี้ ความซับซ้อนของขั้นตอนจะลดลงเหลือศูนย์

เครื่องกำเนิด CSS3

ชุดประเภท CSS

ต้องการดูว่าแบบอักษรที่แตกต่างกันมีลักษณะอย่างไร ไปที่ชุดประเภท CSS สิ่งที่คุณต้องทำคือใส่ข้อความและเลือกตัวเลือกแบบอักษร

เพลิดเพลินไปกับ CSS

กล่องเฟล็กซี่

หากคุณมีปัญหาในการเข้าใจ flexbox คุณควรลองใช้ Flexy Boxes ในแอพนี้คุณสามารถเปรียบเทียบ flexbox และการตีความไวยากรณ์เวอร์ชันต่างๆ

ก! คุณใช้เครื่องกำเนิดไฟฟ้าหรือไม่? CSS3หรือ HTML5? ถ้าไม่เช่นนั้น มันก็คุ้มค่าที่จะลอง :) ลองนึกภาพดูสิ คุณสามารถละทิ้งการอธิบายสไตล์ของปุ่ม มุมในบล็อก เงา การไล่ระดับสีด้วยตนเองได้ ถ้าใครใช้ และอื่นๆ รวมถึง HTML5 ด้วย ทำไมต้องเขียนโค้ดเดียวกันทุกครั้งที่คุณสร้างโปรเจ็กต์ใหม่ ในเมื่อคุณสามารถ “พิมพ์” พารามิเตอร์ลงในกล่อง กดปุ่ม และรับซอร์สโค้ดสำเร็จรูป และแก้ไขหากจำเป็น!
ในบทความนี้ฉันจะแสดงตัวเลือกของเครื่องกำเนิดไฟฟ้าดังกล่าวให้คุณดู ส่วนใหญ่จะเป็นตัวสร้าง CSS3 และอีกสองตัวสำหรับ HTML5 เพื่อไปที่เว็บไซต์บริการ - คลิกที่ชื่อบริการ!

เครื่องกำเนิด CSS3:

CSS3.me

หนึ่งในเครื่องกำเนิดไฟฟ้าที่ดีที่สุด ผู้เขียนคือ เอริค ฮอฟฟ์แมน. คุณสามารถเปลี่ยนแปลงและตั้งค่าการปัดเศษ เงา การไล่ระดับสี และความโปร่งใส ซึ่งเป็นเอฟเฟกต์ที่ใช้บ่อยที่สุด

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

มีเกือบทุกอย่างและอีกเล็กน้อย คุณสามารถปรับแต่ง @font face, ภาพเคลื่อนไหว, เงาของกล่อง, เงาข้อความ, การหมุนข้อความ, การแปลง, การไล่ระดับสี, การปัดเศษ และอื่นๆ อีกมากมาย

เครื่องกำเนิด CSS3

มีฟังก์ชันการทำงานเหมือนกับเครื่องกำเนิดไฟฟ้ารุ่นก่อนโดยประมาณ คุณต้องเลือกรายการที่สนใจจากรายการแบบเลื่อนลงและป้อนข้อมูลหลัก

Webestools เครื่องกำเนิดเงา

เครื่องกำเนิดเงา สามารถปรับได้เฉพาะเงาเท่านั้น: สี ออฟเซ็ต เบลอ เงาด้านในหรือด้านนอก ฯลฯ

เครื่องกำเนิดปุ่ม

ตัวสร้างปุ่ม CSS3

เครื่องกำเนิดความสนุกสนาน ทางด้านขวาจะมีปุ่มขนาดใหญ่ปุ่มเดียว - เป็นผลมาจากการปรับเปลี่ยนและทางด้านซ้ายจะมีการตั้งค่า คุณสามารถปรับแต่งเงา เส้นขอบ สี และอื่นๆ ได้ แถบเลื่อนแบบลากและวางเหมาะสำหรับผู้ที่ยังใหม่ต่อการสร้างเว็บไซต์ เป็นการดีที่คุณสามารถเห็นปฏิกิริยาต่อการกระทำของคุณได้ทันทีจากนี้คุณจะเข้าใจได้ว่าการตั้งค่าใดรับผิดชอบต่อสิ่งใด

เครื่องมือสร้างปุ่ม CSS3-Tricks

ตัวสร้างปุ่มนี้ง่ายกว่าเล็กน้อย กระบวนการทั้งหมดในการสร้างปุ่มจะขึ้นอยู่กับการลากแถบเลื่อน ที่นี่การเดิมพันจะอยู่บนพื้นหลังนั่นคือการเล่นตามสีของปุ่ม

CSS3 Button.net

นี่ยังไม่ใช่ตัวสร้างปุ่มที่ไม่ดี คุณสามารถปรับแต่งพื้นหลังของปุ่ม เส้นขอบ เงาด้านนอก เงาด้านใน ขนาด สีข้อความ และเงาข้อความได้ เมื่อคุณทำการเปลี่ยนแปลงในบล็อกทางด้านขวา รหัสจะเปลี่ยนทันที

ภาพเส้นขอบและตัวสร้างรัศมี

ชายแดน-รัศมี

ฟังก์ชั่นที่ค่อนข้างเรียบง่าย: คุณสามารถกำหนดค่าการปัดเศษของมุมได้เท่านั้น แต่จากนั้นแต่ละมุมจะแยกกัน

เส้นขอบภาพ

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

เครื่องกำเนิดการไล่ระดับสี CSS3

โปรแกรมแก้ไขไล่ระดับสี Colorzilla

นี่คือเครื่องกำเนิดเกรเดียนต์ที่เจ๋งมาก มีชุดสีสำเร็จรูปจำนวนมาก แต่คุณสามารถเลือกชุดสีของคุณเองได้ มีการตั้งค่าประเภทการไล่ระดับสี: แนวนอน แนวตั้ง ฯลฯ มีแม้กระทั่งการรองรับ IE

เครื่องกำเนิด HTML5

HTML5 ★ แผ่นหม้อน้ำ

ด้วยตัวสร้างนี้ คุณจะได้รับเทมเพลตเทมเพลตที่ได้รับการปรับให้เหมาะสมที่สุดสำหรับเบราว์เซอร์ที่แตกต่างกัน ฉันชอบเครื่องกำเนิดไฟฟ้านี้มาก ฉันจะใช้มันตอนนี้ หากต้องการทำความคุ้นเคยกับ "เคล็ดลับ" ทั้งหมด โปรดเยี่ยมชมโครงการนี้ โดยเฉพาะอย่างยิ่งเมื่อทุกอย่างเป็นภาษารัสเซีย

ตัวสร้าง Shikiryu HTML5 นั้นซับซ้อนกว่าตัวก่อนหน้าเล็กน้อย อนุญาตให้เราป้อนชื่อและคำอธิบายของเพจ เชื่อมต่อเฟรมเวิร์ก CSS สไตล์ปุ่ม CSS ไลบรารี การวิเคราะห์ ฯลฯ

Initializr เป็นตัวสร้างเทมเพลต HTML5 ที่จะช่วยให้คุณเริ่มต้นโปรเจ็กต์ใหม่ได้ Initializr สร้างเทมเพลตที่สะอาดตาและปรับแต่งได้สำหรับคุณ พารามิเตอร์ที่เลือกได้แก่: เฟรมเวิร์กหลัก, ตัวเลือกเซิร์ฟเวอร์ (.htaccess, nginx.conf, web.config), การเชื่อมต่อ jquery, การวิเคราะห์ของ Google, ตัวเลือกระหว่าง ฯลฯ

นี่คือเครื่องกำเนิดไฟฟ้าอย่างง่าย เราถูกขอให้เลือกองค์ประกอบที่จะนำเสนอบนหน้าและระบุตัวเลือกสองสามตัวด้วย

เพียงเท่านี้ หากคุณรู้จักเครื่องมือสร้าง HTML5 หรือ CSS3 ที่ดี โปรดเขียนเกี่ยวกับเครื่องมือเหล่านี้ในความคิดเห็นได้เลย :)

หากต้องการติดตามบทความและบทเรียนล่าสุด โปรดสมัครรับข้อมูล

เครื่องมือสร้างหน้าเว็บไซต์ออนไลน์ที่เรียบง่ายนี้ช่วยให้คุณสร้างหน้าสำหรับเว็บไซต์ของคุณได้เช่นเดียวกับในโปรแกรมแก้ไขข้อความทั่วไป มันสามารถสร้างแท็ก HTML ที่จำเป็นที่สุดทั้งหมดในเนื้อหาของหน้าเว็บได้ ตัวสร้างโค้ด html สำหรับเนื้อหาของหน้าเว็บไซต์นี้จะช่วยเร่งการสร้างหน้าเว็บไซต์ได้หลายครั้ง

หมายเหตุบางประการเกี่ยวกับการใช้โปรแกรมสร้างหน้าเว็บไซต์

เครื่องมือสร้างหน้าเว็บไซต์นี้เป็นภาพในแง่ที่ว่าจะสร้างโค้ด html ของหน้า ดังนั้นในเบราว์เซอร์ที่คุณใช้งานเมื่อทำงานกับเครื่องมือสร้างนี้ หน้าจะแสดงตรงตามที่คุณเห็นในหน้าต่างตัวแก้ไข ตัวแก้ไขตัวสร้างนี้สร้างเฉพาะโค้ดมาร์กอัปเท่านั้น ซึ่งก็คือ HTML เท่านั้น ไม่ได้มีไว้สำหรับการสร้างสคริปต์ในภาษาการเขียนโปรแกรมเช่น JavaScript หรือ PHP

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

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

คำแนะนำสำหรับการใช้งาน

หากคุณเคยใช้โปรแกรมแก้ไขข้อความเช่น MS Word คุณจะไม่มีปัญหาใด ๆ ในการควบคุมการสร้างหน้าเว็บนี้ ตัวแก้ไขนี้สามารถใช้เพื่อสร้างเนื้อหาของหน้าเว็บตั้งแต่เริ่มต้น หรือแก้ไขหน้าเว็บที่มีอยู่เพื่อทำการเปลี่ยนแปลงของคุณเอง

หากคุณเริ่มสร้างเพจตั้งแต่ต้น คุณจะต้องลบข้อความเริ่มต้นของฉันในหน้าต่างตัวแก้ไข และเริ่มป้อนข้อความ รูปภาพ และจัดรูปแบบของคุณเองที่นั่น เมื่องานเสร็จสิ้น คุณต้องคลิกที่ปุ่ม "โค้ด" ที่ด้านล่างของหน้าจอตัวแก้ไขและคัดลอกโค้ดผลลัพธ์ลงในไฟล์ของหน้าเว็บของคุณ และบันทึกไฟล์นี้ โปรดทราบว่าคุณต้องคัดลอกรหัสที่ได้รับลงในเนื้อหาของหน้าเว็บเท่านั้น นั่นคือระหว่างแท็กเท่านั้น และ

. แท็กนั้นเอง ร่างกายไม่ได้ถูกสร้างขึ้นโดยบรรณาธิการ

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

. แท็กนั้นเอง ร่างกายไม่จำเป็นต้องคัดลอกลงในโปรแกรมแก้ไข จากนั้นคุณจะต้องเปลี่ยนกลับไปใช้โหมดแก้ไขภาพ โดยคลิกที่ปุ่ม "ออกแบบ" ที่ด้านล่างของหน้าต่างตัวแก้ไข และเริ่มทำการเปลี่ยนแปลงลักษณะที่ปรากฏของหน้า

เห็นได้ชัดว่าคุณสามารถแก้ไขเนื้อหาของหน้าเว็บในตัวแก้ไขนี้ได้สองวิธี ไม่ว่าจะอยู่ในโหมด "ออกแบบ" แก้ไขด้วยภาพ หรือในโหมด "โค้ด" ให้แก้ไขโดยตรงในโค้ด ดังนั้นสำหรับผู้ดูแลเว็บมือใหม่ ตัวแก้ไขนี้มีประโยชน์มากสำหรับการเรียนรู้ คุณสามารถทำการเปลี่ยนแปลงเล็กๆ น้อยๆ บนหน้าเว็บได้ในโหมดภาพ และดูว่าโค้ดเปลี่ยนแปลงไปอย่างไรในทันทีโดยเปลี่ยนไปใช้โหมดแก้ไขโค้ด หรือในทางกลับกัน คุณสามารถทำการเปลี่ยนแปลงเล็กๆ น้อยๆ กับโค้ดของหน้าเว็บได้ในโหมดแก้ไขโค้ด และดูว่าหน้าเว็บของคุณเปลี่ยนแปลงไปอย่างไรในทันทีโดยสลับไปที่โหมดแก้ไขภาพ (หรือเป็นโหมดการดูโดยใช้ปุ่ม "ดูตัวอย่าง")

การแก้ไขข้อความขั้นพื้นฐาน

แถบเมนูด้านบนมีปุ่มสำหรับแก้ไขข้อความทั่วไป มีสัญลักษณ์มาตรฐานที่ได้รับการยอมรับในโปรแกรมแก้ไขข้อความอื่นๆ ดังนั้นเรามาดูกันสั้น ๆ กันดีกว่า

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

นอกจากนี้ เช่นเดียวกับในโปรแกรมแก้ไขข้อความอื่นๆ มีโหมดที่ใช้กับย่อหน้าโดยรวมเท่านั้น และโหมดที่ใช้กับบางส่วนของย่อหน้าได้

คำอธิบายโดยย่อของปุ่มทั้งหมดที่ด้านบนของเมนูตามลำดับที่อยู่:

• ย่อหน้า เลือกระดับชื่อเรื่อง นำไปใช้กับย่อหน้าโดยรวม
• แบบอักษร
• ขนาดตัวอักษร.
• สีตัวอักษร.
• ตัวอักษรตัวหนา
• แบบอักษรตัวเอียง
• แบบอักษรที่ขีดเส้นใต้
• แบบอักษรขีดทับ
• จัดชิดซ้าย นำไปใช้กับย่อหน้าโดยรวม
• การจัดกึ่งกลาง นำไปใช้กับย่อหน้าโดยรวม
• จัดชิดขวา นำไปใช้กับย่อหน้าโดยรวม
• การจัดตำแหน่งแบบสองทาง นำไปใช้กับย่อหน้าโดยรวม
• เส้นแนวนอน. นี่ไม่ใช่สิ่งย่อหน้าหรือเป็นส่วนหนึ่งของย่อหน้า นี่เป็นเพียงการแทรกเส้นแนวนอนให้ทั่วทั้งความกว้าง
• ตัวยก
• ตัวห้อย

การแก้ไข html ขั้นพื้นฐาน

แถบเมนูตรงกลางประกอบด้วยปุ่มทั้งสองปุ่มสำหรับการแก้ไขเว็บเพจทั่วไปและปุ่มบริการสำหรับผู้แก้ไขทั่วไป

คำอธิบายของปุ่มทั้งหมดที่ด้านบนของเมนูตามลำดับตำแหน่ง:

• การสร้างไฮเปอร์ลิงก์ อย่าลืมใช้เมาส์เพื่อเลือกข้อความหรือรูปภาพที่เมื่อคลิกแล้วจะพาคุณไปยังหน้าเว็บอื่น หลังจากเลือกแล้ว ให้คลิกที่ปุ่มเมนูแล้วเปิดหน้าต่างซึ่งคุณจะต้องระบุที่อยู่ที่จะเกิดการเปลี่ยนแปลง (URL) และเงื่อนไขการเปลี่ยนแปลง (เป้าหมาย) คุณสามารถกำหนดเงื่อนไขต่อไปนี้:
  • ว่างเปล่า. ตามค่าเริ่มต้น หน้าใหม่จะเปิดขึ้นในหน้าต่างเดียวกัน
  • _ว่างเปล่า. หน้าใหม่จะปรากฏในหน้าต่างเบราว์เซอร์ใหม่ (หรือแท็บเบราว์เซอร์ใหม่ ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์เฉพาะของคุณ)
  • _พ่อแม่. หน้าใหม่จะปรากฏในหน้าต่างเบราว์เซอร์หลัก (หรือแท็บ) หากไม่มีหน้าต่างหลัก (หรือแท็บ) แสดงว่านี่เป็นสภาวะอะนาล็อกของเงื่อนไข _self
  • _ตัวเอง. หน้าใหม่จะปรากฏในหน้าต่างเดียวกับที่มีลิงก์อยู่ สิ่งนี้คล้ายคลึงกับโหมด "ว่างเปล่า"
  • _สูงสุด. หากหน้าไซต์ถูกเฟรม (นั่นคือแบ่งออกเป็นหลายหน้าต่าง) หน้าใหม่จะปรากฏในหน้าต่างเบราว์เซอร์ทั้งหมด ในกรณีปกติ นี่เป็นอะนาล็อกของโหมด _self เช่นกัน
  โปรดทราบว่าคุณต้องระบุที่อยู่ของหน้าใหม่ที่ไฮเปอร์ลิงก์นำไปสู่ในรูปแบบเต็ม เช่น "http://site.ru"หรือ "http://site.ru/page.html" มิฉะนั้น เมื่อคุณพยายามแก้ไขไฮเปอร์ลิงก์นี้อีกครั้ง ตัวแก้ไขนี้จะไม่พบที่อยู่ไซต์ และโดยค่าเริ่มต้นจะแทนที่ที่อยู่ของไซต์ของฉัน "http://ไซต์"ก่อนชื่อเพจของคุณ
• ยกเลิกไฮเปอร์ลิงก์ เลือกข้อความทั้งหมดของไฮเปอร์ลิงก์ หากคุณเลือกเพียงส่วนหนึ่งของข้อความของไฮเปอร์ลิงก์ ส่วนที่ไม่ถูกเลือกจะยังคงเป็นไฮเปอร์ลิงก์ ตัวอย่างเช่น หากเลือกเฉพาะส่วนกลางของข้อความไฮเปอร์ลิงก์ ไฮเปอร์ลิงก์สองรายการที่มีที่อยู่เดียวกันจะถูกสร้างขึ้นบนข้อความที่ไม่ได้เลือก
• การใส่รูปภาพ. วางเคอร์เซอร์ในตำแหน่งที่ควรเป็นภาพแล้วกดปุ่ม ในหน้าต่างที่เปิดขึ้น ให้กำหนดเส้นทางไปยังรูปภาพ (URL ของรูปภาพ) คำอธิบายรูปภาพ (คำอธิบายรูปภาพ) การจัดแนวของรูปภาพบนหน้า (การจัดตำแหน่ง) ความกว้างของเส้นขอบ (เส้นขอบ) และการเยื้องรูปภาพจากข้อความ (หรือ องค์ประกอบอื่นๆ บนเพจในแนวนอนและแนวตั้ง (HSpace), VSpace) คุณสามารถตั้งค่าการจัดแนวรูปภาพได้ดังนี้:
  • ว่างเปล่า. ค่าเริ่มต้นคือการจัดตำแหน่งด้านซ้าย
  • เส้นฐาน. ข้อความ (และองค์ประกอบของหน้าอื่นๆ) ที่อยู่ในรูปภาพในหนึ่งย่อหน้าจะถูกวางตำแหน่งตามที่ผู้สร้างเบราว์เซอร์ของคุณตัดสินใจ
  • สูงสุด. ข้อความ (และองค์ประกอบของหน้าอื่นๆ) ที่อยู่ในย่อหน้าเดียวกันกับรูปภาพจะถูกจัดแนวไปที่ด้านบนของรูปภาพ
  • กลาง. ข้อความ (และองค์ประกอบของหน้าอื่นๆ) ที่อยู่ในย่อหน้าเดียวกันกับรูปภาพจะถูกจัดวางให้อยู่ตรงกลางของรูปภาพ
  • ดอตทอม. ข้อความ (และองค์ประกอบของหน้าอื่นๆ) ที่อยู่ในย่อหน้าเดียวกันกับรูปภาพจะถูกจัดชิดที่ด้านล่างของรูปภาพ
  • ข้อความด้านบน ข้อความ (และองค์ประกอบของหน้าอื่นๆ) ที่อยู่ในย่อหน้าเดียวกันกับรูปภาพจะถูกวางไว้เหนือรูปภาพ (ไม่รองรับเบราว์เซอร์ทั้งหมด)
  • กลางแน่นอน. (ไม่รองรับเบราว์เซอร์ทั้งหมด)
  • ล่างแน่นอน (ไม่รองรับเบราว์เซอร์ทั้งหมด)
  • ซ้าย. รูปภาพจะถูกวางไว้ทางด้านซ้ายของข้อความ (และองค์ประกอบของหน้าอื่นๆ) ซึ่งอยู่ในย่อหน้าเดียวกันกับรูปภาพ
  • ขวา. รูปภาพจะถูกวางไว้ทางด้านขวาของข้อความ (และองค์ประกอบของหน้าอื่นๆ) ที่อยู่ในย่อหน้าเดียวกันกับรูปภาพ
  รูปภาพที่แทรกจะไม่สามารถแก้ไขได้ในโปรแกรมแก้ไขภาพอีกต่อไป ดังนั้น หากต้องการแก้ไขภาพเพิ่มเติม ให้เปลี่ยนไปใช้โหมดแก้ไขโค้ด หากต้องการลบรูปภาพให้คลิกด้วยเมาส์แล้วกดปุ่ม Delete (Del) บนแป้นพิมพ์
• ยกเลิกการฟอร์แมต เลิกทำการจัดรูปแบบที่ทำโดยใช้ปุ่มแถบเมนูด้านบนสุดที่ใช้กับการจัดรูปแบบส่วนหนึ่งของย่อหน้า มันทำงานเหมือนกับปุ่มเมนูด้านบนทุกประการเมื่อคุณต้องการยกเลิกการจัดรูปแบบนั่นคือเลือกส่วนข้อความที่ต้องการแล้วคลิกที่ปุ่มนี้ ความสะดวกของปุ่มนี้คือเพียงคลิกเดียว ระบบจะลบการจัดรูปแบบทั้งหมด ทุกประเภท ที่อยู่ในส่วนที่เลือกทันที
• การสร้างและแก้ไขตาราง ปุ่มนี้ใช้เพื่อสร้างตารางที่ตำแหน่งเคอร์เซอร์หรือแก้ไขตารางที่เลือก เมื่อสร้างตาราง คุณต้องระบุพารามิเตอร์ต่อไปนี้:
  • แถว - จำนวนแถว
  • คอลัมน์ - จำนวนคอลัมน์
  • ความกว้าง - ความกว้างของตาราง ตั้งค่าเป็นเปอร์เซ็นต์ของความกว้างหน้าจอหรือเป็นพิกเซล
  • เส้นขอบ - ความกว้างของเส้นขอบเซลล์ หากปล่อยไว้ที่ 0 เส้นขอบเซลล์จะไม่ปรากฏให้เห็น
  • CellSpacing - ระยะห่างเป็นพิกเซลระหว่างเซลล์ตาราง
  • CellPadding - ระยะห่างเป็นพิกเซลจากเส้นขอบเซลล์ถึงข้อความภายในเซลล์
  • การจัดตำแหน่ง - การจัดตำแหน่งตารางบนหน้า:
    • ค่าเริ่มต้น. ตามค่าเริ่มต้น ตามที่นักพัฒนาเบราว์เซอร์ของคุณกำหนดไว้
    • ซ้าย. ตารางถูกกดไปที่ขอบด้านซ้ายของหน้า
    • ศูนย์. ตารางตั้งอยู่ตรงกลางของหน้าเว็บ
    • ขวา. ตารางถูกกดไปที่ขอบด้านขวาของหน้า
  หากต้องการลบตาราง คุณต้องเลือกเส้นขอบโดยคลิกที่เส้นขอบด้วยเมาส์แล้วกดปุ่ม Delete (Del) บนแป้นพิมพ์ หากต้องการแก้ไขตาราง ให้วางเคอร์เซอร์ที่ใดก็ได้ในตาราง (หรือเลือกบางส่วนของตารางหรือทั้งตาราง) แล้วกดปุ่มเมนูอีกครั้ง ในกรณีนี้ พารามิเตอร์ทั้งหมดจะสามารถแก้ไขได้ ยกเว้นจำนวนแถวและจำนวนคอลัมน์ ปุ่ม 6 ปุ่มถัดไปบนแถบเมนูตรงกลางได้รับการออกแบบมาเพื่อแก้ไขจำนวนแถวและคอลัมน์ในตารางที่สร้างไว้แล้ว เมื่อเคอร์เซอร์อยู่บนโต๊ะ ปุ่มทั้งหกปุ่มนี้จะพร้อมสำหรับการคลิก
• สร้างหนึ่งคอลัมน์ทางด้านซ้ายของเคอร์เซอร์ หากเลือกหลายคอลัมน์ เคอร์เซอร์จะถือว่าอยู่ในคอลัมน์สุดท้ายที่เลือก
• สร้างหนึ่งคอลัมน์ทางด้านขวาของเคอร์เซอร์ หากเลือกหลายคอลัมน์ เคอร์เซอร์จะถือว่าอยู่ในคอลัมน์สุดท้ายที่เลือก
• สร้างหนึ่งบรรทัดเหนือเคอร์เซอร์ หากเลือกหลายบรรทัด เคอร์เซอร์จะถือว่าอยู่บนบรรทัดสุดท้ายที่เลือก
• สร้างหนึ่งบรรทัดใต้เคอร์เซอร์ หากเลือกหลายบรรทัด เคอร์เซอร์จะถือว่าอยู่บนบรรทัดสุดท้ายที่เลือก
• ลบหนึ่งคอลัมน์ออกจากเคอร์เซอร์ หากเลือกหลายคอลัมน์ เคอร์เซอร์จะถือว่าอยู่ในคอลัมน์สุดท้ายที่เลือก
• ลบหนึ่งบรรทัดออกจากเคอร์เซอร์ หากเลือกหลายบรรทัด เคอร์เซอร์จะถือว่าอยู่บนบรรทัดสุดท้ายที่เลือก
• สร้างรายการลำดับเลข หรือเลือกบางย่อหน้าแล้วคลิกที่ปุ่มเมนู ในกรณีนี้ ย่อหน้าทั้งหมดเหล่านี้จะกลายเป็นองค์ประกอบของรายการลำดับเลข หรือวางเคอร์เซอร์ในตำแหน่งที่ต้องการคลิกที่ปุ่มเมนูนี้ จากนั้นย่อหน้าทั้งหมดที่คุณป้อนจะกลายเป็นองค์ประกอบของรายการลำดับเลขโดยอัตโนมัติ
• สร้างรายการง่ายๆ เลือกบางย่อหน้าแล้วคลิกที่ปุ่มเมนู ในกรณีนี้ ย่อหน้าทั้งหมดเหล่านี้จะกลายเป็นองค์ประกอบของรายการธรรมดาโดยไม่มีการใส่หมายเลข
• การถอดการเยื้อง เคอร์เซอร์ควรอยู่บนย่อหน้าที่เราต้องการลบการเยื้อง คุณสามารถเลือกทั้งย่อหน้าหรือเพียงบางส่วนก็ได้
• การสร้างการเยื้อง เคอร์เซอร์ควรอยู่บนย่อหน้าที่เราต้องการสร้างการเยื้องซ้าย คุณสามารถเลือกทั้งย่อหน้าหรือเพียงบางส่วนก็ได้ การเยื้องจะถูกสร้างขึ้นสำหรับทั้งย่อหน้าโดยรวม (ไม่ใช่แค่บรรทัดแรก)
• ย้อนกลับการเปลี่ยนแปลงทั้งหมด ตราบใดที่คุณไม่ได้คลิกที่ปุ่ม "โค้ด" หรือ "ดูตัวอย่าง" คุณสามารถลบการเปลี่ยนแปลงทั้งหมดที่ทำและกลับสู่สถานะครั้งล่าสุดที่คุณดูโค้ดหรือดูเพจได้
• คืนค่าการเปลี่ยนแปลงที่ถูกลบทั้งหมดไปข้างหน้า หากคุณได้ย้อนกลับการเปลี่ยนแปลงเกินความจำเป็น คุณสามารถคืนค่าการเปลี่ยนแปลงที่ถูกลบออกได้ ในทำนองเดียวกัน หากหลังจากย้อนกลับการเปลี่ยนแปลงแล้ว คุณเปลี่ยนเป็นโหมด "โค้ด" หรือ "แสดงตัวอย่าง" คุณจะไม่สามารถกู้คืนการเปลี่ยนแปลงได้อีกต่อไป
• ทำลายส่วนที่เลือกในขณะเดียวกันก็คัดลอกส่วนที่เลือกไปยังกระเป๋า Windows (Ctrl+X)
• คัดลอกส่วนที่เลือกไปยัง "กระเป๋า" ของ Windows (Ctrl+C)
• วางเนื้อหาของ "กระเป๋า" ของ Windows ลงในตำแหน่งที่เคอร์เซอร์อยู่ (Ctrl+V)

การแก้ไข html เพิ่มเติม

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

รายการปุ่มบนบรรทัดเมนูที่สามตามลำดับตำแหน่ง:

• สร้างแบบฟอร์ม ในหน้าต่างที่เปิดอยู่ คุณจะต้องป้อนชื่อของแบบฟอร์ม ที่อยู่ของสคริปต์ที่จะประมวลผลข้อมูลของแบบฟอร์มนี้ และวิธีการถ่ายโอนข้อมูล (โพสต์หรือรับ)
• สร้างกล่องกาเครื่องหมาย ในหน้าต่างที่เปิดอยู่ ให้ป้อนชื่อของแบบฟอร์มการเลือกนี้ ค่าที่ยอมรับเมื่อเลือก และระบุว่าช่องทำเครื่องหมายการเลือกนั้นถูกทำเครื่องหมายในแบบฟอร์มนี้หรือไม่
• สร้างปุ่มตัวเลือก ในหน้าต่างที่เปิดอยู่ ให้ป้อนชื่อของแบบฟอร์มการเลือกนี้ ค่าที่ยอมรับเมื่อเลือก และระบุว่าปุ่มนี้ถูกเลือกตั้งแต่แรกหรือไม่ เมื่อสร้างเมนูจากปุ่มตัวเลือก อย่าลืมว่าปุ่มตัวเลือกทั้งหมดของเมนูเดียวกันจะต้องมีชื่อเหมือนกัน
• สร้างแพลตฟอร์มสำหรับการป้อนข้อความ ในหน้าต่างที่เปิดอยู่ ให้ป้อนชื่อพื้นที่สำหรับป้อนข้อความ ความกว้างของพื้นที่ในจำนวนอักขระ จำนวนบรรทัดของพื้นที่ ตำแหน่งของย่อหน้าและแถบเลื่อน และข้อความเริ่มต้นในช่องนี้
• สร้างปุ่ม "เรียกใช้" ในหน้าต่างที่เปิดขึ้น ให้เขียนชื่อปุ่มและข้อความที่จะเขียนบนปุ่มนี้
• สร้างปุ่ม "Run" ในรูปแบบของรูปภาพ ในหน้าต่างที่เปิดขึ้น ให้เขียนชื่อปุ่มและที่อยู่ของรูปภาพที่จะทำหน้าที่เป็นปุ่ม
• สร้างปุ่มเพื่อล้างแบบฟอร์มที่กรอกเสร็จแล้วและส่งกลับค่าเริ่มต้นทั้งหมด ในหน้าต่างที่เปิดขึ้น ให้เขียนชื่อปุ่มและข้อความที่จะเขียนบนปุ่มนี้
• สร้างฟิลด์ที่ซ่อนอยู่ ในหน้าต่างที่เปิดขึ้น ให้เขียนชื่อของฟิลด์ที่ซ่อนอยู่และค่าของมัน
• สร้างช่องรหัสผ่านที่มีเครื่องหมายดอกจัน ในหน้าต่างที่เปิดขึ้น ให้เขียนชื่อของฟิลด์รหัสผ่าน ความยาวของฟิลด์ และจำนวนอักขระรหัสผ่านสูงสุดที่ผู้ใช้สามารถป้อนได้เมื่อป้อนรหัสผ่าน
• สร้างช่องข้อความ ในหน้าต่างที่เปิดขึ้น ให้เขียนชื่อของฟิลด์ข้อความ ขนาดเป็นอักขระ จำนวนอักขระสูงสุดที่ผู้ใช้สามารถป้อนได้ และข้อความเริ่มต้นในช่องนี้
• ส่งพิมพ์ครับ.
• เลือกทั้งหมด.

ขอให้เป็นวันที่ดี! ฉันจะอธิบายเกี่ยวกับการออกแบบโพสต์ทันที: วันหนึ่งเมื่อบังเอิญพบว่าฉันไม่พอใจกับข้อมูลจำนวนมหาศาลและองค์ประกอบการนำทางในเครื่องกำเนิดไฟฟ้าที่นำเสนอและยิ่งกว่านั้นด้วยอินเทอร์เฟซผู้ใช้! ฉันโกรธมากที่เครื่องมือในการทำงานด้วย สไตล์- พวกมันเองไม่ได้ถูกจำกัดขอบเขตความเป็นไปได้ที่พวกเขาเป็นตัวแทน... ยังไงล่ะ!

เมื่อคุณมีส่วนร่วมในการสร้างสรรค์ คุณต้องมีวิธีการและเครื่องมือที่พร้อมสำหรับการเรียนรู้และทำงานตามที่คุณใช้ไป ขั้นต่ำความพยายามและเวลา จากเหตุทั้งหมดนี้ จึงเกิดความคิดว่า เลือกสิ่งที่ดีที่สุดเครื่องมือและ จัดระเบียบเพื่อการใช้งานบ่อยครั้ง (เช่น เมนูนำทาง เช่น Quick Launch)

ฉันหวังว่าความรู้นี้สำหรับหลายๆ คนจะเป็นตัวช่วยที่ดีในกระบวนการพัฒนาเว็บไซต์

เครื่องกำเนิด CSS:

• CSS3.me- เรียบง่าย หรูหรา และในขณะเดียวกันก็มีตัวสร้าง CSS ที่มีคุณสมบัติหลากหลายพร้อมโดเมนที่สวยงาม
• CSS3Maker.com- ฟังก์ชั่นที่กว้างขวางมากสำหรับการทำงานกับฟังก์ชั่น CSS3 ใหม่, ความเข้ากันได้ข้ามเบราว์เซอร์, ความยืดหยุ่นและชุดทุกสิ่งที่คุณต้องการ
• CSS3Generator.com- ไม่มีอะไรฟุ่มเฟือยสำหรับผู้ชื่นชอบความคลาสสิกและความเรียบง่ายในคำเดียวว่า "โรงเรียนเก่า"
• Colorzilla.com- เครื่องกำเนิดการไล่ระดับสีสำหรับการสร้างภาพพื้นหลังที่สวยงาม พร้อมรองรับเบราว์เซอร์ส่วนใหญ่และไม่ใช้รูปภาพ (CSS ล้วนๆ)

เครื่องมือเว็บ:

• ตัวสร้างปุ่ม- เครื่องมือสำหรับการออกแบบปุ่มตามจังหวะของ Web 2.0 ในบรรดาฟังก์ชันการทำงาน เราสามารถสังเกตความสามารถในการปรับแต่ง: ช่องว่างภายใน ขนาดข้อความ ความกลมของมุม และการเลือกสีไล่ระดับสี
• ตัวสร้างแบบฟอร์ม- ผู้ออกแบบแบบฟอร์มที่ให้คุณปรับแต่งรูปลักษณ์ของทั้งแบบฟอร์มโดยรวมและองค์ประกอบแต่ละส่วน
• ตัวสร้างไอคอน- รู้สึกเหมือนเป็นศิลปินอิสระ โดยสร้างไอคอนใหม่สำหรับปุ่ม เมนู และไอคอน Fav ของคุณ
• ตัวสร้างริบบิ้น- หากต้องการสร้างริบบิ้นที่มีสไตล์โดยใช้ CSS ล้วนๆ ให้ใช้เครื่องมือนี้พร้อมการตั้งค่าและตัวเลือกที่หลากหลาย

รูปภาพในรูปแบบของปุ่ม (ไอคอน) ที่ตอนต้นของบทความ - คลิกได้!

หากคุณมีข้อเสนอแนะหรือรู้เครื่องมือที่น่าสนใจที่สามารถสนับสนุนแนวคิดนี้ได้ โปรดแสดงความคิดเห็น กรุณาอย่าทิ้งขยะ เราเพียงต้องการเพิ่มรายการพิเศษในการประกอบเท่านั้น ขอบคุณ