Sayfaya Media ve Nesne Ekleme
::Yeni Bir Belge Açmak
Category panelinden normal statik bir belge mi yoksa dinamik bir belgemi kullanmak istediğimizi belirteceğiz. Sonraki adımda ise belgemizin dil problemini çözeceğiz. Bunun için Preferences butonuna basalım ve Default Encoding menüsünden Türkçe (Windows) seçeneğini tıklayalım. Artık yeni bir belgemiz var ve Türkçe karakter sorunu yaşamayacağız.
İkinci yöntem ise Dreamweaver’i ilk kurduğumuzda açılışta karşımıza çıkan erişim aracı. Bu aracı kullanmak hem daha pratik hem de bu aracın yukarıda görüşmüş olduğunuz pencereden daha estetik olduğu tartışılmaz bir gerçeklik.
Don’t Show Again sekmesini işaretlemezsek bu menü programı her çalıştırdığınızda karşımıza çıkacaktır.
:: Belgenin Arkaplan Rengini Ayarlamak
Yeni bir belge açmıştık. Şimdi ise arkaplan rengini değiştirmek istiyoruz. Bu işlem için belgemizde sağ tıklayalım ve Page Properties komutunu çalıştıralım ve bu pencereyi biraz tanıyalım.
Page Font: Belgede kullanılacak font.
Size: Fontun puntosu (büyüklüğü) boyutunu.
Text Color: Fontun rengi.
Background Color : Belgemizin arkaplan rengini bu menüden değiştirebilirsiniz.
Background Image: Belgenize aynı masaüstünde olduğu gibi duvar kağıdı atamayı bu menüden yapabilirsiniz. Bunun için Browse butonuna basalım ve bir kullanacağımız resmi seçelim ve OK butonuna basalım. Resmin duvar kağıdı şeklinde döşendiğini göreceksiniz.
Left Margin: Soldan boşluk kalacak pay.
Right Margin: Sağdan boşluk kalacak pay.
Top Margin: Üstten boşluk kalacak pay.
Bottom Margin: Alttan boşluk kalacak pay.
Linklerinizin renkleriyle ilgili ayarları da Links menüsünden yapabilirsiniz.
:: Resim Eklemek
Belgemizin arkaplanını da ayarladık. Bu aşamada ise sayfamıza bir resim ekleyeceğiz. Bunun için iki yol kullanacağız. Birinci yol Insert > Image yoludur.
İkinci yol ise Insert panelinden Insert Image butonuna tıklayıp Image seçeneğini seçmek ve belirlediğimiz resmi bulup sayfamıza eklemektir.
Belirlediğimiz resim sayfamıza eklemiş olacaktır. Bu statik bir resim. Şimdi ise hareketli bir resim ekleyeceğiz ve bu resme link vereceğiz.
:: Rollover Image
Bu yöntemi Web sayfalarınıza buton eklemek için uygulayabilirsiniz. Eklediğimiz resimlerden önce 1 numaralı olanı görünecek fare butonumuzun üstüne geldiğinde ise ikinci resim aktif olacaktır.
Bundan nasıl yararlanabiliriz? Örneğin ilk butondaki renk biraz koyu olur ikinci butonda ise renk ilkine nazaran biraz daha açık olur. Fare butonun üzerine geldiğinde resim değişimi çok hızlı olacağından butonumuzun üzerinde parlama etkisi görünecektir.
Insert > Image Object > Rollover Image yönergesini izleyerek Rollover Image ekleyebilirsiniz. Şimdi işlim uygulayacağımız pencereyi tanıyalım.
Image Name: Resmimizin ismi.
Original Image: Butonumuzun ilk resmini seçmek için Browse butonuna basarak. 1 numaralı butonumu bulalım ve OK butonuna basalım.
Rollover Image: Aynı işlemi 2 numaralı butonumuz için yapalım.
Preload Rollover Image: Bu sekmeyi işaretlerseniz Rollover Buton yani bizim 2 numaralı butonumuz Web’de yüklenen kadar 1 numaralı butonumuz görüntülenmeye devam edecektir.
Alternate Text: Web’de resmimiz yüklenene kadar resim yer tutucular kırmızı çarpı şeklinde resmimizin yerini belli ederler. Yükleme süresi içerisinde ziyaretçiye kırmızı çarpıları izletmek pekte hoş olmaz. Bu metin kutusuna yazacağınız metin resmimiz yüklenen kadar kırmızı çarpıların yerinde duracaktır. Bu sayede ziyaretçi en azından hangi resmin ne olduğunu görebilecektir. Ama doğru olan butonlarımızın boyutunu iyi ayarlamak, büyük boyutta fontlar kullanmamaktır.
When clicked, Go to URL: Butonumuza tıklandığında gidilecek Internet adresini de bu satıra yazıyoruz.
Belgemizi kaydedelim ve sınayalım. Fare ile üzerine geldiğimizde butonların hareketlendiğini göreceksiniz. Tıkladığınızda ise belirttiğimiz adrese gidecektir.
:: Flash Web Albümü Oluşturmak
Küçük bir fotoğraf arşiviniz var ve siz bunu Internet üzerinden yayınlamak istiyorsunuz. Tabi güzel fotoğraflar iyi bir şekilde yayınlanmalı. Fakat iyi bir navigasyon aracı oluşturacak vaktinizde yok.
Uğraşmayın, açın Dreamweaver’ı ve Insert > Media > Image Viewer yolunu izleyin. Elinizdeki fotoğrafların güzelliğine yaraşır bir navigasyon aracı oluşturun.
Image Veiwer komutunu tıkladıktan sonra karşımıza SWF çıktısını nereye kaydetmek istediğimizi soran bir pencere çıkacak. Dreamweaver bu aracı Flash nesnesi olarak çıktı verecektir. Kaydedeceğimiz klasörü belirleyin ve KAYDET butonuna basın.
Bu aşamada dikkat etmemiz gereken durum resimlerin yolunun Image Viewer’e doğru tanımlamaktır. Tag Inspector paneline geçelim ve resim göstericimizin ince ayarlarını yapalım.
bgColor: Arkaplan rengi.
captionColor: Başlık Rengi
captionFont: Başlık Fontu
captionSize: Fontun Puntosu
frameColor: Kenarlık Rengi
frameShow: Kenarlığı Göster / Gizle
frameThickness: Kenarlık Boyutu
imageCaption: Resimlerin Başlıkları
imageLinks: Resimlere Verdiğimiz Köprüler, Linkler.
imageLinkTarget: Linklerin Hedefleri.
imageURLs: Resimlerin Bulunduğu Klasörün Yolu.
showControls: Kontrol Panelini Göster / Gizle
slideAutoPlay: Slayt Düzeninde Oynat.
slideDelay: İki Oynatım Arasındaki Zaman Aralığı.
slideLoop : Slayt Sonsuz Döngüde
title : Etiket
titleColor: Etiket Rengi
titleFont: Etiket Fontu
titleSize : Fontun Puntosu
transitionsType: Geçiş Efektleri
Göstericinin arkaplan rengini bgColor kutusundan ayarlayabilirsiniz. Gösterimin başlığını Image Caption, başlığın rengini captionColor, fontunu ve puntosunu sırasıyla captionFont, captionSize kutularından düzenleyebilirsiniz.
Göstericimizin sırasıyla kenarlık rengini, kenarlık gösterilip gösterilmeyeceğini, kenarlık kalınlığını frameColor, frameShow, frameThickness kutularından düzenleyeceğiz. imageLinks kutusundan resimlerimize link vereceğiz. imageLinkTarget kutusundan ise verdiğimiz linklerin yeni sayfada mı açılacağını, hangi frame’de açılacağını vb. yani hedefini belirteceğiz.
imageURL kutusundan resimlerimizin bulunduğu klasörü belirteceğiz. showControls kutusu aktifken resim göstericimizin dolaşım çubuğu aktif olacaktır. Yani butonlar yardımıyla resimlerimiz arasında gezinebileceğiz. slideAutoPlay kutusu aktif ise sayfa yüklendikten sonra oynatım otomatik olarak başlayacaktır. slideDelay kutusuna gireceğiniz değer iki resim gösterimi arasında kaç saniye olacağını belirleyecektir.
slideLoop kutusundaki değer eğer Yes ise gösterim bittikten sonra otomatik olarak baştan başlayarak tekrar gösterime devam edecektir ve bu sonsuz bir döngü şeklinde oynatım sürekli başa alınacaktır. Gösterimimizin etiketini, adını title kutusuna yazacağız.
Sırasıyla etiketimizin yazı rengini, fontunu, fontun puntosunu titleColor, titleFont, titleSize kutularından belirleyeceğiz. İki resim arasındaki geçiş efektlerini de transitionsType kutusundan ayarlayacağız.
Uygulamamızın başında Image Viewer’e eklemiştik. İnce ayarlarımızı da yaptık şimdi resimlerimizi ekleyelim.
+ butonuna basıp ve çıkan sarı klasör simgesine tıklayalım. Eklemek istediğiniz resimleri seçelim ve OK butonuna basalım. Bu işlemi eklemek istediğimiz her resim için uygulayacağız.
Belgemizi kaydedelim ve klavyemizden F12 tuşuna basarak sınayalım. İşte size hızlı ve kullanışlı bir resim gösterici.
:: Hotspot Kullanımı
Sayfalarınıza eklediğiniz resimlerin istediğiniz herhangi bir noktasına link verecek bir programsa aradığını bu işlevi uzaklarda aramayın. Çünkü Dreamweaver’in Properties panelinde.
Grafik editörlerinden herhangi birisi ile üzerinde BYTE Eylül, BYTE Ekim, BYTE Kasım yazan bir resim oluşturalım ve sayfamıza Insert > Image yönergesini izleyerek ekleyelim.
Properties panelin aktif hale getirelim. Eğer aktif değilse Window > Properties yönergesini izleyerek aktif hale getirebilirsiniz. Sayfamıza ekledikten sonra bir kez tıklayıp resmi seçelim.
Resmimizin üzerinde Hotspot vereceğimiz alan köşeli, çember veya rastgele bir şekil olabilir. İstediğimiz seçeneği Properties panelinden seçelim ve resim üzerindeki BYTE Eylül yazını kapsayacak genişlikte bir alan çizelim. Properties paneli değişecek ve Hotspot’un özelliklerini gösterecektir.
Link: Hotspotumuza vereceğimiz linki Link metin kutusuna yazacağız.
Target: Verdiğimiz linkin hangi hedefte açılacağını belirteceğiz.
Alt: Faremizin resmin üzerine geldiğinde görünecek olan metni bu kutuya yazabilirsiniz.
Class: Eğer bir CSS dosyası kullandıysanız ve bu işlemde de geçerli olmasını istiyorsanız bu menüden seçebilirsiniz. (CSS eklemeyi ve kullanmayı ileriki uygulamalarımızda birlikte ele alacağız.)
Bu işlemleri yaptıktan sonra klavyenizden F12 tuşuna basarak belgenizi sınayabilirsiniz.
:: Flash Filmi Eklemek
Insert > Media > Flash yönergesini izleyerek sayfanıza Flash nesnesi ekleyebilirsiniz. Flash nesnemizin arkaplan rengi, boyutu (örn:450×250), kalitesini Properties penceresinden belirleyebilirsiniz.
:: Video Eklemek
Video eklemek için Insert > Media > Plugin yönergesini izleyeceğiz. Açılan pencereden ekleyeceğimiz video dosyasını seçelim ve OK butonuna basalım. Sayfamıza bir plugin eklenecektir. Özelliliklerini ayarlamak için bir kere tıklayalım ve Properties paneline gelelim.
Videomuz belgemize 32 X 32 boyutlarında eklenecektir. Videomuzun gerçek boyutunu W ve H metin kutularına gerekli değerleri girerek belirleyelim.
İnce ayarlar için ise Tag Inspector panelini kullanacağız.
Filmimizin, sayfa açılır açılmaz başlamasını istemiyorsanız autostart metin kutusundaki değer false olmalı, bu seçenek işaretliyken önce sayfa açılır sonra ziyaretçinin filmi fare ile tetiklemesiyle film oynatılır. Eğer filmimizin bittikten sonra otomatik olarak tekrar başlamasını, bir döngü oluşturmasını istiyorsanız loop seçeneği true olmalı. Eğer bu konudaki cevabınız hayır ise bu metin kutusuna da false değerini gireceğiz.
:: Flash Butonlar Eklemek
Insert > Media > Flash Buton yolunu izleyelim. Bu yönergeyi izlediğimizde karşımıza bu işlemi yapabilmek için önce belgemizi kaydetmemiz gerektiğini belirten bir mesaj kutusu çıkacak.
Tamam butonuna basalım ve belgemizi File > Save yönergesini izleyerek kaydedelim ve tekrar Insert > Media > Flash Buton yönergesini izleyelim.
Sample: Bu pencereden örnek butonları görebileceğiz.
Stye: Örnek butonların olduğu pencere.
Button text: Butonumuzun üzeride yazmasını istediğimiz metni buraya yazacağız.
Font: Fontumuzu bu menüden seçeceğiz.
Size: Fontumuzun boyutu, puntosu.
Link: Butonumuza vereceğimiz link, köprü.
Target: Linkimizin hedefi.
Bg color: Butonumuzun arkaplan rengi.
Save as: Butonumuzun adı. Browse butonuna basarak butonu istediğiniz herhangi bir klasöre kaydedebilirsiniz.
OK butonuna basalım. Sayfamıza butonların eklendiğini göreceksiniz. Eğer daha farklı şekillerde butonlar istiyorsanız Get More Styles butonuna basarak macromedia.com’dan download edebilirsiniz.
:: Tablo Oluşturmak
Insert > Table yönergesini izleyelim ve çıkan pencereden tablomuzu biçimlendirelim.
Tablomuzdaki satır sayısını belirten değeri Rows metin kutusuna, sütun sayısını Columns metin kutusuna, tablomuzun dış kenarlığının kalınlığını Border Thickness metin kutusuna, hücrelerimizin büyüklüğünü Cell Padding metin kutusuna, hücreleri oluşturan çizgilerin birbirine olan uzaklığını belirleyen değeri ise Cell Spacing metin kutusuna gireceğiz.
Caption metin kutusuna ise oluşturduğumuz tabloya bir başlık atayabilirsiniz. OK butonuna basalım. İstediğimiz özelliklerde tablo eklenmiş olacaktır.
:: Tabloya Dışarıdan Veri Çağırmak
Bir metin belgesinde 1’den 90’a kadar ekran kartı fiyatlarını sıraladınız ve bunu Web’de yayınlayacaksınız. Bu verileri bir tabloya girmek gerekiyor fakat bu kadar veriyi işlemek te çok uzun zamanımızı alacak. İşte size bir anahtar daha: Import Tabular Data.
Bu komut ile sıralı metinlerinizi bir tabloya otomatik olarak aktarabilirsiniz. Bu işlem için Insert > Table Object > Import Tabular Data yönergesini izleyeceğiz.
Browse butonuna basalım, içerisinden verileri çağıracağımız metin belgesini seçelim. Şimdi ise tabloyu biçimlendireceğiz. Eğer tablomuzun hücrelerinin verilerle orantılı bir biçimde şekillenmesini istiyorsak Fit to Data seçeneğini işaretleyeceğiz.
Cell padding metin kutusuna hücrelerimizin büyüklüğünü belirten değeri, Cell spacing metin kutusuna hücrelerimizi oluşturan çizgilerin birbirine uzaklığını belirten değeri, Border metin kutusuna ise tablomuzun çizgilerinin kalınlığını belirten değeri gireceğiz. Format top row menüsünden de tablomuzdaki metni biçimlendirebiliriz. Ok butonuna basalım ve klavyemizden F12’yi tuşlayarak belgemizi sınayalım.
:: Layer’lar / Katmanlar ve Özellikleri
Layerlar için, Web dünyasında yüzyılın icadı desek hiçte abartı olmaz. Grafik programlarında ve Web editörlerinde estetik görünüm yükü sırtlayan yegane unsurdur layerlar.
İstediğiniz nesneyi istediğiniz yere konumlandırabilmeniz, çeşitli menü şekilleri oluşturabilmemiz, sayfamızdaki nesneleri saklayabilmesi layerların bize sağladı imkanlardan başlıcaları. Insert > Layout Objects > Layer yönergesini izleyerek layerlerin dünyasına ilk adımımızı atalım.
Eklediğimiz layerı seçelim ve Properties panelinde gelelim.
Layer ID : Katmanın adı.
Overflow : Katmanın içeriğinin boyutunu aştığı zaman katmandaki nesnenin görünüp görünmeyeceğini bu seçenek ile belirleyeceğiz. Visible seçeneği seçilmiş ise katman içeriğe göre boyutlanacak, Hidden seçeneği seçilmiş ise nesnenin katmana sığmayan kısmı görünmeyecek, Scroll seçili ise katmanda kaydırma çubukları çıkacak, Auto seçeneği seçilmiş ise de bu işleme gerek duyulduğunda kendiliğinden gerçekleşecektir.
L: Katmanın, belgenin sol tarafına uzaklığı.
T: Katmanın, belgenin üst tarafına uzaklığı.
W: Katmanın genişliği.
H: Katmanın yüksekliği.
Clip: Katmanın istenilmeyen bölgesini göstermez.
L, T, R, B: Sırasıyla soldan, üstten, sağdan ve alttan kaç piksel gösterilmeyeceğini belirleriz.
Z-Index: Katmanlarımız üst üste geldiği zaman bu metin kutusundaki sayısal değeri en büyük olan katman en üstte görünecektir.
Vis(ibility): Katmanların görünebilirlik ayarlarıdır. Hidden katmanlar gizlidirler, görünmezler. Inherit katmanlar kendisini kaplayan katmanın görünebilirlik özelliklerini alırlar, Visible katmanlar ise görünür katmanlardır.
Bg image: Katmanlara aynı masaüstü (desktop) gibi arkaplan resmi atayabiliriz.
Bg color: Arkaplan rengi.
Class: Still hazırlamışsanız bu menüden seçip uygulayabilirsiniz.
:: E-mail Bağlantısı Eklemek
Insert > Email Link yönergesini izleyelim.
Text metin kutusuna görünecek metni, E-mail metin kutusuna da mailin gönderilmesini istediğimiz adresi yazacağız. OK butonuna basalım, linkimiz eklenmiş olacaktır.
Herhangi bir metne e-mail bağlantısı eklemek istiyorsak metni seçtikten sonra Properties panelinden Link metin kutusuna mailto:mridvan@hotmail.com şeklinde e-mail adresi girmeliyiz. Metinlere bu yolla da e-mail adres link atayabilmekteyiz.
:: Named Anchor
Web sayfalarında görmüşsünüzdür, uzunca bir liste vardır bu listeyi de gruplayan butonlar vardır. Bu butonlara tıkladığımızda bizi sayfanın çapa atılan satırına götürür. Başka bir örnek vermek istersek uzun metinlerin olduğu web sayfalarında, sayfaların en altında “Sayfa Başı” şeklinde bir ibare bulunur. Bu linke tıkladığımızda sayfanın en başına döneriz. Biz de bu işlemi uygulayacağız.
Bu işlem için yeni bir belge açalım. Belgemizin ilk satırına Mustafa yazalım. Belgemizde aşağılara kadar ENTER’a basılı tutarak inelim. Ve ilk satıra yazdığımız ismi bir kez daha yazalım. (Mustafa) İkinci kez ismi yazdığımız satırın en başına gelelim ve Insert > Named Anchor yönergesini izleyerek çapamızı atalım. Şimdi ise çapamıza isim vereceğiz. Mustafa yazıp OK butonuna basalım.
Çapamıza mustafa ismini verdik. Şimdi belgemizin ilk satırına gelelim ve daha önceden yazmış olduğumuz Mustafa ismini seçelim. Properties panelinden Link metin kutusuna ise bu çapanın adresini yazacağız. Adresi #çapaİsmi şeklinde tanımlayacağız. Biz de adresimizi #mustafa olarak girelim. Sayfamızı kaydedelim ve klavyemizden F12’ye basarak test edelim. Sayfamızın en başındaki Mustafa linkine tıkladığımızda sayfamızın en altındaki Mustafa yazısına indiğimizi göreceksiniz.
:: Yatay Çizgi Eklemek
Sayfalarınız bölümlemek için kullanabileceğiniz bir diğer yöntem ise kesme çizgisiyle ayırmaktır. Bunun için Insert > HTML > Horizontal Rule yönergesini izleyelim. Çizgimizin uzunluğunu (W) ve genişliğini (H) Properties panelinden düzenleyebiliriz. Eğer çizgimizin gölgeli olmasını istiyorsak Shading sekmesin işaretlemeliyiz.
Tag Inspecor panelinden çizgimizin bütün özelliklerini düzenleyebilirsiniz. Rengini değiştirmek için de color bölümünü kullanacağız.
:: Frame’ler
Bu yöntemle sayfalarınızı bir kaç parçaya bölebilirsiniz. Örn: Bir adet sol sütun, bir adet sağ sütun ve bu iki sayfayı birlikte gösteren bir belge. Framelerin mantığı böyle çalışmaktadır. Hemen uygulamaya geçelim. Insert > HTML > Frames > Left yönergesini izleyerek sayfamızı framelere ayıralım.
1 numaralı bölüm sol frame, 2 numaralı bölüm sağ frame, 3 numaralı bölüm ise bu iki sayfayı aynı anda gösteren index sayfasıdır. Şimdi sayfamızı ayıran frame çubuğunu seçelim ve Properties paneline gelelim.
Borders: Sayfayı ayıran frame çizgisini görünmesini istiyorsak Yes istemiyorsak No seçeneğini seçeceğiz.
Border width: Frame çubuğunun kalınlığını bu metin kutusuna yazacağız.
Border color: Frame çubuğunun rengi.
Column: Units bölümünden iki sayfanın birbirine oranla görüneceği miktarı yazacağız. Eğer Pixel seçili ise sol bölümün kaç Pixel görüneceğini, Percent seçili ise sol tarafın yüzde kaç görüneceğini (örn:iki parçadan oluşan belgemizin sol tarafının % kaç görüneceği)
RowColSelection: Sağ ve sol frameleri özelliklerini düzenlemek üzere bu menüden seçebiliriz.
Sayfamız bir kaç parçadan oluşuyor, peki link verdiğimiz sayfalar hangi sayfada açılacak? Sağda mı solda mı? Bunu Properties panelinden Target bölümünden belirleyeceğiz.
_blank: Link verilen sayfa yeni pencerede açılır.
_parent: Tüm sayfayı kaplayacak şekilde açılır.
_self: Sol taraftaki framede açılır.
_top: Ortada açılır.
mainFrame: Sağ taraftaki framede açılır.
leftFrame: Sol taraftaki framede açılır.
Farklı frame çeşitleri için farklı targetleri bulunmaktadır. Bu özellikler sadece iki parçadan oluşan frameler için geçerlidir.
:: iFrame Kullanmak
Diğer adı floating framedir, bu yöntemle sayfalarımızın içinde frameler açabiliriz. Bu işlemi Design View’de kullanamamaktayız, kullanabilmek için Code View’e geçmemiz gerekmektedir. View > Code yönergesini izleyerek kod görünümüne geçelim.
Code View’e geçtikten sonra Insert > HTML > Frames > Floating Frame yönergesini izleyerek ifame ekleyelim. Frame özelliklerini düzenlemek için Tag Inspector panelinden Attributes bölümüne gelelim.
align: Frame hizası
frame border: Frame çerçevesi
height: Yükseklik
marginheight: üstten boşluk
marginwidth: kenardan boşluk
name : frame ismi
scrolling: İçerik frame penceresini aştığı zaman, aşan kısmı kaydırma çubuğuyla gösterilmesi bu bölümden yapılabilir. İçerik taşsa da gösterilmesin diyorsak No, gösterilsin diyorsak Yes, eğer gerek duyulursa kaydırma çubuğu çıksın diyorsak Auto seçeneğini işaretleyeceğiz.
src: Frame içerisinde görünecek sayfanın yolunu bu metin kutusuna gireceğiz.
width: Genişlik.
Nasıl link verip iframe’de sayfa göstereceğim? Uygulamamızda yaptığımız sayfa üzerinde çalışalım. Design View görünümüne geçelim urunler.htm ve uygulama.htm adında iki belge kaydedelim. Uygulama belgemize gelelim Ürünler ve Uygulamalar yazalım. Yazdığımız bu metne Properties panelinden Link bölümünden link verelim. Target bölümüne framemizin adını yazacağız. Bu kısım çok önemli çünkü Target kısmına iframenin adını yazmazsak sayfamıza iframemizde açılmayacaktır.
Not: Web sayfanızı tasarlayabilmeniz için hazırladığımız Dreamweaver derslerinin önceki serilerine ulaşmak için aşağıdaki bağlantıları kullanabilirsiniz;
– Web Tasarımı Dersleri 1
– Web Tasarımı Dersleri 2
Dreamweaver ile Web tasarım derslerimiz devam edecek.
SDN
{{user}} {{datetime}}
{{text}}