Web tasarımı ve ön uç geliştirme (HTML, CSS, Javascript) konusunda yeniyseniz, bir WYSIWYG editörü ile çalışmaya başlamak isteyebilirsiniz. Bu kısaltma, "ne gördüğünüzü alırsınız" anlamına gelir ve temel olarak, yazılım, oluşturduğunuz şeye göre sahnelerin arkasında bir kod yazarken görsel araçları kullanarak bir web sayfası oluşturmanıza olanak veren yazılım anlamına gelir. Mevcut en popüler WYSIWYG aracı, Adobe'nin Dreamweaver'ıdır .
Dreamweaver, Başlarken Olanlar İçin İyi Bir Seçenek
Daha rafine becerilere sahip birçok tecrübeli web uzmanı Dreamweaver'a ve şişmiş HTML biçimlendirme ve CSS stilleri oluşturma eğilimine bakıyor olsa da, basit gerçek şu ki platform, web sitesi tasarımına yeni başlayanlar için iyi bir seçenek olmaya devam ediyor. Bir web sayfası oluşturmak için Dreamweaver'ın "tasarım görünümü" seçeneğini kullanmaya başladığınızda, sahip olduğunuz sorulardan biri, o görünümdeki içerik için tek satır aralığının nasıl oluşturulacağıdır.
Bir web sayfasına HTML metni eklerken, web tarayıcısı, bu pencereyi tarayıcı penceresinin veya konteyner öğesinin kenarına ulaşıncaya kadar uzun bir çizgi olarak görüntüler. Bu noktada, metin sonraki satıra sarılacaktır. Bu, Microsoft Word veya Google Dokümanlar gibi herhangi bir kelime işlem yazılımında olana benzer. Bir metin satırında yatay çizgide yer kalmadığında, başka bir satıra başlamak için sarılır. Yani bir satırın nerede kırıldığını dikte etmek istersen ne olur?
Dreamweaver'ın tasarım görünümünde [ENTER] tuşuna bastığınızda, geçerli paragraf kapatılır ve yeni bir paragraf başlar. Görsel olarak, bu, bu iki çizginin biraz dikey aralıklarla ayrıldığı anlamına gelir. Bunun nedeni, varsayılan olarak, HTML paragraflarının , paragrafın dibine uygulanan boşlukları ekleyen dolgu veya kenar boşluklarına (hangisinin tarayıcıya bağlı olduğu) sahiptir.
Bu, CSS ile ayarlanabilir, ancak gerçek şu ki, web sitesi okunabilirliği sağlamak için paragraflar arasında boşluk olması istediğiniz. Tek bir satır ve satırlar arasında geniş dikey boşluk istemiyorsanız, [ENTER] kullanmak istemezsiniz. Bu satırların bireysel paragraf olmasını istemediğiniz için anahtar.
Yeni bir paragrafın başlamasını istemediğiniz zamanlar için, bu HTML etiketini HTML olarak eklersiniz. Bu bazen de
olarak yazılır. Özellikle tüm elemanların kapatılmasını gerektiren XHTML sürümleri için. Bu sözdiziminde, / etc etiketinin kendi kapanış etiketine sahip olmadığı için öğeyi kendiliğinden kapatır. Bu iyi ve güzel, ancak Dreamweaver'da Tasarım Görünümünde çalışıyorsunuz. Kod içine atlamak ve bu araları eklemek istemeyebilirsiniz. Bu iyi, çünkü kod görünümüne başvurmadan Dreamweaver'da bir satır sonu ekleyebilirsiniz.
Dreamweaver Dizaynı Tasarımında Satır Araya Ekleme:
- İmlecinizi yeni hattın başlamasını istediğiniz yere yerleştirin.
- Vardiya tuşunu basılı tutun ve [ENTER] tuşuna basın.
Bu kadar! [ENTER] ile birlikte "shift" tuşunun basit bir şekilde eklenmesi, yeni bir paragraf yerine bir + işareti ekler. Yani şimdi bunun nasıl olduğunu biliyorsunuz, onu nerede kullanacağınızı ve nerede saklanacağınızı düşünmelisiniz. Unutmayın, HTML görsel bir görünüm değil, bir sitenin yapısını oluşturmak içindir. Tasarımınızdaki öğelerin altındaki dikey boşluk oluşturmak için çoklu
etiketlerini kullanmamalısınız.
Dolgu ve kenar boşlukları için CSS özellikleri budur. Bir etiket kullanacağınız yer, tek satır aralığına ihtiyaç duyduğunuz zamandır. Örneğin, bir posta adresini kodluyorsanız ve bir paragraf kullanmaya karar verdiyseniz, bu gibi etiketler ekleyebilirsiniz:
Şirket Adı
Adres Hattı
Şehir, Eyalet, Posta
Adres için bu kod tek bir paragraftır, ancak görsel olarak, tek bir satırdaki üç çizgiyi aralarında küçük bir boşluk ile görüntüler.