Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх

Dreamweaver нь вэбсайтдаа зориулж drop-down цэсийг үүсгэхэд хялбар болгодог. Гэхдээ бүх HTML хэлбэрүүд шиг тэд жаахан төвөгтэй байж чадна. Энэ гарын авлага нь Dreamweaver дахь уналтын цэсийг үүсгэх алхмуудыг хийх болно.

Dreamweaver Jump Games

Dreamweaver 8 нь вэбсайт дахь навигацын үсрэнгүй цэсийг бий болгох хөтөч юм. Үндсэн цэснүүдээс ялгаатай нь энэ цэсэнд дууссан үедээ ямар нэгэн зүйл хийх болно. Та уншсан маягтаа ажиллуулахын тулд JavaScript эсвэл CGI-г бичих шаардлагагүй болно. Энэ заавар нь Dreamweaver 8 хөтөчийг хэрхэн үсрэх цэс үүсгэх талаар тайлбарлана.

01 - 20

Эхлээд Маягтыг үүсгэ

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх талаар Эхлээд Form үүсгэ. J Kyrnin-ийн дэлгэцийн зураг

HTML Маягт болон Dreamweaver-ийн тухай чухал тэмдэглэл:

Доншенцийн цэс шиг тусгай шидтэнгүүдийг эс тооцвол Dreamweaver HTML хэлбэрийг "ажил" хийхэд тус болохгүй. Үүний тулд танд CGI эсвэл JavaScript хэрэгтэй. Миний заавар Нэвтрэх HTML маягтууд Дэлгэрэнгүй мэдээллийг авах.

Та вэбсайтдаа уналттай цэс нэмж оруулахдаа хамгийн эхний зүйл бол түүнийг хүрээлэх хэлбэр юм. Dreamweaver-д Insert цэс рүү ороод Form дээр дараад "Маягт" -ыг сонгоно уу.

20 дугаар сарын 02

Маягтыг харах хэсэгт харуулах

Dreamweaver-ийн Drop-Down цэсийг хэрхэн дизайн харах хэсэгт харуулах. J Kyrnin-ийн дэлгэцийн зураг

Dreamweaver нь дизайны харагдацаар таны байршлын байршлыг харуулсан тул та өөрийн маягтыг хаана байрлуулахаа мэддэг. Энэ нь чухал ач холбогдолтой, учир нь цэсний шошго нь элементийн гадна талд хүчин төгөлдөр бус (ажиллахгүй) учраас энэ нь чухал юм. Зурган дээр харагдаж байгаачлан маягт нь дизайны талбар дахь улаан цэгэн зураас юм.

03 - 20

Жагсаалт / Цэсийг сонгоно уу

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх талаар Жагсаалт / Цэс сонгоно уу. J Kyrnin-ийн дэлгэцийн зураг

Dropbox цэсийг "жагсаалт" эсвэл "цэс" гэж нэрлэнэ. Тиймээс таны маягтыг оруулахын тулд Insert цэсний Form цэс рүү ороод "List / Цэс" -ийг сонгоно уу. Курсороо таны формоны хайрцгийн улаан шугаман хэсэг дотор байгаа эсэхийг шалгаарай.

04 - 20

Тусгай Сонголт цонх

Dreamweaver Special Options цонхонд Drop-Down цэсийг хэрхэн үүсгэх талаар. J Kyrnin-ийн дэлгэцийн зураг

Dreamweaver-ийн сонголтууд нь Хүртээмжтэй байдлын тухай дэлгэц байдаг. Dreamweaver надад хандах хандалтын бүх шинж чанарыг харуулахыг сонгосон. Энэ дэлгэц нь энэ үр дүн юм. Маягтууд нь олон вэбсайтууд хүртээмжгүй болж, эдгээр таван сонголтыг бөглөхөд унагаах цэсүүд илүү хурдан хүртээмжтэй байх болно.

05 - 20

Хүртээмжийг бүрдүүлэх

Dreamweaver Form Accessibility-д Drop-Down цэс хэрхэн үүсгэх талаар. J Kyrnin-ийн дэлгэцийн зураг

Хүртээмжтэй сонголтууд нь:

Шошго

Энэ бол талбарын нэр. Энэ нь таны элементийн хажууд текст шиг харагдах болно.
Өөрийнхөө унах цэсийг юу гэж нэрлэхийг бичээрэй. Энэ нь дугаарын цэс хариулах болно гэсэн асуулт, богино өгүүлбэр байж болно.

Style

HTML хэлбэрээр шошгоны хаяг орно. Таны сонголтууд нь шошгоны хаяг дээр "for" гэсэн атрибутыг ашиглахын тулд шошгоны текстийг буулгах текстийг буулгах, хаяг шошгыг ямар хэлбэрээр зааж өгөх, эсвэл шошгоны хаягыг огт ашиглахгүй байх ёстой.
Би шинж чанарыг ашиглахыг илүүд үздэг бөгөөд хэрэв би зарим нэг шалтгааны улмаас шошгыг зөөх шаардлагатай бол зөв хэлбэрийн талбарт залгагдах болно.

