Modul Design Web

Hasil sementara bentuk pita terlihat seperti gambar di bawah ini, 101Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 8Selanjutnya kita akan menambahkan beberapa efek layer styles pada pita tersebutagar tidak terlalu “datar”. 102Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Khusus untuk efek Pattern Overlay, saya sudah mempunyai bentuk pattern sepertigambar di bawah ini. Kamu juga bisa bereksperimen dengan pattern yang lain. Inilah hasil efek pada pita setelah semua efek layer styles di gunakan. 103Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

PRAKTIKUM 2 Pada bagian ke 2 ini kita akan menyelesaikan 3 elemen dari BlogFolio tersebut, yaitu “posting terbaru” , “shelf portfolio” dan “footer”. 104Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 9Kita masuk ke “posting terbaru”. Buat area konten dengan menggunakan RoundedRectangular Tool, atur roundness nya menjadi 2 pixel.Langkah 10Selanjutnya kita membuat icon tipe posting, untuk stock icon nya silakan gunakanFree Tool Bar icons dari Gentleface (disertakan dalam bahan). Buat lingkaran denganmenggunakan Ellipse Tool, tetapi rubah settingnya menjadi “Paths” sehingga tidaklangsung terisi warna. Setelah itu Klik Kanan dan pilih Stroke Path.* sebelum memilih Stroke Path, ubah dulu jenis Brush yang akan kita gunakan untuklingkaran ini. 105Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

106Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 11Tempatkan icon pencil yang sudah disertakan tadi ke dalam lingkaran. Dan setelah itusamakan warnanya antara lingkaran dan icon pencil dengan menggunakan LayerStyles > Color Overlay. 107Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Atur besar icon dengan menggunakan Transform Tool (Ctrl + T) dan tempatkan di kiriatas area konten. 108Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Berikan efek grunge pada icon dengan menggunakan Layer Masking. Caranya persissama saat kita membuat garis grunge di navigasi utama.Langkah 12Ketik judul posting, info dan paragraf deskripsi. Gunakan font Bebas Neue untuk judulpost, Arial untuk info dan Georgia untuk paragraf. Atur layoutnya hingga menjadiseperti gambar di bawah ini, 109Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 13Buat frame foto (post image frame) dengan menggunakan Rounded Rectangular Tooldan letakkan di sebelah kiri paragraf.Buat lagi persegi dengan menggunakan Rectangular Tool, kali ini untuk tempatmenaruh foto (post image). Saya merubah warna frame foto menjadi agak kekuningandan memberikan sedikit efek Drop Shadow. 110Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 14Kita akan membuat kesan foto yang berkilap dengan menggunakan Pen Tool. Gambarsegitiga berwarna putih di atas area foto.Selagi shape segitiga yang baru kita buat itu terseleksi, tekan icon masking padawindow layers (sama dengan metode masking). Setelah itu gunakan Gradient Toolberwarna hitam putih, dan drag dari atas ke bawah sehingga ada bagian yang hilangsecara halus. 111Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Hasilnya akan terlihat seperti gambar di bawah ini. Saya sudah menambahkan fotojuga. 112Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 15Gunakan Pencil Tool (B) berwarna biru sebesar 1 pixel untuk membuat garis. Duplikasidan posisikan sehingga berada di antara baris paragraf.Hide dulu sementara foto beserta frame yang telah kita buat tadi. Dan lanjutkandengan garis merah vertikal. 113Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 16Buat efek ujung pita pada konten area dengan menggunakan Polygon Tool 3 sisi.Caranya sama saat kita membuat status aktif pada navigasi utama. 114Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Hasilnya akan terlihat seperti gambar di bawah ini,Langkah 17Kita akan membuat link “Read More” dengan garis seperti efek coretan tangan. Ketik“Read More”, letakkan di kanan bawah. Gunakan Splatter Brush berukuran kecil (4-6point) dan coret brushnya (cara ini memang agak sedikit manual ). 115Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 18 Supaya tidak polos, kita akan menambahkan tekstur pada area konten. Unduh gambar kertas dari Flickr dan masukkan kedalam dokumen. Atur Brightness/Contrast dan Hue/Saturation kertas tersebut. 116Setelah itu Clipping Mask tekstur kertas ke dalam area konten dan berikan efek Noise.Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Supaya grafik ini bisa di coding, maka kita hanya akan menggunakan bagian atas sajadari tekstur. Dengan begitu tidak akan ada masalah nanti jika kontennya (area text)menjadi panjang ke bawah. Gunakan Layer Masking dan Gradient Tool. 117Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Hasil sementara akan terlihat seperti di bawah ini, saya merubah warna judul postingmenjadi merah pastel agar terlihat lebih menonjol di banding elemen lain.Langkah 19Selanjutnya kita membuat shelf/rak untuk portfolio terbaru. Gunakan RoundedRectangle Tool dengan roundness 2 pixel. 118Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Berikan Layer Styles Inner Shadow dan Gradient Overlay dengan setting sepertigambar di bawah, Hasilnya akan seperti di bawah ini, 119Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 20Gunakan Pen Tool untuk membuat efek 3d (dudukan rak). Nyalakan guide supayaujungnya pas dan gunakan warna yang lebih gelap dari shelf yang pertama. 120Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Berikan Layer Styles Gradient Overlay pada dudukan rak tersebut.Hasilnya akan seperti gambar di bawah ini, Langkah 21 121Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Supaya lebih realistis, kita akan memberikan bayangan dan sedikit cahaya pada shelfini. Caranya sangat mudah, hanya dengan Soft Brush dan Transform Tool untukmengatur posisi dan besarnya. Atur juga Opacity layer brush tersebut supaya tidakterlalu ‘keras’. Langkah 22 122 Untuk area thumbnail portfolio kita menggunakan Rectangle Tool.Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Supaya thumbnail ini tidak terlalu polos nantinya, kita akan menggunakan efek InnerShadow sebesar 1 pixel dan Gradient Overlay. 123Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 23Berikan efek bayangan thumbnail dengan menggunakan Soft Brush. Dalam hal initidak menggunakan Layer Styles Drop Shadow karena kebutuhannya tidak cocok,kalau di paksakan maka bayangannya tidak akan terlihat natural. 124Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Hasilnya akan terlihat seperti di bawah ini, 125Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Untuk menyelesaikan bagian ini, gabungkan dulu semua layer thumbnail (thumb danbayangan thumb) kedalam 1 folder dan duplikasi sebanyak 2 kali. Lalu atur posisinyahingga terlihat rapih.Langkah 24Tambahkan heading “Latest Works” dan gunakan garis yang sama pada main menu(copy paste). Namun kamu boleh saja membuat garis baru lagi untuk bagian ini. 126Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Langkah 25Gunakan logo yang sama pada bagian footer, tambahkan sedikit tulisan “All RightsReserved” (opsional). Untuk thumbnail portfolio silahkan Anda beri 3 gambar fotogallery.Untuk mempermanis dan tetap 1 gaya secara keseluruhan, maka saya memutuskanuntuk menambahkan efek kilapan di thumbnail. Dan kita sudah selesai! 127Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Hasil AkhirKesimpulanHal terpenting dalam mendesain web adalah perencanaan (Sitemap dan Wireframe),setelah itu kita baru masuk ke hal yang bersifat visual. Desain website pada dasarnyaadalah pengaturan informasi (Information Architecture), visual hanyalah elemenpendukung agar user lebih mudah, nyaman dan betah mengkonsumsi website kita. 128Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

