Web Design Basics/Fundamentals

[Dean_Grobler]

Hi there,

I have no prior website design experience and I'm taking up in re-designing a family business site. I do have knowledge in Java, HTML and CSS, but I don't have the knowledge of what "standards" a site should adhere to (if any). As in, what should a home page normally contain, the contact us page. What layouts are best for my site etc.

What I basically need, is a website or online/free book that is something like "web design for dummies". Where must I start in this project that I'm taking on?

Thanks!

[Kraai]

Hallo (Or in English Hello) Dean

Do you want to start off with the basic coding of a template, or do you know how to do that, but need more info on what the look and feel must be? Actually, if you are completely lost and not in a mood to "design" anything from scratch, I can help you with a basic tool that let you publish a prof looking site in 4 or 5 steps. This tool is for lazy's and dummies.

If you want to code and start from the beginning, I recommend you get a picture in your mind of what the site must look like, then do a basic layout of it on paper, and start building your template like that, coding it with css and html, and if you want dynamic website, also bring in php and java etc.

Edit: Oh and I think your best online school is here: http://www.w3schools.com/

[Kraai]

I see that the poster above me here copy paragraphs from other web pages as their own words, and not linking to the original text. This is just not good enough, as that whole post make no sense if the link to the how-to's was omitted.

http://webdesign.about.com/od/webdesignbasics/u/webdesignbasics.htm

[staciejortega]

sorry i forgot the source :)

[Dean_Grobler]

Hey @Kraai,

Thanks for your reply! Basically I do have the basic layout covered. I was thinking of getting DreamWeaver to help me with this project. Since minimal coding is needed using DreamWeaver, I assume one mostly uses the drag-and-drop function?

What tool is this that you are talking about? That sounds like a real time saver!

Other than the basic layout and all that. What other elements must a site have, here I'm talking about the 'copy right' in the footer of the page etc... Just the things that makes a site look more proffesional?

[Kraai]

What I basically need, is a website or online/free book that is something like "web design for dummies". Where must I start in this project that I'm taking on?

Thanks!

Dagsê Dean

And you want to try out dreamweaver? Remember, it is not free.

I will pm you about the tool I am talking about where you can try out a online demo, I do not want to promote my products here on Daniweb, as it is morally not correct thing to do.

Basically, a site will have a header section, where you will display your site name/logo and menu elements, a main content area below the header, where your content will come, and a footer area, where your copyright and credits will come. You may also decide to have a sidebar area left or right side of the main content area, or both sides, and put your menu elemts there, or put other content like advertising, photo's and curious triggers.

The main thing, when you create a site, is to have it as simple to navigate as possible, and have a quick page load time, and unique and quality content.

[edith135]

hi

I think www.w3schools.com is best solved your problem and you more learn about webdesign.

[dornaled]

hi
me agree with .....Kraai......... His suggest is well and your problem solved easy.

[staciejortega]

im a w3schoolers, tizag(tizag.com) also best in web designing tutorials

hope it helps :)

[staciejortega]

i also agree with Kraai.. you can try to use dreamweaver..
Dreamweaver is a very nice tools, its easy to navigate and use.

[Fortinbra]

My favorite HTML and CSS tool is NotePad, yes, I'm talking about the built in text editor for Windows. The more complex your site gets, the easier it gets to get lost in code, or to loose track of what's going on where, and most of the complexity for small websites is irrelevant, and unnecessary. Using notepad forces you to keep your own markup condensed and easy for you to follow, and also keeps the interface simple and strait forward.

I learned how to code in NotePad, but I now use Visual Studio (Visual Web Developer) in the Source view or in split view. I do this only because it makes things faster, and I can see my changes as I make them. However VS is a microsoft product, and is quite expensive, more so than Dreamweaver. I strongly recommend against using drag and drop markup items.

[staciejortega]

yes. as a fundamentals, you can use the drag and drop markup items :)

[Daave]

Web design has always been my topic of interest and I always try to learn more about it from different sources. I always suggest to use Dream-weaver as it is more reliable and easy to understand at the same time.

[zipster1967]

If you really want to learn how to build websites then in addition to www.w3schools.com You might take a look at CoffeeCup softwares HTML editor. It gives you the ability to see the reults of your code in it's own preview panel and givers you many convenient tools for the biginner web designer. If your just interested in bui8lding the one website I recommend implimenting a CMS like Mambo or Joombla either lets you use a template of your choice from many free templates out on the net and update your website quite easily. Mambo takes some getting used to but once you learn how to manipulate the components it is easy to maintain a website without major recoding. Hope this helps.

[staciejortega]

Web design has always been my topic of interest and I always try to learn more about it from different sources. I always suggest to use Dream-weaver as it is more reliable and easy to understand at the same time.

me also using Dreamweaver.. its easy to navigate, and suits for newbies

[Fortinbra]

Call me old school, but I think that tools like Dreamweaver, or Visual Web Developer, are not at all good for beginning web professionals. I believe they make things faster for experienced professionals to get done, Rapid Application Development(RAD). If you start out learning what to do while learning the IDE, when the IDE updates or the language changes, you'll be floundering for a while attempting to get caught up. If you know the technology to start with, using the most basic tools you can, when you use a more advanced tool, you can take your time to learn the new tool.

Using a plain text editor such as Notepad, Vi or Vim, all you have are your notes and resources to help you. You're more dependent on yourself and less on your tool. Which in turn makes the number of job possibilities out there more numerous.

[Joebhoy Designs]

Personally i use adobe golive as it is based on layers and grids not tables like dreamweaver and less restrictive. Most websites are now built using css. If you want a website to look at for an idea of layout and the coding behind it then www.kmf.joebhoy-designs.co.uk is one i am working on at the minute. your welcome to look at the source code

[Lenin Orkins]

You can go through this site http://www.w3schools.com/. Its really very helpful for the beginners.

[Alish735]

First of all you should have a complete knowledge of bussiness and its related logos and templates and just study and try to do from w3schools.com .Here you can take much information that how to develop a site.

[ziron]

Hi there,

I have no prior website design experience and I'm taking up in re-designing a family business site. I do have knowledge in Java, HTML and CSS, but I don't have the knowledge of what "standards" a site should adhere to (if any). As in, what should a home page normally contain, the contact us page. What layouts are best for my site etc.

What I basically need, is a website or online/free book that is something like "web design for dummies". Where must I start in this project that I'm taking on?

Thanks!

I Dean, I have heard good feedback about Joomla which is meant to be open-sourse with heaps of templates!

Cheers
Dean Brennan

[mrcodealot]

I also agree with Kraai and staceijortega, you can use check out www.w3schools.com and use dreamweaver. If you don't feel like coding every single page, I suggest you use a content management system.

[sunnychakes]

w3schools could be the best place in internet from where you can get the basic ideas of designing a website and learn a lot! But at the same time visit as many websites as possible for you to see how they've designed home page, contact us page etc. See how they designed the templates, their navigation, linking structures, buttons etc. Before going to start designing it's better for you to use your exercise book and draw a layout that you want to create for your site. Then go accordingly step by step!

[Fortinbra]

My complete web toolbox from when I was learning consisted of a Crayola Masterworks set, a sketch pad, and Notepad on my old dell laptop.

That was a few years ago though. Since then I've gotten better laptops, and changed software. I moved up to a MacBook(that I still have a use), and Dreamweaver. I then started down the path of web development as opposed to design, and moved to Visual Studio and ASP.NET.

Now my toolbox is a work issued Dell (2.4GHz quad-core i5, 4GB ram), the same Crayola Masterworks kit, and a stack of printer paper. My sketch pad contains website mach-ups for friends that may not be the best for a work environment.

Long story short, and I've said this before in prior postings, but agreeing with sunnychakes, drawing out what you want to do is paramount to getting things done quickly, efficiently, and easily. It's faster and easier to resketch a prototype than to try to rewrite it several times. Especially if it's sweeping changes.

If you can afford it, clear plastic sheets work awesome for helping sketch layers.

[RenuC]

Dreamweaver is a great web designing tool. It's easy to use, manage and upload. It's also customizable.

The best online tutorial for web designing basics is www.w3schools.com.

[zipster1967]

If your goal is to just create one site then your going to be better off using one of the many online website setup functions than to go out and purchase Dreamweaver. If your looking to learn web design just for the heck of it then what you want is a good HTML editor. There are a number of them out there and many of them are free or free to try. I like CoffeeCup only because it's cheap and function pretty well. But there are many other choices. If you really want to learn web design stay away from most of your WYSIWYG editors out there because they don't teach you anything about web design. As a matter of fact most of them add tons of excess garbage that can actually slow down how fast a page loads. A good webpage can be very dynamic and still load before the user gets tired of waiting and goes on to another page. So your path really depends on your goal. (You will have a hard time getting directions if you can;t tell people where you are going right?)

[Fortinbra]

WYSIWYG editors are good for the initial design ONLY AFTER you already know what your doing in HTML so that you can go in and remove all of the bloat markup the WYSIWYG editor put in it. It most cases though, it's not worth the time or effort to do it this way. I wish there was a more WYMIWYS editors. What you mean is what you see, for semantic based markup.

[matricol]

there are no rules no path just do the job the best and simple you can

[rotten69]

I think w3schools.com is your source of the language you're using. And also, webdesign.about.com could be helpful.

[stbuchok]

ok, what is the time line. You can get all the advice you want about what to use, but when do you need to have this done by, because if it's next week or even in a month, you might want to hire someone. If however, you have all the time you want, pick up books on HTML, CSS and Javascript to start with, read them and do the examples. Dreamweaver is a tool for people who don't want to learn and are lazy (sorry, I know I just offended a bunch of people). Don't get me wrong, it's not a terrible tool, but if you really want to understand what you are doing, Dreamweaver is not the way to go.

[shiva07]

You have no need to panic you can use templates that are available on the net or if you want to design then you can take the help of photoshop and flash.