09 bolum frontpage
TRANSCRIPT
-
8/20/2019 09 Bolum FrontPage
1/16
IX Bölüm
FrontPage
165
-
8/20/2019 09 Bolum FrontPage
2/16
166
-
8/20/2019 09 Bolum FrontPage
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+
-
8/20/2019 09 Bolum FrontPage
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:
-
8/20/2019 09 Bolum FrontPage
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
-
8/20/2019 09 Bolum FrontPage
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+>
-
8/20/2019 09 Bolum FrontPage
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/20/2019 09 Bolum FrontPage
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+=
-
8/20/2019 09 Bolum FrontPage
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
-
8/20/2019 09 Bolum FrontPage
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
-
8/20/2019 09 Bolum FrontPage
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 /
-
8/20/2019 09 Bolum FrontPage
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
-
8/20/2019 09 Bolum FrontPage
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++
-
8/20/2019 09 Bolum FrontPage
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+:
-
8/20/2019 09 Bolum FrontPage
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
-
8/20/2019 09 Bolum FrontPage
16/16
1:>