November 3, 201213 yr Hello, I am wondering if I could get some more experienced advice and help into where to start and what method of creation I should take to get the psd I have designed into a real material website. Before I go any further I want to point out that this is a very simple and small design! I have attached an image of the website. Basically I am wanting a few things to happen. I am looking into a background that resizes to 100% of the users screen. (Advice on this would be appreciated). There is 3 boxes I am wanting to be center of the page as in the design. The first one simply to be an image to link, the bottom left to hold a twitter widget, (so I'm guessing a DIV) and the same for the right where I am wanting either an animated gif or small slideshow of a range of images. Whichever you advise me on. The 3 boxes would be great if they could also resize dependant on the user screen and window size however not a priority. Just needs to be done. Finally there is just some text in the center slightly down from the bottom boxes. I would massively appreciate if someone could advise me and help me to create this website. I do hold some knowledge so I am confident with a point in the right direction, I can get this done when I know the best way to do it. I have a day to get this completed so it is a massive priority for me right now. Thanks in advance
November 5, 201213 yr Converting a PSD to XHTML is not a easy task , most web developers usually work with a designer to ensure what is being designed can actually function in a web browser , it might be easy to draw layers in Photoshop but coding them is a complete different issue. From the screenshot you have provided I can see a default 2 column layout with header and thats about it. I would download the 960 grid system from 960.gs and create a blank HTML file with the 960 CSS attached and then use this code. CSS .top_header { min-height:200px; background-color:grey; clear:both } .left_column { background-color:red; } .right_column { background-color:blue; } HTML <body> <div id="header"> <div class="container_12 top_header"> Enter Header Image / Slider Here </div> </div> <div class="container_6 left_column"> Left Column </div> <div class="container_6 .right_column"> Right Column </div> </body> Its quite basic but it should help you get started
Create an account or sign in to comment