Docstoc

Tutorial Artisteer Bahasa Indonesia Mr.Lee

Document Sample
Tutorial Artisteer Bahasa Indonesia Mr.Lee Powered By Docstoc
					Artisteer
Pemakai Manual

DAFTAR ISI
No                                                                                                                                                  Halaman
1. Apa Artisteer ............................................................................................................................             4
2. Bagaimana bekerja dengan antarmuka Artisteer?....................................................................                                      5
3. Panduan Ringkas ......................................................................................................................                 6
     a. Men-download Artisteer .....................................................................................................                      6
     b. Persyaratan Sistem ..............................................................................................................
     c. Instalasi Artisteer ................................................................................................................
     d. Mengaktifkan perangkat lunak ...........................................................................................
     e. Membuat desain dasar .........................................................................................................
     f. Kustomisasi lebih lanjut ......................................................................................................
     g. Kotak dialog ........................................................................................................................
     h. Bekerja dengan warna .........................................................................................................
     i. Warna dialog Selector .........................................................................................................
4. Navigation Bar .........................................................................................................................
     a. Ide atau Gagasan ..................................................................................................................
         1. Membuat Desain Anda ....................................................................................................
         2. Membuat Penyesuaian .....................................................................................................
     b. Ekspor Desain ......................................................................................................................
         1. Template ..........................................................................................................................
         2. Ekspor Desain pilihan ......................................................................................................
            a. Mengekspor suatu desain sebagai template HTML .....................................................
            b. Mengekspor suatu desain sebagai tema Wordpress .....................................................
            c. Mengekspor suatu desain sebagai CodeCharge Studio Proyek ...................................
     c. Layout / Susunan .................................................................................................................
         1. Halaman / Kolom Layout ................................................................................................
         2. Individu Elemen Layout ..................................................................................................
     d. Warna & Font ......................................................................................................................
         1. Merubah Warna ...............................................................................................................
         2. Font Theme ......................................................................................................................
     e. Latar belakang / Background ...............................................................................................
     f. Sheet / Lembar Kerja ...........................................................................................................
     g. Header ..................................................................................................................................
         1. Header Layout .................................................................................................................
    2. Header Latar Belakang Foto ............................................................................................
    3. Header foreground Foto ..................................................................................................
    4. Judul ................................................................................................................................
h. Menu ....................................................................................................................................
    1. Menu Styles .....................................................................................................................
    2. Menu Bar .........................................................................................................................
    3. Menu Items / Produk .......................................................................................................
    4. Navigasi Sub Items / Produk ...........................................................................................
i. Bloks / blok ..........................................................................................................................
    1. Blok Styles.......................................................................................................................
    2. Background / Latar .........................................................................................................
    3. Shadow / Bayangan .........................................................................................................
    4. Header ..............................................................................................................................
    5. Content / Isi .....................................................................................................................
j. Buttons / Tombol-tombol ....................................................................................................
    1. Tombol Styles ..................................................................................................................
    2. Tombol Format ................................................................................................................
k. Glossary / Glosarium ...........................................................................................................
1.   Apa Artisteer?
       Artisteer adalah desain produk dan pertama otomatisasi Web hanya itu langsung menciptakan
Website melihat fantastis dan Blog template. Ini adalah perangkat lunak kuat yang membuat ANDA
seorang desainer Web profesional Website, tema Wordpress dan template blog. Hal ini memungkinkan
Anda membuat desain fantastis mencari situs web dan template dalam beberapa menit, tanpa harus tahu
apa-apa tentang grafik mengedit atau HTML.




       Dengan Artisteer ANDA segera menjadi ahli desain Web, mengedit dan mengiris grafik,
pengkodean XHTML dan CSS, dan membuat template CMS dan Wordpress tema - semua dalam
hitungan menit, tanpa Photoshop atau Dreamweaver, dan tidak ada keterampilan teknis.
Gunakan Artisteer untuk menghasilkan ide desain Web keren, menyesuaikan desain yang dihasilkan
dengan menggunakan elemen termasuk banyak, latar belakang, obyek foto dan tombol, membuat
profesional dan penuh sesuai HTML dan kode CSS dan ekspor desain Anda untuk membuat Web
tampak hebat dan Blog template.
Membuat desain besar belum pernah lebih mudah!!
2. Bagaimana bekerja dengan antarmuka Artisteer?
     Antarmuka Artisteer cukup sederhana untuk belajar. Ada beberapa item utama: Menu Utama, Menu
Akses Cepat, Tabbed Navigation Bar dan Desain Gambar (disorot pada gambar di bawah).
Menu Utama berisi file perintah dasar, dokumen baru dan standar lain untuk item menu File.
Quick Access Menu / Akses Cepat Menu berisi Undo, Redo, Simpan dan cara pintas Buka.
Navigasi Bar berisi semua alat editing yang tersedia.
Design Preview / Desain Gambar memungkinkan Anda melihat bagaimana desain Anda akan terlihat
seperti. Semua link dan tombol-tombol pada preview nonclickable (tanpa diklik).
3. Panduan Ringkas
   a. Men-download Artisteer
     Anda dapat men-download file instalasi Artisteer dari Artisteer situs Web resmi di
http://www.artisteer.com. Perangkat lunak ini diberikan dengan masa percobaan gratis yang
memungkinkan Anda untuk mengevaluasi produk sebelum membeli.              Selama jangka waktu ini
Artisteer sepenuhnya fungsional dan memiliki semua fitur yang tersedia untuk pengujian. Pembatasan-
satunya adalah bahwa semua template dan gambar yang dihasilkan dengan Artisteer akan memiliki
tanda air pada mereka sampai produk diaktifkan. Masa percobaan tidak terbatas sehingga Anda dapat
mengaktifkan software setiap kali Anda ingin dan petunjuk aktivasi yang disediakan pada Perangkat
Lunak bab Aktivasi.

   b. Persyaratan Sistem
     Bagian ini menjelaskan persyaratan sistem untuk perangkat lunak Artisteer.
   Development Environment / Pembangunan Lingkungan
   • Intel atau prosesor AMD 1500 Mhz atau lebih tinggi
   • 100 MB ruang disk bebas
   • 512 Mb RAM atau lebih tinggi
   Microsoft Windows 2000, XP, Vista
   • Microsoft. NET Framework 2.0 +. Hal ini dapat diperoleh dari situs web Microsoft di:
         http://www.microsoft.com/downloads/details.aspx?familyid=0856eacb-4362-4b0d-8eddaab15c5e04f5&