CHAPTER 6 PROJECT WEB DESAIN A. Tujuan: Mahasiswa dapat merencanakan dan merealisasikan website dengan baik B. Pokok Bahasan: Perencanaan web desain, proses web desain, implementasi web desain C. Materi: Sering kita temui website yang tipikal: \"Welcome to my homepage,\" animasi e-mail, background dengan tulisan miring (diagonal), animasi garis pembatas, tabel dengan border tiga-dimesi dan lain-lain. Hal ini terjadi akibat dari fasilitas Template yang disediakan oleh software pembuat web seperti: FrontpageT, Corel WebDesignerT, dan sebagainya yang ditujukan untuk mempermudah penggunanya dalam membangun website. Jika anda puas dengan hasil kerja anda membangun website dengan fasilitas template, sudahlah cukup sampai disini. Tetapi jika anda tidak puas dengan apa yang anda buat, dan anda merasa ingin lebih baik, maka anda perlu mengetahui bagaimana Web Designer membangun suatu Website, terlepas anda punya bakat seni atau tidak. 1. Unik : Dalam membuat karya apapun seorang designer mempunyai kesadaran untuk tidak meniru atau menggunakan karya orang lain. Begitu pula seorang Web Designer harus mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang telah digunakan atau dibuat oleh orang lain. 2. Komposisi : Seorang Web Designer selalu memperhatikan komposisi warna yang akan digunakan dalam website yang dibuatnya. Pergunakan selalu Palette 216 WebColor, yang dapat diperoleh dari Adobe.com, hal ini untuk mencegah terjadinya dither pada image yang berformat GIF. Dalam membangun website suatu perusahaan, Web Designer selalu menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut. Sebagai contoh: Telkom Corporate Color-nya adalah biru, Coca- Cola : merah dan putih, Standard-Chartered : hijau dan biru, dsb. Untuk kemudian warna-warna tadi digunakan sebagai warna dominan atau sebagai elemen pendukung (garis, background, button, dsb). 3. Simple : Web Designer banyak yang menggunakan prinsip \"Keep it Simple\", hal ini ditujukan agar tampilan website tersebut terlihat rapi, bersih dan juga informatif. 4. Semiotik : Semiotika adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini diharapkan dengan melihat tanda atau gambar, user/ audience dapat dengan mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar/image yang berkesan tombol, padahal itu bukan tombol/ link. 5. Ergonomis : Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah dalam hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga mudah dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di akses dan lebih penting lagi adalah Informatif. 6. Fokus : Tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang 129Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

berukuran hampir sama. Hal ini akan membingungkan user/audience untuk menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.7. Konsisten : Tentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub Judul dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut, misalnya: hindari menggunakan font Comic dalam membangun website suatu perusahaan resmi.Demikian beberapa aspek dan prinsip yang digunakan Web Designer dalam membuat website,selebihnya merupakan ekspresi dari pembuat website itu sendiri yang terwujud dalampenggayaan penyusunan website.Software-software pembuat suatu websiteDesain : Untuk membuat desain suatu homepage biasanya para web designer dimulai dengansoftware ini sebagai tampilan sementara atau dalam membuat layout homepage.1. Adobe Photoshop : Desain berbasis titik ( bitmap )2. Adobe Image Ready : Memotong gambar-gambar ke dalam format html3. Adobe Illustrator : Desain berbasis vector4. CorelDraw : Desain berbasis vector5. Macromedia Freehand : Desain berbasis vectorEfek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Sepertimenambah efek cahaya, textur dan manipulasi teks.1. Macromedia Firework : Efek teks2. Painter : Memberikan efek lukisan3. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.4. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai's Power Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain layout homepage di Photoshop.Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik danhidup.1. 3D Studio Max : Untuk membuat objek dan animasi 3D.2. Gif Construction Set : Membuat animasi file gif3. Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil.4. Microsoft Gif Animator : Membuat animasi file gif5. Swift 3D : Merancang animasi 3D dengan format file FLASH.6. Swish : Membuat berbagai macam efek text dengan format file FLASH.7. Ulead Cool 3D : Membuat animasi efek text 3D.Web Editor : Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halamanweb dengan teks dan sedikit bahasa script. 1. Alaire Homesite 130 2. Cold Fusion 3. Microsoft Frontpage 4. Macromedia DreamweaverModul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

