Jumat, 23 November 2012


Cara Desain WEB

06JAN
Pembahasan ini akan mempelajari cara mendesain tampilan sebuah web. Tampilan web akan dikerjakan menggunakan Corel Draw X3 dan selanjutnya diekspor ke dalam Adobe Photoshop CS2.
Proses Corel Draw X3
1.Jalankan Program Corel Draw X3
2.Buat Lembar kerja baru, klik Ctrl+N

3.Atur setting lembar kerja seperti tampak pada gambar
12
4.Langkah pertama kita akan membuat tampilan logo fadzlicious.
5.Aktifkan Ellipse Tool atau tekan F7
6.Buat beberapa objek lingkaran dan atur posisinya seperti tampak pada gambar. Tekan ctrl pada saat membuat lingkaran.
2
7.Berikutnya adalah memberikan warna pada masing-masing lingkaran.
8.Pilih objek lingkaran 1.
9.Aktifkan fill tool – Fountain fill dialog atau tekan F11.
10.Kemudian akan tampak kotak dialog Fountain Fill dan atur beberapa parameter seperti tampak pada gambar
3
11.Ubah pilihan type menjadi Radial . Pilihan ini untuk mengatur tipe gradasi .
12.Atur center offset gradasi
13.Atur kombinasi warna pada group Color Blend. Dalam contoh kita menggunakan Two Color dengan kombinasi warna hitam dan putih.
14.Akhiri dengan OK dan hasil akan tampak seperti gambar
4
15.Selanjutnya pilih objek lingkaran 2.
16.Berikan warna gradasi pada objek lingkaran 2 dan atur parameter yang diinginkan.
17.Ubah pilihan Type menjadi Linear.
18.Ubah nilai Angels menjadi 38,0 pada group Option.
19.Pilih Custom dalam group Color Blend. Atur kombinasi warna yang diinginkan. Untuk lebih jelas lihat gambar
5
20.Klik OK dan hasilnya akan seperti gambar
6
21.Pilih lingkaran 3. Berikan gradasi pada lingkaran 3 dengan warna gradasi pada lingkaran 3 dengan warna yang sama dengan lingkaran 2. Hanya saja pada objek lingkaran 3, nilai angle diubah menjadi -138,0. Lihat gambar .
7
22.Klik OK dan hasilnya akan tampak seperti pada gambar
8
23. Pilih objek lingkaran 4 . Berikan warna gradasi kombinasi merah dan hitam dengan tipe gradasi Radial. Lihat gambar
9
24. Klik OK dan Hasilnya
10
25. Dari objek yang terbentuk , kita akan menghilangkan garis outline pada masing- masing objek.
26. Pilih objek dan klik kanan pada tombol no color dalam palet color.Hasil Lihat gambar .
11
27. Pilih semua objek lingkaran dan tekan Ctrl + G untuk mengelompokkan objek terpilih menjadi satu group.
28. Buat Duplikat dari objek logo dengan menekan Ctrl + D
29. Atur ukuran dan Posisi masing-masing objek seperti tampak pada gambar
12
30. Logo sudah selesai dikerjakan. Untuk sementara, sisihkan dulu objek logo keluar area lembar kerja.
31. Langkah berikutnya membuat tampilan web.
32. Aktifkan beberapa pilihan pada menu view seperti tampak pada gambar
13
33. Aktifkan pilihan Rulers, Guidelines, Snap to Guidelines, Snap to Objects dan Dynamic Guides.
34. Tambahkan guideline pada masing-masing sisi lembar kerja. Klik pada ruler horizontal atau vertical dan drag ke sisi lembar kerja untuk membuat guideline.
35. Sekarang buatlah objek yang pertama.
36. Gunakan Polyline tool dan gunakan guidline sebagai garis panduan untuk membuat objek. Dengan mengaktifkan pilihan snap to guidelines maka node dari objek yang dibentuk akan secara otomatis menempel pada guideline yang digunakan sebagai garis Bantu. Lihat Gambar
14
37. Usahakan sisi kiri dan kanan objek menempel pada guideline kiri dan kanan pada lembar kerja.
38. Dalam contoh ketebalan garis dibuat 1 pt agar mempermudah anda mengenali contoh objek yang dibuat.
39. Berikan warna pada objek yang sudah dibuat. Dalam contoh ini digunakan warna abu-abu (10% black) untuk warna dasar menghilangkan warna garis outline. Lihat gambar.
15
40. Masih dengan Polyline tool, buat objek berikutnya. Lihat gambar
16
41. Berikan warna pada objek kedua. Dalam contoh digunakan warna Deep yellow dan menghilangkan garis outline. Lihat gambar
17
42. Buat objek ketiga seperti gambar .
18
43. Beri warna pada objek ketiga dan hilangkan garis outline. Di sini digunakan warna Brick Red . Lihat gambar.
19
44. Pastikan objek ketiga masih dalam kondisi terpilih. Tekan Shift + PageDown untuk meletakkan objek terpilih di posisi paling belakang. Lihat Gambar.
20
45. Selanjutnya buat objek kotak dengan Rectangle Tool. Lihat gambar.
21
46. Beri warna dan hilangkan outline. Di sini digunakan warna abu-abu (30% Black). Lihat gambar
22
47. Tekan Shift + PageDown untuk meletakkan objek kotak ke posisi paling bawah. Lihat gambar.
23
48. Buat objek selanjutnya menggunakan Polyline Tool. Lihat gambar.
24
49. Beri warna putih pada objek Polyline dan hilangkan garis Outline. Lihat gambar.
25
50. Pastikan objek Polyline masih terpilih.
51. Tekan Ctrl + C kemudian paste untuk copy objek
52. Geser Polyline sedikit ke atas, Beri warna Orange pada Polyline hasil duplikat. Lihat Gambar.
26
53. Selesai sudah tampilan web bagian header
54.Gunakan Rectangular Tool untuk membuat tampilan web bagian footer.
55. Buat beberapa objek kotak di sisi bawah lembar kerja. Lihat gambar.
27
56. Pilih semua kotak dibagian footer.
57. Klik tombol Weld untuk menggabung menjadi satu.
59. Beri warna abu-abu (10% Black) pada objek footer dan hilangkan garis outline. Lihat gambar.
28
60. Kemudian masukkan objek logo yang telah anda buat tadi ke bagian header dan tambahkan dengan tulisan fadzlicious.com disebelah kanan logo. Beri kombinasi warna hitam dan putih. Di sini digunakan font Arial Siza 10 pt. Gunakan Text Tool untuk membuat teks. Lihat Gambar.
291
61. Berikutnya tambahkan beberapa teks untuk menu. Jenis Font = Arial, Sizae = 4 pt, warna = putih. Lihat gambar.
30
62. Berikan pembatas antarteks menu. Gunakan Polyline Tool untuk membentuk garis batas teks antarmenu. Berikan warna putih untuk objek garis dengan ketebalan garis = Hairline. Lihat gambar.
31
63. Untuk variasi, tambahkan beberapa pernik seperti object polygon. Gunakan Polygon Tool dengan bentuk 5 sisi. Lihat gambar.
32
64. Transparansi Polygon juga dapat diatur secara bervariasi.
65. Klik Menu Effects – Pilih Lens.
66. Pilih Beberapa objek Polygon, di dalam panel Lens pilih Transparency dengan nilai Rate = 40%, Color = Putih.
67. Terakhir tambahkan warna latar belakang.
68. Untuk warna latar belakang, kita menggunakan objek kotak. Ukuran objek kotak dibuat sebesar ukuran lembar kerja yaitu 760 x 600 pixel.
69. Beri warna pada objek kotak dengan warna yang diinginkan dan hilangkan garis outline. Dalam contoh digunakan warna putih untuk latar belakang.
70. Kemudian tekan Shift + PageDown sehingga objek kotak diletakkan di posisi paling belakang.
71. Desain tampilan web sudah selesai. Anda dapat menambahkan beberapa variasi lainnya dalam bentuk teks atau objek. Secara keseluruhan hasilnya tampak pada gambar.
full
72. Setelah selesai membuat tampilan web, langkah selanjutnya adalah mengekspor hasilnya ke dalam Adobe Photoshop CS2.
73. Simpan terlebih Dahulu hasil kerja anda dengan nama DESAIN WEB.cdr.
Diposting oleh di Tidak ada komentar:

Cara membuat HTML

Ini merupakan artikel pertama yang saya tulis di website saya ini.Karena diwebsite ini saya akan membagi-bagikan ilmu apa aja tentang pembuatan website, maka kita pelajari biangnya dulu, dasar dari semua dasar pembuatan website yaitu HTML.
HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link.
Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view – source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.
HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser menterjemahkan tagyang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.
Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan teks editor lain.
Jika anda baru pertama kali mengenal HTML, hindari Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah paham mengenai HTML.
Sekarang buka saja notepad anda dan kita mulai.

Kode HTML pertama

Buka notepad dan tuliskan kode dibawah ini
Hello World
Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku) dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:
Hello World!!
Oke jadi apa yang dimaksud oleh “<” dan “>”, ketika anda menuliskan sesuatu diantara tanda “<” dan “>” maka anda membuat sesuatu yang disebut dengan tag, kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh tag maksudnya untuk memulai huruf tebal (bold) dan tag merupakan tag penutup untuk menghentikan huruf tebal.
Sebuah halaman HTML yang baik harus memiliki tag dan , tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.
Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup (containers) atau yang berdiri sendiri (standalone).

Containers

Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut. Perhatikan contoh berikut:
Hello World!!
Hasil:
Hello World!!
Tag berguna untuk memiringkan teks (italic) tag memiliki penutup yaitu . Tag penutup selalu ditandai dengan “/”. Contoh diatas terdapat teks World!! diantara tag pembuka dan tag penutup sehingga menghasilkan tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup tidak memiliki atribut.

Standalone Tag


Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag  yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah
yang berguna untuk memberi jarak antar teks dan tag
untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.

Atribut


Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut memiliki nilai yang dipanggil dengan menggunakan tanda “=” sesudah nama atribut. Bingung? coba kode berikut ini dijamin anda mengerti:

Hello World!!

Hasilnya:

Hello World!!

Tulisan World!! terletak ditengah tag nah tag memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?

HTML Entity


Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML entity. Sebagai contoh anda ingin menulis seperti ini:

Saya belajar web

Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana caranya? Spasi dalam HTML memiliki kode HTML entity yaitu jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:

Saya belajar web

HTML entity selalu diawali dengan “&” dan diakhiri dengan “;” ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.

Struktur Dokumen HTML


Tadi sudah saya katakan bahwa HTML yang baik memiliki tag dan .mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag tidak memiliki atribut tetapi memiliki container khusus didalam header seperti , , dan
Hello World!!

Hasilnya didalam Microsoft Internet Explorer :Contoh HTML dasar

Anda lihat teks yang berada diantara tag 

Kira-kira seperti itu, ok anda telah mempelajari HTML, sekarang anda tinggal turun gunung dan mempraktekkan apa yang sudah dipelajari.Teruslah mencoba agar anda semakin ahli.
Diposting oleh di Tidak ada komentar:

Cara membuat alias direktory di Apache

Dalam webserver menggunakan apache terkadang kita membuat atau sudah terdapat beberapa direktori alias. Yang dimaksud alias disini yaitu nama lain dari direktori sebenarnya.
Kita ambil contoh sebagai berikut :
Folder webserver apache yaitu : /etc/httpd
Folder Document root yaitu : /var/www/html
Alamat webserver yaitu http://127.0.0.1/
Ketika kita browsing dengan alamat http://127.0.0.1/ maka data yang dibuka adalah di direktori /var/www/html.
Kalau kita memakai xampp atau lamp, biasanya sudah terinstall phpmyadmin, akan tetapi folder tersebut tidak berada di bawah document root (bukan di /var/www/html/phpmyadmin tetapi berada di /usr/share/phpmyadmin)
Agar bisa dilakukan browsing dengan http://127.0.0.1/phpmyadmin maka diperlukan membuat alias, yaitu direktori /usr/share/phpmyadmin sama dengan /var/www/html/phpmyadmin saat dibowsing.
Cara membuat alias yaitu :
  1. edit file httpd.conf
    2. # vi /etc/httpd/conf/httpd.conf
  2. tambahkan nama aliasnyaalias /phpmyadmin “/usr/share/phpmyadmin”
  3. tambahkan opsi direktori alias<Directory /usr/share/phpmyadmin>
    AllowOverride None
    Options  none
    Order allow,deny
    Allow from all
    </Directory>
  4. Ujicoba dengan browsing http://127.0.0.1/phpmyadmin
Apabila dikehendaki agar dapat muncul file/direktori listing , maka dalam direktory dapat ditambahkan opsinya, contoh :
Alias /files “/var/www/files”
<Directory /var/www/files>
AllowOverride MultiViews Indexes
Options  none
Order allow,deny
Allow from all
</Directory>
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)