displaylang=en
Browser yang didukung :
• Internet Explorer 6 +
• Firefox 2 +
• Opera 9 +
• Safari 1 +
• Google Chrome
Didukung teknologi :
• CodeCharge Studio 4
• Wordpress (2,5-2,6) sistem manajemen konten
Standar didukung :
• XHTML 1.0 Transitional
• CSS 2
• Section508 partially (sebagian)
• PNG dengan transparansi
   c. Instalasi Artisteer
      Bab ini menjelaskan cara menginstal Artisteer pada komputer Anda.
        Sebelum Anda melanjutkan pastikan komputer Anda memenuhi persyaratan yang tercantum
   dalam bab Persyaratan Sistem.
   1. Login ke Windows sebagai Pengguna Power, atau berperan Administrator Primer.
   2. Klik dua kali file yang bernama instalasi ArtisteerInstall.exe. Ini akan memulai proses instalasi
      standar.
   3. Pilih bahasa yang Anda ingin gunakan selama instalasi. Klik tombol Next.
   4. Ikuti petunjuk yang diberikan oleh wizard instalasi.
   5. Hati-hati membaca Perjanjian Lisensi. Jika Anda menerima syarat-syarat nya, cek "Saya Setuju
      persyaratan Perjanjian Lisensi" pilihan dan lanjutkan ke langkah berikutnya. Jika tidak, berhenti
      instalasi.
   6. Pilih folder tujuan di mana Anda ingin menginstal produk.
   7. Menunjukkan apakah Anda ingin membuat ikon shortcut pada desktop dan panel Quick Launch.
   8. Klik tombol Install untuk memulai instalasi.
   9. Klik tombol Finish ketika instalasi selesai.
   d. Mengaktifkan perangkat lunak.
      Setelah Anda membeli Artisteer Anda akan menerima Nomor Seri yang akan digunakan untuk
mengaktifkan perangkat lunak. Aktivasi menghapus watermark ditambahkan ke template yang
dihasilkan oleh versi trial.
      Untuk mengaktifkan klik pada icon produk Palet untuk membuka Artisteer dialog aktivasi dan
masukkan nomor serial Anda di kotak pertama. Jika komputer Anda terhubung ke internet, cek "Auto-
aktivasi melalui internet" pilihan dan klik tombol Aktifkan.
      Jika Anda bekerja off-line menggunakan link berikut untuk mendapatkan kunci aktivasi dari
komputer lain yang terhubung ke web: http://www.artisteer.com/?p=a
Dalam kasus ini hapus centang "Auto-aktivasi melalui internet" pilihan dan masukkan kunci aktivasi
yang diperoleh secara langsung dalam kotak Kunci aktivasi.




Restart Artisteer setelah sukses diaktivasi!!
   e. Membuat desain dasar
      Artisteer semudah 1-2-3:
Keterangan dalam Gambar :
Ballon 1 : Suggest Design / Sarankan Desain adalah alat yang hebat untuk menemukan ide tema
           dasar dan tempat untuk memulai dari.

Ballon 2 : Bila Anda menemukan ide desain yang baik, Anda mungkin ingin mengatur beberapa
           elemen desain seperti warna, font atau latar belakang halaman terpisah. The "sesuai
           Sarankan ..." tombol akan membantu Anda dalam hal ini.

Ballon 3 : Klik Ekspor Desain untuk menyimpan desain yang dibuat sebagai tema Wordpress, HTML
           template atau format lain Anda lebih suka untuk digunakan di situs Anda.

     Dalam kebanyakan kasus, hampir semua yang anda perlu lakukan dapat dimulai dengan
mengklik pada tombol Design Suggest. Ini sangat mirip dengan menonton tayangan slide. Hal ini
menyenangkan dan bahkan seorang anak bisa melakukannya!

   f. Kustomisasi lebih lanjut
     Artisteer adalah alat yang kuat dengan kemampuan kustomisasi besar. Setelah Anda menemukan
ide desain yang baik, Anda dapat masuk ke tab spesifik dan menyesuaikan desain agar sesuai dengan
kebutuhan Anda. Pada setiap tab ada banyak pilihan untuk mengubah elemen tertentu.
Itu belum semua! Jika Anda tidak dapat menemukan opsi yang Anda inginkan dalam daftar tertentu
lalu klik "More ..." untuk mendapatkan kemampuan kustomisasi lengkap:
Berikut adalah contoh bagaimana mencari tab Sheet:
   g. Kotak dialog
     Banyak pilihan dan pengaturan termasuk dalam kotak dialog yang dapat diakses dengan
mengklik tombol panah kecil       di sebelah kanan judul kelompok.




User interface (Antarmuka pengguna) untuk kotak dialog umum meliputi bagian-bagian berikut:
• Dialog keterangan yang menunjukkan apa pilihan yang tersedia dalam dialog
• Daftar kelompok pilihan yang terletak di sebelah kiri dari kotak dialog. Klik kelompok untuk
 memperluas pilihan.
• Pilihan dan Pengaturan yang tersedia untuk grup yang dipilih.
• kotak centang Preview untuk melihat hasil pengaturan secara otomatis seperti yang berubah.
• tombol Preview untuk menampilkan hasil pengaturan pada halaman tersebut.
• tombol OK untuk menerapkan pengaturan dan tutup kotak dialog.
• tombol Cancel / Batal untuk membatalkan perubahan dan menutup kotak dialog.
Sebuah contoh dari kotak dialog yang diberikan dalam gambar di bawah ini :
      Sebagian besar kotak dialog berisi pengaturan yang dapat diubah dengan menggunakan slider
bar. Biasanya ini adalah pengaturan untuk lebar, tinggi, opacity, transparansi dan nilai-nilai rentang
lainnya.   Posisi pointer lebih dari 13 slider dan tarik ke kanan atau kiri untuk menambah atau
mengurangi opsi khusus yang nilai. Nilai yang dipilih akan ditampilkan pada kotak di samping slider
bar. Anda juga dapat memasukkan nilai yang diinginkan secara langsung dalam textbox ini.
      Gunakan "Pratinjau" atau tombol "Pratinjau" pilihan yang tersedia di bagian bawah jendela
dialog untuk melihat perubahan. Jika "Pratinjau" kotak centang dicentang, perubahan akan segera
ditampilkan pada halaman tersebut saat Anda tarik slider. Jika Anda mengetikkan nilai langsung pada
kotak pilihan, klik di luar kotak untuk memiliki nilai diterapkan ke halaman.
      Jika "Pratinjau" opsi tidak dicentang, tekan tombol Preview untuk melihat perubahan di layar.
Ini akan membantu Anda dengan mudah mencapai gaya yang diinginkan dari halaman Anda.
Finally click OK or Cancel button to commit or discard your changes.
   h. Bekerja dengan warna
      Warna pada monitor komputer yang terdiri dari berbagai jumlah merah, hijau dan biru warna
dasar. Tergantung pada seberapa banyak Anda ambil dari setiap warna dasar, Anda dapat membuat
salah satu warna yang dapat menampilkan monitor. Sebagai contoh, sebuah campuran dari merah dan
hijau menghasilkan warna kuning, campuran dan biru - magenta merah dan sebagainya. Mencampur
semua warna dasar tiga dengan intensitas penuh menghasilkan warna putih sedangkan ketiadaan
kembali semua komponen warna hitam.
      Nilai untuk hijau, dan biru warna dasar, merah biasanya ditentukan dengan menggunakan skala
0-255 (desimal), di mana 255 mewakili 100% dari intensitas warna.
      RGB adalah model warna yang nyaman untuk grafis komputer karena sistem visual manusia
bekerja dengan cara yang serupa. Namun persepsi manusia tidak melihat warna sebagai kembar tiga
nomor: merah, hijau dan biru. Sebaliknya ia cukup nyaman untuk menggambarkan warna sebagai
terdiri dari warna, saturasi dan ringan (atau luminositas). HSL mendefinisikan Skema warna yang
lebih alami dan dapat divisualisasikan sebagai pusat sumbu silinder yang berkisar dari hitam di bagian
bawah untuk putih di bagian atas dengan warna-warna netral di antara mereka, di mana sudut sekitar
sumbu sesuai dengan "warna", jarak dari sumbu sesuai untuk "kejenuhan", dan jarak sumbu sepanjang
sesuai dengan "ringan", atau "luminositas".




Hue menentukan warna, murni spektral. Ini diukur sebagai lokasi pada roda warna, dinyatakan sebagai
gelar antara 0 ° dan 360 °. Dalam penggunaan umum, warna yang diidentifikasi dengan nama warna
seperti merah, oranye, atau hijau.




      Saturasi adalah kemurnian warna. Ini merupakan jumlah abu-abu secara proporsional dengan
rona, diukur sebagai persentase dari 0% (abu-abu tanpa warna sama sekali untuk 100%) (jenuh penuh
warna). Pada roda warna standar, kejenuhan meningkat dari pusat ke tepi.
      Luminositas (Lightness): adalah relatif ringan atau warna kegelapan, biasanya diukur sebagai
persentase dari 0% (hitam) sampai 100% (putih).
Artisteer memungkinkan Anda untuk bekerja dengan baik HSL dan skema warna RGB. Warna yang
diinginkan dapat ditetapkan dalam dialog Color Selector.
   i. Warna dialog Selector
      Pemilih Warna dialog ditampilkan bila Anda memilih "More Colors ..." tombol di salah satu
dialog pilihan warna.
       The Selector dialog Warna memungkinkan Anda memilih warna yang diinginkan dan
menyesuaikan warna, saturasi, dan kecerahan warna ini. Ada luminositas dan tab Hue tersedia dalam
dialog. Kedua tab memiliki wilayah pemilihan warna (palet warna) di mana Anda dapat memindahkan
slider sampai Anda puas dengan warna.
       Pada tab luminositas ada slider luminositas khusus. slider ini memungkinkan Anda menambah
atau mengurangi kecerahan warna dari nol di bagian bawah untuk 100 di atasnya. Dengan luminositas
yang dipilih, Anda dapat pergi ke palet warna dan menyeret pemetik lingkaran kecil horisontal dan
vertikal untuk mengubah warna dan saturasi warna yang masing-masing.
       Tab Hue slider Hue berisi penyesuaian yang terpisah. Memindahkannya jauh-jauh dari merah (di
bagian bawah) melalui oranye, kuning, hijau, biru hingga ungu memungkinkan Anda untuk memilih
rona warna yang diinginkan.
       Memiliki Hue dipilih, Anda juga dapat memindahkan warna palet pemetik dari kiri ke kanan dan
dari atas ke bawah untuk tambahan mengatur saturasi dan nilai-nilai luminositas warna. Saturasi dapat
bervariasi dari 0% (benar-benar tak jenuh) menjadi 100% (benar-benar jenuh, murni warna).
Luminositas berkisar dari 0 (hitam) sampai 100% (putih).
       Nilai yang ditampilkan di bagian kanan set kotak akan berubah untuk menunjukkan pengaturan
warna yang tepat. Nilai-nilai ini juga dapat diubah secara manual, langsung di kotak teks. Ini mungkin
mudah bila Anda menyalin nilai warna yang tepat dari beberapa perangkat lunak grafis lain dan ingin
menggunakannya di Artisteer.
 Hue      Hue nilai warna yang berkisar dari 0 ° sampai 360 °.
 Sat      Kejenuhan warna berkisar dari 0% (sepenuhnya desaturated) hingga 100% (sepenuhnya jenuh).
 Lum      Luminositas warna diukur dalam persentase: dari 0 (hitam) sampai 100% (putih).
 Red      Nilai desimal untuk warna merah.
 Green    Nilai desimal untuk warna hijau
 Blue     Nilai desimal untuk warna biru
 Hex      Sebuah kode heksadesimal warna (biasanya digunakan dalam kode HTML).