5. Net Object FusionProgramming : Hal ini dilakukan setelah sebagian besar desain homepage telah rampung.Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif.Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang dan Iklanbaris. 1. ASP ( Active Server Page ) 2. Borland Delphy 3. CGI ( Common Gateway Interface ) 4. PHP 5. PerlUpload : File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruhdunia dapat melihat homepage kita. 1. Bullet FTP 2. Cute FTP 3. WS-FTP 4. Macromedia Dreamweaver : dengan fasilitas Site FTP 5. Microsoft Frontpage : dengan fasilitas PublishSound Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file midi atau wav, perlualat khusus untuk itu. 1. Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav. 2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midiBanyak sekali memang software untuk membuat suatu homepage dan kita tidak perlumempelajari semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula lebih baikdimulai terlebih dulu dengan mempelajari software Microsoft Frontpage atau MacromediaDreamweaver agar lebih mengenal aturan-aturan membuat homepage dan mengenal bahasahtml. Setelah itu baru Adobe Photoshop yang dipakai kebanyakan para desainer.Langkah-langkah Membuat HomepageBermacam-macam langkah yang digunakan profesi web kita untuk membuat suatu homepage.Berikut ini adalah proses secara umum yang dilakukan kebanyakan profesi web di Indonesia untukmembuat web. 1. Membuat Sketsa Desain : Desainer bisa saja menuangkan ide dalam membuat interface suatu homepage dalam bentuk sketsa di kertas dahulu. Untuk kebanyakan orang, biasanya langkah ini dilewatkan dan langsung pada langkah membuat layout desain dengan menggunakan software. 2. Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan software seperti Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks dan Macromedia Freehand untuk memperhalus sketsa desain. 3. Membagi gambar menjadi potongan kecil-kecil : Setelah layout desain homepage sudah jadi. File gambarb tersebut dipecah menjadi potongan kecil-kecil untuk mengoptimize waktu download. Untuk melakukan hal tersebut dapat menggunakan software Adobe Image Ready. Software ini dapat langsung memotong gambar yang besar tadi dan 131Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

otomatis juga menjadikannya ke dalam format html. Langkah ini bisa saja dilewatkan bila ukuran gambar kita tidak terlalu besar. 4. Membuat Animasi : Animasi diperlukan untuk menghidupkan homepage kita agar menarik pengunjung. Macromedia Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut. 5. Membuat HTML : Setelah itu kita merapikan layout desain kita seperti menempatkan beberapa tombol dan gambar, menambah text, mengedit script HTML, membuat layout form ke dalam format HTML. Untuk itu kita perlu software HTML Editor seperti Macromedia Dreamweaver, Microsoft Frontpage dan Allaire Homesite. 6. Programming dan Script : Untuk website e-commerce, iklan baris, lelang, database, membuat guestbook, counter dan forum diskusi. File HTML kita perlu programming untuk melakukan aktivitas semacam itu. Programming dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI, PHP, Visual Basic. Dan perlu diperhatikan bahwa programming dan script ini biasanya dilakukan setelah desain homepage kita telah jadi. 7. Upload HTML : Setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita perlu meng-upload file kita ke suatu tempat ( hosting ), agar semua orang di dunia dapat mengakses halaman html kita. Biasanya Macromedia Dreamweaver dengan fasilitas site FTP dan Microsoft Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP. 8. Homepage Pribadi : Untuk homepage pribadi atau yang sekedar ingin coba-coba biasanya setelah file html sudah jadi dapat hosting di tempat-tempat gratis, memakai guestbook dan counter gratis dan menambah macam-macam accesories dalam mempercantik homepage pribadi tersebut.D. ProjectTopik untuk project web yaitu :TI-A : Pendidikan / scholar, entertainment, teknologi,TI-B : Kebudayaan, Wisata, social, kulinerTI-C : kesehatan, pertanian, peternakan, biologi 132Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

133Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

LAMPIRANKriteria pemilihan warnaWARNA Respon Psikologi CatatanMerah Power, energi, kehangatan, Warna Merah kadang berubah arti jika cinta, nafsu, agresi, bahaya dikombinasikan dengan warna lain. Merah dikombinakan dengan Hijau, maka akan menjadi simbol Natal. Merah jika dikombinasikan denga Putih, akan mempunyai arti 'bahagia' di budaya Oriental.Biru Kepercayaan, Konservatif, Banyak digunakan sebagai warna pada Keamanan, Tehnologi, logo Bank di Amerika Serikat untuk Kebersihan, Keteraturan memberikan kesan 'kepercayaan'.Hijau Alami, Sehat, Warna Hijau tidak terlalu 'sukses' untuk Keberuntungan, ukuran Global. Di Cina dan Perancis, Pembaharuan kemasan dengan warna Hijau tidak begitu mendapat sambutan. Tetapi di Timur Tengah, warna Hijau sangat disukai.Yellow Optimis, Harapan, Filosofi, Kuning adalah warna keramat dalam Ketidak jujuran, Pengecut agama Hindu. (untuk budaya Barat), pengkhianatan.Ungu/Jingga Spiritual, Misteri, Warna Ungu sangat jarang ditemui di Kebangsawanan, alam. Transformasi, Kekasaran, KeangkuhanOranye Energy, Keseimbangan, Menekankan sebuah produk yang tidak Kehangantan mahal.Coklat Tanah/Bumi, Reliability, Kemasan makanan di Amerika sering Comfort, Daya Tahan. memakai warna Coklat dan sangat sukses, tetapi di Kolumbia, warna Coklat untuk kemasan kurang begitu membawa hasil. 134Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Abu Abu Intelek, Masa Depan (kayak Warna Abu abu adalah warna yangPutih warna Milenium), paling gampang/mudah dilihat olehHitam Kesederhanaan, Kesedihan mata. Kesucian, Kebersihan, Di Amerika, Putih melambangkan Ketepatan, Ketidak perkawinan (gaun pengantin berwarna bersalahan, Setril, putih), tapi di banyak budaya Timur Kematian (terutama India dan Cina), warna Putih melambangkan kematian. Power, Seksualitas, Melambangkan kematian dan kesedihan Kecanggihan, Kematian, di budaya Barat. Misteri, Ketakutan, Sebagai warna Kemasan, Hitam Kesedihan, Keanggunan melambangakan Keanggunan (Elegance), Kemakmuran (Wealth) dan Kecanggihan (Sopiscated)Catatan : untuk warna pada web menggunakan RGB karena hasil desain dilihat padacomputer yang mempunyai mode warna RGB. 135Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

REFERENSI CSSProperty Description Values IE F N W3Cbackground A shorthand property for background-color 4 161 setting all background background-image properties in one declaration background-repeat background-attachment background-positionbackground-attachment Sets whether a background scroll 4 161 image is fixed or scrolls with fixed the rest of the pagebackground-color Sets the background color of color-rgb 4 141 an element color-hex color-name transparentbackground-image Sets an image as the url(URL) 4 141 background nonebackground-position Sets the starting position of top left 4 161 a background image top center top right center left center center center right bottom left bottom center bottom right x% y% xpos yposbackground-repeat Sets if/how a background repeat 4 141 image will be repeated repeat-x repeat-y no-repeatBorder Description Values IE F N W3CProperty 4 141border A shorthand property for border-width setting all of the properties border-style 4 161border-bottom for the four borders in one border-color declaration 4 162border-bottom-color 4 162border-bottom-style A shorthand property for border-bottom-width 4 141border-bottom-width setting all of the properties border-style for the bottom border in one border-color 4 161border-color declaration 4 161border-left Sets the color of the bottom border-color 4 162border-left-color border 136 Sets the style of the bottom border-style border Sets the width of the bottom thin border medium thick length Sets the color of the four color borders, can have from one to four colors A shorthand property for border-left-width setting all of the properties border-style for the left border in one border-color declaration Sets the color of the left border-color borderModul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