Байрлал

Та хаягийн цэсийн өмнө эсвэл дараа нь шошгыг байрлуулж болно.

Нэвтрэх түлхүүр

Энэ нь түлхүүр эсвэл Alt түлхүүртэй хамт ашиглагдах түлхүүр юм. Ингэснээр таны хэлбэрийг хулганын шаардлагагүйгээр ашиглахад хялбар болгоно. HTML-д нэвтрэх түлхүүрийг хэрхэн тохируулах

Tab индекс

Энэ бол вэб хуудсаар дамжуулан гарыг ашиглан текстийн талбарт хандах дараалал юм. Tabindex ойлгох

Хандалтын тохиргоогоо шинэчилсний дараа, OK дарна уу.

06 - 20

Цэсийг сонгоно уу

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? Цэсийг сонго. J Kyrnin-ийн дэлгэцийн зураг

Загварын харагдацаар таны унах цэс харуулсны дараа түүнд янз бүрийн элементүүдийг нэмэх хэрэгтэй. Эхлээд drop-down цэсийг сонгоод үүнийг дарж сонгоно уу. Dreamweaver зүгээр л доош унах цэсний өөр цэгтэй мөрийг сонгож байгаагаа харуулах болно.

20-иас 20

Цэсийн Properties

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ Цэс Properties. J Kyrnin-ийн дэлгэцийн зураг

Шинэлэг цэс нь жагсаалтаас / цэсний шинж чанарыг уналтын цэс рүү шилжих болно. Тэнд танай цэсийг ID ("сонгох" гэж бичсэн) өгч болно, та үүнийг лиценз эсвэл цэс болгохыг хүсч байгаа эсэхийг шийдэж, хэв маягийн хуудсандаа хэв маягийн төрлийг өгч, уналтын утгыг өгнө.

Жагсаалт, цэс хооронд ямар ялгаа байна вэ?

Dreamweaver нь зөвхөн нэг сонголтыг зөвшөөрөх цэсийг унагаах цэсийг дууддаг. "Жагсаалт" нь уналтаас олон сонголтыг зөвшөөрдөг бөгөөд нэгээс дээш зүйл өндөр байна.

Хэрэв та олон тооны шугамыг өндөр цэстэй болгохыг хүсвэл "list" төрөл рүү шилжиж "сонгогдсон" хайрцагыг сонгоогүй орхиж болно.

20-ын 20

Шинэ жагсаалт оруулах

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх Шинэ жагсаалтыг нэмэх. J Kyrnin-ийн дэлгэцийн зураг

Таны цэсэнд шинэ зүйлс нэмэхийн тулд "Жагсаалтууд ..." товчлуур дээр дарна уу. Энэ цонхыг нээнэ. Анхны хайрцагт байгаа шошгон дээрээ бичнэ үү. Энэ бол хуудас дээр харуулах болно. Хэрэв та утгыг хоосон орхивол энэ маягтыг илгээх болно.

09 - 20

Илүү нэмэх болон дахин хуулбарла

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Нэмэлт дүрс дээр дарж нэмэлт зүйлс нэмнэ үү. Хэрэв та жагсаалтын хайрцганд тэдгээрийг дахин захиалахыг хүсвэл баруун талын дээш, доош сумыг ашиглана.

20 - ын 20

Бүх зүйлийн утга өгнө

Dreamweaver дахь Drop-Down цэсийг хэрхэн бүтээх талаар Бүх зүйлсийн утга өгнө. J Kyrnin-ийн дэлгэцийн зураг

8-р алхам дээр дурдсанчлан, утга нь хоосон орхивол шошгыг маягт руу илгээнэ. Гэхдээ та бүх зүйлсийнхээ үнэ цэнийг өгч болно - өөр хэлбэрийн мэдээллийг таны маягтад илгээж болно. Та үсрэх цэс гэх мэт зүйлсийн хувьд энэ ихийг ашиглах болно.

20 дахь нь

Анхдагч сонголтыг сонгоно уу

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Вэб хуудсууд нь анхдагч зүйл болох эхлээд жагсаасан дусах жагсаалтыг анхдагчаар харуулах болно. Харин өөр нэгийг сонгохыг хүсвэл Properties цэс дээр "Анхдагч сонгогдсон" нүдэнд тодруулаарай.

20-ын 12

Дизайн харах горимоор өөрийн жагсаалтыг үзнэ үү

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? Design View -д өөрийн жагсаалтыг үзнэ үү. J Kyrnin-ийн дэлгэцийн зураг

Та шинж чанаруудыг засаж дууссаны дараа Dreamweaver таны сонгосон утгыг таны уншигчдын жагсаалтыг харуулна.

20 - иас 13

Кодыг харах жагсаалтаа харах

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? Code View дээр өөрийн жагсаалтыг үзнэ үү. J Kyrnin-ийн дэлгэцийн зураг