Pratinjau" pilihan memungkinkan untuk melihat halaman dengan warna yang dipilih diterapkan pada
itu. Ok dan tombol Batal memungkinkan Anda untuk mengirimkan atau membuang perubahan yang
dilakukan.
4. Navigation Bar
      Mari kita lihat lebih dekat di bar navigasi. Hal ini dibagi menjadi sembilan kategori yang berbeda
- berbeda digunakan untuk menyesuaikan blog Anda. Bergerak dari kiri ke kanan, kita mulai dengan
ide keseluruhan dan tata letak ke situs. Ketika kita bergerak ke kanan, kita menjadi fokus pada bagian-
bagian tertentu dari situs seperti blok, dan tombol.


   a. Ide atau Gagasan
         Tab Ide adalah cara terbaik untuk cepat membayangkan hak desain website anda di depan
   mata Anda.
      1. Membuat Desain Anda
           Mari Artisteer membuat desain untuk Anda. Fitur desain Suggest terbaik digunakan di
      awal. Hal ini memungkinkan Anda untuk melihat berbagai desain yang tersedia dan membantu
      Anda menentukan gaya dan tema yang Anda sukai.
      2. Membuat Penyesuaian
           Anda dapat membuat penyesuaian pada komponen banyak individu saat brainstorming ide-
      ide untuk desain Web Anda. Mungkin font yang tidak sesuai dengan tata letak situs atau tombol
      tidak cocok navigasi. Dengan melakukan penyesuaian ini, Anda bisa lebih mendekati tampilan
      yang ingin Anda capai.




   b. Ekspor Desain
         Setelah Anda telah dilunasi pada tampilan dasar situs Anda, Anda dapat mengekspor sebagai
   desain atau template yang kompatibel dengan jenis blog yang ingin Anda gunakan.




   Ada dua langkah yang perlu diikuti untuk ekspor desain :
   1. Pertama, pilih template yang akan diterapkan dan digunakan ketika melihat halaman di Artisteer.
      Saat mengikuti template yang tersedia: Website Design, Wordpress dan CodeCharge Studio.
   2. Selanjutnya, kirim Artisteer apa opsi ekspor yang ingin Anda gunakan saat membuat template
      yang dipilih. Pilih pilihan yang dikehendaki Ekspor Desain untuk mengekspor dan menyimpan
      file desain Anda sebagai gaya individual.
   Sekarang mari kita bahas masing-masing pilihan sedikit lebih detail.
    1. Template
Icon/Ikon          Option / Pilihan       Deskripsi
                                          Template ini dapat dipilih jika Anda tidak menggunakan
                   Website Design         CMS tertentu (sistem manajemen konten), tetapi ingin
                                          membuat desain css profesional untuk website Anda.
                                          Wordpress template pilihan ini disediakan untuk orang-orang
                                          yang membuat desain untuk website Wordpress.
                   WordPress
                                          Setelah memilih template ini dari daftar Template Anda
                                          punya opsi untuk mengekspor desain sebagai HTML
                                          template atau tema Wordpress.
                                          CodeCharge Studio template pilihan ini disediakan untuk
                                          para   pengembang      dan   desainer    yang   menggunakan
                                          CodeCharge Studio alat pengembangan untuk membuat
                   CodeCharge Studio
                                          aplikasi web.


                                          Setelah memilih template ini dari daftar Template Anda
                                          punya opsi untuk mengekspor desain sebagai HTML
                                          template atau sebagai CodeCharge Studio Proyek.

    2. Ekspor Desain pilihan
       - Mengekspor suatu desain sebagai template HTML :
           a. Pilih salah satu template dari daftar Template.
           b. Pilih Ekspor Desain -> "HTML, Dreamweaver Adobe dan Microsoft Expression Web
              Template".
           c. Ketik path atau klik tombol Pilih untuk menentukan folder tujuan di mana Anda ingin
              membuat template HTML.
      Template yang dihasilkan akan berisi markup, gaya dan grafis yang diperlukan untuk
    menerapkan desain ke setiap halaman Web.
       - Mengekspor suatu desain sebagai tema Wordpress :
              Untuk mengekspor desain sebagai tema Wordpress yang dapat diterapkan pada instalasi
       Wordpress yang ada ikuti langkah berikut:
       1.Pilih Template-> Wordpress template.
       2.Pilih Ekspor Desain -> "Wordpress tema" pilihan.
       3.Dalam dialog pemilihan folder klik tombol Pilih untuk memilih folder tema.
           Setelah ekspor Anda akan mendapatkan file-tema spesifik Wordpress yang dapat ditemukan
    dalam folder tema pada server dan mudah diterapkan ke situs-situs Wordpress. Path ke folder
    tema     dalam    sistem    Wordpress     biasanya    terlihat   seperti   :   WordPressFolder\wp-
    content\themes\ThemeName.
           Untuk menerapkan tema baru login ke Admin Panel Wordpress, navigasikan ke tab
    Presentasi dan mengaktifkan tema ini.
           Di Wordpress dihasilkan tema widget siap dan kompatibel dengan versi Wordpress 2.5 dan
  yang lebih tinggi.
      - Mengekspor suatu desain sebagai CodeCharge Studio Proyek :
              Untuk membuat desain yang dapat diterapkan untuk proyek CodeCharge Studio
      langkah-langkah berikut harus dilakukan:
      1.Pilih Template-> CodeCharge Studio template.
      2.Pilih Ekspor Desain -> "CodeCharge Studio Proyek" pilihan.
      3.Browse ke folder di mana Anda ingin mencari proyek CCS dan klik Ok untuk mengekspor
        file.
      Ketika ekspor selesai, sebuah CodeCharge Studio proyek baru akan dibuat di lokasi yang
  ditentukan. Halaman-halaman berikut akan ditambahkan ke proyek:
  • PageTemplate
  • Header
  • Footer
  • Main
  • About
      PageTemplate adalah halaman penting yang akan digunakan sebagai dasar untuk menciptakan
semua halaman baru dalam proyek CCS.             fungsi ini dicapai dengan menggunakan Proyek
Pengaturan (Setting) -> General (Umum) -> New Page pilihan Template (New page Template
Option).

      PageTemplate termasuk halaman Header dan Footer yang digunakan untuk menambah latar
belakang halaman, lembaran, header dan gaya menu di halaman. Jadi, semua halaman yang baru
dibuat CCS akan memiliki latar belakang halaman, lembaran, header dan gaya menu otomatis
diterapkan kepada mereka.

      Namun Artisteer gaya yang dihasilkan tidak dapat secara otomatis diterapkan untuk bentuk
CCS, tombol, dan blok lainnya pada halaman.

Untuk menambahkan gaya komponen tersebut Anda dapat mempertimbangkan salah satu solusi
berikut:
• Buka CCS Style Builder (Tools-> Styles) dan menambah gaya baru yang terlihat mirip dengan
 gaya yang dihasilkan oleh Artisteer. Gunakan gaya baru untuk bentuk CCS dan kontrol.
• Modifikasi CCS halaman template untuk menambahkan gaya Artisteer secara manual. Dalam hal
 ini, jangan pilih gaya apapun ketika bentuk-bentuk membuat dan kontrol di CCS. Kemudian
 beralih ke mode HTML dan memodifikasi halaman template Anda secara manual menambahkan
 kelas Artisteer dan tag html yang diperlukan. Sampel kode html disediakan pada halaman Utama
 sehingga Anda dapat memeriksa dan memodifikasi Halaman CCS template yang sesuai.
      Kode contoh di bawah ini menunjukkan bagaimana menerapkan gaya yang dihasilkan
Artisteer ke bentuk Rekam di halaman CCS. Kode HTML tidak berubah ditampilkan hitam, garis-
garis kode dihapus disilangkan keluar dan disorot dalam warna merah, dan garis-garis ditambahkan
ke kode yang disorot dalam warna biru.
- Instalasi dan Menggunakan Template Blogger
  Hosting Gambar
     Blogger tidak mendukung upload foto langsung ke rekening Blogspot, sehingga Anda akan
perlu memilih salah satu dari metode yang ada di Artisteer untuk hosting gambar template eksternal.
Artisteer menyediakan tiga pilihan hosting gambar yang dapat digunakan tergantung pada
keandalan dan persyaratan kinerja:

1. Picasa Web Album
  Layanan ini digunakan secara default dan cocok dalam kebanyakan kasus sebagai Picasa
menggunakan account Google yang sama digunakan untuk Blogger dan tidak memerlukan
pendaftaran tambahan atau konfigurasi.
CATATAN: Picasa tidak mendukung gambar besar yang sedang diakses dari domain kustom,
sehingga ketika hosting blog Anda di domain kustom (misalnya www. com). Artisteer bukannya
akan meng-upload gambar yang lebih besar untuk gambar imageshack hosting gratis layanan. Hal
ini kadang-kadang dapat berakibat kinerja yang lebih lambat, sehingga pemilik domain kustom
dapat mempertimbangkan memilih hosting gambar lainnya opsi di bawah.

2. ImageShack
  ImageShack adalah sebuah alternatif untuk Picasa dan menawarkan layanan gratis yang tidak
memerlukan pendaftaran pengguna. Artisteer mendukung layanan baik gratis dan berbayar account
imageshack. Anda memiliki account dibayar masukkan informasi login Anda di Artisteer untuk
performa yang lebih baik dan kehandalan blog.
3. FTP
  Anda dapat memilih untuk meng-upload foto ke server FTP dengan memberikan informasi
account FTP Anda, FTP folder di mana Anda ingin gambar yang akan disimpan, dan URL yang
sesuai ke folder FTP ditentukan.
Blogger Template
  Anda juga dapat menggunakan layanan lain untuk meng-host gambar Anda. Dalam kasus seperti
itu Anda memilih untuk ekspor (bukan menerbitkan) Anda dalam format template Blogger dan
terpisah upload foto ke tujuan hosting Anda.
Silakan, ingatlah bahwa baik imageshack atau Picasa memungkinkan untuk menerbitkan. File swf.
Menggunakan Flash Header akan membutuhkan beberapa layanan hosting lainnya untuk meng-
upload foto. Untuk server "pilih FTP" sebagai layanan hosting di Artisteer Pilihan Ekspor.
Instalasi Template Blogger
  Dalam beberapa kasus, Anda mungkin memilih untuk tidak mempublikasikan template Blogger
Anda, tetapi ekspor dan upload secara manual sebagai berikut:
1. Buka file main.xml diekspor dan memodifikasi path gambar untuk mencerminkan lokasi yang
  Anda telah memilih untuk menempatkan file gambar.
2. Masuk ke Dashboard Blogger Anda.
3. Klik "Layout" link di Dashboard. Blogger template
4. Klik "Edit HTML" link dalam tab bar.
5. Browse main.xml pada drive lokal Anda. Blogger template
6. Klik tombol "Upload". (silakan abaikan pesan error, jika ada)
7. Konfirmasi dan Simpan.
  Perlu diketahui bahwa jika Anda menggunakan template klasik gaya di Blogger, Anda akan tinju
perlu meng-upgrade itu, sebagai berikut:
1. Klik "Template" link.
2. Klik "Customize Design".
3. Klik tombol "Upgrade Template Anda".
4. Simpan Template.
Kemudian Anda harus melihat "Layout " link di Dashboard Blogger Anda.
Membuat Top Menu
1. Masuk ke Dashboard Blogger Anda.
2. Pergi ke Layout -> Elemen Halaman -> Top Menu -> Edit template blogger
3. Klik "Tambah Link" untuk menambahkan link.
4. Jika Anda membutuhkan menu multi-level silakan masukkan "-" (dash) sebelum nama Subitem,
  misalnya: "-Submenu Item".
- Harap dicatat bahwa Submenu item harus ditempatkan di bawah item menu induk.
5. Klik Simpan. Blogger Templates
Catatan:
* Jika Anda tidak ingin menggunakan menu, silakan pilih sebuah layout di Artisteer tanpa menu.
* "Home" item ditambahkan ketika "Tampilkan Home item" pilihan di Artisteer dialog Pilihan
  Ekspor diatur ke Ya.
  -   Blogger Tampilkan Home item
* "Tampilkan Navbar Blogger" pilihan memungkinkan Anda untuk menyembunyikan /
  menampilkan bar navigasi Blogger di bagian atas halaman Anda.
  -   Tampilkan Navbar Blogger
  Pastikan bahwa Anda tidak melanggar Syarat Layanan Blogger jika Anda memutuskan untuk
menghapus Navbar.
Bekerja dengan Menu Vertikal
a. Arsip sebagai Menu Vertikal
  Artisteer secara otomatis menerapkan gaya menu vertikal ke Arsip.
      Anda dapat melihat setting pada Ekspor template-> Ekspor Pilihan-> Tampilkan Arsip
sebagai Vmenu-> Ya Blogger Tampilkan Arsip sebagai Vmenu untuk menonaktifkan penyesuaian
memilih "Tidak" pada menu dropdown dari Arsip Tampilkan sebagai Vmenu.
b. Menambahkan halaman ke menu Vertikal
  Sementara Menampilkan Artikel Pendukung sebagai menu vertikal pada tahap pengembangan,
kami menawarkan anda beberapa tips mengenai bagaimana Anda dapat mengatur halaman Vmenu
secara manual, yaitu sebagai berikut :
1. Pertama, nonaktifkan Tampilkan Vmenu Arsip sebagai pilihan di Ekspor template-> Ekspor
  Pilihan-> Tampilkan Arsip sebagai Vmenu-> Tidak
2. Buka Dashboard dan pergi Customize-> Layout-> Halaman-> Edit. Ketik judul item menu.
3. Masukkan URL untuk menampilkan item menu sebagai link absolut atau ketik "." (Dot) di awal
  baris untuk menampilkan sebagai link relatif.
4. Untuk menambahkan sub-item menaruh "-" (dash) sebelum nama sub-item seperti dalam 5
  langkah Menciptakan Top Menu.
Mengisi Bagian Link Footer yaitu :
1. Masuk ke Dashboard Blogger Anda.
2. Pergi ke Layout - Elemen Halaman> - Link Footer> -> Edit.
3. Masukkan informasi link yang diinginkan dan klik "Tambah Link".
4. Simpan.
Mengisi Bagian Hak Cipta yaitu :
1. Masuk ke Dashboard Blogger Anda.
2. Pergi ke Layout - Elemen Halaman> -> Teks Copyright -> Edit.
3. Masukkan teks yang diinginkan.
4. Simpan.
c. Layout / Susunan Tata Letak
        Tab tata letak adalah di mana Anda dapat dengan cepat mengubah posisi keseluruhan elemen
   pada halaman.




     1. Halaman / Kolom Layout
          Anda dapat dengan cepat mengubah posisi header dan bar navigator. Tempatkan navigator
     di atas atau di bawah header atau memilih untuk tidak menggunakan menu bar sama sekali.
     Selain itu, jika halaman Anda akan memiliki lebih banyak konten, Anda mungkin ingin
     memperluas situs Anda menjadi dua atau lebih kolom.




                   Klik di sini untuk
                   menentukan lebar
                   kolom kustom
     Bila multi-kolom layout sedang digunakan, Layout Options dialog menampilkan satu set
  slider yang yang memungkinkan Anda untuk mengatur lebar persentase dari kolom.




  2. Individu Elemen Layout
       Gunakan tata letak elemen individu untuk mengubah posisi dari berbagai elemen termasuk
  lokasi kotak pencarian, posisi kategori; link arsip lokasi, Blogroll, serta posisi posting. Artisteer
  langsung melakukan semua pekerjaan, dengan meninggalkan mouse pilihan, Anda dapat melihat
  pratinjau apa pilihan Anda akan terlihat seperti.




d. Warna & Font
  Warna & Font tab menyediakan kemampuan untuk mengubah warna dan font dari template.




  1. Merubah Warna
     Membuat perubahan pada tema keseluruhan situs. Anda dapat memilih dari berbagai macam
  tema warna yang tersedia. Anda bahkan dapat mengubah warna masing-masing. Setelah memilih
  satu set warna, memperbaiki warna lebih jauh dengan menyesuaikan kontras warna secara
  keseluruhan.




  Adjust / Menyesuaikan

     Dalam blok ini Anda memiliki kemampuan untuk menyesuaikan warna tema. Pilih salah satu
  dari skema standar atau menyesuaikan warna tema memilih warna yang diinginkan.
     Gunakan "Mengatur Options ..." pilihan untuk menyesuaikan luminositas dan nilai-nilai
kejenuhan warna tema. Masukkan nilai atau tarik slider ke kanan untuk meningkatkan nilai opsi
atau ke kiri untuk menurunkan mereka. Kedua nilai dapat berkisar dari -100 sampai 100 persen.
  2. Font Theme
     Pilih dari berbagai tema font agar sesuai dengan tampilan dan isi dari keseluruhan situs.




e. Background / Latar belakang

     Latar belakang halaman sama pentingnya sebagai halaman itu sendiri.            Mengubah latar
belakang untuk mencapai efek gaya yang diinginkan. Anda dapat memilih untuk melihat gradien,
perubahan tekstur, silau atau warna latar belakang secara keseluruhan.




                                                                                 kustomisasi
                                                                                   ...lebih


     The "Page Background" kotak dialog meliputi beberapa slider bar untuk menyesuaikan
pengaturan latar belakang. Ubah silau dan transparansi tekstur, kontras atau gradien tinggi untuk
mencapai hasil yang terbaik.
f. Sheet / Lembar Kerja
     Membuat perubahan pada posisi keseluruhan dan tampilan lembar atau halaman.         Anda
