Tutorial Web Desain
HAIII
semua….
Hari ini
saya akan mempresentasikan cara pembuatan desain web menggunakan dreamweaver
cs6.
Saya
menggunakan bahasa HTML.
Tag yang
terdapat di web sya adalah
- <html> - <aside>
- <head> - <footer>
- <title>
- <style>
- <body>
- <div>
- <header>
- <nav>
- <section>
- <article>
- <figure>
- <figcaption>
-
<hgroup>
<style type="text/css">
header,
section, footer, aside, nav, article, figure, figcaption {
display:
block;}
body
{
color:
#666666;
background-color:
#f9f8f6;
background-image:
url(images/web.png);
background-position:
center;
font-family:
Georgia, Times, serif;
line-height:
1.4em;
margin:
0px;}
.wrapper
{
width:
940px;
margin:
20px auto 20px auto;
border:
2px solid #000000;
background-color:
#ffffff;}
header
{
height:
160px;
background-image:
url(images/header.png);}
h1
{
text-indent:
-9999px;
width:
940px;
height:
130px;
margin:
0px;}
nav,
footer {
clear:
both;
color:
#ffffff;
background-color:
#aeaca8;
height:
30px;}
nav
ul {
margin:
0px;
padding:
5px 0px 5px 30px;}
nav
li {
display:
inline;
margin-right:
40px;}
nav
li a {
color:
#ffffff;}
nav
li a:hover, nav li a.current {
color:
#000000;}
section.courses
{
float:
left;
width:
659px;
border-right:
1px solid #eeeeee;}
article
{
clear:
both;
overflow:
auto;
width:
100%;}
hgroup
{
margin-top:
40px;}
figure
{
float:
left;
width:
290px;
height:
220px;
padding:
5px;
margin:
20px;
border:
1px solid #eeeeee;}
figcaption
{
font-size:
90%;
text-align:
center;
}
aside
{
width:
230px;
float:
left;
padding:
0px 0px 0px 20px;}
aside
section a {
display: block;
padding:
10px;
border-bottom:
1px solid #eeeeee;}
aside
section a:hover {
color:
#985d6a;
background-color:
#efefef;}
a
{
color:
#de6581;
text-decoration:
none;}
h1,
h2, h3 {
font-weight:
normal;}
h2
{
margin:
10px 0px 5px 0px;
padding:
0px;}
h3
{
margin:
0px 0px 10px 0px;
color:
#de6581;}
aside
h2 {
padding:
30px 0px 10px 0px;
color:
#de6581;}
footer
{
font-size:
80%;
padding:
7px 0px 0px 20px;}
</style>
Dan sekarang saya mulai cara pembuatan nya step
by step
1. Open adobe dreamweaver CS6
2. Pilih html
3. Di tag <title> kita isikan
nama web kita “<title>MY COMPUTER</title>” #tanpa tanda kutip
4. Kita masukan script css di atas kita
letakan di bawah tag <title>
5. Trus pilih Insert Div Tag isi class
“wrapper”
6. Trus kita buka tampilan code di
dreamweaver trus kita isikan script dibawah ini
<header>
<h1>MY
COMPUTER</h1>
<nav>
<ul>
<li><a
href="index.html">Home</a></li>
<li><a
href="Gallery.html">Gallery</a></li>
<li><a
href="About.html">About Me</a></li>
</ul>
</nav>
</header>
7. Di bagian content kita isi script
ini
<section class="courses">
<article>
<figure>
<img
src="M14XR3 as Smart Object-1.png" width="256"
height="192" />
<figcaption>
<hgroup> Alienware M14XR3 </hgroup>
</figcaption>
</figure>
<hgroup>
<h2> </h2>
<h3>
<hgroup>
<a
href="">Alienware M14XR3</a>
</hgroup>
</h3>
</hgroup>
<p>Spesifikasi
dan Harga Laptop Alienware M14XR3<br>
Processor : Intel® Core™ i7-4700MQ
Processor (turbo boost up to 3,4GHz ; 6M Cache) <br>
Memory : 16GB DDR3L </p>
</article>
<article>
<figure>
<img
src="M17XR5 as Smart Object-1.png" width="256"
height="192" />
<figcaption>Alienware
M17XR5</figcaption>
</figure>
<hgroup>
<h2> </h2>
<h3><a
href="">Alienware M17XR5</a></h3>
</hgroup>
<p>Spesifikasi
dan Harga Laptop Alienware M17XR5 – Blue Ray<br>
Processor : Intel® Core™ i7-4800MQ
Processor (turbo boost up to 3,7GHz ; 6M Cache) <br>
Memory : 16GB DDR3L </p>
</article>
</section>
8. Di bagian samping saya isi script
ini
<aside>
<section
class="popular-recipes">
<h2>Populer</h2>
<a
href="">Alienware M14XR3</a>
<a
href="">Alienware M17XR5</a></section>
</aside>
9. Di bagian footer script nya
<footer> © 2015 Exmontz </footer>
Ini adalah hasil jadi nya
Tampilan Home
Tampilan Gallery
Tampilan About me
Mata Kuliah : Desain Grafis
Nama Dosen : Sucipto S.kom, M.kom
Assistent Dosen : Agustianda A.md
Habib Marzuqi A.md
Comments
Post a Comment