tutorial artiste er versi indonesia

33
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 .................................................................................................................

Upload: dunia-ilmiah

Post on 25-Jul-2015

134 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Tutorial Artiste Er Versi Indonesia

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 .................................................................................................................

Page 2: Tutorial Artiste Er Versi Indonesia

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 ...........................................................................................................

Page 3: Tutorial Artiste Er Versi Indonesia

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).

Page 4: Tutorial Artiste Er Versi Indonesia

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

Page 5: Tutorial Artiste Er Versi Indonesia

• 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.

Page 6: Tutorial Artiste Er Versi Indonesia

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:

Page 7: Tutorial Artiste Er Versi Indonesia

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:

Page 8: Tutorial Artiste Er Versi Indonesia

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 :

Page 9: Tutorial Artiste Er Versi Indonesia

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.

Page 10: Tutorial Artiste Er Versi Indonesia

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.

Page 11: Tutorial Artiste Er Versi Indonesia

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.

Page 12: Tutorial Artiste Er Versi Indonesia

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.

Page 13: Tutorial Artiste Er Versi Indonesia

1. Template

Icon/Ikon Option / Pilihan Deskripsi

Website Design

Template ini dapat dipilih jika Anda tidak menggunakan

CMS tertentu (sistem manajemen konten), tetapi ingin

membuat desain css profesional untuk website Anda.

WordPress

Wordpress template pilihan ini disediakan untuk orang-orang

yang membuat desain untuk website Wordpress.

Setelah memilih template ini dari daftar Template Anda

punya opsi untuk mengekspor desain sebagai HTML

template atau tema Wordpress.

CodeCharge Studio

CodeCharge Studio template pilihan ini disediakan untuk

para pengembang dan desainer yang menggunakan

CodeCharge Studio alat pengembangan untuk membuat

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.

Page 14: Tutorial Artiste Er Versi Indonesia

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.

Page 15: Tutorial Artiste Er Versi Indonesia

- 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.

Page 16: Tutorial Artiste Er Versi Indonesia

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.

Page 17: Tutorial Artiste Er Versi Indonesia

* "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.

Page 18: Tutorial Artiste Er Versi Indonesia

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

Page 19: Tutorial Artiste Er Versi Indonesia

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.

Page 20: Tutorial Artiste Er Versi Indonesia

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.

Page 21: Tutorial Artiste Er Versi Indonesia

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.

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.

kustomisasi

...lebih

Page 22: Tutorial Artiste Er Versi Indonesia

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.

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.

Klik untuk

menyesuaikan desain

lembar Anda

Page 23: Tutorial Artiste Er Versi Indonesia

1. Header Layout

Membuat perubahan pada ukuran dan mengabaikan 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.

Buka daftar gambar dan pilih "Insert Latar Belakang dari file" pilihan untuk menambahkan

gambar latar belakang kustom:

Klik di sini untuk

mengubah pilihan

Header

Cukup klik di sini untuk

menambahkan gambar

Anda sendiri ... Latar

Belakang

Klik di sini untuk

menentukan pilihan

Header kustom Latar

Belakang

Page 24: Tutorial Artiste Er Versi Indonesia

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.

Page 25: Tutorial Artiste Er Versi Indonesia

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.

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.

Klik di sini untuk

menambahkan custom

foreground Foto ...

Klik di sini untuk

menentukan pilihan

foreground foto kustom

Page 26: Tutorial Artiste Er Versi Indonesia

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.

Page 27: Tutorial Artiste Er Versi Indonesia

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

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.

Klik di sini untuk

menentukan pilihan kustom

Menu Style

Mengatur Menu

Pilihan bar di sini ...

Page 28: Tutorial Artiste Er Versi Indonesia

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.

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.

Buat perubahan tambahan untuk item Submenu pada dialog "Menu Pilihan":

Mengatur pilihan

Menu item di sini ...

Set up submenu

pilihan di sini ...

Page 29: Tutorial Artiste Er Versi Indonesia

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.

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.

Klik di sini untuk

mengubah gaya blok

Blok menyesuaikan latar

belakang dengan

mengklik tombol ini

Page 30: Tutorial Artiste Er Versi Indonesia

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.

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.

Kustomisasi header

blok

Klik di sini untuk

mengubah gaya

memblokir konten

Page 31: Tutorial Artiste Er Versi Indonesia

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.

The "Tombol Options" dialog menyediakan kemampuan untuk mengubah padding horisontal

dan vertikal, lebar perbatasan, radius sudut nilai-nilai dan sebagainya.

Klik di sini untuk

menampilkan "Tombol

Options" dialog

Page 32: Tutorial Artiste Er Versi Indonesia

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.

Page 33: Tutorial Artiste Er Versi Indonesia

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.