mungkin lebih suka sheet dengan tepi bulat bukannya tepi persegi. Juga, Anda dapat mengubah
posisi dan melihat lembaran. Mungkin Anda ingin pindah ke bawah sedikit dari bagian atas
halaman, memasukkan efek bayangan atau mengubah lebar perbatasan atau warna lembaran.




                                                             Klik untuk
                                                             menyesuaikan desain
                                                             lembar Anda

     Buka Sheet Option "Lembar Pilihan" dialog untuk meningkatkan desain lembaran. Sesuaikan
Sheet & Shadow parameter untuk mencapai hasil yang diinginkan:




     Lembar parameter meliputi lebar lembar dan perbatasan, bantalan dan nilai-nilai jari-jari.
Shadow kontrol parameter ukuran, sudut dan opacity bayangan serta jarak dari perbatasan lembar.
Masukkan nilai atau tarik slider ke kanan untuk meningkatkan nilai opsi atau ke kiri untuk
menurunkan mereka.

g. Header
     Tab header mengontrol semua aspek header. Membuat perubahan pada ukuran dan tampilan
header sementara mampu mencakup latar belakang dan gambar latar depan.
1. Header Layout
   Membuat perubahan pada ukuran dan mengabaikan header.


                          Klik di sini untuk
                          mengubah pilihan
                               Header


     Pilihan tata letak (seperti ukuran header dan lebar dari elemen) dapat dikonfigurasi pada tab
Umum Header "dialog Options".




2. Header Latar Belakang Foto
     Pilih dari berbagai latar belakang gambar profesional untuk digunakan di header situs Anda.
Anda juga dapat memilih untuk memasukkan gambar Anda sendiri sebagai baik atau tidak
memilih gambar latar belakang sama sekali.




       Cukup klik di sini untuk              Klik di sini untuk
       menambahkan gambar                    menentukan pilihan
       Anda sendiri ... Latar                Header kustom Latar
       Belakang                              Belakang

   Buka daftar gambar dan pilih "Insert Latar Belakang dari file" pilihan untuk menambahkan
gambar latar belakang kustom:
     Jangan ragu untuk mengubah posisi gambar atau menambahkan efek visual untuk latar
belakang untuk membuat desain Anda tampak lebih mengesankan dan unik.




     Parameter latar belakang dapat disesuaikan secara manual pada tab kedua dari dialog ""
Header Pilihan.
3. Header foreground Foto
    Pilih foto yang akan melengkapi header Anda. Pilih dari berbagai foto profesional para
pengusaha dan wanita atau menggunakan foto Anda sendiri.




                                                    Klik di sini untuk
                                                    menentukan pilihan
                                                    foreground foto kustom



                                 Klik di sini untuk
                                 menambahkan custom
                                 foreground Foto ...

    Pilih opsi "Insert Object dari File ..." dalam daftar Foto foreground untuk menggunakan
gambar kustom dalam header.




    Anda juga dapat mengubah posisi foto latar depan atau recolor itu mentransfer warna ke
gambar grayscale.
     Cahaya di sekitar gambar dapat disetel di tab ketiga dari dialog "Header Pilihan".




4. Judul
     Anda dapat mengubah teks keseluruhan yang digunakan untuk nama situs tersebut. Judul
dan slogan situs anda dapat diubah hanya dengan mengetik di kotak yang sesuai. Di sini Anda
dapat mengubah ukuran, gaya dan font judul dan slogan dan juga mengubah warna teks.




Gaya Judul :
Gunakan opsi ini untuk mengubah posisi dan ukuran judul.




     Anda dapat mengubah alignment keseluruhan atau secara manual memindahkan judul ke
mana Anda ingin untuk muncul di header. Anda juga dapat dengan cepat mengubah ukuran teks
header.
h. Menu
       Tab Menu digunakan untuk mengontrol posisi dan tampilan menu navigasi utama. Ini
terdiri dari menu bar dan item menu. Hal ini dapat diimplementasikan sebagai menu website
standar atau dalam bentuk tab atau tombol menu.




  1. Menu Styles

                                                               Klik di sini untuk
                                                               menentukan pilihan kustom
                                                               Menu Style


Ada Margin dan pilihan Jarak Jauh tersedia untuk penyesuaian tata letak menu:




     Gunakan opsi Margin untuk mengubah indent antara Produk Menu dan Header. Anda         juga
dapat mengubah pilihan Jarak untuk menentukan jarak antara Produk Menu kustom.


  2. Menu Bar
     Menyempurnakan bar navigasi lebih lanjut dengan memilih gradien keseluruhan, efek warna
dan mengisi.



                                     Mengatur Menu
                                     Pilihan bar di sini ...
Gunakan "Menu Pilihan" dialog untuk mengatur lebar perbatasan dan menyesuaikan kontras
gradien.




  3. Menu Items / Produk
     Pilih bagaimana masing-masing item pada panel navigasi akan terlihat ketika Anda membawa
  di atas atau klik pada mereka. Anda juga dapat mengubah warna dan parameter teks.



                                      Mengatur pilihan
                                      Menu item di sini ...



     Jika pengaturan default tidak memenuhi kebutuhan Anda, gunakan "Menu Pilihan" dialog
  untuk menyesuaikan pengaturan pilihan.




  4. Navigasi Sub Items / Produk
     Kontrol tampilan dan warna item yang muncul dalam submenu.




                                             Set up submenu
                                             pilihan di sini ...




    Buat perubahan tambahan untuk item Submenu pada dialog "Menu Pilihan":
i. Bloks / blok
   Blok merupakan komponen individual yang membentuk isi dari halaman tersebut. Hal-hal yang
