บทท 4 ใส และตกแต งข อความบนเว บเพจ - PDF

Description
บทท 4 ใส และตกแต งข อความบนเว บเพจ เว บเพจสามารถนาเสนอข อม ลหลากหลายร ปแบบ ไม ว าจะเป นข อความ ตาราง ร ปภาพ เส ยง ภาพเคล อนไหว และม ลต ม เด ยต าง ๆ แต ข อม ลพ นฐานท สาค ญท ส ดก ค อข อความ ด งน น ในบทน

Please download to get full document.

View again

of 11
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Travel/ Places/ Nature

Publish on:

Views: 16 | Pages: 11

Extension: PDF | Download: 0

Share
Transcript
บทท 4 ใส และตกแต งข อความบนเว บเพจ เว บเพจสามารถนาเสนอข อม ลหลากหลายร ปแบบ ไม ว าจะเป นข อความ ตาราง ร ปภาพ เส ยง ภาพเคล อนไหว และม ลต ม เด ยต าง ๆ แต ข อม ลพ นฐานท สาค ญท ส ดก ค อข อความ ด งน น ในบทน เราจะ พ ดถ งการใส และจ ดร ปแบบข อความบนเว บเพจก นก อน ใส ข อความลงบนเว บเพจ การใส ข อความลงบนเว บเพจสามารถทาได เหม อนก บในโปรแกรมประเภทเว ร ดโปรเซสเซอร ท วไปค อเร มจากคล กเพ อวางเคอร เซอร ตรงจ ดท ต องการแล วพ มพ ข อความ นอกจากน นสามารถ จ ดร ปแบบของข อความแต ละส วนให แตกต างก นตามความสาค ญหร อประเภทของเน อหา เช น ข อความ ท วไป,ห วเร อง (heading) และข อความท ต องการเน น เป นต น 1.คล กวางเคอร เซอร ร ปท 2.44 แสดงการใส ข อความลงบนเว บเพจ 2.พ มพ ข อความ สามารถใช เทคน คการเล อนเคอร เซอร,การเล อก และการแก ไขข อความได เหม อนก บใน โปรแกรมเว ร ดโปรเซสเซอร เช นเด ยวก น ต วอย างเช น ย ายข อความ ทาได โดยเล อกข อความ แล วคล กลากไปวางท ตาแหน งใหม ย ายข อความ (อ กว ธ ) เล อกข อความ แล วใช คาส ง Edit Cut (ค ย ล ด Ctrl+X) จากน นวาง เคอร เซอร ตรงตาแหน งปลายทาง แล วใช คาส ง Edit Paste (ค ย ล ด Ctrl+V ) ก อปป ข อความ ทาได โดยเล อกข อความ แล วกดค ย Ctrl ค างไว พร อมก บคล กลากไปวางท ใหม ก อปป ข อความ (อ กว ธ ) เล อกข อความ แล วใช คาส ง Edit Cut (ค ย ล ด Ctrl+X)จากน นวาง เคอร เซอร ตรงตาแหน งปลายทาง แล วใช คาส ง Edit Paste (ค ย ล ด Ctrl+V ) เว นวรรคระหว างข อความ กดค ย Ctrl+Shift+Space (แทนการเคาะ Space เฉย ๆ) ท พาเนล Insert ให คล กแท บ Text จากน นคล กร ป Non-BreakingSpace เพ อใส ต วเว นวรรค (หน า Characters) แล วเล อก 1.ในพาเนล Insert เล อกแท บ Text 2.คล ก แล วเล อกคาส ง Non-Breaking Space ร ปท 2.45 แสดงข นตอนการเว นวรรคระหว างข อความ ข นบรรท ดใหม ในย อหน าเด ม เม อพ มพ ข อความจนเต มบรรท ดหร อเต มความกว างของขอบเขตตรงจ ดน น (เช นในช องตาราง) โปรแกรมจะป ดข อความข นบรรท ดใหม อ ตโนม ต ถ ากดค ย Enter จะถ อว าเป นการข นย อหน าใหม ซ ง ระยะบรรท ดจะห างกว าปกต แต ถ าต องการป ดข อความข นบรรท ดใหม เอง (ในย อหน าเด ม) ก ทาได 2 ว ธ ค อ กดค ย Shift + Enter ท พาเนล Insert ให คล กแท บ Text จากน นคล กร ป (หน า Characters) แล วเล อก Line Break (Shift + Enter) เพ อข นบรรท ดใหม ร ปท 2.46 แสดงข นตอนข นบรรท ดใหม ในย อหน าเด ม จ ดร ปแบบข อความ ร ปแบบข อความในท น หมายถ งฟอนต,ขนาด,ส,ล กษณะต วหนา-ต วเอ ยง ตลอดจนการจ ด ตาแหน งและค ณสมบ ต ของย อหน าภายในเว บเพจ สามารถเล อกใช คาส งจ ดร ปแบบข อความได หลายว ธ ด วยก น เช น ใช เคร องม อบนพาเนล Properties, ใช คาส งในแท บ Text บนพาเนล Insert และใช เมน ล ด จากการคล กขวา เป นต น แต ในหน งส อเล มน จะเน นท การใช พาเนล Properties เป นหล กเน องจากเป นว ธ ท สะดวกท ส ด จ ดร ปแบบข อความด วยพาเนล Properties เคร องม อสาหร บจ ดร ปแบบข อความในพาเนล Properties แบ งออกเป น 2 ร ปแบบหล ก ๆ ด งน จ ดร ปแบบด วย HTML เป นการเร ยกใช คาส งจากแท กของ HTML เพ อเข าส โหมด html ก อนแล วคล กกาหนดคาส ง ต งแต เวอร ช น CS4 เป นต นมา ได ยกเล กการจ ดร ปแบบด วย html แบบเด มหลาย ๆ คาส งออกไป โดย สน บสน นให จ ดร ปแบบด วย CSS แทนมากข น ร ปท 2.47 แสดงคาส งท ใช จ ดร ปแบบด วย HTML จ ดร ปแบบด วย CSS เป นการจ ดร ปแบบด วยสไตล โดยท กคร งท ม การคล กคาส งใด ๆ โปรแกรมจะให สร างสไตล CSS ใหม เสมอ แต หากต องการใช สไตล ท สร างไว แล วก สามารถคล กเล อกท ช อง Targeted Rule ได ร ปท 2.48 แสดงคาส งท ใช จ ดร ปแบบด วย CSS จ ดร ปแบบข อความด วย CSS ในเวอร ช นน ได ปร บล กษณะการจ ดร ปแบบต าง ๆ ให ไปใช สไตล CSS มากข น โดยไม ว าจะ จ ดร ปแบบอะไรก ตามโปรแกรมจะให ค ณเก บไว เป นสไตล CSS ก อนเสมอ ซ งข อด ค อควบค มร ปแบบ ต วอ กษรส วนต าง ๆ ได ง าย (ไม ต องใช แท ก html), แก ไขได ท จ ดเด ยวและไฟล เว บเพจม ขนาดเล กข อเส ย ค อย งยากในข นตอนของการสร าง ส าหร บบทน จะกล าวถ ง CSS ท ใช จ ดร ปแบบข อความเท าน นส วน เน อหาเร องการจ ดการและการสร าง CSS อย างละเอ ยดให ด เพ มเต มได ในบทท 06 สร างช ดฟอนต ต วอ กษร โปรแกรมได เตร ยมช ดฟอนต ต วอ กษรไว ให แล วบางส วน ซ งถ าสร างเว บเพจภาษาอ งกฤษก สามารถใช ได ท นท แต ถ าเป นเว บเพจภาษาไทยควรสร างช ดฟอนต ภาษาไทยเพ ม ซ งทาได ด งน 1. คล กท CSS 2. คล ก แล วเล อก Edit Font List. 3. คล กเล อกฟอนต ท ต องการใช 4. คล กเพ อเพ มฟอนต เข าไปในช ด 5. (ถ าต องการ) ทาซ าข นท 3-4 เพ อเพ มฟอนต อ นอ กตามลาด บ 6. คล ก OK ร ปท 2.49 การสร างช ดฟอนต ต วอ กษร กาหนดช ดฟอนต ให ก บข อความ บนเว บเพจ สามารถเล อกใช ฟอนต ได หลายฟอนต ก บข อความท อนเด ยวก น ด งน นการกาหนด ฟอนต จ งเป นการเล อกช ดฟอนต (แทนท จะเล อกเพ ยงฟอนต ใดฟอนต หน ง) แต ฟอนต ท ถ กใช จร งจะ ข นอย ก บเคร องของผ ชมด วย เม อเล อกฟอนต แล วโปรแกรมก จะให บ นท กร ปแบบท เล อกไว เพ อนามาใช ได ก บข อความส วนอ น ๆ ในเว บต อไป 1. เล อกข อความท จะกาหนดช ดฟอนต 2. คล ก แล วเล อกช ดฟอนต ท ต องการ 3. ต งช อ Class 4. คล ก OK ร ปท 2.50 การกาหนดช ดฟอนต ให ก บข อความ กาหนดขนาดต วอ กษร ทาได โดยเล อกสไตล ท บ นท กในช อง Targeted Rule แล วกาหนดขนาดต วอ กษรท ต องการ แต หากเล อกแบบ New CSS Rule จะม หน าต างให บ นท กช อร ปแบบท กาหนดไว 1.เล อกข อความท จะกาหนดขนาด 3.เล อกขนาด 4.คล กแล วเล อกหน วย 2.เล อกสไตล ท ต องการแก ไข ร ปท 2.51 การกาหนดขนาดต วอ กษร ข อควรร เก ยวก บขนาดต วอ กษร ถ าไม กาหนดขนาดต วอ กษร (ค อปล อยให ช อง Size ม ค าเป น None) การแสดงผลใน บราวเซอร จะข นก บการกาหนดค า Size ในหมวด Appearance ของ Page Properties และถ าใน Page Properties ก ไม ได กาหนดไว การแสดงผลจะข นอย ก บการต งค าในบราวเซอร ของผ ชม การกาหนดขนาดต วอ กษรทาได 2 ว ธ ว ธ แรกค อกาหนดเป นค าต วเลขพร อมระบ หน วยซ งจะ ทาให ได ขนาดต วอ กษรคงท แน นอน (ยกเว นหน วย%) ว ธ ท 2 ค อกาหนดเป นค าส มพ นธ เท ยบก บ ต วอ กษรปกต ค อต งแต xx-small ถ ง xx-large รวมท ง smaller และ larger ผลของขนาดต วอ กษรย งข นอย ก บโปรแกรมบราวเซอร และประเภทของฟอนต ท เล อกใช อ ก ด วยด งน นในบางกรณ ผลล พธ อาจไม เป นไปตามท คาดก ได กาหนดส ต วอ กษร การกาหนดส ต วอ กษร หากกาหนดไว ในหมวด Appearance (CSS) ท หน า Page Properties จะม ผลก บข อความท งเว บเพจแต หากต องการกาหนดส เฉพาะข อความบางส วนให ทาได โดย 1. เล อกข อความท จะกาหนดส 2. คล ก New CSS Rule 3. คล ก แล วคล กเล อกส จากตารางส (หร อพ มพ รห สส ลงในช องแล วกดค ย Enter เช น #FF0000 ค อส แดง) 4. เล อก Class (can apply ) 5. กาหนดช อคลาส 6. คล ก OK ร ปท 2.52 การกาหนดส ต วอ กษร จ ดย อหน าข อความ หมายถ ง การจ ดตาแหน งโดยให ข อความท งหมดในย อหน าน นอย ช ดซ าย ก งกลาง ช ดขวา หร อ ให ด านซ ายและด านขวาตรงแนวก น (เท ยบก บหน าเว บเพจหร อขอบเขตตรงจ ดน น) ซ งทาได ด งน จ ดร ปแบบข อความด วย HTML เป นการจ ดร ปแบบแท ก HTML โดยเม อเราเล อกจ ดร ปแบบใด ๆ โปรแกรมก จะใส แท ก น น ๆ ลงไปในโค ดท ละจ ดให เลย ซ งแตกต างจากร ปแบบของ CSS ค อไม ต องบ นท กร ปแบบท กาหนดเอาไว ได แต หากในหน าเว บน นม การใช ร ปแบบเด มซ า ๆ ก น ก อาจเส ยเวลาในการเล อกร ปแบบใหม ท กคร ง และการแก ไขก จะต องทาท ละจ ด ด งน นต งแต เวอร ช น CS4 จนถ ง CS5 จ งสน บสน นให จ ดร ปแบบด วย CSS มากข น ใช ร ปแบบห วเร องของ HTML ร ปแบบห วเร องของ HTML (ช อง format บนพาเนล Properties) ใช สาหร บจ ดร ปแบบข อความ ท เป นห วเร องระด บต าง ๆ ได อย างรวดเร วโดยจะม ผลก บข อความท งย อหน าเสมอ กาหนดล กษณะต วหนา ต วเอ ยง และอ นๆ การกาหนดล กษณะต วหนาและต วเอ ยงของต วอ กษรทาได โดยเล อกข อความ แล วคล กป ม หร อ บนพาเนล Properties (ถ าต องการยกเล กก คล กซ าอ กคร ง) นอกจากน ย งกาหนดล กษณะอ น ๆ ของต วอ กษรได โดยเล อกคาส ง Format Style เล อก สไตล ซ งผลของสไตล เหล าน จะข นก บบราวเซอร แต ละต ว และการต งค าของผ ชมด วย ยกเว นสไตล พ นฐานด านล างน ท ม กจะเหม อนก น จ ดเย องย อหน า เป นการจ ดให ย อหน าข อความเย องไปทางขวาหร อร นย อนกล บมาทางซ ายท ละ 1 ช วง (แต จะ ไม ร นไปทางซ ายเก นกว าตาแหน งเร มต น) แทรกเส นแบ งเน อหา สามารถแทรกเส นแนวนอนสาหร บค นหร อแบ งเน อหาภายในเว บเพจได ด งน 1. คล กตรงจ ดท จะแทรก 2. เล อกคาส ง Insert HTML Horizontal Rule 3. กาหนดค ณสมบ ต ต าง ๆ ของเส น กาหนดส เส น สามารถกาหนดส ให ก บเส นแบ งได แต ค ณสมบ ต น จะแสดงผลได บนบางบราวเซอร เท าน น 1. คล กขวาบนเส นแบ ง แล วเล อกคาส ง Edit Tag hr 2. คล กเล อกหมวด Browser Specific 3. คล ก แล วเล อกส 4. คล ก OK 5. กด เพ อด ผลล พธ ก อปป เน อหาจากโปรแกรมอ น สามารถก อปป ข อความหร อเน อหาท อย ในไฟล เอกสารประเภท เช น Word, Excel รวมท งไฟล ของโปรแกรมอ น ๆ เข ามาวางบนเว บเพจได โดยว ธ วางทาได 2 แบบค อ วางด วยคาส ง Edit Paste (ค ย ล ด Ctrl+V) ซ งตามปกต ข อความจะถ กวางพร อมก บร ปแบบ พ นฐาน เช น ล กษณะต วหนา,ต วเอ ยง (ถ าม การกาหนดไว ในโปรแกรมต นฉบ บ) วางด วยคาส ง Edit Paste Special (ค ย ล ด Ctrl+Shift+V) ซ งจะปร บแต งออปช นของคาส ง ได ท นท เหมาะจะใช ก บข อความท ม การจ ดร ปแบบไว แล ว เช น ขนาด/ส ต วอ กษร,ห วข อบ คเล ต,ร ปภาพ รวมท งตารางและร ปแบบท ใช จ ดตารางโดย Dreamweaver จะนาค ณสมบ ต ด งกล าวมาสร างเป นสไตล CSS เพ อจ ดร ปแบบเน อหาท วางบนเว บเพจให ใกล เค ยงก นโดยอ ตโนม ต ก อปป ข อความจาก MS-Word 1. เป ดไฟล เอกสาร Word แล วเล อกข อความหร อเน อหาท ต องการ 2. คล กขวาบนข อความแล วเล อกคาส ง Copy 3. กล บมาท Dreamweaver วางเคอร เซอร บนเว บเพจแล วเล อกคาส ง Edit Paste Special 4. กาหนดออปช นในการวางเน อหาท ก อปป มา 5. คล ก OK 2. คล กขวาบนข อความ แล วเล อกคาส ง Copy 3. กล บมาท Dreamweaver วางเคอร เซอร บนเว บเพจแล วเล อกคาส ง Edit Paste Special 1. เป ดไฟล เอกสาร Word แล วเล อกข อความหร อ เน อหาท ต องการ 4. กาหนดออปช น ในการวางเน อหา ท ก อปป มา 5. คล ก OK ร ปท 3.53 ข นตอนก อปป ข อความจาก MS-Word ออปช นในการวางข อความ Text only วางเฉพาะข อความอย างเด ยวโดยไม ม การจ ดร ปแบบใด ๆ Text with structure (paragraphs,lists,tables,etc.) วางข อความตามโครงสร างต นฉบ บ เช น กา
Related Search
Similar documents
View more...
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks