locked
Centering a PSD file in EW4 RRS feed

  • Question

  • I'm in a situation that is not my job here in the office. I do most of the site designs in Photoshop and then hand them off to another girl that finishes the site in EW4 and cleans up the code.

    She's out of the office for a week and when I put an index.html page I built in Photoshop into EW4 I have no clue as to how to center it. You're help would be much appreciated in giving me instructions on how to do this.

    Thanks in advance.



    Monday, April 21, 2014 5:26 AM

Answers

  • You style the containing element for your webpage contents with a width, with margin-left: auto and margin-right auto, and you make sure the page has a valid Doctype.
    • Marked as answer by carriebarber Monday, April 21, 2014 4:57 PM
    Monday, April 21, 2014 12:49 PM
  • Look in the Forum FAQ. There is a Learning Resources section that links to tutorials. w3schools is the place to start for tutorials like this--basic HTML and CSS in little chunks. And if you've never used EW, take the tutorial at by-expression.com

    Are you really building pages in Photoshop and slicing them to make web pages? That's what it sounds like.


    A horse walks into a bar. The bartender asks "Why the long face?"

    "Because I was born into servitude and when I die my hooves will be used to make glue."

    It was at this point that the bartender realized he would not be getting a tip.

    Monday, April 21, 2014 3:12 PM
  • Since we have no idea what is in your .html file, or what Photoshop produces as html, we can't tell you what to style.  If you publish the page you have, and give us a link to it, we could help in more detail.

    (If your specialty is the graphics design, not the actual web page creation, you may be better off waiting a week for the web designer to return.)

    EW is a professional level tool, and it assumes you know HTML and CSS (at a minimum), as well as how to use EW itself.

    If you want to give it a try, the sticky "Forum FAQ and Guidelines" post at the top of the forum has, at the bottom, links to many resources to help you learn how to use EW and how to learn CSS and HTML:

    http://social.msdn.microsoft.com/Forums/expression/en-US/7fd16fa3-1944-4522-8848-a6a2926a253b/forum-faq-and-guidelines-start-here?forum=web

    The first link in that post gives you details of what you need to know, and more links to the resources to learn it:

    http://support.microsoft.com/default.aspx?scid=kb;en-US;2511858

    • Marked as answer by carriebarber Monday, April 21, 2014 4:57 PM
    Monday, April 21, 2014 3:20 PM

All replies

  • You style the containing element for your webpage contents with a width, with margin-left: auto and margin-right auto, and you make sure the page has a valid Doctype.
    • Marked as answer by carriebarber Monday, April 21, 2014 4:57 PM
    Monday, April 21, 2014 12:49 PM
  • Thanks Kathy for your prompt response and I appreciate that.

    Let me say, I am not a coder anymore nor do I know how to do your instructions. Is there a tutorial for this I could follow?

    I've done nothing but Photoshop for the last several years. I've got several more of these to do and all I need to do is get them in EW4, which I can do, and then align the design center for her.

    They do have a Doctype on them.

    Once again I think you for your help.

    Monday, April 21, 2014 2:15 PM
  • Look in the Forum FAQ. There is a Learning Resources section that links to tutorials. w3schools is the place to start for tutorials like this--basic HTML and CSS in little chunks. And if you've never used EW, take the tutorial at by-expression.com

    Are you really building pages in Photoshop and slicing them to make web pages? That's what it sounds like.


    A horse walks into a bar. The bartender asks "Why the long face?"

    "Because I was born into servitude and when I die my hooves will be used to make glue."

    It was at this point that the bartender realized he would not be getting a tip.

    Monday, April 21, 2014 3:12 PM
  • Since we have no idea what is in your .html file, or what Photoshop produces as html, we can't tell you what to style.  If you publish the page you have, and give us a link to it, we could help in more detail.

    (If your specialty is the graphics design, not the actual web page creation, you may be better off waiting a week for the web designer to return.)

    EW is a professional level tool, and it assumes you know HTML and CSS (at a minimum), as well as how to use EW itself.

    If you want to give it a try, the sticky "Forum FAQ and Guidelines" post at the top of the forum has, at the bottom, links to many resources to help you learn how to use EW and how to learn CSS and HTML:

    http://social.msdn.microsoft.com/Forums/expression/en-US/7fd16fa3-1944-4522-8848-a6a2926a253b/forum-faq-and-guidelines-start-here?forum=web

    The first link in that post gives you details of what you need to know, and more links to the resources to learn it:

    http://support.microsoft.com/default.aspx?scid=kb;en-US;2511858

    • Marked as answer by carriebarber Monday, April 21, 2014 4:57 PM
    Monday, April 21, 2014 3:20 PM
  • Correct, I'm building the pages in Photoshop and slicing them. I got it figure out. I made the style and forget to apply it. Once I did that everything went to the center of the page.

    It's for a winery and it needs to be the first one she works on when she gets back. I go all the way back to FP and worked all the way into EW4 when I had to start doing most of the Photoshop work.

    We've got several girls out sick and only three of us left in here right now are the designers not the coders. Once again I certainly appreciate your help and apologize because it was my mistake.

    Monday, April 21, 2014 4:56 PM
  • I have to tell you that no one--no one--uses slicing any more to create web pages (not professionals, anyway). That is not search-engine friendly and it puts a huge dowload burden on mobile users. That does your clients a real disservice.


    A horse walks into a bar. The bartender asks "Why the long face?"

    "Because I was born into servitude and when I die my hooves will be used to make glue."

    It was at this point that the bartender realized he would not be getting a tip.


    Monday, April 21, 2014 5:54 PM
  • Every designer we know still does it. What we do is give her the sliced design made in Photoshop and then she  codes them into the web page. We've yet to have one that didn't validate. We don't use the codes that Photoshop generates for them.

    We must be doing something right, we're slammed with work and have been with no complaints.

    Have a blessed day.

    Monday, April 21, 2014 6:09 PM
  • Interesting, I do not know a single coder or designer who slices and dices anymore. Even Adobe doesn't do that. Responsive designs are becoming the defacto standard for websites, slice and dice doesn't do that. When I have a Photoshop PSD sent to me I flatten and export some bits and create other using CSS. One client has been known to send me PSD files with 286 layers from which I end up with maybe 5-6 jpg/png/gif files and the rest is in HTML and CSS. Last time I worked with anyone who sliced and diced was 10 years ago.

    I'd be curious to see a design that is currently on the web that is sliced and diced. Care to provide a link?


    Free Expression Web Tutorials
    For an Expression Web forum without the posting issues try expressionwebforum.com

    Friday, April 25, 2014 10:01 PM
  • I would, too, although I doubt that the OP will be returning. I can't imagine a sliced and diced Web site that is accessible, or SEO-friendly, or mobile device responsive. OTOH, she says they're as busy as they can handle and haven't had any complaints...

    <<shrug>>

    cheers,
    scott


    Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Friday, April 25, 2014 10:06 PM