09 Bolum FrontPage

8/20/2019 09 Bolum FrontPage

1/16

IX Bölüm

FrontPage

165


2/16

166


3/16

Web Sayfası Nedir?

İnternet’in hayatımıza girmesiyle birlikte web sayfaları ve webtasarımı da güncel konular arasında yerini aldı. eki nedir web sayfasıya da web tasarımı!

"eb sayfası# i$inde %ek $ok dosya türünü barındırabilen $okluortam birimi olarak adlandırılabilir. &a%ı olarak' te(t' resim' video' sesgibi %ek $ok dosya türünü destekleyerek birbirleri ile düzenli olarak$alı)masını sa*lar.

16+


4/16

"eb sayfaları' basit olarak tek bir sayfadan olu)masınara*men' birden fazla sayfanın birbiri ile ba*lantıları ,link- sayesindebütünlük sa*lar.

"eb sayfalarının bu kadar ilgi grmesinin en nemli nedeni

herhangi bir i)letim sistemine ba*lı kalmaksızın' her tür sistemde$alı)tırılabilmesi ve internet servislerini desteklemesidir.

Web Tasarımına Giriş"eb sayfalarının aslında tek bir sayfa olmasına ra*men

birbirleri ile ba*lantılarının oldu*undan sz etmi)tik. /u yüzden websayfası hazırlamaya ba)lamadan bir n hazırlık ya%ılmalısınız. /uhazırlık a)amasında#

• 0angi sayfalara ihtiya$ var!• 0angi sayfalardan' bir di*erine ba*lantı,link- vermek gerekir!• İhtiyacımız olan sayfaların gerekli kaynakları elimizde var mı!

sorularının yanıtlarına gre bir )ema hazırlarsanız' i)leriniz daha dakolayla)acaktır. /ylece daha sonra en ufak bir ekleme i$in tasarımdaoynamamıza gerek kalmaz.

rne*in' en basit anlamdaki bir )ema üstteki gibi olabilir. 2*erincelersek' 3na sayfadan' 4ektrlük' akülteler ve &7 olmak üzere 8farklı sayfaya link verilmi). /ununla birlikte bu 8 sayfanın birbiri ile ve3na 9ayfa ile ba*lantısı oldu*u grülüyor. 3ynı zamanda akültelersayfasının sadece kendisi ile ba*lantısı olan 8 tane alt sayfası var. İ)tebu hiyerar)i mantı*ı ile sıra teker teker her sayfayı hazırlamayageliyor.

16:


5/16

FrontPage !!!"e Giriş"eb sayfaları aslında 0;< kodları kullanılarak hazırlanır. akat

0;< kodlarının karı)ık ve tek tek ezberlenmesi gerekti*i i$in bazıeditr %rogramları hazırlanmı)tır. /u editr %rogramları aslında' geri

%landa yine 0;< kullanmasına ra*men kullanıcının 0;< kodlarıarasında bo*ulmadan' .9. "ord’de yazı yazmak kadar kolay websayfaları hazırlamasını sa*lar. eki nasıl $alı)ır bu editr %rogramları!/asit$e anlatmak istersek' rne*in sayfaya bir tablo eklendi*inde vezeliklerini belirtildi*inde' anında bu istek 0;>>’de icrosoft tarafından hazırlanmı) bir editr%rogramıdır. rontage =>>> bilgisayara kurulduktan sonra ge$erlikonumundan $alı)tırılırsa ilk olarak kar)ımıza a)a*ıdaki gibi bir ekran$ıkar#

?ründü*ü gibi kar)ınıza standart bir.9. 7ffice %rogramına $ok benzeyenbir ekran $ıkıyor. 3ra$ @ubukları' enü@ubu*u' Aurum @ubu*u tüm .9.7ffice %rogramlarında olan zellikler./unun dı)ında rontage editr alanıtasarımınızı ya%aca*ınız blgedir.?rünüm dü*meleri de $alı)tı*ımız

16B


6/16

klasrlere' ra%orlara vb. bilgilere hızlı ula)abilmenizi sa*lar. 3yrıcae*er hazırladı*ınız sayfanın 0;< kodlarını grmek' müdahale etmekisterseniz 0;< kodları alanı sekmesini' sayfanın bir browser,Cnternet2(%lorer ya da Detsca%e Davigator- üzerinde nasıl gründü*ünü

merak ediyorsanız nizleme alanı sekmesini se$ebilirsiniz.

#ra$ %&b&'ları3ra$ @ubukları .9. 7ffice’in en geli)mi) ve en kullanı)lı

zelliklerinden biridir. enüler aracılı*ı ile ya%aca*ınız i)lemleri dahahızlı ya%abilmenizi sa*lar.

rontage =>>>’de de standart olarak = ara$ $ubu*u hazırgelir. /unlar 9tandart 3ra$ @ubu*u ve /i$imlendirme 3ra$ @ubu*udur.2*er bu ara$ $ubuklarına ek olarak ba)ka ara$ $ubukları ile $alı)makisterseniz ya da bu ara$ $ubuklarını kaldırma isterseniz EWie()

menüsünden EToolbars) se$ene*ini se$in ve alt menüsüdenistedi*iniz ara$ $ubu*unu ekleyi%' istemediklerinizi kaldırın.

Standart #ra$ %&b&*&+

9tandart 3ra$ @ubu*u ile rontage =>>>’de en fazla kullanılanzelliklere ula)abilirsiniz. ?enellikle EFile),Aosya- menüsü i$indebulunan se$enekleri i$erir. &eni' 3$' Faydet' &azdır' İmla Fılavuzu'Fes' Fo%yala' &a%ı)tır' /i$im /oyacısı' ?eri 3l' &inele' ;ablo 2kle'4esim 2kle' &ardım gibi se$enekler tüm .9. 7ffice uygulamalarındaoldu*u gibi rontage =>>>’de de aynı ama$la kullanılır.

/unların yanında "eb’i yayımla se$ene*i ile hazırladı*ınızsayfaları do*rudan "eb yayınlayıcınıza gnderebilirsiniz. ;arayıcı ilenizleme se$ene*i hazırladı*ınız sayfayı bilgisayarınızda yüklübrowser ile ,Aefault olarak Detsca%e Davigator ya da Cnternet

1+>


7/16

2(%lorer hangisi varsa- grebilmenizi sa*lar. Gye 2kle se$ene*irontage =>>> ile gelen bazı web üyelerini ,Fayan yazı' buton' saya$vb.- sayfanıza eklemeyi sa*lar.


8/16

Sayfa -.elli'leri"eb sayfanızı hazırlarken sayfanın sabit bazı zelliklerini de

düzenlemeniz gerekir. /unun i$in sayfa i$inde bo) bir yerde sa* tu)abası% gelen menüden /Page Pro1erties) se$erseniz kar)ınızaa)a*ıdaki gibi bir %encere a$ılır.

/u %encerede 5 tane sekmekar)ımıza $ıkıyor. 9ayfasınırlarından' dil kodlamasına'geri %lan resmine kadar %ek$ok zellik bu blümdenya%ılabilir. /Genaral)sekmesinde sayfanınkonumunu grebilir' aynı

zamanda ba)lı*ını1+=


9/16

de*i)tirebilirsiniz. İsterseniz sayfanıza geri %lan sesi bileekleyebilirsiniz. /Ba2'gro&nd) sekmesinden ise tüm sayfaya arka%lan resmi ekleyebilir ya da beyaz olan rengini farklı renklerlede*i)tirebilirsiniz.

Tablo 3'leme"eb sayfalarında tablolar $ok nem kazanır. 4esimlerin ya da

yazılarımızın daha düzenli grünmesi i$in tablolardan faydalanmakgereklidir. İyi bir tasarımcı tablolardan en fazla verimlefaydalanmalıdır.

/ir web sayfasına tablo eklemek i$in 9tandart 3ra$ $ubu*uüzerinden ;ablo 2kle se$ene*i ya da /Table) menüsünden /Insert)

se$ene*i ve /Table) ile tablo ekleyebilirsiniz. ;ablonuzun satır vesütun sayılarını tes%it ettikten sonra tablonuzu olu)turabilirsiniz.

;ablonuzu olu)turduktan sonra $e)itli zelliklerinide*i)tirebilirsiniz. /unun i$in tablonun üzerinde sa* tu)a basın ve/Table Pro1erties) se$in.

;ablo zellikleri %enceresinde en nemli blüm /Borders)dır./Si.e) se$ene*inden kenarlıkların kalınlı*ını' /0olor) se$ene*indenkenarlıkların rengini belirleyebilirsiniz. /4ig5t Border)dan se$ece*inizrenk tablonun dı) $er$eve rengini' /6ar' Border)dan se$ece*inizrenk ise i$ $er$eve rengini düzenler. 3ynı zamanda tablonuzun arka%lan rengini ya da resmini /Ba2'gro&nd) blümündendüzenleyebilirsiniz.

1+8


10/16

;ablo zellikleri kadar tablodaki hücrelerin zelliklerinidüzenlemek de nemlidir. /unun i$in zelli*ini de*i)tirmek istedi*inizhücrenin i$inde sa* tu)a bası% $ıkan menüden /0ell Pro1erties)se$erseniz a)a*ıdaki gibi bir %encere a$ılacaktırI

/uradan da sadece se$ti*imiz hücrenin zelliklerinide*i)tirebiliriz. /uradaki /7ori.antal alignment) se$ene*i hücrei$indeki metin ya da nesnenin yatay konumunun sa*a hizalı,right-'sola hizalı ,left-' ortalı,center- ya da iki yana yaslı ,Justify- olarakdüzenlenebilmesini sa*lar. Kertical allignment ise hücer i$indeki metinya da nesnenin dü)ey konumunun üstte,to%-' altta ,bottom-'ortada,middle- ya da temel hücre $izgileri seviyesinde,/aseline-düzenlenmesini sa*lar.

Sayfaya %eşitli Nesneler 3'leme'0azırladı*ımız sayfayı $e)itli nesnelerle daha grsel hale

getirebiliriz. /unun i$in /Insert) menüsünden faydalanabiliriz.

/Insert) enüsünden /7ori.ontal 4ine) se$ti*imizdesayfaya yatay bir $izgi ekler. /0om1onent) se$ene*inin altmenülerinden %ek $ok web üyesi eklenebilir sayfaya. rne*in /7it0o&nter888) se$ene*inden sayfaya saya$' /9ar:&ee) se$ene*inden

kayan yazı' /7o(er B&tton888) se$ene*inden buton ekleyebilirsiniz.

ormlar ile $alı)mak i$in sayfaya form da ekleyebilirsiniz./Insert) menüsünden /Form) se$ene*inin alt menülerinde bir webformu i$in gerekli olan tüm ara$ları bulabilir ve zelliklerine grekullanabilirsiniz.

1+L


11/16

/#d(en2ed) 9e$ene*i isedaha geli)mi) zelliklerisayfamıza ekleyebilmemizisa*lar. 0;< kodları' Mava

3%%letleri ya da 3ctiveNkontrollerini do*rudan /Insert)menüsü aracılı*ı ileekleyebilirsiniz.

9ayfaya resim eklemek i$in de yine aynı menüdeki /Pi2t&re)se$ene*inden faydalanabiliriz ya da 9tandart ara$ $ubu*u üzerindeki/;esim e'le) se$ene*inden ekleyebiliriz.

9ayfamıza Oli% 3rt adı verilen kü$ük resimlerden eklemekisterseniz /0li1 #rt888) se$ene*ini' Kideo eklemek istersek /


12/16

Far)ınıza yukarıdaki gibi bir %encere gelecektir. /u %encere deP4< blümüne ba*lantıyı vermek istedi*iniz sitenin adresini tamolarak yazmalısınız. /@) dü*mesinden 9ayfanızdaki metine ya danesneye belirtti*iniz sayfaya gitmesi i$in ba*lantı vermi) olursunuz.2*er verdi*iniz ba*lantının yeni bir browser enceresinde a$ılmasınıistiyorsanız /Target frame) blümünden /NeA WindoA)se$melisiniz.

2*er vermek istedi*iniz ba*lantı' bir alan adı ,domain name-de*il kendi hazırladı*ınız bir sayfaysa' aynı klasrde bulunan dosyanınadını do*rudan yazabilirsiniz. /ir alt klasrdeki dosyaya ba*lantıvermek i$in ise dosyanın nüne EQR bir üst klasrdeki dosya i$in ise/88) kullanmalısınız.

%er$e(e =Frame> @&llanma'

"eb sayfası hazırlarken birden fazla dosyayı $er$eveler yardımıile tek bir sayfa i$inde gsterebilirsiniz.@er$eveleri kullanırken dikkatetmemiz gereken nokta' kullandı*ımız her $er$eve farklı bir websayfası dosyasıdır. 3yrıca tüm bunları i$eren bir sayfa ile' aslında tekdosya gibi grülen web sayfanız' $er$eve sayısından bir fazla

sayıdadır.

@er$eve sayfalarındanherhangi biri ile $alı)mak i$in'

/File) menüsünden /NeA)1+6


13/16

se$in. 3$ılan %encereden de /Frames Pages) sekmesindeki)ablonlardan birini se$in.

rne*in /Banner and 0ontents) ,an)et ve i$indekiler-

se$ene*inde nizlemesinde de grdü*ünüz gibi 8 tane $er$eve vardır./u $er$evelerin her birini ayrı ayrı tasarlayı%' tek tek kaydetmenizgerekiyor. 3yrıca bir de tüm bu sayfaları barındıran sayfayı dakaydetmelisiniz. Saten kaydetme i)lemine ba)ladı*ınızda' rontage=>>> her birini tek tek kaydetmenizi isteyecektir.

1++


14/16

7a.ır ablonlardan Web Sayfası 7a.ırlama';üm bu anlatılanlara ra*men e*er web sayfası hazırlamanın

uzun ve zor bir i) oldu*unu dü)ünüyorsanız ve kolaya ka$ı% hazırsayfalardan kendinize gre düzeltmelerle bir web sayfanız olsun

istiyorsanız rontage =>>> tam size gre bir zellikle kar)ınıza$ıkıyor.

@ok i)levli )ablon sayfalardan ihtiyacınız olanını se$erek i)eba)layabilirsiniz. /File) menüsünden /NeA) se$ene*inin altmenüsünden "eb’i se$in. 3)a*ıdaki gibi bir %encere kar)ınıza$ıkacaktır.

%encereden ncelikle web sayfanızın klasrünü tanımlamanız gerekir.İsterseniz hi$ olmayan bir klasrün adresini yazı%' rontagetarafından ktır.

3$ılan sayfadaki $e)itli zellikleri de de*i)tirebilirisiniz. rne*in

hazırlanan sayfanızın arka %lan resmini ve ya butonların )eklini1+:


15/16

istedi*iniz gibi de*i)tirebilirsiniz. /unu daha nce anlattı*ımızyntemlerle ya%abilece*iniz gibi onlar i$in de hazır )ablonlarkullanabilirsiniz.

9ayfanızda bo) bir alanda sa* tu)a basın ve /T5eme) se$in.

3$ılan %encerede %ek $ok )ablon ve nizlemelerini grebilirsiniz.

3rtık sayfanızın tasarımı tamam. 9on olarak i$eri*ini kendinizegre yazı*ınızda kolay yoldan bir web sayfası sahibi olacaksınız.

1+B


16/16

1:>

09 Bolum FrontPage

Documents

Transcript of 09 Bolum FrontPage