Getting Started Using WebDesign

This section introduces many of the features that WebDesign provides for working with documents in general and then for specifically working with HTML code. It will also explain how to change the behavior and settings of each document window so that you can customize it to your likings.


Creating New Documents

WebDesign lets you create documents a number of ways. If you want to learn about opening existing documents you can skip to the next section. Otherwise, you can learn about the various ways that WebDesign provides to create new documents. You will also learn about the various New Document wizards which will help generate the proper code for you without you having to learn, or type the proper syntax.

Creating New Documents in WebDesign
New HTML Files

WebDesign provides a built in New HTML Document wizard that you can access by going to the File menu and selecting 'New Web Page...' The New Document window was discussed in detail in the Introduction section of this user manual. After opening the new document window you will be prompted to enter the neccessary details such as web page title, author, appearance settings, meta data etc...

New Frameset Documents

Like the New Document window, the New Frameset Window lets you create a new frameset document without typing any code. To access the new Frameset Window go to the File menu and select 'New Frameset...'

.
New Frameset Wizard

Use the Frameset Wizard to create a web page with frames without having to write any code. After you click the 'OK' button WebDesign will generate the necessary code in a new document window for your frameset page.

New With Stationery

You may already be familiar with stationery files since many applications use them. If not, stationery files are similar to templates. They provide a starting point, or a skeleton of a certain kind of document. You access stationery files from the File menu. Stationery files are located in the folder labeled 'Stationery Files' in the same folder as the WebDesign application. You can place your own files in that folder to use them as stationery files.

When you open a stationery file in WebDesign it is opened as an unsaved document as if you created a new document containing the contents of the stationery file. You don't save the document back to the original file but to a different location so that the stationery file can be used over and over again.

New Blank Document

WebDesign can create a new blank document so that you can start from scratch. Just select 'New Blank Document...' from the File menu.

[Top]


Opening Existing Documents

WebDesign lets you open any kind of HTML or other web page written in any other HTML editor. It doesn't matter where a web page is created since they are just text documents giving the web browser instructions on how to load them. Any document created in another HTML editor can be opened in WebDesign and any document created in WebDesign can be opened in any other HTML editor.

WebDesign provides a variety of methods to open documents. You can open local documents from your computer, you can open documents from your FTP server and save them back all from within WebDesign or you can download a web page right off the web by typing in a url (although you will not be able to save it directly back unless you have the login information for the web server).

Open any HTML page in WebDesign
[Top]


Saving Documents

WebDesign lets you save files just as easily as any other text editor or word processing application. The familiar Command-S saves a modified document and shift-command-S allows you to save the document in another location by doing a 'Save As...'.

Saving Web Pages in WebDesign

WebDesign lets you save documents just like any other word processing application. The save menu item becomes enabled once you make any modification to your document. WebDesign also allows you to save all opened documents at once. Hold down option as you select the File menu to turn the save command into a 'Save All' command.

When you have opened a web page from a remote location such as a FTP server using the built in FTP client, WebDesign will automatically save the document back to your server when you select the Save command from the file menu (Command-S). A status window will open with your FTP login information that WebDesign stored when you first downloaded the page as shown below.

Upload Web Pages

As your page is being automatically uploaded back to your FTP Server, your document is temporarily disabled until WebDesign is finished.

Save to FTP...
WebDesign lets you save files directly to your FTP server. Just select 'Save To FTP...' from the File menu to open the FTP client then enter your login information, navigate to the location you want to save your file in and press the 'Upload Page' button as shown below.

Save Directly to your FTP Server

Save files directly to your FTP Server when working in WebDesign. Just select 'Save to FTP...' from the File menu.

Once you save the file to your FTP server, WebDesign will continue to upload it back automatically each time you save your file regularly in WebDesign. It will also update the local copy if it was previously saved on your hard drive.

Custom Save Options

WebDesign lets you set different options when saving files as you can see from the saving preferences options below. To modify the saving options select the 'Document' tab from the Preferences window. The following options, depicted below, allow you to do the following;

WebDesign Save Options

Save files depending on the operating system you will be using them on. Saving as Unix will allow virtually all editors to be able to read your document and allow your page to be compatible with virtually all web servers. You can save files as any kind of document by entering their 4-character creator code. The popup-menu provides some common creator codes that you may want to save your file as. When you double click the document in the Finder it will be opened in the application that you have specified.

[Top]


Backing Up Documents

Backing Up Files

WebDesign can automatically back up your files on save or you can manually backup your files whenever you feel it is necessary

[Top]


Working with Documents

WebDesign provides many features to make working with HTML as well as other languages a whole lot easier.

All of the features listed above can be enabled or disabled for the current document by using the Text button in the document window (second button at the top of each Document Window with the big 'A') or you can use the 'Document Settings' from the Edit menu. If you want to change the default features of WebDesign's text editor you can go to the Preferences->Edit Modes. See Customizing WebDesign's Editor and Document Modes section for more details.

[Top]


Working with HTML

WebDesign provides many features specifically for working with HTML. Many of the features that it provides automates tasks which could take a whole lot longer to complete. Most of these features can be found in the HTML Tools menu.

[Top]


Using the attribute editor

It is very easy to forget specific attributes for an HTML tag. It may also be easier to find and edit HTML elements for a specific tag if they were presented in an organized list. WebDesign provides this ability through its attribute editor.

The attribute editor will list all the attributes for a specific tag as well as access the HTML reference if you are unsure what a specific tag or attribute does. To use the attribute editor, simply click within an html tag in WebDesign's editor to have its attributes listed. If the attribute editor is not shown, you can open it by going to the Windows menu and selecting 'Show Attribute Editor'.

WebDesign Attribute Editor

WebDesign's attribute editor lets you easily select colors using Apple's Color picker and automatically generates the HTML color code for you as you can see with the bgcolor attribute. It also lists all possible values for certain attributes such as the align attributes which only accepts 3 specific values. Other attributes have the More Text button which opens a new window so you can easily add lengthy text to certain attributes instead of typing it in the Value cell of the attributes list.

[Top]


Customizing WebDesign's Editor and Document Modes

WebDesign's text editor provides many different features and settings to help you code faster, produce more efficient code and locate errors quickly. Syntax coloring helps you quickly locates specific tags, function declarations, attributes or even errors in your document such as missing quotes. Line numbers provide an easy way to track down errors especially when working with PHP documents. Auto indent options allow you to write cleaner code without a lot of effort on your part and Smart Auto Indenting takes this one step further. There are many more options that you can explore and test on your own. They are described in more detail below.

Before going any further it is important to know how WebDesign works. WebDesign contains a set of built in document modes which include regular Text, HTML, XHTML, PHP, CSS, JavaScript, ASP, XML, and VBScript. These document modes contain default settings that make working with the languages much easier. For example each document mode has it's own Syntax file which defines how text is colored in your document so you can easily spot any potential coding errors. Other settings, like Smart Indenting Braces is enabled for PHP documents so that when you create a function like the following;

function "Hello_World" {

   print "Hello World"

}

it is properly indented for you removing the need for those extra keystrokes each time. These document modes are basically presets for each kind of language and can be completely customizable, from the editor settings to the instructions for customizing the syntax coloring (the technotes in the User Manual provide more details on creating Syntax Keyword Files for WebDesign).

WebDesign recognizes a document as a certain language, and sets the document mode accordingly based on the extension of the files you open. For example a file with the extensions .html will open under the Document Mode HTML and a file with the extensions .php will open under the Document Mode PHP. How WebDesign recognizes files and assigns the Document Mode is also completely customizable. The following screen shot depicts the process of modifying the available document mode and describes what each option does. You customize the Document Modes from the 'Doc Modes' tab in the Preferences.

Edit Document Modes

Customize the built in Document Modes by going to the 'Edit Modes' tab on the Preferences.

WebDesign lets you easily switch between Document Modes write from within the Editor. So for example if you are working with a document that was recognized as a PHP file but is contains mostly HTML code, you can switch to the HTML Document Mode by using the Document Modes menu in the editor window as show below;

Select Document Mode

Change the Document Mode from WebDesign's editor.

If you have to quickly change a single setting, or even a bunch of settings for WebDesign's editor for the current document you can open the Document Settings dialog from under the Edit Menu. From here you have access to all the settings that can be customized for the current document.

Edit Document Settings
[Top]


International Characters

Every single character; letter, number, punctuation etc..., is represented by a number in your computer. When you press a key on your keyboard you send your computer a specific number which it then maps to a specific character and displays them on screen. The way your computer maps these numbers to characters varies from language to language and from computer to computer. The mapping is determined by using an 'Encoding' which the computer applies to a string of text in order to interpret it. Examples of different Encoding include ASCII, ISO-8859-1, ISO-8859-2, Unicode and hundreds more. Which means that typing a ©, ®, ¥, etc.. may not show up as those characters on different operating systems or for users of different languages. To solve this problem, and the way we were able to make those characters in the preceding sentence, always show up correctly is by using HTML Entities.

