Sites of the week #63

For this Sites of the Week we have selected some great sites such as EveryBlock and Odosketch. Also there is a beautiful flash site for Timothy Hogan, and much, much more! As usual we would love to hear from you, keep sending your suggestions to us and we will be more than happy to feature your site.

You can send me your suggestions via Twitter twitter.com/FabianoMe or twitter.com/abduzeedo, and include #abdz_sites in the message.

DESIGN / CSS

Gregorywood - gregorywood.co.uk

I’m a web designer at Erskine Design, and this site is an experiment. Art direction (the sort you get in magazines) has always been a bit absent on the web, and for good reason. A lot of people around the world use the internet to publish content, but only a fraction of them are actual designers.

Belzebu de Saia - belzebudesaia.com/

Belzebu de Saia

APP / WEB APP

Zoomission - zoomission.com

Zoomission provides you with an easy way to get service quotes without having to search business directories or the Web. Just post your project and start receiving quotes from local contractors.

EveryBlock - everyblock.com

EveryBlock filters an assortment of local news by location so you can keep track of what’s happening on your block, in your neighborhood and all over your city.

COMMUNITY

CreativeDepart - creativedepart.com

Through Creative Depart we try to reach out to all those beautiful, creative and enriching things in the world that enable us to evolve or simply be amazed by the endless creativity of human mind. From design to art, illustration to photography, trend to fashion, we search to capture the essence of what each creation wants to communicate.

Odosketch - sketch.odopod.com

Odosketch is a flash drawing application created by Odopod, a digital agency in San Francisco. Create sketches, watch sketches replay, or simply view recent and our favorite featured illustrations.

FLASH SITE

Timothy Hogan - timothy-hogan.com

Timothy Hogan Photography

Fred Perry 100 Years - fredperry100years.com

Fred Perry 100 Years. View unique relationship between Fred Perry, tennis, music and fashion. 100 years, British street wear, Andy Murray, Subculture, Vespa, Urban Cup, Paul Weller, Terry Hall, Raf Simons

BLOG / PORTFOLIO

David G. Nogueira - davidgnogueira.es

I'm David Gonzalez, a designer and art student in Madrid, which has created this site as online shows its years of creative work and love of design. From web design to graphic design and illustration, I try to give all my works to provide a functionality for the real message that has been created. Currently I am available for freelance projects. (By Google Translate)

Things That Are Brown - thingsthatarebrown.com

We’re a small, intelligent web design studio with good ideas and lots of experience. We love designing and building websites, but what really drives us is solving problems and cultivating strong relationships with
our clients.

TEMPLATES

The Gazette Edition - woothemes.com

Gazette Edition is arguably our most sophisticated-looking theme to date, whilst the trendy featured scroller makes it very unique. The clean, white layout with professionally designed content areas are perfect for users that’d like to run a community newspaper website or a product showcase.

Traveller - themeforest.net

A traveler’s blog theme that can also be used as photographer’s portfolio blog theme. I used many textures on this design along with some of my own photos that I took from a trip...

(abduzeedo.com)

How To Create Your Own Blogger Template Theme *Updated*

This tutorial will cover the steps needed to create your own blogger template. Many people have used blogger to run blogs and have wondered how they can make their own theme to use with it. There are a very few hard to find guides on how to do this, so I’ve decided to take up the task to help as many people as I can, create one.

To create a blogger template, you will need a graphic editor (Such as Photoshop, GIMP, or even Paint will do) to create images for backgrounds, post headers, sidebars, etc.. We will get to that later. You will also need an idea or vision about what you want to create. Without that, you are just wasting your time and electricity. Lastly, you will need to know about C.S.S (Cascading.Style.Sheets) and how to operate them. If you do not know how to do that, you cannot apply interesting effects to your newly designed template (Such as: Positioning pictures or text, creating repeated backgrounds, moving around pictures and text and more). A great guide on how to get started with this is available here.

Once you have got everything you need, you should start the C.S.S Framework by putting properties such as

body[ background-color: #000000; margin: 0 auto; font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif; font-size: 14px;} #title [ font-size: 32px; color: #000011; }

so-on and so forth. A basic list of these tags that were taken from Blogger’s simple white theme are available here: (PDF File) XML Tags Blogger List Of CSS. An easier way to do this would be to find a theme that you like and copy and paste the C.S.S, editing it along the way so that time is saved. The only problem with doing that is that every theme is engineered differently so the tags will change.

After configuring your CSS Stylesheet, you must piece it together in HTML. This can be achieved using similar structures.



<div id="’main-wrapper’"> <b:section class="’main’" id="’main’" showaddelement="’no’"> <b:widget id="’Blog1′" locked="’true’" title="’Blog" type="’Blog’/"> </b:section> </div>

Do not forget to reference blogger templates that have already been created for the required widgets that you are supposed to put in certain spots. Without doing this, you could not complete making your own template.

Now comes the grueling part that you can either do yourself which could take hours to finish, or copy from another site and edit accordingly. Blogger is configured using widgets. All your posts are just one big widget hence the code up there. An Example of the code that you could type yourself or copy is:



<div class="’post-footer’"> <p class="’post-footer-line"><span class="’post-author’"> <b:if cond="’data:top.showAuthor’"> <data:top.authorlabel/> <data:post.author/> </b:if> </span> <span class="’post-timestamp’"> <b:if cond="’data:top.showTimestamp’"> <data:top.timestamplabel/> <b:if cond="’data:post.url’"> <a class="’timestamp-link’" href="’data:post.url’" title="’permanent"><data:post.timestamp/></a> </b:if> </b:if> </span> <span class="’post-comment-link’"> <b:if cond="’data:blog.pageType"> <b:if cond="’data:post.allowComments’"> <a class="’comment-link’" href="’data:post.addCommentUrl’" onclick="’data:post.addCommentOnclick’"><b:if cond="’data:post.numComments">1 <data:top.commentlabel/><b:else/><data:post.numcomments/> <data:top.commentlabelplural/></b:if></a> </b:if> </b:if> </span> <span class="’post-icons’"> <!– email post links –> <b:if cond="’data:post.emailPostUrl’"> <span class="’item-action’"> <a href="’data:post.emailPostUrl’" title="’data:top.emailPostMsg’"> <span class="’email-post-icon’"> </span> </a> </span> </b:if> <!– quickedit pencil –> <b:include data="’post’" name="’postQuickEdit’/"> </span> </p> <p class="’post-footer-line"><span class="’post-labels’"> <b:if cond="’data:post.labels’"> <data:postlabelslabel/> <b:loop values="’data:post.labels’" var="’label’"> <a href="’data:label.url’" rel="’tag’"><data:label.name/></a><b:if cond="’data:label.isLast">,</b:if> </b:loop> </b:if> </span> </p>

That code translated into human terms controls what goes at the bottom of every post…In this case its the author, time, comment link and labels. To extract the code from other templates, just click the “Expand Widget Templates” button and it is below the stylesheet on a certain template.

Most of creating a template is just trial and error. If you look at the code and try to piece it together bit by bit.. you will eventually succeed and reap the rewards of creating one. I hope this tutorial has covered everything that you will need and comments/suggestions would be greatly appreciated as it would be great if this tutorial would become a one-stop source for all of the Blogger CMS(Content Management System) users.

*Update*

Every different piece of code inside the template does not need to be used and can be modified to fit what you are creating. For example, you don’t need to include a “Labels” section in each post if it will make the design that you create look terrible. Then again, It is all in the eye of the beholder as everyone has different tastes.

source:----------------------------------------------

http://bradblogging.com/blog-design/how-to-create-your-own-blogger-template-theme/

Membuat Web Menggunakan Macromedia Dreamweaver (4)

Sebelum masuk lebih dalam lagi ke alam tidur (kayak hipnotis aja :D) membaca postingan ini, saya menyarankan Anda untuk membaca 3 postingan sebelumnya yang berhubungan dengan postingan ini agar lebih mudah dalam memahaminya. Tenang saja, semua tutorial dreamweaver ini gratis buat pembaca sekalian, tanpa mengenal batas usia dan apalah....halah...^^

1. Membuat Web Menggunakan Macromedia Dreamweaver (1)
2. Membuat Web Menggunakan Macromedia Dreamweaver (2)
3. Membuat Web Menggunakan Macromedia Dreamweaver (3)
4. Membuat Web Menggunakan Macromedia Dreamweaver (4)

Postingan ini sebenarnya ingin saya tulis pada bagian yang ke-3, namun saya berpikir untuk membaginya agar lebih enak mempelajarinya. Masih pada cara membuat web dengan dreamweaver, berikut langkah-langkahnya:

1. Saya asumsikan pembaca telah melakukan pengaturan Site yang ingin Anda buat. Jika belum melakukannya tidak masalah, kita bisa melanjutkan ke langkah selanjutnya.
2. Buka program Dreamweaver pada komputer Anda.
3. Pilih menu File --> New (Ctrl + N), maka akan muncul sebuah kotak dialog New Document.
   
4. Pilih tab General. Pada kotak Category pilih Basic Page, sedangkan pada kotak Basic Page, pilih HTML. Kemudian klik tombol Create.
   
5. Simpan terlebih dahulu dokumen baru tersebut ke dalam folder gud_webku yang telah kita buat pada postingan Membuat Web Menggunakan Macromedia Dreamweaver (3). Jika pembaca tidak melakukan langkah-langkah pada postingan tersebut, silahkan simpan di sembarang folder. Simpan dengan nama index.html.
6. Di dalam Panel Files pada bagian Local view, akan muncul sebuah file baru di dalam folder gud_webku bernama index.html. Double klik file index.html untuk membuka halaman index.html dan melakukan editing pada file tersebut.
   
7. Sekarang coba pembaca menulis sebuah kalimat : "Ini Halaman Utama" pada file tersebut. Silahkan berkreasi dengan Properties untuk mengatur warna, jenis, dan ukuran tulisan. Misalkan kita memberi warna Merah.
   
8. Pilih File --> Save untuk meyimpan perubahan yang telah kita lakukan.
9. Kembali ke bagian Panel Files. Sekarang pilih Remote View. Pembaca akan melihat folder rem_webku namun belum terdapat file didalamnya karena belum kita masukkan file apapun.
   
10. Pada Dreamweaver, terdapat fasilitas Put dan Get. Fasilitas ini diperlukan untuk melakukan pemindahan file web dari komputer ke server atau sebaliknya. Jika kita ingin memasukkan file web ke server atau biasa disebut sebagai upload, maka kita pilih site pada bagian Local view, kemudian melakukan Put (artinya kita memindahkan file dari local ke server). Sedangkan jika kita ingin melakukan perubahan atau modifikasi file yang ada pada server, maka kita bisa mendownloadnya ke local dengan memilih server view dan melakukan Get (artinya kita mengambil file dari server ke local). Untuk memindahkan file index.html yang telah kita simpan pada folder local (gud_webku) ke dalam folder remote (rem_webku), masuk ke bagian Local view lalu klik tombol Put berupa tanda panah ke atas yang berwana biru.
11. Setelah melakukan langkah 10, masuk kembali pada bagian Remote view. Pembaca akan melihat file index.html telah ter-copy pada folder rem_webku.
    
12. Sekarang kembali lagi pada Local view (aduh..capek nih bolak balik..hihhiihi). Buatlah sebuah halaman baru seperti pada langkah 4. Isi halaman baru tersebut dengan tulisan :"Ini Profile Saya". Kemudian simpan dengan nama "profile.html". Sekarang akan ada file profile.html pada folder gud_webku.
    
13. Double klik kembali file index.html, sehingga kita akan masuk pada halaman editing index.html tersebut. Buatlah sebuah tulisan lagi misalnya :"Profile". Pada bagian ini kita akan mencoba membuat sebuah link dimana ketika kita mengklik tulisan Profile tersebut pada halaman utama, maka akan menuju ke halaman profile.html yang telah kita buat.
14. Drag tulisan "Profile" tersebut. Setelah itu, pada bagian Properties, perhatikan sebuah kotak dengan tulisan Link. Kotak itu berfungsi untuk menuliskan URL halaman yang akan dituju jika kita mengklik link.
    Karena kita ingin menuju file profile.html tadi, klik tombol gambar folder yang ada disamping kanan kotak tersebut. Maka akan muncul kotak dialog memilih file yang akan dituju. Pilih file profile.html pada folder gud_webku yang telah kita buat pada langkah 12.
    
15. Pilih menu File --> Save untuk menyimpan perubahan yang telah kita lakukan.
16. Lakukan Put File(s) seperti langkah 10 untuk memasukkan file tersebut kedalam folder remote.
17. Pembaca juga boleh melihat kode-kode HTML yang telah tercipta pada halaman web yang Anda buat tersebut dengan memilih layar Code.
    
18. Untuk melihat hasilnya, silahkan buka kembali file index.html (double klik dari bagian Panel Files) lalu tekan tombol F12 pada keyboard Anda, atau dapat langsung mengklik file index.html dari folder rem_webku.
    

Oke, itu merupakan langkah-langkah dasar yang bisa kita lakukan dalam membuat web dengan Dreamweaver. Saya harap pembaca sudah sedikit memahami bagaimana sebuah software web design seperti Dreamweaver digunakan dalam membuat web. Sebenarnya masih banyak lagi fungsi-fungsi lain yang bisa kita dapatkan dari Dreamweaver. Tapi paling tidak, pembahasan yang telah saya postingkan tersebut bisa memberikan pencerahan dasar bagi pembaca yang memang ingin mendesain website sederhana atau mengerti apa dan bagaimana sebenarnya website itu. Artinya, kita tidak perlu mengetahui terlalu dalam jika memang tidak membutuhkannya. Apalagi sekarang kita bisa memanfaatkan blog dan CMS yang serba gratis dan mudah digunakan. Yach, paling tidak bisa dimanfaatkanlah jika ingin mempermak blog, atau bisa mengerti apa yang sedang kita gunakan dan kita edit :D.

source:----------------------------------------------
http://tutorial-website.blogspot.com/2009/03/membuat-web-menggunakan-macromedia_17.html

Membuat Web Menggunakan Macromedia Dreamweaver (3)

1. Membuat Web Menggunakan Macromedia Dreamweaver (1)
2. Membuat Web Menggunakan Macromedia Dreamweaver (2)
3. Membuat Web Menggunakan Macromedia Dreamweaver (3)
4. Membuat Web Menggunakan Macromedia Dreamweaver (4)

Akhirnya sampai juga kita dibagian ketiga posting berkelanjutan mengenari cara membuat web menggunakan Macromedia Dreamweaver. Setelah di bagian pertama kita membahas sepatah dua kata mengenai apa itu Dreamweaver, kemudian di bagian keduakeunggulan utama Dreamweaver ini sebagai sebuah software web design adalah memberikan kemudahan bagi kita dalam membuat website, maka kita akan mencoba bekerja membuat halaman-halaman website melalui layar design dimana kita bisa menggunakan menu-menu pilihan dalam memasukkan isi web dan mengatur tampilannya tanpa harus pusing mengotak-atik kode-kode struktur HTML-nya. Berikut langkah-langkahnya:

1. Buatlah folder terlebih dahulu sebagai tempat penyimpanan file-file website Anda. Buatlah 2 buah folder, yang pertama sebagai tempat penyimpanan utama dimana file-file dari folder inilah yang akan Anda edit seterusnya. Sebagai contoh buatlah folder di drive D:\, F:\, atau yang lainnya dengan nama terserah pembaca, misalkan "gud_webku". Folder kedua berfungsi sebagai tempat menjalankan halaman-halaman website yang akan Anda buat. Sebenarnya file-file yang akan ada di folder kedua ini adalah file-file yang sama yang ada di folder pertama (folder "gud_webku"). Namun, ketika kita ingin menjalankan halaman web yang telah kita buat, kita akan "meng-copy paste" halaman-halaman tersebut beserta seluruh file-file yang kita gunakan dalam mendesain halaman-halaman tersebut, misalnya gambar-gambar, kemudian menjalankannya dari folder kedua tersebut. Hmm, pasti pembaca berpikir bahwa tidak ada gunanya ya alias percuma? Kenapa tidak dijalankan saja dari folder pertama? Prinsipnya seperti ini, ketika kita membuat sebuah website tentu tujuan kita selanjutnya adalah menyimpan halaman-halaman web tersebut ke internet, atau yang biasa disebut hosting. Nah, karena kita ingin bekerja secara offline alias tidak langsung terhubung ke internet supaya hebat biaya dan waktu, maka kita anggap seolah-olah kita "menghostingkan" halaman website tersebut ke folder yang kedua. Tentu halaman-halaman yang dihostingkan tersebut yang akan dibuka di browser. Jadi, folder pertama berfungsi sebagai tempat kita menyimpan dokumen-dokumen web yang kita buat (halaman web beserta file-file lain yang digunakan untuk mendesain halaman web) dimana file-file itulah yang akan kita tambah, edit, dan lain-lain. Sedangkan folder kedua berfungsi sebagai "hosting" atau lebih tepatnya disebut sebagai localhosting dimana website kita akan dijalankan/atau ditesting. Sebenarnya prinsip ini akan lebih jelas ketika kita belajar mengenai server local di komputer sehingga fungsinya akan lebih kelihatan. Mengenai hal itu, kita akan mempelajarinya saat memulai membuat web CMS.
   Setelah itu, buatlah folder kedua misalnya di drive C:\ dengan nama terserah Anda, misalkan "root_webku". Jika pembaca sudah paham mengenai server local di komputer,, misalnya IIS, PWS, dan lain-lain, buatlah folder tersebut di dalam folder htdocs, public_html, wwwroot, atau www. Namun, jika belum paham, buat saja disembarang tempat di drive Anda.
   Nah, bagaimana pula dengan aktivitas "copy paste" yang saya sebut tadi? Apakah kita melakukannya secara manual. Disinilah salah satu fungsi Dreamweaver. Kita akan melakukannya melalui Dreamweaver sehingga setiap kita melakukan penambahan, pengeditan, dan lain-lain terhadap halaman web yang sedang kita desain (yang ada pada folder "gud_webku"), maka Dreamweaver mampu melakukan update pada file-file yang sama yang ada di folder "rem_webku". Sistem seperti ini juga berguna sebagai back up website kita karena kita sudah punya 2 folder yang berisi website kita. Untuk itu, kita perlu melakukan pengaturan sebelum membuat website. Bagaimana pengaturannya? Ada dilangkah selanjutnya :D
   
2. Buka program Dreamweaver
   
3. Pada menu utama, pilih Site -> New Site, akan muncul sebuah kotak dialog wizard yang berisi 2 buah tab. Pilih tab Advance dimana akan ada beberapa kategori yang akan kita atur.
   Pada kategori Local Info:
   Site name : tulis nama projek website Anda. Misalkan "webku"
   Local root folder : pilih folder gud_webku yang telah kita buat pada langkah 1. Kemudian beri tanda centang pada kotak Refresh local file list automatically. Pilihan ini berguna untuk melakukan update secara otomatis jika kita melakukan perubahan pada file web yang kita buat.
   Pilihan lainnya untuk sementara dibiarkan saja.
   Pada kategori Remote Info:
   Access : pada bagian ini kita diminta untuk memilih dimana akan melakukan pengetesan (tempat menjalankan) web kita, apakah secara online atau offline. Karena kita untuk sementara melakukannya secara offline yaitu pada komputer kita, maka pilih Local/Network.
   Remote folder : pilih folder rem_webku yang kita buat pada langkah 1. Jangan lupa juga memberi tanda centang pada kotak Refresh local file list automatically.
   Pada kategori Testing Server:
   Pada bagian ini kita diminta untuk memilih model server yang akan kita gunakan untuk melakukan pengetesan atau menjalankan website kita. Untuk sementara lakukan pengaturan sebagai berikut:
   Server mode : none
   Access : Local/Network
   Testing Server Folder: secara otomatis, folder yang terpilih adalah folder "rem_webku" yang merupakan tempat file web kita yang akan dijalankan.
   Kategori lainnya untuk sementara dibiarkan saja. Setelah itu klik tombol OK. Jika ingin melakukan perubahan pengaturan pada SITE yang telah kita buat tersebut, pembaca bisa melakukannya dengan memilih menu Site --> Manage Sites, maka akan muncul kotak dialog Manage Site.
4. Jika pengaturan sudah berhasil, pembaca akan melihat di bagian panel Dreamweaver telah muncul bagian yang berisi site Anda seperti gambar ini:
   
5. Coba kita perhatikan panel tersebut. Terlihat bahwa kita sedang berada pada bagian Local view sehingga yang muncul adalah folder gud_webku. Jika pembaca menggantinya dengan Remote view, maka folder yang terlihat adalah rem_webku
   

NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya, karena kita akan semakin mengerti kegunaan dan kelebihan Dreamweaver :D

saya memaparkan beberapa bagian penting dari software web design tersebut, maka di bagian ini saya akan langsung memberi contoh penggunaan Dreamweaver dalam membuat sebuah halaman website. Berhubung karena salah satu

source:----------------------------------------------
http://tutorial-website.blogspot.com/2009/03/membuat-web-menggunakan-macromedia_17.html

Membuat Web Menggunakan Macromedia Dreamweaver (2)

1. Membuat Web Menggunakan Macromedia Dreamweaver (1)
2. Membuat Web Menggunakan Macromedia Dreamweaver (2)
3. Membuat Web Menggunakan Macromedia Dreamweaver (3)
4. Membuat Web Menggunakan Macromedia Dreamweaver (4)

Kini saatnya kita melanjutkan tutorial web kita yang membahas cara membuat web dengan menggunakan Macromedia Dreamweaver. Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design. Bahkan pembaca mungkin sudah mencoba mendownload dreamweaver cs4 yang merupakan versi terbaru saat posting ini saya rilis. Oke deh, saya asumsikan pembaca sudah mendownload dan sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchase, trial, maupun yang versi tak asli yang serial number-nya didapat dari crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yang membuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita akan mempelajari dasar-dasar dreamweaver untuk membuat website.

1. Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya.
2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.
   
   
3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design.
   
   Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetik bahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian split berguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layar Code, Anda akan melihat struktur HTML seperti yang pernah saya tunjukkan pada postingan yang ini. Sebagai contoh struktur:
   
   
   
   
   
   
   
   
   
   dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser.
   
   
4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website.
   
   
5. Coba pembaca masuk ke layar Design seperti yang saya jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design.
6. Dibagian samping, terdapat pula bagian yang bernama Panel. Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita buat.
   
   
7. Dibagian atas tepatnya disamping menu pilihan layar, ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul pada title bar browser.
   
   Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag

NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya yang juga membahas cara membuat web dengan dreamweaver:D

source:----------------------------------------------

http://tutorial-website.blogspot.com/2009/03/membuat-web-menggunakan-macromedia_17.html

Membuat Web Menggunakan Macromedia Dreamweaver (1)

1. Membuat Web Menggunakan Macromedia Dreamweaver (1)
2. Membuat Web Menggunakan Macromedia Dreamweaver (2)
3. Membuat Web Menggunakan Macromedia Dreamweaver (3)
4. Membuat Web Menggunakan Macromedia Dreamweaver (4)

Seperti janji saya di postingan "Mengenal Dasar Pembuatan Halaman Website" dimana saya akan mengulas sedikit tentang software web design yang menurut saya sangat bagus, maka di postingan yang berkelanjutan ini akan saya jelaskan mengenai hal tersebut. Software yang saya maksud adalah Macromedia Dreamweaver. Dreamweaver mempunyai banyak keunggulan-keunggulan dari segi fitur maupun interface sehingga sangat membantu kita dalam membuat halaman web. Untuk mendapatkan software Dreamweaver, bisa kita download dari situs resminya atau dibeli di toko-toko yang menyediakan software tersebut. Disana juga tersedia versi TRIAL yang bisa pembaca download. Tapi mohon maaf, saya tidak menyediakan di blog ini Download Macromedia Dreamweaver Versi Bajakan alias yang ada crack nya. Namun, harganya memang masih sangat mahal menurut saya, dan karena mahal banget, "terpaksa" deh saya memakai yang ada crack untuk bajakannya :D. Maaf ya...:). Jika berminat, pembaca bisa download dreamweaver yang tidak asli dari situs-situs yang ada di internet, banyak kok, saya yakin itu.He3x. Juga tersedia Crack Dreamweaver untuk mendapatkan serial number nya. Bahkan, kemungkinan mendapatkannya juga free (ya iyalah, kalau gak gratis mending beli yang asli). Tapi mohon jangan bilang saya yang merekomendasikan ya ketika download crack dreamweaver :D.
Saat posting ini ditulis, versi terbaru yang telah keluar adalah Macromedia Dreamweaver CS4. Tapi saya sendiri masih memakai dreamweaver 8. Gimana? Apakah pembaca sudah memutuskan untuk menggunakan macromedia dreamweaver free alias hasil bajakan, yang asli atau yang trial? Jika sudah mendapatkannya, silahkan diinstal di komputer atau laptop pembaca. Berikut screenshot Dreamweaver 8 yang saya pakai:

