Web Design 101
|
|
Text and Artwork:
|
There is something exciting, and downright fun, about putting together a web page or website and watching it come to life on your browser. But if you are a novice at web creation, how do you begin?
Well, there are several aspects to learning about web design. And the first thing to learn is that you don't have to pay anyone else to do it for you! But what are those aspects of web design? First, you must determine why you are building a website and what it is you want it to do. (Read the article "Focus".) Second, do some pencil-and-paper sketches of what you want your site to look like, keeping in mind its purpose. Think about how this will translate onto a screen...then, do several more, and different, versions. Third, go surfing. Check out other websites, in related subjects but also in unrelated subjects. Note their graphical design, their navigation tools, any bells and whistles, etc. Note your reactions to these sites. Some may feel claustrophobic, some may be hard to read, some may really tickle your fancy. (Tip: If you find a page you really love, you can see how they coded it by selecting your brower's "View", then "Source" from its menu. This will pop up the page's coding in a NotePad document [assuming your OS is Windows]. You may, however, not be able to get the code for style sheets or programs embedded in the page, such as flash, asp, etc.) Okay...now it's time to put these 'idea' foundations to work. Fourth, take your various sketched ideas and evaluate them against the things you noticed while you were surfing...including both the things you found you disliked as well as those you liked. Let things percolate in your head for awhile. Fifth, now it is time to begin focusing your graphical design ideas. Keep in mind the overall focus you have determined for your site. Will the graphic layout add or detract from the overall reason for your site? Refine and redraw your pencil-and-paper ideas. Remember to think like an artist (visual appeal), but also like a reader (legibility & understandability). Once you have a developed idea of what you want on your website, it is time to develop the skills and gather the tools necessary to bring it into fruition. But what are these skills and tools? Well, there are several broad areas to this. First, there are the basic layout coding languages & tools themselves. Second, there are the html editors, which are those programs which help you to write and set the codes. Third, there are the browsers that read the coding and translate it onto the computer screen. Coding Building Blocks There are several coding languages & tools for the web designer, most of which have acronyms for names. Here is a brief listing of the basics:
HTML Editors Learning to code basic html is not hard, and it allows you to explore a whole new world with those creative juices of yours! Both Alex and I recommend learning to do your own hand coding, since it allows you much more accuracy and control over how various browsers will translate your web pages.
For example, the first website I built was on Homestead.com. I used their own html editor which allowed for "drop-and-drag" site design. How proud I was of the visual layout I put together! Ooooh, how little I then realized!....People would write me, telling me that they couldn't see paintings, that boxes of color overlapped articles, that entire sections of text were missing. What a disaster!!....and it was all because Homestead's editor's coding was browser specific. Anyone with a different browser, or even a different version of the same browser saw a jumble, not my carefully placed "drop-and-drag" elements. And so I humbly offer my recommendation: Hand Coding Rules! Although you don't actually need an html editor to write html code, it is a big help. Html editors show your coding in various colors, so you can quickly identify and find image codes, tables, anchors, and so on. In addition, they'll turn the text into funny colors if you are missing an important closure on, say, an anchor. (Suddenly the entire text below the omission turns green!) Another huge plus is that editors allow you to preview your page before uploading it to your server. That way, all the diddles and daddles, the broken coding, the spelling errors, the half-way completed page, don't have to be on view for the whole world to see! LOL But as I was saying, you don't actually need an editor just to write straight coding. For example, sometimes I use NotePad (part of Windows) to write out text while at the same time also writing in it's layout (paragraphs, breaks and such). Then I copy and paste it into my editor; it saves me time since I can see the text of the article better using a word processing document...my editor has no automatic return *grin*. But even so, most times I do the vast majority of work on a page directly in the editor. That way it can be previewed with each change...and since I preview as a way to sometimes find out if the coding is doing what I want or to see if I'm getting the visual effect I'm looking for, I use the preview A LOT! As you first get started, you will almost certainly want to find an html editor program that you can use to code and view your coding results. There are any number of html editing programs available. The one thing you want to avoid is an editor that is limited to 'drop-n-drag' or WYSIWYG ( pronounced 'wiz-ee-wig'). The acronym stands for What You See Is What You Get. And this means that even though it may seem fast and easy, you are very limited in your design potential...and I mean that in a visual sense as well as in a coding sense. You can find free and demo versions of html editors from several websites. Check out sites like Jumbo.com and ZDnet.com. You may also look for and find other offers through asking your favorite search engine for "free html editor". Browsers Browsers are those programs which you use to view the web. By way and far the two most popular browsers are Internet Explorer (approx. 70%) and Netscape Navigator (approx. 30%). Then there are a scattering of other browsers, such as BeOS and Opera. I'll be talking about IE and Navigator. If you remember, above I mentioned that hand coding allowed you better control over a browser's translation of your page. This is an issue because the different browsers read the coding differently. For example, if you are using absolute positioning to place something on your web page, IE will 'see' it 10 pixels off from where Navigator 'sees' it....because of where each browser starts the page. They also read tables and style sheets differently....one of them reads 'details to big picture' and the other reads 'big picture to details'. Like in algebra, whether the minus sign is inside or outside the parenthesis makes a huge difference in the final result! IE is much easier to code for...but if you really want to know how good you are at coding, Alex says code for and preview your web pages in Navigator. Since it's the fussiest, it also makes you be careful to code completely and correctly. (No missing 'end-TABLE' stuff! LOL) Personally, both Alex and I use both browsers while building web pages...that way there are no surprises for our viewers when the page hits the web, but many coders, esp. beginners, code strictly for the browser that they personally use. It's just less complicated! *whew* It is easy enough to keep two (or more) browsers on your computer. Unlike operating systems, they won't interfere which each other's functioning. To download a free copy of IE, go to MSN.com and find their 'Downloads' link. To download a free copy of Netscape Navigator, go to Netscape.com and find their 'Downloads' link. For both of these pages you may have to look around a bit, but since Microsoft and Netscape change their sites frequently, I can't really tell you where to look for them. Consider it a form of scavenger hunt. ;-) And so there you have it. My take on Web Design 101. Hope it's helped! |
HTML:(HyperText Markup Language) Html is the basic language that's used to create web pages. It is easy to learn and apply the basics, and it is amazingly flexible just in and of itself. (In fact, the majority of this website has been coded using nothing but regular ol' html.)