terletak di blok menyertakan link, bookmark, pencarian, dan posting keseluruhan halaman.




   1. Block Styles
           Memilih bagaimana Anda ingin blok harus berisi. Mungkin Anda ingin agar konten di
   bawah blok jatuh dalam perbatasan.



                                                                Klik di sini untuk
                                                                mengubah gaya blok



           Pilihan Layout menyediakan kemampuan untuk mengubah jarak blok, mengubah jarak
   antara blok, atau membuat blok lebih bulat mengubah nilai radius:




   2. Background / Latar
      Jika template Anda memungkinkan, Anda dapat mengubah warna latar belakang dan batas
   blok.

                                        Blok menyesuaikan latar
                                        belakang dengan
                                        mengklik tombol ini
   Buat perubahan tambahan untuk latar belakang pada tab Latar Belakang dari dialog "" Blok
Pilihan.




3. Shadow / Bayangan
   Jika Anda memilih template dengan efek bayangan, pilihan Shadow menyediakan
kemampuan untuk mengubah ukuran, sudut dan opacity dari bayangan blok serta menunjukkan
jarak antara bayangan dan blok perbatasan.
4. Header
   Setiap blok memiliki header individu. Memilih bagaimana Anda ingin header yang mencari
blok. Anda dapat mengubah warna header maupun font dan warna teks.


                                             Kustomisasi header
                                             blok




   Tab Header dari Blok "dialog Opsi" memungkinkan Anda untuk tambahan mengatur lebar
batas, mengubah kontras transparansi gradien atau tekstur.




4. Content / Isi
       Anda juga dapat menyesuaikan warna dan gaya bagaimana konten muncul di blok. Dan
Anda juga dapat mengontrol perbatasan, warna teks dan hyperlink yang muncul di blok.


                                                              Klik di sini untuk
                                                              mengubah gaya
                                                              memblokir konten
   Untuk menambahkan kustomisasi lebih untuk menggunakan gaya konten "Content" tab pada
   dialog "Blok Pilihan". Di sini Anda punya opsi untuk mengubah nilai lebar padding dan
   perbatasan, memodifikasi transparansi tekstur atau membuat curam gradien:




j. Buttons / Tombol-tombol
   Tab Tombol ini digunakan untuk memilih bentuk dan gaya Buttons.




   1. Tombol Styles
      Pilih dari berbagai gaya tombol. Anda dapat memilih tombol dengan sudut dibulatkan lebih,
   sesuatu di antara, atau bentuk persegi panjang sekali.




   2. Tombol Format
      Membuat Anda menyentuh tombol finishing dengan mengubah gradien yang, penebalan itu s
   perbatasan, atau memilih untuk menempatkan bayangan di atasnya. Anda juga dapat mengubah
   warna mengisi dan warna teks.


                                                                 Klik di sini untuk
                                                                 menampilkan "Tombol
                                                                 Options" dialog




      The "Tombol Options" dialog menyediakan kemampuan untuk mengubah padding horisontal
   dan vertikal, lebar perbatasan, radius sudut nilai-nilai dan sebagainya.
   Efek Shadow dapat disesuaikan juga:




k. Glossary / Glosarium
   CMS
       Sebuah Content Management System (CMS) adalah sebuah aplikasi software yang
dirancang untuk membuat, mengedit, menerbitkan dan mengelola konten Website menggunakan
antarmuka berbasis web sederhana.         Konten tersebut dapat mencakup teks, foto, dokumen
elektronik, musik, video dan jenis file lainnya komputer.
       CMSs biasanya menyediakan sejumlah buatan siap dan standar solusi template untuk
aplikasi yang paling umum. Keuntungan utama dari CMS adalah bahwa hampir tidak memerlukan
keahlian teknis atau pengetahuan untuk membuat website dan mengelola isinya.
Blog
   Sebuah blog (singkatan dari "Web log") adalah jenis khusus dari situs Web dengan serangkaian
entri biasanya diposting ke satu halaman di-kronologis urutan terbalik.
Blog sering dipelihara oleh seorang individu dan merupakan kepribadian penulis, memberikan
komentar diarytype, link ke artikel di situs Web lain, deskripsi berbagai aktivitas dan isu-isu sosial,
atau menyertakan materi lainnya seperti grafis atau video.
WordPress
   Wordpress merupakan open source aplikasi blog publishing, alat blogging maju dengan fokus
pada estetika, standar web, dan kegunaan. Situs resmi Wordpress http://wordpress.org.
CodeCharge Studio
   CodeCharge Studio (CCS) adalah Rapid Web Application Development Tool dari perusahaan
YesSoftware.    Ini adalah perangkat lunak untuk visual menciptakan database-driven dinamis
aplikasi Web. Situs resmi perusahaan.
HTML
   HyperText Markup Language (HTML) adalah bahasa markup yang dominan untuk halaman
Web yang menyediakan satu set simbol markup atau kode untuk menentukan struktur dokumen
untuk pencarian di Internet dengan menggunakan program browser Web. HTML ditulis dalam
bentuk tag, dikelilingi oleh sudut kurung. Dokumen tersebut dapat berisi link, judul, paragraf,
daftar, dan teks dilengkapi dengan bentuk interaktif, tertanam gambar, dan objek lain.
CSS
   Cascading Style Sheets (CSS) merupakan bahasa yang mendefinisikan gaya penyajian dokumen
ditulis dalam bahasa markup. CSS kontrol tata letak keseluruhan, ukuran teks, gaya, dan format
dan properti desain lainnya untuk membiarkan pengembang konten yang terpisah dari desain.
RGB
   RGB adalah singkatan dari tiga warna primer cahaya - Merah, Hijau, dan Biru. Kombinasi
warna ini menghasilkan proporsi yang berbeda setiap warna dalam spektrum terlihat. Sistem RGB
digunakan untuk mewakili warna pada layar komputer.
HSL
   HSL singkatan dari Hue, Saturation, dan Lightness. Ini adalah metode untuk menggambarkan
warna seperti yang dirasakan oleh mata manusia. HSL dianggap sebagai cara yang lebih intuitif
dalam menghadapi warna dari RGB. Warna sesuai dengan warna yang sebenarnya, saturasi sesuai
dengan intensitas, dan luminositas sesuai dengan kecerahan warna.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:24
posted:2/15/2012
language:
pages:33