Adobe Dreamweaver, profesyonel düzeyde web siteleri geliştirmek ve çalıştırmak için tasarlanmıştır. Adobe Dreamweaver'da uygulanan gelişmiş geliştirme teknolojileri, çoğu rutin işlemi otomatik olarak gerçekleştirerek büyük ölçüde kolaylaştırır. Bu programda oluşturulan web siteleri ve ağ uygulamaları tüm endüstri standartlarına uygundur. Adobe Dreamweaver ile çalışarak ihtiyacınız olan tüm özelliklere ve programlara sahip olursunuz. CSS formatı için tam destek, mizanpajı çeşitli tarayıcılarda hızlı bir şekilde görüntüleme yeteneği ile tamamlanmaktadır. Bu çözüm, tasarım işini büyük ölçüde kolaylaştırır. Web sayfalarının kodunun çok kullanışlı bir düzenleyicisi, sitenin yazımını hızlandırırken, koddaki olası hatalar hemen gösterilir. Adobe Dreamweaver sistemi çeşitli teknolojilerle çalışabilir, JavaScript, ASP, XML, Adobe ColdFusion ve PHP tam olarak desteklenmektedir. Ajax uygulamaları oluşturmak için resmi bir eklenti var. Artık RSS'den bilgi almak, veri tabanlarıyla çalışmak veya program düzeyinde çeşitli görsel efektler oluşturmak için özel ürünler aramanıza gerek yok.
Adobe Dreamweaver, web projeleri geliştirmek için harika bir ortama ek olarak, bunları anında test etmenize ve değiştirmenize olanak tanır. Yerleşik çoklu ekran önizleme, sitelerinizi HTML5'te görüntüleyerek test etmenize olanak tanır. Güncellenen hizmet daha hızlı çalışır ve tabletlerden veya akıllı telefonlardan açılan kaynakları test etmek için özel olarak tasarlanmıştır. Kauçuk yerleşim sistemi tasarımcılara hitap edecek. Sonuçta, kaynağı temelde yeni bir kalite düzeyine getirerek CSS3 mizanpajlarını içe aktarabilirsiniz. Yerleşik test sistemi, zaman alıcı hata ayıklama ve yüzlerce satır kod yazmadan akışkan düzeninizi herhangi bir tarayıcı veya ekran çözünürlüğüne ayarlamanıza olanak tanır.
Adobe Dreamweaver'da jQuery Mobile modülünden özel olarak bahsedilmelidir. Bu program, Android ve iOS cihazlar için mobil uygulamalar oluşturmanıza izin verecektir. Geliştirme modülü, bir proje oluşturmanıza ve bunu çeşitli mobil cihazların bir emülatöründe test etmenize olanak tanıyan Adobe PhoneGap Build ile mükemmel bir şekilde tamamlanmıştır. FTP ile çalışmak için geliştirilmiş algoritmalar, projelerinizi yüklerken size zaman kazandıracaktır. Birden fazla farklı web sitesini veya diğer içeriği aynı anda hızlı bir şekilde indirmek için çoklu akışı kullanın.
Daha yakın zamanda, Adobe'den siteler oluşturmak için yeni bir ürün olan Dreamweaver CC tanıtıldı. Ana yenilik, görsel kontrol ve arama süreçlerini hızlandırmak için yeni bir renk paleti ve çeşitli özellikler kullanan ve düzenleme süresinde önemli bir azalma sağlayan "Geliştirilmiş CSS Tasarımcısı" dır. Canlı Seçim ve Canlı Görüntü de dikkat çekicidir. Artık görsel modda dinamik düzenler oluşturabilirsiniz. Yeniden tasarlanan Dreamweaver CC arabiriminin anlaşılması ve ustalaşması daha kolaydır ve iş akışları daha kolay ve daha hızlıdır. Bağlam menüleri, geliştirme sürecinin verimliliğini artıran ayarların uygulanmasını kolaylaştırır. Editörün bu sürümü, PHP 5.4, HTML5, jQuery ve jQuery Mobile gibi en modern platformların yanı sıra WordPress, Joomla! ve Drupal. Bu nedenle, Adobe Dreamweaver CC'yi ücretsiz olarak indirin ve bu güçlü web sitesi oluşturucuyu hemen kullanmaya başlayın.
Haziran 2015'te Adobe, diğer Adobe ürünleri gibi bir görüntü aramak için Adobe Stock mağazasına bağlanabilen yeni ürünü Adobe Dreamweaver CC 2015'i tanıttı. Düzenleyici, yerleşik önyükleme entegrasyonunu kullanarak farklı ekran boyutlarına dinamik olarak uyum sağlayan web siteleri oluşturmanıza olanak tanır. Yeni kod düzenleyici arayüzü ve ayarları, statik kaynak analizi ile gerçek zamanlı kod doğrulama ve Emmet özellikli otomatik tamamlama, Dreamweaver'da kodlamayı daha hızlı ve daha kolay hale getirir. Adobe Photoshop PSD belgelerinden web için optimize edilmiş görüntüleri hızla ayıklamak için büyük bir zaman kazandıran yeni özellik. İlk olarak HTML sayfası öğelerinde kolay gezinme ve düzenleme için bir DOM paneli geliştirdi ve uyguladı. "Kod" görünümünde ve çok daha fazlasında gerçek zamanlı olarak renklerin ve görüntülerin önizlemesini kullandı. Tüm bu yenilikler, programın Rusça arayüzü ile birleştiğinde, sitelerin hızlı ve kullanışlı bir şekilde oluşturulmasını sağlar. Bu aracı edinmek armut bombardımanı yapmak kadar kolaydır - Adobe Dreamweaver CC 2015'i ücretsiz indirin ve web uygulamaları oluşturmaya başlayın.
Kasım 2016, birçok değişiklik ve yenilikle yeni Dreamweaver CC 2017'nin piyasaya sürüldüğüne tanık oldu. Yeni, daha esnek bir kodlama mekanizmasıyla daha hızlı kod oluşturmanıza olanak tanıyan yeni bir kod düzenleyici. Kod ipuçları, yeni kullanıcıların HTML ve CSS öğrenmesine yardımcı olur. Geliştirilmiş performansa ve basitleştirilmiş bir arayüze sahip yeni geliştirici çalışma alanı, dosya yüklemeyi ve açmayı daha hızlı ve projelerde çalışmayı kolaylaştırır. Dreamweaver artık SASS, Less ve SCSS gibi temel CSS ön işleme araçlarını desteklemektedir. Yeni Hızlı Düzenleme özelliği, bir HTML dosyasıyla çalışırken yerleşik CSS düzenleyiciyi açmanıza ve gerekli değişiklikleri hızlı bir şekilde yapmanıza olanak tanır. Adobe, kullanıcılarını dinler ve Dreamweaver binlerce yorumla optimize edilmiştir. Kodu okuma ve düzenleme kolaylığı için, açıktan karanlığa kadar dört kontrast seviyesinden birini seçebilirsiniz. Zaman kazanmak için canlı bir tarayıcı önizlemesi ve CSS özelliklerini açıklayan web platformu için yardım belgelerini görüntüleyen bir Hızlı Yardım özelliği ekledik. Dreamweaver 2017'yi web sitemizden ücretsiz olarak indirebilirsiniz.
Herhangi bir medyadan çalıştırabileceğiniz daha küçük bir sürüme mi ihtiyacınız var?
Adobe Dreamweaver'ın taşınabilir sürümü - kurulum gerektirmez, herhangi bir cihazda kullanabilir, projeyi doğrudan bir flash sürücüden, harici sabit sürücüden veya başka bir ortamdan çalıştırabilirsiniz. Rusça arayüz, programa hızla alışmanıza yardımcı olur.
hedef : Bir web sayfası oluştururken ve programın çalışma alanını oluştururken Dreamweaver'ı tanıyın.
Görevler:
- Çalışma alanını keşfedin.
- CSS içeriği kullanarak yeni bir sayfa oluşturmayı öğrenin.
- Bir belgeyi kaydetmeyi öğrenin.
- Sayfa başlığını ve metin başlıklarını değiştirmeyi öğrenin.
- Harici bir belgeden metin yapıştırmayı öğrenin.
- Ön plana ve arka plan resimleri olarak nasıl resim ekleyeceğinizi öğrenin.
- CSS stilleri oluşturmayı, değiştirmeyi ve seçmeyi öğrenin.
- Kod ve Kod ve Tasarım görüntüleme modlarıyla çalışmayı öğrenin.
Çalışmaya başlamadan önce.
Tüm laboratuvar çalışmalarını tamamlama sürecinde, seyahat şirketi için tam teşekküllü bir web sitesi oluşturacaksınız.
Web sayfalarının yapısı Şekil 1'de gösterilmektedir.
Şekil 1 - Nihai web sitesinin yapısı
Bu laboratuvarın bir sonucu olarak, aşağıdaki web sayfasına sahip olmalısınız (Şekil 1.1):
Şekil 1.1 - Web sayfası önizlemesi
Hoş Geldiniz ekranını kullanma
Hoş Geldiniz ekranı, yakın zamanda çalıştığınız sayfalara hızlı erişim sağlar, farklı türlerde sayfaları kolayca oluşturmanıza yardımcı olur ve sorularınızın yanıtlarını bulabileceğiniz bazı önemli konulara doğrudan erişim sağlar. Programı ilk başlattığınızda veya başka bir belge açık değilse hoş geldiniz ekranı görüntülenir.
Bir belgeyi açmanın yollarını keşfetmek için Hoş Geldiniz ekranını kullanalım.
1. Yeni bir boş sayfa açmak için seçeneğe tıklayın HTML sütunda Yeni oluşturmak(Oluştur) (Şekil 1.2).
Şekil 1.2 - Karşılama ekranı
2. Önünüzde yeni bir tane açılacak HTML belge (Şekil 1.3).
Şekil 1.3 - Yeni HTML penceresi
CSS düzeni seçme
Adobe Dreamweaver CS4'te her biri farklı bir tasarıma sahip 32 CSS mizanpaj dosyası vardır. Bu görevde bir dosya seçip onu değiştireceğiz.
- Yürüt Dosya \u003d\u003e Yeni (Dosya \u003d\u003e Yeni) .
- Bir sütun seçin Boş Sayfa İletişim kutusunda (boş sayfa) Yeni Belge (Belge oluştur) .
- Lütfen seçin HTML sütunda Sayfa Tür (Sayfa türü) .
- Lütfen seçin 2 sütun sabit, sol kenar çubuğu, başlık ve altbilgi (2 sütun sabit genişlik, solda yan kenar boşluğu, üstbilgi ve altbilgi) bir sütunda Yerleşim(Yerleşim) .
- Diğer seçeneklerin varsayılan ayarlarını değiştirmeyin ve düğmesine tıklayın Oluşturmak(Oluşturmak).
- Lütfen seçin Dosya \u003d\u003e Kaydet (Dosya \u003d\u003e Kaydet).
- Farklı kaydet(Farklı kaydet) klasöre git lab1... "Umbria.html" girin ve düğmeyi tıklayın Kayıt etmek.
Belge görüntüleme modunu seçme
Web tasarım işlemlerinin çoğunu pencerede gerçekleştireceğiz Tasarımama pencerenin yanında hatırla Belge Dört görüntüleme modu vardır (Şekil 1.4):
- Tasarım (Tasarım) - sayfayı tarayıcı benzeri bir bağlamda sunar;
- Kod (Kod) - sayfanın kaynak kodunu görüntüler;
- Kod ve Tasarım (Kod ve Tasarım) - Birleştirme ve Görüntüleme Modu Tasarım ve görüntüleme modu Kod... Düğmeye bas Bölünmüş (bölme) bu ekran modunu görüntülemek için.
- Canlı (Canlı Görüntü) - Sayfayı canlı bir tarayıcıda temsil eder.
Şekil 1.4 - Ekran modları
Görüntü modları birbiriyle ilişkilidir. Birinde yapılan herhangi bir değişiklik diğerlerinde hemen görülebilir.
Sayfa başlığını değiştirme
Sayfa başlığı, tarayıcının başlık çubuğunda görüntülenir. Sayfa başlıkları, arama motorları tarafından web sitelerini indekslemek için kullanılan temel unsurlardan biridir.
- "Başlıksız Belge" metin yer tutucusunu seçin Başlık (isim) araç çubukları Belge (Şekil 1.5).
- Buraya "Umbria Hill Town Tours" yazın ve tıklayın Giriş.
Şekil 1.5 - Belge araç çubuğu
Başlıkları değiştirme
Dreamweaver'daki başlık yer tutucularının değiştirilmesi kolaydır.
1. Yer tutucu metne çift tıklayın Başlıkseçmek için. Ardından "Travel Umbria with us" yazın (Şekil 1.6).
Şekil 1.6 - Başlık yer tutucusunu değiştirme
2. İmlecinizi yer tutucu metnin başına getirin Anaİçerik (Ana içerik) ve tüm cümleyi seçin.
3. Vurgulanan metinle "Eğleniyorsunuz. Biz çalışıyoruz." (Şekil 1.7)
Şekil 1.7 - İçerik yer tutucusunu değiştirme
4. Seçin Dosya \u003d\u003e Kaydet(Dosya \u003d\u003e Kaydet).
Metin ekle
Basit metin, başlıklar kadar kolay değiştirilebilir.
1. İmlecinizi düz yer tutucu metnin önüne getirin ve ikinci başlık yer tutucusunu ve tüm paragrafları seçmek için tam yolu seçin.
2. tuşuna basın Silseçtiğiniz şeyi silmek için.
3. Dosyaya gidin Metin.
txt klasörde bulunur Dersler / lab1 / Text.txt.
4. Metni panoya kopyalayın.
5. Kopyalanan metni "Eğleniyorsun." Başlığının altına yapıştırın. Biz çalışıyoruz." (Şekil 1.8).
Şekil 1.8 - Metin eklemek
Metin otomatik olarak paragraf olarak biçimlendirilecektir.
6. Aynı şekilde alana "Umbria Hill Town Tours" yazın Alt bilgi.
7. Tıklayarak satırın sonunu oluşturun Vardiya+
Giriş,
ardından "Kişilerimiz" yazın.
Görüntü eklemek
1. Yer tutucu başlığı dahil olmak üzere kenar çubuğundaki tüm içeriği seçin Kenar Çubuğu1 İçeriği ve sonraki iki paragraf.
2. tıklayın Sil.
3. tıklayın
ve bas Sil etiketi kaldırmak için Belge penceresinin altında bulunan etiket seçicide
(Şekil 1.9).
Şekil 1.9 - Etiket seçici
4. Panel Ekle (Ekle) görünmez, seçerek görünür hale getirin Pencere \u003d\u003e Ekle (Pencere \u003d\u003e Ekle). Yürüt Ekle \u003d\u003e Ortak => Görüntüler (Ekle \u003d\u003e Genel \u003d\u003e Görüntü) (Şekil 1.10).
Şekil 1.10 - Panel Ekle
5. Klasördeki dosyalara gidin Dersler / lab1 /ve seçin heykel bahçesi.jpgve Tamam'a tıklayın (Şekil 1.11).
Şekil 1.11 - Sculpted-garden.jpg görüntüsünün yerleştirilmesi
6. İmlecinizi "Gel ve Keyfini Çıkar" sözcükleriyle başlayan ana paragrafın başına getirin ve Görüntüler panelde Ekle.
7. Bir resim seçin italian-hill-town.jpg ve bas tamam.
8. Yan metin olarak "italian-hill-town" yazın. Tıklayın tamam (Şekil 1.12).
9. Özellikler paneli görünmüyorsa, seçin Pencere \u003d\u003e Özellikler.
10. Yeni eklenen resmi seçtikten sonra, fltrtaçılır menüde Sınıfpaneller Özellikleri.
Fltrt sınıfı float right için bir kısaltmadır, fltlft - float left.
11. Seçin Dosya \u003d\u003e Kaydet.
Şekil 1.12 - italian-hill-town.jpg resmi ekle
Stilleri seçme ve değiştirme CSS
Modern web sayfaları, stil ve düzen için Basamaklı Stil Sayfaları (CSS) kullanır. Bir web sayfası genellikle yapısının bileşenleri olan HTML, CSS ve JavaScript olan üç ayaklı bir sandalye ile karşılaştırılır. HTML, Tasarım görüntüleme modunda girdiğiniz içeriktir. CSS, belirli öğeler, renkler ve arka planlarla görünüm ve mizanpajla ilgilidir. JavaScript, etkileşimli bir özellik ekler. Bu alıştırmada, mevcut bir sayfanın arka plan rengini değiştirecek, arka plana grafikler ekleyecek ve birkaç metin niteliği ayarlayacaksınız. Tüm bu eylemler panel kullanılarak gerçekleştirilir CSSStilleri (CSS Stilleri).
CSS, herhangi bir HTML etiketinin stil özelliklerini değiştirmek için kullanılabilir.
.1. Seçin Pencere \u003d\u003e CSS Stilleri (Pencere \u003d\u003e CSS Stilleri). Bir panel açılacak CSS Stilleri.
2. Gerekirse düğmeyi tıklayın Herşey panelde CSS Stillerimevcut modu değiştirmek için Güncel.
Tüm mod, geçerli sayfayla ilişkili tüm CSS stillerini görüntüler. Panelde herhangi bir stili görmek için belge görüntüleyicide açık bir belgeniz olmalıdır CSS Stilleri.
3. Girişi açın
Css tablo hücre sınırları
Photoshop'ta bir katman nasıl yeniden boyutlandırılır Photoshop'ta bir öğe nasıl büyütülür
WordPress Şablon Hiyerarşisi: Son Kılavuz WordPress Yapısı
Webmoney cüzdanı nasıl oluşturulur
Skype oturumu nedir