Sıfırdan Web Sitesi Yapalım (Bölüm 2)

Merhaba arkadaşlar,

Bu dersimizde bir video sitesinin en başından başlayarak tasarımını nasıl yaptığımızı göstereceğim. Tamamı ile CSS kullacağız.

Bu video 65 dakika uzunluğundadır. Ama bu sefer arkaplanda müzik çalmıyor 🙂

http://vimeo.com/moogaloop.swf?clip_id=10789073&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

İyi çalışmalar diliyorum herkese.

Umarım işinize yarar.

 

3D İkon Yapalım

Bu dersimizde 3 boyutlu güzel bir ikonun nasıl yapıldığını anlatacağım. Umarım faydalı olur.

http://vimeo.com/moogaloop.swf?clip_id=10403883&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1

 

Fotoğraflar ile Slideshowlar Yapalım

Fotoğraflar ile action script kullanarak slide showlar yapalım.

Boyut: 15 MB
Sunucu: Rapidshare.Com

İndirmek için Tıklayın

 

Deniz Topu Yapalım

1-Bugünkü dersimizde birlikte bir deniz topu yapalım. Önce şekildeki gibi bir dikdörtgen çiziyoruz.

2-Effect – Distor & Transform – Transform seçeneği tıklanır

3-Aşağıdaki şekildeki ayarlar yapılır. OK tuşuna basılır.

4-Object – Expand – Appearance seçeneği tıklanır. Bunun amacı şekilleri parçalayıp, her birini bağımsız hareket ettirebilmek

5-Daha sonra şeklin üzerine sağ tıklanır. Ungroup ile grup çözülür

6-Herbiri tek tek seçilip, istenilen renklerle doldurulur

7-Daha sonra bu şekillerin hepsi birden seçilir. Symbols penceresine sürüklenir. Ve bir sembol haline getiririz.

8-Sonra bir daire çizip, yanına şekildeki gibi dikdörtgen çizeriz. (Dikdörtgen üste olacak şekilde)

9-İki şekli seçip, Pathfinder penceresinden aşağıdaki seçeneği tıklıyoruz. Ve çemberin yarısını kesiyoruz

10-Daha sonra Yarım çemberi seçip, Effect – 3D – Revolve seçeneğini tıklıyoruz.

11-Revolve penceresinde "Map Art" seçenğini tıklıyoruz.

12-Symbol penceresinden eklediğimiz renkli şekilleri seçiyoruz. Alttaki "Scale to fit" seçeneğini tıklıyoruz.

13-Tamam tuşuna basıp pencereyi kapattığımızda nur topu gibi bir Deniz topumuz oluyor.

İyi çalışmalar diliyorum. Her şey fani Muhabbet Baki….

 

Başarı Sertifikası Yapalım

Rotate – Align Araçlarının Kullanımı ile bir başarı sertifikası hazırlamaya ne dersiniz?

1-İlk önce hazır halini gösterelim:

2-Bir tane elips çizelim Rengini şekildeki gibi yapalım. Renk ayarları için . Şeklin üzerine sağ tıklayın. "Properties" i tıklayın. Sağa tarafa Object Properties gelecektir.
Burada dolgu renkleri bölmesinden Uniform Fill seçeneğini seçerek çift renk ile dolgu rengi verin

3-Sonra çemberi shift tuşunu basılı tutarak küçültün. Mouse bırakmadan farenin sağ tuşunu tıklayarak şekildeki gibi bir kopyasını alın

4-Şeklinizi ikinci kez tıkladığınızda döndürme tutamaçları aktif hale gelecektir. Şeklin ortasındaki yuvarlağo farenin sol tuşu ile tutup büyük çemberin tam merkezine sürükleyin.

Böylece küçük çemberleri büyük çemberin merkezine göre dönüdürüp çoğaltabilirsiniz.

Küçük çemberleri farenin sol tuşu ile sürüklerken farenin sağ tuşuna basarsanız bir kopyasını alırsınız. Aynı işlemi yinelemek için CTRL – R tuşlarına basabilirsiniz.

5-Sonra Rentangle (dikdörtgen aracınıza çift tıklayın. Ekrana sığacak şekilde bir dikdörtgen ekleyecektir. Rengini istediğiniz bir renk verin.

6-Aynı çerçeveden bir tane çoğaltın ve şekildeki gibi küçültün. KEnarlarına zevkinize göre dairelerden veya çiçeklerden oluşan çiçeklerden ekleyin
Bunlardan alt alta çoğaltın. Aralarındaki mesafeleri ayarlamak için Align penceresini açın.Buradan ilgili seçeneklerle aralarındaki boşlukları eşitleyin.

7-Şekildeki gibi döşeyin. İstediğiniz renkleri kullanabilirsiniz. Zevk sizin.

8-Sonra yazılarınızı ve küçük çemberler için clipart resimlerinizi ekleyin. Ortaya da faaliyeti anlatan bir resim koyun. Hepsi bu kadar.

Umarım istifadeli olmuştur. İyi çalışmalar diliyorum –

 

Basit bir CSS Şablon Yapalım

CSS ile sadece menü ve içerikten oluşan bir sayfa oluşturalım

<style>
#govde {
	margin: 0;
}

#menu {
	width: 200px;
	float: left;
	background-color: #ccc;
}

#icerik {
	margin-left: 210px;
	background-color: #ff0000;
}
</style>

<div id="govde">
	<div id="menu"> menü alanı </div>
	<div id="icerik"> içerik alanı </div>
</div>

Kodları html olarak kaydedip çalıştıracak olursanız solda 200 piksellik bir menü alanının ve hemen sağında içerik alanının oluştuğunu göreceksiniz.

 

Parçacık Animasyonu Yapalım

Bu dersimizde belirlediğimiz müzikteki bass ve treeble ayarlarına göre particular efekti ile parçacık animasyonu yapacağız.

http://blip.tv/play/hrx_goznUQA

 

Scrollbarla Kayan Bayrak Resmi Yapalım

Dreamweaver ile Srollbarla Kayan Bayrak Resmi Yapımının ne kadar basit yapıldığını göreceğiz.

Siteniz için kullanabileceğiniz çok güzel bir uygulama olduğunu düşünüyorum.

http://blip.tv/play/hrx_gozjEwA

 

Bir Browser Yapalım

Basic.net kullanarak bir browser yapalım bu dersimizde.

Evet arkadaşlar, şimdi bir browser yapıcağız. Bunun için formumuzda kullanacağımız araçlarımız:

1-StatusStrip
2-ToolStrip
3-Timer
4-WebBrowser
5-StatusStrip üzerine (1 tane ToolStripStatusLabel, 1 tane ToolStripProgressBar)
6-ToolStrip üzerine (1 tane ToolStripLabel, 1 tane ToolStripTextBox, 1 tane ToolStripButton)

nesnelerini ekliyoruz ve kodlarımız yazmaya başlıyoruz.

ToolStripButton1_Click

 ToolStripProgressBar1.Value = 0
        Timer1.Start()
        WebBrowser1.Navigate(ToolStripTextBox1.Text)

Form1_Load

 ToolStripStatusLabel1.Text = "Form Yüklendi"
        Timer1.Stop()

Timer1_Tick

    ToolStripProgressBar1.Value = ToolStripProgressBar1.Value + 10
        ToolStripStatusLabel1.Text = ToolStripTextBox1.Text + " Sayfa Yükleniyor"
        If ToolStripProgressBar1.Value = 100 Then
            ToolStripProgressBar1.Value = 0
        End If

WebBrowser1_DocumentCompleted

Timer1.Stop()
        ToolStripStatusLabel1.Text = ToolStripTextBox1.Text + " Sayfa Yüklendi"

İsterseniz daha da geliştirebilirsiniz. Kolay gelsin.

 

Gün Hesaplayıcı Yapalım

Bu derste hangi gün doğduğunuzu ve ne zaman doğum gününüz olduğunu hesaplayan küçük bir uygulama yapalım.

Aşağıdaki resim gibi görsel hazırlıyoruz. Yani formumuza 1 adet textbox, 2 adet buton, 2 adet label ekliyoruz.

Labellerin text özelliğini ekranda görüldüğü gibi yazıyoruz.

Public class form1

  Dim d_tarih, gun

button1_click

        Do
            d_tarih = TextBox1.Text
        Loop While Not IsDate(d_tarih)
        Select Case Weekday(d_tarih)
            Case 1 : gun = "Pazar"
            Case 2 : gun = "Pazartesi"
            Case 3 : gun = "Salı"
            Case 4 : gun = "Çarşamba"
            Case 5 : gun = "Perşembe"
            Case 6 : gun = "Cuma"
            Case 7 : gun = "Cumartesi"
        End Select
        MsgBox(gun & " Günü Doğmuşsunuz", MsgBoxStyle.Information, "SONUÇ")

button2_click

    d_tarih = TextBox1.Text
        If d_tarih <= Now.Date Then
            MsgBox("Daha geçerli bir tarih giriniz.")
        Else
            Do
            Loop While Not IsDate(d_tarih)
            Select Case Weekday(d_tarih)
                Case 1 : gun = "Pazar"
                Case 2 : gun = "Pazartesi"
                Case 3 : gun = "Salı"
                Case 4 : gun = "Çarşamba"
                Case 5 : gun = "Perşembe"
                Case 6 : gun = "Cuma"
                Case 7 : gun = "Cumartesi"
            End Select
            MsgBox(gun & " Günü Doğum Gününüz.", MsgBoxStyle.Information, "SONUÇ")
        End If

Hepsi bu kadar.