HTML Entities provide the browser with a special code in order to interpret special characters the same no matter what browser or encoding is used. For example, to display those special characters above (characters with a numerical ascii code greater than 127), we use © to represent ©, ® to represent ®, and ¥ to represent ¥. There are a whole list of codes to represent all other special characters. WebDesign provides a list of all these code in its HTML Entities Window. These special characters can be represented by their entity name, which was used in the preceding example, their decimal value, or their hexadecimal value. All these codes are available from the Entities window. Go to the Window menu and select HTML Entities and the following window will appear;

List of all HTML Entities

Use the HTML Entities window to quickly insert an HTML Entities into your document. HTML Entities insure that not so common characters always show up correctly no matter what operating system or web browser you are using.

WebDesign can automatically convert special characters when they are typed in your document to their correct entity name. You can use this feature by enabling it under the 'Editor' tab in the Preferences window.

Auotmatically Convert HTML Entities

Automatically convert HTML Entities as you type by setting this option in the 'Editor' tab option of the Preferences.

WebDesign can convert your entire document from regular text to IS0-Latin-1 and to IS0-8859-1 and back. You can access these conversion features in the 'Text' menu.

Note: It is up to you when to use the entity name, entity decimal value or entity hexadecimal value. Support for each entity value is excellent in most browsers.

[Top]


Creating New Web Sites & Using WebDesign's Site Manager

WebDesign provides a powerful Site Manager to help you organize your web site and conveniently create, edit and maintain entire web sites locally until they are ready to go online. In which case WebDesign handles all this for you by uploading your entire web site, or the most recently modified documents, to your FTP server.

This tutorial will walk you through the steps of creating a new web site from scratch using WebDesign's Site Manager and explain what each option allows you to do.

To start, select 'New Web Site...' from the File menu. The following dialog appears allowing you to create a new web site, import an existing one or Import a Folder containing your web site files. When you create or Import a web site folder, WebDesign creates a '.site file in the same folder as your web site files. This is your web site file and is what you would select if you were importing a web site. It contains references to your web site folder and other information WebDesign uses to manage your web sites.

Creating Web SItes in WebDesign

Create web sites in WebDesign using WebDesign's Site Manager

By default the 'Add to Web Site List' check box is checked for you. What this does is add your web site to the recently opened Web Sites list. When you click and hold the 'Open Site' button in WebDesign it will be listed there so you can easily open that Web site without having to go through the process of open dialogs searching for it.

The 'Reset Updated Date' check box which is disabled when creating New Web sites will reset the last remembered date that WebDesign stores for when the file was last uploaded to your FTP server in WebDesign. This option becomes enabled when you import an existing web site file so that you can upload the entire web site if for example you are uploading it to a different server.

Your next step to creating a new web site is to press the select button in order to select the location on your hard drive that you want WebDesign to store your web site files in. Once you have selected the location, WebDesign will prompt you for the name of your web site and create the necessary files for you. WebDesign creates your Web Site folder with an images folder, so you have a central location to place all your image files, and an index.html file which will be your opening page as shown in the screen shot below.

New Web Sites in WebDesign's Site Manager

Use WebDesign's site manager to manage your entire web site. Double click a web page to open it in WebDesign, or double click a media file to have the option of opening the file in any selected application.

Notice the date in the lower right hand side of the Window. This date shows you the last time your web site has been uploaded to your FTP server through WebDesign. Or, if it hasn't been uploaded yet, it shows the date the web site was created as in the case of the screen shot above. Double clicking any file will open it in WebDesign, or if it is not supported in WebDesign, you will have the option of opening it in a selected application.

WebDesign makes it easy to create new sub folders or new pages. Just click the 'New Folder' or 'New Page' button in the tool bar. A new folder or page is created and allows you to enter the name. You can rename any file or folder by selecting it and press the return key.

Creating New Pages

Open your pages and begin editing by double clicking them. Create new sub folders and web pages easily. Rename documents by selecting them and pressing return.

[Top]


Have Any Questions? Post them on our FREE discussion forum at http://www.ragesw.com/forums/
Copyright 1999-2005 Rage Software. All rights reserved world wide
Back to Index | More About WebDesign | FREE WebDesign Add-ons

Designed With WebDesign