KLIK UNTUK DOWNLOAD DREAMWEAVER CS4 for TRIAL

source:----------------------------------------------
http://tutorial-website.blogspot.com/2009/03/membuat-web-menggunakan-macromedia_17.html

Full Photoshop Web Design - Journal

Description: In this tutorial we will be going through a full photoshop design of journal/personal type website.

Click on the images to see them in full size!

NOTE: To be able to complete this tutorial your should have good knowledge of photoshop and where to find its tools.

Step 1: Open up a new photoshop document 1000 pixels wide and 750 pixels high. Fill the background layer with black.

1st we will be making the background. Find an image you would like to use as the website background, im going to use a free stock image found here. If you use any of the free stock images that I suggest throughout this tutorial then please obey the creaters usage rules.

Place the image into your document and then duplicate the image untill you have filled your intire document with the texture. Merge all of these layers and then name the layer "Background1"



Now duplicate the "Background1" layer and call the new layer "Background2". Set "Background1" layers opacity to about 10%. Now create a mask on "Background2" and use an Radial Gradient to create something like below.



Duplicate the "Background2" layer and call the new layer "Background3". Now create another radial mask at the bottom of the document so that it looks something like below.



Now create a new adjusment layer Layer > New Adjustment Layer > Hue/Saturation and click OK. Select Colorize and then play around with the colors untill you find something you are happy with.

