BİLİŞİM TEKNOLOJİLERİ

Ebat: px
Şu sayfadan göstermeyi başlat:

Download "BİLİŞİM TEKNOLOJİLERİ"

Transkript

1 T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ GELİŞMİŞ İNTERNET UYGULAMALARINDA TASARIM ARAÇLARI 482BK0150 Ankara, 2012

2 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.

3 İÇİNDEKİLER 1. YERLEŞİM 1.1. StackPanel 1.2. Tuval (Canvas) 1.3. Grid 1.4. Border 2. FIRÇALAR 2.1. SolidColorBrush 2.2. LinearGradientBrush 2.3. RadialGradientBrush 2.4. ImageBrush 2.5. VideoBrush 3. GÖRSEL ÖZELLİKLER 3.1. Ölçü ve Yerleşim Özellikleri 3.2. Opacity 3.3. Cursor behaviors 3.4. Stroke 4. ŞEKİLLER 4.1. Elips (Ellipse) 4.2. Dikdörtgen (Rectangle) 4.3. Çizgi (Line) 4.4. Yol (Path) 4.5. Çoklu Geometrik Nesneler (GeometryGroup) 5. KONTROLLER 5.1. Tuval (Canvas) 5.2. Resim (Image) 5.3. Kabartma (Glyphs) 5.4. Metin Bloğu (TextBlock) 6. DÖNÜŞÜM VE ANİMASYON 6.1. Döndürme(RotateTransform) 6.2. Ölçeklendirme (ScaleTransform) 6.3. Dönüşüm (TranslateTransform) i

4 6.4. Çarpıtma (SkewTransform) 6.5. Matris (MatrixTransform) 6.6. Tetikleyiciler (Trigger ve Event Triggerlar) 6.7. Geçmiş (BeginStoryboard ve Storyboard) 6.8. Animasyon parametreleri 6.9. Anahtar Çerçeveler (Key Frame) ÖLÇME VE DEĞERLENDİRME: ii

5 KOD ALAN DAL/MESLEK AÇIKLAMALAR AÇIKLAMALAR 482BK0150 Bilişim Teknolojileri Veri Tabanı Programcısı MODÜLÜN ADI Gelişmiş İnternet Uygulamalarında Tasarım Araçları Tasarım özelliklerini düzenlemeyi, fırçaları kullanmayı, görsel özellikleri kullanarak uygulama geliştirmeyi, şekil işlemlerini MODÜLÜN TANIMI gerçekleştirmeyi, kontrolleri kullanmayı, dönüşüm ve animasyon işlemlerini yapmayı sağlayan modüldür. SÜRE 40/32 ÖN KOŞUL YETERLİK XAML tasarım araçlarını kullanmak Genel Amaç Öğrenci, bu modül ile gerekli ortam sağlandığında; tasarım araçlarını kullanabileceksiniz. Amaçlar 1. Tasarım özelliklerini düzenleyebilecektir. MODÜLÜN AMACI 2. Fırça işlemlerini gerçekleştirebilecektir. 3. Görsel özellikleri kullanarak uygulama geliştirebilecektir. 4. Şekil işlemlerini gerçekleştirebilecektir. 5. Kontrolleri kullanabilecektir. 6. Dönüşüm ve animasyon işlemlerini gerçekleştirebilecektir. EĞİTİM ÖĞRETİM ORTAMLARI VE DONANIMLARI Ortam: Atölye, Bilişim teknolojisi sınıfı, kütüphane, internet, bireysel öğrenme ortamları vb. Donanım: Bilgisayar(PC), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, harici harddisk, ilgili kitaplar, dökümanlar ÖLÇME VE DEĞERLENDİRME Modül içinde yer alan her öğrenme faaliyetinden sonra verilen ölçme araçları ile kendinizi değerlendireceksiniz. Öğretmen modül sonunda ölçme aracı (çoktan seçmeli test, 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. iii

6 GİRİŞ GİRİŞ Sevgili Öğrenci, Günümüzde internet üzerinden birçok uygulamalar yapılmaktadır. Yapılan tüm uygulamalar sizlerin çalışmalarına yansımaktadır. Tüm uygulamalarda yapılması istenilen tasarım özelliklerini düzenleme sizlerin çalışmalarına yansıyacak olan işlemlerden birisidir. Tüm görsel olarak yapacağınız internet uygulamalarının arayüz ile ilgili olan bölümünü içerir. Fırçaları kullanma işleminde ise, ihtiyaca uygun fırça aracını kullanma becerisini kazanmaktasınız. Görsel özellikleri kullanarak uygulama geliştirme işlemi ile uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenlemesini gerçekleştireceksiniz. Şekil işlemlerini gerçekleştirme işlemi sonucunda, ihtiyaca uygun şekil düzenlemesini yapmayı kazanmış olacaksınız. Kontrolleri kullanma işlemi ile, uygulama içinde ihtiyaç duyulan kontrolleri hatasız olarak gerçekleştirmeyi sağlayacaksınız. Dönüşüm ve animasyon işlemlerini yapmayı sağlama işlemi sonucunda, uygulama içinde kullanılan nesneler için istenilen dönüşüm işlemlerini gerçekleştirmeyi ve anahtar çerçeveleri, uygun değişim noktalarında kullanmayı kazanacaksınız. 1

7 2

8 ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ-1 Tasarım özelliklerini düzenleyebileceksiniz. ARAŞTIRMA Editör panellerini düzenlemek Tuval ayarlarını yapmak Izgara düzenlemelerini yapmak Kenarlıklarla ilgili ayarlamaları yapmak 1. YERLEŞİM XAML, Siverlight ve WPC teknolojilerinin tasarım kısımlarını geliştireceğimiz, statik ve dinamik kullanıcı arayüzleri oluşturmamızı sağlayan işaretleme dilidir. XML in gelişletilmiş hali gibi görülmekte ve uzantısı.xaml dır. Bu yüzden başlatılan her tag sonlandırılmak zorundadır. XAML bir programlama dili olmamakla beraber uygulama mantığı ve olaylar da codebehind dosyalarında bulunmaktadır. WCF (Windows Presentation Foundation), yeni nesil kullanıcılar için Windows Vista/7 görünümünde arayüzler sunmamızı sağlayan XAML tabanlı bir sistemidir. WPF kullanıcı arayüzleri geliştirmede ve görüntülemede önemli bir açığı kapatmıştır. Kullanıcı ile daha etkileşimli uygulamalar kullanarak, ses ve görüntülerle zengin içerikleri uygulamalar yapmamızı sağlamaktadır. XAML de ilk tanımlanan eleman, root eleman olarak adlandırılır. UserControl, bir root elemandır. Root elemanlarının kapsadığı panel elemanları kullanıcı ara yüzleri için Stackpanel, Grid,Canvas ve Border gibi düzen kontrolleri sunar StackPanel Yatay ve dikey olarak yönlendirilmiş tek satırlık değerler eklemek için kullanılır. Bu kontrolümüz daha iyi kavramak için projemize bir form ekleyelim. XAML kod alanına gelerek aşağıdaki kodumuzu yazarak şekilleri oluşturalım. <Gird> <Canvas> <Ellipse Width= 100 Height= 100 Fill= Red /> <Ellipse Width= 80 Height= 80 Fill= Orange /> <Ellipse Width= 60 Height= 60 Fill= Yellow /> <Ellipse Width= 40 Height= 40 Fill= Green /> 3

9 <Ellipse Width= 20 Height= 20 Fill= Blue /> </Canvas> </Gird> Kodumuzu yazdıktan sonra tasarıma baktığımızda şekillerimizin üst üste oluştuğunu görebiliriz. Resim 1.1: Stakpanel Kontol 1(framework) Burada yer alan kodlarımızı Stackpanel içerisine yazdığımızda her şekil bir satır olarak çizilecektir. <Gird> <Stackpanel Margin= 0,0,0,-44 > <Ellipse Width= 100 Height= 100 Fill= Red /> <Ellipse Width= 80 Height= 80 Fill= Orange /> <Ellipse Width= 60 Height= 60 Fill= Yellow /> <Ellipse Width= 40 Height= 40 Fill= Green /> <Ellipse Width= 20 Height= 20 Fill= Blue /> </ Stackpanel > </Gird> Kodumuzu düzenledikten sonra çalıştıralım. 4

10 Resim 1.2: Stakpanel Kontol 2 (framework) 1.2. Tuval (Canvas) Form içerisinde kontrolleri düzgün yerleştirmek için kullanılan bir kontroldür. Canvas paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. Bunun sebebi, Canvas panelinin içerisine alacağı kontrolü noktasal olarak belirtmesidir. Canvas kontrol içerisinde sol,sağ,üst ve alt köşelere göre kontrolleri yerleştirmek için kullanılır. Aşağıdaki kodumuzu XAML alanına yazalım. <Canvas> <Button Content= Sol Ust Width= 85 Height= 30 Canvas.Top= 20 Canvas.Left= 20 /> <Button Content= Sag Ust Width= 85 Height= 30 Canvas.Top= 20 Canvas.Right= 20 /> <Button Content= Sol Alt Width= 85 Height= 30 Canvas.Bottom= 20 Canvas.Left= 20 /> <Button Content= Sag Alt Width= 8a5 Height= 30 Canvas.Bottom= 20 Canvas.Right= 20 /> </Canvas> Kodumuz yazıp Design alanına baktığımızda Button kontrollerinin yerleştiğini görebilirsiniz. 5

11 1.3. Grid Resim 1.3: Canvas Kontrol (framework) Form üzerinde satır ve sütun olarak alanlar oluşturulması için kullanılır. Satır ve sütun ayarlarımız için genişlik ve yükseklik değerlerini belirlemeliyiz. Grid Kontrolü; RowDefinitions property si satır oluşturmamızı sağlar. ColumnDefinitions property si sütun oluşturmamızı sağlar. ShaowGridLines property si ile tanımlanan satır ve sütunları ekranda görebilirsiniz. Burada ölçüler genelde pixel(px) cinsinden verilir. Ama farklı ölçü birimleri de bu değerleri atayabiliriz. Aşağıdaki XAML kodumuzu yazalım. <Gird Margin= 5 > <Grid.ColumnDefinitions> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> <ColumnDefinition Width= 80 /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height= 35 /> <RowDefinition Width= 216* /> </Grid.RowDefinitions> </Gird> Burada Grid ler şeklinde form alanımızı görebiliriz. 6

12 Resim 1.4: GridKontrol (framework) 1.4. Border Bir sınır belirleyen, arkaplan oluşturmak için kullanılan kontroldür. Projemize bir form ekleyelim ve XAML kodumuzu yazalım. <Gird> <Border HorizontalAligment= Center VerticalAligmetnt= Center Width= 150 Height= 100 CornerRadius= 20 BorderBrush= Red BorderThickness= 5 > <Border.BitmapEffect> <DropShadowBitmapEffect/> </Border.BitmapEffect> <Border.Background> <LinearGradientBrush Endpoint= 0.5,2 Startpoint= 0.2,0 > <GradientStop Color= Aqua Offset= 0 /> <GradientStop Color= Black Offset= 1 /> <LinearGradientBrush> </Border.Background> <TextBlock Width= 100 Height= 50 Fontweight= Bold TextWrapping= Wrap TextAligment= Center Text= Örnek Yazı Alanımız. /> </Border> </Gird> XMAL kodumuzu yazdıktan sonra projemizi çalıştıralım. 7

13 Resim 1.5: BorderKontrol (framework) 8

14 UYGULAMA FAALİYETİ UYGULAMA FAALİYETİ Aşağıda belirtilen işlem basamaklarını ve önerileri dikkate alarak tasarım özelliklerini düzenleyiniz. Kullanılacak araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Öneriler Tasarım özelliklerini düzenlemek için; Editör panellerini düzenleyiniz. Tuval ayarlarını yapınız. Izgara düzenlemelerini yapınız. StackPanel düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Stackpan nel Height= 238 Margin= 53, 36, 0,0 Name= stackpanel1 Orientation= VerticalAligment=Top HorizontalAligment= Left Width= 371 MaxHeight= 750 MaxWidth= 750 > <MediaElement Heigh= 120 Name= mediaelement1 Width= 160 Source= Wildlife.wmv /> <Button Content= Oynat Height=23 Name= button2 Width= 75 HorizontalAligment= Center /> <Button Content= Duraklat Height=23 Name= button3 Width= 75 HorizontalAligment= Center /> </Stackpanel> </Grid> Canvas düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Canvas Background= AntiqueWhite > <Rectangle Canvas.Left= 35 Canvas.Top= 80 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Red /> <Rectangle Canvas.Left= 160 Canvas.Top= 62 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Blue /> <Rectangle Canvas.Left= 272 Canvas.Top= 36 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Green /> </Canvas> Grid düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width= 100* /> < ColumnDefinition Width= 176* /> 9

15 Kenarlıklarla ilgili ayarlamaları yapınız. <ColumnDefinition Width= 227* /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height= 40* /> <RowDefinition Height= 30* /> <RowDefinition Height= 28* /> <RowDefinition Height= 28* /> <RowDefinition Height= 185* /> </Grid.RowDefinitions> </Grid> Border düzen panellerini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Border BorderBrush= FF9D1212 BorderThickness= 5 Height= 161 HorizontalAligment= Left Margin= 46,92,0,0 Name= border1 VerticalAligment= Top Width= 207 CornerRadius= 25 Background= {x:null} > <image Height= 141 Name= image1 Stretch= Fill Width= 179 Source= /silverlightapplication2;component/images/kodlab.jpg /> </Border> Ayrıca Border kontrolünün CornerRadius property sine CornerRadius sınıfın yapıcı metodunda her köşe için farklı değerler belirleyebilirsiniz. 10

16 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır Tasarım özelliklerini düzenlemek için; 1 Editör panellerini düzenlediniz mi? 2 Tuval ayarlarını yaptınız mı? 3 Izgara düzenlemelerini yaptınız mı? 4 Kenarlıklarla ilgili ayarlamaları yaptınız mı? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 11

17 ÖLÇME VE DEĞERLENDİRME ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi Silverlight ve WPC teknolojilerinin tasarım kısımlarını geliştireceğimiz, statik ve dinamik kullanıcı ara yüzleri oluşturmamızı sağlayan işaretleme dilidir? A) HTML B) DHTML C) XAML D) CSS 2. Kullanıcı ile daha etkileşimli uygulamalar kullanarak, ses ve görüntülerle zengin içerikleri uygulamalar yapmamızı sağlayan sistemdir? A) WPF B) SQL Server C) ASP.NET D) XML 3. I- Editör panellerini düzenlemek II- Tuval ayarlarını yapmak III- Izgara düzenlemelerini yaptınız Yukarıdakilerden hangileri Grid düzen kontrollerini içerir? A) Yalnız I B) Yalnız II C) Yalnız III D) I ve III 4. Aşağıdakilerden hangisi yatay ve dikey olarak yönlendirilmiş tek satırlık değerler eklemek için kullanılır? A) Border B) Grid C) Tuval(Canvas) D) Stackpanel 5. Aşağıdakilerden hangisi form içerisinde kontrolleri düzgün yerleştirmek için kullanılan bir kontroldür? A) Grid B) Border C) Tuval(Canvas) D) Stackpanel 6. Aşağıdakilerden hangisi form üzerinde satır ve sütun olarak alanlar oluşturulması için kullanılır? A) Stackpanel B) Border C) Tuval(Canvas) D) Grid Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız. 7. Kenarlıklarla ilgili ayarlamaları düzeni ile yapılır. 8. Satır ve sütun ayarlarımız için genişlik ve yükseklik değerleri. ile belirlenir. DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 12

