1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development Website design help

Discussion in 'Software' started by dullonien, 16 Aug 2010.

  1. dullonien

    dullonien Master of the unfinished.

    Joined:
    22 Dec 2005
    Posts:
    1,281
    Likes Received:
    29
    Hello and thaks for taking the time to read this thread.

    On Friday I started building my very first website, it will be a website for showcasing my architectural portfolio for potential future employers. I've never used HTML in a more complex way than the formatting that goes into my posts on forums such as these, so my first port of call were some tutorials online. I feel I've made a good start, designing how I want the final homepage to look in photoshop first, then I set about re-creating this in dreamweaver.

    Firstly I'll show you the progress I've made. This was my concept for the homepage:

    [​IMG]

    The three back squares in the middle will be replaced with images(and links) for Portfolio, About me and Contact, while the orange box will change it's content depending on wheather the mouse is hovered over one of the three images. A brief description of the purpose of the website will be visable when the mouse isn't hovered over any of the three images.

    Right, this is how my website currently looks in 'Live View' within Dreamweaver:

    [​IMG]

    Certainly getting there as you can see. The site-navigation links in the top right are all set-up, an clicking 'dylanpugh | architecture' links to the homepage aswell. However I am having problems with the central portion. I've been trying to follow a guide like this to use CSS to get the rollover effect I want, however I'm unsure how to get it to work. The guide shows how to change the apearance of the object the mouse is currently hovering over, but I'm unsure how to get it to change the appearance of another object on the page as I need (i.e. when I hover over the first black square the orange box changes to say 'portfolio', then when hovering over the second black square the orange box changes to say 'about me' etc.).

    I'd like to get this working using CSS if possible, as although I'm aware the same can be done using some javascript (although I was also struggling to understand that), CSS seems much more straightforward and a 'cleaner' method to do things.

    Can anyone help me get this to work. Once I know, I'm sure I can apply the same technique into the gallery portion of the site which shows my portfolio.

    Thanks again.
     
  2. Zoon

    Zoon Hunting Wabbits since the 80s

    Joined:
    12 Mar 2001
    Posts:
    5,300
    Likes Received:
    551
    You can use the div#idname:hover property to have it change the formatting on hover, however if you're looking for a "toggle" ie hover over it and it stays changed, then you need to use javascript.

    jQuery has a very very simple "toggle" which just swaps a class onMouseOver or onClick, depending where you place the javascript call, which I use for toggling personally.
     
    thehippoz likes this.
  3. julianmartin

    julianmartin resident cyborg.

    Joined:
    25 Jul 2004
    Posts:
    3,538
    Likes Received:
    120
    I'm with Zoon here, I think jQuery is your best bet. It's easy to use and there are some great tutorials out there for some great effects. You'll be glad you did it.
     
  4. Ljs

    Ljs Well-Known Member

    Joined:
    4 Sep 2009
    Posts:
    2,217
    Likes Received:
    113
    I also like jQuery.

    I'm pretty sure Dreamweaver can automatically create the javascript required for you to do this also though. It would be in the tag inspector ad then on the behaviours panel and swop image or something, I can't completely recall...
     
  5. Sexton

    Sexton Member

    Joined:
    2 Jun 2010
    Posts:
    613
    Likes Received:
    19
    Can I ask what tutorial you were using for Dreamweaver? I only know the basics for it at the moment, but want to learn the advanced stuff like your likely using here. Have never got anything to look so professional out of Dreamweaver, so well done :)
     
  6. Ljs

    Ljs Well-Known Member

    Joined:
    4 Sep 2009
    Posts:
    2,217
    Likes Received:
    113
    Also to the OP, this tutorial may be helpful if you want to do it in CSS.
     
  7. dullonien

    dullonien Master of the unfinished.

    Joined:
    22 Dec 2005
    Posts:
    1,281
    Likes Received:
    29
    Thanks alot for all the replies. I'll give jQuery a try, some of the effects in the tutorial section of their site looked great.

    @Ljs, that last link you gave looks perfect. I know it's not hard to get the effects working in CSS, but I was struggling to know how to get it to effect another object and not the one the mouse was currently over (as all the tutorials I'd found so far demonstrated).

    I'll give this a try tonight and let you know if it works.

    I might then try creating a portfolio gallery using a technique like this.

    @Sexton. I used this and this tutorial to get me going. I didn't find it too dificult to understand what was going on, and how to substitute my design in there. I found the 'Live View' function on Dreamweaver very useful as I could see how any changes effected things straight away.
     
  8. Sexton

    Sexton Member

    Joined:
    2 Jun 2010
    Posts:
    613
    Likes Received:
    19
    Thanks mate :)
     
  9. Ljs

    Ljs Well-Known Member

    Joined:
    4 Sep 2009
    Posts:
    2,217
    Likes Received:
    113
    No worries... That CSSPlay site I linked you to is excellent for pretty much everything that can be done in CSS, its helped me countless times!

    There are a plethora of jQuery galleries and sliders on the internet. Not too sure what kind of style you want to implement but these are a couple of my favourites:

    EasySlider - Demo.

    Nivo Slider - Demos.

    They are both pretty easy to use too.

    *Edit*

    Ohh, just looked at the slider you linked... Quite nice!
     
    Last edited: 17 Aug 2010
  10. dullonien

    dullonien Master of the unfinished.

    Joined:
    22 Dec 2005
    Posts:
    1,281
    Likes Received:
    29
    Still haven't got this to work. I can't find anything as simple as this in any jQuery tutorials yet, everything seems to involve movement etc. which will come in handy with the gallery portion of the site, but not for these simple links.

    Couldn't understand how to implement that CSS tut you linked Ljs. Using CSS I can get the image I'm hovering over to change to a different image easily enough using the class="swap" command. Is there a simple way I'm missing to instead change another image?

    I simply can't find a tutorial online that shows what I'm after, and I'm getting more and more irritated.

    Help, please? An example piece of code would be great.
     
  11. Syn

    Syn ¯\(°_o)/¯

    Joined:
    4 Aug 2010
    Posts:
    131
    Likes Received:
    2
    If that design is the same layout as a tutorial make sure the writer of the tut is ok with you using it, I would tell you it looks good, which it does, but all you have done (as far as i know) is follow a list of instructions.
     
  12. Zoon

    Zoon Hunting Wabbits since the 80s

    Joined:
    12 Mar 2001
    Posts:
    5,300
    Likes Received:
    551
    Here's a jquery toggle tutorial (onclick)

    http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

    To make it toggle on hover find:

    Code:
    $("h2.trigger").click(function(){
    	$(this).toggleClass("active").next().slideToggle("slow");
    });
    
    Change to:

    Code:
    $("h2.trigger").hover(function(){
    	$(this).toggleClass("active").next().slideToggle("slow");
    });
    
    To provide both, COPY the .click section (the whole section) and duplicate it instead of overtyping it.

    Does this help?
     
  13. dullonien

    dullonien Master of the unfinished.

    Joined:
    22 Dec 2005
    Posts:
    1,281
    Likes Received:
    29
    @Syn, no the layout has nothing in common with any tutorials I've been following. Just applying the html and CSS to my own design.

    @zoon, thanks for that, but I've got something close to working using javascript now (think it's gonna take me a little time to get used to jQuery).

    This is the code I'm using:

    In the <head>:

    Code:
    <script type="text/javascript">
    	
    	img1 = new Image();
    	img1.src = "images/img1.gif";
    	
    	img2 = new Image();
    	img2.src = "images/img2.gif";
    	
    	img3 = new Image();
    	img3.src = "images/img3.gif";
    	
    	img4 = new Image();
    	img4.src = "images/img4.gif";
    	
    	function change(num){
    		document.images["linkpic"].src = "images/img" + num + ".gif";
    	}
    	
    </script>
    and this in the <body>:

    Code:
    <div id="container1">
    	 		<p id="portfolio_picture"><a href="http://www.dylanpugh.co.uk/portfolio/" onmouseover="change('1')" onmouseout="change('4')">Portfolio</a></p>
                <p id="about_me_picture"><a href="http://www.dylanpugh.co.uk/about_me/" onmouseover="change('2')" onmouseout="change('4')">About Me</a></p>
                <p id="contact_picture"><a href="#" onmouseover="change('3')" onmouseout="change('4')">Contact</a></p>
                
                <p id="writing_change"><img src="images/file.gif" name="linkpic"></p>
    
        </div>
    The CSS for this part is standing at:

    Code:
    #container1 {
    		display: block;
    		width: 895.35px;
    		height: 150px;
    		margin-top: 183.19px;
    		margin-left: auto;
    		margin-right: auto;
    }
    
    p#portfolio_picture {
    		display: inline;
    		float: left;
    		width: 150px;
    		height: 150px;
    		background: url(images/portfolio_picture.gif);
    }
    
    p#portfolio_picture a {
    		display: block;
    		width: 150px;
    		height: 150px;
    		text-indent: -5000px;
    }
    
    p#about_me_picture {
    		display: inline;
    		float: left;
    		width: 150px;
    		height: 150px;
    		background: url(images/about_me_picture.gif);
    		margin-left: 1.5px;
    }
    
    p#about_me_picture a {
    		display: block;
    		width: 150px;
    		height: 150px;
    		text-indent: -5000px;
    }
    
    p#contact_picture {
    		display: inline;
    		float: left;
    		width: 150px;
    		height: 150px;
    		background: url(images/contact_picture.png);
    		margin-left: 1.5px;
    }
    
    p#contact_picture a {
    		display: block;
    		width: 150px;
    		height: 150px;
    		text-indent: -5000px;
    }
    
    p#writing_change {
    		display: inline;
    		float: right;
    		width: 442px;
    		height: 151px;
    }
    This has got me 90% of the way. However at the moment the area with the orange box (that changes) is blank when the site is first loaded untill I mouseover one of the links. How can I tell it to start with an image?

    Thanks for the help, it's all much appreciated, and things are getting along slowly + I'm learning heaps :)

    Edit: nevermind, figured it out. Needed my 'site info' image saved under file.gif and it displays. Woohoo, that's a completely working homepage. Even loads successfully in IE8 (although you need to allow Active-X for the javascrpt).

    On to the other pages now.
     
    Last edited: 19 Aug 2010
  14. Zoon

    Zoon Hunting Wabbits since the 80s

    Joined:
    12 Mar 2001
    Posts:
    5,300
    Likes Received:
    551
    Personally I would've had hidden DIVs and toggled their view, but roll-over changing the img src works just fine as well!

    Nice work, glad we could lead you at least in the right direction :thumb:

    Remember to link when its done! Its a good looking website.
     
  15. julianmartin

    julianmartin resident cyborg.

    Joined:
    25 Jul 2004
    Posts:
    3,538
    Likes Received:
    120
    I agree, hidden DIVs are a more elegant way to do it. None the less, plenty of people change img src so not to worry.
     
    thehippoz likes this.
  16. BentAnat

    BentAnat Software Dev

    Joined:
    26 Jun 2008
    Posts:
    7,231
    Likes Received:
    219
    the advantage of using hidden divs would be the precaching without javascript.
    Changing an image src requires JS precaching.
     
    thehippoz likes this.
  17. dullonien

    dullonien Master of the unfinished.

    Joined:
    22 Dec 2005
    Posts:
    1,281
    Likes Received:
    29
    I'll look into using hidden divs then. This way works, but if there's a better way to do things, then great. Afterall this is a learning excersice aswell.

    Thanks for the info.

    The site won't be online for a little while. I'll be hosting the website myself on a spare computer I'll be setting up as a webserver / fileserver / rendering rig. I've got access to Windows Server through MSDNAA that I can use (if autodesk backburner works on Windows Server that is). That won't happen till I get back to uni though.
     

Share This Page