WEB TASARIM VE PROGRAMLAMA 1. Stil.CSS Arkaplan özellikleri : bg.png dosyasını arkaplana şekildeki gibi ekleyiniz. Arkaplan Rengi : Beyaz Dış Katman (Kapsül) %90 genişliğinde ve sayfada ortalı hizalı olacak şekilde ayarlayınız. ust Katman (genişlik %100 - yükseklik 200px ) icerik Katmanı (genişlik %100 - yükseklik 600 px ) icerikmenu Katmanı genişlik %20 yükseklik %100 icerikyazi Katmanı (genişlik %80 - yükseklik %100 ) alt Katman (genişlik %100 - yükseklik 80 px ) İçerik Menü Katmanı Madde imli yazı özellikleri : Yazı Satır Yüksekliği = 50 px Normalde Madde imi gözükmesin. Üzerine Gelindiğinde maddeimi.gif dosyası madde imi resmi olarak tanımlayınız Anasayfa anasayfa.html ye, Misyon & Vizyon misyonvizyon.html ye ve Öğretmenler ogretmen.html sayfasına link veriniz. Linkli yazı özellikleri: Yazı tipi= Verdana, Arial, Helvetica, sans-serif Yazı boyutu = 18 px Normalde Yazı rengi = 000066 Linkli Yazı Üzerine Gelindiğinde Yazı Rengi = D26900 Link verilen yazı altını çizilmeyecek şekilde düzenleyiniz. Alt Katman en_alt.png resmini katmana sığacak biçimde ( %100 genişliğinde %100 yükseklikte) ekleyiniz. Not Katmanı 150 px genişliğinde ve 150 px yüksekliğinde SAĞ ALT köşede sayfada sürekli gözüken sabit Not Alanı ekleyiniz. Paper.gif resmini katman arkaplan resmi olarak tanımlayınız. Hareket Eden Nesne Özellikleri maskot.png 150 px yüksekliğinde ve 100 px genişliğindedir. maskot.png nin bulunduğu katmanı soldan 0 px ve üstten 660 px boşluk olacak şekilde yerleştiriniz maskot.png resmini sayfada sadece 800 px sağa hareket ettirilecek şekilde ayarlayınız. Öğretmen resimlerini 3 sütun olacak şekilde İçerik Yazı Katmanına ekleyiniz. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 1 / 9
2. Yandaki hesap makinası tablosunu oluşturunuz. Website sayfanın arkaplan rengi : LightGray Tablo genişliği : 300px Tablo Yüksekliği : 200px Kenarlık kalınlığı : 2px Kenarlık rengi : Kırmızı Hücreler Arası Boşluk : 10px Hücre içindeki verilerin hizalanması: Ortalı Hizalı Eşittir = yazısının rengini mavi, yazı büyüklüğü 3br olsun. 3. Aşağıdaki formu oluşturmak için gerekli html kodlarını yazınız. Konu : h2 başlık formatlı Çizgi : kırmızı 600px sola hizalı Form : Butona tıklandığında gonderildi.html ye gonderilsin. TC : max 11 hane karakter girişi yapılacak. Şifre : şifre formatlı tanımlanacak. 4. Yanda şekli verilen formu aynen şekildeki gibi formata uygun olarak hazırlayıp form.html olarak kaydediniz. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 2 / 9
5. Web sayfamızın tarayıcı başlığında Arkaplan Uygulama yazdırın ve arkaplan resmi olarak elma.jpg resmini arkaplana döşeyacek şekilde ekleyiniz. 6. Aşağıdaki ekran çıktısını verilen html sayfasını tasarlayınız. Karınca dan Püf Noktalar! yazısı en büyük başlık boyutunda ve ortalı hizalı olacak. Kök klasördeki karinca.gif resmi 100px genişliğinde, 120px yükseliğinde sağa hizalı şekilde ekleyin. Ekran Çıktısı: 7. Aşağıdaki yazıların aşağıda belirtilen özellikte olması için gerekli html sayfasını tasarlayınız. Alış-Veriş Yap yazısını altına yeşil renk,200 px genişliğinde, 5br kalınlığında sola hizalı yatay çizgi çiziniz. Morhipo yazısına tıklandığında www.morhipo.com yeni sekmede açılacak şekilde link veriniz. Gitti Gidiyor yazısına tıklandığında www.gittigidiyor.com aynı sekmede açılacak şekilde link veriniz. Şikayet Et yazısına tıklandığında destek@gmail.com adresine mail atacak şekilde link veriniz. Foto Albüm yazısına tıklandığında katalog.html açılacak şekilde link veriniz. Ekran Çıktısı 8. Marketten tek seferde 500TL üstü alış veriş yapanlara kupon dağıtılmaktadır. Ad Soyad alanı doldurulup Kupon numarası textboxa girilip butona basılınca Label1 e aşağıdaki durumlara göre sonuç yapılacaktır. Kupon Numarası 34A67S girilşmiş ise Tebrikler, (ad).. (soyad), Araba Kazandınız. Kupon Numarası 34S45G veya 34C12B girilşmiş ise Tebrikler, (ad).. (soyad), Akıllı Telefon Kazandınız. Aksi halde Bir sonraki haftaki çekilişe katılınız. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 3 / 9
9. Kullanıcı CheckBoxList1 e tıklama yaptıkça aldığı ders adedine göre fiyat hesaplayıp Label1 e yazıran programı yazınız. (Herbir ders 100 TL dir.) 10. Kullanıcı 1. ve 2. Yazılı notların girecek. Değerlendir butona tıklandığında girilen notları ve ortalamasını şekildeki gibi Label1e yazdıran programı yazınız. 11. Buton tıklandığında Textbox a girilen sayı kadar haneden oluşan rastgele bir sayı üretip Labela yazdıran program kodlarını yazınız. (İlk hane 0 olmayacak!) 12. Açılan menüye 1,2,3 8,9,10 sayıları girilmiştir. Kullanıcı açılan menüden 1-10 arası bir sayı seçtiği anda seçtiği sayı adedi kadar 1-100 sayıları arasında rastgele bir sayı üretip label2 ye aralarında olacak şekilde ard arda yazdıran program kodlarını yazın. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 4 / 9
İNTERNET PROGRAMCILIĞI 1- Önceden tanımlı şehre tatile gidilecektir. Tanımlanan şehre göre ödenecek tutarı ekrana yazan web sayfasını switch yapısını kullanarak oluşturunuz. İzmir için ekrana Ödemeniz gereken rakam 500TL yazacak. Antalya ekrana Ödemeniz gereken rakam 1000 TL yazacak. Bu dört şehir dışında bir yer tanımlanırsa ekrana lütfen 2 şehirden birini seçiniz yazacak. 2- Aldığı vize notunun %30 ile final notunun %70'ini bulup toplayarak ortalama olarak ekrana aşağıdaki gibi yazdırınız. (Vize=60 Final=70 Ortalama=67 gibi ) Vize ve Final notıu 1-100 arası rasgele sayı üretilecek. 3- Kişinin kilosu için bir değişken tanımlayıp bir değer atayınız. Ekrana, eğer kilosu 60 dan az ize ZAYIF, 60 ile 80 arasında ise NORMAL, 80'den büyük ise ŞİŞMAN yazdırınız. 4-1 ile 10 arasında sayı üretilecek ve üretilecek sayı tahmin edilecektir. Tahmin sayıdan büyük ise daha küçük sayı giriniz, sayı tahminden büyük ise daha büyük sayı giriniz, aksi halde tebrikler sayıyı bildiniz mesajını ekrana yazan web sayfasını if yapısınız kullanarak oluşturunuz. 5- İki değişken tanımlayıp 8 ve 6 sayılarını atayınız. Bu değişkenleri kullanarak ortalamasını ekrana ORTALAMA=7 şeklinde yazdırınız. 6- Önceden seçilmiş ürüne göre kdv sini ekrana yazdıran web sayfasını switch yapısını kullanarak oluşturunuz. Kalem için kdv %5, Silgi için kdv %10,diğer ürünler için kdv %20. 7- Öğrencinin notu için bir değişken tanımlayıp bir not atayınız.not 50 den büyükse ekrana GEÇTİ ya da KALDI yazdırınız. 8- Maaşı 5000TL ye eşit veya büyük olanlardan %10 vergi kesintisi yapan, maaşı 5000TL den az olanlardan herhangi bir kesinti yapmadan Net maaşı ekrana yazdıran programı if yapısı ile yazınız. 9- Ders adında bir dizi değişkeni oluşturarak, dizi elemanlarına Matematik, Fizik, Kimya, Biyoloji, Bilgisayar değerlerini atayınız. Ders dizisinden rasgele ders seçip En Sevdiğim Ders :.. şeklinde ekrana yazdıran php kodlarını yazınız. 10- Sayi değişkenine 1-30 arası rasgele bir sayı ataması yaptırınız. Bu sayıya kadar olan sayıların toplamını ekrana yazdıran for yapısını kullanarak kodlarını yazınız. (örneğin sayi değişkeni rasgele 6 atandı varsayalım 1+2+3+4+5+6 = 21 şeklinde ekrana yazılacak. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 5 / 9
GRAFİK ANİMASYON 1. Çalışma sayfası boyutu: 1000 X 1000 resolution : 72px/inch Sayfanın Arkaplanını dışı Siyah - içi Mavi renk geçişi uygulayınız. Kenarları yuvarlatılmış Kredi Kartını oluşturunuz. Kart arkaplanı desenli olsun. Üzerindeki yazıları şekildeki gibi düzenleyiniz. X harfini tasarlayınız. Visa nın bulunduğu dörtgene gölge uygulayınız. Kredi kartlarının allta yansımasını oluşturunuz. İş Bankası ve Tasarımı yazılarını şekildeki gibi yazınız. Yazılara gölge efekti veriniz. 2014 yazısına uzaktan yakına perspektif veriniz. 2. Aşağıdaki logoyu ve Amasya Sofrası yazısını fireworks de tasarlayınız. 3. Aşağıdaki CELL yazının içine resim ekleyecek tasarımı fireworks de tasarlayınız. 4. Fireworks ile kullanarak yükleniyor animasyonunu hazırlayınız. Arkaplan tamamına perde resmi döşeyin. %10 %30 %50 %70 %100 dilimlerde renklenen 5 state ile oluşan bir animasyon oluşturunuz. Animasyon yalnızca bir kez dönecek şekilde ayarlayınız. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 6 / 9
5. 11T yazısı çalışma sayfasının sol kısımdan ekranın ortasına gelip bir süre duracak. 11T yazısı Bilişim Teknolojileri yazısına dönüşecek ve saydamlık düşürerek ekrandan kaybolacak animasyonu yapınız. 6. Soldan ekrana çıkan, ortada zıplayıp, sağdan ekrandan çıkış yapan Ösym den HABERLER animasyonunu oluşturunuz. LYS, YGS ve KPSS lise isimli butonları oluşturun. Butonlar üzerine gelindiğinde duyuru metinleri gözüksün. Duyuru yazıları YGS 24 Mart günü sınava katılacak öğrencileri Başarılar:) LYS LYS başvuruları için yarın Son Gün!! KPSS lise Lise Son sınıf öğrencileri Sınav 23 Eylül de 7. Üç resimsimden oluşan foto albüm oluşturunuz. İleri- Geri butonları tasarlayınız. Bitti Animasyonu oluşturunuz. Hareketli Başa Dön butonu tasarlayıp tıklandığında ilk frame gitmesi için gerekli kodları yazınız. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 7 / 9
8. Aşağıdaki puzzle parçasını uygun yere yerleştirebilmek için parçalı Mouse ile hareket ettirebilecek animasyonu tasarlayınız. (Puzzle parçasına mouse ile üstüne geldiğinde fareyi takip edecek, üstünden çıkıldığında takibi bırakacak.) 9. Fare butonu üstüne gelindiğinde İndirim Alanı gözükecek şekilde düzenleyiniz.(visible) İndirim Alanına her tıklamada alan yukarı doğru 20px hareket edecek şekilde düzenleyiniz. 10. Paraları mouse imleci yerine hareket ettirecek animasyonu hazırlayınız. GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 8 / 9
GAREMTAL-UYGULAMA SINAV ÖRNEĞİ Sayfa 9 / 9