18 ÖĞRENME FAALİYETİ 2 AMAÇ ÖĞRENME FAALİYETİ-2 Fırçaları kullanabileceksiniz. ARAŞTIRMA Tek renk fırçasını kullanınız. Doğrusal olarak değişen renk fırçasını kullanınız. Yayılarak değişen renk fırçasını kullanınız. Resim fırçasını kullanınız Video fırçasını kullanınız. 2. FIRÇALAR WFC ve Silverlight da görsel düzeni oluşturmak için fırçalar kullanılmaktadır. WFC ve Silverlight da bulunan tüm kontroller ve elementler fırçalar ile görselleştirilir. Fırçalar ile renkleri istenilen yapıya farklı şekillerle uygulayabilirsiniz. Temel olarak fırçalar, Brushes sınıfında türetilmiştir. Fırçaların farklı çeşitleri vardır. Her fırçanın kendine özgü çıktısı vardır. Fırça çeşitlerimiz ise şunlardır: SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush 2.1. SolidColorBrush Kontrol içerisinde dolgu renklerini ayarlamak için kullanılır. SolidColorBrush tanılamak için; <SolidColorBrush Color= Red /> şeklinde yazmamız yeterlidir. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 200 Height= 40 Stroke= Blue StrokeThickness= 1 > < Rectangle.Fill> <SolidColorBrush Color= #33FFFF /> </ Rectangle.Fill> </ Rectangle> </Grid> 13

19 2.2. LinearGradientBrush Resim 2.1 : SolidColorBrush Doğrusal renk geçişlerinde kullanılır. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> Resim 2.2 : Linear gradient brush Örnek; Dikey (horizontal linear gradient) oluşturmak için aşağıdaki XMAL kodları kullanılır. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0" /> 14

20 <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> Resim 2.3 : Horizontal linear gradient brush Örnek; Yatay (vertical linear gradient) oluşturmak için aşağıdaki XMAL kodları kullanılır. <Grid> <Rectangle Width="200" Height="100"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> 2.3. RadialGradientBrush Resim 2.4 : Vertical linear gradient brush Dairesel renk geçişleri için kullanılır. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 300 Height= 200 > 15

21 < Rectangle.Fill> <RadialGradientBrush> <GradientStop Color= Blue Offset= 0 /> < GradientStop Color= Yellow Offset= 1 /> </RadialGradientBrush> < /Rectangle.Fill> </Rectangle> </Grid> 2.4. ImageBrush Resim 2.5 : Radial Gradient Uygulama Bir resmi fırça olarak kullanabiliriz. Aşağıdaki XAML kodumuzu yazalım. <Grid> <Rectangle Width= 75 Height= 75 > < Rectangle.Fill> <ImageBrush ImageSource= SekilFirca.png /> </ Rectangle.Fill> </ Rectangle> </Grid> Kodlamamız sonucunda oluşan karenin dolgu rengi aradığımız resim olacaktır. Resim 2.6 : ImageBrush Uygulama 16

22 2.5. VideoBrush VideoBrush, LinearGradientBrush veya bir ImageBrush benzer bir fırça objesi tipidir. Ancak, düz renk, degrade, ya da bir görüntü olan bir alan boyama yerine, video içeriği ile bir alanı boyar. Bu video içeriği bir MediaElement tarafından sağlanır. Sadece başka fırça türleri gibi, dolgu boyamak için bir şeklin, bir yol, bir tuval Arka Plan, ya da bir TextBlock veya Run Önalan bir Dikdörtgen veya geometri içeriği VideoBrush olarak kullanılabilir. Aşağıdaki örnekte, bir TextBlock ın Önalanı boyamak için VideoBrush kullanımı gösterilir. Aşağıdaki XAML kodumuzu yazalım. <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <MediaElement x:name="butterflymediaelement" Source="sampleMedia/Butterfly.wmv" IsMuted="True" Opacity="0.0" IsHitTestVisible="False" /> <TextBlock Canvas.Left="5" Canvas.Top="30" FontFamily="Verdana" FontSize="120" FontWeight="Bold" TextWrapping="Wrap" Text="Video"> <!-- Paint the text with video. --> <TextBlock.Foreground> <VideoBrush SourceName="butterflyMediaElement" Stretch="UniformToFill" /> </TextBlock.Foreground> </TextBlock> </Canvas> 17

23 UYGULAMA FAALİYETİ UYGULAMA FAALİYETİ İhtiyaca uygun fırça aracını kullanınız. Kullanılan araç ve gereçler: Bilgisayar (PC veya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dokümanlar İşlem Basamakları Tek renk fırçasını kullanınız. Doğrusal olarak değişen renk fırçasını kullanınız. Yayılarak değişen renk fırçasını kullanınız. 18 Öneriler SolidColorBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Ellipse Height= 100 HorizontalAligment= Left Width= 200 > <Ellipse.Fill> <SolidColorBrush Color= Red ></SolidColorBrush> </ Ellipse.Fill> < /Ellipse> LinearGradientBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Ellipse Height= 100 HorizontalAligment= Left Margin= 69,96,0,0 Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 372 > <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color= RosyBrown Offset= 0.1 /> < GradientStop Color= Yellow Offset= 0.25 /> < GradientStop Color= White Offset= 0.75 /> < GradientStop Color= BlueViolet Offset= 1 /> </LinearGradientBrush> </Ellipse.Fill> < /Ellipse> RadialGradientBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Height= 238 HorizontalAligment= Left Margin= 67, 33, 0, 0 Name= rectangle1 Stroke= Black

24 Resim fırçasını kullanınız. Video fırçasını kullanınız. VerticalAligment= Top Widht= 343 > <Rectangle.Fill> <RadialGradientBrush GradientOrigin= 0.9, 0.3 > < RadialGradientBrush.GradientStops> <GradientStop Color= Black Offset= 0.2 /> <GradientStop Color= Red Offset= 0.50 /> <GradientStop Color= AntiqueWhite Offset= 0 /> <GradientStop Color= AntiqueWhite Offset= 1 /> < /RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> ImageBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Height= 238 HorizontalAligment= Left Margin= 46, 32, 0, 0 Name= rectangle1 Stroke= Black VerticalAligment= Top Width= 404 > <Rectangle.Fill> <ImageBrush ImageSource= F:\a2s.png /> </Rectangle.Fill> < /Rectangle> </Grid> VideoBrush özelliğini uygulayınız. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Canvas> <MediaElement x:name="mybutterflymediaelement" Source="sampleMedia/Butterfly.wmv" /> 19 <! Texti boyamak için kullanılır. --> <TextBlock Canvas.Left="5" Canvas.Top="30"

25 FontFamily="Verdana" FontSize="120" FontWeight="Bold" Text="Video"> <TextBlock.Foreground> <VideoBrush /> </TextBlock.Foreground> </TextBlock> </Canvas> 20

26 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır 1 Tek renk fırçasını kullandınız mı? 2 Doğrusal olarak değişen renk fırçasını kullandınız mı? 3 Yayılarak değişen renk fırçasını kullandınız mı? 4 Resim fırçasını kullandınız mı? 5 Video fırçasını kullandınız mı? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 21

27 ÖLÇME VE DEĞERLENDİRME ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi fırça çeşitlerinden değildir? A ) ImageBrush B ) SolidColorBrush C ) VisualBrush D ) RadialGradientBrush 2. Aşağıdakilerden hangisi kontrol içerisinde dolgu renklerini ayarlamak için kullanılan fırçadır çeşididir? A ) ImageBrush B ) SolidColorBrush C ) RadialGradientBrush D ) LinearGradientBrush 3. Aşağıdakilerden hangisi dairesel renk geçişleri için kullanılan fırça çeşididir? A ) RadialGradientBrush B ) LinearGradientBrush C ) SolidColorBrush D ) VideoBrush 4. Dikey renk düzeneği oluşturan fırça aşağıdakilerden hangisidir? A ) HorizontalLinearGradientBrush B ) VerticalLinearGradientBrush C ) RadialGradientBrush D ) VisualBrush 5. Aşağıdakilerden hangisi doğrusal renk geçişlerinde kullanılan fırça çeşididir? A ) SolidColorBrush B ) RadialGradientBrush C ) VideoBrush D )LinearGradientBrush 6. Yatay renk düzeneği oluşturan fırça aşağıdakilerden hangisidir? A ) VideoBrush B ) HorizontalLinearGradientBrush C ) VerticalLinearGradientBrush D ) SolidColorBrush 7. Aşağıdakilerden hangisi tek renk fırçadır? A ) VideoBrush B ) ImageBrush C ) LinearGradientBrush D ) SolidColorBrush 8. Aşağıdakilerden hangisi resim fırçasıdır? A ) VideoBrush B ) ImageBrush C ) RadialGradientBrush D ) LinearGradientBrush 22

28 DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 23

29 ÖĞRENME FAALİYETİ 3 AMAÇ Görsel Özellikleri Kullanarak Uygulama Geliştiriniz. ARAŞTIRMA Ölçü ve yerleşim özelliklerini düzenleyiniz Zıtlık ayarını yapınız. İşaretçi olaylarını düzenleyiniz. Cursor behaviors özelliğiniz kullanınız. Uygulama içindeki hareketleri düzenleyiniz. 3. GÖRSEL ÖZELLİKLER XAML içerisinde nesnelerin özellikleri olarak yazılarak ölçü yerleşim birimleri, opacity, cursor behavour ve stroke kullanılır Ölçü ve Yerleşim Özellikleri Ölçü birimleri aşağıdaki tabloda yer almaktadır. Tablo 1.1: Ölçü Birimleri Atama Değeri Değerin Adı Açıklama px Pixel(Piksel) 1 pixel in Inches(İnç) 96 pixel cm Centimeters(Santimetre) 2,54 cm = 1 pixel pt Points(Nokta) 1/72 inch XAML boyutları, yükseklik ve genişlik özelliklerini kullanarak çift bir değer alarak ayarlanır. 100 piksel genişliğinde ve 200 piksel yüksekliğinde bir dikdörtgen oluşturmak için, örneğin, şöyle XAML tanımlarsınız: <Rectangle Fill="Black" Width="100" Height="200" /> Ayrıca, üst tuvala bağlı Yukarı (Top) ve Sol (Left) özellikleri nesnenin göreli konumunu belirtmek için kullanılır. 24

30 Sayı 0 arasındaki değerleri kapsayan ve PositiveInfinity dört olası boyut özelliklerini belirten bir Thickness yapısı bulunmaktadır. Margin: Öznitelik kullanımını da simetrik ve mantıksal olarak verilen sırada geçerli olan kısaltılmış değerleri kabul eder. Örneğin, Tüm özellikler, Margin="20" anlamında yorumlanacak bir Thickness 20 değer olacak şekilde ayarlanır. Margin="20,50"anlamında yorumlanacak bir Thickness ile Left ve Right yönlerini 20'ye ayarlanır ve Top ve Bottom 50 olarak ayarlanır Opacity Opacity, nesnelerde saydamlık için kullanılan bir özelliktir. Aşağıdaki XAML Kodlarını yazınız. <!-- Resim ve üzerine yazılı metnin 25% opak olmasını sağlar. --> <Image Opacity="0.25">A Image</ Image > 3.3. Cursor behaviors ( a ) ( b ) Resim 3.1: Resimlerde %25 opacity ayarı Kullanıcılara iyi bir geri besleme sağlamak için, uygun olan eylem türünü belirtmek için ve fare imlecini değiştirmek için sık sık gerekli olabilir. XAML elemanları aşağıdaki değerleri ayarlamak için izin veren imleç özellikleri; Arrow, Default, Hand, Ibeam, None, Wait Stroke Stroke: Dış çerçeve rengini seçer. StrokeThickness: Dış çerçeve kalınlığını ayarlar. 25

31 StrokeDashCap: Şeklin dış kenarlarını nasıl bir kesikli çizgi ile gösterileceği belirtilir. StrokeDashArray: Kesikli kenarlarda kesikli çizginin ne kadar boşlukta tekrarlanacağını belirtir. 26

32 UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Ölçü ve yerleşim özelliklerini düzenleyiniz. Zıtlık ayarını yapınız. İşaretçi olaylarını düzenleyiniz. Cursor behaviors özelliğiniz kullanınız. Uygulama içindeki hareketleri düzenleyiniz. 27 Öneriler Margin değerler ile ilgili uygulama yapınız. Aşağıdaki XAML Kodlarını yazınız. <object> <object.margin> <Thickness Left="left" Top="top" Right="right" Bottom="bottom"/> </object.margin> </object> Opacity, butona efekt vermek için kullanılır. Aşağıdaki XAML Kodlarını yazınız. opacity of (0.25 * 0.5 = 0.125). --> <Button Opacity="0.25"> <StackPanel Orientation="Horizontal"> <TextBlock VerticalAlignment="Center" Margin="10">A Button</TextBlock> <Image Source="sampleImages\berries.jpg" Width="50" Height="50" Opacity="0.5"/> </StackPanel> </Button> Aşağıdaki XAML Kodlarını yazınız. <Grid x:name= LayoutRoot Background= White > <Rectangle Width= 300 Height= 200 Fill= Red > <i:interaction.behaviours> <local:clickanddeletebehavior> </i:interaction.behaviours> </Rectangle> </Grid> Aşağıdaki XAML Kodlarını yazınız. Canvas xmlns="http://schemas.microsoft.com/2003/xaml"> <Rectangle Fill="#33CC66" Width="2in" Height="1in"

33 Canvas.Top="25" Canvas.Left="50" StrokeThickness="6px" Stroke="Orange" /> <Ellipse Fill="yellow" CenterX="1.5in" CenterY="1.1in" RadiusX=".5in" RadiusY="1in" StrokeThickness="4px" Stroke="Blue" /> <Text Canvas.Top="50" Canvas.Left="60" Foreground="#000000" FontWeight="Bold" FontFamily="Arial" FontStyle="Normal" FontSize="25">Hello Shapes!</Text> </Canvas> 28

34 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır 1 Ölçü ve yerleşim özelliklerini düzenlediniz mi? 2 Zıtlık ayarını yaptınız mı? 3 İşaretçi olaylarını düzenlediniz mi? 4 Cursor behaviors özelliğiniz kullandınız mı? 5 Uygulama içindeki hareketleri düzenlediniz mi? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 29

35 ÖLÇME VE DEĞERLENDİRME Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız inç.. px(piksel) değerindedir. 2. 1px (piksel).. cm değerindedir pt (point).. inç değerindedir. Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 4. Simetrik ve mantıksal olarak verilen sırada geçerli olan kısaltılmış değerler aşağıdakilerden hangisidir? A ) Piksel B ) Margin C ) Opacity D ) Stroke 5. Nesnelerde saydamlık için kullanılan bir özellik aşağıdakilerden hangisidir? A ) Cursor Behavior B ) Margin C ) Opacity D ) Stroke 6. Kullanıcılara iyi bir geri besleme sağlamak için ve uygun olan eylem türünü belirtmek için aşağıdakilerden hangisidir? A ) Cursor Behavior B ) Margin C ) Opacity D ) Stroke Aşağıdaki cümlelerin başında boş bırakılan parantezlere, cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız. 7. ( ) Dış çerçeve rengine Stroke denir. 8. ( ) StrokeDashCap, dış çerçeve kalınlığını ayarlan özelliktir. 9. ( )StrokeDashArray, kesikli kenarlarda kesikli çizginin ne kadar boşlukta tekrarlanacağını belirtir. DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 30

36 ÖĞRENME FAALİYETİ 4 AMAÇ Şekil İşlemlerini Gerçekleştiriniz. ARAŞTIRMA Uygulama içinde kullanılan elips şekline ait düzenlemeleri yapmak Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yapmak Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yapmak Uygulama içinde tanımlanan yola ait düzenlemeleri yapmak Geometrik gruplar oluşturmak ve düzenlemek 4. ŞEKİLLER WPF formlarımızda dikdörtgen, kare, elips gibi şekiller oluşturabilirsiniz. Form üzerinde çizimsel işlemler yapmak istediğimizde bu kontrollerin kullanımı önem kazanmaktadır Elips (Ellipse) Elips, daire çizimleri için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Width= 100 Height= 50 Stroke= Blue StrokeThichness= 5 Fill= Yellow HorizontalAlignment= Left VerticalAlignment= Top Margin= 10, 10, 0, 0 /> </Grid> XAML kodunu yazdıktan sonra formunuzda elips şeklinin oluştuğunu görebilirsiniz. 31

37 Resim 4.1 : Ellipse Burada elipse çizerken kullandığınız özellikler ise şunlardır: Stroke: Çerçeve Rengi StrokeThickness: Çerçeve Kalınlığı Fill: Dolgu rengi 4.2. Dikdörtgen (Rectangle) Dikdörtgen, kare çizim için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Rectangle Width= 200 Height= 100 Fill= Blue Stroke= Black StrokeThickness= 3 /> </Grid> Kodun sonucunda dolgu rengi mavi olan (Fill= Blue ), çerçeve rengi siyah(stroke= Black ) ve çerçeve kalınlığı 3 olan (StrokeThickness= 3 ) bir dikdörtgen oluşacaktır. Resim 4.2 : Dikdörtgen (Rectangle) 1 32

38 Dikdörtgene ait köşelerin yuvarlatılması için RadiusX ve RadiusY özelliklerine değer atanması yeterli olacaktır. <Grid> <Rectangle Width= 200 Height= 100 Fill= Blue RadiusX= 20 RadiusY= 20 Stroke= Black StrokeThickness= 3 /> </Grid> 4.3. Çizgi (Line) Resim 4.3 : Dikdörtgen (Rectangle) 2 Çizgi çizmek için kullanılır. Aşağıdaki XAML kodunu yazınız. <Grid> <Line X1= 250 Y1= 40 X2= 50 Y2= 200 Stroke= Red StrokeThickness= 5 /> </Grid> XAML kodlamanın sonunda çizginin oluştuğunu görebilirsiniz. Burada yer alan X1- Y1- X2- Y2 değerleri, form üzerindeki uzaklıklara göre iki nokta belirlenir. Bu iki nokta birleşerek çizgi oluşturulur. Çizgilerin düz çizgi olması dışında farklı görünmesini StrokeDashArray özelliği ile sağlayabilirsiniz. 33

39 XAML kodunu düzenleyiniz. Resim 4.4 : Line 1. Örneği <Grid> <Line X1= 250 Y1= 40 X2= 50 Y2= 200 StrokeDashArray= 1, 1 Stroke= Red StrokeThickness= 5 Margin= -33, -12, 33, 12 /> < Line X1= 250 Y1= 40 X2= 50 Y2= 200 StrokeDashArray= 4, 3 Stroke= Red StrokeThickness= 5 Margin= -12, -12, 12, 12 /> Resim 4.5 : Line 2. Örneği 4.4. Yol (Path) Temel şekilleri uç uca eklenmesi veya birleştirilmesi ile oluşturulan karmaşık çizimlerdir. XAML kodunu düzenleyiniz Çoklu Geometrik Nesneler (GeometryGroup) Geometrik şekilleri birleştirmek ve kesişimlerini almak için kullanılır. XAML kodunu düzenleyiniz. 34

40 UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PC veya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Uygulama içinde kullanılan elips şekline ait düzenlemeleri yapınız. Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yapınız. Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yapınız. Öneriler Elips şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Ellipse Fill= #FF63639F Margin= 132, 50, 141, 47 Stroke= Yellow StrokeThickness= 10 /> <Ellipse Fill= #FFD0D0DE HorizontalAlignment= Left Margin= 177, 107, 0, 151 Stroke= Black Widht= 42 /> <Ellipse Fill= #FFD0D0DE HorizontalAlignment= Right Margin= 0, 107, 198, 151 Stroke= Black Widht= 42 /> <Ellipse Fill= #FF Height= 14 Margin= 189, 0, 198, 95 Stroke= Black VerticalAligment= Botton /> <Ellipse Fill= # FF HorizontalAlignment= Left Margin= 240, 124, 0, 151 Stroke= Black Widht= 10 /> </Grid> Dikdörtgen şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Rectangle Fill= # FF HorizontalAlignment= Left Margin= 26, 64, 0, 99 Stroke= Yellow Widht= 149 RadiusX= 20 RadiusY= 42 /> < Rectangle Fill= # FF Margin= 200, 64, 208, 99 Stroke= Black StrokeThickness= 8 /> < Rectangle Fill= #FF HorizontalAlignment= Right StrokeDashArray= 6 StrokeThickness= 5 StrokeDashCap= Flat Margin= 0, 64, 44, 99 RadiusY= 1 Stroke= Black Width= 133 /> </Grid> Dikdörtgen şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. 35

41 Uygulama içinde tanımlanan yola ait düzenlemeleri yapınız. Geometrik gruplar oluşturmak ve düzenleyiniz. <Grid> <Line X1= 50 X2= 450 Y1= 150 Y2= 150 Stroke= Red StrokeDashArray= 1 StrokeDashCap= Flat StrokeThickness= 5 /> </Grid> Yol şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <Path Data= M91, 108, L324.5, z Margin= 77, 51.5, 197.5, 90.5 Stretch= Fill Stroke= Black StrokeThickness= 1 /> </Grid> GeometryGroup şeklini oluşturunuz. Xaml kodları ile yandaki resimdeki formu oluşturunuz. <Grid> <PathStroke= Black StrokeThickness= 1 Fill= #CCCCFF Margin= 123, 80, 82, 12 > <Path.Data> <GeometryGroup FillRule= EvenOdd > <EllipseGeometry RadiusX= 50 RadiusY= 50 Center= 75, 75 /> <LineGeometry StartPoint= 25, 10 EndPoint= 90,150 > <EllipseGeometry RadiusX= 100 RadiusY= 100 Center= 75, 75 /> 30 /> </Grid> <RectangleGeometry Rect= 30, </Path> </GeometryGroup> </Path.Data> 36

42 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz Değerlendirme Ölçütleri Evet Hayır Uygulama içinde kullanılan elips şekline ait düzenlemeleri yaptınız mı? Uygulama içinde kullanılan dörtgen şekline ait düzenlemeleri yaptınız mı? Uygulama içinde kullanılan çizgi şekline ait düzenlemeleri yaptınız mı? Uygulama içinde tanımlanan yola ait düzenlemeleri yaptınız mı? 5 Geometrik gruplar oluşturdunuz ve düzenlediniz mi? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 37

43 ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi daire çizimleri için kullanılır? A ) Rectangle B ) Ellipse C ) Path D ) Line 2. Aşağıdakilerden hangisi Ellipse Width= 100 Height= 50 Stroke= Yellow StrokeThickness= 10 kodlarının doğru açılımıdır? A ) Elips genişliği 100, yüksekliği 50, dış çerçeve rengi sarı, dış çerçeve kalınlığı 10 B ) Daire yüksekliği 100, genişliği 50, dış çerçeve rengi sarı, dış çerçeve kalınlığı 1 C ) Elips yüksekliği 100, genişliği 50, dış çerçeve rengi mavi, dış çerçeve kalınlığı 1 D ) Daire genişliği 100, yüksekliği 50, dış çerçeve rengi mavi, dış çerçeve kalınlığı Aşağıdakilerden hangisi Rectangle Width= 200 Height= 100 Fill= Blue Stroke= Black kodlarının doğru açılımıdır? A ) Elips genişliği 200, yüksekliği 100, iç alan rengi mavi, dış çerçeve rengi siyah B ) Kare genişliği 200, yüksekliği 100, iç alan rengi mavi, dış çerçeve rengi siyah C ) Elips genişliği 200, yüksekliği 100, iç alan rengi mavi, iç çerçeve rengi siyah D ) Kare genişliği 200, yüksekliği 100, iç alan rengi mavi, iç çerçeve rengi siyah 4. Aşağıdakilerden hangisi dikdörtgene ait köşelerin yuvarlatılması için kullanılan koddur? A ) Rectangle B ) Stroke C ) RadiusX D ) Path 5. Aşağıdakilerden hangisi çizgi çizmek için kullanılır? A ) Rectangle B ) Ellipse C ) Path D ) Line 6. Aşağıdakilerden hangisi çizgilerin düz çizgi olması dışında farklı görünmesini sağlayan özelliktir? A ) RadiusX B ) StrokeThickness C ) StrokeDashArray D ) Stroke 7. Aşağıdakilerden hangisi temel şekilleri uç uca eklenmesi veya birleştirilmesi ile oluşturulan karmaşık çizimlerdir? A ) Rectangle B ) Ellipse C ) Path D ) Line 8. Aşağıdakilerden hangisi Geometrik şekilleri birleştirmek ve kesişimlerini almak için kullanılır? A ) Rectangle B ) GeometryGroup C ) Path D ) Line DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 38

44 ÖĞRENME FAALİYETİ 5 AMAÇ Kontrolleri Kullanacaksınız. ARAŞTIRMA Tuval kontrollerini düzenleyiniz Resim kontrollerini düzenleyiniz Metin kontrollerini düzenleyiniz 5. KONTROLLER Her bir kontrol aslında birer sınıf yapısındadır. Kontroller, amaçlarına göre farklı sınıflardan türeyebilir. Kontrolleri anlatırken her kontrolün yapısına değineceğiz. Değinilecek kontoller, tuval(canvas), resim(image), kabartma(glyphs), metin bloğu(textblock) dur Tuval (Canvas) Canvas paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. Bunun sebebi, Canvas panelinin içerisine alacağı kontrolü noktasal olarak belirtmesidir. Canvas paneli içerisine alacağı kontrolleri herhangi bir köşeden belirtilen uzaklıktaki noktaya yerleştirir. Canvas paneli içerisine yerleştirilecek her kontrolün Left, Right, Top, Bottom isimli attached property leri vardır. Bu property ler sayesinde bileşenlerin konumu noktasal olarak belirtebiliriz Resim (Image) Resim göstermek için kullanılır. Resim boyutlandırmak için Strecht özelliğini kullanabiliriz Kabartma (Glyphs) eder. Kabartma (Glyphs), sabit metinlerin oluşturulması için kullanılan kümeleri temsil 39

45 Aşağıdaki XAML kodunu yazınız. <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Glyphs Fill="#FF000000" FontUri="Resources/ F9D-DB34-7D odttf" FontRenderingEmSize="18" StyleSimulations="None" OriginX="72.024" OriginY="87.624" UnicodeString="Hello, World!" Indices=",85.333;,64;,57.333;,57.333;,70.667;,30.667;,25.333;,113.33;,70.667;,68;,57.333;, ;"> </Glyphs> </Canvas> 5.4. Metin Bloğu (TextBlock) Metin Bloğu (TextBlock)Akış, içeriği görüntülemek için küçük derecede bir kontrol sağlar. 40

46 UYGULAMA FAALİYETİ Uygulamanın görsel özelliklerini ihtiyaca uygun şekilde düzenleyiniz. Kullanılan araç ve gereçler: Bilgisayar (PCveya laptop), Projeksiyon, projeksiyon perdesi, yazıcı, gerekli olan yazılımlar, ilgili kitaplar ve dökümanlar İşlem Basamakları Tuval kontrollerini düzenleyiniz. Resim kontrollerini düzenleyiniz. Metin kontrollerini düzenleyiniz Öneriler Tuval (Canvas) kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazınız. <Canvas Background= AntiqueWhite > <Rectangle Canvas.Left= 35 Canvas.Top= 80 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Red /> <Rectangle Canvas.Left= 160 Canvas.Top= 62 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Blue /> <Rectangle Canvas.Left= 272 Canvas.Top= 36 Height= 200 Width= 200 Stroke= Yellow StrokeThickness= 5 Fill= Green /> </Canvas> Resim kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazdıktan sonra resmin geldiğini görebilirsiniz. <Grid> <Image Width= Auto Height= Auto HorizontalAligment= Stretch VerticalAligment= Stretch Source= ResimTaban.jpg Stretch= UniformToFill /> </Grid> Metin Bloğunu(TextBlock) kontrolünü uygulayınız. Aşağıdaki XAML kodunu yazınız. <TextBlock Name="textBlock1" TextWrapping="Wrap"> <Bold>TextBlock</Bold> is designed to be <Italic>lightweight</Italic>, and is geared specifically at integrating <Italic>small</Italic> portions of flow content into a UI. </TextBlock> <Button Width="100" Margin="10">Click Me</Button> <TextBlock Name="textBlock2" TextWrapping="Wrap" Background="AntiqueWhite" TextAlignment="Center"> </TextBlock> <Button Width="100" Margin="10">Click Me</Button> 41

47 KONTROL LİSTESİ Bu faaliyet kapsamında aşağıda listelenen davranışlardan kazandığınız beceriler için Evet, kazanamadığınız beceriler için Hayır kutucuğuna (X) işareti koyarak kendinizi değerlendiriniz. Değerlendirme Ölçütleri Evet Hayır 1 Tuval kontrollerini düzenlediniz mi? 2 Resim kontrollerini düzenlediniz mi? 3 Metin kontrollerini düzenlediniz mi? DEĞERLENDİRME Değerlendirme sonunda Hayır şeklindeki cevaplarınızı bir daha gözden geçiriniz. Kendinizi yeterli görmüyorsanız öğrenme faaliyetini tekrar ediniz. Bütün cevaplarınız Evet ise Ölçme ve Değerlendirme ye geçiniz. 42

48 ÖLÇME VE DEĞERLENDİRME Aşağıdaki soruları dikkatlice okuyunuz ve doğru seçeneği işaretleyiniz. 1. Aşağıdakilerden hangisi içerisine alacağı kontrolleri herhangi bir köşeden belirtilen uzaklıktaki noktaya yerleştiren panele verilen addır? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) 2. Aşağıdakilerden hangisi sabit metinlerin oluşturulması için kullanılan kümeleri temsil eden kontrole verilen addır? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) 3. Aşağıdakilerden hangisi, içeriği görüntülemek için küçük derecede bir kontrol sağlar? A ) Resim (Image) B ) Tuval (Canvas) C ) Metin Bloğu(TextBlock) D ) Kabartma (Glyphs) Aşağıdaki cümlelerde boş bırakılan yerlere doğru sözcükleri yazınız. 4. Resim boyutlandırmak için.. özelliğini kullanabiliriz. 5.. paneli daha çok grafiksel işlemlerde veya animasyon yapımında tercih edilir. 6. Bu. sayesinde bileşenlerin konumu noktasal olarak belirtebiliriz. DEĞERLENDİRME Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız. Cevaplarınızın tümü doğru ise bir sonraki öğrenme faaliyetine geçiniz. 43

49 ÖĞRENME FAALİYETİ 6 AMAÇ Dönüşüm ve animasyon işlemlerini yapacaksınız. ARAŞTIRMA Uygulama içinde kullanılan nesneler üzerinde gerçekleştiriniz. Döndürme işlemini gerçekleştiriniz. Ölçülendirme işlemini gerçekleştiriniz. Dönüştürme işlemini gerçekleştiriniz. Çarpıtma işlemini gerçekleştiriniz. Matris dönüşümlerini gerçekleştiriniz. Tetikleyicilerle çalışınız Olayları düzenleyiniz Geçmiş ekranını kullanınız Animasyon parametrelerini düzenleyiniz Anahtar çerçevelerle ilgili ihtiyaç duyulan düzenlemeleri gerçekleştiriniz. 6. DÖNÜŞÜM VE ANİMASYON Form uygulamalarında görsel olarak hissedilen eksikliklerden biri de kontrollerin açısal olarak kontrol edilememesidir. Bu sebep ile vektörel oluşumlar veya animasyon oluşturmada çok büyük eksiklikler vardı. Silverlight ta bulunan tüm kontrolleri veya elementleri kolaylıkla transformasyon işlemlerine aktarabiliriz. Temel olarak beş adet transformasyon işlemi vardır. Döndürme (Rotatetransform) Ölçeklendirme (Scaletransform) Dönüşüm (Translatetransform) Çarpıtma (Skewtransform) Matris (Matrixtransform) 6.1. Döndürme(RotateTransform) Silverlight ta bulunan element ve kontrollerin panel içerisindeki bulunuş açılarını değiştirerek rotasyona uğratma işlemlerini, bu transformasyon yöntemi ile gerçekleştirebilirsiniz. 44

50 Rotate Transform un Angle property si, sol üst köşe referans alınarak dönme hareketi gerçekleştirilir. Aşağıdaki XAML kodunu yazınız. <Grid> <ListBox Height= 100 HorizontalAligment= Left Margin= 213, 65, 0, 0 Name= ListBox1 VerticalAligment= Top Width= 120 > <ListBoxItem Content= Galatasaray /> <ListBoxItem Content= Fenerbahçe /> <ListBoxItem Content= Beşiktaş /> <ListBox.RenderTransform> <RotateTransform Angle= 90 ></ RotateTransform> </ListBox.RenderTransform> </ListBox> </Grid> Resim 6.1 : Rotate Transform 6.2. Ölçeklendirme (ScaleTransform) Silverlight ta bulunan element ve kontrollerin boyutlarını yatay ve dikey eksende değiştirerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. ScaleX ve ScaleY property leri sayesinde yatay ve dikey eksendeki büyüklüklerini belirtebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Button Content= Button Height= 23 HorizontalAligment= Left Margin= 79, 160, 0, 0 Name= button1 VerticalAligment= Top Width= 75 > <Button.RenderTransform> <ScaleTransform ScaleX= 3 ScaleY= 2 > </ScaleTransform> </Button.RenderTransform> </Button> 45

51 <Button Content= Button Height= 23 HorizontalAlignment= Left Margin= 91, 110, 0, 0 Name= button2 VerticalAligment= Top Width= 75 /> </Grid> Resim 6.2 : Scale Transform 6.3. Dönüşüm (TranslateTransform) Silverlight ta bulunan element ve kontrollerin boyutlarını yatay ve dikey eksenlerinde istenilen birim kadar öteleyerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. X ve Y property leri ile öteleme işlemini gerçekleştirebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Height= 100 HorizontalAlignment= Left Margin= 114, 90, 0, 0 Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 200 Fill= #FF935E5E > <Ellipse.RenderTransform> <TranslateTransform X= 25 Y= 5 > </TranslateTransform> </ Ellipse.RenderTransform> </ Ellipse > </Grid> 46

52 6.4. Çarpıtma (SkewTransform) Resim 6.3 : Translate Transform Silverlight ta bulunan element ve kontrolleri X ve Y eksenlerinde bükerek rotasyona uğratma işlemlerini bu transformasyon yöntemi ile gerçekleştirebilirsiniz. AngleX ve AngleY property leri ile nesneyi X ve Y eksenlerinde tanımlanan açı ile eğebilirsiniz. Aşağıdaki XAML kodunu yazınız. <Grid> <Image Height= 121 HorizontalAlignment= Left Margin= 85,39, 0, 0 Name= image1 Stretch= Fill VerticalAligment= Top Width= 300 Source= /SilverlightApplication3;component/images/P jpg > <Image.RenderTransform> <SkewTransform AngleX= 25 AngleY= 5 /> </ Image.RenderTransform> </ Image > </Grid> Resim 6.4 : Skew Transform 47

53 6.5. Matris (MatrixTransform) Silverlight ta bulunan element ve kontrollere 3x3 matris algoritmaları uygulayabilmek için kullanılan transformasyon yöntemidir. Daha çok resim işleme yöntemlerinde kullanılmaktadır. M11:Matrisin (1,1) elemanıdır. M12: Matrisin (1,2) elemanıdır. M21: Matrisin (2,1) elemanıdır. M22: Matrisin (2, ) elemanıdır. OffsetX: Matrisin (3,1) elemanıdır. OffsetY: Matrisin (3,2) elemanıdır. Aşağıdaki XAML kodunu yazınız. <Grid> <Button Content= Button Height= 23 HorizontalAlignment= Left Margin= 37,20, 0, 0 Name= button1 VerticalAligment= Top Width= 75 > <Button.RenderTransform> <MatrixTransform> <MatrixTransform.Matrix> <Matrix OffsetX= 0.2 OffsetY= 1 M11= 4.2 M12= 2.5 M21= 1 M22= 2 /> </ MatrixTransform.Matrix > </MatrixTransform> </Button.RenderTransform> </Button > </Grid> Resim 6.5 : Matrix Transform 48

54 6.6. Tetikleyiciler (Trigger ve Event Triggerlar) TriggerBase sınıfında türeyen trigger ları daha detaylı bir şekilde diğer bölümlerde inceleyeceksiniz. XAML ile oluşturulan animasyonların ne zaman başlayacağını ya da ne zaman biteceğini trigger lar aracılığıyla belirlenir. Bu işlemler, EventTrigger a bağlı olarak tanımlanan olaylar sayesinde gerçekleştirilir. EventTrigger sınıfının RoutedEvent property si ile animasyonun hangi event ile tetikleyeceği belirtilmektedir. SourceName property si ise hangi nesnenin event ini tetikleyeceğinizi belirler. Aşağıdaki XAML kodunu yazınız. <Grid> <Ellipse Height= 150 HorizontalAlignment= Left Name= ellipse1 Stroke= Black VerticalAligment= Top Width= 200 > < Ellipse.Triggers > <EventTrigger RoutedEvent= Ellipse.MouseEnter > <!Animasyon işlemleri> < EventTrigger > < EventTrigger RoutedEvent= Ellipse.MouseLeave > <!Animasyon işlemleri> </ EventTrigger > </ Ellipse.Triggers > </ Ellipse > </Grid> 6.7. Geçmiş (BeginStoryboard ve Storyboard) Silverlight ta tüm animasyon işlemlerinin gerçekleştiği sınıftır. Storyboary sınıfı TimeLine sınıfından türemiştir. Storyboard sınıfının alt üyeleri sayesinde kontrolün hangi özelliğinin ne derecede değişeceği belirlenir. XAML ile oluşturulan Storyboard elementinin TargetName ve TargetProperty isimli iki attached property si vardır. TargetName, animasyona dahil edilecek nesnenin ismidir. TargetProperty ise nesnenin dependency-property sinin ismidir. Codebehind tarafında progmatik olarak Set-TargetName ve SetTargetProperty metotları ile belirlenir. BeginStoryboard event gerçekleştiği zaman Storyboard u başlatır. Storyboard sınıfının metotlarından bazıları ve işlevleri aşağıdaki gibidir. Begin(): Animasyonu başlatmak için kullanılır. GetCurrnetState(): Animasyon üzerinde mevcut konumu almayı sağlar. GetCurrnetTime(): Animasyon üzerinde mevcut zamanı almayı sağlar. Pause(): Animasyonun duraklatılmasını sağlar. Resume(): Animasyonun duraklatıldıktan sonra, kaldığı yerden devamını sağlar. Stop(): Animasyonun durdurulmasını sağlar. Seek(): TimeSpan türünde bir zaman alır ve animasyonun bu zamana atlamasını sağlar. 49

55 SkipToFill(): Animasyonun sonuna atlama yapmayı sağlar. Animasyonu sonlandırır Animasyon parametreleri Animasyon türleri aşağıda verilmektedir. Double Animation: Temel animasyon türlerinden biri olan DoubleAnimation sınıfı, nesneleri başlangıç ve bitiş değerleri arasında özelliğini değiştirmektedir. Bu değerler Double tipinde ve DependencyProperty si ile başlangıç değeri ve To property si ile bitiş değeri belirlenir. o By property si Form ve To property lerinin değerleri arasındaki artış miktarını belirler. Yani yüksekliği 20 ile 260 arasında olan bir dairenin yüksekliğini belirli aralıklarla 20 birim artırır. o RepeatBehavior property si; animasyonun kaç defa tekrar edeceğini belirler. RepeatBehavior= Forever tanımlanırsa animasyon devamlı tekrar edecektir. Belirli bir sayı kadar tekrar etmesini istersek RepeatBehavior= 3x şeklinde atama yapmanız gerekecektir. o AutoReserve property sine true atanarak, animasyon bittikten sonra animasyonun tersten ilk değerine dönmesi için kullanılır. o Duration property si animasyonun süresini belirlememizi sağlar. Saat, dakika, saniye şeklinde süre verilmesi gerekir. Kısaca Time Line nı belirler. o SpeedRatio property si animasyonun hızını belirler. Herhangi bir değer belirtilmez ise, 1 değerini alır. 10 saniyelik bir animasyonda SpeedRatio property si 5 atanmışsa animasyon 2 saniye sürecektir. ColorAnimation: ColorAnimation sınıfı; IU Element lerin arkaplan renginin farklı bir renge geçişini animasyon olarak sağlamaktadır. ColorAnimation sınıfında From property si ile başlangıç rengi, To property si ile bitiş rengi belirlenir. AutoReserve property sine true atanarak, animasyon bittikten sonra, animasyonun son renkten ilk renge dönmesi sağlanacaktır. PointAnimation: Silverlight ta içerisinde bulunan element ve kontrollerin konumun point türünde animasyon ile değişmesini gerçekleştiren animasyon türüdür Anahtar Çerçeveler (Key Frame) Basit animasyon türlerinde yapılan her from, to ve by üzerinde gerçekleştirilir. Bu animasyonlarda sadece toplam animasyon süresi belirtilebilir, ama süreye müdahale yapılamamaktadır. Key Frame animasyonlar, bir zaman çizgisi üzerinde gerçekleşir. Bu zaman çizgisi üzerinde animasyonun her saniyesine ulaşabilir ve kullanılan nesne üzerinde değişiklik yapılabilir. İşte bir animasyonun süreleri arasında nesneler ile yapılan değişiklikleri Key Frame ler temsil eder. Kısaca Key Frame, animasyondaki kilit karelerdir. Zaman çizgili üzerinde istenilen saniyedeki nesnenin durumunu değiştirmek için o noktaya Key Frame ler arasında kalan parçaları Silverlight doldurur. 50

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ GELİŞMİŞ İNTERNET UYGULAMALARINDA TASARIM ARAÇLARI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında

Detaylı

Windows form uygulamalarından alışık olduğumuz sabit piksel koordinatları, WPF ile son buldu. WPF uygulamaları farklı çözünürlüklerde çalışsalar bile

Windows form uygulamalarından alışık olduğumuz sabit piksel koordinatları, WPF ile son buldu. WPF uygulamaları farklı çözünürlüklerde çalışsalar bile Windows form uygulamalarından alışık olduğumuz sabit piksel koordinatları, WPF ile son buldu. WPF uygulamaları farklı çözünürlüklerde çalışsalar bile görüntü kaybı olmamaktadır. Bu yüzden tasarım yapılarının

Detaylı

1 SILVERLIGHT A G R fi 2 KONTROLLER 3 DÜZEN PANELLER

1 SILVERLIGHT A G R fi 2 KONTROLLER 3 DÜZEN PANELLER ++SILVERLIGHT-icindekiler 9/12/11 4:17 PM Page vii Ç NDEK LER 1 SILVERLIGHT A G R fi 1 Girifl 1 Windows Presentation Foundation (WPF) Nedir? 2 WPF n Kazand rd klar 3 Silverlight Nedir? 4 Silverlight ile

Detaylı

2003 yılında P.D.C. de WPF in duyurulması ile beraber yazılım alanında farklılaşmanın başladığını gördük. İlk değişim, tasarım kodlama alanının

2003 yılında P.D.C. de WPF in duyurulması ile beraber yazılım alanında farklılaşmanın başladığını gördük. İlk değişim, tasarım kodlama alanının 2003 yılında P.D.C. de WPF in duyurulması ile beraber yazılım alanında farklılaşmanın başladığını gördük. İlk değişim, tasarım kodlama alanının codebehind dan ayrılması oldu. Tasarım alanının kendi içerisinde

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI GEMİ YAPIMI BAŞ BLOK RESMİ 521MMI400

T.C. MİLLÎ EĞİTİM BAKANLIĞI GEMİ YAPIMI BAŞ BLOK RESMİ 521MMI400 T.C. MİLLÎ EĞİTİM BAKANLIĞI GEMİ YAPIMI BAŞ BLOK RESMİ 521MMI400 Ankara, 2011 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

BİLİŞİM TEKNOLOJİLERİ

BİLİŞİM TEKNOLOJİLERİ T.C. MİLLÎ EĞİTİM BAKANLIĞI BİLİŞİM TEKNOLOJİLERİ VERİ TABANI YÖNETİMSEL FONKSİYONLARI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

1 WPF E G R fi 2 KONTROLLER

1 WPF E G R fi 2 KONTROLLER Ç NDEK LER 1 WPF E G R fi 1 Windows Presentation Foundation (WPF) Nedir? 2 WPF n Kazand rd klar 3 WPF ile Bafllang ç 4 XBAP (XAML Browser Applications) 6 XAML (Extensible Application Markup Language) 7

Detaylı

EL SANATLARI TEKNOLOJİSİ

EL SANATLARI TEKNOLOJİSİ T.C. MİLLÎ EĞİTİM BAKANLIĞI EL SANATLARI TEKNOLOJİSİ KİLİM DOKUMA-2 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ DÜZ ÖRME KADIN PANTOLON KALIPLARI 542TGD518

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ DÜZ ÖRME KADIN PANTOLON KALIPLARI 542TGD518 T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ DÜZ ÖRME KADIN PANTOLON KALIPLARI 542TGD518 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer

Detaylı

Yrd. Doç. Dr. Caner ÖZCAN

Yrd. Doç. Dr. Caner ÖZCAN Yrd. Doç. Dr. Caner ÖZCAN Grafik Programlama Bilgisayar kullanılırken monitörlerde iki tür ekran moduyla karşılaşılır. Bu ekran modları Text modu ve Grafik modu dur. Text modunda ekran 25 satır ve 80 sütundan

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI YENİLENEBİLİR ENERJİ TEKNOLOJİLERİ GÖRÜNÜM VE ANİMASYON

T.C. MİLLÎ EĞİTİM BAKANLIĞI YENİLENEBİLİR ENERJİ TEKNOLOJİLERİ GÖRÜNÜM VE ANİMASYON T.C. MİLLÎ EĞİTİM BAKANLIĞI YENİLENEBİLİR ENERJİ TEKNOLOJİLERİ GÖRÜNÜM VE ANİMASYON Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ KORD ÖRGÜLER 542TGD706

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ KORD ÖRGÜLER 542TGD706 T.C. MİLLÎ EĞİTİM BAANLIĞI TESTİL TENOLOJİSİ ORD ÖRGÜLER 54TGD706 Ankara, 011 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

HTML Etiketleri Genel Özellikler (Global Attributes)

HTML Etiketleri Genel Özellikler (Global Attributes) HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel

Detaylı

ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3

ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3 ÖĞRENME FAALİYETİ 3 AMAÇ Bu öğrenme faaliyeti ile tasarım düzenlemelerini yapabileceksiniz. ARAŞTIRMA Tema ne demektir? Temayı oluşturan ögeler nelerdir? Araştırınız. Arka plan ne demektir?

Detaylı

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )

12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ ÇORAPTA FORM 542TGD503

T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ ÇORAPTA FORM 542TGD503 T.C. MİLLÎ EĞİTİM BAKANLIĞI TEKSTİL TEKNOLOJİSİ ÇORAPTA FORM 542TGD503 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

1 UNIVERSAL WINDOWS UYGULAMA GELIŞTIRMEYE GIRIŞ

1 UNIVERSAL WINDOWS UYGULAMA GELIŞTIRMEYE GIRIŞ İÇİNDEKİLER VII İÇİNDEKİLER 1 UNIVERSAL WINDOWS UYGULAMA GELIŞTIRMEYE GIRIŞ 1 Bu Kitap Kimlere Hitap Ediyor? 1 UWP - Universal Windows Platform Nedir? 2 Universal Windows Geliştirmenin Desteklendiği İşletim

Detaylı

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama

Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının

Detaylı

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

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 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

Detaylı

ELSANATLARI TEKNOLOJİSİ

ELSANATLARI TEKNOLOJİSİ T.C. MİLLÎ EĞİTİM BAKANLIĞI ELSANATLARI TEKNOLOJİSİ TIĞ ÖRÜCÜLÜĞÜNDE KROŞE ÇEŞİTLERİNDEN FARKLI DOKULAR OLUŞTURMA 215ESB482 Ankara, 2011 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve

Detaylı

Javascript Geliştiricileri İçin Xaml Ve Microsoft Silverlight

Javascript Geliştiricileri İçin Xaml Ve Microsoft Silverlight Wpf tabanlı (windows presentation foundation) browser eklentisi hakkında bir sunum Nedir? Genel Bakış Uyumluluk Moonlight Lisans XAML Elementler Animasyon Scripting Sonuç 1 Nedir?, web (browser) uygulamaları

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI GRAFİK VE FOTOĞRAF TORS 211GS0046

T.C. MİLLÎ EĞİTİM BAKANLIĞI GRAFİK VE FOTOĞRAF TORS 211GS0046 T.C. MİLLÎ EĞİTİM BAKANLIĞI GRAFİK VE FOTOĞRAF TORS 211GS0046 Ankara, 2012 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,

5. Tablo İşlemleri. Bu bölümü bitirdiğinizde, 5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların

Detaylı

Ekran 1 : Font Komutları Dosyası ekranı

Ekran 1 : Font Komutları Dosyası ekranı 27 Ekim 2010 Đlgili Versiyon/lar : ETA:SQL, ETA:V.8-SQL Đlgili Modül/ler : ETASQLFORM DĐZAYNLARDA FARKLI FONT LU YAZI TĐPĐ KULLANIMI ETASQL Doküman Düzenleyicisi olan ETASQLFORM.EXE ile Fatura, Sipariş,

