im a pure backend programmer and i find it so difficult to position divs and add css styles.
what are your advices to make this as simple as possible for me?
use dreamweaver? what can it help me with exactly.
i have no idea how to add style to my prototype or handling positionings of divs and elements. some guides? tools? softwares? online scripts?
please all suggestions are welcome! guide me through...im all business logic and none design head.
eg. http://www.workey.se. how do you start with layout, design and all that stuff...
Depends exactly what you need to do, but learning the basics of css is pretty easy, mastering it is far more difficult of course. I'd suggest you just learn CSS and makes sure you get a decent browser add in like firebug so that you can see exactly what is going on. I'm not a fan of dreamweaver personally.
Dreamweaver is a good tool for initial design but I wouldn't recommend it for much more than that. Of course many people use it exclusively.
Why not try some CSS framework like the 960 grid? It can help with positioning elements on the page and leave you to worry about the specific implementation of your design like fonts and colors.
http://960.gs/
If you want simple page layouts something like YUI might help you. It has a large collection of pre-built code for you to use. Particularly the Grid Builder is great for creating multiple sections to populate within pages.
As for tools as long as it has decent syntax highlighting any text editor would be fine. Personally DreamWeaver tries too hard to 'help' and instead gets in the way but then I'm happier just with the raw mark-up.
I agree with some of the posts above, and empathize with the "pixel pushing" difficulties you might encounter when starting out.
I've been creating and recreating HTML layouts for about 5 years now, and after trying YUI, Google Blueprint, several css reset libraries, and my own home-brew layouts, I find YUI's grids, fonts, and resets are the most flexible and useful. Their templates are a little tricky, but only a little.
Here's my answer to a very similar question (in case people would rather not click through to see the answer...if this is spamming or against the rules, please let me know and I will remove the answer)
:
"
All of the above are excellent. Dreamweaver (imho) has the most complete set of features for designing pages (Adobe actually licensed some of the technology from TopStyle a while back to improve their feature set). And it has excellent validation built-in.
Another FREE tool (remember, Dreamweaver will cost you at least a few hundred unless you steal it) is Aptana IDE. It has most code completion options that Dreamweaver has, and similar validation tools.
Aptana and Firebug plugin for Firefox make a pretty good combination. In addition, there are Firebug extensions and other Firefox plugins that are tremendously useful:
Pixel Perfect: allows you to add a semi-transparent background image to line up elements on a page (shows up as extra tab within the Firebug plugin).
Code Burner: adds html & css reference tab to firebug.
ColorZilla (plain FireFOX extension): analyzes your colors and helps you manage them.
MeasureIt (plain FireFOX extension): Helps you measure distances between elements on a page when Firebug isn't enough.
WebDeveloper toolbar: does all sorts of nifty stuff, but I only use it to resize the browser to a specific window size (like 800x600).
"
you should use css templates (a list here)
or download an already made layout (everywhere on the net) and change bits with firebug to see what pleases you. (An example)
Edit : i am 'only code' too, i style my web UIs by hand. But there's a lot of addons for firefox that will greatly help you design your layout. (Here's a list)
Related
for one of my customers I've been developing a mailsystem for his clients. His clients have been collecting e-mailaddresses in their stores and want to start using these for mailings once in a while.
I'm aware of all possible things that can go wrong, but as far as I can see we've got it pretty much covered the best way we can. We're using SMTP (Authenticated) to send the e-mails to the customers, e-mails are signed serverside, we're splitting up the mails with a max of 25 per 5 minutes, sending headers to optout location, etc. I can imaging this is just the tip of the iceberg concerning all things I have to take care off.. but I warned my customer that he might be better of using an existing app like MailChimp but he insisted on doing it ourselfs.
After the development of our beta version was done, we've ran some tests and all things went pretty well in fact. Haven't had any spamfolder problems, all mails are good to read in the different clients, and so on.
However, one thing is being a little hard right now.. the editor! We're creating templates for our clients (1 template, 6 styles). Our clients can load these into their editor and edit the text inside. As far as we (and the client) can see, everything goes pretty good, however - the editor does not create e-mail friendly HTML code (I should have known...)
I've searched the net for some articles/how-to's but there's really less to find about this.
Currently we're using CKEditor (Editor) and KCFinder (Image Plugin). As far as I know, CKEditor is the best free WYSIWYG available... but is it any good for e-mail editing?
I noticed some companies use a custom editor (MailChimp) others used TinyMCE (Enormail.eu).
Anyone has a good recommendation? Or is CKeditor the best option, but do I need to modify some of the settings to get the best possible html code for mailings?
Thanks in advance!
I have done a little research about it, because I'm interested in using CKEditor for E-Mail-based editing too.
Generally, CKEditor is the best WYSIWYG web editor, but you have to use some techniques that are not used usually in HTML pages.
Since your'e using templates (I guess CKEdtior's config.templates) most of your optimization will be in your templates, and not no configuration of CKEditor.
These are the main goals:
Don't use the <style> tag - instead, use inline styles (the style attribute). Some webmail readers does not read this tag.
Do not use config.fullPage = true; since some readers does not read the <body> tag.
Instead of using <body>, <div>, and other tags used for layout, use tables. Yes, this technique is old, but by doing this you can make sure that (almost) all readers will render the page correctly. Instead of applying styles to the <body> tag, use these style to the main <table> tag.
Don't use absolute positioning. Tables can also take part in the solution.
For all images - Insert the alt attribute, and for all width and height optimizations, don't use CSS-based width and height. I mean - Instead of <img style="width: 100px;" /> use <img width="100px" />.
In addition, one of the important things, is to customize and optimize output formatting. I personally change at least breakAfterOpen : true inside writer.setRules('p').
CKEditor is the most popular WYSIWYG web-based HTML editor, and I guess there is no other web-based editor for Email.
One more thing that I can think of, is that after your client is finished writing his message, there will be an option for him to preview the message in some popular mail clients. There are many Email testing and preview tools out there, but unfortunately I didn't find anything free.
I really hope that it helped someone!
I have worked for three years on a webmail. I could try tinyMCE, CKEditor or Redactor. None provides a perfect solution. You still encounter problems and you should always add functionalities. Some are too heavy, too slow, lack of features.
The one I found most effective is that of Gmail, but unfortunately, the code is not available.
The best solution is to create your WYSIWYG an even currently.
UPDATE
Try Squire made by FastMail.
Is there an automated tool that I can use to find and possibly resolve CSS conflicts? Preferably it would be either PHP or a command line utility so I can put it into the script that combines and minifies my CSS files. Also acceptable would be a javascript application suited for the task.
If this doesn't exist (I haven't been able to find anything), then why not? It seems like it would be an interesting project, what out-of-the-ordinary challenges would I be facing? Does anyone have any advice or recommendations on where to start?
I have 2 classes left in my CS BS, and I've been coding at work for a few years now so I'm reasonably confident in my ability to make some decent progress on this. Feel free to send me to any resources you think will be helpful.
Thanks for your help!
PS: Also you can suggest features. One driving force in this is my desire to be able to take a CSS file & an HTML file and inline all the CSS into the HTML elements. It's an email thing.
Check out CSSTidy:
CSSTidy is an opensource CSS parser and optimiser...in opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.
Regarding the "email thing" you can use Premailer, it's similar to what you want.
For the best HTML e-mail delivery results, CSS should be inline. This is a huge pain and a simple newsletter becomes un-managable very quickly. This script is our solution.
to resolve css conflicts.. use inspect element on chrome or firebug on firefox.. it displays the css that is being applied on the current element which u select.. You can see the styles being applied, inherited, cancelled by a certain element.
I'm developing my first web application using PHP, MySql, and HTML, but I'm at a roadblock: now I have to start piecing all the pages, modules, and included files into an actual 'application'. I'm really trying to make this an answerable question, and not a discussion topic, but now I'm thinking about 'web design' - and I don't want to have to learn css and all that, because I want to speand my time programming and not designing. So what I'd like is a utility where I can visually design, say a menu bar, and just paste the code into my application where I can work with it. Or I want to format text visually, and paste the css file into my application. I guess what I want to easily design a layout with forms, images and graphics, and have them show up with my dynamic tables. So my question is - is it a good option to go with a big design program like Dreamweaver for this, or is there an easier way? I'm not really even a programmer (can you tell?), and I'm figuring this out as I go. As an aside, I'm pretty pleased with what I've got so far - I think the functions and modules are pretty useful, and the end product (however I get there) will be great. Apologies for the rambling question, and any advice is really appreciated.
In a perfect world, development would happen entirely independently of design and you could focus on only what most interests you.
But that isn't reality.
Learning HTML and CSS will be invaluable if you expect to have any success with this project or your next. And they are not that hard to learn.
My advice? Download Notepad++ (or TextWrangler if you're on a Mac), FireFox, FireBug, and start playing around. Do some tutorials. Force yourself to go through the process.
No reason to avoid learning something.
You should really learn HTML and CSS or alternatively hire a web designer. Code produced by Dreamweaver and similar programs is terrible. Especially if you try to mix it with PHP you'll get problem. Really, at least write the markup yourself, the styling may be done by another person ;)
I think even if you don't want to become a "web designer", it's still worth learning the basics of CSS. Just read through the W3Schools CSS tutorial - that will give you enough to get started, and won't take long.
I wouldn't recommend going the Dreamweaver route - you'll learn a lot more if you code by hand.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am an applications developer for a for-profit college in Virginia. At this point I could code all of what I do in notepad if I wanted to, or had to, but I prefer to use an IDE for speed and organization. As a Mac user, I've used such IDEs as NotePad++, Coda, TextMate, TextEdit, NetBeans, and of course Dreamweaver.
At work my company owns licenses for the Adobe Suite that includes Dreamweaver and I enjoy the code hinting, the grouping of related files, the built-in FTP, the code snippets and custom keyboard actions. I get flack from other developers when I mention that I use Dreamweaver.
Is there a reason why I should NOT be using it...or is it just a case similar to people who think only black and white tattoos are cool and anything else isn't?
The people who object to you using Dreamweaver probably mean the WYSIWYG part which is known to produce tag soup.
By the way, NotePad++, Coda, TextMate and TextEdit are just editors, not IDEs, because they don't integrate build automation or debugging tools out of the box.
The issue most people have with Dreamweaver is that it's a code generator, and code generators are renowned for producing poor-quality HTML. (the main issue with that - other than pride in one one's word - being that it causes cross-browser compatibility issues)
if you take away the code generation aspect, it's a straight fight between any other IDE, and other IDEs are just as good or better.
That said, I haven't used Dreamweaver in a long time so I can't really comment on its current version. Maybe the code generation has improved massively (but I doubt it). Maybe it really is a better IDE than all the rest. In the end, the choice of IDE is a personal one; if you're comfortable in Dreamweaver, then it's a good choice for you.
Any person who gives you flack for your choice of editor is not a true developer. Certain IDEs have certain benefits based on the languages/frameworks they are targeting to speed or ease development pains. If your company bought Adobe, and you like Dreamweaver and code comfortably in it... then keep doing it. Dreamweaver is an outstanding product, and if it does what you need it to do then use it.
None of these developers who give you flack are responsible for your paycheck, so screw them. Use the tool that gets it done. If someone shows you a better one, have no shame in switching. If they don't, keep on keepin' on.
If you like it then use it. It's only up to you which editor to use and to decide is it worth that money.
Obviously we could all do 99% of our coding in notepad, but we choose IDEs for their productivity boosting, code-writing abbilities.
It depends what you are developing in. If you're coding C# and .NET using Dreamweaver would be an odd choice, though you could make it work.
If you're developing client side web stuff in XHTML, JavaScript, and CSS Dreamweaver is a fine choice.
I do like Dreamweaver when I'm building front ends and I want to see what I'm building. When it comes to coding I'd pick another tool. I think NetBeans is great for PHP and I love it how it raises code problems, and HTML issues (especially in regards to accessibility, standards, doctypes). Notepad++ is a godsend! I couldn't develop without it.
One think I always hated with Dreamweaver was the auto JavaScript features (and later SPRY framework) as these appealed to non coders as they provide functionality. What they don't realise is that Dreamweaver will produced bloated, horrible scripts. I once produced a JS/CSS dynamic menu using 2 CSS classes and 11 lines of unobtrusive JS. When getting Dreamweaver to produce something similar using a wizard it produced JS code in my page and a 1200 line JS file.
When I'm writing C# I have to use Visual Studio...
Just something I wanted to get off my chest.
I personally use Eclipse [currently 3.6 Helios], but have worked once on DW and I must say that it is extremely handy when it comes to write HTML or CSS. It is not that useful when it comes to write PHP or other programming languages, but for frontend it is VERY nice.
Funny, I remember a time in pre-Adobe acquisition days when Dreamweaver was considered the serious developer's tool and tools like Front Page were for novices. I agree with others that it may be the code generation aspects that the detractors have in mind. I used them once when I was learning PHP. After seeing the generated code, once was enough. Like you I now use it for it's other features.
If it forces nothing on you (if it lets you edit HTML without adding all kinds of nonsense you're not interested in), and you like using it, I see no reason not to. Especially since you mentioned some interesting features it has that you like to use.
Those "other developers" are probably thinking in black and white, unless Dreamweaver cannot be used as simply a code editor, but I believe it can.
I wouldn't care much about what those other developers think, unless they have compelling arguments. I think you would've mentioned those, if they had any. They're probably also the kind of developer that thinks anything Microsoft or Apple or whatever makes is automatically crap.
I've used it, a few, and quite time ago.
IMHO, the worst feature of Dreamweaver was that the basic layout of almost all HTML web pages was controlled using tables.
If you wanted to write an accesible HTML page (wich was requirement for a bunch of customers) you had to fight against it, and code the divs against its natural tendence to build tables.
Experienced web developers often use plain text editors (with syntax-highlighting) because the richer tools can get in the way as much as they help. However, any tool that lets you control every last character of the code will generally keep any developer happy, and I believe Dreamweaver does allow this via its bidirectional WYSIWYG-code editing mechanism.
Anyone who knows enough about coding to complain about "tag soup" or the spaghetti Javascript Dreamweaver produces should also know how to close the "snippets" toolbox and just use the program for what it's good at.
I personally find Dreamweaver's Live Code to be an excellent tool for debugging jQuery.
We have an ancient application that basically duplicates a file explorer, outlook style application in html (menu and toolbar on top, tree on the left, gridview on the right, and yes I know it is a bad idea to bring desktop UI to the web, but it was 2000 and seemed like a good idea at the time). The main problem (other than the HTML is from ~2000) is that it is an Internet Explorer only application, and due to the horrible html is a nightmare to update.
What is the best set of HTML/CSS/Javascript/PHP libraries to achieve this? I have looked a YUI, MooTools, JQuery, and a bunch of others but none seem to have exactly what I need. I would prefer if I could just use PHP libraries, but good HTML/CSS/Javascript libraries would be fine too. The requirements are:
Menus (Top Menu and Context Menu).
Tree (preferably ajax, lazy loading, we have 5000 nodes in the tree and it takes a while to load now).
Windows and Modal Dialog boxes.
Splitter for the Grid and the TreeView.
Nice to haves
Heirachacal grid.
Tool tips.
Thanks in advance for the suggestions...
Have you checked Qooxdoo or Capuccino? It looks like they might cover the UI necessities that you have for this particular project, given that they are oriented to provide the GUI Desktop goodness to the web; make sure to check their demos.
As for the Server side PHP part, I would certainly try to taylor it to my needs but If I had to choose a framework I would go for Yii, Code Igniter or CakePHP, depending of your scalability needs.
Cheers!
I would suggest looking at ExtJS for this sort of thing. You can then quite easily send data between it and PHP using JSON. The grids and trees are very easy to populate from a URL that will provide JSON.