Now create a new layer and call it "Background4" and then go Image > Apply Image. Now go Filter > Sharpen > Sharpen.

Thats the background finished. Create a new folder and call it "Background" and move all of our background layers into it.

Here is how mine turned out.



Step 2: Now we are going to create the "Journal". Find a picture of an old peice of paper that you would like to use as the journal, im going to use this free stock image found here. Remember to check the usage instuctions on the stock images.

Place your paper ontop of your document and remove the white edges by using the "Magic Wand Tool". Set its tolerence to about 32, dont worry about getting if perfect as we are going for a messy type look.

Resize the paper to a similar size to mine below and then call the layer "Paper1". Duplicate the "Paper1" layer and call it "Paper2" and then place it on the left side of "Paper1".

Now flip the "Paper2" layer by going Edit > Transform > Flip Horizontal.

Your image should now look something like mine below.



Now duplicate layers "Paper1" and "Paper2" a couple times each. Lock the top layers of "Paper1" and "Paper2" because we dont want them moved. Now rotate the duplicated layers slightly at different angles so that it looks like there are many pages in the journal.

Now create a new folder and call it "Journal" and place all of our journal layers in there.

Here is how mine turned out.



Step 3: Now duplicate one of the journal layers and then place it ontop of all the other journal layers, call this layer "ContactBg". Now for this step you can just resize and rotate the "ContactBg" layer untill it is a similar to the picture below or you can merge differnt parts of the paper together using the eraser and a soft brush.

