วิธีสร้างเว็บไซต์: สำหรับผู้เริ่มต้น

วิธีสร้างเว็บไซต์: สำหรับผู้เริ่มต้น

คุณเคยต้องการที่จะทำเว็บไซต์หรือไม่? บางทีคุณอาจเคยอ่าน HTML ของเรา ( ทำความเข้าใจ HTML ) และบทเรียน CSS แต่ไม่รู้ว่าจะใช้ภาษาเหล่านั้นอย่างไรในโปรเจ็กต์ที่ใหญ่กว่า





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



คุณจะสร้างเว็บไซต์นี้โดยใช้ HTML, CSS และ JavaScript ด้วย jQuery ( คู่มือ jQuery ) จะไม่ทำอะไรเลย จริงๆ Bleeding edge ดังนั้นโค้ดนี้จึงควรทำงานได้ดีในเบราว์เซอร์รุ่นใหม่ๆ ส่วนใหญ่





หากคุณไม่แน่ใจเกี่ยวกับ CSS ใด ๆ ให้ดูที่ คู่มือ CSS ที่ W3Schools.com .

การออกแบบ

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



ฉันออกแบบเว็บไซต์นี้สำหรับบริษัทสมมติใน Adobe Photoshop 2017. หากคุณสนใจ อย่าลืมคว้าไฟล์ .PSD จากการดาวน์โหลดบันเดิล นี่คือสิ่งที่คุณได้รับในไฟล์ photoshop:

ภายใน PSD คุณจะพบเลเยอร์ทั้งหมดที่จัดกลุ่ม ชื่อ และรหัสสี:



คุณต้องติดตั้งฟอนต์สองสามตัวเพื่อให้ทุกอย่างดูถูกต้อง อย่างแรกคือ Font Awesome ใช้สำหรับไอคอนทั้งหมด อีกสองแบบอักษรคือ PT Serif และ Myriad Pro (รวมอยู่ใน Photoshop) หากคุณไม่แน่ใจว่าจะติดตั้งแบบอักษรอย่างไร โปรดอ่านคำแนะนำของเรา

ไม่ต้องกังวลหากคุณไม่มี Adobe Photoshop คุณไม่จำเป็นต้องดำเนินการต่อไป



รหัสเริ่มต้น

เมื่อการออกแบบชัดเจนแล้ว มาเริ่มเขียนโค้ดกันเลย! สร้างไฟล์ใหม่ในโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ (ฉันกำลังใช้ ข้อความประเสริฐ3 ). บันทึกเป็น index.html . คุณสามารถเรียกสิ่งนี้ว่าอะไรก็ได้ที่คุณชอบ สาเหตุที่หลาย ๆ หน้าถูกเรียกว่าดัชนีนั้นเนื่องมาจากวิธีการทำงานของเว็บเซิร์ฟเวอร์ การกำหนดค่าเริ่มต้นสำหรับเซิร์ฟเวอร์ส่วนใหญ่คือการให้บริการหน้า index.html หากไม่มีการระบุหน้า

หากคุณไม่ต้องการเรียนรู้รายละเอียด ไปคว้ารหัสเต็มจากการดาวน์โหลด

นี่คือรหัสที่คุณต้องการ:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


สิ่งนี้ทำหลายสิ่ง:

  • กำหนด HTML ขั้นต่ำที่จำเป็น
  • กำหนดชื่อหน้าของ 'เสียงสื่อ'
  • รวม jQuery ที่โฮสต์บน Google CDN ( CDN คืออะไร)
  • รวม Font Awesome ที่โฮสต์บน Google CDN
  • กำหนด สไตล์ แท็กเพื่อเขียน CSS ของคุณ
  • กำหนด สคริปต์ แท็กเพื่อเขียน JavaScript ของคุณ

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

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

windows ไม่รู้จักฮาร์ดไดรฟ์ภายนอก

ส่วนหัว

มาสร้างส่วนหัวกันเถอะ นี่คือสิ่งที่ดูเหมือน:

เริ่มจากบิตสีเทาเล็กน้อยที่ด้านบน เป็นสีเทาอ่อน มีสีเทาเข้มเล็กน้อยอยู่ข้างใต้ นี่คือภาพระยะใกล้:

เพิ่ม HTML นี้ภายใน ร่างกาย แท็กที่ด้านบน:

ในขณะที่คุณอยู่ที่นี่ เรามาทำลายสิ่งนี้กันเถอะ NS div ก็เหมือนภาชนะใส่ของอื่นๆ เข้าไป 'ของอื่นๆ' นี้สามารถใส่ข้อความ รูปภาพ อะไรก็ได้จริงๆ มีข้อ จำกัด บางประการเกี่ยวกับสิ่งที่สามารถเข้าไปในแท็กบางแท็กได้ แต่ div นั้นค่อนข้างทั่วไป มันมี NS ของ แถบด้านบน . ซึ่งจะใช้เพื่อจัดรูปแบบด้วย CSS และกำหนดเป้าหมายด้วย JavaScript หากจำเป็น ตรวจสอบให้แน่ใจว่าคุณมีองค์ประกอบเดียวที่มีรหัสเฉพาะ ซึ่งควรไม่ซ้ำกัน หากคุณต้องการให้องค์ประกอบหลายรายการมีชื่อเหมือนกัน ให้ใช้ a ระดับ แทน -- มันเป็นสิ่งที่พวกเขาออกแบบมาเพื่อ! นี่คือ CSS ที่คุณต้องการเพื่อจัดรูปแบบ (ใส่ที่ด้านบนสุดในของคุณ สไตล์ แท็ก):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

