beginners web design

pgo
pgo
Senior MemberPosts: 12,162 in Web Design
Since these threads pop up almost on a daily basis, I thought I'd post a sticky thread for advice for beginning (and not-so-beginning) web designers. Feel free to post suggested changes and links at liberty and I may add them to these two posts.

Understanding the Web as a Medium

Television is a medium. Print is a medium. Radio is a medium.

The web is also a medium. As an interactive information medium, the beauty of the web is it can do this instantaneously, globally, and to a variety of devices (a.k.a. user agents) like web browsers, iPhones, Nintendo Wiis, as well as assistive technology for the disabled such as screen readers.

Related Reading...
What Makes a Web Page?

There are three standards at work on any given web page.
  1. HTML (Hyper-Text Markup Language)
    HTML is a markup language (it's right in the name). To "mark something up" is to give it semantic and structural meaning. Markup is used to show relationships between items of content and describe that content.

    When writing HTML don't think about "what do I want this to look like" - think about "what does this mean." This is what people mean by "semantics."


  2. CSS (Cascading Style Sheets)
    CSS is a presentational language. It is used to alter the visual (and aural and printed) appearance of a web page. Fonts, colors, borders, padding, margins, layout, positioning - these are all handled by CSS.

    People used to use HTML tables to lay out web pages. This practice is out of date and frowned upon by the professional web development community. CSS was introduced in 1996 to provide web designers a way to make their websites look attractive.

    Due to browser limitations, it wasn't until the first years of the 21st century when we were able to use it more-or-less as it was intended! In other words, there has been no excuse to use a table-based layout for at least 5 years.


  3. DOM (Document Object Model)
    The DOM is a bit more involved and confusing for beginners (and applies to more than just HTML). The DOM provides pathways and hierarchies for scripting languages (JavaScript, usually) to manipulate the structure and content of a document.

    If you can imagine an HTML document as a nested tree, then you have an understanding of the DOM. Don't worry too much about it until you understand the first two.

Related Reading...
«1

Comments

  • pgo
    pgo
    Senior Member Posts: 12,162
    Tips and Best Practices
    1. Always build your websites so that they work in a standards-compliant browser like Firefox first. Then add "hacks" for Microsoft Internet Explorer (your worst enemy as a web designer) using conditional comments. Try to avoid hacks, but if you want to support IE6 and 7 (which, you would be a fool not to) you'll probably need one or two.

      It is standard practice to support CSS rendering in IE6+ only, but your content should be accessible to all browsers even if it's not as pretty.

    2. Do not use HTML tables to lay out web pages. This bad practice has been out of date for half a decade, at least. Semantically, tables are only appropriate for tabular data - that is, data that can and should be displayed in inter-related rows and columns. Calendars are tabular data. Your bank statement contains tabular data.

      Concrete example:
      [html]<table border="0" cellspacing="0" cellpadding="0">
      <caption>Favorites</caption>
      <thead>
      <tr>
      <th>Name</th>
      <th>Favorite Food</th>
      <th>Favorite Color</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td>Sam</td>
      <td>Pizza</td>
      <td>Blue</td>
      </tr>
      <tr>
      <td>Jane</td>
      <td>Olives</td>
      <td>Red</td>
      </tr>
      </tbody>
      </table>[/html]
    3. Use a good code editor and never trust what you see in a WYSIWYG ("What You See Is What You Get") editor.

      • Notepad++ - Free, Open Source - Windows.
      • E - TextEditor - Commercial, Windows.
      • TextMate - Commercial, OSX.
      • PHP Designer Professional - Commercial, Windows (really a PHP IDE, but has excellent client-side code editing capabilities).
      • Aptana Studio - Free, Open Source, Windows, OSX, Linux (Java application, based on Eclipse - Aptana is really an IDE, but it is focused on client-side development).

    4. Most people use CSS floats to create columnar layouts. Alternatively, you could use CSS positioning, but this is generally not necessary and often confusing for beginners. It's a good idea to be aware of float clearing behavior (especially in IE).

    5. Using a "CSS reset" can be extremely helpful. This resets your pages' appearance to a custom default in all major browsers. It gives you a baseline to begin your own styling rules. Personally, I use the Yahoo! Reset CSS, but CSS guru Eric Meyer his own reset CSS.

    Generally Helpful Links
  • th88
    th88
    Registered User Posts: 1
    pgo wrote:
    never use a WYSIWYG ("What You See Is What You Get") editor.

    Although the split code/design view in Dreamweaver is very useful, along with a lot of other things in DW as well (file access, server synching etc.).

    I think what's important here is to emphasise designing from the inside out (that is, create and edit code to change presentation, not the other way round).
  • pgo
    pgo
    Senior Member Posts: 12,162
    th88 wrote:
    Although the split code/design view in Dreamweaver is very useful
    Not really because its rendering (at least in my experience - which is through version 8) is sub-par and not comparable to any browser. It's even worse than IE6! Nobody browses the web using Dreamweaver, so I have to ask - what would be the point?

    Otherwise, you're absolutely right. Dreamweaver is a good piece of software with some nice features.
  • Hunch
    Hunch
    Grumpy old man Posts: 2,346
    True, the rendering isn't entirely accurate, but there's more to it than just a basic preview. Split view's main advantage is that it's very useful for jumping to a particular element quickly when you have code running to hundreds or even thousands of lines.

    Nice post though, and much needed around here.
  • Rik
    Rik
    GlasgowPosts: 12,722
    cheers pee gee ooh

    I have found dreamweaver to be an excellent learning tool. I am slowly weaning myself onto the code view. While it is surprisingly pants, the preview lets me easily see what is happening quickly and really helps with selecting bit of code to tweaky.
  • roto
    roto
    |-/ Posts: 12,958
    Thank fuck someone FINALLY put this together. I shall add a link to it in my sig, too. Very nice, Sir Patrick.

    [edit]done[/edit]

    How about instead of never use a WYSIWYG editor...never trust what you see in a WYSIWYG editor? ;) I agree with Do Gooder that it's convenient for quickly jumping around in code, but tests in a browser are always of utmost importance.
  • pgo
    pgo
    Senior Member Posts: 12,162
    Fine, fine, fine. Changed it to "never trust what you see" instead of "never use".
  • roto
    roto
    |-/ Posts: 12,958
    ...and be careful when you call yourself a web designer:

    There's no such thing as 'Web design'
  • herkalees
    herkalees
    Semantics, yay. Posts: 1,612
    My thoughts on Dreamweaver: Marc Amos: Dreamweaver Works for Me
  • iblastoff
    iblastoff
    gotsa a malanga! Posts: 521
    herkalees wrote:
    My thoughts on Dreamweaver: Marc Amos: Dreamweaver Works for Me

    unrelated to topic but since you're using textpattern, any reason you're not using clean urls? they not work on your server?
  • herkalees
    herkalees
    Semantics, yay. Posts: 1,612
    iblastoff wrote:
    unrelated to topic but since you're using textpattern, any reason you're not using clean urls? they not work on your server?
    I haven't really bothered to look at changing it - my concern for how the URL appears is quite minimal. I'll have a look at changing it soon, though, since it's been suggested to me a few times.

    Yes, back on topic though.
  • pgo
    pgo
    Senior Member Posts: 12,162
    roto wrote:
    ...and be careful when you call yourself a web designer:

    There's no such thing as 'Web design'
    I agree whole-heartedly. This is why I'm moving to start using "Front-End Web Developer". ;)
  • roto
    roto
    |-/ Posts: 12,958
    pgo wrote:
    I agree whole-heartedly. This is why I'm moving to start using "Front-End Web Developer". ;)
    I've always fancied "Digital Construction Worker™". ;)

    But, yes, back on topic for the noobs...
  • brooks
    brooks
    Senior Member Posts: 1,361
    roto wrote:
    I've always fancied "Digital Construction Worker™". ;)
    'Graphic Designosaur' for the win. :lol:
  • brucec
    brucec
    Podcaster on Web Design Posts: 27
    Cool post. The DOM takes a little while getting used to, but once you do, it's very handy!
  • brucec
    brucec
    Podcaster on Web Design Posts: 27
    I never heard of Notepad++, but it looks like it does a lot of good editing.
  • nini
    nini
    incomputable Posts: 846
    excellent link for beginners

    here
  • pgo
    pgo
    Senior Member Posts: 12,162
    Nice one nini. Added above.
  • nini
    nini
    incomputable Posts: 846
    Also I recommend Total Training

    Several years ago I learnt Flash to an intermediate level and After Effects in a couple of days using these videos. They have a great function where you can set talking to double speed, so although the narrator sounds like a chipmunk you can complete in double time.

    Beats Lynda.com any day.
  • Pencil Rebel
    Pencil Rebel
    Mixed Media Web Design Posts: 21
    pgo wrote:
    ...
    Understanding the Web as a Medium

    Television is a medium. Print is a medium. Radio is a medium.

    The web is also a medium. As an information medium, the beauty of the web is it can do this instantaneously, globa...


    Yes, that's true, web is in the medium ring but
    web comparing to tv, print and radio is interactive medium
    and that one is very important information for beginners.
  • pgo
    pgo
    Senior Member Posts: 12,162
    True. I was comparing it to TV, print, and radio more or less to define the term "medium".
  • roto
    roto
    |-/ Posts: 12,958
    Looking for good books on the subject? Here's an oft-updated list that promises NOT to become obsolete.
  • cklosowski
    cklosowski
    Registered User Posts: 11
    I have been using the term "Interactive Designer" when people ask what I do. It explains a littler more in depth than just designing for the web, since the goal is to make an environment that the viewer can interact with and to design it successfully.
  • hotnoob
    hotnoob
    Banned Posts: 17
    Tables arn't exactly for only noobs, u can do quite a bit with them; my site is done completely through tables, why?
    Because they are the most compatible, Firefox, IE6, and Safari all have different results for divs, while tables are all consistent, except for background images, but you just use styles instead rather than the attributes for bg images.

    Yeah, the divs can do cool stuff with style sheets, but it takes too much work to define all of them so that they are compatible with every browser...

    Thats my thoughts; i'm just lazy, and tables let me think creatively :D
  • funkyprem
    funkyprem
    For all your goober needs Posts: 1,823
    hotnoob wrote:
    i'm just lazy
    yes you are
    hotnoob wrote:
    tables let me think creatively :D
    no they dont
  • Hunch
    Hunch
    Grumpy old man Posts: 2,346
    hotnoob wrote:
    tables let me think creatively :D

    Clearly you haven't thought creatively enough to find a better solution.
  • b.
    b.
    mongulated Posts: 3,742
    Hey! I'm new too! I've been teaching myself HTML and CSS for a while now and and I am wondering what to do next. Learning the tags and the properties is one thing, but do you have any suggestions on finding raw data to try out designing? About the only thing I've been able to think of is a myspace page (dislike the site, and they have a hideous implementation of CSS).
  • Sidekick
    Sidekick
    Registered User Posts: 5
    Thank you very much for this thread. It was because of this thread I started poking around and learning about using div's instead of tables. Now things have really gotten interesting!

    There's still so much to learn, and the links you posted here have been a great resource. So yah, thanks!
    ~B
  • pgo
    pgo
    Senior Member Posts: 12,162
    Don't think of it as "divs vs. tables".

    Use the right HTML for the content - semantics - chunk it up with divs when you need to, and use CSS to make it pretty.
  • Sunwukung
    Sunwukung
    Registered User Posts: 58
    I've just started learning html/css and feel relatively comfortable with the basic concepts - so now I'm looking to try and study another discipline related to webdesign. (I need loads more time to be confident with html/css - but I can get by).

    Flash is the most attractive candidate - since being an artist it suits my brainpan (and using art software for years it's pretty intuitive) - but I'm also interested in php for the functionality it would enable me to add to client sites, and also javascript. Of the two latter languages, I'm more inclined to study php for it's practical application in e-commerce -but it's not that pleasant to set up....

    Any recommendations which would be better to study?
  • pgo
    pgo
    Senior Member Posts: 12,162
    JavaScript is really becoming an essential tool. I'm still trying to catch up.

    Although libraries/frameworks like jQuery are making it much easier.
  • Shiro
    Shiro
    &#31038;&#38263; Posts: 15,051
    Flash - make your sites look flashy!
    PHP - make your sites dynamic. Entirely functional, not visual
    Javascript - spice up your sites and add cool functionality. Somewhere in the middle of flashiness and functionality.

    Flash is the most likely to appeal to a design based person, where the other two are more likely to appeal to a programmer type person. So look at those and decide which one(s) look most appealing to you!
  • Sunwukung
    Sunwukung
    Registered User Posts: 58
    To be fair, I don't really have any direct interest in php personally - my personal list of interests would be in this order:

    Flash
    Javascript
    DOM
    .
    .
    .
    .
    PHP

    - but I get the feeling that cart functionality will be a common request, and it's not something I've ever done before so I figured an understanding of PHP would probably be a default requirement for a web privateer.
    Still, thanks for the advice. Think I'll tackle Flash first, then worry about JS/PHP decision.
  • pgo
    pgo
    Senior Member Posts: 12,162
    You're doing front-end stuff - JS/DOM is front-end, PHP is back-end. Does it make more sense to continue to focus on the client side or jump over to the server side?

    DOM also comes before JS. You can't effectively learn JS without learning about the DOM first!

    Plus you need JS to load Flash, so there. :)
  • caroline
    caroline
    LOADING... Posts: 6
    thank you guys,
    this is very useful for a noob beginer like me :mrgreen:
    (its also my first post so hi :)
    so my first noob questions are,
    if dreamweaver's not the best program for webdesign what do you all think is?
    what do you use?
    and what do you recomend for a noob like my self?
    any help or thoughts are massively appreciated :)
  • pgo
    pgo
    Senior Member Posts: 12,162
    caroline wrote:
    if dreamweaver's not the best program for webdesign what do you all think is?
    Dreamweaver's great. In Code View. The Design View and the Split View are utterly useless. It's basically a fancy $400 text editor. There are free text editors that are just fine (Notepad++ is a great place to start on Windows).
    caroline wrote:
    what do you use?
    On Windows (at home), I use PHP Designer, which is loaded with handy features and a deal at $50 or so. On Mac OS X (at work), I use TextMate. It's OK. Not as feature rich. Also not free.
    caroline wrote:
    and what do you recomend for a noob like my self?
    If you're on Windows, just use Notepad++ to start. It's got lots of nice features and is just the right price (free, open-source).
  • caroline
    caroline
    LOADING... Posts: 6
    aha just downloaded notepad++ nice and simple not nearly half as confusing for me as when i first opened up dreamweaver! (not to mention it's free)
    thanks for that its as i said much appreciated :)
  • pgo
    pgo
    Senior Member Posts: 12,162
    From there head over to HTML and CSS Tutorials, References, and Articles | HTML Dog and get your learn on. Start with the HTML Beginner tutorial and work your way through.
  • sukino
    sukino
    Voice in your head Posts: 55
    Do not use HTML tables to lay out web pages.

    Out of curious, since I am guilty of that many times, why not?
  • ravenfire
    ravenfire
    Registered User Posts: 15
    I was a huge table designer before learning css and I'll admit to being like a few here and being very reluctant to give it up. When I first started learning css laying out the design was so much harder than the table format I was used to. But I pushed past it and now that I have a good handle on css I would never want to go back to table layouts.

    I have a question about dreamweaver. I see so many freelance ads that say it is required that the developer knows dreamweaver. I don't know it and have no desire to learn it, I write everything in a regular text editor. Do these people basically just want you to be able to write the code (and dreamweaver is what they've heard of) or do they really want specifically someone who uses dreamweaver?

    As for text editors, I use rapid css and love it. The alphabetical list of tags that accompany css pages is very useful (just find what you need to edit and click). And it also has great syntax highlighting.
  • pgo
    pgo
    Senior Member Posts: 12,162
    ravenfire wrote:
    Do these people basically just want you to be able to write the code (and dreamweaver is what they've heard of) or do they really want specifically someone who uses dreamweaver?
    The only time I've ever worked on a site that "required" Dreamweaver was one driven by a CMS that used .dwt files (Dreamweaver Templates) for its templating engine.

    Go ahead and download the trial, get a feel for it (it really is a nice editor in Code View, but not worth the $400 price tag in my opinion).

    I think a lot of people just put that as a "requirement" because they heard it was the "industry standard" (it isn't...in my experience). If you're really interested in a job that lists that as a requirement, why not pop them an email and find out what's up with that. Or just try to get the job and then don't use Dreamweaver. They don't have to know.
  • ravenfire
    ravenfire
    Registered User Posts: 15
    Thank you pgo, that's what I figured. I'll definitely reply to any interesting ads I come across now, regardless of the dreamweaver requirement. And I'll download the trial and give it a shot. Then I can honestly say that I know it even if I won't be using it for their job lol.
  • Shiro
    Shiro
    &#31038;&#38263; Posts: 15,051
    If you know how to use a code editor, then you can pretty much say you know how to use dreamweaver! Just play around with their ftp functions, and figure out how the 'check in' and 'check out' functions work. Those are the things you may need to know which are specific to dreamweaver.
  • gavalian
    gavalian
    Gavalian Web Design Studi Posts: 14
    if you use mac try Coda, it's very cool soft..
  • deadgood
    deadgood
    kiss ma baaad self Posts: 65
    Thanks for the post Master pgo. All done in a language Graphic Designers can understand !
  • pgo
    pgo
    Senior Member Posts: 12,162
    English? ;)
  • pgo
    pgo
    Senior Member Posts: 12,162
    learning HTML, CSS and some Java.
    First lesson, it's JavaScript - not Java. They're two completely different, unrelated languages! ;)
  • Shiro
    Shiro
    &#31038;&#38263; Posts: 15,051
    It's a very very powerful language. I quite like it myself.
  • Rexibit
    Rexibit
    Web Developer Posts: 138
    sukino wrote:
    Out of curious, since I am guilty of that many times, why not?

    This thread does have some very good tips. One thing to note is that if you want your web page's data to be used in more than one place--a phone's browsers, gaming console browser's, or even another page on your site--then you need to format your pages solely with DIV tags and CSS.

    You can get the same behavior as a table using CSS styling.
  • JonnyP100
    JonnyP100
    Registered User Posts: 4
    Has anyone seen the opera web curriculum? opera dot com slash wsc (I would link you direct but my post count appears to be insufficient..)

    It's not complete, but looks like it'll be an awesome resource when its finished. All standards based too.
  • KJW
    KJW
    Senior Member Posts: 889
    Found another good link focusing on XHTML for beginners:

    The Elements of Meaningful XHTML
  • wheedwacker
    wheedwacker
    competitionmaster 2.0 Posts: 1,475
    Here is a good intro to web design (not front-end dev, but design)

    Designer Eye for the Geek Guy/Gal

    and the slides:
    http://acko.net/files/Design%20Eye%20for%20the%20Geek%20Guy-Gal%20-%2022%20March%202007.pdf
  • the_b1ues
    the_b1ues
    Registered User Posts: 10
    help me

    Hello im new here and i just needed a bit of help.
    First id like to say ive done a corse in web design through Ics which ill admit was a shit corse and ive had to work most of it out for myself, there is just to final things that i just cant seem to get my head around. Sorry before hand for long post.

    Firstly slices. Ive been designing the webpages in photoshop first (dont no if this is the prober way so correct me if im wrong). Then saveing the doc as a webpage and opening it for editing in dreamweaver.
    Anyway when ive made the page ive been told in my corese and on tutorials that anything that I will be editing such as link areas,headers,area of text, ive been told to make a slice. But when ive done this i end up with loads of auto slices that i cant get rid of. Because of this by the time ive finished makeing my page I end of with a image folder just filled with images that are just parts of the background or pointless white space. How do i stop this??

    Secondly. How do you designers get your pictures onto the web. I upload all of mine onto photobucket and then replace all the code. I dont think this is the correct way.

    Thanks for reading any help would be exelent.
  • feha
    feha
    Design Destroyer Posts: 182
    ravenfire wrote:
    I have a question about dreamweaver. I see so many freelance ads that say it is required that the developer knows dreamweaver.
    I think they require that cause of they are using it in their web design services, so they can update or customize the work if needed after your delivery to them.
    More easy for them to keep it a website project in one place, any other DW user can do modifications.

    I do own a CS3 Web Creative Suite (standard) from Adobe. For my own designing I don't use DW but if someone sends a DW "project" than I can modify it and send back.

    just my 2 cents
  • pgo
    pgo
    Senior Member Posts: 12,162
    the_b1ues wrote:
    ...
    I hope you didn't pay for your course because it was completely worthless and did you more harm than good. It set you on the wrong path for learning how to build web pages. Nobody does slicing and saving for web in Photoshop - it was always amateurish and now it's unconscionable. That's not how web pages are built and nobody who knows anything about the web would hire someone who worked that way.

    Read through the thread. Learn XHTML and CSS, cut out only the images you need to create your web pages and replicate what you can in code. Upload via FTP.
  • jcorradino
    jcorradino
    I like turtles Posts: 606
    the_b1ues wrote:
    Hello im new here and i just needed a bit of help.
    Although photoshop is a really good tool in the designing of a website, it is a really bad tool for anything else. (EDIT: when it comes to web design, I mean... lol)

    What you should be doing is designing the page using photoshop, save the slices that you actually need (small selections for any background that is not a solid color, logos, and other misc. pictures), and then use a editing program to finish the job. I have never tried using photoshop to create a website in this manner, but I would have to guess that it would be horribly inefficient and slow-loading. If it saves every image, then it is truly doing you a disservice, as visitors will not sit there and wait for your website to load.

    I use photoshop on the initial design, select the bits of design that I cannot replicate using either XHTML or CSS using slices, save them as either a .png or a .jpg (depending on transparency needs), and then finish using textmate (a Mac code editing program similar to notepad++, but better :-P ).

    Dreamweaver is a crutch that produces (in my experience) rather bad code, it hardly ever is browser cross-compatible, rarely validates, and almost always is completely unreadable. Do yourself a favor, and start learning XHTML as soon as possible. Check out w3schools.com, it is a very good resource.

    Jason Corradino
    JasonCorradino.com
  • modern-designer
    modern-designer
    Webmonkey Posts: 1
    Good post. It's good to see people promoting CSS & Semantic webdesign. It's also worth pointing out that usability is a big consideration - see how other successful websites function and learn from it. Also take into account accessability, make sure your pages work in all browsers and on all platforms and that the navigation is useable even with just a text browser.

    Learn a bit about SEO too, a large portion of good SEO relates entirely to your page, it's content and the way it's laid out. This should be built in from the start.

    Ed
  • INXS
    INXS
    Soy Chingon! Posts: 595
    Good stuff pgo. Id just like to add a few more resources for newbies to html/css designs.

    Browsershots
    Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

    /* Position Is Everything */
    Describes and demonstrates some of the bugs found in web browsers, and to show advanced CSS methods that work across all browsers.

    Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design
    A personal online journal source for topics ranging from XHTML/CSS to graphic design tips.

    COLOURlovers :: Color Trends + Palettes
    COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

    CSS Standards & Positioning
    In this guide we'll learn about how to position elements using CSS, and clear away a lot of the fog that surrounds the idea of a layer.

    CSS Zen Garden: The Beauty in CSS Design
    CSS demonstrations of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

    CSS Max Designs: CSS resources and tutorials for web designers and web developers
    Step by step tutorials on using CSS to create background image lists, rollover lists, nested lists and horizontal lists.

    Web Developer's Handbook | CSS, Web Development, Color Tools, SEO, Usability etc.

    The 960 Grid System
    The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

    Set My Browser Size
    A nifty online tool for setting your browser size while doing Web design

    Lorem Ipsum Generator
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    Nifty Corners
    Tutorials on creating rounded corners without images.



    Dreamweaver, isnt hard at all to use. Ive been using Dreamweaver MX2004 since its debut and its productive enough to help you view sites in all types of browsers. CSS is just as easy once you've been able to understand positioning and so forth. I hope the sites help out those whom could use it.
  • penguin104
    penguin104
    Registered User Posts: 30
    great thread...thanks!

    INXS- i wish i knew about testing in different browsers before i finished my last website- just a simple one but i ended up having to re design 2 pages after realising that it looked completely different in each browser!
  • INXS
    INXS
    Soy Chingon! Posts: 595
    Its very helpfull. The only downside is, you wont be sure what it will look like on a small screen, say 15 inch, but most browsers today are on 17+ inch screens and with resolution settings maxed out.
  • modfather
    modfather
    Registered User Posts: 1
    Tables....Divs....Tables

    Christ, I'm completely new to this..
    I'm a CD and I want to get up to speed on mastering Dreamweaver. Some say tables, some say divs. Are there any good visual tutorials that help get you up to speed? Is ask Lynda top?
  • Shiro
    Shiro
    &#31038;&#38263; Posts: 15,051
    First, skip dreamweaver, or at the very least, skip the design view on dreamweaver. It will give you tables and other crappy code. Much better to learn to code yourself.
    Second, skip tables!
    Third - the first CSS I learned was from a course on lynda.com, and it was a great way to step into CSS. I understood how it all fit together at that point, after that it was just a matter of learning how to make it work for me. Which wasn't easy to say the least, but better than starting with no knowledge at all.
  • ibelieveinfairi
    ibelieveinfairi
    Senior Member Posts: 369
    I'm just wondering...

    I come from the design end of websites and am trying to learn how to develop them. From this side of it I find the design view in Dreamweaver to be extremely helpful since I cant look at code and picture what it will look like.

    I also only use tables so far to develop a website and everyone keeps saying not to use them but no one has really said why... they are easy and work for me and the website turns out exactly how I want it.

    Is there something I'm missing like tables make a website take too long for users to download or something? Or they don't come up on the same on different browsers?
  • INXS
    INXS
    Soy Chingon! Posts: 595
  • teapoted
    teapoted
    ~ Posts: 7,089
    Are there any books for absolute beginners? as I really don't know where to start from? do i look at html first before moving onto CSS?

    How much would a graphic designer need to know? As alot of jobs i've seen advertised are asking for dreamweaver knowledge etc.

    Yes there are books for absolute beginners, but I would suggest learning the basics online, as you never know what you will think after a couple of weeks of practice.

    The more you know about html/css the less dreamweaver "knowledge" you need.

    A graphic designer doesn't need any web design knowledge, unless you want to do web work.

    I would suggest you go to W3Schools Online Web Tutorials, they have really easy tutorials. Go through the basic web knowledge one, the html one, then css, then the xhtml one.
  • KJW
    KJW
    Senior Member Posts: 889
    This Should clear a few things up....

    Web Design+ — Tips and advice on web standards development
  • Hoss
    Hoss
    Version 3.3 Posts: 4
    I think this is a great tip for beginners:

    Always build your websites so that they work in a standards-compliant browser like Firefox first. Then add "hacks" for Microsoft Internet Explorer (your worst enemy as a web designer) using conditional comments. Try to avoid hacks, but if you want to support IE6 and 7 (which, you would be a fool not to) you'll probably need one or two.

    It is important to design for standards-compliant first. Reference W3C.org alot as well!

    Jason Hostuttler
  • HisforHelvetica
    HisforHelvetica
    Design Junkie Posts: 195
    Definable a good post to have out there, there is surprisingly a lot of people out there who still use tables for everything, until a couple years ago I was among them and since turning to divs, I have found my sites not only more practical, but easier to manage.

    One big factor that a lot of (new) designers can take for granted is screen resolution. Particularly with WYSIWYG editors, you have to remember that just because it looks good on your screen doesn't mean it will look like that on everyone else's. From my own Google analytics I have visitors with anything from 320x396 to 1920x1200 and your site is going to look different on each an every one.

    Lastly, before you put your site live, while it's up in beta, try out an awesome resource browsershots.org, it shows you a screenshot of any chosen page in a list of almost 100 browsers si it's great for working out kinks and browser issues. Hope it helps!
  • Mandy Moo
    Mandy Moo
    Graphic Developer Posts: 2,074
    If I was to buy one beginners book to start with, should i buy...

    HTML for the World Wide Web: with XHTML and CSS by Elizabeth Castro
    or
    HTML Dog:The Best-Practice Guide to XHTML and CSS by Patrick Griffiths

    Is the HTML Dog basically what's on the website? Or is there more to it? I want a book because I'm sick of flicking in between windows.
  • raredesign
    raredesign
    Registered User Posts: 5
    usacompany wrote:
    as of now majority of people are becoming inclined towards <div> element.
    can u tell us the advantages of using <div> element.

    If done correctly, it will keep things light and modular, in which case, the intent is to separate presentation from markup, so that there is less garbage for the crawlers and browser to sift through before hitting the content.
    Of course you can apply a class from a stylesheet to a table, but you still have nesting occuring which degrades the crawler collection.
    Ultimately, there is more control with divs, as well as it being more direct to the purpose...displaying the content without all the nestings.
  • scrooble
    scrooble
    One Pint or Two Love Posts: 6,562
    Do I need a footer if my content doesn't fall below the fold?
  • vbui
    vbui
    Pixel Pusher. Posts: 25
    Footers are not just for menu navigation anymore because your site falls below a certain line before you have to scroll. Nowadays, footers are used for not only mapping your site and directing visitors around but also to include things like quick contact information, recent blog posts, latest tweets, newsletter sign up and many more things like that. Footers give you an extra chance to be creative too so just take a stab at it.
  • DKuntz2
    DKuntz2
    umlaut forever! Posts: 1,870
    I know why I said was vague, but it really is dependent on what you want. If you're just doing the footer for nav, than it might not be needed, if you're using it for a copyright notice, or other notice, than it should be.
  • purple_flower
    purple_flower
    webdesigner Posts: 17
    Notepad++ works very good as an html/css/javascript/php etc. editor. You can enable code recognition for a lot of programming and scripting languages.
  • Bobus
    Bobus
    Registered User Posts: 1
    Is Dreamweaver not used as a standard by web designers then?
  • Shiro
    Shiro
    &#31038;&#38263; Posts: 15,051
    Yes and no.

    Dreamweaver is two things - a code editor, and a WYSIWYG (what you see is what you get) editor. The WYSIWYG editor writes code for you - basically drag and drop. The problem is, the code it writes is garbage, and is rarely cross-browser compatible.

    So a real pro won't bother with the design view (the WYSIWYG), but many designers will do hand coding in the code view. The code view is where you hand type all the code. This sounds like it should be more difficult, and in some ways it is, but you get much, much more control over your pages, as well as cleaner code that is more cross-browser friendly, and will be easier for the browser to load.

    That being said, there are a lot of garbage designers and garbage agencies out there that use the design view to build their sites. But overall they bring down the standard of the industry as a whole.
  • nimmysnv
    nimmysnv
    Registered User Posts: 32
    brucec wrote:
    I never heard of Notepad++, but it looks like it does a lot of good editing.


    Hi,

    Notepad++ is a good free source code editor and it is based on powerful editing component scintilla, Notepad ++ is written in C++ and uses win32 API and STL which gives higher exexcution speed.

    Thanks!!:-|
  • Ramzi
    Ramzi
    Registered User Posts: 62
    great topic! a lot of useful websites.

    The Web Developer Toolbar plugin for firefox also is a great tool. It allows you to validate your own CSS and HTML. But it also has a lot of handy features to check how your own and other websites are built. Disable CSS, edit CSS, Display DIV order, Outline positioned elements...
  • Ramzi
    Ramzi
    Registered User Posts: 62
    i just found this insanely handy tool to make your menu's. holy shit! this makes things a lot easier. probably gonna use this.

    CSS Menu Generator

    any thoughts on this?
  • ruffy
    ruffy
    Registered User Posts: 49
    Web Design Theory

    Great articles on web design theory:
    Web Design Theory | Webdesigntuts+
  • DKuntz2
    DKuntz2
    umlaut forever! Posts: 1,870
  • abirduphigh
    abirduphigh
    Registered User Posts: 7
    DKuntz2 wrote:
    NO W3SCHOOLS!

    W3Fools – A W3Schools Intervention

    Holy smokes, thank you DK.

    I've been working with visual media for a long time and within the last few years have been attempting to learn how to integrate my visual concepts into websites, coding and all. As most newbies probably do, I've found myself relying on w3schools for a reference to almost anything I'd need to know about basic html and css language. But I do not condone anything that detracts from the natural evolution of superior design.

    I've bookmarked the links on this site (which I am hopeful is credible) and will probably never visit w3schools again. Thank you for your help!
  • LizLen
    LizLen
    Registered User Posts: 3
    Klang wrote:
    Your code is an absolute mess, that is why it is all over the shop. Think you should learn how to code a site before trying to build one.

    Well, if you're talking about my site,this is the first time I've ever come on this forum to get some help, and this sort of blunt criticism without any direction really doesn't help me or anyone else who's looking for assistance. This is the first reply I've had to one of two posts, and not even a "Welcome". Thanks Klang ("Klang!" indeed hmmm).

    I've explained I'm brand new at this, an absolute newbie who only done one website from Dreamweaver and I don't know code, and I also asked if anyone knows the best way to learn better, including a good course to learn code. I also explained elsewhere there are literally dozens of courses thrown at me purporting to explain code and teach it, all for a lot of money, so I was asking for advice from those of you know better what's the best way to learn it, which courses to take, and which not to trust (the paid ones).

    Anyway, I made the site using Dreamweaver, and why the code is an absolute mess I don't know, as I didn't play around with it, it was just WYSIWYG and that's how it turned out - from Dreamweaver.

    I know you know a lot, and I look up to that & respect it, which is why I'm asking for real help, not just to be put in the stocks over how bad my website is for the first try.

    Tell me how to go about what you are saying in the best way, and please be nice.
  • TommyDesign
    TommyDesign
    Registered User Posts: 42
    Im finding these very useful for working on layouts:

    Web Design Theory | Webdesigntuts+

    they follow on from each other.
  • Dan_Dan249
    Dan_Dan249
    Massive member Posts: 879
    Cheap pay for site. If your a student (like me) its just $9 a month rolling subscription.

    It give you great videos and sets you gives and lets you earn badges as you go along. I've learnt alot from it so far. It covers web design and development.

    Learn Web Design, Web Development, and iOS Development - Treehouse
  • Limbo
    Limbo
    Established Norm Posts: 27,380
  • teapoted
    teapoted
    ~ Posts: 7,089
    Learn Web Design, Web Development, and iOS Development - Treehouse
    From my experience on it (got a free membership), it is far too basic.
    A Beginners Guide to HTML & CSS
    Looks quite solid from a quick glance. I don't know how much a complete beginner would get out of it though as it's pretty unstructured and doesn't really go in depth into anything.
  • Dan_Dan249
    Dan_Dan249
    Massive member Posts: 879
    teapoted wrote:
    From my experience on it (got a free membership),
    Yes I know, you pointed out that their homepage(?) font was too light and so they gave you a free months membership, I saw your post in the fuck on(I believe?) thread and so decided to check them out. I liked what I saw and so signed up on their student package.
    teapoted wrote:
    it is far too basic.

    That's precisely why I rate them matey and thought their website would be good to share in this thread. After watching a few videos, unlocking some badges etc I realised this was the sort of thing my 13 year old nephew would appreciate so I signed him up too. But whilst you use the term 'basic' I'd use the phrase 'easy to follow, good for absolute beginners'.

    Now we just need to make these sorts of websites for ourselves, then have this discussion here thereby promoting our own bloody services instead of inadvertently upselling theirs. :)

    Although for anyone else reading this who is a complete newbie, as I mentioned, I would recommend their services.
  • steveb
    steveb
    BitterHusk Original™ Järvenpää FinlandPosts: 24,094
    And here is a link to the site that was pasted from Beginner’s Guide to Responsive Web Design | Think Vitamin
  • Maerk
    Maerk
    Doodler. ManchesterPosts: 3,434
    The role of designer does seem to endlessly be eroded by folks deciding our job is that of chief colourer-in.
  • simplebhe
    simplebhe
    Registered User Posts: 2
    I have found dreamweaver to be an excellent learning tool. I am slowly weaning myself onto the code view. While it is surprisingly pants, the preview lets me easily see what is happening quickly and really helps with selecting bit of code to tweaky.
  • drik
    drik
    techno drik Posts: 3,152
  • AdamJhon
    AdamJhon
    Graphic Designer Posts: 43
    Pgo, your beginners' web design guide is excellent and very helping to those who want to learn basic design techniques.
  • david_warner
    david_warner
    Registered User Posts: 5
    A piece of advice for web designers

    Notepad++ is a simple program but it is very effective in the world of web designing. You can write CSS codes also in it. Before designing the web page know the various components and layouts of web designs and fuse creativity in every component
  • emmajones
    emmajones
    Web Designer Posts: 2
    i really like your thread..reminds me the basics of web design. The order is perfect for understanding.
  • roto
    roto
    |-/ Posts: 12,958
    Responsive Design Is The Smarter Option

    Google's Matt Cutts: Responsive Design Won't Hurt Your SEO
Sign In or Register to comment.
© Copyright 2003 - 2016 - DT by Kooc Media