Web Design Questions?

  • Thread starter Thread starter PAPPACLART
  • 15 comments
  • 1,705 views
PAPPACLART

PAPPACLART

Messages
1,946
Italy
Treviglio
Messages
PAPPACLART
Messages
PAPPALCART
Hello

I will be starting to learn HTML/PHP but was wondering if there is a software/application where by I can create a digital visulization of the individual web pages I plan to create? the software does not have to be anything special or specific to web design, just something that allows for a rough mock up of what I want to create?

Many Thanks

Ryan
 
Maybe I'm not understanding correctly, but wouldn't any image editing software (preferably one that supports layers) work? You'd then be able to change the background color, add images and any text.
 
Yah, I'd go for photoshop.. you can work with a few layers and do some cool stuff, but seriously, move onto something like dreamweaver ASAP. Once you get to laying stuff out, you may aswell be doing it in a web design application, even if it doesn't work and you'll never upload it.

although once you start doing stuff in PHP it doesn't display properly properly until it's on the web anyway.
 
yea go with photoshop most web designers uses photoshop for Graphics. And Adobe Illustrator is useful if you want create logos for your website. I am also studying web design. Dreamweaver is a good software but it's more of a GUI application that helps you build XHTML without any hand coding It's naturally builds static pages together. I'm sure if you're just want to create websites as a hobby you can go with Dreamweaver. But if you're doing it as a career you will want to learn to create dynamic pages.I'm sure that you will have to learn not just PHP but PHP/MySql both of those languages together.
 
MatskiMonk
Yah, I'd go for photoshop.. you can work with a few layers and do some cool stuff, but seriously, move onto something like dreamweaver ASAP. Once you get to laying stuff out, you may aswell be doing it in a web design application, even if it doesn't work and you'll never upload it.
Click to expand...

What he said ^

Photoshop is a lovely basis, but you soon get used to being allowed to place elements in any location - something HTML isn't so forgiving about. You'll end up Photoshopping something unfeasible to code if you're not careful.
 
Jondot
What he said ^

Photoshop is a lovely basis, but you soon get used to being allowed to place elements in any location - something HTML isn't so forgiving about. You'll end up Photoshopping something unfeasible to code if you're not careful.
Click to expand...

Using CSS you can easily place elements anywhere on the page. Anyway I use fireworks for web design. Photoshop is for photos, fireworks is for the web IMO.
 
Have to agree with Fireworks. Protoyping in fireworks and then transferring to dreamweaver is fantastic. Photoshop is great for many things, but for web design i find it a little clumsy.
 
For xhtml/css + javascript, I use :

- Notepad++ for editing cause you've got a lot of features to help you,
- the GIMP for image editing -it is free -GNU- and has almost all the Photoshop's features-,
- powerpoint to create logo or write on image -faster and easier than with GIMP- and save the file in a correct PNG format.
- you can download lots of cool fonts (dafont.com) you can use with powerpoint,
- WhatTheFont when you love someone's font but can't find which one he used,
- Microsoft Office Picture Manager to crop, reduce, modify the picture angle degree per degree,
- deviantArt.com where you can find lots of tutorials and brushes for GIMP,
- Very small useful freeware "la boite a couleurs" (link), or "ColorPic 4.1" (link)
- Mozilla Firefox browser + HTML Validator addon + Web Developer addon + NoScript addon so that you'll be able to turn on/off javascript really quickly and easy to use -can also choose which one you want on and which one off- + Screengrab addon (It will capture what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images - either to a file, or to the clipboard. It captures Flash too!)
- w3.org html validator, w3.org css validator

And I think you're good to go... Oh ! And I forgot the [PRTSC SYSRQ] button on your laptop = screenshot (push it, open powerpoint, ctrl+V, can save the image in PNG format)

Good luck !

PS : the link in my signature is my website, I did the design using everything I wrote above ;)
 
Last edited:
nasanu
Using CSS you can easily place elements anywhere on the page.
Click to expand...

No.

In Photoshop you can place elements easily, anywhere on the page. You click, you drag, it's there. Time taken: half a second.

Placing that same element in the HTML document is by comparison far from easy. It has to sit in a div tag, which then has to be positioned with a whole array of attributes. And then you have to play with those attributes some more, and some more, and some more until it's exactly where you had it in your PS job. Time taken: half an hour.

Similarly, anyone with an index finder and one or more eyes can move something in Photoshop. You forget that to get things to do what you want in CSS, you've got to have actually learned the various ins and outs of how it works - something that certainly doesn't happen overnight.

Evidently our definitions of 'easy' are very different.
 
In answer to the OP, I would say that the best way to build mock-ups is to build them within the browser itself, rather than using image editing software.

Photoshop or Fireworks may help you visualise the design you have in mind, but if you cannot replicate your design within the browser, then I believe that the visual step you are seeking is pointless.

It would be a far better use of your time, for you to learn to write POSH, than it would, for you to go down the visual design route.

Here is an excellent article from 24 ways, that explains the process further:

Make Your Mockup in Markup

Here are two tools to help you:

If you have Firefox, you really need the Firebug extension. It is an awesome web design tool, that will help you create mock-ups quickly and easily, but you will have to get your hands dirty writing code.

If you are looking for a superb IDE to help you write good code, then pop over to NetBeans, and download their superb IDE, its free! 👍

Jondot
Placing that same element in the HTML document is by comparison far from easy. It has to sit in a div tag, which then has to be positioned with a whole array of attributes.
Click to expand...

I think you are misunderstanding the purpose of the division tag Jondot. The division tag should be used as a means of marking logical divisions within the page structure.

For instance, header, navigation, or content blocks could be classed as logical divisions, so you could use the division tag to group those elements together. Even then, there are other elements that may or may not be better suited to the task, like unordered lists for navigation blocks for example.

One thing you do not need to do is to wrap everything within a division tag, doing so leads to divititis, and is only marginally better than using tables for presentation. With CSS, it is possible to position ANY tag, anywhere on the page, though you have to be mindful of the semantics when doing this. 👍
 
magburner
[...]
One thing you do not need to do is to wrap everything within a division tag, doing so leads to divititis, and is only marginally better than using tables for presentation. With CSS, it is possible to position ANY tag, anywhere on the page, though you have to be mindful of the semantics when doing this. 👍
Click to expand...

+1 ! And thanks for the links ! Another advice would be to have at least Firefox, Safari, Opera, Google Chrome, and IE installed in your computer to check if your website looks almost the same in every browsers (you'll find out IE can do weird things sometimes and it will give you headaches ;) ; IE prefers % and em to px and doesn't really like .png format, padding command (+lots of css command can't be understood by IE -only-) so sometimes you'll have to find a way to make your website work in every browser...

Good luck !

EDIT : Firebug is AWESOME !!!! I LOVE IT !!! Thanks 👍👍👍 !!

And you should learn a lot of things here too : http://www.cssplay.co.uk/ and http://css-tricks.com/downloads/
 
Last edited:
magburner
I think you are misunderstanding the purpose of the division tag Jondot. The division tag should be used as a means of marking logical divisions within the page structure.

For instance, header, navigation, or content blocks could be classed as logical divisions, so you could use the division tag to group those elements together. Even then, there are other elements that may or may not be better suited to the task, like unordered lists for navigation blocks for example.

One thing you do not need to do is to wrap everything within a division tag, doing so leads to divititis, and is only marginally better than using tables for presentation. With CSS, it is possible to position ANY tag, anywhere on the page, though you have to be mindful of the semantics when doing this. 👍
Click to expand...

Interesting. I'll have to bear that in mind - looking at it now I think I definitely overuse divs as a sort of general tag for everything, and that's something I'll have to kill. Thanks for the tip 👍

...and I rephrase my earlier statement to 'it has to go in a tag' ;)
 
easyasashii
Another advice would be to have at least Firefox, Safari, Opera, Google Chrome, and IE installed in your computer to check if your website looks almost the same in every browsers (you'll find out IE can do weird things sometimes and it will give you headaches.
Click to expand...

That is very good advice pal! I always install one browser per rendering engine.

On the subject of IE, have you tried the technological preview for IE9 yet? It is not a complete browser, but you can use it to see how the updated rendering engine engine works. It seems that IE may be moving closer to standards compliance, as it now scores 68/100 in ACID3 tests! 👍

Internet Explorer 9 technological preview


easyasashii
And you should learn a lot of things here too : http://www.cssplay.co.uk/ and http://css-tricks.com/downloads/
Click to expand...

Yes, they are awesome resources. 👍

If you are interested further information on web design, check out Smashing Magazine, it is an excellent website with MANY tutorials, guides and links to the best web design resources on the net. 👍

Jondot
Interesting. I'll have to bear that in mind - looking at it now I think I definitely overuse divs as a sort of general tag for everything, and that's something I'll have to kill. Thanks for the tip 👍
Click to expand...

No worries pal, I'm glad I could be of help! 👍
 
magburner
[...]
On the subject of IE, have you tried the technological preview for IE9 yet? It is not a complete browser, but you can use it to see how the updated rendering engine engine works. It seems that IE may be moving closer to standards compliance, as it now scores 68/100 in ACID3 tests! 👍
Click to expand...

Thanks 👍 !

And I wanted to add this one (well they are hundreds of very good website so hard to post every one of them) : http://csscreme.com/

I love their website designs and you can download lots of things... And if you were able to read french... I could give you more great addresses !

Have a nice day guys !
 

Latest Posts

Back