สังเกตว่าเครื่องหมายแฮช (#, แฮชแท็ก, เครื่องหมายปอนด์) ใช้นำหน้าชื่ออย่างไร ซึ่งหมายความว่าองค์ประกอบนั้นเป็น ID หากคุณกำลังใช้ชั้นเรียน คุณจะใช้จุดเต็ม (.) แทน NS html และ ร่างกาย แท็กมีช่องว่างภายในและระยะขอบตั้งเป็นศูนย์ เพื่อป้องกันปัญหาการเว้นวรรคที่ไม่ต้องการ

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

HTML:


ซีเอสเอส:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

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

background: red;

ได้เวลาสร้างโลโก้แล้ว Font Awesome จำเป็นสำหรับไอคอนเอง Font Awesome คือชุดไอคอนที่รวมเป็นแบบอักษรเวกเตอร์ ยอดเยี่ยมมาก! โค้ดเริ่มต้นด้านบนตั้งค่า Font Awesome แล้ว พร้อมใช้งานได้เลย!

เพิ่ม HTML . นี้ ข้างใน NS ธรรมดา-wrapper ดิวิชั่น:



ซีเอสเอส:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

อย่ากังวลกับฟอนต์อื่นๆ ที่ไม่ตรงกับการออกแบบ คุณจะจัดระเบียบมันในภายหลัง หากคุณต้องการใช้ไอคอนอื่น ตรงไปที่ Font Awesome Icons หน้าแล้วเปลี่ยน fa-volume-down ไปยังชื่อของไอคอนที่คุณต้องการใช้

เมื่อย้ายไปยังแถบนำทาง คุณจะใช้รายการที่ไม่เรียงลำดับ ( NS ) สำหรับสิ่งนี้. เพิ่ม HTML . นี้ หลังจาก NS โลโก้คอนเทนเนอร์ (แต่ยังอยู่ใน ธรรมดา-wrapper ):

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

นี่คือ CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

CSS นี้เริ่มต้นด้วย an รายการไม่เรียงลำดับ . จากนั้นจะลบสัญลักษณ์แสดงหัวข้อย่อยโดยใช้ รายการสไตล์ประเภท: none; . ลิงก์จะเว้นระยะห่างกันเล็กน้อย และให้สีเมื่อคุณวางเมาส์เหนือลิงก์เหล่านั้น ตัวแบ่งสีเทาขนาดเล็กเป็นเส้นขอบด้านขวาของแต่ละองค์ประกอบ ซึ่งจะถูกลบออกสำหรับองค์ประกอบสุดท้ายโดยใช้ ลิงค์สุดท้าย ระดับ. นี่คือสิ่งที่ดูเหมือน:

ที่เหลือสำหรับส่วนนี้คือไฮไลต์สีแดงแนวนอน เพิ่ม HTML นี้หลังจาก ธรรมดา-wrapper :

และนี่คือ CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

นั่นคือส่วนบนที่ทำ นี่คือสิ่งที่ดูเหมือน -- ค่อนข้างคล้ายกับการออกแบบใช่มั้ย?

พื้นที่เนื้อหาหลัก

ตอนนี้ได้เวลาย้ายไปยังส่วนเนื้อหาหลัก ซึ่งเรียกว่า 'ครึ่งหน้าบน' นี่คือลักษณะของส่วนนี้:

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

คุณจะต้องใช้ภาพตัวอย่างสำหรับส่วนนี้ รวมอยู่ในการดาวน์โหลด ภาพนี้กว้าง 670px และมาจาก Panasonic Lumix DMC-G80/G85 Review ของเรา

เพิ่ม HTML หลังจาก NS top-color-splash ธาตุ:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

วิธีป้องกันแล็ปท็อปไม่ให้ร้อนเกินไป

Alternatively, check out our review of the Panasonic G80 shown on the right!






สังเกตว่า ธรรมดา-wrapper องค์ประกอบกลับมาแล้ว (นั่นคือความสุขของการใช้คลาส) คุณอาจสงสัยว่าทำไมภาพ ( img ) แท็กไม่ปิด นี่คือแท็กปิดตัวเอง เครื่องหมายทับ ( /> ) บ่งชี้สิ่งนี้ เนื่องจากไม่จำเป็นต้องปิดแท็กเสมอไป

ซีเอสเอส:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

คุณลักษณะที่สำคัญที่สุดที่นี่คือ ขนาดกล่อง: เส้นขอบกล่อง; . เพื่อให้แน่ใจว่าองค์ประกอบจะมีความกว้าง 40% หรือ 60% เสมอ ค่าเริ่มต้น (ไม่มีแอตทริบิวต์นี้) คือความกว้างที่คุณระบุ บวกช่องว่างภายใน ระยะขอบ และเส้นขอบใดๆ คลาสรูปภาพ ( ภาพที่โดดเด่น ) มี ความกว้างสูงสุด ของ 500px . หากคุณระบุเพียงมิติเดียว (ความกว้างหรือความสูง) และเว้นว่างไว้ css จะปรับขนาดรูปภาพโดยคงอัตราส่วนภาพไว้

พื้นที่อ้างอิง

มาสร้างพื้นที่ใบเสนอราคากันเถอะ นี่คือสิ่งที่ดูเหมือน:

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

เพิ่ม HTML . นี้ หลังจาก ก่อนหน้า ธรรมดา-wrapper :



makeuseof is the best website ever


Joe Coburn



แล้ว CSS นี้:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

ไม่มีอะไรเกิดขึ้นมากมายที่นี่ การปรับขนาดเป็นการปรับเปลี่ยนหลักที่จำเป็น -- ขนาดแบบอักษร ระยะห่าง และอื่นๆ นี่คือสิ่งที่ดูเหมือนตอนนี้ -- มันเริ่มที่จะดูเหมือนเว็บไซต์!

พื้นที่ไอคอน

มาลุ้นกันต่อ ใกล้เสร็จแล้ว! ต่อไปนี้คือส่วนถัดไปที่ต้องสร้าง:

ส่วนนี้จะใช้หลายคลาส ไอคอนทั้งสามส่วนใหญ่จะเหมือนกัน ยกเว้นเนื้อหา ดังนั้นจึงเหมาะสมที่จะใช้คลาสแทนรหัส เพิ่ม HTML . นี้ หลังจาก ก่อนหน้า อ้างพื้นที่ :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



ไอคอนทั้งสามนี้ยังเป็น Font-Awesome . HTML กลับมาใช้ the . อีกครั้ง ธรรมดา-wrapper ระดับ. นี่คือ CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

มีสิ่งใหม่ๆ เกิดขึ้นใน CSS มุมโค้งมนถูกกำหนดโดย รัศมีเส้นขอบ: 200px; . การตั้งค่านี้เหมือนกับความกว้างจะทำให้ได้วงกลมที่สมบูรณ์แบบ คุณสามารถลดค่านี้ได้หากต้องการรูปสี่เหลี่ยมจัตุรัสที่มีมุมโค้งมนมากกว่า สังเกตว่าการดำเนินการโฮเวอร์ใช้กับ div อย่างไร ไม่ได้จำกัดเฉพาะลิงก์เท่านั้น นี่คือสิ่งที่ส่วนนี้ดูเหมือนตอนนี้:

สิ่งสุดท้ายที่ต้องทำคือส่วนท้าย! วิธีนี้ง่ายมาก เนื่องจากเป็นเพียงพื้นที่สีเทาที่ไม่มีข้อความ เพิ่ม HTML นี้หลังพื้นที่ไอคอน ' ธรรมดา-wrapper :

นี่คือ CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

ดู - สิ่งที่ง่ายจริงๆ

เพิ่ม Pizzazz

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

แบบอักษรที่ใช้สำหรับชื่อเรื่องส่วนใหญ่คือ โปรมากมาย . มาพร้อมกับ Adobe สร้าง Cloud แต่ไม่พร้อมใช้งานในรูปแบบเว็บฟอนต์ แบบอักษรที่ใช้บนหน้าเว็บปัจจุบันคือ Helvetica . นี้ดูโอเค ดังนั้นคุณสามารถปล่อยให้มันเป็นอย่างไรก็ตาม PT Sans สามารถใช้ได้เป็นเว็บฟอนต์ แบบอักษรที่ใช้สำหรับข้อความทั้งหมดคือ PT Serif ซึ่งมีให้ใช้งานในรูปแบบเว็บฟอนต์

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

เพิ่ม CSS นี้เพื่อเปลี่ยนไปใช้แบบอักษรที่ดีกว่า:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

ตอนนี้แก้ไของค์ประกอบ html และเนื้อความของคุณเพื่อใช้แบบอักษรใหม่:

font-family: 'PT Serif', 'Helvetica', 'Arial';

สังเกตว่าองค์ประกอบ h3 ไม่รวมอยู่ในรายการอย่างไร - สิ่งนี้จะเริ่มต้นเป็น PT-เซริฟ แทน PT-ซาน .

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

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





นี่คือ CSS ที่จำเป็นในการซ่อนรูปภาพเด่นพิเศษ:

.hidden {
display: none;
}

เมื่อจัดการ HTML และ CSS แล้ว เรามาเปลี่ยนไปใช้ JavaScript กัน การทำความเข้าใจ Document Object Model (DOM) สำหรับส่วนนี้มีประโยชน์ แต่ไม่จำเป็น

ค้นหา สคริปต์ พื้นที่ที่ด้านล่างของหน้า:


/* JavaScript goes here, at the bottom of the page */

เพิ่ม JavaScript ต่อไปนี้ภายใน สคริปต์ แท็ก:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

มีบางสิ่งเกิดขึ้นที่นี่ รหัสมีอยู่ภายใน $(เอกสาร).พร้อม() . ซึ่งหมายความว่าจะทำงานเมื่อเบราว์เซอร์ของคุณแสดงผลหน้าเว็บเสร็จแล้ว ซึ่งเป็นแนวปฏิบัติที่ดี NS setInterval() ใช้เรียกฟังก์ชัน เปลี่ยนภาพ () ทำงานอย่างสม่ำเสมอในช่วงเวลาที่กำหนดไว้ล่วงหน้าเป็นมิลลิวินาที (1000 มิลลิวินาที = 1 วินาที) นี้ถูกเก็บไว้ใน เวลา ตัวแปร. คุณสามารถเพิ่มหรือลดค่านี้เพื่อเพิ่มความเร็วหรือชะลอการเลื่อนได้ สุดท้าย คำสั่งกรณีอย่างง่ายจะใช้เพื่อแสดงรูปภาพต่างๆ และติดตามรูปภาพที่แสดงอยู่ในปัจจุบัน

ความท้าทายการเข้ารหัส

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

เพิ่มส่วนท้าย: เพิ่มข้อความในส่วนท้าย (คำใบ้: คุณสามารถใช้ซ้ำ ธรรมดา-wrapper และ หนึ่งในสาม/สองในสาม ชั้นเรียน.)

ปรับปรุงการเลื่อนภาพ: แก้ไข JavaScript เพื่อทำให้การเปลี่ยนแปลงของภาพเคลื่อนไหว (คำใบ้: ดูที่ jQuery เฟดอิน และ เคลื่อนไหว ).

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

ตั้งค่าเซิร์ฟเวอร์: ตั้งค่าเซิร์ฟเวอร์และส่งข้อมูลระหว่างหน้าเว็บและเซิร์ฟเวอร์ (คำแนะนำ: อ่านคำแนะนำเกี่ยวกับ JSON และ Python ของเรา)

ดาวน์โหลดเพลงฟรีไม่ต้องสมัคร

เมื่อคุณคุ้นเคยกับการใช้ JavaScript หรือหากคุณมีประสบการณ์กับ Ruby แล้ว คุณสามารถลองใช้มือของคุณในการสร้างเว็บไซต์ด้วยเครื่องมือสร้างเว็บไซต์แบบสแตติก เช่น GatsbyJS หรือ Jekyll

แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีเปลี่ยนรูปลักษณ์และความรู้สึกของเดสก์ท็อป Windows 10 ของคุณ

ต้องการทราบวิธีทำให้ Windows 10 ดูดีขึ้นหรือไม่? ใช้การปรับแต่งง่ายๆ เหล่านี้เพื่อทำให้ Windows 10 เป็นของคุณเอง

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • HTML
  • ออกแบบเว็บ
  • CSS
เกี่ยวกับผู้เขียน โจ โคเบิร์น(136 บทความที่ตีพิมพ์)

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

เพิ่มเติมจาก Joe Coburn

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก