plantilla ya creada y modificAcion

MIREN QUERRIA MODIFICAR ESTA PLANTILLA, TANTO LAS FOTOS COMO EL FONDO, ME INTERESA SABER SOBRE COMO CAMBIAR LAS FOTOS...:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dark Dimension</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="headerPan">
<ul>
  • Home
  • Operation 7
  • Combat Arms
  • Crossfire
  • Videos
  • [correo eliminado]
    <h1>dark dimension latest foe web</h1>
    <form name="search_box" method="post" action="http://www.free-css.com/">
    <label>search</label>
    <input type="text" name="textbox" value="Your Email" />
    <input type="button" name="buttone" class="button" value="" title="button" />
    </form>
    </div>
    <div id="mainBody">
    <div id="leftPan">
    <h2>services</h2>
    <ul>
  • your service 01
  • Your Service 02
  • Your Service 03
  • Your Service 04
  • Your Service 05
  • Your Service 06
  • Your Service 07
  • Your Service 08
  • Your Service 09
  • Your Service 10
  • Your Service 11
  • Your Service 12
  • Your Service 13
  • Your Service 14
  • Your Service 15

    <h3>client says</h3>
    <h3 class="lor">Lorem ipsum dolor sit amet</h3>
    <ul class="says">
  • consectetuer
  • adipiscing
  • Aenean non arcu.
  • Cras lacinia id
  • vestibulum

    more comments


    </p>
    </div>
    <div id="rightPan">
    <h2> current events </h2>
    <h2> our works</h2>
    <h2 class="about">about company</h2>


    Dark Dimension is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>


    We only ask you to not remove "Design by <span>Template World</span>" and the link http://www.templateworld.com from the footer of the template.</p>
    <p class="more"> read more</p>
    <h3>highlights</h3>
    <p class="hig">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean non arcu. Cras lacinia, nulla </p>
    <p class="one">Aliquam erat volutpat. Vivamus metus dolor, accumsan a, blandit vel, congue rhoncus, nisl.</p>
    <p class="more1"> read more</p>
    <p class="hig1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean non arcu. Cras lacinia, nulla </p>
    <p class="two">Aliquam erat volutpat. Vivamus metus dolor, accumsan a, blandit vel, congue rhoncus, nisl.</p>
    <p class="more2"> read more</p>
    <p class="hig1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean non arcu. Cras lacinia, nulla </p>
    <p class="three">Aliquam erat volutpat. Vivamus metus dolor, accumsan a, blandit vel, congue rhoncus, nisl.</p>
    <p class="more2"> read more</p>
    <ul>
    <li class="time">time management
    <li class="latest">latest portfolios
    <li class="what">latest portfolios

    </div>
    <br class="blank" />
    </div>
    <div id="footerMain">
    <div id="footer">
    <ul>
  • home|
  • aboutus|
  • network|
  • submission|
  • archive|
  • finance|
  • contact



    &copy; Copyright dark dimension. All rights reserved.</p>
    <ul class="css">
  • xhtml
  • css

    <p class="copy">Designed by: Template World</p>
    </div>
    </div>
    </body>
    </html>




    SIENTO QUE SEA "TAN CORTO"... :wink: :wink: :wink: :wink:
  • Pues para cambiar las fotos solo cambias la url de la imagen por la tuya
    ya, eso lo he pensao, pero lo malo es que no la veo, y si la e visto, nose cual era...
    pues las fotos deben estar el la hoja css serviria ver como esta diseñada la plantilla para saber donde esta todo ya q no conocemos tu plantilla ni como esta funcionando
    /* CSS Document */
    body{
    padding:0; margin:0; background:url(images/bg.gif) repeat-x #000; color:#A5A5A4;
    }
    div, ul, h1, h2, h3, h4, p, img, form{
    padding:0; margin:0;
    }
    ul{
    list-style-type:none;
    }
    .blank{
    font-size:0px; clear:both; line-height:0px;
    }
    /*--------------------------------header pan---------------------------*/
    #headerPan{
    width:778px; margin:0 auto 0 auto; background:url(images/header_pic.jpg) no-repeat; height:343px;
    }
    #headerPan ul{
    width:537px; margin:0 0 0 139px; display:block; height:21px;
    }
    #headerPan ul li{
    display:block; float:left; height:21px; margin:0; padding:0;
    }
    #headerPan ul li a{
    font: bold 12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:0 14px 0 14px; color:#EAEAEA;
    background-color:#242424; text-decoration:none; margin:0; height:21px;
    }
    #headerPan ul li a:hover{
    color:#EAEAEA; background-color:#0867C3;
    }
    #headerPan h1{
    background:url(images/company_name.gif) no-repeat; margin:48px 0 0 251px; width:233px; height:100px; display:block;
    text-indent:-2000px;
    }
    #headerPan form{
    width:397px; height:46px; background:url(images/search_bg.gif) no-repeat 0 0; margin:125px 0 0 84px; font-size:0;
    padding:0;
    }
    #headerPan form label{
    font:24px/26px Arial, Helvetica, sans-serif; color:#CBCBCB; margin:8px 0 0 64px; float:left; padding:0;
    font-weight:normal; background-color:#000000;
    }
    #headerPan form input{
    width:158px; height:22px; display:block; background-color:#171717; border:#494949 1px solid; color:#ACACAC;
    float:left; margin:12px 0 0 20px; padding:0 0 0 5px;
    }
    #headerPan form input.button{
    width:31px; height:23px; background:url(images/search_button.gif) no-repeat 0 0; float:left; cursor:pointer; border:none;
    }
    /*----------------------------------body part----------------*/
    #mainBody{
    width:612px; margin:24px auto 0 auto;
    }
    /*-------------left side------*/
    #leftPan{
    width:161px; color:#B6B6B5; background:url(images/left_side_up.gif) no-repeat 0 0 #171717; padding:19px 0 0 0; float:left;
    }
    #leftPan p{
    background:url(images/left_side_down.gif) no-repeat bottom left; height:8px; font-size:0; display:block;
    }
    #leftPan h2{
    background:url(images/services_icon.gif) no-repeat 0 0 #171717; color:#fff; width:90px; height:34px; display:block;
    margin:0px 0 0 25px; font: normal 24px/34px Arial, Helvetica, sans-serif; padding: 0 0 0 25px;
    }
    #leftPan ul{
    width:119px; display:block; margin:6px 0 24px 25px; font-size:0;
    }
    #leftPan ul li{
    background:url(images/left_side_arrow.gif) no-repeat 0 9px; padding: 0 0 0 11px; display:block; height:24px;
    }
    #leftPan ul li a{
    font:12px/24px Arial, Helvetica, sans-serif; color:#B6B6B5; text-decoration:none; background-color:#171717; display:block;
    }
    #leftPan ul li a:hover{
    background-color:#454545; color:#B6B6B5;
    }
    #leftPan h3{
    color:#fff; width:114px; height:24px; display:block; margin:0px 0 10px 26px; padding: 0 0 0 0; background-color:#171717;
    font: normal 24px/24px Arial, Helvetica, sans-serif;
    }
    #leftPan h3.lor{
    background:url(images/lor_bg.gif) no-repeat #171717; color:#fff; display:block; width:116px; height:56px;
    font: bold 12px/18px Arial, Helvetica, sans-serif; text-transform:uppercase; margin:0 0 10px 26px; padding:3px 0 0 7px;
    }
    #leftPan ul.says{
    width:119px; display:block; margin:2px 0 17px 25px; font-size:0;
    }
    #leftPan ul.says li{
    background:none; display:block; margin:0; padding:0;
    }
    #leftPan ul.says li a{
    font:12px/18px Arial, Helvetica, sans-serif; color:#A5A5A4; text-decoration:underline; text-transform:uppercase;
    background-color:#171717;
    }
    #leftPan ul.says li a:hover{
    text-decoration:none; background-color:#171717; color:#A5A5A4;
    }
    #leftPan a.more{
    width:103px; height:15px; display:block; background-color:#000000; color:#FFFFFF; margin: 0 0 24px 25px; padding:0 0 0 13px;
    font:13px/10px tahoma, Arial, Helvetica, sans-serif;
    }
    #leftPan a.more:hover{
    background-color:#454545; color:#B6B6B5;
    }
    /*-------------------------------right-------*/
    #rightPan{
    width:430px; margin:0 0 0 0px; float:right;
    }
    #rightPan h2{
    height:95px; width:204px; display:block; float:left;
    }
    #rightPan h2 a{
    width:204px; height:95px; display:block; text-decoration:none; text-indent:-2000px;
    }
    #rightPan h2 a.eve{
    width:204px; height:95px; display:block; text-decoration:none; background:url(images/current_event.gif) no-repeat #000;
    color:#FFFFFF;
    }
    #rightPan h2 a.eve:hover{
    width:204px; height:95px; display:block; text-decoration:none; background:url(images/current_event_h.gif) no-repeat #000;
    color:#FFFFFF;
    }
    #rightPan h2 a.work{
    width:204px; height:95px; display:block; text-decoration:none; margin:0 0 0 15px;
    background:url(images/works.gif) no-repeat #000; color:#FFFFFF;
    }
    #rightPan h2 a.work:hover{
    width:204px; height:95px; display:block; text-decoration:none;
    background:url(images/works_h.gif) no-repeat #000; color:#FFFFFF;
    }
    #rightPan h2.about{
    width:429px; height:37px; display:block; margin:25px 0 27px 0; background:url(images/about_compny.gif) no-repeat 0 0;
    padding:0; text-indent:-2000px;
    }
    #rightPan p{
    width:427px; font:14px/20px Arial, Helvetica, sans-serif; color:#A5A5A4; background-color:#000000; display:block;
    margin:0 0 0 0;
    }
    #rightPan p span{
    color:#2BCB02; background-color:#000000; font-size:17px; font-weight:bold;
    }
    #rightPan p.more{
    width:421px; border:#353535 1px solid; height:18px; background-color:#171717; color:#FFFFFF; margin:25px 0 28px 0;
    padding:3px 3px 0 0;
    }
    #rightPan p.more a{
    display:block; text-align:right; text-decoration:none; font:14px/15px Arial, Helvetica, sans-serif; width:80px; height:15px; background:url(images/read_more_arrow.gif) no-repeat right center #000000; color:#FFFFFF; float:right; padding:0 25px 0 0;
    }
    #rightPan p a:hover{
    text-decoration:underline;
    }
    #rightPan h3{
    font:24px/22px Tahoma, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000; display:block; margin:0 0 0 0;
    height:27px;
    }
    #rightPan p.hig{
    background-color:#272727; color:#8C8C8B; font:14px/20px Arial, Helvetica, sans-serif; display:block; width:413px;
    padding:16px 0px 0 12px; margin:5px 0 0 0;
    }
    #rightPan p.hig1{
    background-color:#151515; color:#8C8C8B; font:14px/20px Arial, Helvetica, sans-serif; display:block; width:413px;
    padding:16px 0px 0 12px; margin:5px 0 0 0;
    }
    #rightPan p.two{
    color:#D3D3D3; font:14px/20px Arial, Helvetica, sans-serif; display:block; width:373px;
    padding:10px 0px 0 52px; margin:0 0 0 0; background:url(images/02.gif) no-repeat 11px 13px #151515;
    }
    #rightPan p.three{
    color:#D3D3D3; font:14px/20px Arial, Helvetica, sans-serif; display:block; width:373px;
    padding:10px 0px 0 52px; margin:0 0 0 0; background:url(images/03.gif) no-repeat 11px 13px #151515;
    }
    #rightPan p.one{
    color:#D3D3D3; font:14px/20px Arial, Helvetica, sans-serif; display:block; width:373px;
    padding:10px 0px 0 52px; margin:0 0 0 0; background:url(images/01.gif) no-repeat 11px 13px #272727;
    }
    #rightPan p.more1 {
    background-color:#272727; color:#8C8C8B; padding:7px 0 13px 14px; width:411px; margin:0 0 0 0;
    }
    #rightPan p.more1 a{
    background-color:#000000; color:#2BCB02; width:397px; display:block; font:14px/14px Arial, Helvetica, sans-serif;
    text-decoration:none; text-align:right; padding:0 3px;
    }
    #rightPan p.more1 a:hover{
    color:#fff; background-color:#124D8C; text-decoration:none;
    }
    #rightPan p.more2 {
    background-color:#151515; color:#8C8C8B; padding:7px 0 13px 14px; width:411px; margin:0 0 0 0;
    }
    #rightPan p.more2 a{
    background-color:#000000; color:#2BCB02; width:397px; display:block; font:14px/14px Arial, Helvetica, sans-serif;
    text-decoration:none; text-align:right; padding:0 3px 0 0;
    }
    #rightPan p.more2 a:hover{
    color:#fff; background-color:#124D8C; text-decoration:none;
    }
    #rightPan ul{
    width:424px; display:block; margin:26px 0 0 0;
    }
    #rightPan ul li{
    display:block; height:35px; padding:98px 0 0 0; float:left; width:141px;
    }
    #rightPan ul li.time{
    display:block; background:url(images/time_manager.gif) no-repeat 0 0; height:35px;
    }
    #rightPan ul li.time a{
    height:35px; background-color:#1C1C1C; border-bottom:#393939 1px solid; border-top:#393939 1px solid;
    border-left:#393939 1px solid; display:block; font:14px/16px Arial, Helvetica, sans-serif; color:#FFFFFF;
    padding:0 39px 0 16px; text-decoration:none;
    }
    #rightPan ul li.time a:hover{
    background-color:#080808; color:#2BCB02; text-decoration:none;
    }
    #rightPan ul li.latest{
    display:block; background:url(images/latest.gif) no-repeat 21px 0; height:35px;
    }
    #rightPan ul li.latest a.la{
    height:35px; background-color:#1C1C1C; border-bottom:#393939 1px solid; border-top:#393939 1px solid;
    border-left:none; display:block; font:14px/16px Arial, Helvetica, sans-serif; color:#FFFFFF;
    padding:0 39px 0 37px; text-decoration:none;
    }
    #rightPan ul li.latest a.la:hover{
    background-color:#080808; color:#2BCB02; text-decoration:none;
    }
    #rightPan ul li.what{
    display:block; background:url(images/what_news.gif) no-repeat 21px 0; height:35px;
    }
    #rightPan ul li.what a.wh{
    height:35px; background-color:#1C1C1C; border-bottom:#393939 1px solid; border-top:#393939 1px solid;
    border-left:none; display:block; font:14px/16px Arial, Helvetica, sans-serif; color:#FFFFFF;
    padding:0 39px 0 37px; text-decoration:none; border-right:#393939 1px solid;
    }
    #rightPan ul li.what a.wh:hover{
    background-color:#080808; color:#2BCB02; text-decoration:none;
    }
    /*-------------------------------footer---------*/
    #footerMain{
    background:url(images/footer_bg.gif) repeat-x 0 0; width:100%;
    }
    #footer{
    background:url(images/footer.gif) no-repeat 0 0; height:97px; width:778px; margin:0 auto 0 auto; padding:74px 0 0 0;
    }
    #footer ul{
    width:446px; display:block; margin:0px 0 0 270px; padding:0; font-size:0; height:20px;
    }
    #footer ul li{
    color:#9B9B9B; font:12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; float:left; background-color:#0F0F0F;
    padding:0; margin:0;
    }
    #footer ul li a{
    color:#9B9B9B; font:12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; background-color:#0D0D0D;
    text-decoration:none; padding:0 6px 0 6px;
    }
    #footer ul li a:hover{
    text-decoration:underline;
    }
    #footer p{
    width:324px; display:block; font:12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#EAEAEA; margin:0px 0 0 430px;
    background-color:#0A0A0A; padding:0 0 9px 0;
    }
    #footer ul.css{
    width:103px; display:block; font-size:0px; margin:0px 0 0 586px; padding:0; height:20px;
    }
    #footer ul.css li{
    display:block; float:left; background-color:#060606; margin:0 0 0 1px; padding:0; color:#FFFFFF;
    }
    #footer ul.css li a{
    text-indent:-2000px; height:11px; padding:0; margin:0; float:left; font-size:0; display:block;
    }
    #footer ul.css li a.cs{
    background:url(images/css.gif) no-repeat 0 0; width:39px;
    }
    #footer ul.css li a.cs:hover{
    background:url(images/css_h.gif) no-repeat 0 0; width:39px;
    }
    #footer ul.css li a.html{
    background:url(images/xhtml.gif) no-repeat 0 0; width:61px;
    }
    #footer ul.css li a.html:hover{
    background:url(images/xhtml_h.gif) no-repeat 0 0; width:61px;
    }
    #footer p.copy{
    width:250px; display:block; font:12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#EAEAEA; margin:0;
    background-color:#030303; padding:0; float:right; display:block;
    }
    #footer p.copy a{
    text-decoration:underline; color:#EAEAEA; background-color:#030303;
    }
    #footer p.copy a:hover{
    text-decoration:none
    }