5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

h o m eberanda
p o r t f o l i okaryakami
s e r v i c e sproduk&jasa
PembuatanWebsite&Desain
PaketTokoOnline
PaketTemaWordpress
KursusPembuatanWebsite
a b o u t tentangkami
b l o gArtikel
c o n t a c tkirimemail

@w3function
DesaindanPengembanganWeb

CustomProject
KamimengertijenisbisnisAndaberbedadenganyanglainsehinggaAndamembutuhkanwebsiteyangbenarbenarmencitrakanbisnisanda.
Selengkapnya

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)
DibawahkategoriHTML,CSS
Suka

475

Tweet

14

Bookmark

Adabanyakalasanmengapaseseoranginginmembuatwebsitenyasendiri.Antaralain,merekainginagartulisandangambarmerekadapatdilihat
http://w3function.com/blog/index.php?p=det&idn=24

1/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

olehbanyakorang,bisajugakarenatugassekolahataumemanginginfokusmenjadiseorangwebmaster.
Padaartikelini,kitaakansamasamabelajarcaramembuatwebsitedanakanmenciptakansalahsatubentukwebsitepersonal.Websiteiniakan
kitadesaindengannuansabanyakwarnasehinggamempunyaikesanyangmenarikwalaupunbisadibilangproyekpertamainisangatsederhana
sekalikarenauntukpemula.Walaupundemikianandabisamemodifikasinyasendirisesuaidengankreatifitasanda.
SebelumkitamemulaisilahkaninstalaplikasiPhotoshopdanDreamweaverpadaoperatingsystemanda.Keduaaplikasiinitidakgratistapi
merupakanpilihanyangtepatuntukmembuatprojectwebsite,untukmembeliaplikasiiniandadapatmendownloadnyadisitusresmiAdobe.
Marikitamemulaitutorialpembuatanwebsiteapabilaandasudahmemilikikeduaaplikasitersebut.Berikutmerupakanhasildariproyek
Websiteku

MembuatLayoutDesainAwaldenganPhotoshop
jalankanaplikasiphotoshopandadansiapkansebuahkanvasbaru,caranyapilihfilenewlalugunakansettingberikut:Width:700pixelHeight:
875pixelResolution:72pixel/inchBackgroundContent:Transparent

Pilihroundedretangletoolpadatoolpanel

dansamakansetingandengangambardibawahkemudianbuatbidangberbentuksegipanjangverticalsepertipadagambardibawah

http://w3function.com/blog/index.php?p=det&idn=24

2/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

clickkananpadashape1(bidangyangandabuat)dibagianpanellayerdisebelahpojokkananbawahkemudianpilihblendingoption>click
gradientdanpilihgradasiwarnayangandasukai...pastikanwarnabawahadalahwarnadasarputih

Hasildarigradasiyangandabuatakanmenghasilkangambarsepertiberikut:

buatlahbidanguntukpanelmenudenganroundedretangletoolpadatoolpanelsepertisebelumnyaberisentuhanwarnayangberbedadengan
layerpertamatetapitidakmelencengdaritemaanda,kemudiantempatkanpadasebelahkiriatassehinggaandamendapatkangambarseperti
dibawahini
http://w3function.com/blog/index.php?p=det&idn=24

3/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

buatkanlagisebuahbidanguntukdaftarmenuyangkaliinilebihkecildarisebelumnyadenganroundedretangletoolpadatoolpanel,
tempatkansejajardenganbidangyangandabuatsebelumnyaputarkansampaiarahkemiringan250denganmovetool

kemudiancopylayerbidangdengancaratekanctrl+alt+shiftdangeserkebawahsebanyak4kali.Berisentuhanwarnapadabidangyangtelah
andabuatsehinggaakantampaksepertiberikut:

KetikdaftarmenugunakanTypeTooldenganlambang(T)padatoolpanel

Isitextpadabidanguntukdaftarmenudengan:HalamanUtama,TentangSaya,GalerryFotodanLink.KemudianpadasebelahkananberiLogo
danjudulWebsiteyangsesuaidengankeinginananda.SampaitahapaninikitasudahberhasilmerancanglayoutWebsitekudengantampilan
sebagaiberikut
http://w3function.com/blog/index.php?p=det&idn=24

4/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

GunakanSlicetool

kemudiansliceLayoutwebsitemenjadi6bagianyaitu:4sliceuntukdaftarmenu,1sliceuntuklogo,dan1lagiuntukuntukcontent/isiweb.

Sekarangandatinggalmenyimpanyasaja.PilihFile>SaveForWeb

danakanmunculwizardsepertiberikut

http://w3function.com/blog/index.php?p=det&idn=24

5/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

