Doğrudan tuval üzerinde düzenleme
Oluşturulduktan sonra bir HTML tasarımını iyileştirin: metni düzenleyin, seçili öğeleri ayarlayın, değişiklikleri kaydedin ve paylaşmadan önce sonucu kontrol edin.
Değişikliği nasıl yapacağınızı seçin
| Göreviniz | Kullanılacak seçenek | Değişen şey |
|---|---|---|
| Tam olarak hangi metni, rengi veya aralığı istediğinizi biliyorsunuz | Edit | Düzenleme onaylandıktan veya kaydedildikten sonra seçili HTML dosyası |
| Ajandan bir öğeyi yeniden düzenlemesini istiyorsunuz | Comment → Send to chat | Ajan, öğeye özel bir talimat alır |
| Görsel bir bölgeyi açıklamak istiyorsunuz | Mark | Konuşmaya bir ekran görüntüsü ve notlar eklenir |
Yeni bir bölüm, duyarlı davranış veya birden fazla ekrandaki değişiklik için ajana net bir açıklama verin. Küçük bir görsel ayarlama için doğrudan düzenlemeyi kullanın. Diğer iki yöntem için yorumlar ve işaretlenmiş geri bildirimler bölümüne bakın.
Düzenlenebilir bir önizleme açın
- Design Files içinden bir HTML yapıtı açın ve Preview seçeneğini belirleyin. HTML slayt yapıtları da önizleme düzenleyicisini kullanır; kullanılabilen kontroller dosyaya bağlıdır.
- Önizleme araç çubuğunda Edit seçeneğini belirleyin, ardından tuvaldeki öğeyi seçin. Seçim çerçevesinin ve Parameters panelinin görünmesini bekleyin.
- Bağlantıları, formları veya düğmeleri normal bir kullanıcı gibi test etmeden önce Edit modundan çıkın. Düzenleme modunda bir öğeyi seçmek, prototipi kullanmaktan farklı bir amaca hizmet eder.
Bir metin satırını değiştirin
- Edit modunda değiştirmek istediğiniz metne tıklayın. Metinler ve bağlantı etiketleri tuval üzerinde düzenlenebilir.
- Yeni metni yazın. Bu metni onaylamak için Enter tuşuna basın; Shift+Enter satır sonu ekler. Geçerli metin girişini iptal etmek için Escape tuşuna basın.
- Metni normal Preview görünümünde kontrol edin. Sayfa bu metni JavaScript ile oluşturuyorsa metni yeniden görüntüleyen eylemi de test edin.
Bir öğeyi veya yerleşimini ayarlayın
Desteklediği özellikleri görmek için bir öğeyi seçin. Denetçi; tipografi, renk, boyut, aralık, kenarlık ve köşe yarıçapı ayarlarını içerir. Flex ve Grid kapsayıcıları yön, hizalama ve Gap gibi yerleşim kontrollerini gösterir. Bir bağlantı Href alanını gösterebilir; bir görsel Upload image ile değiştirilebilir. Bu kontroller bağlamsaldır, dolayısıyla her öğede her alan bulunmaz.
Seçili bir öğeyi sürükleyerek konumunu ayarlayabilirsiniz. Değişiklikleri küçük tutun ve komşu öğelerle mobil yerleşimleri kontrol edin; bir öğeyi tek bir masaüstü görünümüne sığana kadar taşımak duyarlı bir yerleşim oluşturmaz.
| Alan | Girilecek veya kontrol edilecek değer |
|---|---|
| Text / Href / Image URL / Alt text | Metin öğeleri metni gösterir; bağlantılar ayrıca hedef adreslerini gösterir. Görseller kaynak ve alternatif metin alanlarını gösterir. Alanlar seçili öğeye bağlıdır. |
| Text / Background / Border color | #262626 gibi onaltılık bir renk kullanın. Kaydettikten sonra kontrastı ve üzerine gelme durumlarını kontrol edin. |
| Opacity | 0 ile 1 arasında bir sayı: 0 saydam, 1 ise opaktır. Bu, yalnızca arka planı değil seçili öğenin tamamını etkiler. |
| Font / Size / Weight / Line height / Letter spacing | Yazı tipini ve kalınlığını seçin, ardından boyutu ve harf aralığını ayarlayın. Line height pozitif bir sayı veya px değeri kabul eder; 1.5 bir çarpanken 24px sabit bir yüksekliktir. |
| Width / Height | Birimsiz bir sayı px olur. Bu boyutlar için yüzde değerleri kabul edilir. Sabit bir genişlik seçmeden önce dar yerleşimleri kontrol edin. |
| Padding / Margin | Üst, sağ, alt ve sol değerlerini ayrı ayrı ayarlayın. Padding öğenin içindedir; margin ise öğeyi komşularından ayırır. Margin için auto kullanılabilir. |
| Border width / Style / Radius | Kenarlığın kalınlığını, stilini ve rengini birlikte ayarlayın. Görünür bir stil olmadan verilen genişlik hiçbir etki oluşturmuyormuş gibi görünebilir. Radius köşeleri yuvarlar. |
| Direction / Distribution / Gap / Align | Yerleşim kontrolleri, bir yerleşim kapsayıcısının seçilmesine bağlıdır. Sıradan bir öğede Align metin hizalamasını değiştirir; üst öğesini yeniden düzenleyen bir komut değildir. |
Çoğu aralık alanı, rastgele CSS ifadeleri yerine sayı veya px kabul eder. Bir değer reddedilirse tekrar tekrar kaydetmek yerine birimini ve seçili öğeyi kontrol edin. Boş alanlar sıfır değerinden ziyade devralınan veya hesaplanan stilleri yansıtabilir.
Kaydedin, iptal edin veya geri alın
| Eylem | Anlamı |
|---|---|
| Metni düzenlerken Enter | Geçerli metin düzenlemesini onaylar |
| Parameters panelindeki Save | Geçerli içerik ve stil değişikliklerini dosyaya yazar |
| Cancel / Reset | Geçerli taslağı iptal eder veya sıfırlar; daha önce onaylanmış tüm değişiklikleri silmez |
| Düzenleyicide Undo / Redo | Onaylanmış manuel düzenlemeleri geri alır veya yeniden uygular |
| Delete element | Seçili öğeyi kaldırır; bağımlılıkları kontrol edin ve gerekirse Undo kullanın |
Kaydedilen sonucu kontrol edin
- Edit modundan çıkın ve önizlemeyi yeniden yükleyin. Değişikliğin korunduğunu doğrulayın.
- Görünüm alanı menüsünden bir mobil boyuta geçin ve gerçek kontrolleri test edin.
- Daha eski bir HTML sürümüne ihtiyacınız varsa sürüm geçmişini kullanın. Paylaşılan bir dosyada yeni sürümü kontrol ettikten sonra bağlantısını güncelleyin.
Bir HTML animasyonunu düzenlemek, daha önce oluşturulmuş bir MP4 dosyasını değiştirmez. Yeni bir render isteyin, ardından yeni videoyu inceleyin.
Seçemiyor veya kaydedemiyorsanız
Preview görünümünde desteklenen bir HTML dosyası açtığınızı ve projenin düzenlenebilir olduğunu doğrulayın. Salt okunur paylaşılan bir proje, düzenlemeyi devre dışı bırakırken yorumlara izin verebilir. Edit modundan çıkıp yeniden açın, ardından gerekirse dosyayı yeniden yükleyin. Seçim yaptığınızda hâlâ çerçeve veya denetçi görünmüyorsa değişikliği ajana açıklamak için Comment ya da Mark kullanın ve sorunu bildirirken uygulama sürümünüzü ekleyin. Bir öğe seçmeden veya sonucu doğrulamadan Save seçeneğine tekrar tekrar tıklamayın.