Menü (Navigasyon) Yapımı

Slides:



Advertisements
Benzer bir sunumlar
BILM454 – XML ve XML Web Servisleri
Advertisements

HTML e GİRİŞ Temel HTML etiketleri.
CSS.
HTML’e Devam Uygulama.
SAYFAYA İÇERİK EKLEMEK
IT504 ~~CSS~~ Basamaklı Stil Sayfaları
Sık Kullanılan Kontroller
IT504 ~~DOM~~ Belge Nesne Modeli II
HTML, XHTML and CSS XHTML
HTML’ ye Giriş Uzm. Murat YAZICI.
WEB EDİTÖRÜ STİL SAYFALARI GELİŞTİRMEK
Sürekli Eğitim, Araştırma Öğr. Gör. Murat HACIMURTAZAOĞLU
MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme
Slayt Efektleri.
STİL SAYFALARI GELİŞTİRMEK
TABLOLARLA TASARIM YAPMAK
MIT504 İnternet ve Web Programlama: HTML ve Web Tasarımı İlkeleri
DREAMWEAVER GİRİŞ.
CSS Öğr.Gör. Şükrü KAYA.
Tablosuz Tasarım Div ler.
CSS CSS- Cascading Style Sheets: Stil şablonları HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.
BÖLÜM VI HTML.
ÖDEVLER 1-Listeleme etiketleri 2-Color 3-Sayfa içinde bağlantı oluşturma Hilal BAYIR 2344 TUZLA TEKN İ K OKULLARI.
IT504 Javascript çerçeveleri
Kutu Modeli Özellikleri
IT 504 İnternet ve Web Programlama Tanıtım Yrd. Doç. Yuriy Mishchenko.
İNTERNET PROGRAMCILIĞI I BTP 207 Ders 6. Metinleri biçimlendirmek için kullanılır. Özellikleri ve aldıkları değerler:  Color: Metnin rengini belirler.
Frame (Çerçeve) Kullanımı
CSS’de Class ve ID. ID Bir HTML dosyasının içeriğinde, sadece bir öğeye verilebilecek bir değerdir. id tektir. id'ler sayfada sadece tek bir html etiketine.
Kullanıcı adı ve şifrenizi bu alanlara girip “Log In” kutucuğunu tıklayın. Client Center’ e ulaşmak için //clientcenter.serialssolutions.com yazmanız yeterlidir.
C#.NET 5.0 C# .NET 5.0 Eğitimleri Volkan KANAT.
Yrd. Doç. Dr. Yuriy Mishchenko
STİL ŞABLONU (CSS) ÖZELLİKLERİ
SOSYAL BİLGİLER ÖĞRETMENLİĞİ BİLGİSAYAR 2 NOT 2
CSS – Stil Şablonları (Cascading style Sheet)
Yrd. Doç. Dr. Yuriy Mishchenko
CSS İle Menü Oluşturma.
Cascading Style Sheets (Stil Şablonları)
XML ve XML Teknolojileri
Metin (Text) Özellikleri
Liste Özellikleri Html etiketlerinden bildiğimiz sıralı (ordered) ve sırasız (unordered) listelere stil vermek için liste özelliklerini kullanacağız. Sıralı.
İNTERNET PROGRAMCILIĞI I
Tablo Özellikleri Tablo oluştururken kullandığımız , , ve etiketlerine şu ana kadar gördüğümüz özellikleri uygulayarak görsel açıdan.
Web Tasarımı.
Hazırlayan:Emin BORANDAĞ
Dersi Özeti Kursun içeriğini özeti Alt başlıkları Proje Kurs esnasında kullanmayı planladığımı editörler HTMLe giriş Temel etiketler Notepad+’da.
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
Yrd. Doç. Dr. Murat Olcay Özcan
İnternet Programlama-I
Yrd. Doç. Dr. Murat Olcay ÖZCAN
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
Web Teknolojileri Hafta 3 1. İçerik  Cascading Style Sheets - CSS 2.
CSS ile Konumlandırma Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu.
HTML 5 NED İ R? Web sayfası geliştirmek için üretilen bir dildir. Html kendi web sayfamızı yazmamız için kullanmamız gereken bir kodlama dilidir. Html.
Web Teknolojileri Hafta 9 1. İçerik  Bootstrap
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
BİLİŞİM TEKNOLOJİLERİ
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
HTML 5 NEDİR? Web sayfası geliştirmek için üretilen bir dildir.
İNTERNET PROGRAMCILIĞI 1
Yrd. Doç. Dr. Murat Olcay ÖZCAN
İNTERNET PROGRAMCILIĞI 1
İNTERNET PROGRAMCILIĞI 1
AHMET YESEVİ ÜNİVERSİTESİ
HTML 5 Yrd. Doç. Dr. Hüseyin GÜNEŞ
BOOTSTRAP.
ZEHRA STYLE.
Sunum transkripti:

Menü (Navigasyon) Yapımı

Navigasyon = Liste <ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>

Biraz Süsleyelim.. ul { list-style-type:none; margin:0; padding:0; } a { display:block; width:60px; text-decoration:none; }

Uygulama Linkler için CSS özellikleri Öğrenmiştik. A:link A:visited A:hover A:active

Örnek http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_advanced

Yatay Menu Tek yapmamız gereken liste elemanlarını yatay dizmek. li { display:inline; } veya li { float:left ; } Örnek: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced

Uygulama 1

Uygulama 2

Css menu örnekleri http://www.cssornekleri.com/menu/liste