padaopsidibawahsave,andabisamenentukanformatgambaryangakandisavemulaidarigif,png,jpg.

apabilasudahmemilihsebelumdisaveberinamafileandadenganindex,pilihopsiHTMLandImages,simpanlayoutandapadasatufolderyang
andaberinamaWebsiteku

Sampaisinidesignuntuklayoutdenganmenggunakanphotoshopsudahselesaidanselanjutnyaandatinggalmelakukanmarkupatasfile
index.htmlyangtelahkitasavetadidenganmacromediaDreamweaver.

MarkUpTagHTMLdenganDreamweaver
Setelahdesainwebdislicedenganphotoshop,sekarangsaatnyakitamelakukansedikitmodifikasidenganmenggunakanDreamweaver.Padasaat
sayamenulisartikelinisayamenggunakandreamweaverversi8,diversiyanglebihtinggisepertiDreamweaverCS3/4/5padadasarnyatidak
akanjauhberbeda.SilahkanjalankanaplikasibuatanadobeinidanAndaakanmelihattampilansepertigambardibawahini:

bukafileindex.htmyangtelahkitasavepadasesiphotoshopdengancarapilihFile>Opensetelahfileindex.htmldibukapadadreamweaver
deletegambarsliceyangke6(enam)ataugambardengannamaindex_06.png,yaitugambaryangdigunakanuntukisicontent.

http://w3function.com/blog/index.php?p=det&idn=24

6/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

JanganHeranbilatampilanlayoutwebsitemenjadihancursepertigambardibawah,aturtabelHTMLsehinggatampilanwebmenjadinormallagi
dengancaramenggeserkanmousepadagaristitiktitik(kolomtable)ditampilandesigndreamweaver

SetelahandamengaturtataletakgambarpadatabelpindahkanopsiviewkeshowcodeviewsehinggaandadapatmelihatTagtagMarkup
HTMLsepertiberikut:

NahselanjutnyakitaModiftagHTMLdenganmenambahkanCascadingStyleSheets(CSS).BagiyangbelummengenalCSSsilahkanmenuju
artikelberikutPengertiandanTutorialDasarCSSuntukPemula(Newbie),apabilaandasudahpahamsilahkantambahkantagberikutkedalamtag
headHTMLanda.

1
2
3
4
5

<styletype="text/css">
.content{
background:url(images/index_06.png)bottom;
padding:20px20px40px20px;
}

</style>
http://w3function.com/blog/index.php?p=det&idn=24

7/15

5/5/2016
6

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio
</style>

DenganpenambahantagtersebutstrukturHTMLandaakanmenjadiseperticodedibawahini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

?
<html>
<head>
<title>Untitled1</title>
<metahttpequiv="ContentType"content="text/html;charset=iso88591">

<styletype="text/css">
.content{
background:url(images/index_06.png)bottom;
padding:20px20px40px20px;
}
</style>
</head>
<bodybgcolor="#FFFFFF"leftmargin="0"topmargin="0"marginwidth="0"marginheight
<!ImageReadySlices(Untitled1.psd)>
<tableid="Table_01"align="center"width="700"height="377"border="0"cellpadding
<tr>
<tdheight="94">
<imgsrc="images/index_01.gif"width="281"height="94"alt=""></td>
<tdrowspan="4">
<imgsrc="images/index_02.gif"width="419"height="328"alt=""></td>
</tr>
<tr>
<tdheight="76">
<imgsrc="images/index_03.gif"width="281"height="76"alt=""></td>
</tr>
<tr>
<tdheight="64">
<imgsrc="images/index_04.gif"width="281"height="64"alt=""></td>
</tr>
<tr>
<tdheight="94">
<imgsrc="images/index_05.gif"width="281"height="94"alt=""></td>
</tr>
<tr>
<tdcolspan="2"class="content"></td>
</tr>
</table>
<!EndImageReadySlices>
</body>
</html>

Dengandemikianmakakerangkawebsiteandasudahjadi.Langkahselanjutnyakembalikantampilandreamweaverkedesignview"ShowDesign
View"kemudianisibagiankolomcontentyaitupadatag<tdcolspan="2"class="content">text</td>denganhalhalyanginginanda
publikasikanpadawebsiteanda.SetelahselesaisaveHTMLdengannamaindex.html,lalusaveasdengannamafileyangberbedaabout.html
padafolderyangsama,saveaslagidengannamafilegallery.htmldanyangterakhirlink.htmlsehinggakiniandamemiliki4(empat)filehtml
yangberbeda(semuanyaharusdalamfolderyangsama).
Isikolomcontentpadamasingmasingfileyangsudahandabuatsesuaidengantemamasingmasingfile,yakniisihalamanutamawebsite,
tentangkita,galeridanlink.sayacontohkandibawahmerupakanisihalamanutama

http://w3function.com/blog/index.php?p=det&idn=24

8/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

Langkahterakhirsetelahmengisisemuafileadalahmenghubungkan/melinkanfileyangsatudenganyanglain.caranyamudahsaja.clicksetiap
menulinkpadawebsitekitalalupadapropertiespilihlinkdanclickiconfoldersepertidapatdilihatpadagambardibawah:

pilihfileyangingindihubungkan

http://w3function.com/blog/index.php?p=det&idn=24

9/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

Lakukanhalyangsamadanhubungkansemuafile,selesailahprojectanda,kiniandamempunyaiwebsiteyangandarancangsendiri...
CatatanPenting:PembuatanwebsitediatasmerupakansalahsatucaraperancanganwebyangberbasisTable.selainmenggunakantable
sebetulnyaadacaralainyaitudenganmenggunakandivataucampurankeduanyadiv+table.keduacaramemilikiplusminusmasingmasing
danandaakanmengertidengansendirinyaseiringdenganpengetahuandanpengalamanandadalammembuatwebsite.
Andabisamendownloaddanmelihatdemodaritutorialdiatasdenganukuranlebargambarlebihbesaryaitu980pxuntukmempermudah
pembelajarananda

UntukAndayangmemangberniatbelajarmembuatwebsitesecaraseriusberikutinitahapanbelajardesainwebyangdapatandatemukandi
w3functionsesuaidenganurutannya
DaftarReferensitagHTMLdanHTML5BesertaKegunaannya
PengertiandanpenjelasanDasarCSS
CaraPenerapanCSSpadaHTML
PenggunaanCSSpadaText,Fonts,Links,ListdanTable
PenggunaanCSSpadaBoxModel:Border,Padding,Margin,Outline
CSS3untukborderdanbackground
TipsdalamMenuliskanCSSyangBaik
Belajarmembuatlayoutdesainwebsitedengantagtable(Newbie)
Belajarmembuatlayoutdesainwebsitedengantagtableless(Medium)
BelajarmembuatlayouttemplatedesainwebsiteHTML5semantic(Advance)
Belajarmembuatdesainwebsiteresponsif(Skilled)
Semogabermanfaat:)
Andajugamungkinsukadenganartikelini:
http://w3function.com/blog/index.php?p=det&idn=24

10/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

DaftarReferensitagHTMLdanHTML5BesertaKegunaannya
PenjelasanmenggunakanStylingCSSuntukModelPersegiKolomBoxModel:Border,Padding,Margin,Outline
TutorialMembuatDesainWebsiteResponsifBagian2ContentWebsitedanTampilanIklanResponsif
BelajarCaraMembuatWebsiteTanpaTable(tableless)denganPhotoshopdanDreamweaverBagian2
PengertiandanTutorialDasarCSSuntukPemula(Newbie)

Komentar
Suka

475

Tweet

14

Bookmark

iklanhariini(12Jan201612:12:10)
pasbangetuntukpemula
lumayanmengerti
makasihya

Valen(17Nov201509:23:31)
disinisayamembuatwebiniuntukmembantuorangoranguntukmengertisatusamalain

lintasberita(06Oct201512:52:20)
Wahtutorialyangcukupbermanfaat,semogapahalaandaakanbertambahdenganberbagiilmusepertiini

DIKA(21Sep201503:10:08)
terimakasihatasbantuannya..berkatwebsiteniegwjdbisabikinwebsite
oya???tpgwadakendalanich.
kenapasetiapgwlink,tampilandiHTMLadalistbiruyach..
trusbagaimanamembuatwebsitekaloadagambargeraknya(GIF)diphotoshop?
Mohonbantuannyagan.

http://w3function.com/blog/index.php?p=det&idn=24

11/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

KampungInggris(28Aug201510:16:29)
Tutorialnyabermutu,,,tapianesuperpemulayangpastibingungdenganpenerapannya.
MuatKomentarSebelumnya(206komentar)
NickName
YourEmail
Website http://

WriteyourcommentHere

Kode?
TelusuridanBeritahusayaapabilaadakomentarbaru.
SimpanKomentar

MemberLogin/Register
Username/email
Password[Lupapassword?]
Login

W3functionProject
GeneralStuff
jQuery
AJAX
PHP
HTML,CSS
Photoshop
Inspiration
Downloads
Illustrator
Works
WebsiteTips
Wordpress

