We Are Creative Design Agency

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, fuga, consectetur sequi consequuntur nisi placeat ullam maiores perferendis. Quod, nihil reiciendis saepe optio libero minus et beatae ipsam reprehenderit sequi.

Find Out More Purchase Theme

Our Services

Lovely Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

Great Concept

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

User Friendly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat tellus eget libero pretium, sollicitudin feugiat libero.

Read More

Recent Work

Kültür Portalı


Kültür Portalı açılmıştır. Vakit kaybetmeden kayıt ol, kendi blogunu oluştur. ve yayınla. Kitap, sinema, dizi, oyun, yemek tarifi ve kişisel gelişim kategorileri ele alınmaktadır.
Hemen tıkla ve kayıt ol: www.kulturportali.com

Tasarım kodluyoruz



Tasarım çizmek ve kodlamak okunduğu kadar kolay değildir ama zorda değildir, daha doğrusu bu yapıcağınız projeye bağlı. Tasarım çizmek bu devirde yardımcı programlarla yapılıyor, mesela dreamweaver. Bu program hiç kodlama bilmeyenlere önerilebilir bir program. Çizimi ise çok professiyonel olmasını istiyorsanız, photoshop programını kullanabilirsiniz. Bu iki program aslına zor programlardır. Css ve html bilgisi, göz zevki olmadan yapılması, kullanılması zor programlardır. 1-2 günde öğrenemezsiniz. Ben elimden geldiğince kısa bir şekilde anlatıcağım.Temamızın ön izlemesi yukarıdadır...

Öncelikle bir metin belgesi oluşturun. ( Dreamweaver olmayanlar için, olanlarda kod bölümünden yapabilir. )
Metin belgesinin adını: " index.html " yapıyoruz ve tıklayıp içine girip yazmaya başlıyoruz... İlk olarak çalışmalarımızı görebilmemiz için style etiketlerini kullanıcağız...
<style type="text/css">Buraya açıcağımız etiketlerin özellikleri gelicek.
</style>
daha sonra html bölümünde etiketlerimizi açalım...

<html>
<body>
<div id="logo">logomuzu getireceğiz</div>
<div id="menu">menuyu getireceğiz</div>
<div id="icerik">icerik getireceğiz</div>
<div id="alt">alt kısmını getireceğiz</div>
</body>
</html>
basit anlatım için html kodlarımızı uzatmadık, şimdi html kısmını düzenleyelim...

 <html>
<body>
<div id="logo"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibkvNQ_v-lymRsPiTwsuM2YlCP8HQia34erEXjzVGydJY0QcglQ422iNFKgF1G5u86rfzAhZb_WqSmV3fLGPOaGT_CScgoDGIVElD67MmThAl_2U7nNZFDwYORuGWYfRoVieFr9g9bc4Zh/s400/logov1.png" width="300" height="100" /></a></div>
<div id="menu">
<ul>
<li><a href="http://www.negresmedya.blogspot.com.tr">ANASAYFA</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">İLETİŞİM</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">YORUMLAR</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">NEGRESMEDYA</a></li>
<li><a href="http://www.negresmedya.blogspot.com.tr">EKSTRALAR</a></li>

</ul>
<div id="icerik"><div id=content"> Bu etiketi açıyorum ki tr.gg' de paylaştığınız içerikler bunun içinde gözüksün diye, özellikleri style etiketinden yapıcağız...</div>
</div>
<div id="alt">Tüm hakları saklıdır! İzinsiz kopyalama yapılamaz veya çalınamaz</div>
</body>
</html>

Html kodlarımızı oluşturduk, şimdi css kodumuzu düzenleyelim

<style type="text/css">
body {
background-color: #f9f9f9;
background-image: url(ARKAPLAN RESMİ);
background-repeat: fixed;
margin: 0px;
padding: 0px;
}
#logo {
width: 900px;
height: 100px;
margin: auto;
padding: auto;
}
#menu {
width: 900px;
height: 40px;
margin: auto;
padding: auto;
background-color: #571852;
}
#menu ul {
margin: 0;
padding: 0;
List-style-type: none;
}
#menu ul li a {
text-decoration: none;
color: #fff;
font-size: 12px;
font-family: Arial;
display: block;
text-align: center;
width: 180px;
height: 40px;
float: left;
line-height: 40px;
transition: 0.3s;
}
#menu ul li a:hover {
background: #4a1546;
}
#icerik {
width: 880px;
height: auto;
margin: auto;
padding: auto;
background-color: #eee;
padding: 10px;
}
#alt {
width: 900px;
height: 30px;
line-height: 30px;
margin: auto;
text-align: center;
padding: auto;
background-color: #571852;
color: #fff;
font-family: Arial;
font-size: 12px;
}
</style>


Css kodumuzuda tamamladık, basit bir tasarım kodu oluşturduk, bunu daha başarılı hale getirip sitenize uygulayabilirsiniz. Bir sorunuz olduğunda iletişimden bize ulaşabilirsiniz.

Logo çalısması

 

Logo çalışması yapmıştık, bunu sizlerle paylaşmak istedik. İsmin ve logonun ön planda olduğu resimler genellikle aynı renk ile yapıldı, böylelikle sadelik ve bir o kadarda hoş bir görüntü ortaya çıkıyor. Bu renkleri istediğimiz gibi ayarlayabiliyoruz. Bu tasarımı sizlerde isterseniz psd linkini koyuyorum. İsteyen arkadaşlar aşağıdaki linkten indirip kullanabilirsiniz.

Nasıl kullanabilirim?
Bu tasarımı düzenleyebilmeniz için photoshop programınız olması gerekmektedir. Photoshop'u açıp, indirdiğiniz psd dosyasını üzerine sürükleyin, sonra katmanlardan değişiklikler yapabilirsiniz.

İndirme linkleri
İndirmek için tıkla

Css menü yapımı


İlk başta anlatıcağız. Sonra farklı renklerde yaparız. Ne dersiniz başlayalım mı? Başlamadan önce şunu söyleyeyim. Yazı font'u bizim siteye göre uyarlı. Kendi yazı stilinize göre uyarlicaktır. Güzel bir font bulursanız kullanabilirsiniz.
İlk olarak html kodlarımızı yazalım.

<div id="teknomenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HAKKIMDA</a></li>
<li><a href="#">İLETİŞİM</a></li>
<li><a href="#">ZİYARETÇİ DEFTERİ</a></li>
</ul>
</div>
Html kodlarımızı bitirdikten sonra css kodlarımızı yazalım.
<style>
#teknomenu {
width: 100%; /* Genişliği web sitenize uygun olsun diye 100% yaptım, değiştirebilirsiniz. */
height: 40px;
line-height: 40px;
margin: auto;
background: #222;
}
#teknomenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#teknomenu ul li a {
color: #fff;
float: left;
line-height: 40px;
height: 40px;
width: auto;
padding-left: 10px;
padding-right: 10px;
transition: 0.5s;
}
#teknomenu ul li a:hover {
background: #fff;
color: #222;
}
</style> 
Kodlarımız bu kadar şimdi kırmızı ile yazılan yerleri değiştirerek neler yapabiliriz? Ben 5 adet örnek koyucağım. Örnekler;

Arkaplan resimleri

Merhaba arkadaşlar, biliyorum sitenize güzel bir arkaplan resmi veya masaüstünüze bir resim arıyorsunuz. Bende beğendiklerimizi ve bazı çalışmalarımla sizlere bu konuyu açmak istedim. Arkaplanları paylaşıcağım. Beğendiğiniz resmin sağ tıklayarak url kısmından url adresini alın.

 Sitenizin arkaplanına koymak istiyorsanız;
body {
background-image: url(URL GELİCEK);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
View More

Curly is an extraordinary, awesome Theme, I would recommend this Theme to anyone for their next project. Go ahead and download it now!

-David Bell

The good times are for those who take action. Curly is a simple and easy to use template for creative people. Download this theme and give it a try!

-Eve Stinger

Awesome theme! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt possimus eveniet aperiam, minus deleniti iure ipsa praesentium amet, labore voluptatum fugit earum, porro non sequi sint soluta reprehenderit ad?

-Will Peters

Our Blog

55 Cups
Average weekly coffee drank
9000 Lines
Average weekly lines of code
400 Customers
Average yearly happy clients

Our Team

Tim Malkovic
CEO
David Bell
Creative Designer
Eve Stinger
Sales Manager
Will Peters
Developer

Contact

Talk to us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iusto fugit esse soluta quae debitis quibusdam harum voluptatem, maxime, aliquam sequi. Tempora ipsum magni unde velit corporis fuga, necessitatibus blanditiis.

Address:

9983 City name, Street name, 232 Apartment C

Work Time:

Monday - Friday from 9am to 5pm

Phone:

595 12 34 567

Blogger tarafından desteklenmektedir.

Fashion

Technology

Fashion

Technology

Fashion

Fashion

Translate

Editors Picks

Follow us

Feature Video

connected

About Simplex Magazine2

category1

Pages

feature posts

carousel

category2

header ad

logo

Designed By Free Blogger Templates |Blogger Template