Anda di halaman 1dari 2

Membuat Template Web STKIP YAPIS DOMPU dengan Photoshop

Membuat Template Web STKIP YAPIS DOMPU dengan Photoshop


A. 1. 2. 3. MENDESAIN BACKGROUND Klik menu File > New , isikan width 900 dan Height 600 Kemudian klik Layer > New Layer , untuk membuat layer baru Selanjutnya buat garis bantu Horisontal dg cara klik menu View > New Guide, pilih Orientation : Horisontal dan isikan pada position: 110 Dan buat satu lagi garis bantu horisontal dengan position : 135, maka sekarang terbentuklah dua buah garis bantu horisontal Kemudian klik Rectangular Marquee Tool, lalu buatlah seleksi pada garis bantu horisontal tsb dan gunakan Paint Bucket Tool untuk memberi warna hijau pada seleksi tsb. Klik menu Select > Deselect , untuk menghilangkan seleksi Selanjutnya buat layer baru lagi dan buat juga garis bantu vertikal pada posisi 60 dan 840 . Kemudian buat seleksi pada garis bantu vertikal tsb , carilah warna orange muda Jangan lupa Deselect kembali spt no 6 Terakhir tambahkan efek bayangan dengan mengklik menu Layer > Layer Style dan isikan nilainya opacity : 75%, Angel : 120 MENDESAIN HEADER DAN FOOTER Buat layer baru lagi, kemudian buat juga garis bantu horisontal pada posisi :100 dan 125. Kemudian buat seleksi dg Rectangular Marquee Tool dan berilah warna Hijau sbg pembatas area header Buat layer baru lagi , kmd buat juga garis bantu horisontal pada posisi :575 dan 600 . Kmd beri seleksi dg Rectangular Marquee Tool dan berilah warna hijau Buka Logo STKIP , kmd klik Select >All, lalu klik menu Edit > Copy Kemudian kembali ke stkip.psd, klik menu Edit > Paste, maka akan tampil logonya, atur posisinya di header Buka kembali logo YAPIS select > All , klik Menu Edit > Copy Kembali ke file utama, klik menu Edit > paste, kmd atur posisinya pada sebelah kanan, kalian bisa menambahkan efek Drop Shadow spt pd langkah A.9 Dan terakhir tambahkanlah beberapa teks dan beberapa garis disekeliling header Teknik Pemotongan / Slice Buat garis bantu vertikal posisi 50 dan 850 agar efek Drop Shadownya bisa ikut terpotong Klik Slice Tool lalu buatlah 4 buah slice Kemudian Klik Menu File > Save For Web, maka akan tampil kotak dialognya pilih ketiga buah slice yang dibuat (gunakan tombol shift utk memilih lbh dari satu), kmd pilih preset:JPEG High, lalu klik tombol Save Memasukkan CSS <body> <div id=wrapper> <div id=header></div> <div id=leftcontent></div> <div id=rightcontent></div> <div id=clearer></div> <div id=footer></div> </div> </body>

4.

5.

Pada panel CSS


1. Selector type : Tag Tag : body <<< ketik Define in : New Style Sheet File klik ok CSS Rule > Background : Image : pilih File Type > Font : Arial, Size 12, dan Color #6E4F0E Box > Margin : isikan nilai 0 pada Top Bagian Wrapper a. Selector Type : Advanced b. Selector : #wrapper <<< Ketik c. Ok d. Background > Images :ambil file gambar dan Repeat : repeat Y e. Box > width > 800 dan Margin (hilangkan centang Same for all) kmd pilih Right=Auto dan Left=Auto Bagian Header a. Selector type : Advanced b. Selector : #wrapper #header << Ketik c. Ok d. Background :Images : Pilih gambar e. Box > widt : 800 dan Height : 135 f. Ok Bagian Content Left a. Selector type : Advanced b. Selector : #wrapper #leftcontent << Ketik c. Ok d. Box > Width :540 dan Float:Left, Padding >Right : 10 dan Left:20 Bagian Content Left a. Selector type : Advanced b. Selector : #wrapper #rightcontent << Ketik c. Ok d. Box > Width :200 dan Float:Left, Padding >Right : 5 dan Left:10 e. OK Bagian Clearer a. Selector type : Advanced b. Selector : #wrapper #clearer << Ketik c. Ok d. Box > Clear : Both Bagian Footer a. Selector type : Advanced b. Selector : #wrapper #footer << Ketik c. Ok d. Background >image : Pilih File e. Box > Width : 800 dan Height:24 f. Block > Text Align : center

6. 7.

2.

8. 9.

B. 1.

3.

2.

4.

3. 4. 5. 6.

5.

7. C. 1. 2. 3.

6.

7.

Hubungan PHP dengan Mysql (Database)


Operasi data pada Database biasanya meliputi 1. Membuka Sambungan/Hubungan dengan database server 2. Memilih dan membuka database yang diinginkan 3. Mengirim perintah untuk mengambil / mengubah dan menghapus data 4. Mengakses hasil pengambilan data 5. Mengakhiri sambungan Bahasa SQL di PHP 1. Membuat Koneksi <?php $server =localhost; $user = root; $pass= ; $db=stkip; Mysql_connect($server,$user,$pass) or die (Koneksi Gagal) ; Mysql_select_db($db) or die (Database Gagal dihubungi) ; 2. Memasukkan data ke Database Insert INTO namatabel VALUES (isifield,isifield,isifield,dst); Kalau dengan variabel $query = INSERT INTO namatabel VALUES (isifield,isifield,dst); Dieksekusi dengan perintah : $hasil = mysql_query($hasil) ; 3. Mengambil data /Mengakses Query SELECT * From namatabel WHERE namafield=INPUT dari user Kalau dengan dg variabel/query $query=SELECT * FROM namatabel WHERE namafield=input dari user ; Dan dieksekusi dengan perintah $hasil = mysql_query($query); 4. Untuk mengetahui hasil jumlah record yang terekam di database $jumlahhasil = mysql_num_rows($hasil); 5. Untuk mengambil datanya $data = mysql_fetch_array($hasil);

Anda mungkin juga menyukai