เค้าโครงหน้าเว็บ CSS ถือได้ว่าเป็นงานที่เป็นระบบ การพัฒนาเว็บไซต์ DIVCSS อาจดำเนินการโดยคนหลายคนและโดยทีมงาน สิ่งนี้เกี่ยวข้องกับปัญหาการดำเนินงานเชิงบรรทัดฐานหลายประการ แม้ว่าจะมีการพัฒนาโดยบุคคลเพียงคนเดียวก็ตาม จำเป็นต้องมีการจัดระเบียบและเป็นมาตรฐาน บทความนี้พิมพ์ซ้ำจาก Blue ซึ่งมีประสิทธิภาพมาก ผู้เขียนได้สรุปประสบการณ์การปฏิบัติมากมายและทุกคนสามารถอ้างอิงและเรียนรู้จากมันได้
ภาพรวม
ข้อกำหนดนี้เป็นทั้งข้อกำหนดการพัฒนาและการอ้างอิงภาษาสคริปต์ อย่างไรก็ตาม โปรดอย่าเปลี่ยนแปลงข้อมูลจำเพาะตามต้องการ หากคุณมีคำถามใดๆ โปรดติดต่อฉันทันเวลา และฉันจะเปลี่ยนแปลงตัวอย่างโค้ดและเอกสารที่เกี่ยวข้องของข้อกำหนดนี้ทันที
ข้อกำหนดพื้นฐาน
1. เปิดไดเร็กทอรีย่อยของรูปภาพชั่วคราวสามไดเร็กทอรีในไดเร็กทอรีรากของเว็บไซต์ และเปิดไดเร็กทอรีย่อยของสื่อตามต้องการ ไดเร็กทอรีรูปภาพประกอบด้วยรูปภาพสาธารณะที่ใช้โดยเพจต่างๆ ในคอลัมน์ต่างๆ เช่น โลโก้บริษัท แบนเนอร์ และ เมนู , ปุ่ม ฯลฯ ; ไดเร็กทอรีย่อยทั่วไปประกอบด้วยไฟล์สาธารณะ เช่น css, js, php, include ฯลฯ ไดเร็กทอรีย่อย temp ประกอบด้วยข้อความ รูปภาพ และสื่อต้นฉบับอื่น ๆ ที่ลูกค้าจัดเตรียมไว้ avi, ควิกไทม์ ฯลฯ ไฟล์มัลติมีเดีย
2. โดยหลักการแล้ว ควรเปิดไดเร็กทอรีสำหรับแต่ละคอลัมน์ในไดเร็กทอรีรากตามโครงสร้างคอลัมน์ของหน้าแรก หากจำเป็น ควรเปิดไดเร็กทอรีย่อยของรูปภาพและสื่อในไดเร็กทอรีของแต่ละคอลัมน์เพื่อวางรูปภาพและสื่อ เฉพาะคอลัมน์นี้เท่านั้น สำหรับไฟล์มัลติมีเดีย หากคอลัมน์นี้มีเนื้อหาจำนวนมากและแบ่งออกเป็นคอลัมน์ย่อยจำนวนมาก ไดเร็กทอรีอื่นๆ ก็สามารถเปิดได้ตามนั้น
3. มักจะมีไฟล์จำนวนมากในไดเร็กทอรีชั่วคราว ขอแนะนำให้เปิดไดเร็กทอรีพร้อมชื่อเวลาเพื่อจัดประเภทและจัดระเบียบข้อมูลที่ลูกค้าให้มาทีละไฟล์
4. ชื่อของไดเร็กทอรีและไฟล์ทั้งหมดควรใช้ตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก ตัวเลข และขีดล่าง จะต้องไม่รวมอักขระภาษาจีน ช่องว่าง และอักขระพิเศษ โปรดใช้ภาษาอังกฤษเป็นแนวทางในการตั้งชื่อ ไดเรกทอรี อย่าใช้พินอินเว้นแต่จำเป็นจริงๆ เนื่องจากประสบการณ์ได้พิสูจน์แล้วว่าไดเรกทอรีที่ตั้งชื่อด้วยพินอินมักจะไม่สามารถเข้าใจได้สำหรับคุณในหนึ่งเดือนต่อมา
เมื่อเขียนสคริปต์
เราควรมีแนวคิดที่สอดคล้องกันเกี่ยวกับรูปแบบโดยรวมของสคริปต์ ซึ่งหมายความว่าคุณเขียนไว้หนึ่งเดือนต่อมาและหนึ่งเดือนที่แล้ว รูปแบบการเขียนสคริปต์ยังคงเหมือนเดิม เช่นเดียวกับรูปแบบการเขียนสคริปต์ที่เขียนโดยนักพัฒนาที่แตกต่างกันในกลุ่มงานเดียวกัน เนื่องจากเราไม่สามารถพัฒนาแบบแยกส่วนได้ตลอดไป และคุณอาจทำงานได้ตลอดเวลา กับตัวเองเมื่อสามเดือนที่แล้ว (ลูกค้าของคุณขอให้มีการแก้ไข) คุณมักจะต้องร่วมพัฒนาโปรเจ็กต์กับเพื่อนร่วมงานหลายคนในสตูดิโอ และอาจถูกขอให้แก้ไขสคริปต์ที่พัฒนาโดยคนที่ลาออก แน่นอนคุณก็อาจทำได้เช่นกัน ออกจากโครงการให้กับเพื่อนร่วมงานคนถัดไป
1. เทมเพลตสากลสำหรับไฟล์ Html:
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<html>
-
เครื่องกำเนิด: Sub Design Studio ( www.eastline.net.cn )
ข้อมูลการสร้าง: 2000-8-1
ผู้เขียนต้นฉบับ: eastline
-
<หัว>
<title>ชื่อเอกสาร</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
เมตาแท็กอื่นๆ
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
ไคลเอนต์คำจำกัดความสไตล์ชีต คำจำกัดความฟังก์ชัน Javascript และการดำเนินการเริ่มต้น
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css ]
</หัว>
<body bgcolor="#ffffff">
-
</body>
เพิ่ม:
เพื่อให้แน่ใจว่าเว็บไซต์เข้ากันได้กับมาตรฐาน XML ภาษาเว็บรุ่นต่อไป คุณลักษณะแท็ก HTML ทั้งหมดจะต้องอยู่ในเครื่องหมายคำพูดเดี่ยวหรือเครื่องหมายคำพูดคู่ กล่าวคือ เราควรเขียน <a href="url"> แทน < a href=url >.
2. สำหรับเพจที่สามารถเรียกค้นข้อความแบบเต็มได้ เพื่อให้สามารถเรียกค้นข้อมูลได้อย่างมีประสิทธิภาพโดยเครื่องมือค้นหาบนอินเทอร์เน็ต ควรเพิ่มเมตาแท็กคำหลักและคำอธิบายระหว่าง <head></head> ของ html บนหน้าแรกของช่อง เช่น
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<meta name=”keywords” content=”Oriental Shinkansen, รถยนต์, การซื้อรถยนต์”/>
<meta name=”description” content=”Oriental New Kanjin Line จุดแรกของโลกสำหรับข้อมูลรถยนต์จีน”/>
3. โค้ดตัวอย่างรูปแบบไฟล์ CSS:
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css com ]
<style type="text/css">
-
p { เยื้องข้อความ: 2em;
body { ตระกูลแบบอักษร: "宋体";
ตาราง { ตระกูลแบบอักษร: "宋体";
a:link { ขนาดตัวอักษร: 9pt; color: #FFFFFF;
a: เยี่ยมชม { ขนาดตัวอักษร: 9pt สี: #99FFFF;
a:hover { ขนาดตัวอักษร: 9pt สี: #FF9900;
a:active { ขนาดตัวอักษร: 9pt; color: #FF9900;
a.1:link { ขนาดตัวอักษร: 9pt; สี: #3366cc;
a.1: เยี่ยมชม { ขนาดตัวอักษร: 9pt; สี: #3366cc;
a.1:hover { ขนาดตัวอักษร: 9pt; สี: #FF9900;
a.1:active { ขนาดตัวอักษร: 9pt; สี: #FF9922;
.blue { ตระกูลแบบอักษร: "宋体"; ขนาดตัวอักษร: 10.5pt; line-height: 20px;
-
</style>
สิ่งที่ควรสังเกตเป็นพิเศษที่นี่คือลำดับของ a:link a:visited a:hover a:actived จะต้องเป็นไปตามโค้ดตัวอย่างข้างต้นอย่างเคร่งครัด ไม่เช่นนั้นปัญหาจะเกิดขึ้นไม่มากก็น้อย นอกจากนี้เรายังกำหนดว่าการกำหนดนิยามใหม่ต้องมาก่อน คลาสเทียมมาเป็นอันดับสอง และการปรับแต่งมาเป็นอันดับสุดท้าย ทำให้ตัวคุณเองและผู้อื่นอ่านได้ง่ายขึ้น!
เพื่อให้แน่ใจว่าขนาดตัวอักษรจะสอดคล้องกันในเบราว์เซอร์ที่แตกต่างกัน ขอแนะนำให้กำหนดขนาดตัวอักษรเป็นพอยต์ pt และพิกเซล px โดยทั่วไปจะใช้ 9pt และ 11pt ใน Chinese Song Dynasty และโดยทั่วไป px จะใช้ 12px และ 14.7px ในภาษาจีน Songti นี่คือขนาดตัวอักษรที่ปรับให้เหมาะสม หน้าหนาหรือแบบอักษรเพลงเป็นตัวหนา โดยทั่วไปขนาดตัวอักษร 11pt และ 14.7px จะเหมาะสมกว่า
เมื่อเขียน <table> เพื่อซ้อนกัน ให้ปฏิบัติตามมาตรฐานอย่างเคร่งครัด สำหรับ <table> รายการเดียว ควรจัดแนว <table><tr> <td> ควรเยื้องด้วยช่องว่างครึ่งความกว้าง 2 ช่อง และหากมี other สำหรับตารางที่ซ้อนกัน <table> จะถูกเยื้องด้วยช่องว่างครึ่งความกว้างสองช่อง หากไม่มีตารางที่ซ้อนกันใน <td> แท็กปิดของ </td> ควรอยู่ในบรรทัดเดียวกันกับ <td> โดยไม่มีบรรทัด
ดังที่เราทราบในซอร์สโค้ด ไม่ควรมีโค้ดดังกล่าว:
div css xhtml xml ตัวอย่างซอร์สโค้ด
ตัวอย่างซอร์สโค้ด [www.52css.com]
<td><img src=”../images/sample.gif”>
</td>
ควรเป็นดังนี้:
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<td><img src=”../images/sample.gif”></td>
เนื่องจากเบราว์เซอร์คิดว่าการขึ้นบรรทัดใหม่เทียบเท่ากับช่องว่างครึ่งความกว้าง วิธีการเขียนที่ผิดปกติข้างต้นเทียบเท่ากับการเพิ่มโดยไม่ได้ตั้งใจ ช่องว่างแบบครึ่งความกว้าง หากจำเป็นต้องเพิ่มช่องว่างแบบครึ่งความกว้างจริงๆ และควรเขียนดังนี้:
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<td><img src=”../images/sample.gif”> </td>
<table> ในระดับเดียวกันจะต้องจัดชิดซ้าย และไม่อนุญาตให้มีเซลล์ว่างที่ไม่มีเนื้อหาใดๆ ควรเขียนความสูงที่มากกว่าหรือเท่ากับ 12px ระหว่าง <td> ถึง </td> หากความสูงน้อยกว่า 12px ควรแทรก gif โปร่งใสขนาด 1*1 ระหว่างรูปภาพ <td> และ </td> เนื่องจากเบราว์เซอร์บางตัวถือว่าเซลล์ว่างผิดกฎหมายและจะไม่ตีความเซลล์ว่าง หากลำดับโค้ดไม่เป็นระเบียบ คุณสามารถจัดเรียงใหม่ได้โดยใช้คำสั่ง -> ใช้การจัดรูปแบบ souce ใน DW3!
5. นอกจากนี้ยังมีมาตรฐานแบบรวมสำหรับวิธีการเขียนความกว้างและความสูง โดยทั่วไป สำหรับตารางที่มีคอลัมน์เดียว ความกว้างจะถูกเขียนในแท็ก <table> สำหรับตารางที่มีเพียงแถวเดียว ความสูงจะถูกเขียนในแท็ก <table> ; สำหรับตารางที่มีหลายแถวและหลายคอลัมน์ ตาราง ความกว้างและความสูงจะถูกเขียนในแท็ก <td> ของแถวหรือคอลัมน์แรก กล่าวโดยสรุป ปฏิบัติตามหลักการข้อหนึ่ง: ไม่ควรมีความสูงและความกว้างมากกว่าหนึ่งค่าที่ควบคุมขนาดของเซลล์เดียวกัน ตรวจสอบให้แน่ใจว่าความกว้างและความสูงใดๆ ถูกต้อง นั่นคือ ถ้าคุณเปลี่ยนค่าของความกว้างและความสูงใดๆ ใน รหัสควรอยู่ในการเปลี่ยนแปลงที่เห็นในเบราว์เซอร์ การทำเช่นนี้ไม่ใช่เรื่องง่าย แต่ต้องอาศัยการฝึกฝนและการคิดเป็นเวลานาน
หลักการทั่วไป
1. ก่อนที่จะจัดตาราง โปรดคิดอย่างรอบคอบเกี่ยวกับวิธีแก้ปัญหาที่ดีที่สุด พยายามควบคุมการซ้อนตารางภายในสามระดับ และพยายามหลีกเลี่ยงแท็กทั้งสอง <colspan> และ <rowspan> ประสบการณ์แสดงให้เห็นว่าเครื่องหมายทั้งสองนี้สามารถทำให้เกิดได้ ปัญหามากมาย
2. หน้าเว็บควรพยายามหลีกเลี่ยงการใช้ตารางขนาดใหญ่ทั้งหมด เนื้อหาทั้งหมดซ้อนอยู่ในตารางขนาดใหญ่นี้ เนื่องจากเมื่อเบราว์เซอร์ตีความองค์ประกอบของหน้า เนื้อหาเหล่านั้นจะแสดงทีละรายการในหน่วยของตาราง หากวางไว้ในตารางขนาดใหญ่ ผลที่ตามมาก็คือเมื่อผู้เยี่ยมชมพิมพ์ URL เขาจะต้องเผชิญกับช่องว่างเป็นเวลานาน จากนั้นเนื้อหาเว็บทั้งหมดจะปรากฏขึ้นพร้อมกัน หากคุณต้องทำสิ่งนี้ ให้ใช้แท็ก <tbody> เพื่อให้สามารถแสดงตารางขนาดใหญ่เป็นชิ้นๆ ได้
3. ในการเรียงพิมพ์ เรามักจะพบกับความจำเป็นในการเยื้องบรรทัดแรก อย่าใช้หรือเว้นวรรคเต็มความกว้างเพื่อให้ได้ผลลัพธ์ แนวทางมาตรฐานคือการกำหนด p { text-indent: 2em } ในสไตล์ชีต เพิ่มแท็ก <p> แต่ละย่อหน้า โปรดทราบว่าภายใต้สถานการณ์ปกติ โปรดอย่าละเว้นแท็กปิด </p>
4. โดยหลักการแล้ว เราห้ามใช้ <img width=? height=?> เพื่อรบกวนขนาดของการแสดงภาพ และไม่แนะนำให้รวมแอตทริบิวต์ความกว้างและความสูงไว้ในแท็ก <img> เนื่องจาก ในระหว่างกระบวนการผลิต รูปภาพมักต้องมีการแก้ไขซ้ำหลายครั้ง ซึ่งสามารถหลีกเลี่ยงการแทรกแซงของมนุษย์ในขนาดของการแสดงรูปภาพและเพิ่มฟังก์ชันของเบราว์เซอร์ให้สูงสุด อย่างไรก็ตาม ผลข้างเคียงก็คือเมื่อหน้าเว็บไม่ได้โหลดรูปภาพ ขนาดไซต์ของรูปภาพจะไม่ถูกสงวนไว้ อาจทำให้หน้าเว็บกระวนกระวายใจระหว่างการโหลด (หากรูปภาพถูกแทรกลงในตารางขนาดคงที่ เหตุการณ์นี้จะไม่เกิดขึ้น) โดยเฉพาะอย่างยิ่งเมื่อขนาดของรูปภาพเป็น ใหญ่ ปรากฏการณ์นี้จะเห็นได้ชัด ดังนั้นเมื่อคาดหวัง เมื่อสถานการณ์นี้เกิดขึ้นซึ่งจะทำให้หน้าเว็บกระวนกระวายใจอย่างเห็นได้ชัด โปรดตรวจสอบให้แน่ใจว่าได้แนบแอตทริบิวต์ความกว้างและความสูงไปที่ <img> ที่ส่วนท้าย
5. เพื่อเพิ่มฟังก์ชันการเรียงพิมพ์อัตโนมัติของเบราว์เซอร์ให้สูงสุด โปรดพยายามอย่าใช้ <br> เพื่อแทรกแซงการแบ่งส่วนข้อความทั้งหมดด้วยตนเอง
6. ควรมีช่องว่างครึ่งความกว้างระหว่างคำในภาษาต่างๆ ยกเว้นก่อนสัญลักษณ์ส่วนหัวและหลังสัญลักษณ์ส่วนท้าย เครื่องหมายวรรคตอนระหว่างตัวอักษรจีนควรเป็นเครื่องหมายวรรคตอนแบบเต็มความกว้าง และวงเล็บรอบตัวอักษรภาษาอังกฤษและตัวเลขควรใช้ครึ่งหนึ่ง -วงเล็บกว้าง
7. ขนาดตัวอักษรทั้งหมดควรถูกนำมาใช้โดยใช้สไตล์ชีท และแท็ก <font size=?> ไม่ได้รับอนุญาตให้ปรากฏบนหน้าเว็บ
8. โปรดอย่าเว้นวรรคติดต่อกันมากกว่าหนึ่งช่องในหน้าเว็บ และใช้ช่องว่างเต็มความกว้างให้น้อยที่สุดเท่าที่จะเป็นไปได้ (ภายใต้ชุดอักขระภาษาอังกฤษ ช่องว่างเต็มความกว้างจะกลายเป็นอักขระที่อ่านไม่ออก ใช้การเยื้องข้อความ การเติมช่องว่าง และระยะขอบ) , hspace, vspace และความโปร่งใสสำหรับรูปภาพ gif
9. เมื่อผสมภาษาจีนและภาษาอังกฤษเข้าด้วยกัน เราพยายามอย่างดีที่สุดที่จะกำหนดภาษาอังกฤษและตัวเลขให้เป็นแบบอักษรสีเขียวและแบบอาเรียล
10. ขอแนะนำให้ใช้เปอร์เซ็นต์ในการกำหนดระยะห่างระหว่างบรรทัด ค่าระยะห่างบรรทัดสองค่าที่ใช้กันทั่วไปคือ line-height:120%/150
% ไฟล์เริ่มต้นในไดเร็กทอรีบางแห่ง เส้นทางลิงก์ไม่จำเป็นต้องเป็นชื่อเต็ม ตัวอย่างเช่น เราไม่ต้องทำสิ่งนี้: <a href=”aboutus/index.htm”> แต่ควรเป็นดังนี้: <a href=”aboutus/”>
12. ขอแนะนำให้ใช้แบบอักษรขนาดใหญ่ขึ้นเมื่อฝังข้อความกราฟิก
13. "ขนาดหน้าเว็บ" หมายถึงผลรวมของขนาดไฟล์ของหน้าเว็บทั้งหมด รวมถึงไฟล์ HTML และวัตถุที่ฝังไว้ทั้งหมด ผู้ใช้ชอบไซต์ที่รวดเร็วมากกว่าแปลกใหม่ สำหรับผู้ใช้โมเด็ม ควรรักษาขนาดหน้าให้ต่ำกว่า 34K
หลักการตั้งชื่อไฟล์
1. แต่ละไดเร็กทอรีควรมีไฟล์ html เริ่มต้น และชื่อไฟล์ควรเป็น index.htm
2. ชื่อไฟล์ควรประกอบด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก ตัวเลข และขีดล่าง
3. อุดมการณ์ที่เป็นแนวทางของการตั้งชื่อคือการทำให้ตัวเองและสมาชิกทุกคนในกลุ่มงานเข้าใจความหมายของแต่ละไฟล์ได้อย่างง่ายดาย ประการที่สองคือเมื่อเราใช้คำสั่ง "เรียงลำดับตามชื่อ" ในโฟลเดอร์ขนาดใหญ่เดียวกัน หมวดหมู่ของไฟล์สามารถจัดเรียงเข้าด้วยกันเพื่อให้เราสามารถค้นหา แก้ไข แทนที่ คำนวณโหลด เป็นต้น
4. ข้อมูลต่อไปนี้ใช้คอลัมน์ "ข่าว" (รวมถึง "ข่าวในประเทศ" และ "ข่าวต่างประเทศ") เพื่ออธิบายหลักการตั้งชื่อไฟล์ html:
☆ สร้างไดเร็กทอรีข่าวสารในไดเร็กทอรีราก ☆ รายการข่าวเริ่มต้นรายการแรกชื่อ index.htm
☆ ข่าวทั้งหมดที่เป็นของ "ข่าวในประเทศ" ได้รับการตั้งชื่อตามลำดับ: china_1.htm, china_2.htm, …
☆ ข่าวทั้งหมดที่เป็นของ "ข่าวต่างประเทศ" ตั้งชื่อตามลำดับ: international_1.htm, international _2.htm, …
☆ หากจำนวนไฟล์เป็นตัวเลขสองหลัก โปรดตั้งชื่อไฟล์เก้าไฟล์แรก: china_01.htm, china_02.htm เพื่อให้แน่ใจว่าไฟล์ทั้งหมดสามารถจัดเรียงได้อย่างถูกต้องในโฟลเดอร์
5. หลักการตั้งชื่อรูปภาพเป็นไปตามมาตรฐานดังต่อไปนี้:
☆ ชื่อแบ่งออกเป็น 2 ส่วน ส่วนแรกและส่วนสุดท้าย คั่นด้วยเครื่องหมายขีดล่าง
☆ ส่วนหัวบ่งบอกถึงลักษณะทั่วไปของรูปภาพ เช่น โฆษณา โลโก้ เมนู ปุ่ม ฯลฯ
☆ พูดโดยทั่วไป:
เราตั้งชื่อรูปภาพสี่เหลี่ยม เช่น โฆษณาและลวดลายตกแต่งที่ด้านบนของหน้า: แบนเนอร์
เราตั้งชื่อรูปภาพสัญลักษณ์นี้ว่า โลโก้
เราตั้งชื่อรูปภาพขนาดเล็กด้วยลิงก์ที่ไม่ได้รับการแก้ไขบนปุ่มหน้า
เราตั้งชื่อรูปภาพของคอลัมน์ลิงก์ที่ปรากฏอย่างต่อเนื่องที่ตำแหน่งใดตำแหน่งหนึ่งในหน้าและมีลักษณะเหมือนกัน: เมนู
เราตั้งชื่อภาพเพื่อการตกแต่ง: pic
เราตั้งชื่อรูปภาพโดยไม่มีลิงก์เพื่อระบุชื่อ: title
ปฏิบัติตามหลักการนี้เป็นต้น
☆ส่วนหางใช้เพื่อแสดงความหมายเฉพาะของภาพ
☆ นี่คือตัวอย่างบางส่วน คุณควรจะเข้าใจความหมายของรูปภาพได้อย่างรวดเร็ว:
div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
Banner_sohu.gif
Banner_sina.gif
menu_aboutus.gif
menu_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg