1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

[QUESTION] Creating HTML from PSD

Discussion in 'HTML & Website Design' started by JeremiasRama, Oct 19, 2014.

  1. #1
    Hi, I'm new to this forum and I've designed this.
    [​IMG]
    So that's the website I've designed this far. With photoshop of course. The thing is, when we used "slice tool", put it on a html and edit it in dreamweaver. It will do no good.

    So, I want in my html these elements:
    1) The header
    2) The slide with its information that changes every x seconds or whenever the grey buttons bellow is clicked
    3) The footer

    How to specifically cut that image into those 3 elements and place it neatly in dreamweaver?
     
    Last edited: Oct 19, 2014
    JeremiasRama, Oct 19, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, first up -- and sorry if this sounds harsh -- dicking around pushing pixels in Photoshop is NOT web design, no matter how many ignorant PSD jockeys claim otherwise. Generally speaking starting out there results in designs that reek of "Accessibility, what's that?" and even "content, what's that?" -- it's why I say most "designers" don't know enough about HTML, CSS or accessibility to be designing jack **** for anyone.

    This design has all the telltales of "I canz haz a websites?" -- the massive image too big to have any business as the background of a website (much less having multiple of them with scripttardery for nothing), what would likely have to be images or webfonts pissing on the accessibility, and that you are even THINKING about "slice tools" shows that it's time to toss that mess that nobody is going to wait for it to finish loading. How are you planning on making that responsive, "where's the beef?" in terms of actual content? Is every page going to have a different layout since what you have here really isn't conducive to content delivery?

    Start over using a "content first" mentality where you put what's important (in this case I'd think those "pricing plans" might be a good idea) front and center, mark it up semantically, create a semi-fluid and elastic layout, then make it responsive -- THEN and ONLY THEN start up photoshop to create the images you hang on the layout as an afterthought.

    Starting out drawing pretty pictures in Photoshop is putting the cart before the horse and a COMPLETELY back-assward approach to web design, which is why 99.99% of websites built from that approach are inaccessible train wrecks doomed to "also ran" status. (assuming they last out a year).

    Doesn't matter how pretty it is, if it's useless to visitors what good is it?
     
    deathshadow, Oct 20, 2014 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #3
    "friends don't let friends use dreamweaver"
     
    sarahk, Oct 20, 2014 IP
  4. MakingMoves

    MakingMoves Active Member

    Messages:
    51
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    50
    #4
    @deathshadow what do you think about Sass?

    You're in luck, here's a Youtube video that looks like the same layout, just adapt it to yours.

     
    MakingMoves, Oct 20, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    LESS, SASS, OOCSS, Blueprint, Prototype, jQueery, Bootcrap, Foundation -- pointless garbage code-bloat that has no business on websites in the first place -- at best they are sleazy shortcuts resulting in slow loading painful to maintain disasters, at worst they are either nube predation or the antithesis of sane and rational web development.

    LESS and SASS, much like "frameworks" are both encourage sloppy bloated coding practices and are the antithesis of why CSS and HTML are separate (and should be kept separate) in the first place! If you are using enough CSS and complex enough a markup that LESS or SASS "pays benefits", you are flat out using HTML and CSS wrong, likely not grasping how to leverage semantic markup and leverage selectors properly!

    In general ALL "frameworks" I come across are by themselves uncompressed larger than I would allow a normal page on a website's template (not counting content) to reach -- and that would be HTML + CSS + SCRIPTS + IMAGES. When between some goofy HTML/CSS framework, goofy pre-processor, and goofy JavaScript framework you are three times or more the size I would allow a populated with content page to reach? You'll excuse me if I don't consider any of that to be much more than idiotic halfwit bullshit.

    They start out with more code, result in people writing as much if not more code, prevent people from properly learning the underlying technologies, usually results in pages that have broken accessibility, often using JS to do CSS' job, pre-processing to do selector's job, presentational markup pissing on separation of presentation from content, and usually gives people who have no business writing websites more lame excuses to continue to sleaze out their post HTML 3.2 pre-4 methodology any old way.

    I say the same thing about HTML 5; the bleeding edge of 1997 coding practices and for all intents and purposes as a markup specification the "New Transitional"... since apart from "MANIFEST" for making web applications, the rest of it seems bound and determined to send development practices back to the worst of pre-STRICT. Of course it doesn't help that all the actually useful stuff that has JACK **** to do with a markup specification have been thrown under HTML 5's banner (like CSS3 and the new scripting) -- since without them the Emperor is standing there bare for the world to see. Every time some ignorant dipshit re-re praises HTML 5, I have to fight the overwhelming urge to introduce the backside of my hand to someone's face. Pimpin' ain't easy...

    I don't get how more code, writing more code, throwing semantics, separation of presentation from content and progressive enhancement out the window makes anything "easier', "more accessible" or any of the other nonsensical claims the people advocating the use of such garbage make.

    I really pity the people starting out right now, as the 'hot and trendy' bullshit and the idiotic halfwits promoting them are leading everyone down the garden path to failure.

    Same goes for all the Adobe bull -- there's a reason that from a web devlopment standpoint the only thing from Adobe that can be considered professional grade tools are the people promoting it's use. Dreamweaver, Photoshop, fireworks -- The first is bloated crap that deludes people into thinking they can build a website, the latter two have no business being the starting point of development, and if used at all, should be at the end of the process for the goofy presentational crap you hang AROUND the content for ONE of your MANY layouts -- since if you're building semi-fluid, elastic and responsive like a good little doobie, you have dozens or more possible layout possibilities from ONE set of HTML and three or four media queries.

    Of course with CSS3 in the mix, the need for a PSD jockey and their "form over function" bull is diminishing at a nice fast rate.
     
    Last edited: Oct 21, 2014
    deathshadow, Oct 21, 2014 IP
  6. MakingMoves

    MakingMoves Active Member

    Messages:
    51
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    50
    #6
    @deathshadow you need a youtube channel, you're so funny.
     
    MakingMoves, Oct 21, 2014 IP
  7. JeremiasRama

    JeremiasRama Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #7
    What's wrong with dreamweaver?

    By the way, I tried several ways these past days. I'm able to create my website using metro css from metroui.org.ua and lightbox for background slide. And everything is done by typing bunch of codes with notepad++ not dreamweaver.

    Preview
    [​IMG]

    So, we can't really use photoshop and dreamweaver?
     
    JeremiasRama, Oct 23, 2014 IP
  8. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #8
    Short version: It's a pile of crap used by crap "designers" to build crap sites.
     
    malky66, Oct 23, 2014 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    It is a fat bloated slow pile of manure that dupes the ignorant into THINKING they can build a website. If you use the WYSIWYG part it vomits up such bloated garbage non-semantic markup that anyone DUMB ENOUGH to deploy on a live site ... well, those types of people need to be dragged round o' the woodshed and put down like old yeller. If you rely on the wysiwyg as a "preview pane" it bears so little resemblance to what actual browsers do (even the ones it's allegedly based on, old PS allegedly being Opera/Presto, new DW allegedly being based on webkit and/or blink) it lets developers delude themselves into thinking they are doing things properly right up until they test in an actual browser. If you use any of it's default templates you are starting out from buggy broken baselines, if you use the wizards or anything in it that makes code for you more often than not you end up using CSS to do markup's job, JS to do CSS' job, and in general end up with such ape-shit ridiculous code bloat and decade and a half out of date methodologies you might as well not even bother having a website. Even their template management pisses all over the markup with comments in a manner guaranteed to trip rendering bugs in some versions of IE and FF. (yes, I said COMMENTS, those things browsers are supposed to ignore, tripping bugs!)

    IF you can restrict yourself to just using the code editor, it's semi-ok (if a bit feature-LEAN) -- but at that point why throw money away on an overglorified version of notepad, when there are dozens if not hundreds of perfectly good overglorified notepad replacements out there.

    So code bloat, code bloat, and more code bloat. Lovely. Must be an inaccessible mess.

    As to your little 'preview' picture, laundry list of how NOT to design a website with that giant malfing static image -- that begs the question how are you handling it when the aspect ratio of the window is different? Did you do the dumbass thing of leaving the text in the image so your site has no actual content? There's a reason you don't see artsy-fartsy nonsense like that on "real" websites, being solely the province of "designers" websites or those dumb enough into being duped by that art faygelah form-over-function flash-over-substance "accessibility, what's that?!?" design. Laundry list of how not to design a website and ENTIRELY what one expects from PSD jockeys who to be frank, need to learn a hell of a lot more about content delivery, ux design, accessibility, HTML, CSS and elastic semi-fluid responsive design.
     
    deathshadow, Oct 23, 2014 IP
  10. JeremiasRama

    JeremiasRama Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #10
    This is my school task by the way, it's for the exam.

    I just learned to create one for these past 2 days so I'm a beginner. The front page you're seeing is not a static image, I designed it as a slideshow showing a company products so when clicked you'll be redirected into product page (Slideshow changes automatically, or you can pick any image by clicking the circle buttons below)

    I used notepad++ as main editor, so I'm not using dreamweaver as you told. It's pure HTML and CSS. Is there any other great text editor I can use?

    I'm still working on the content page. It's quite hard but I'm still trying.
    Isn't flash site is great? Will you give me example of a great designed website?
     
    Last edited: Oct 23, 2014
    JeremiasRama, Oct 23, 2014 IP
  11. sahil rajpput

    sahil rajpput Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #11
    A graphic designer works to a brief agreed with the client, creative director or account manager. They develop creative ideas and concepts, choosing the appropriate media and style to meet the client's objectives.and use this w3school.com
     
    sahil rajpput, Nov 10, 2014 IP