Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

Ankara - 2006 T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri.

Benzer bir sunumlar


... konulu sunumlar: "Ankara - 2006 T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri."— Sunum transkripti:

1 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Web Tasarımı

2 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Web sayfasının yapısı Web sayfası etiketi ile başlar ve ile biter. İki bölümden oluşur. …. : Bu bölümde sayfa ve sayfayı hazırlayan kişi vb. konularda bilgi verilir. Burada yazdıklarımız sayfanın görünümünü etkiler, ancak sayfada görüntülenmez. Örneğin; koduyla sayfasının karakter kodlamasının hangi dil ile olacağını belirtmiş oluruz. (“iso ” ve “windows-1254” sayfanın Türkçe karakterlerle görüntüleneceğini belirtir.) … etiketi de web tarayıcısının başlık çubuğunda görüntülenecek metni belirler. Sayfayı hazırlayan veya sahibi olan kişi veya kuruluşu belirtir. … : Sayfada görüntülenecek metin, resim, tablo vb. nesnelerin bulunduğu bölümdür.

3 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Basit bir web sayfasının görünümü şöyledir: …. (Sayfayı tanımlayan kodlar.) … (Sayfanın içeriği: metin, resim vb.)

4 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı HTML HTML HyperText Markup Language kelimelerinin ilk harflerinden oluşur. Hipermetin İşaretleme Dili diye Türkçeleştirilebilir. HTML de web tarayıcısına tag (etiket) denilen komutlarla istekler bildirilir. Etiketlerle verilen komutlar web tarayıcısı tarafından yorumlanır ve görüntü oluşturulur. Etiketlerin yapısı şöyledir: … Etiketler genelde şeklinde açılıp şeklinde kapatılır. Ancak kapatılmayan etiketler de vardır. Etiketleri bir örnekle açıklayacak olursak: Bunlarla “2003 yılında üretilmiş, doğan model beyaz renkli tofaş bir otomobil istiyorum” demiş oluruz. Gerçek bir örnek verecek olursak: Paragrafın içerdiği metin Bu kodlarla da şunu demiş oluruz: “Yazacağım metnin yazıtipi verdana, boyutu 4, rengi kırmızı olsun ve ortaya hizalansın.”

5 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Başlıca HTML etiketleri Metin Etiketleri 1b Metni kalın yapar. 2 iMetni italik yapar. 3 strikeMetni üstü çizili yapar. 4 uMetni altı çizili yapar. 5 strongMetni kalın yapar. 6 fontAldığı face, size, color vb. parametrelerle metnin yazıtipi, boyut, renk gibi özelliklerini belirler. 7 subMetni alt simge olarak gösterir. 8 supMetni üst simge olarak gösterir.

6 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Blok Etiketleri 9 blockquoteMetnin sol girintisini artırır. 10 centerMetni ortalar. 11 divSayfa içinde ayrı bir katman oluşturur. 12 spanDiv etiketi gibidir. Ancak div ile oluşturulan katman metni satır olarak alır, span ile ise metin kelime bazında da bölümlere ayrılabilir. 13 pParagraf oluşturur. 14 h1, h2, h3… Başlık oluşturur.

7 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Liste Etiketleri 15 olNumaralandırma oluşturur. Bu numaralandırmanın, type parametresini kullanarak A, a, I, i biçimlerinde olması sağlayabiliriz. 16 ulMadde işaretleri oluşturur. 17 liListe öğelerini belirtir.

8 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Tablo Etiketleri 18 tableTablo oluşturur. 19 trTabloya satır ekler. 20 tdTabloya hücre ekler. 21 thTabloya başlık metni içerecek hücre ekler.

9 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Form Etiketleri 22 formSayfaya form ekler. 23 inputType parametresine göre tek satırlık metin kutusu, buton, onay kutusu vs. oluşturur. 24 textareaBirden çok satır yazılabilen metin kutusu oluşturur. 25 selectAçılır form alanı oluşturur. 26 optionSelect etiketi ile oluşturulan açılır form alanında seçenekleri belirtir.

10 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Çeşitli Etiketler 27 htmlWeb sayfasının bütününü içine alır. İki bölümden oluşur: head ve body. 28 headSayfanın dil kodlaması, başlığı gibi özelliklerini belirleyen etiketleri içerir. Burada yazılanlar sayfada görüntülenmez. 29 bodyWeb sayfasının görüntülenen içeriğinin bulunduğu bölümdür. 30 aBaşka bir dosyaya link (Köprü) oluşturur. 31 brBoş bir satır oluşturur 32 hrYatay çizgi oluşturur. 33 scriptSayfaya Javascript vb. web programlama dilleri ile yazılan script’leri ekler. 34 styleSayfaya Cascading Style Sheet komutlarını ekler 35 titleWeb tarayıcısının başlık çubuğunda görüntülenecek olan sayfa başlığını belirtir. 36 imgSayfaya resim ekler.

11 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Örnek Uygulamalar

12 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Metin Biçimlendirme

13 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Liste Oluşturma Yukarıdaki listeyi oluşturmak için aşağıdaki kodlar yazılmalıdır. Yukarıdaki kodlarda sıralı, sırasız bir liste oluşturulacağını belirtir. “type” parametresi ise oluşturulacak listedeki liste belirtecinin ne olacağını (a, A, i, I, kare, içi dolu daire, içi boş daire vb.) belirler. listeye öğeler ekler.)

14 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Tablo Oluşturma Bir haftalık ders programı hazırlayacağımızı varsayalım. Tablomuzda 6 sütun ve 7 satır bulunmaktadır.

15 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Sırasıyla şunlar yapılmalıdır: yazarak bir tablo oluşturulacağı belirtilir. ile birinci satır oluşturulur. ile birinci hücre oluşturulur ve ile kapatılır. Yukarıdaki tabloya bakarsak her satırda altı hücre olduğu görülür. Bu nedenle yine aynı şekilde diğer 5 hücre oluşturulur. (Tablonun doğru görüntülenebilmesi için hücreler boş bırakılacak olsa bile boşlukla doldurulmalıdır. Boşluğun karşılığı ise “ ” dir.) Birinci satır bittiğinden ile kapatılır. Bu durumda görünüm şöyle olur:

16 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı 2, 3 ve 4. maddedekiler altı defa tekrarlanarak diğer satırlar oluşturulur. Tablo ile kapatılır. Artık içlerini doldurabiliriz. İlk satırın 2-6 arası hücrelere günleri yazabiliriz. 2-7 arası satırların ilk hücrelerine de sayıları yazalım. Görünümün yukarıdaki örnek gibi olması için tablonun özellikleri üzerinde değişiklik yapmamız gerekir. diyerek tabloya siyah renkli kenar çizgisi verelim. Hücre çizgileri arasındaki boşluk 0, hücre ile içindeki nesneler arasındaki boşluk da 1 olsun. Genişliğini de 500 piksel olarak belirtelim. Hücreler için genişlik belirtmediğimizden sütunların genişlikleri farklı görünecektir. “Width” etiketiyle hücrelere uygun genişlikleri verdiğimizde istediğimiz görüntüye ulaşabiliriz.

17 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Resim Ekleme "images" klasörü içerisinde resim1.jpg adlı dosyayı sayfamıza eklemek istediğimizi varsayalım. Bunun için aşağıdaki kod yazılmalıdır: (Yukarıdaki kodda “src” klasörün adresini, “width” genişliğini, “height” yüksekliğini, “hspace” resim ile çevresindeki nesneler arasında bırakılacak yatay boşluğu, “vspace” resim ile çevresindeki nesneler arasında bırakılacak dikey boşluğu, “border” resme verilecek kenar çizgisinin kalınlığını, “align” resmin sayfada hizalanacağı konumu belirtmektedir.)

18 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Sonuç:

19 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Çerçeve Oluşturma Yukarıdaki görüntüyü oluşturmak için aşağıdaki kodlar kullanılmalıdır:

20 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı CSS CSS web sayfasını biçimlendirmede HTML den daha geniş imkânlar sunar. Örneğin div etiketiyle bir katman oluşturabiliriz ama hizalama dışında başka bir özelliğini değiştiremeyiz. Ancak CSS ile katmanın sayfa içindeki konumu, arka plan rengi, kenarlık tipi, yazı rengi, kanlınlığı vb. pek çok özelliğini belirleyebiliriz.

21 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı CSS kullanım şekilleri Style komutlarını üç yerde tutabiliriz: Ayrı bir metin dosyası olarak: Bu durumda head bölümüne CSS dosyasına bağlantı kurulur. ( gibi) CSS kodlarını doğrudan head bölümüne yerleştirebiliriz. Örnek: P {font-family:arial; font-size:12px;}.... CSS kodlarını HTML etiketlerinin içine yerleştirebiliriz. Örnek:...

22 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Style komutları sadece bir yerde kullanılacaksa doğrudan etiket içinde kullanılması uygun olur. Ancak pek çok yerde aynı style özellikleri kullanılacaksa, tekrardan kaçınmak için şu metodlar kullanılabilir. Sınıf (class) tanımlanabilir: Style dosyasında etiket isminden ve. dan sonra sınıf adı yazılır ve {} işaretleri arasına style komutları yazılır. span.vurgulu {color:red; background-color:yellow;} Sayfa içinde kullanımı da aşağıdaki gibi olur: Cümlede burası çok önemli. Görünüm aşağıdaki gibi olur.

23 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı id tanımlanabilir: Yukarıdaki gibidir. Ancak. yerine # kullanılır ve bir etiket ile ilişkilendirilmesi gerekmez. #vurgulu {color:red; background-color:yellow;} Cümlede burası çok önemli. Bir etikettin tümü aynı özelliklere sahip olsun istiyorsak id ve class kullanmadan doğrudan etiketi yazabiliriz. b {font-family: arial; font-size: 9pt; font-weight: bold; color: blue;} Bu durumda bütün etiketi içerisindeki metinlerin yazıtipi mavi, boyutu 9 punto, kalın ve rengi mavi olacaktır.

24 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Başlıca CSS Komutları

25 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı BİÇİMLENDİRME font-familyTahoma, Comic Sans MS vs. Yazı tipini belirler.(Arial, Verdana gibi.) font-stylenormal italic oblique Yazının normal veya sağa eğik olmasını sağlar. font-variantnormal small-caps Yazının, yazıldığı gibi veya tümünün büyük harflerden oluşmuş gibi görünmesini sağlar. İkinci durumda metnin ilk harfi de boyut olarak büyük gözükür. font-weightnormal bold bolder lighter Yazının kalınlık-inceliğini belirler. font-sizeabsolute-size (xx-small | x- small | small | medium | large | x-large | xx-large) relative-size (larger | smaller) px, pt, % Yazının büyüklüğünü

26 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı METİN Word Spacingnormal | Sözcük aralığı Letter Spacingnormal | Harf aralığı Text Decorationnone | underline | overline | line-through | blink Metin süsleme Vertical Alignmentbaseline | sub | super | top | text-top | middle | bottom | text-bottom | Yüzde:200% vb. Dikey hizalama Text Transformationnone | capitalize | uppercase | lowercase Metin dönüştürme Text Alignmentleft | right | center | justify Metin hizalama Text IndentationBoyut | YüzdeMetin girintisi Line Heightnormal | | | Satır yüksekliği

27 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı RENK VE ARKAPLAN ColorRenk adı veya RGB değeri (red veya #FF0000 gibi) Renk Background ColorRenk adı | RGB değeri (red veya #FF0000 gibi) | transparent Arka plan rengi Background Imageurl(images/resimadi.gif)Arka plana yerleştirilecek resmin adresi Background Repeatrepeat | repeat-x | repeat-y | no-repeat Arka plan resminin hangi yönde tekrarlanacağını belirler. Background Attachmentscroll | fixedSayfa kaydırma çubuğuyla hareket ettirildiğinde zeminin de hareket edip etmeyeceğini belirler. Background Positionyüzde | boyut | top | center | bottom| left | center | right Zemindeki resmin sayfa üzerinde istenilen yere yerleştirilmesini sağlar.

28 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı KUTU ÖZELLİKLERİ MarginSayısal değer.Nesnenin dışındaki nesnelere olan aralığını belirler. PaddingSayısal değer.Doldurma Border WidthSayısal değer.Kenarlık genişliği (kalınlığı) Border ColorRenk adı | RGB değeriKenarlık rengi Border Stylenone | dotted | dashed | solid | double | groove | ridge | inset | outset Kenarlık stili Borderborder-width | border-style | border-color Kenarlık kalınlık, style ve rengi. Widthboyut | yüzde | autoGenişlik Heightboyut | autoYükseklik

29 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı LİSTE ÖZELLİKLERİ List Style Typedisc | circle | square | decimal | lower-roman | upper-roman | lower- alpha | upper-alpha | none Listenin harflerden mi yoksa sayılardan mı oluşacağını belirler. List Style Imageadres | none (list-style- image: url(images/maddeimi.gi f) gibi.) Liste simgesi olarak resim kullanılmasını sağlar. List Style Positioninside | outsideListenin ilk satırının diğer satırlar aynı hizada olup olmayacağını belirler. List Stylelist-style-type | list- style-position| adres (list-style: lower-roman inside gibi.)

30 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Örnek Uygulamalar

31 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı a:link { font-family:tahoma; font-size:9pt; color:blue; text-decoration:none; } Sayfamdaki linklerin 1.Yazıtipi tahoma 2.Yazı boyutu 9 punto 3.Rengi mavi olsun ve 4.Altı çizili de olmasın. a:hover{ font-family:tahoma; font-size:9pt; color:red; text-decoration:none; } Üzerine gelindiğinde linklerin 1.Yazıtipi tahoma 2.Yazı boyutu 9 punto 3.Rengi kırmızı olsun ve 4.Altı çizili de olmasın. a:visited{ font-family:tahoma; font-size:9pt; color:grey; text-decoration:underline; } Ziyaret edilen linklerin ise 1.Yazıtipi tahoma 2.Yazı boyutu 9 punto 3.Rengi gri olsun ve 4.Altı da çizili olsun. Alt çizgisi olmayan linkler

32 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Katman

33 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı

34 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı AÇIKLAMA: Burada: Position: Katmanın yerinin neye göre belirleneceğini (absolute, pencere esas alınarak belirlensin), Top: Pencereye göre kaç piksel aşağıda olacağını, Left: Pencereye göre kaç piksel solda olacağını, Width: Katmanın genişliğini, Height: Katmanın yüksekliğini, Background-color: Arkaplan rengini, Overflow: Taşan metnin durumunun ne olacağını (hidden, gizli kalsın, gösterilmesin), Z-index: Üstüste geldiğinde hangi sıra ile yerleştirileceğini (1. katmana 1 değeri verilmiştir, dolayısıyla en altta o gösterilecektir), Padding: Katmanın kenar çizgileri ile içindeki nesneler arasında bırakılacak boşluğu, Border: Kenar çizgilerinin kalınlık, kenarlık türü ve rengini belirtmektedir.

35 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Liste

36 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı AÇIKLAMA: "list-style-image" parametresi listeye HTML ile veremeyeceğimiz bir özellik kazandırmakta ve liste simgesi olarak bir resmi kullanmamızı sağlamaktadır. "list-style" parametresi için verilebilecek alternatif değerler ise şunlardır: disc (Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.) circle (Liste biçiminin çember şeklinde olmasını sağlar.) square (Liste biçiminin kare olmasını sağlar.) decimal (Liste biçiminin rakamlardan oluşmasını sağlar.) lower-roman (Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.) upper-roman (Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.) lower-alpha (Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.) upper-alpha (Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.) none (Listenin simgesiz olmasını sağlar.)

37 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı WEB PROGRAMLAMA DİLLERİ İnternette yaygın olarak kullanılan iki dil vardır. Javascript ve VBScript. Bunların kullanım alanları da ikiye ayrılabilir: İstemci üzerinde veya sunucu üzerinde çalışmaları. İstemci üzerinde çalıştığında kodlar genelde sayfanın bölümüne etiketleri içine yazılır. Sunucu üzerinde çalışmaları ise ASP veya PHP ile olabilir. Örneğin ASP de script kodları işaretleri arasına yazılır ve sunucu tarafında çalışarak sonucu sayfa üzerinde istemciye ulaştırır.

38 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı WEB TASARIM PROGRAMLARI Web tasarım programları görsel ve kod tabanlı olarak ayrılabilir. GÖRSEL: WYSIWYG (What you see is what you get / Ne görürseniz onu alırsınız) olarak nitelendirilen bu tür programlarda kullanıcı kendisi HTML kodu yazmaz, sayfa web browser’daki gibi görüntülenir, kullanıcılar Word’de yazı yazar gibi sayfayı oluştururlar, HTML kodları program tarafından oluşturulur. Bu tür programlara Microsoft Frontpage, Macromedia Dreamweaver vs. örnek verilebilir. (Bu programlar çoğu zaman kod tabanlı programların yeteneklerine de sahip olabilir.)

39 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Dreamweaver FrontPage

40 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı KOD TABANLI: Kullanıcının kod yazarak sayfayı oluşturduğu programlardır. Macromedia HomeSite, HotDog Pro vb. Bu tür programlar genelde PHP, ASP, VBScript gibi dilleri otomatik tanırlar ve kod tamamlamayı önerme özelliklerine sahiptirler.

41 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Homesite Hotdog Professional

42 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı DREAMWEAVER

43 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Site tanımlamak Site menüsünden New site'ye tıklanır. Site name başlıklı metin kutusuna sitenin adı yazılır. Local root folder başlıklı metin kutusuna sitenin yolu yazılır. (Bunun için simgesi kullanılabilir.) Default images folder başlıklı metin kutusuna resimlerin konulacağı klasör yazılır. İsteğe bağlı olarak da diğer bölümler doldurulabilir. Bundan sonra oluşturduğumuz her sayfa varsayılan olarak buraya kaydedilir.

44 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı

45 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Sitenin bulunuduğu klasörün dizin yapısını Window / Files (F8) menüsüne tıklayarak görebiliriz. Böylece istediğimiz dosyaya kolayca ulaşabilir, internete göndermeyi kolaylaştırabilirsiniz. Yeni dosya oluşturmayı da Dosya / New menüsünden veya site haritasına sağ tuş / New File menüsüne tıklayarak yapabiliriz. NOT: Dosyalara isim verirken aşağıdakilere dikkat edilmelidir: Dosyanın adı ve uzantısı küçük harflerden oluşmalı ve link verirken aynen, olduğu gibi yazılmalıdır. (resim.jpg ile resim.JPG linux server'lar için farklı dosyalardır ve olduğundan farklı yazıldığında doğru görüntülenmez.) Türkçe karakterler kullanılmamalıdır. (ı, İ, ş, ç, ğ, ö, ü) Kelimeler arasında boşluk birakılmamalıdır. (Boşlukların alt tire ile doldurulması gelenek halini almıştır. "resim adi.jpg" yerine "resim_adi.jpg" yazılabilir.)

46 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Dökuman özelliklerini ayarlamak Oluşturulan sayfanın özelliklerini değiştirmek için Modify/Page Properties (Ctrl+J) kullanılabilir.

47 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Appearance bölümünde şu özellikleri değiştirebiliriz: Page Font: Sayfada kullanılacak yazıtipi. Size: Yazının boyutu. Text Color: Yazı rengi. Background color: Arkaplan rengi. Background image: Arkaplana yerleştirilecek resim. Repeat: Arkaplan resminin hangi yönde tekrarlanacağı. Left Margin: Sayfa içindeki nesnelerin sol kenara uzaklığı. Right Margin: Sayfa içindeki nesnelerin sağl kenara uzaklığı. Top Margin: Sayfa içindeki nesnelerin üst kenara uzaklığı. Bottom Margin: Sayfa içindeki nesnelerin alt kenara uzaklığı.

48 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Links bölümünde şu özellikleri değiştirebiliriz: Link font: Sayfadaki köprülerin yazıtipi. Size: Sayfadaki köprülerin yazı boyutu. Link color: Sayfadaki köprülerin rengi. Rollover links: Fare ile üzerine gelindiğinde köprünün yazı rengi. Visited links: Ziyaret edilen sayfaları ait köprünün yazı rengi. Active links: Üzerine tıklandığında köprünün yazı rengi. Underline style: Köprünün alt çizgisinin olup olmayacağı.

49 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Headings bölümünde başlıkların yazıtipi, boyut ve renkleri belirlenir.

50 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Title/Encoding bölümünde şu özellikleri değiştirebiliriz: 1.Title: Sayfanın başlık çubuğunda görüntelecek metin. 2.Document Type: Belge türü. 3.Encoding: Dil kodlaması.

51 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Tracing Image bölümünde şu özellikleri değiştirebiliriz: 1.Tracing image: Sadece dreamweaver içerisinde görünen ve tarayıcı içerisinde görünmeyen bir resim ekler. 2.Transparancey: Bu resmin saydamlık ayarlarını yapar.

52 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Metin Biçimlendirme Seçili metnin özelliklerini değiştirmek için Window/Properties (Ctrl+F3) kullanılır. Burada şu özellikler değiştirilebilir: Format: Seçili metnin başlık veya normal paragraf olacağı. Font: Yazıtipi Style: Önceden style tanımlanmışsa seçili metnin id'si veya mensup olduğu sınıf (class). Size: Boyutu. Link: Metne verilecek köprü. (Köprü oluşturmayı metni seçtikten sonra simgesine tıklayıp hedef dosyayı göstererek veya simgesini Files panelindeki hedef dosya üzerine sürükleyip bırakarak yapabiliriz.) Target: Hedef sayfanın ne şekilde açılacağı. (Yeni sayfada, ana çerçevede, kendisinin bulunduğu çerçevede vs.) : Metin hizalama (Sol, orta, sağ, iki yana yaslı) : Madde işareti, numaralandırma, girinti artır ve girinti azalt. : Kalın, italik. :Yazı rengi.

53 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Çerçeve Çerçeveler: Çerçeveler aynı kodları her sayfada tekrarlamaktan bizi kurtarır. Çerçeve sayfası gerçekte iki bölümden oluşur. Ana sayfa ve çerçeveler. Ana sayfa çerçeve bilgilerinin tutulduğu sayfadır. Çerçeve sayısı kadar bölümlere ayrılır ve her bölümde ilgili sayfa gösterilir. Çerçeve Oluşturmak: Çerçeve oluşturmak için File/New/Framesets menüsünü kullanabiliriz. Açılan pencerede nasıl bir çerçeve oluşturabileceğimize yönelik bazı kalıplar sunulur. Burdan istediğimizi seçerek çerçevellerin oluşmasını sağlayabiliriz.

54 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı

55 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Var olan bir sayafaya çerçeve eklemek için ise Insert Araç Çubuğunda Layout seçilir. simgesine tıklanarak istenilen çerçeve seçilir.

56 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Çerçeveler Üzerinde Düzenleme Yapmak: Oluşturulan çerçevenin genişliklerini değiştirmek için çerçeve çizgilerini istediğimiz yöne çekebiliriz. ( ) Çerçevelerle ilgili ayrıntılı ayarlar için Window/Frames menüsünde açabileceğimiz Frames Paneli kullanılabilir.

57 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Panel üzerinde hangi çerçeve üzerine tıklarsak Properties panelinde o çerçeve ile ilgili ayarlar açılacaktır. Eğer görünmeyen ana sayfa (frameset) üzerinde düzenleme yapmak istiyorsak dış çizgiye tıklamamız gerekir. Aynı işlem düzenleme yaptığımız alanda da yapılabilir.

58 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı 1.Border: Kenarlığın olup olmayacağı (Yes, No, Default) 2.Border width: Kenar kalınlığı 3.Border color: Kenarlık rengi 4.Row: Üst çerçevenin yüksekliği (Örnekte ekranın 80 pikselini üst çerçeve, geri kalanını da alt çerçeveler kaplamaktadır.) Ana çerçeve seçili olduğunda Properties panelinde yapılabilecek düzenlemeler şunlardır:

59 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Diğer çerçevelerden herhangi birisini seçtiğimizde yapabileceğimiz düzenlemeler de şunlardır: Src: Çerçevenin adresi. Scroll: Kaydırmanın olup olmayacağı. (Yes, No, Auto, Default) Yes seçili olduğunda kaydırma çubukları her zaman görüntülenir, No seçili olduğunda kaydırma çubukları hiç bir zaman görüntülenmez, Auto olduğunda içerik taşarsa kaydırma çubuğu görüntülenir, yoksa görüntülenmez.) Borders: Kenar çizgisisinin olup olmayacağı (Default, Yes, No). Border color: Kenar çizginin rengi. No resize: Boyutlandırmanın yapılıp yapılamayacağı. Margin width: Çerçeve içindeki nesnelerin sol kenara uzaklığı. Margin height: Çerçeve içindeki nesnelerin üst kenara uzaklığı.

60 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı NOT: Herhangi bir çerçevede oluşturulan köprünün belirli bir çerçevede açılmasını istiyorsak iki yol tutabiliriz: 1.Köprü seçili durumdayken Properties panelinde, Target başlıklı açılır kutudan hedef çerçevenin adı seçilir. 2.Sayfanın... bölümüne kodunu eklemek. Böylece aksi belirtilmedikçe varsayılan hedef çerçevenin hangisi olacağı belirtilmiş olur. Bun da Insert/Tag/Page Composition/Base yolu takip edilerek yapılabilir.

61 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Nesne eklemek

62 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Liste Üç tür listeden söz edilebilir: Sıralı Liste (Numaralandırma) Sırasız Liste (Madde İşareti) Tanımlama Listesi.

63 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Sıralı Liste (Numaralandırma) Sıralı liste oluşturmak için Text/List/Ordered List menüsü veya Properties panelindeki ( ) simgesi kullanılabilir. Alt maddeler oluşturmak için ( ) simgesine tıklanır. Yeniden üst maddeden devam etmek için de ( ) simgesine tıklarız. Oluşturulan listenin özelliklerini Window/Tag Inspector panelinden değiştirebiliriz. Properties panelinin üzerinde, üzerinde çalıştığımız metnin etiketlri sıralanır. Buradan sıralı listeyi ifade eden etiketine tıkladığımızda Tag Inspector panelinde liste ile ilgili ayarlara ulaşırız.

64 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Compact: Listenin daha az yer kaplamasını sağlar. Type: Listenin türünü belirler. (A, a, I, i, 1) Start: Listenin hangi karakterden başlayacağı. etiketini seçili hale getirdiğimizde Tag Inspector panelinde seçili liste öğesi ile ilgili ayarlara ulaşırız.

65 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı etiketini seçili hale getirdiğimizde Tag Inspector panelinde seçili liste öğesi ile ilgili ayarlara ulaşırız.

66 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Sırasız Liste (Madde İşareti) Madde İşareti oluşturmak için Text/List/Unordered List menüsü veya Properties panelindeki simgesi kullanılabilir. etiketine tıkladığımızda Tag Inspector panelinde liste ile ilgili ayarlara ulaşırız. Type parametresi; circle ( ), disc ( ), square ( ) değerlerini alabilir.

67 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Tanımlama Listesi Bunun için Text/List/Definition menüsü kullanılabilir. Bu liste türü örneğin bir kavramı açıklarken kullanılabilir. Açıklanacak kavramı yazdıktan sonra Enter tuşuna bastığımızda metin bir miktar sağa kaydırılacak ve tanım için bir bölüm oluşturulacaktır. Yeniden Enter tuşuna bastığımızda ise metin yeni tanım için sola kaydırılacaktır.

68 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Tablo Tablo eklemek için Insert/Table menüsünü veya ( ) simgesini kullanabiliriz.

69 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Burada belirleyebileceğimiz tablo özellikleri şunlardır: Rows: Satır sayısı. Columns: Sütun sayısı. Table width: Tablonun piksel veya yüzde olarak genişliği. Border thickness: Kenarlık kalınlığı. Cell padding: Hücrenin içindeki nesnelerle hücre çizgisi arasında bırakılacak boşluk. Cell spacing: Hücre çizgileri arasında bırakılacak boşluk. Header: Başlık metni içeren hücrelerin hangileri olacağı. Burada belirlenen hücreler varsayılan olarak kalın ve ortaya hizalanmış olarak görüntülenir. Caption: Başlık. Buraya yazılan metin tablonun üstünde görünür. Align caption: Başlığın nereye hizalanacağı. Summary: Özet.

70 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Tablo üzerinde ayrıntılı ayarlar için Properties'i kullanabiliriz. Tabloda herhangi bir hücrenin içine tıkladığımızda Properties panelinin üzerinde; seçili hücre, hücrenin bulunduğu satır ve tablonun kodları görünür. Buradaki komutuna tıklayarak tabloyu seçili hale getirdiğimizde yeni özelliklere ulaşabilir, yukarıdakilerden farklı olarak: 1.Tabloya sınıf (class) veya id atayabilir, 2.Tablonun sayfada nasıl hizalanacağını (Align), 3.Arkaplan rengini (Bg color), 4.Arkaplana yerleştirilecek resmi ( Bg Image) 5.Kenarlık rengini (Brdr color) belirleyebiliriz.

71 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Soldaki simgeler ile de önceden belirlenmiş satır yükseklik ve sütun genişlik değerlerini temizleyebilir, piksel ile belirlenen değerleri yüzdeye, yüzde ile belirlenen değerleri piksele çevirebiliriz.

72 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı İstediğimiz hücreyi seçili hale getirdiğimizde ise Properties panelinin görünümü yukarıdaki gibi olur. Burada: 1.Horz: Yatay hizalama, 2.Vert: Dikey hizalama, 3.W: Hücrenin genişliği, 4.H: Hücrenin yüksekiği, 5.No wrap: Metin kaydırma yapılıp yapılmayacağı, 6.Header: Hücrenin başlık hücresi olup olmaycağı, 7.Bg (Üstte): Arkaplan resmi, 8.Bg (Altta): Arkaplan rengi, 9.Brdr: Kenar çizgilerinin rengi belirlenebilir. simgesi ile seçili hücreler birleştirilebilir (veya sağ tuş/Table/Merge Cells ile), simgesi ile de hücre sütun veya satırlara bölünebilir (veya sağ tuş/Table/Split Cells ile).

73 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı NOT: Commands/Format Table ile otomatik tablo biçimi uygulayabilirsiniz.

74 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Resim Sayfamıza resim eklemek için Insert/Image(Ctrl+Alt+I) veya Common araç çubuğundaki simgesini ( ) kullanabiliriz. Eklenen resmin özelliklerin değiştirmek için resme tıklayarak seçili hale getirmemiz gerekir. Bu durumda Properties paneli açılacaktır.

75 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Burada resimle ilgili şu değişiklikler yapılabilir. Soldaki başlıksız ilk metin kutusu resme isim vermek için kullanılır. W: Resmin genişliği. H: Resmin yüksekliği. Src: Resmin adresi. Link: Resme köprü verilecekse hedef dosyanın adresi. Alt: Fare ile resmin üzerine gelindiğinde görüntülenecek metin. Class: Resmin style'de tanımlanan sınıfı. Edit ( ) : Burada sırasıyla; seçili resmi Fireworks ile düzenle, Fireworks ile optimize et, Kırp, Yeniden örneklendir, Parlaklık ve karşıtlık, Keskinleştirme işlemleri yapılabilir. V Space: Resmin sağ ve sol kenarlarıyla çevresindeki nesneler uzaklığı. H Space: Resmin üst ve alt kenarlarıyla çevresindeki nesneler uzaklığı. Target: Resme link verilmişse açılacak sayfanın ne şekilde açılacağı (Yeni pencerede vs.) Low Src: Resim yüklenene kadar yerine konacak küçük resim. Border: Resmin kenar çizgisinin kalınlığı. Align: Resmin nereye hizalanacağı (Sola, sağa, üste, alta, ortaya vb.) ( ): Resmin nereye hizalanacağı. (Sola, ortaya, sağa. Bunun yukarıdakinden farkı burada metin kaydırma yapılmamasıdır.) Map: Resmi sanal parçalara bölerek herbiri için ayrı link verme vb. işler için kullanılır.

76 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Köprü Linkleri (köprü) dört gruba ayırabiliriz: 1.Sitemizdeki başka bir dosyaya oluşturulan linkler. 2.Aynı sayfa içinde başka bir satıra oluşturulan linkler. 3.Sitemizin dışındaki başka bir web adresine oluşturulan linkler. 4.Mail gönderilmesi için oluşturulan linkler. Sitemizdeki başka bir dosyaya köprü oluşturmak: Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusunda hedef dosya belirtilir. (Köprü oluşturmayı simgesini Files panelindeki hedef dosya üzerine sürükleyip bırakarak ya da simgesine tıklayıp hedef dosyayı seçerek de yapabiliriz.)

77 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Aynı sayfa içinde başka bir satıra köprü oluşturmak: Bunun için önce köpriye tıklandığında gidilecek satıra yer işareti olurturmamız gerekir. Hedef satıra gidip, Common araç çubuğundaki simgesine tıklayarak çıkan iletişim kutusunda işarete bir isim verdiğimizde imlecin bulunduğu yerde bir yer işareti oluşturmuş oluruz. Bundan sonra köprü verilecek metni seçerek Properties panelinde Link başlıklı metin kutusuna # işaretinden sonra, yer işaretine verdiğimiz ismi yazarız. (Köprü oluşturmayı simgesini yer işareti üzerinde sürükleyip bırakarak da yapabiliriz.) Sitemizin dışındaki başka bir web adresine köprü oluşturmak: Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusunda hedef dosya yada web sitesinin adresi belirtilir.

78 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Mail gönderilmesi için köprü oluşturmak: Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusuna başına "mailto:" getirilerek hedef mail adresi yazılır. NOTLAR: Başka bir dosyaya link oluşturmayı Common araç çubuğundaki simgesine tıklayarak da yapabiliriz. Burada text köprü oluşturulacak metni; link, hedef dosyayı; target, hedef dosyanın nerede açılacağını; title, fare ile üzerine geldiğimizde görüntülenecek metni; Access Key, alt+klavyeden bir tuş'a basılıp enter'a basıldığında bizi hedef dosyaya götürecek kısayol harfini; Tab index, tab tuşuna ardarda bastığımızda kaçıncı sırada seçili köprüye odaklanılacağını belirler.

79 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Mail göndermek için köprü oluşturmayı Common araç çubuğundaki simgesine tıklayarak da yapabiliriz. Target parametresinin beş değeri vardır: a._blank: Hedef dosyayı yeni bir pencerede açar. b._parent: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın herhangi bir çerçevede değil ana pencerede açılmasını sağlar. c._self: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın köprünün bulunduğu çerçevede açılmasını sağlar. d._top: Yer işareti oluşturmadan sayfayı, sayfanın en üstüne kaydırmayı sağlar. e._cerceveadi: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın adı verilen çerçevede açılmasını sağlar. ("cerceveadi", çerçeve oluştururken, çerçeveye verdiğimiz isimdir.)

80 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Hedef dosyayı gösterirken adres göstermeyi iki şekilde yapabiliriz: Mutlak ve göreceli. Yukarıdaki köprüde hedef sayfanın tam adresi verilmiştir. Yukarıdaki köprüde ise hedef sayfanın adresi göreceli olarak verilmiştir. Yukarıdaki köprü ile browser'a şu anlatılmaktadır: Açılacak hedef dosya, şu an açık olan dosyanın bulunduğu yerde bulunan "dosyalar" klasörünün içindeki "hedefdosya.htm" adlı dosyadır. "../" ise bir üst klasörü ifade eder. "../dosyalar/hedefdosya.htm" anlamı ise şudur: Açılacak hedef dosya, şu an açık olan dosyanın bulunduğu yerden bir üst klasörde bulunan "dosyalar" klasörünün içindeki "hedefdosya.htm" adlı dosyadır.

81 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Flash Nesnesi Sayfamıza flash nesnesi eklemek için Insert/Media menüsünü kullanabiliriz. Burada 6 seçenek kullanılabilir: Flash: Sayfaya flash dosyası (*.swf) ekler. Image Viewer: Flash web albümü oluşturur. Flash Text: Sayfaya hazır Macromedia Flash yazısı ekler. Flash Button: Sayfaya hazır Macromedia Flash butonu ekler. Flash Papper: Sayfaya.swf uzantlı flash paper ekler. Flash Video: Sayfaya.flv uzantlı flash video ekler.

82 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Sayfaya flash eklemek Insert/Media/Flash menüsüne tıklanarak.swf uzantılı dosyanın yolu gösterilir. Seçili hale getirdiğimizde açılan Properties panelinden flash nesnesinin özelliklerini değiştirebiliriz. W: Genişlik, H: Yükseklik, File: Flash dosyasının (.swf) adresi, Src: Kaynak dosyasının (.fla) adresi. Edit: Düzenle, Reset Size: Boyutu sıfırla, Class: Mensup olduğu style dosyasında tanımlanan sınıf adı. Loop: Bittiğinde yeniden oynat, Autoplay: Otomatik oynat. V Space: Flash dosyasının sağ ve sol kenarları ile çevresindeki nesneler arasında bırakılacak boşluk, H Space: Flash dosyasınınüst ve alt kenarları ile çevresindeki nesneler arasında bırakılacak boşluk, Quality: Görüntü kalitesi, Scale: Ölçek, Align: Hizalama, Bg: Arkaplan rengi, Play: Çalıştır

83 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Image Viewer Eklemek Insert/Media/Flash Image Viewer menüsüne tıklanır ve dosyaya ad verilerek kaydedileceği yer gösterilir. Sağda otomatik açılan Flash Element panelinde imgURLs ile slayt oluşturulacak resimler gösterilir. Yine aynı panel üzerinde showControls ile ileri, geri vb. kontrol düğmelerinin görüntülenip görüntülenmeyeceği, slideAutoPlay ile otomatik çalıştırılıp çalıştırılmayacağı, slideDelay ile resimler arasındaki gecikme, slideLoop ile gösteri bittiğinde baştan yeniden gösterilip gösterilmeyeceği vb. özellikler belirlenebilir.

84 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Flash Text eklemek Insert/Media/Flash Text menüsüne tıklanır. Çıkan iletişim kutusunda yazı tipi, boyutu, rengi, üzerine gelince alacağı renk, metin, tıklanınca gidilecek hedef dosyanın adresi, hedef dosyanın nerede açılacağı, arkaplan rengi, oluşturulacak dosyanın adı vb. özellikleri belirtiriz. Sonuçta oluşacak flash metin aşağıdaki gibi olacaktır.

85 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Flash Button eklemek Insert/Media/Flash Button menüsüne tıklanır. Burada butonun sitili, buton üzerinde görüntülenecek metin, yazıtipi, yazı boyutu, tıklanınca açılacak hedef dosyanın adresi, hedef dosyanın nerede açılacağı, arkaplan rengi, hangi dosya adıyla kaydedileceği belirtilir.

86 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Flash Paper Eklemek Insert/Media/FlashPaper menüsüne tıklanır. Flash dosyasının adresi, yükseklik ve genişliği belirtilir.

87 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Flash Video Eklemek Insert/Media/Flash Video menüsüne tıklanır. Burada video türü, videonun adresi, kullanılacak skin, videonun genişlik ve yüksekliği, boyutları orjinalinden farklı yazılacaksa boyutların orantılı olarak değiştirilip değiştirilmeyeceği, otomatik çalma, otomatik geri sarma işlemlerinin yapılıp yapılmayacağı belirtilir. NOT: Flv uzantılı flash video oluşturmak için Flash 8 Video Encoder kullanılabilir.

88 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Video Eklemek Sayfamıza avi, mpg vs. uzantılarında video dosyaları eklemek için Insert/Media/Plugin menüsüne tıklanır ve video dosyası seçilerek OK tuşuna basılır. Sayfamızda şeklinde bir simge oluşacaktır. Bu simgesi seçili hale getirerek Properties veya Window/Tag Inspector panelinden özelliklerini belirleyebiliriz. Buradaki değerler sayfaya ses eklemek ile aynı olduğundan parametrelerin açıklamaları için ses ekleme slaydına bakılabilir.

89 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Ses Eklemek Window/Behaviors menüsüne tıklanırve açılan Tag/Behaviors panelinde aşağıdaki işlemler yapılır: + işaretine tıklanır, Açılan menüde Play Sound'da basılır. Browse tuşuna basılarak ses dosyasını adresi belirtilir. Sayfa üzerinde şeklinde bir simge belirecektir. Aslında bu bilgisayarımızda yüklü olan varsayılan video oynatıcıdır (Genelde de Windows Media Player). Bu nesneyi seçili hale getirerek aşağıdaki özelliklerini değiştirebiliriz: W: Nesnenin genişliği. H: Nesnenin yüksekliği (0 değeri nesnenin sayfada görünmemesini sağlayacaktır). Src: Ses dosyasının adresi. Plg URL: İlgili plugin'in download adresi. Align: Hizalama Class: Mensup olduğu, style dosyasında oluşturulan sınıf adı. Play: Çalıştır. Border: Çerçeve kalınlığı.

90 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Parameters tuşuna basarak diğer bazı özelliklere de ulaşabiliriz Loop: Bitince yeniden başlatılıp başlatılmayacağı. Autostart: Otomatik çalıştırılıp çalıştırılmayacağı. Hidden: Gizli veya görünür olup olmayacağı. Aynı özelliklere Window/Tag Inspector panelinden de ulaşılabilir.

91 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Image Map Eklemek İmage Map, resmin istenilen bölümlerine köprü oluşturmak için kullanılır. Yukarıdaki resimde hangi tuşa basılırsa, o tuşun işlevlerinin anlatıldığı sayfaya gidilsin istediğimizi varsayalım. Resmi seçili hale getirdiğimizde Properties paneli açılacaktır. Image map oluşturmak için buradaki Map bölümünü kullanırız.

92 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Örneğimizde klavye tuşlarına köprü verileceğimiz için biz kare işaretleme aracını kullanacağız. simgesine tıkladıktan sonra resimde istediğimiz bölümü işaretleriz. İşaretlenmiş alana link vermek için, o alanı seçili hale getirdikten sonra Properties panelinde link başlıklı metin kutusuna hedef dosyanın adresi yazılır.

93 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Kayan Yazı Eklemek Insert/Tag menüsüne tıklanır. Çıkan pencerede sırasıyla HTML Tags, Page Elements, Marguee, Insert'e tıklanır. Code görünümünde etiketleri arasına istediğimiz metin yazılır. Özellikleri üzerindeki değişiklikleri, Window/Inpector'a tıklayarak açabileceğimiz Tag paneli üzerinden yapabiliriz. Burada değiştirebileceğimiz bazı özellikler şunlardır: Scrollamount: Yazının bir defada kaç piksel hareket edeceği. ScrollDelay: Yazının her bir hareketi arasında kaç milisaniye bekleneceği. Direction: Kayma yönü (Yukarı, aşağı, sağa, sola) Widht: Kayan yazı bloğunun genişliği. Height : Kayan yazı bloğunun genişliği. Loop: Kaç defa tekrarlanacağı. Varsayılan sürekli tekrarlanmasıdır. Behavior: Hareket şekli (Scroll seçildiğinde yazı, sınırın bir köşesinden belirerir, diğer köşeden kayarak kaybolur, Slide seçildiğinde yazı bir köşeden başlayarak diğer köşede donar, Alternate seçildiğinde ise metin iki köşe arasında gidip gelir.)

94 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı CSS Style ile ilgili işlemler için Window/CSS Styles menüsünden CSS panelini kullanabiliriz. Daha önceden style dosyası oluşturulmuşsa, oluşturulan dosyadaki kodların geçerli sayfa için de geçerli olması için sayfamıza eklememiz gerekir. Bunun için simgesine tıklar ve açılan iletişim kutusunda dosyanın adresini belirtiriz.

95 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Yeni bir style dosyası oluşturmak için ise simgesine tıklarız. Bu durumda aşağıdaki iletişim kutusu açılacaktır. Burada "Selector Type" bölümünde class veya id seçicilerinin mi kullanılacağı, yoksa bir etiket için mi style tanımlamaları yapılacağını seçeriz. Class seçildiğinde bizden sınıf adı, Tag seçildiğinde style tanımlamaları yapılacak etiketin adı, Advanced seçildiğinde ise id adı istenir. "Define in" ile ise yeni bir style dosyasında mı yoksa geçerli sayfada mı style tanımlamalarının yapılacağı belirtilir. Yeni style dosyası oluşturmak için (New Style Sheet File) seçilir. Çıkan iletişim kutusunda dosya adı yazılarak kaydedilir.

96 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Sonraki adımda oluşturduğumuz style için ayarları yapabileceğimiz bir pencere açılacaktır. Burada istediğimiz değişiklikleri yapıp OK tuşuna bastğımızda CSS panelinde oluşturduğumuz tanımlamalar görünecektir.

97 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Artık oluşturduğumuz style tanımlamasını sayfada kullanabiliriz. Bunun için istenilen metin seçilir ve Properties panelindeki "Style" bölümünden class adı seçilir.

98 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Şablon Kaydetme Gerçekte bir site oluştururken ilk yapmamız gereken bir arayüz, örnek bir sayfa hazırlamak olmalıdır. Sayfa tasarımı son haline gelince, yeni sayfalarda da aynı tasarımı kolayca kullanabilmek için şablon olarak kaydetmek gerekir. Ancak bunu yapmadan önce şablon olarak kaydedilecek sayfada düzenlenebilir alanlar oluşturmamız gerekir. Çünkü şablon olarak kaydettiğimizde düzenlenebilir alanlar dışındaki yerler düzenlenemez hale gelir. Bunun için imleci düzenlenebilir alan oluşturmak istediğimiz yere getirir ve Insert/Template Objects/Editable Region menüsüne tıklarız.

99 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Çıkan iletişim kutusunda düzenlenebilir alan alan için bir ad yazarız. Sonuçta sayfada aşağıdaki gibi bir alan oluşacaktır. Örneğimizde düzenlenebilir iki alan oluşturulmuştur: Başlı ve metnin yazılacağı iç tablo. İleride bu şablonu kullanarak bir sayfa oluşturduğumuzda sadece bu iki alan üzerinde değişiklik yapabileceğiz. Oluşturduğumuz şablonu File/Save As Template menüsü kullanarak kaydedebiliriz.

100 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Burada site tanımlanmışsa hangi site için şablon kaydedileceği, açıklaması ve şablonun adı bizden istenir. Daha önceden oluşturulan şablonlar da "Existing templates" bölümünde sıralanır. Kaydedilen şablon sitemizin bulunduğu klasöre Templates klasörü içine kaydedilir. Dreamweaver da ise Window/Assets panelinden şanlonlara ulaşabiliriz. Şablondan yeni bir sayfa oluşturmak için Window/Assets menüsünden ulaşabileceğimiz Assets panelinde gösterilen şablonumuza sağ tıklar ve çıkan menüden "New from Template" e tıklarız.

101 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Resimde görüldüğü gibi düzenlenebilir alanlara istediğimizi yazabiliyoruz, ancak diğer alanlar düzenlenememektedir. NOT: 1.Şablon üzerinde değişiklik yapıldığında o şablona bağlı tüm sayfalarda da aynı değişiklikler yapılır. 2.Oluşturulan düzenlenebilir alnı silmek için Modify/Templates/Remove Template Markup menüsünü kullanabiliriz. 3.Şablona bağlı bir sayfayı şablondan kurtarmak ve tümüyle düzenlenebilir hale getirmek için Modify/Templates/Detach From Template menüsü kullanılır.

102 Ankara T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı KAYNAKLAR: Macromedia Dreamweaver MX 2004, Khristine Annwn Page, Medyasoft,


"Ankara - 2006 T.C. MİLLÎ EĞİTİM BAKANLIĞI EĞİTİM TEKNOLOJİLERİ GENEL MÜDÜRLÜĞÜ Bilişim Teknolojileri Formatör Öğretmen Eğitimi Programı Bilişim Teknolojileri." indir ppt

Benzer bir sunumlar


Google Reklamları