Detaylı

7. Çerçeveler. Bu bölümü bitirdiğinizde,

7. Çerçeveler. Bu bölümü bitirdiğinizde, 7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde

Detaylı

GoFeed Kullanıcı Arayüzü

GoFeed Kullanıcı Arayüzü GoFeed Kullanıcı Arayüzü GoFeed temel olarak yayıncıların, reklamverenlerin ürün/fırsat bilgilerine ulaşabildiği feed sistemidir. Yayıncılar oluşturdukları feedler ile kullanıcıları ürünlerin/fırsatların

Detaylı

GİYİM ÜRETİM TEKNOLOJİSİ

GİYİM ÜRETİM TEKNOLOJİSİ T.C. MİLLÎ EĞİTİM BAKANLIĞI GİYİM ÜRETİM TEKNOLOJİSİ ABİYE ELBİSE KALIBI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI

T.C. MİLLÎ EĞİTİM BAKANLIĞI T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) SERAMİK VE CAM TEKNOLOJİSİ TIRNAKLI YAPRAK -2 ANKARA 2007 Milli Eğitim Bakanlığı tarafından geliştirilen

Detaylı

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman

Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman 7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver

Detaylı

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu

MS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu MS WORD 5. BÖLÜM Bölüm Adı: SAYFA DÜZENİ Bölümün Amacı: Sayfa yapısı ve düzenini değiştirmek. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Ofis temalarını bilir. 2. Kenar boşluklarını, sayfa yönlendirmesini,

Detaylı

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek

HTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda

Detaylı

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR

ÖĞRENME FAALİYETİ 1 ÖĞRENME FAALİYETİ 1 1. FORMLAR ÖĞRENME FAALİYETİ 1 AMAÇ ÖĞRENME FAALİYETİ 1 Uygun ortam sağlandığında web sayfaları için formlar oluşturabileceksiniz. ARAŞTIRMA Web sayfalarında formların kullanım amaçlarını ve nasıl kullanıldığını

Detaylı

MODÜL 3 HTML İLE STİL ŞABLONLARI

MODÜL 3 HTML İLE STİL ŞABLONLARI MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.

Detaylı

HESAP MAKİNASI YAPIMI

HESAP MAKİNASI YAPIMI HESAP MAKİNASI YAPIMI 1..Aşağıdakine benzer görünüm ve butonları hazırlayın. 2. 24. Butonun içerisine aşağıdaki kodları yazın. 3. Yeni bir layer ekleyip Frame1 F9 na aşağıdaki kodları ekleyelim. 4. Butonlardan

Detaylı

2. Belgeye Metin Ekleme

2. Belgeye Metin Ekleme METİN İŞLEMLERİ Flashta 2 çeşit metin vardır:1)tlf metni 2)Klasik metin 1)TLF Metni : CS5 ile başlayan metin türü. TLF metni FLA dosyanızın yayınlama ayarlarında ActionScript 3.0 ve Flash Player 10 veya

Detaylı

T.C. MİLLİ EĞİTİM BAKANLIĞI RAYLI SİSTEMLER SİNYALİZASYON SİSTEMLERİNDEKİ ENERJİ KAYNAKLARI

T.C. MİLLİ EĞİTİM BAKANLIĞI RAYLI SİSTEMLER SİNYALİZASYON SİSTEMLERİNDEKİ ENERJİ KAYNAKLARI T.C. MİLLİ EĞİTİM BAKANLIĞI RAYLI SİSTEMLER SİNYALİZASYON SİSTEMLERİNDEKİ ENERJİ KAYNAKLARI Ankara, 2013 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer

Detaylı

Metin Tabanlı İçerik Oluşturma Araçları

Metin Tabanlı İçerik Oluşturma Araçları Metin Tabanlı İçerik Oluşturma Araçları Microsoft Office Word Kelime işlemci, görsel nesnelerin veya çizimlerin resim ya da arka plan olarak kullanıldığı metinler oluşturabilen, harita ve tablo gibi şekiller

Detaylı

ASP.NET ile Bir Web Sitesi Oluşturma

ASP.NET ile Bir Web Sitesi Oluşturma 29,30 Eylül 2011 ASP.NET ile Bir Web Sitesi Oluşturma ASP.NET sitesi oluşturmak için File menüsündeki, New açılır listesindeki, Web Site komutuna tıklıyoruz Açılan pencereden C# içindeki ASP.NET Web Site

Detaylı

Emre KAYRIN TEMEL ŞEKİL OLUŞTURMA ARAÇLARI

Emre KAYRIN TEMEL ŞEKİL OLUŞTURMA ARAÇLARI Emre KAYRIN TEMEL ŞEKİL OLUŞTURMA ARAÇLARI 1 ILLUSTRATOR CS6 TEMEL ŞEKİL OLUŞTURMA ARAÇLARI A B Illustrator programında en temel şekilleri oluşturmak için, yukarıda gördüğümüz Rectangle Tool ile başlayan

Detaylı

CSS(CASCADING STYLE SHEETS)

CSS(CASCADING STYLE SHEETS) CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki

Detaylı

HTML Bloklar. CSS Display özelliği

HTML Bloklar. CSS Display özelliği HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün

Detaylı

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI

2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI 2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI İşletim Sisteminde Yapılan Uygulamalar Bir Bilgisayarda Hangi İşletim Sistemi Yüklü Olduğunu

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI

T.C. MİLLÎ EĞİTİM BAKANLIĞI T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKÎ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) GİYİM ÜRETİM TEKNOLOJİSİ KADIN SPOR PANTOLON KALIBI ANKARA 2006 Milli Eğitim Bakanlığı tarafından geliştirilen

Detaylı

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır.

HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. HTML Ders 5 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine

Detaylı

2. HTML Temel Etiketleri

2. HTML Temel Etiketleri 2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,

Detaylı

www.elektrikogretmenleri.com

www.elektrikogretmenleri.com FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni

Detaylı

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN

HTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) TESİSAT TEKNOLOJİSİ VE İKLİMLENDİRME

T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) TESİSAT TEKNOLOJİSİ VE İKLİMLENDİRME T.C. MİLLÎ EĞİTİM BAKANLIĞI MEGEP (MESLEKİ EĞİTİM VE ÖĞRETİM SİSTEMİNİN GÜÇLENDİRİLMESİ PROJESİ) TESİSAT TEKNOLOJİSİ VE İKLİMLENDİRME SOĞUK SU HAZIRLAMA (CHİLLER) GRUBU MONTAJI ANKARA 2008 Milli Eğitim

Detaylı

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.

Web sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur. Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.

Detaylı

T.C. MİLLÎ EĞİTİM BAKANLIĞI DENİZCİLİK IĞRIP AVCILIĞI 624B00028

T.C. MİLLÎ EĞİTİM BAKANLIĞI DENİZCİLİK IĞRIP AVCILIĞI 624B00028 T.C. MİLLÎ EĞİTİM BAKANLIĞI DENİZCİLİK IĞRIP AVCILIĞI 624B00028 Ankara, 2011 Bu modül, mesleki ve teknik eğitim okul/kurumlarında uygulanan Çerçeve Öğretim Programlarında yer alan yeterlikleri kazandırmaya

Detaylı

Paint. , Tüm Programlar, Donatılar ve ardından

Paint. , Tüm Programlar, Donatılar ve ardından Donatılar-Paint Paint Paint, çizimler oluşturmak ve dijital resimleri düzenlemek için kullanabileceğiniz bir çizim programıdır. Paint i, farklı dosya biçimlerini kullanarak resim dosyalarını kaydetmek

Detaylı

5. Hafta Kontrollerin Genel Özellikleri BPR251 Görsel

5. Hafta Kontrollerin Genel Özellikleri BPR251 Görsel 1. En çok kullanılan Kontrol Özellikleri Location Height Text Width Location: Bir kontrolün form veya başka bir kontrol üzerindeki konumunu belirtir. Location özelliğinin aslında bir nokta (Point) nesnesidir.

Detaylı

AMAÇ Araçlardaki Kamera Sistemleri

AMAÇ Araçlardaki Kamera Sistemleri SUNU PLANI AMAÇ OPEN CV GÖRÜNTÜ EŞİKLEME KENAR BULMA ŞEKİL BULMA GÖRÜNTÜ GENİŞLETME VE BOZMA GÖRÜNTÜ DOLDURMA AFFİNE DÖNÜŞÜMÜ PERSPEKTİF DÖNÜŞÜM KUŞ BAKIŞI GÖRÜNTÜ DÖNÜŞÜMÜ AMAÇ Araçlardaki Kamera Sistemleri

Detaylı

TEKNİK RESİM DERSİ. Modüller Geometrik Çizimler. Görünüş Çıkarma. Ölçülendirme ve Perspektif

TEKNİK RESİM DERSİ. Modüller Geometrik Çizimler. Görünüş Çıkarma. Ölçülendirme ve Perspektif TEKNİK RESİM DERSİ Modüller Geometrik Çizimler Görünüş Çıkarma Ölçülendirme ve Perspektif DERS BİLGİ FORMU DERSİN ADI ALAN MESLEK / DAL DERSİN OKUTULACAĞI SINIF/YIL SÜRE DERSİN TANIMI DERSİN AMACI DERSİN

Detaylı

WEB TASARIMININ TEMELLERİ

WEB TASARIMININ TEMELLERİ WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri

Detaylı

DIV KAVRAMI