Place it at the top right of our journal on a slight angle.

Here is how mine turned out.



Now do the same thing again but call this layer "TitleBg" and then place it on the top left of our journal.



Step 3: Now we are going to make the books binds. I will be using this image. Move your chosen image into the document and call the layer "Bind". Use a soft eraser brush to make the bind blend in with your image. Duplicate the "Bind" layer a few times and postion them along the spine of the journal.

Here is how mine turned out.



Step 4: Now we are going to create our paper clips. Select the custom shape tool and then find the paper clip shape under the "Object" Shapes. Create a paper clip and then copy the layer style settings below.







Now rotate and resize your paper clip untill it looks like mine in the image below. Place a paper clip ontop of the "ContactBg" layer and "TitleBg" layer so that they look like they are holding them in place. Use the eraser tool to rub out the parts of the paper clip that should be hidden behind the page.



Step 5: Now we are going to start setting up the content on the site. 1st of we will make the title and contact details. I used a font called "Journal" which can be downloaded here. For the contact details try to use fonts such as "Arial" because we will want to be able to edit these once the design is coded in xhtml.

Here is how mine is looking.



Now we are going to place some images on the page. Duplicate the "ContactBg" layer and call it "PhotoBg" and then drag it into a postion like in the image below, you will also have to move the "PhotoBg" layer below the "ContactBg" layer. Now load up a photo that you would like to use in your journal and then resize it so it sits nicely ontop of your "PhotoBg" layer. Try get it to look something like mine below.



