Word 2016 Başlık Biçilendirme ve İçindekiler Tablosunu Otamatik Oluşturma

Microsoft Word'de "İçindekiler Tablosu" oluşturma eğer kuralına uyulmazsa tam bir belaya dönüşebilir. Aşağıda anlatacağım adımları izlerseniz çok rahat bir şekilde oluşturulduğunu göreceksiniz.

İki Bölümde Anlatacağım :

1.Bölüm Başlık Stili Oluşturma
2.Bölüm İçindekiler Tablosunu Oluşturma

1.Bölüm Başlık Stili Oluşturma

• Öncelikle ve önemle yapacağımız ilk iş başlık stili tanımlamak olacak, belgemizde kaç ana başlık ve bunlara bağlı kaç alt başlık olacak ise önce bunları belirleyip stiller kısmından düzenlemeleri yaplır.Örneğin: Başlık 1, Başlık 2, Başlık 3 gibi
• Önceden wordde tanımlanmış başlık stillerini düzenleyip kullanabilirsiniz.  Örneğin: Wordde Otomatik olarak Başlık1,Başlık2,Başlık3 stilleri vardır. Bu stilleri başlık stili olarak kullanabiliriz. Başlık1 Ana Başlık sonrakiler ise ona bağlı altbaşlıklar şeklinde devam eder.Bu stilleri kullanmak için değiştireceğimiz stilin üzerine  Sağ Tıklayarak>>Değiştir (ilk resimde görüldüğü üzere) seçeneği ile açılacak pencerede "Başlık1" stili için istediğimiz yazı karakteri,boyutu vb bilgileri belgemize uygun bir şekilde düzenleyip kaydedebiliriz. Artık Başlık1 Stilini uyguladığımız her başlık aynı stile sahip olacaktır. Diğer başlıklar (Başlık2,Başlık3... ) içinde aynı işlemler yapılır.
• Kullandığınız başlıklara hazırladığınız bu stillerden uygun olanını uygulayınız. 

 2.Bölüm İçindekiler Tablosunu Oluşturma 

• Öncelikle içindekiler sayfası eklenecek sayfanın başına gelinir ve Ekle Menüsü>>Boş sayfa yolu ile yeni bir sayfa eklenir.
• Yeni Sayfanın en başına gelinip Başvurular Menüsü>>İçindekiler Tablosu yolu izlenir. Otomatik tablolardan veya özel içindekiler tablosu seçeneklerinden biri seçilir. İçindekiler sayfası oluşur.
• Her eklediğimiz başlığın içindekiler tablosuna yansıması için güncelleme işlemi yaparak yeni başlıkların eklenmesi sağlanır. İçindekiler tablosu seçili iken >>Sağ üstteki Tabloyu Güncelleştir  veya tablo seçili iken sağ tık>>Alanı Güncelleştir  yolu izlenerek güncelleme işlemi yapılır.

Word 2016'da Diğer Sayfaları Bozmadan Sayfa Silmek

Çalışmalarımızda bazen gereksiz yada boş sayfaları silmemiz gerekir, bunu yaparken  diğer sayfaların silme işleminden etkilenmesini istemeyiz ki sayfa düzenleri bozulmasın,
Bunun için yapacaklarımız:

• İlk olarak Silmek istediğimiz sayfanın başına gelip imleci konumlandırıyoruz
• Sayfanın tamamını seçiyoruz ardından "Delete" tuşuna tıklıyoruz.
• Eğer  boş sayfa oluşursa muhtemelen bir önceki sayfada bir bağlantı kalmıştır, silmek için bir önceki sayfanın en son satırına imleci konumlandırıp "Delete" tuşuna tıklıyoruz.

İlk olarak Silmek istediğimiz sayfanın başına gelip imleci konumlandırıyoruz

Sayfanın tamamını seçiyoruz ardından "Delete" tuşuna basıyoruz.

Eğer Yukardaki gibi boş sayfa oluşursa muhtemelen bir önceki sayfada bir bağlantı kalmıştır, silmek için bir önceki sayfanın en son satırına imleci konumlandırıp "Delete" tuşuna basıyoruz.

Böylece silme işlemini tamamlamış oluyoruz.

BONUS: Bu işlemlere rağmen silinmiyorsa aşağıdaki yöntemde alaternatif olarak uygulanabilir:

• İmlecinizi silmek istediğiniz sayfada bir yere getirin.
• Giriş>>Bul öğesinden Git seçeneğine gelin
• Arama kutusuna \page yazın ve ardından Git e tıklayın...Bütün sayfanın seçilmiş olduğunu göreceksiniz.
• Ardından Kapat seçeneğini tıklatın ve DELETE tuşuna basın.

Word 2016'da Diğer Sayfaları Bozmadan Sayfa Ekleme

Wordde çalışma yaparken bazen yeni bir sayfaya ihtiyaç duyarız.Bu sayfayı oluşturmak için enter tuşuna basarak ilerleriz genelde fakat bu belgenin içinde önceki oluşturduğumuz yazıların kaymasına neden olur.

İşte size sayfaları kaydırmadan yeni bir sayfa eklemenin yöntemini göstereceğim:

• İlk olarak sayfamızı hangi sayfanın önüne ekleyecek o sayfanın en başına tıklıyoruz.
• İmlecin o sayfada  yanıp söndüğübe dikkat ediyoruz.
• Ekle menüsüne gelip boş sayfa sekmesine tıklıyoruz.
• Yeni sayfamızı belgemizi bozmadan oluşturmuş oluyoruz.
  

Ekle Menüsü>>Boş Sayfa

Diğer sayfalar bozulmadan sayfamız eklenmiş oldu

Web Sitelerinin Görünümünü Cihaza Göre Yapılandırma

Görünüm, bir web sayfasının mobil cihazda nasıl görüntüleneceğini denetler. Görünüm olmadan, mobil cihazlar sayfayı tipik bir masaüstü ekranı genişliğinde, ekrana sığacak şekilde ölçeklenmiş olarak görüntüler. Bir görünüm ayarlamak, sayfanın farklı cihazlarda genişliği ve ölçeklenmesi konusunda denetim olanağı verir.

Sol: Meta görünümü olmayan bir sayfa.

Sağ: Cihaz genişliğiyle eşleşen görünüme sahip bir sayfa.

Öneriler

Mobil cihazlarda iyi şekilde görüntülenecek biçimde optimize edilmiş sayfaların doküman başlığında width=device-width, initial-scale=1 ifadesini içeren bir meta görünüm olmalıdır.

<meta name=viewport content="width=device-width, initial-scale=1">

Mobil Cihazlarda Masaüstü Sayfaları

Bir sayfada görünüm belirtilmediği zaman, mobil tarayıcılar o sayfayı 800-1024 CSS pikseli arasında bir yedek genişlikaralığında görüntüler. Sayfa ölçeği faktörü, sayfanın ekrana sığacağı şekilde ayarlanır ve kullanıcıların sayfayla etkileşimde bulunabilmek için yakınlaştırma yapmasını gerektirir.

Meta Görünüm Etiketi

Bir meta görünümü etiketi, tarayıcıya sayfanın boyutları ve ölçeklemesi üzerinde nasıl kontrol sağlayacağına ilişkin talimatlar sağlar ve dokümanın başlığına eklenmelidir.

Sabit Genişlikli Görünüm

Görünüm, width=320 veya width=1024 gibi belirli bir genişliğe ayarlanabilir. Bu önerilmese de, sabit boyutlu sayfaların beklendiği gibi görüntülenmesi için yararlı bir geçici önlem olabilir.

Esnek Görünüm

width=device-width meta görünüm değerini kullanmak, sayfaya ekranın genişliğini cihazdan bağımsız piksellerle eşleştirmesi talimatını verir. Bu, sayfanın farklı ekran boyutlarına uyacak biçimde yeniden düzenlenmesini sağlar.

iOS ve Windows Phone gibi bazı tarayıcılar, yatay moda döndürürken sayfanın genişliğini sabit tutar ve ekrana sığdırmak için yeniden düzenleme yerine yakınlaştırma yaptırır. initial-scale=1 özelliğini eklemek, cihaz yönü ne olursa olsun tarayıcılara CSS pikselleri ile cihazdan bağımsız pikseller arasında bir 1:1 ilişkisi oluşturma talimatı verir ve sayfanın tam yatay genişliği kullanmasına olanak sağlar.

Dikkat Edilecek Diğer Noktalar

minimum-scale, maximum-scale, user-scalable kullanmaktan kaçının

Minimum ve maksimum yakınlaştırmayı ayarlamak veya kullanıcının görünümde bütünüyle yakınlaştırma yapabilme özelliğini devre dışı bırakmak mümkündür. Bu seçenekler erişilebilirliği olumsuz şekilde etkiler ve genellikle bunlardan kaçınılmalıdır.

Bu özellikleri kullanmak zorunda kalırsanız da aşağıdaki şekilde kullanabilirsiniz: 

<meta name=viewport content="width=device-width, maximum-scale=0.8">

Kaynaklar:https://developers.google.com/speed/docs/insights/ConfigureViewport?hl=tr

Yardımcı Siteler:

Graphemica: İkonların html koda karşılıklarını bulmak için yararlı bir site
http://graphemica.com/

Pixabay: Yüksek çözünürlüklü fotoğraf veya görsel bulabilmek için faydalı
https://pixabay.com/

Freepik: Afiş logo gibi örnek çalışma bulabileceğiniz bir site
http://www.freepik.com/ 

Font Siteleri: 
100 Free Fonts:http://www.1001freefonts.com/
fonts2u: http://www.fonts2u.com/ 
dafont:http://www.dafont.com/

Templateler

https://www.megafonn.com/web-sitesi-nasil-yapilir-tum-asamalari/
https://www.c-sharpcorner.com/
https://cssdeck.com/
https://bootsnipp.com/snippets/92xNm
https://codequs.com/p/Hk6T8-mB4
https://musefree.com/
https://www.bootdey.com/s
https://www.bootdey.com/snippets/view/single-advisor-profile
https://webdevresources.info/css
https://www.html5xcss3.com/responsive-menus-tutorials
https://csshint.com/css-dropdown-menu/
https://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
http://demo.html5xcss3.com/demo.php?url=www.script-tutorials.com/demos/415/index.html
https://codepen.io/ahmedhosna95/pen/RJeYjg
https://codepen.io/Mohamed-Ayman/pen/WyYGPa
https://bootsnipp.com/snippets/bXZA2
https://freefrontend.com/css-menu/
https://quazar.starfirewebdesign.com/
https://colorlib.com/wp/html-social-buttons-templates/
https://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
https://www.youtube.com/watch?v=rk-IuYOyfnc&ab_channel=Onlinewebustaad
https://www.jquery-az.com/css/demo.php?ex=132.0_1
https://www.html5xcss3.com/responsive-menus-tutorials
https://codepen.io/Mohamed-Ayman/pen/WyYGPa
https://codepen.io/nolasia/pen/OwxJaB
https://css-tricks.com/the-shapes-of-css/
https://sharkcoder.com/visual/shapes
https://enjoycss.com/

https://www.xml-sitemaps.com/