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.
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 (middle button at the top of the 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->Editor tab. These options will be applied to any new window opened while the current documents will retain their current settings.
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.
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.
To open the attribute editor go to Window->Show attribute editor. You can make sure that the attribute editor always stays with the front most document as well as stays in a convenient location for easy editing by clicking the magnet icon in the upper left corner.
When the attribute editor is visible it will list all the attributes for a tag when you you click your mouse within one in your document. It not only lists the attributes and their values but it allows you to easily edit them. For attributes requiring a color value, the attribute editor gives you access to the system color picker and will automatically enter the appropriate hex value. For tags which can only have specific values, they are listed in a popupmenu for easy selection
WebDesign provides the following keyboard shortcuts to allow easy access to some commonly used features and reduce the time it takes to access each one.
| Command-1...9 | Edit in nth application or preview in nth browser |
| Command-J | Open the go to line window |
| Command-B | Make the selected text bold |
| Command-I | Make the selected text italic |
| Command-U | Make the selected text underlined |
| Command-L | Select the entire line |
| Command-E | Condense the selected text |
| Command-F | Open the find & replace dialog |
| Command-G | Find Again |
| Command-= | Replace Next |
| Command-T | Replace next and find again |
WebDesign's editor can be set to different types when editing documents. The following types are available within WebDesign:
WebDesign will automatically set the document type when documents are opened depending on the file extension. You can modify which file extensions use what document type by going to the 'Document' tab of the Preferences dialog.
You can change the document type for the current document by editing the 'Document Settings' under the Edit menu.
You can edit the behavior and settings of each document window by going to the 'Editor' tab of the Preferences dialog.
Note: These settings will only apply to newly created documents or files opened after these settings are changed.
You can customize the the settings of the current document window by opening the 'Document Settings' dialog.
When using special characters with an ascii value greater then 127, they may not show up correctly in different browsers or on different operating systems. This is why it is recommended to convert these special characters to their HTML entity value. WebDesign provides many features to reduce the amount of memorization required to remember the entity values for different characters as well as makes it very easy to enter characters with high ascii values.
WebDesign's HTML Entities window will list all available special characters that can be used in your web page. They can be entered using their entity name, entity decimal value or entity hexadecimal value by selecting the input method from the pop up window. The Entities window can be accessed under the 'Windows Menu'.
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 'Application' tab in the Preferences window.
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.
If you need to quickly get a styled text document online without having to write the required HTML markup or you simply do not want to write the necessary code, WebDesign can convert your styled text for you and generate the correct HTML, XHTML or CSS needed to display properly in a web browser.
Writing Styled TextWebDesign includes a built in styled text editor which will allow you to write your styled text and have WebDesign automatically convert it to HTML, XHTML or CSS. The Styled Text Editor can be opened through the Insert Menu or the Window Menu.
The Styled Text Editor allows you to either type text or copy and paste text from another application. From the Styled Text Editor you can make text bold, italic or underlined. You can also change the font and font size as well as the text color.
Once you have your styled text ready to be added to your document, simply press the 'Insert...' button and select the output options for the code. You can chose to output CSS code as well as only lowercase tags and XHTML code from the preferences menu in the bottom left hand corner.
Converting Files to HTMLIf you already have a styled text document on your computer that you would like to put online, you can import styled text files as well as RTF documents and have WebDesign generate the appropriate HTML, XHTML or CSS for you.
To import a document, go to Text->Convert->Styled Text From File... You will be able to chose a document and have WebDesign import and convert the necessary information.
Notes on Converting TextAlthough WebDesign's Text to HTML features will try to produce the correct results at all times, there are certain circumstances where there may be some difficulty and the resulting code will not display in your browser exactly as it displays in a regular text editor. For example, if styles or fonts are changed within a word, you may see spaces within that word where they shouldn't be. It is recommended to not use complex styled text and keep it as simple as possible.
If you need a way to quickly jump to certain parts of a document, such as functions, scripts, links, headers or anything else for that matter, WebDesign's markers feature lets you do this with ease. Lets say for example you are creating a page with dozens of different headings. To create the headings you are simply using the HTML Header tags (<H#> and </H#>) to make the headers stand out on your web site. As your page gets longer and longer, jumping between headers gets very tedious. You can always use the Find feature but this can get overwhelming and time consuming. Instead, using the Markers features would make much more sense and be much quicker.
To set up the Markers feature, Open the Preferences window and select the Markers tab or select Add Marker from the Marker button's menu (third button at the top of each document window) to go directly to this tab. Fortunately, for this task an example is already there for you. Select the example labeled Headers, click the add button and save your preferences. Now all your headers are listed in the Marker button's menu. You can select one to quickly jump to the correct location in your document. You will notice that this marker works for any size header from H1 all the way to H5. This is because it uses WebDesign's powerful pattern searching (called regular expression) to search your document.
An example may not always be available so setting up markers may not always be this easy, but it does not get much harder. To set so up a custom marker, enter the start and end strings that WebDesign should look for. WebDesign will search your entire document for each occurrence of these strings and, if found, the text that they surround will be listed in the marker button's menu and is where WebDesign will jump to when the marker is selected. For example, if you enter 'href="' in the start string field and '"' into the end string field, any text that follows 'href="' all the way till the next '"' will be listed in the marker button's menu and will be highlighted when the marker is selected. WebDesign also provides options to help narrow your search. You can set it to be case sensitive so that it does not match 'A' if your enter 'a' and you can also set it to only match entire words. The third option allows you to enable regular expressions for your search terms. This allows you to enter complex patterns instead of simple strings for WebDesign to search for. Regular expression syntax is explained in more detail in Section 6 'Search & Replace' of this user manual. Lastly you can also set the document mode that the search pattern should be applied to. For example, if your marker was set to find HTML headers you might only want it to be enabled for HTML documents or if your marker was set to find PHP functions you may only want it to be enabled for PHP documents. This can help speed up WebDesign's searching and remove unwanted markers from the menu.