Web Authoring

Call (800)770-0492, email david (at) naaip.org, request via chat or at daily conference call. Click eContracting Registration or eContracting Login (after registration).

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.

The main objectives of this web design lesson are to get you involved in some technical processes that you’ll need to create the Web portfolio. Focus will be on guiding you through opening your sliced pages, adding links, using tables, creating pop up windows for content and using layers and timelines for dynamic HTML. The coverage will not try to provide a complete tutorial set for Macromedia Dreamweaver, but will highlight essential techniques. Along the way you will get pieces of hand coded action scripts and JavaScripts. You can decide which pieces you want to use in your own Web portfolio pages. The techniques provided are a concentrated workflow for creating Web pages.

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.

For example, you may be a strong designer and have extensive expertise using Web applications including Macromedia Dreamweaver and Flash. However, you want to try to achieve some level of moderate skills and knowledge in ActionScript, JavaScript, and HTML. Developing Web pages, you will use the knowledge in these areas frequently and should dedicate learning time to these areas in order to build a more rounded skill set. This web design lesson provides some techniques and information on JavaScript and HTML.

JavaScript is a programming language that allows you to add extended functionality and interactivity to Web pages (Negrino & Smith, 2004, p. 2). Here is an example of a JavaScript to close a browser window: JavaScript:self.close() HTML is hypertext markup language. It is the language used in Web pages. It is a written text file consists of tags containing varied attributes. I do not focus in this authoring web design lesson on creating HTML Web pages by writing the HTML.

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

I have found the integration between Macromedia Fireworks and Dreamweaver to be seamless. Exported HTML pages and associated graphics files are placed in your desired folder structure. Now you are ready to open the HTML (the files will be named .htm or .ht ml) pages in Dreamweaver and add Web functionality such as HTML text, links, JavaScript, and simple motion using Dynamic Layers.

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?

Tables

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.

Add a quote engine to your website for Free! We'll even create the website for you for Free!
There are No Catches! It's free and always will be.

"Best system in industry for insurance agents - anything less in not acceptable.

Step number #1 - NAAIP's technology helps producers project themselves as top level professional with minimal time and effort.

Step number #2 - Being among the largest brokerages in the insurance industry, allows agents access to top commissions and resources on every case.

Commitment to growing this relationship is nurtured by providing best in class service. Our attorneys, underwriters, case managers and sales experts will help you grow your business - one client at a time. Welcome to our team, a system that is uniquely suited for insurance professionals in this new millennium."

Aaron Levy - Website Owner, NAAIP.org

Moses Newman - Chief Technical Officer, NAAIP.org