19.3. Professional Web Sites There are super-simple, Web-based services ideal for the casual Web designer who just wants to publish the Little League schedule or present the minutes of the latest PTA meeting. But if you want to make your site look professional, you'll have to do a little more rooting around. This process can get so technical, in fact, that many small business wind up hiring a professional Web designer to do the job. If you're interested in creating a professional-looking site, here's what the job entails: -
Figuring out what's on it . If you're going to have a Web site, you need something to go on it: not just text, but also visual elements like pictures, graphics, and logos. You should also start thinking of a name for your site so you can figure out whether the Web address you want is available. (It probably comes as no surprise that virtually all the most popular one-word addresses cars .com , sports.com , and ragu.com are already taken.) -
Web editing software . You need a program that lets you create, design, and check each Web page before you hang it up online for all to see; such programs range in price from free to several hundred dollars. The cost factor is often inversely proportional to the amount of work you need to do yourself; if you go low budget, expect to get a little less handholding and a little more code-wrangling. If you want to learn HTML (Section 19.3.1.1), you can make Web pages with programs that come preinstalled on your PC or Mac. But there are easier software tools to use. Nvu (www.nvu.com ) is a good freebie Web page editor; Dreamweaver (www.macromedia.com) will set you back around $400, but you'll be using the same tool the pros use. Both programs work on PCs and Macs. -
A Web host . Every Web site resides on a server somewherea computer that's running 24 hours a day and connected to a superfast Internet connection, so that dozens or thousands of people can be viewing your Web site simultaneously . -
Delivery system . Once you've created your pages, you need a way to get them off your computer and onto the Web server. In most cases, you upload your pages using your Web browser or a file transfer protocol ( FTP ) program. FTP software is specially designed to heft files from one computer to another. Some popular Windows FTP programs include CuteFTP (www. cuteftp .com) and WS_FTP (www.ipswitch.com); Mac OS X folks have programs like Fetch (http://fetchsoftworks.com) and CaptainFTP (http://captain-ftp.xdsnet.de) at their disposal. 19.3.1. Phase 1: Design Your Web Site When it comes to actually designing, coding, and creating the Web pages that will be part of your site, a wide selection of software awaits. Professional Web designers work in code. They manipulate strings of computer programming gobbledygook in a Web-description language known as HTML . If you wandered by their desks, you'd never guess that all that typewritten text on their screens was actually supposed to look like the Wal-Mart home page. Ordinary humans , however, are frequently better off using a program that lets you design a Web page by dragging text and graphics around the screen; the program generates the HTML code automatically, behind the scenes. 19.3.1.1. Text editors It turns out that a Web page, when you get right down to it, is little more than a page of text. It's filled with codes that, as noted above, the pros type out by hand. (Graphics, movies, and other non-text items aren't actually part of the Web page. The text codes tell those things where to appear, but they're actually stored separately on the Web site.) So, if you know the HTML language, you don't need any fancy software at all. If you're a do-it-yourself type, you can't get any more DIY than using Notepad (for Windows) or TextEdit (Mac). Just choose Start  All Programs Accessories Notepad on your PC, or Applications TextEdit on your Mac.
Tip: And what if you don't know HTML but would like to? For a quick course in HTML 101, visit the ever-helpful Webmonkey site for free classes and cheat sheets (www.webmonkey.com). Once you've created the HTML document in a text editor, save your file with an .htm or .html extension. Believe it or not, you can then preview your work by opening the page in your Web browser.
UP TO SPEED
HTML Makes the Web Go 'Round | | The name HyperText Markup Language makes it sound a lot scarier than it actually is. HTML is just a system of tags a simple programming language, actuallycontained in a text file. When one of your fans summons your Web page, these coded tags tell their Web browsers how to display the document as you intended it. To italicize text on an HTML page, for instance, you just need to type it between the tag to turn on italic, <i> , and the tag that turns off italic, </i> . If you put the HTML tag for bold type around a word, like this"Here's the <b> BOLD </b> tag!"all Web browsers know just what to do because they all speak HTML fluently. To make a very bare-bones Web page, you can use programs like Notepad or TextEdit because HTML documents are just plain text files containing HTML tags. Basic HTML itself isn't hard to learn if you want to take a crack at coding your own simple Web pages by hand. You can find interactive tutorials on the topic at sites like www.w3schools.com/html and www.davesite.com/webstation/html. With a little diligence, you'll be your own Web guru in no time. |
Tip: You can even design a Web page in Microsoft Word (or any other word-processing program). Just format and dress up the document as you like, complete with graphics, and then choose File Save as Web Page. The results look OK for pages that are mostly text; things can start to look a little funky once you add graphic elements, charts , or tables, however.
19.3.1.2. WYSIWYG (drag-and-drop) programs WYSIWYG stands for "what you see is what you get," which means that you design your Web page as though it's in a graphics program. You get easy-to-use design features and tools to manage your site's pages and get them up on the Web. The best part about these programs? They generate the HTML code for you. -
Nvu . Nvu a free, open -source program (that is, written by volunteer collaborators via the Internet), combines some of the graphical goodness and ease of a Web-editing program like Dreamweaver with the freeness of Notepad and TextEdit. Not only does it provide buttons that quickly and correctly add photos, forms, links, and tables to your pages, it can upload your pages to your host server with a click (see Section 19.3.3). You can preview your pages right in the program's window (Figure 19-6) and even run its built-in spell checker to help keep those embarrassing typos at home where they belong. Nvu is available for both Windows and Macintosh. (www.nvu.com) -
HTML-Kit . It won't win any beauty contests for best user interface, but the free HTML-Kit program for Windows makes up for any esthetic shortcomings by letting you customize it to the hilt. The program's Web site has tutorials to help you get started, and the software itself includes handy features like a live preview that shows you your developing Web page as you type away in the text editor window. (www.html-kit.com) -
Microsoft FrontPage . If you're already a wiz at Word, Excel, PowerPoint, or other Microsoft programs, FrontPage for Windows should have a shorter learning curve than other Web software. The program's graphics and layout tools let you push and pull elements around the page until you like the look. You can create master templates for all your site's pages, so when you change an element on the master page, all the other pages take the change, too. FrontPage costs $200 by itself, although it comes with some versions of Microsoft Office. (www.microsoft.com/frontpage) Figure 19-6. The free Nvu (pronounced "new view") software takes much of the pain out of Web page creation. As shown in the foreground, you can use its toolbar to style text and add images by clicking, instead of having to type all that stuff shown in the background, which is what Web page code really looks like. The tabs at the bottom of the Nvu window let you see your page in its various stages.  -
Adobe GoLive . Sure, it costs $400, but it's available for Windows and Macintosh and integrates well with Adobe's flagship graphics programs, like Photoshop and Illustrator. Using a palette full of visual tools, you can build complicated Web pages soaking in multimedia. A map displays all your site's pages and how they link to each other. (www.adobe.com)
Note: In 2005, Adobe acquired Macromedia. It now sells a software bundle that includes Dreamweaver, GoLive, and most of both companies' other programs for just under $2,000.
-
Dreamweaver . Many Web-design professionals do their heavy lifting in Dreamweaver, which costs $400 for Windows and Macintosh. For new Web-site builders, Dreamweaver comes with a full suite of tutorials to help you understand how to construct your pages and add video or animation. If you want to do a lot of animation, you can also get Dreamweaver bundled with the Flash program (Section 3.4.4) along with a few other Web-design tools in a $1,000 suite called Studio 8. (www.macromedia.com) If you're not sure what kind of software you want to use, how many pages your site will have, or even how much server space you think you may need to rent from your Web host, a bit of advanced planning can help. That's where wireframes and flow charts come in. A wireframe is a rough layout of your Web pages, with the places for text and images sketched in. A flow chart is an architectural map of your entire site, showing each separate page and where each page links, so you can see the big picture at a glance. You don't have to get fancy software to make wireframes and flow chartsin fact, you can sketch them out on cocktail napkins if you want. They're just there to give you an idea of how much work you have ahead of you and help you decide what tools you need to get the job done. 19.3.2. Phase 2: Find a Web Host Before you can put your Web site up on the Internet, you should line up a host for your future home on the Weba company that will be responsible for keeping your site connected to the Internet at all times. The web host will park it on a high-speed computer (a server ) that's fast enough to serve up your page to hundreds of visitors at once. You have a few options here, including free Web space or extra space your Internet provider may have granted you as part of your monthly Internet subscription. Web hosting firms like Go Daddy (www.godaddy.com) and Network Solutions (www.networksolutions.com) specialize in renting Web server space for a monthly or annual fee. You'll also need a domain name , which is the ".com" or ".org" part of the Web addressfor example, www. smithsonian .org or http://moisttowelettemuseum.com. If you go with a Web hosting firm, its reps will usually help you pick out and pay for a domain name (more details in Section 19.3.2.2). On the other hand, if you've opted for free Web space on a super-simple service like the ones described back in Section 19.2, you generally won't have to deal with getting a domain name; in fact, you couldn't choose one if you wanted to. Your Web site's address will incorporate the company that's providing the space. If it's Earthlink, for example, and your Web site is called SalsaFiend, your address will be www.earthlink.com/~salsafiend. 19.3.2.1. Using Web space from your ISP Your Internet service provider may supply you with 10 or 20 megabytes of free space for your own personal Web pages. Check the paperwork you got when you signed up, or your ISP's Web site, to see if that was part of the deal. Most big providers, like Earthlink, Comcast, and Verizon, provide enough space for a small site. Here again, you won't be allowed to choose your own domain name (like www.picklepuss.com or whatever). If you put up some pages through your Comcast account, you'll get a URL like www.home.comcast.net/picklepuss. 19.3.2.2. Using Web space from a hosting company If you need more space or want more flexibility for your Web site, there's no shortage of companies out there that will gladly rent you some room on their servers for less than $10 a month. Once you buy space from them, such companies supply the information you need to upload your Web site to their servers, like passwords and directions. If you don't have a domain name for your site yet, you can even buy an all-in-one domain name/hosting package from a company like Register.com (www.register.com), Go Daddy (www.godaddy.com), Dotster (www.dotster.com ), and Network Solutions (www.networksolutions.com). Each offers a selection of hosting plans for everything from personal sites to major e-commerce operations. Because you're buying a domain name to go with your site, you can also check its availability to see if it's in use. You can look up, say, www.corndoghut.com, to see if anyone has nabbed it yet. When shopping for Web space, consider these factors: -
Data transfer limit . Also known as bandwidth , this is the amount of information your site is allowed to send each monthnamely, copies of your Web pages into the browsers of your site's eager readers/fans/customers. Ask the hosting company what happens if your site gets really popular and you exceed your bandwidth limit; do they temporarily shut you down or just charge you more money? (If this happens to you, temporarily shutting down is the much less expensive option.) -
Disk space . If the 10 or 20 megabytes from your ISP isn't enough room to hold all your pages and graphics, how much space do you actually need? If you've already built all your site's pages and have them all in a folder, check the folder's size. In Windows, right-click the folder, choose Properties, and then look at the " Size on Disk" figure. On the Mac, Control-click (or right-click) a folder and then choose Get Info to see its size. Be sure to take into account any new pages or sections you may want to add to your site in the future. -
Price . You shouldn't pay more than $10 or $15 a month in hosting fees for a small site. If the price is higher, find out why; see if the company is tossing in tools and features you don't need. 19.3.3. Phase 3: Publish Your Web Site Once you've designed your pages and lined up a service to host them, you have to transfer the former to the latter. This is where those FTP programs mentioned back in Section 19.3.1 come into play. File transfer programs are designed to deliver batches of files from one computer to another in one fell swoop. When you upload your Web site's files, you're basically telling the FTP program where you want to move your files (to your Web host's computer), and then pointing the program to the files or folders on your machine that you want to transfer. Before you can upload your Web site's files to your host server, your FTP program will ask you for three data points that your chosen Web host company must supply: -
The host address . This is the address of the server that will harbor your site. The address usually looks something like ftp.mywebhost.com . -
Your user name . This is whatever you picked when you signed up for the account. If you're using free Web space from your ISP, it's often the part of your email address before the @ sign. -
Your password . If you're using your ISP's Web space, this is probably the same password you use for email. If not, it's whatever you picked when you signed up with your Web-hosting company. Passwords are important here because they keep strangers from changing your site's pages. These three nuggets of info get you into your own assigned directory on your Web host's server. Then you just need to upload the HMTL files and images you created for your Web site to that directory. The buttons and commands may vary slightly with the FTP program you use, but look for a Put File or Transfer File option. This command lets you select the files on your hard drive to be copied over to the Web server that you're now connected to through your FTP program. Once you upload your pages to your rented space on the host's server, your brand new Web site is live for the world to see. When you need to make changes to pages or add new ones, upload the corrected or new files to the same folder on your Web server.
Tip: Even if you hire professional Web designers to create and upload your pages for your site, you don't have to drag them (and their invoices) back in for every little text update. Services like Edit.com let you fix your pages, add new text and images, update links, and more, right in your own Web browser. Service plans start at $25 for unlimited editing per month; if you don't change your site all that much, you can also pay a flat $25 for one-time, 24- hour window-site updates. You can get more information and a demonstration of how it works at www.edit.com.
POWER USERS' CLINIC
Advanced Web Work | | This chapter is intended to give you an overview of whipping up your own Web site or blog. But if you want to make more sophisticated sites, containing all of today's bells and whistles (like Cascading Style Sheets, JavaScript, and other elements that really jazz up your pages and bring them to life), there's a lot more to learn. If this little walk on the Web has you wanting more, you can get it with Creating Web Sites: The Missing Manual . The book guides you through all the steps needed to create snazzy sites on your own, while also covering topics like how to figure out who your audience is and how to make money with your site. There's also an in-depth look at making a blog, and tips for making your personal Web diary a well-respected member of the blogosphere. |
|