border-left-style Sets the style of the left border-style 4 162border-left-width border 4 141border-right 4 161border-right-color Sets the width of the left thin 4 162border-right-style border medium 4 162border-right-width thick 4 141border-style length 4 161border-top A shorthand property for border-right-width 4 161border-top-color setting all of the properties border-style 4 162border-top-style for the right border in one border-color 4 162border-top-width declaration 4 141border-width 4 141 Sets the color of the right border-color Classification border IE F N W3C 4 141 Sets the style of the right border-style 4 162 border 137 Sets the width of the right thin border medium thick length Sets the style of the four none borders, can have from one hidden to four styles dotted dashed solid double groove ridge inset outset A shorthand property for border-top-width setting all of the properties border-style for the top border in one border-color declaration Sets the color of the top border-color border Sets the style of the top border-style border Sets the width of the top thin border medium thick length A shorthand property for thin setting the width of the four medium borders in one declaration, thick can have from one to four length valuesProperty Description Valuesclear Sets the sides of an element leftcursor where other floating right elements are not allowed both none Specifies the type of cursor url to be displayed auto crosshair default pointer move e-resize ne-resizeModul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

nw-resize n-resize se-resize sw-resize s-resize w-resize text wait helpdisplay Sets how/if an element is none 4 141 displayed inlinefloat block 4 141position list-item 4 142visibility run-in 4 162 compact Dimension marker IE F N W3CProperty table 4 161height inline-table 4 141line-height table-row-group - 162max-height table-header-group - 162max-width table-footer-group - 162min-height table-row - 162min-width table-column-group 4 141width table-column table-cell 138 table-caption Sets where an image or a left text will appear in another right element none Places an element in a static static, relative, absolute or relative fixed position absolute fixed Sets if an element should be visible visible or invisible hidden collapse Description Values Sets the height of an auto element length % Sets the distance between normal lines number length % Sets the maximum height of none an element length % Sets the maximum width of none an element length % Sets the minimum height of length an element % Sets the minimum width of length an element % Sets the width of an auto element % lengthModul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Font Description Values IE F N W3CProperty 4 141font A shorthand property for font-style setting all of the properties font-variant 3 141font-family for a font in one declaration font-weight 3 141font-size font-size/line-height - 1- 2font-size-adjust font-family - --2font-stretch caption icon 4 141font-style menu 4 161font-variant message-box 4 141font-weight small-caption status-bar 139 A prioritized list of font family-name family names and/or generic generic-family family names for an element Sets the size of a font xx-small x-small small medium large x-large xx-large smaller larger length % Specifies an aspect value for none an element that will number preserve the x-height of the first-choice font Condenses or expands the normal current font-family wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded Sets the style of the font normal italic oblique Displays text in a small-caps normal font or a normal font small-caps Sets the weight of a font normal bold bolder lighter 100 200 300 400 500 600 700 800 900Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Generated ContentPropertycontent Description Values IE F N W3Ccounter-increment Generates content in a string 162counter-reset document. Used with the urlquotes :before and :after pseudo- counter(name) elements counter(name, list- style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote Sets how much the counter none 2 increments on each identifier number occurrence of a selector Sets the value the counter is none 2 set to on each occurrence of identifier number a selector Sets the type of quotation none - 162 marks string string List and MarkerPropertylist-style Description Values IE F N W3Clist-style-image 4 161list-style-position A shorthand property for list-style-type 4 161list-style-type setting all of the properties list-style-position 4 161 for a list in one declaration list-style-image 4 141marker-offset Sets an image as the list- none 172 item marker url Sets where the list-item inside marker is placed in the list outside Sets the type of the list-item none marker disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha auto length 140Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

Margin Description Values IE F N W3CProperty 4 141margin A shorthand property for margin-top 4 141margin-bottom setting the margin margin-right 3 141margin-left 3 141margin-right properties in one declaration margin-bottom 3 141margin-top margin-left IE F N W3C Outlines - 1.5 - 2Property Sets the bottom margin of auto - 1.5 - 2outline - 1.5 - 2outline-color an element lengthoutline-style - 1.5 - 2 %outline-width IE F N W3C Sets the left margin of an auto 4 141 Padding element lengthProperty % 4 141padding 4 141 Sets the right margin of an auto 4 141padding-bottom 4 141padding-left element lengthpadding-right IE F N W3Cpadding-top % 1415 1 6 2 Positioning Sets the top margin of an autoProperty element lengthbottom % Description Values A shorthand property for outline-color setting all the outline outline-style properties in one declaration outline-width Sets the color of the outline color around an element invert Sets the style of the outline none around an element dotted dashed solid double groove ridge inset outset Sets the width of the outline thin around an element medium thick length Description Values A shorthand property for padding-top setting all of the padding padding-right properties in one declaration padding-bottom padding-left Sets the bottom padding of length an element % Sets the left padding of an length element % Sets the right padding of an length element % Sets the top padding of an length element % Description Values Sets how far the bottom autoModul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

edge of an element is % above/below the bottom length edge of the parent elementclip Sets the shape of an shape 4 162left 4 142overflow element. The element is auto 4 162position 4 142right clipped into this shape, and 5 162top 4 142vertical-align displayed 4 141z-index Sets how far the left edge of auto 4 162 Table IE F N W3C an element is to the % 5 172Property 5M 1 6 2border-collapse right/left of the left edge of length 5M 1 6 2border-spacing 5M 1 6 2caption-side the parent element 5 162empty-cellstable-layout Sets what happens if the visible 142 content of an element hidden overflow its area scroll auto Places an element in a static static, relative, absolute or relative fixed position absolute fixed Sets how far the right edge auto of an element is to the % left/right of the right edge of length the parent element Sets how far the top edge of auto an element is above/below % the top edge of the parent length element Sets the vertical alignment baseline of an element sub super top text-top middle bottom text-bottom length % Sets the stack order of an auto element number Description Values Sets whether the table collapse borders are collapsed into a separate single border or detached as in standard HTML Sets the distance that length length separates cell borders (only for the \"separated borders\" model) Sets the position of the top table caption bottom left right Sets whether or not to show show empty cells in a table (only hide for the \"separated borders\" model) Sets the algorithm used to auto display the table cells, rows, fixedModul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

and columns Text Description Values IE F N W3CProperty 3 141color Sets the color of a text color 6 162direction 4 141line-height Sets the text direction ltr rtl 4 161letter-spacing 4 141text-align Sets the distance between normal lines number 4 141text-decoration length % 4 141text-indenttext-shadow Increase or decrease the normal 4 141text-transform space between characters length 52unicode-bidi Aligns the text in an left 5 141white-space element right 6 161word-spacing center justify Adds decoration to text none underline overline line-through blink Indents the first line of text length in an element % none color length Controls the letters in an none element capitalize uppercase lowercase normal embed bidi-override Sets how white space inside normal an element is handled pre nowrap Increase or decrease the normal space between words length 143Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]

REFERENSIHakim, Lukman, 2010, Bikin Website Super Keren Dengan PHP & jQuery, Lokomedia, Yogyakarta.http://jurusgrafis.com/tutorial/mendesain-website-bertipe-blog-portfolio-bagian-1&2http://id.wikipedia.org/wiki/Adobe_Dreamweaverhttp://id.wikipedia.org/wiki/Adobe_Photoshop 144Modul Desain Web || Program Diploma III TI FMIPA UNS || Oleh : [email protected]