Web authoring is the process of developing Web pages. The Web development process requires you to use software to create functional pages that will work on the Internet. Adding Web functionality is creating specific components within a Web page that do something. Adding links, rollover graphics, and interactive multimedia items to a Web page creates are examples of enhanced functionality.
This web design lesson demonstrates Web based authoring techniques using Macromedia Dreamweaver. The focus is on adding Web functions to pages generated from Macromedia Fireworks and to overview creating Web pages from scratch using Dreamweaver. Dreamweaver and Fireworks are profes- sional Web applications. Using professional Web software will benefit you tremendously. There are other ways to create Web pages using applications not specifically made to create Web pages. These applications include Microsoft Word and Microsoft PowerPoint. The use of Microsoft applications for Web page development is not covered in this web design lesson.
However, I do provide steps on how to use these applications for Web page authoring within the appendix of this text. If you feel that you are more comfortable using the Microsoft applications or the Macromedia applications simply aren’t available to you yet, follow the same process for Web page conceptualization and content creation and use the programs available to you. You should try to get Web page development skills using Macromedia Dreamweaver because it helps you expand your software skills outside of basic office applications. The ability to create a Web page using professional Web development software is important to building a high-end computer skills set.
Let us begin to explore Web page authoring. WYSIWYG Applications vs. HTML Hand Coding “What you see is what get”, or WYSIWYG, refers to software p ackages that use intuitive interfaces and menus for user initiated functions, in other words, application specific software. In contrast is traditional programming and specifically HTML (not really a programming language, but a mark up lan- guage).
HTML is a hand coded method of creating a Web page. Hand coded methods are considered tedious by some and require the expertise of an experienced programming practitioner. As well, if the HTML writer is low or moderately skilled, there is a strong chance the Web pages will be poorly constructed and visually weak. In this text, we will find that common ground between the two methods focuses mostly on WYSIWYG applications includ- ing Macromedia Dreamweaver. In the real world, the professional Web designer needs to have strength in one main method and should have some moderate knowledge and skills in the other.
However, you need to understand that HTML is the underlying engine that drives you a Web page on the Internet. A basic example of how to write an HTML page using only hand typed code is provided in the appendix. Now let’s start to develop the functionality in our Web pages. First, we will dissect our sliced Fireworks page and then briefly discuss why we are focusing mainly on using Web development software and only touching upon hand coding methods.
Opening Sliced Web Pages from Fireworks
When you open .htm pages in Dreamweaver the sliced page will be in a nested table. The table is constructed of rows and columns that hold a piece of the Web page. Each of your slices became part of the table upon exporting. Your images and buttons are nested in the table and consecutively named with a _r _c suffix, with R representing row and C representing column. The table can be edited and manipulated.
However, tables are sometimes challenging to work with if you are new to Web design so I have decided to show you an alternate method on how to utilize floating design using layers. You can learn about both, and use which ever one you feel most comfortable with. Now, you are probably saying what will you do with this big complex table?
HTML tables allow you to arrange data. Data in the form of text, preformatted text, images, links, forms, form fields, and other tables is assembled into rows and columns of cells. When used with graphics, tables may force users to scroll horizontally to view a table designed on a system with a larger display.
To minimize these problems, authors should use style sheets to control text layout rather than tables.(http://www.w3.org/TR/REC-html40/struct/tables.html#h- 11.1). To add to this, style sheets and layers are great for controlling data in a Web page.
I find that complex tables are effective to use and easy to manage when they are made using the slice tools in a Web optimization application such as Macromedia Fireworks. Slicing seems to be easier than hand coding table rows and table data. Also, the slicing method allows the table to be edited using the table properties in Macromedia Dreamweaver. Editing a complex sliced table is easier than creating a complex table from scratch in Dreamweaver.
You can use both methods as you build your Web authoring skills in Macromedia Dreamweaver. The table creation abilities of Dreamweaver are great for making simple tables and for nesting tables inside of each other. To insert a table on to a Web page, you can use the menu item Insert>Table. To nest a table, simply click inside of a table cell and insert a table. As I have mentioned before, techniques described throughout the web design tutorial can be mixed and matched. Or, you can decide which is most comfortable for you and stick with it for your page designs.