MostViewedArticles
Kumpulan59Fonttulisantangan(handwriting/hurufsambung)yangbisadiDownloadsecaraGratis
BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)
Kumpulan100LebihFontTerbaikGratis(ArtDeco,Geometric,Urban,Futuristic,Abstrak)
25DesignWebsiteArtistikTerbaik
3LangkahMembuatDesainWebResponsif(ResponsiveDesign)
http://w3function.com/blog/index.php?p=det&idn=24

12/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

TutorialdanPenjelasanmenggunakanStylingCSS(CascadingStyleSheet)untukText,Fonts,Links,ListdanTable
PengertianAjaxdanContohPenggunaanAjaxpadaWebsite
PengertianCSSdanCaraPenerapanCSSpadaHTML
BelajarCaraMembuatWebsiteTanpaTable(tableless)denganPhotoshopdanDreamweaverBagian1
ControlFlowdalamPHP(ifelse,ifelseifelse,switchcase,for,while,break,continue,return,exit)
PengertiandanTutorialDasarCSSuntukPemula(Newbie)
VariabledanTipeDatapadaPHP

SocialandRecentArticles
w3function.com
SukaiHalaman

3,5rbsuka

Jadilahorangpertamayangmenyukaiini.

TahapanBelajarMembuatDesainTemplateThemeWordpressV3.xBagian9MembuatTemplateKomentar(comment.php)
TahapanBelajarMembuatDesainTemplateThemeWordpressV3.xBagian8MembuatTemplateSinglePost,PostAttachmentdan404
TahapanBelajarMembuatDesainTemplateThemeWordpressV3.xBagian7MembuatTemplateIndex
TahapanBelajarMembuatDesainTemplateThemeWordpressV3.xBagian6MembuatTemplateHeader
KumpulanLayananWebsiteDanProgramYangDapatMenganalisaKecepatanLoadingWebsite
TahapanBelajarMembuatDesainTemplateThemeWordpressV3.xBagian5SanitasidanValidasiuntukKeamananTheme
TahapanBelajarMembuatDesainTemplateThemeWordpressV3.xBagian4MenyiapkanFungsifungsi(Functions)Theme
MembuatDesainWebBernuansaCatAirdenganPhotoshopBagian2
Pengumuman2PemenangGratisBiayaPendaftaranKursusW3function

RecentComments

wid01Feb201611:20:30
Keren2bangetfontnya:)sukabangetsamaSketchRockwell:D..

BlogEko2728Jan201611:39:15
Terimakasihatastipsnya:)Sangatmembantusekalibagisayaygsedangmendalamidesigncssmywapblog:)..

alfon27Jan201611:30:45
makasihilmunyamantep..

http://w3function.com/blog/index.php?p=det&idn=24

13/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

nicearticle26Jan201610:35:36
Articleyangbaguskalauudahjadiwebsitenyasilahkanuploadkehostinghttp://tutorialwebhosting.com..

sinta19Jan201610:03:13
Terimakasih,artikelnyabermanfaatbanget%u2026KamubutuhtutorialyangmenggunakanbahasaIndonesia?Pusingcaridimana?Kun..

renmaa19Jan201602:10:58
bgs.bisadipakebikintitleuntukcovercerita^^thx~..

UsulanKontribusidanSaran
KamisangatterbukadenganberbagaisarandankontribusipositifdariAnda.Kamiinginmembuathalamanblogdiw3function.cominiterbuka
untukbanyakpenulis,sehinggakitabisabersamasamamendiskusikanbanyaktopikyanglebihluasdanlebihmenariklagi.ApabilaAnda
memilikiartikelyanginginAndakontribusikanuntukw3function.commohonemailkami.

PemberitahuanDisclaimerCopyright
Semuaisitermasukdidalamnyasemuaartikeldangambaradalahhakciptaw3function.com,kecualiadastatementkhususyangdicantumkan
(kontributor).Mohontidakmenyalinisiataumempublikasikankembalitanpaseizinw3function.comdanataukontributorartikellain
Semuasumberdownloaddariw3function.comadalahuntuktujuanedukasisemata,bukanuntuktujuankomersialataulainnyakecualiada
statementkhususyangdicantumkan.

Kontributor
http://w3function.com
http://dcytbstudio.com

SocialStuff
w3functio
SukaiHalaman

Perusahaan
HalamanUtama
Portfolio
TentangKami
Blog
HubungiKami

Services
http://w3function.com/blog/index.php?p=det&idn=24

14/15

5/5/2016

BelajarCaraMembuatWebsitedenganPhotoshopdanDreamweaver(Newbie)|W3function.comIndonesianWebDesignandDevelopmentStudio

PembuatanWebsite&Desain
PaketTokoOnline
PaketTemaWordpress
KursusPembuatanWebsite
CopyRightW3function.comAllRightReserved

http://w3function.com/blog/index.php?p=det&idn=24

15/15