Example: marketing

BİLİŞİM TEKNOLOJİLERİ - megep.meb.gov.tr

M LL E T M BAKANLI I. B L M TEKNOLOJ LER . WEB TASARIM ED T R NDE LER . UYGULAMALAR. 482BK0174. Ankara, 2012. Bu mod l, mesleki ve teknik e itim okul/kurumlar nda uygulanan er eve retim Programlar nda yer alan yeterlikleri kazand rmaya y nelik olarak rencilere rehberlik etmek amac yla haz rlanm bireysel renme materyalidir. Mill E itim Bakanl nca cretsiz olarak verilmi tir. PARA LE SATILMAZ. NDEK LER. A IKLAMALAR .. ii G R .. 1. RENME FAAL YET -1 .. 3. 1. CSS .. 3. Web Tasar m Edit r ile Sayfa inde CSS Kullan m .. 3. Web Tasar m Edit r ve Harici CSS Sayfalar .. 5. Davran lar .. 7. T rleri .. 7. Ziyaret i Taraf Etkile im .. 7. Davran lar Ekleme ve D zenleme .. 9. UYGULAMA FAAL YET .. 17. L ME VE DE ERLEND RME .. 19. RENME FAAL YET -2.

4 Hedeflenen kural bölümünden satır içi stil seçilip “Kuralı Düzenle” düğmesine tıklandığı zaman karşınıza şekil1.2’deki pencere gelecektir. Şekil 1.2: Yeni CSS kuralı penceresi Buradan seçici türü ve seçici için bir isim belirlendikten sonra Kural tanımı kısmından

Information

Domain:

Source:

Link to this page:

Please notify us if you found a problem with this document:

Other abuse

Transcription of BİLİŞİM TEKNOLOJİLERİ - megep.meb.gov.tr

1 M LL E T M BAKANLI I. B L M TEKNOLOJ LER . WEB TASARIM ED T R NDE LER . UYGULAMALAR. 482BK0174. Ankara, 2012. Bu mod l, mesleki ve teknik e itim okul/kurumlar nda uygulanan er eve retim Programlar nda yer alan yeterlikleri kazand rmaya y nelik olarak rencilere rehberlik etmek amac yla haz rlanm bireysel renme materyalidir. Mill E itim Bakanl nca cretsiz olarak verilmi tir. PARA LE SATILMAZ. NDEK LER. A IKLAMALAR .. ii G R .. 1. RENME FAAL YET -1 .. 3. 1. CSS .. 3. Web Tasar m Edit r ile Sayfa inde CSS Kullan m .. 3. Web Tasar m Edit r ve Harici CSS Sayfalar .. 5. Davran lar .. 7. T rleri .. 7. Ziyaret i Taraf Etkile im .. 7. Davran lar Ekleme ve D zenleme .. 9. UYGULAMA FAAL YET .. 17. L ME VE DE ERLEND RME .. 19. RENME FAAL YET -2.

2 20. 2. SPRY .. 20. SPRY Framework .. 20. SPRY Nesneleri Ekleme ve D zenleme .. 20. UYGULAMA FAAL YET .. 27. L ME VE DE ERLEND RME .. 29. RENME FAAL YET -3 .. 30. 3. 30. Formlar ile al 30. Form 31. Form Nesneleri Eklemek ve Bi imlendirmek .. 31. Do rulama Ara lar .. 41. UYGULAMA FAAL YET .. 46. L ME VE DE ERLEND RME .. 48. RENME FAAL YET -4 .. 50. 4. S TE Y NET M VE YAYINI .. 50. Site Y netimi .. 50. Siteleri Yay 51. Yay nlama Se enekleri .. 52. Siteye Dosya Y klemek ve ndirmek .. 53. UYGULAMA FAAL YET .. 54. L ME VE DE ERLEND RME .. 55. MOD L DE ERLEND RME .. 56. CEVAP ANAHTARLARI .. 58. KAYNAK A .. 59. i A IKLAMALAR. A IKLAMALAR. KOD 482BK0174. ALAN Bili im Teknolojileri DAL/MESLEK Web Programc l . MOD L N ADI Web Tasar m Edit r nde leri Uygulamalar Bu mod lweb tasar m edit r ile sayfa i erisindeki CSS ve MOD L N TANIMI SPRY nesneleri d zenleyip web sitesini internet ortam nda kullan m n n ve beceri kazand ran renme materyalidir.

3 S RE 40/32. N KO UL Web Tasar m Edit r ne Giri mod l n tamamlam olmak YETERL K Nesne i lemlerini yapmak ve site y netimini ger ekle tirmek Genel Ama . renci bu mod l ile gerekli ortam sa land nda; Web tasar m edit r ile sayfa i erisindeki CSS ve SPRY nesneleri d zenleyip web sitesini internet ortam nda yay nlayabileceksiniz. MOD L N AMACI Ama lar 1. CSS dosyalar d zenlemek ve sayfam za javascript kodlar . ekleyebileceksiniz. 2. SPRY nesneler kullanabileceksiniz. 3. Form nesneleri kullanabileceksiniz. 4. Web sitesini y netmek ve internette yay nlayabileceksiniz. E T M RET M. Ortam:Bilgisayar Laboratuar . ORTAMLARI VE. Donan m:Bilgisayar, internet, projeksiyon DONANIMLARI. Mod l i inde yer alan her renme faaliyetinden sonra verilen l me ara lar ile kendinizi de erlendireceksiniz.

4 L ME VE retmen mod l sonunda l me arac ( oktan se meli test, DE ERLEND RME do ru-yanl testi, bo luk doldurma, e le tirme vb.) kullanarak mod l uygulamalar ile kazand n z bilgi ve becerileri l erek sizi de erlendirecektir. ii G R . G R . Sevgili renci, G n m zde nternet kullan m n n hayat m zda ok nemli hale gelmesiyle birlikte web sayfalar n n i eri i kadar g rsel zenginli i de b y k nem ta maktad r. Bu da web tasar m n n etkinli ini artt rmaktad r. Stil sayfalar n n web tasar m ndaki etkinli inin artmas , web tasar m edit rleriyle entegrasyonu da beraberinde getirmi tir. Bu mod lle; web sayfalar i inde faydalan lan CSS kodlar n n web tasar m edit r nde nas l kullan laca n , web tasar m edit r n n size sundu u e itli davran lar n sitenizi ziyaret eden ki ilerin etkile imiyle ne t r olaylar ger ekle tirece ini, bir javascript k t phanesi olan spry er evelerinin sitenizde kullan m n n nas l olaca n reneceksiniz.

5 Ayr ca Html ile Geli mi Web lemleri mod l nde renmi oldu unuz formlar nweb tasar m edit r nde nas l kullan laca n ve son olarak da haz rlam oldu unuz web sitesinin y netimi ve yay nlanmas yla ilgili nemli noktalar reneceksiniz. Her renme faaliyetinin sonunda kendinizi de erlendirebilece iniz l me ve de erlendirme sorular , renmi oldu unuz konuyu peki tirmeniz i in ise uygulama faaliyetleri yer almaktad r. Mod l sonunda da i erik kapsam nda neler rendi inize dair kendinizi test etmenizi sa layacak Mod l De erlendirme sorular bulunmaktad r. Bunlar . ba ar ile tamamlad n z takdirde bu mod l tamamlam olacaks n z. Mod lle ilgili yard m almaya ihtiya duydu unuz konularda retmeninize ba vurmay ihmal etmeyiniz. 1. 2. RENME FAAL YET 1. RENME FAAL YET -1.

6 AMA . CSS dosyalar d zenlemek ve sayfam za javascript kodlar eklemek ARA TIRMA. Stil dosyalar n n nemini ara t r n z. nternetten javascript kodlar bularak web tasar m edit r nde haz r olarak bulunan javacsript kodlar aras nda ne t r farklar oldu unu s n fta tart n z. 1. CSS. nceki mod llerden de hat rlayaca m z gibi; CSS (Cascading Style Sheets), haz rlamakta oldu unuz sayfalar i in istenildi i zaman kullan lmak zere ablonlar olu turmaya yarar. B ylelikle site i i stillerle ilgili bir de i iklik yapmam z gerekti inde t m sayfalarda de i iklik yapmak yerine, mevcut CSS zerinde de i iklik yaparak t m sayfalara etki etmesi sa lanmaktad r. Bu da programc n n i ini olduk a kolayla t rmaktad r. CSS kodlar n n en nemli zelliklerinden birisi farkl t rlerde kullan labilme zelli idir.

7 Ste e g re tek bir eye, t m sayfaya veya site i erisinde kullan lan t m HTML. dosyalar na etki edebilme zelli ine sahiptir. CSS kodlar sayfa i inde kullan labildi i gibi harici olarak da tan mlan p istenildi i zaman a r larak kullan labilme zelli ine sahiptir. Stil ablonu(CSS) mod l nde stil sayfalar n n nas l olu turulaca n renmi tik. Bu b l mde web tasar m edit r i erisinde CSS'nin nas l kullan laca n renece iz. Web Tasar m Edit r ile Sayfa inde CSS Kullan m . Web tasar m edit r n kullanarak sayfa i inde stiller olu turabilirsiniz. lgili panele eri ebilmek i in Pencere men s nden CSS stilleri veya klavyeden Shift+F11 tu lar . kullan l r. Yeni bir sayfa a ld nda da sayfan n alt taraf nda yer alan zellikler b l m ndeki CSS k sm ndan CSS paneline eri ilebilir.

8 Ekil : CSS ayarlar zellikler b l m . 3. Hedeflenen kural b l m nden sat r i i stil se ilip Kural D zenle d mesine t kland zaman kar n za 'deki pencere gelecektir. ekil : Yeni CSS kural penceresi Buradan se ici t r ve se ici i in bir isim belirlendikten sonra Kural tan m k sm ndan da Yaln zca bu belgede se ene i se ilerek Tamam d mesine bas ld zaman sayfan zda istedi iniz stil zelliklerini belirleyece iniz pencere a lacakt r ( ekil ). ekil : CSS kural tan mlamas penceresi 4. Buradan sayfan zda olmas n istedi iniz zellikleri belirleyerek tamam d mesine t klan r. Olu turdu unuz stille ilgili zellikleri CSS Stilleri paneline t klayarak g rebilirsiniz. ekil : CSS stilleri paneli Kurallar ba l alt nda yer alan olu turmu oldu umuz (deneme) stili zerinde farenin sa tu una t klayarak a lan men den D zenle se ene i t klanarak yeni zellikler ekleyebilir var olan zellikleri kald rabilir ve de i tirebilirsiniz.

9 Web Tasar m Edit r ve Harici CSS Sayfalar . Stiller sayfa i inde kullan labildi i gibi harici olarak da tan mlan p istenildi i zaman a r l p kullan labilme zelli ine sahiptirler. Harici stil sayfas olu turmak i in CSS stilleri panelini a p oradan Yeni CSS Kural n . ( )se erek Yeni CSS Kural penceresini a n z. ( ekil ). ekil : Yeni CSS kural penceresi kural tan m b l m . Se ici t r , se ici ad n belirleyip, Yeni CSS kural penceresinin alt taraf nda yer alan Kural tan m k sm ndan Yeni stil sayfas dosyas se ene ini se ip tamam d mesine bast n z zaman kar n za ekil ' daki Stil Sayfas dosyas n farkl kaydet penceresi gelecektir. 5. ekil : Stil sayfas dosyas n farkl kaydet penceresi Dosya ad yaz l p kaydet d mesine bas ld zaman kar n za gelen pencereden istedi iniz stilleri belirleyip tamam d mesine bas ld nda, istedi iniz zaman istedi iniz sayfada kullanabilece iniz harici stil tan mlanm olacakt r.

10 Nceden haz rlanm olan harici stil dosyas n sitenizde kullanmak i in; CSS stilleri panelinin sa alt k esinde bulunan Stil sayfas n ekle( ) d mesine t klan r. ekil : Harici stil sayfas n ekle penceresi Harici stil sayfas n ekle penceresinden eklenmek istenen stil dosyas se ilir ve Tamam d mesine t kland nda stil dosyas sayfaya eklenmi olur. 6. Davran lar Web tasar m edit r kod yazmaya gerek kalmadan belgelere Javascript kodlar . yerle tirir. B ylelikle ziyaret iler web sayfalar zerinde birtak m g revler ba latabilirler. Bunlar, davran lar sayesinde ger ekle mektedir. Davran , bir olay veya olay sayesinde tetiklenen bir eylemin birle imidir. rne in sayfay ziyaret eden bir ki inin sayfada yer alan bir buton zerine geldi i veya t klad zaman ger ekle en renk de i ikli i bir davran t r.


Related search queries