Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    Feb 2007
    Posts
    4
    Member #
    14880
    I have been using Photoshop CS2 and Dreamweaver 8 for about... well... 1 day. Ive been doing tutorials all day. I think i got a basic (very basic) understanding of each. Ive been reading this forum and it seems nobody likes dreamweavers "design" feature. For me, I dont know anything about coding and all the tutorials i have been doing show using the design. Is there a reason for this?
    Also, Im trying to learn Photoshop to design a web page for my dad's business. I learned from tutorials how to make buttons and rollovers. To make a site using photoshop and dreamweaver, do you just design the webpage in photoshop as you would see it in the browser leaving spaces for buttons and text, and then just copy that into dreamweaver?

    Any help would be appreciated. Could someone show me something like a template they made in photoshop for a website so i can get a better understanding.
    Sorry for being so inexperience but after all i did come here for help.

    Thanks in advance,
    Vinnie

  2.  

  3. #2
    Member Kye20's Avatar
    Join Date
    Jan 2007
    Location
    NSW, Australia
    Posts
    41
    Member #
    14766
    The main reason for the dislikeing of design view in Dreamweaver is because it can add alot of unneccasary code and very messy code, Which is why most people will use the split view so the can fix up all the unneccasary code, This is why i wouldnt recommend starting off in Dreamweaver design view, I recomend it would be alot better to learn and get an understanding of XHTML + CSS first
    Kye
    ~KY3~

  4. #3
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    The entire concept of imagedesign-slicing-website is kind of outdated now. Use the powerful CSS abilities to create what you want, and learn plain HTML. Your learning curve will be a bit harder, but even if you take the Photoshop-DesignViewDreamwaver road, you'll find things only HTML and CSS can do by hand - so eventually you'll learn it, sooner or later. I suggest sooner.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  5. #4
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by Steax
    The entire concept of imagedesign-slicing-website is kind of outdated now.
    Not really! Alot of design start from a PSD file and then it's turned into a html page with css. Not sure wher you got that information but alot of the money I bring in from my hobby/company is from PSD-to-HTML jobs.

    vinnieolle: Here's one that I did very recently that is live right now

    Attachment 2588

    and the website is apica.ca

    The thing with slicing site is to take into consideration EVERYTHING that CSS can do. So ... instead of using a image to display a background, ask yourself if it can be done in CSS with that background-color property instead of using an image. Thing like that.

    It's alot of work in the beginning. Don't think you'll achieve all this in a day.

    As for the Dreamweaver thing ... I use it but not the design view. Learn to code HTML and CSS. They go hand in hand. You can do one without the other. Stick to the code view in DW.
    Attached Images Attached Images
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  6. #5
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    i never could understand cutting an image and putting it back together in css and xhtml, just like i could never understand tables, i was brought up on a diet of divs divs and more divs and its served me well, in all honesty, most of the tutorials online were written prior to recent developments and so you need to choose carefully before starting a tutorial

  7. #6
    Junior Member
    Join Date
    Feb 2007
    Posts
    4
    Member #
    14880
    The tutorial that helped me a lot in dreamweaver (design view that is) is called inpics.net. You actually do the stuff step by step not just watch some guy do it in a video. I still have not found a good tut for photoshop that teaches the basics. Most of them are how to make a signature for a forum.

    Questions for karinne:
    is that just one image you made in Photoshop and then put it as an image in dreamweaver?

    Also i noticed on your site that those buttons on top were rollovers, if your making rollovers wouldnt you have to leave the space blank when you make the photoshop template and then add button images later?

  8. #7
    Senior Member Kayo's Avatar
    Join Date
    Dec 2006
    Location
    Brampton Ontario
    Posts
    416
    Member #
    14523
    Liked
    39 times
    inpics.com isn't a website, its a "Linksite." its used to boost rankings of other websites on google

  9. #8
    Junior Member
    Join Date
    Feb 2007
    Posts
    4
    Member #
    14880
    Oops, i meant inpics.net, sorry.

  10. #9
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    More likely the Photoshop's results will be heavily modified in the HTML+CSSing phase. Set things to repeat, set textual elements... I think I just can't stand the idea of using so many images, I usually only have 3 or 4 primary images (mostly the banner and backgrounds)... it just doesn't feel right to take something which is usually so rich in details and plaster it to the web.

    Remember that most navigation buttons should be plain text (styled, of course) in a list. Later they'll even add <nl>, just for navigation lists. Rollovers should be done via the CSS :hover attribute too.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  11. #10
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Quote Originally Posted by vinnieolle
    Questions for karinne:
    is that just one image you made in Photoshop and then put it as an image in dreamweaver?
    No ... see explanation below. Never put your site as one big image.

    Quote Originally Posted by vinnieolle
    Also i noticed on your site that those buttons on top were rollovers, if your making rollovers wouldnt you have to leave the space blank when you make the photoshop template and then add button images later?
    The menu is straight text with a bit of padding added to the links to spread it out... no images at all.

    HTML Code:
    CSS
    /* ---| main navigation styles |-------------- */
    
    #mainnav a:link, #mainnav a:visited, #mainnav a:active {
    	font-size: 12px;
    	text-decoration: none;
    	padding: 0 10px;
    	color: #d0d0ff;
    }
    
    #mainnav a.first {
    	padding-left: 0;
    }
    
    #mainnav a.last {
    	padding-right: 0;
    }
    
    #mainnav a:hover {
    	color: #fff;
    }
    
    HTML
    
    <!-- main navigation -->
    <div id="mainnav"><a href="/services.shtml" class="first">Services</a> ~ <a href="/activites.shtml">Activit&eacute;s</a> ~ <a href="/membres.shtml">Membres</a> ~ <a href="/projet-rue-principale.shtml">Projet rue Principale</a> ~ <a href="/carnaval-aylmer-07.shtml" class="last">Carnaval Aylmer</a></div>
    
    <!-- END OF main navigation -->
    Quote Originally Posted by Steax
    More likely the Photoshop's results will be heavily modified in the HTML+CSSing phase. Set things to repeat, set textual elements... I think I just can't stand the idea of using so many images, I usually only have 3 or 4 primary images (mostly the banner and backgrounds)... it just doesn't feel right to take something which is usually so rich in details and plaster it to the web.
    And that's all I have ... 4 images. And notice how they are all background images?!

    http://www.apica.ca/i/header-bg.jpg
    http://www.apica.ca/i/main-bg.jpg
    http://www.apica.ca/i/content-bg.jpg
    http://www.apica.ca/i/footer-bg.jpg

    The rest is all text (apart from the little icons and the logo of course). So it's not "plastered" with images. If I had more time on my hands I could probably gt right of the content-bg image but then I'd have to used a few hacks to many to compensate for IE's lack of height: 100% understanding.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com