Хэрэв та кодын горимд шилжвэл Dreamweaver таны цэвэр цэсийг маш цэвэрхэн кодоор нэмж болно. Нэмэлт шинж чанарууд нь бидний хандалтын сонголтуудтай нэмсэн юм. Код нь индикатор бөгөөд уншиж ойлгоход маш хялбар байдаг. Тэр ч байтугай сонгосон = "сонгосон" шинж чанарыг тавьдаг. Учир нь би Dreamweaver-д XHTML-г бичихгүй гэж хэлсэн.

20 - ын 20

Хөтөч дээр хадгалж, харах боломжтой

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Хэрэв та документыг хадгалж, үүнийг вэб хөтөч дээр харах юм бол уналт цэс таныг хүлээж байгаа шиг харагдах болно.

20 - с 20

Гэхдээ энэ юу ч хийдэггүй

Dreamweaver дэх Drop-Down цэсийг хэрхэн үүсгэх вэ? Гэхдээ ямар ч зүйл хийхгүй. J Kyrnin-ийн дэлгэцийн зураг

Дээрх үүсгэсэн цэс зүгээр харагдаж байна, гэхдээ юу ч хийхгүй. Үүнийг хийхийн тулд та маягт дээрээ өөр үйлдлийн маягтыг бөглөх хэрэгтэй бөгөөд энэ нь өөр бусад зааварчилгаа юм.

Аз болоход, Dreamweaver маягт, CGI буюу скриптүүдийн талаар сурах шаардлагагүйгээр шууд вэбсайтны цэсийг бий болгож болно. Үүнийг Jump Jump гэж нэрлэдэг.

Dreamweaver Jump Jump цэс нь нэр болон URL-тай drop-down цэсийг тохируулдаг. Дараа нь та цэсэн дэх нэг зүйлийг сонгож болно, мөн вэбсайт нь холбоос дээр дарсан шиг л тэр байршил руу шилжих болно.

Insert цэс рүү очоод Form-ыг сонгоод дараа нь Jump цэсийг сонгоорой.

20 - с 20

Цонхны цонхон дээр оч

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Стандарт уншсан цэсээс ялгаатай нь Jump товчлуур нь цэсийн зүйлсийг нэрлэхийн тулд шинэ цонхыг нээж, маягт хэрхэн ажиллах талаар дэлгэрэнгүй мэдээллийг нэмнэ.

Эхний зүйл нь "untitled1" текстийг уншиж өгөхийг хүсч байгаагаа өөрчил.

20 - ын 20

Өөрийн Jumping Menu дээр зүйлс оруулах

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Нэмэлт зүйл дээр дарж үсрэх цэс рүү шинэ зүйл нэмнэ үү. Хүссэн зүйлээ нэмэх хэрэгтэй.

20 - с 20

Цэсийн сонголтууд руу очих

Dreamweaver-д Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Та хүссэн бүх холбоосыг нэмсэн бол өөрийн сонголтуудыг сонгох хэрэгтэй:

Нээлттэй URL-уудыг нээх

Хэрэв та frameset байгаа бол холбоосыг өөр хүрээтэйгээр нээж болно. Эсвэл та тусгай цонхонд үндсэн цонхны сонголтыг өөрчилж болно. Ингэснээр URL нь шинэ цонх эсвэл өөр газар нээх болно.

Цэсний нэр

Хуудсыг хуудасныхаа өвөрмөц ID өгсөн. Энэ скрипт зөв ажиллахын тулд шаардлагатай. Энэ нь танд олон үсрэх цэсийг нэг хэлбэрээр авах боломжийг олгодог.

Цэсийн дараа товчлуурыг оруулаарай

Цэс өөрчлөгдөх үед зарим тохиолдолд скрипт ажиллахгүй учраас үүнийг сонгох дуртай. Энэ нь бас илүү хүртээмжтэй байдаг.

URL өөрчлөлтийн дараа Нэгдүгээр зүйлийг сонгоно уу

Эхний цэсийн зүйл болох "Нэгийг нь сонгох" гэснийг та сонгоно уу. Энэ нь тухайн зүйл хуудсан дээр хэвээр үлдэхийг баталгаажуулах болно.

20 - иас 20

Цэс дизайныг харах

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Эхний цэстэйгээ адил Dreamweaver нь харагдах цэсийг дизайны харагдацаар харагдахуйц харагдах хэлбэрээр тохируулах болно. Та дараа нь унах цэсийг өөр ямар ч байсан адилаар засварлаж болно.

Хэрэв та үүнийг засварлаж байгаа бол эд зүйлсийн талаар ямар ч ID-г өөрчлөх хэрэггүй, скрипт ажиллахгүй байж магадгүй.

20 - иас 20

Хөтөч дэх цэс рүү орно уу

Dreamweaver дахь Drop-Down цэсийг хэрхэн үүсгэх вэ? J Kyrnin-ийн дэлгэцийн зураг

Файлыг хадгалж, F12 цохилт нь таны сонгосон хөтөч дээр хуудсыг харуулна. Тэндээс та сонголтоо сонгож болно, "Go" дээр дарж, үсрэх цэсэн дээр ажилладаг!