Now we are going to make the photo look as though it has been worn away a bit with age. Create a new layer above your photo and call it "Grunge1". Now slect the "Brush tool" and select a "Spatter" brush. Now brush around the edges of your photo like in the image below.



When you are happy make sure you still have the "Grunge1" layer selected in the layers palette and go Select > Load Selection keep the default settings and click OK. You should now have a selection around your "Grunge" layer.



With the selection still active hide the "Grunge1" Layer Layers > Hide Layers and then select your "Border" layer in the layers palette. Now hit the delete button and then hit Crtl+D to deselect your your selection. Your image should now looking something like below.



Now add some more photos into your journal, use the same steps as above to give them that aged look. Also make another copy of your paper clip and move it into a postion so that it looks like it is holding your photo in place.

Here is now mine is looking.



Step 6: Now we are going to make some sticky tape to that it looks like the rest of our photos have been stuck onto our page. You can make your own sticky tape our you can download a brush pack like this one here. I set the layer opacity of the sticky tape to 95%, I then used the burn tool on the sticky tape to give them a bit more of an aged feel.

Here is how mine is looking.



Step 7: Now we are going to create the text. For the sake of the look of the tutorial I will be using the "Journal" font for the text, but of course if we were to be coding this then we really should be using one of the web standard fonts such as "Arial".

When designing in photoshop I like to use random text generators such as this one, can be a quick time saver.

Here is how mine is looking.



Step 8: The last step of this tutorial is just to randomize the look of the paper a bit so its not so clearly obvious that we have just done a whole lot of copy and pasting. Create a new layer at the very top of your layers pallete, call this layer "Burn". Now with the "Burn" layers selected go Image > Apply Image.

Now select the the burn tool and use a 100px soft brush with the exposure set to about 25%. Now just go around your journal burning different sections untill you are happy with the result.

Finished Result:



If you enjoyed this tutorial please show some support for the site by registring. Thank you!

Post your result on the forum! We would love to see how you went :)

A big thanks to the creators of the stocks used throughout the tutorial!


source:----------------------------------------------
http://tutocity.com/index.php/photoshop/full-photoshop-web-design-journal.html