Writing - Add, Delete and Edit Columns in Excel

Transcription

1

2 Contents Introduction What is bluetronix software? What is a CMS? What is online software? Advantages of online software System requirements Security advice Quick start Edit mode log in to the CMS Main menu Edit buttons Editing a page Editing a data record Editing the menu Changing the navigation bar Changing the layout using a layout template Displaced display- screen resolution Website editor Basic features Text design Text alignment Web related functions Creating links External links links to other websites Handling images to upload images Image menu bar Image editor Image editing example Document Management Uploading documents Uploading a PDF file Uploading a ZIP file Tables table menu bar Inserting tables Invisible tables and transparent tables Forms Inserting a drop down box Insert a single line text field 2

3 Submit button Form options Testing a form Modules and plugins Inserting a ticker Inserting the date 30/06/2008 format Inseringt the date 30 June 2008 format Displaying the current time Inserting a slide show Inserting a mouse-over image Small size and full size image view CSS editor style sheets CSS example Special characters HTML code view Code view example Web page settings Page title Background and layout Keywords, author - search engine settings Avoid search engine entries for pages Editing PHP code in the text editor Templates for web page structure Customising templates with the CSS editor (advanced) Open object offset Dynamic menus drop down menus Menu types Menu editor Site management (file management) Text editor User system Changing the admin password Staff member group management Blocking an account Unblocking an account Assigning a new user password Registered users and groups 3

4 Sites/directories with password protection secure areas Website layout Bluetronix layout conception Editing the layout layout and areas Layout area settings background settings Editing stylesheets CSS classes Individual fonts Style assistant master colours and images Design templates Questions about the bluetronix software layout conception How do I create a site without frames and without changing the menu or navigation bar for every single page? Why is it better to have a site without frames? How can I have scrollable frame-like areas at my page without using actual frames? CMS modules Basics about modules dynamic pages Element 1 template Element 2 PHP script Element 3 database Multiple installation of modules Combining different modules Photo album Import of pictures automatic adjustment of size Setting up the CMS photo album module Easy insert and change of images within the photo album Photo album with self-made layout Shopping-cart system online shop Features of the shopping-cart system Setting up the CMS shopping-cart module Adding and changing items Import and export of items at CSV or TXT format Updating the shop menu (automatic) Updating the shop menu (manual) Shop database, columns and properties Links at shop sites Editing the shop templates Shopping-cart system advanced users: PHP, HTML and Java script Shopping-cart system payment systems Shopping-cart system receiving orders forwarding to a mobile phone 4

5 Shopping-cart system access statistics optimisation Shopping-cart system with secure area News page Setting up the CMS news page module Adding and changing news Form system Setting up the CMS form module Creating and changing forms Forms customising the layout Forms forwarding to a mobile phone Secure areas Setting up the CMS secure area module Editing the login page customising the layout Guest book Setting up the CMS guest book module Changing and deleting data from the guestbook Editing the guestbook web site customising the layout Forum Setting up the CMS forum module Changing and deleting data from the forum Editing the forum sites customising the layout Website search full-text search Setting up the CMS forum module Editing the forum sites customising the layout Newsletter Setting up the CMS newsletter module Editing the newsletter sites customising the layout Database Database management Table view Editing fields Deleting row content, deleting column content Copying row content, copying column content 5

6 Adding, deleting and editing columns Editing datasets Dataset view Import and export through clipboard Importing a database Step 1 Save file as CSV in Excel Step 2 - Import file into database management system Exporting a database MySQL commands Statistics access analysis Traffic, number of visits Single visitor analysis How did a visitor find my website? What are the keywords he entered into the search engine? Space management Subscription Changing personal details Current account Upgrading your subscription Domain management Registering a domain Changing your ISP Domain status display What is a main domain? Changing your main domain adress management Creating a new address Changing the password forwarding details for POP3, STMP and IMAP Reading and writing s with the webmailer Reading s Writing s Setting up MS-Outlook Finding your address details Setting up MS-Outlook Setting up Thunderbird Find your setup details 6

7 Setting up Thunderbird Setting up a spam filter problem solving chart Newsletter Sending Newsletter Newsletter Address management Newsletter Importing the address book from Outlook Step 1 Export the address book in Outlook Step 2 Format the columns in Excel Step 3 Import the address book into the newsletter system FTP directory Your FTP directory FTP access management FTP password Setting up an external FTP programme Reseller Reseller subscription Homepage transfer and ISP change Importing an existing homepage Copying the HTML pages from local disc drive Uploading the HTML pages via FTP Copying the file style.css Importing the files in the CMS Converting frame-based sites The whole purpose Determining the number of pages and the frame size Rename the main file to index.html Legal Notice 7

8 Introduction Dear customer Thank you for purchasing our product. This manual will provide you with an overview about functions and features of bluetronix content management system ( CMS ). What is bluetronix software? What is a CMS? What is a online-software? Advantages of online-software System requirements Security advice What is bluetronix software? Bluetronix software is an easy to use application, which provides a multitude of functions for designing and managing a professional homepage. The software targets newcomers and advanced users alike and at same time is more than just a content management system. Additional features include and domain configuration, access statistics, FTP functions and user accounts. This unique software comes with HTML, CSS, text and image editors, provides a forms and newsletter system, allows editing of dynamic menus and databases and provides additional modules like a shopping cart, guest book, forum, photo albums and much more. What is a CMS? Content management system, CMS, simply means creating and maintaining homepages in a shared environment. The goal of bluetronix software is to provide users with an interface to create and manage professional homepages without having to know programming languages or HTML. What is a online-software? An online software like bluetronix CMS can be used without having to install it on a local hard drive. It is running online, accessible through an internet browser. Advantages of online-software Quick and easy access through different computers in the office, at home or an internet cafe. You are always editing the current version of your homepage. This is essential especially when different users are working on the same page. No local setup or data backup required. All data will be backed up on the server. You will always be using the newest version of bluetronix, because software updates are run automatically on the server. System requirements To use bluetronix software, you need a computer with Internet access and Microsoft Internet Explorer version 5.5 or higher. Mac users need Windows desktop installed. 8

9 Note! This is necessary just for creating and editing web pages, while it is possible to view them with any internet browser. Internet Explorer is required for creating and editing of homepages, while it is possible to view online pages with any internet browser. Security advice The customer is obliged to keep their password that was supplied by the internet service provider (ISP) secretly. Do not give out passwords to a third party! Responsible handling of information is a basic requirement for data security. Any liability concerning claims, consequential losses, indirect losses and loss of profit or assets are excluded. For further information please refer to our general terms and conditions. 9

10 Quick start This chapter outlines the different functions of bluetronix software. The software is installed ready-to-use and provides templates for your first homepage. You can start immediately customising your own website. Edit mode login to the CMS D Main menu Edit-Buttons Editing a site Editing a data record Editing the menu changing the navigation bar Changing the layout using a layout template Displaced display - screen resolution Edit mode login to the CMS First open your Internet Explorer and type the address of your website, e. g. You will find this information in your access details. Enter /edit/ in the address bar of your browser, e. g. After entering your user name and password, proceed by clicking the Login button. Please make sure to type your user name and password exactly as stated in the access details. The input is case sensitive. 10

11 After successfully logging into the bluetronix software, you are now in edit mode. The top part of the page shows the main menu while the bottom part displays your website ready to be edited. Main menu Refresh display Help User management, create member-of-staff, registered user or groups Page management, password protection, file upload and download Layout, frame alignment, colours, background and CSS options Shopping-cart system, guestbook, forum, photo album, newspage module etc. Database, Database management, import and export, MySQL commands Statistics, access analysis, single visitor analysis, space management Contract, upgrade subscription, change user details, change payment method, domain management, , management, webmailer, assistance to set up Outlook and Thunderbird mail Newsletter, send newsletter, newsletter address system FTP, FTP programme, FTP access Extras, form archive, home-page import, font size Logout 11

12 Edit buttons After successfully logging into the bluetronix software, you are now in edit mode. The top part of the page shows the main menu while the bottom part displays your website ready to be edited. Edit site, opens the page in the editor Opens the menu editor New record, adds a data set at dynamic sites Edit record, edits a data set at dynamic sites Delete record, deletes a data set at dynamic sites When moving the mouse cursor over a button, additional information will show up. The edit button for example shows the file name of the site you are currently editing. Editing a page The following example shows how to edit the index page. Navigate to the page and open the editor by clicking on Edit. 12

13 The editor provides text and web specific functions. You can write and design text or copy text from external text sources. Write a text as usual or insert an image. To save your changes press the Save page button. After your modification has been saved, the site is immediately accessible online. Please refer to the chapter called website editor for a detailed description of how to handle the editor. Editing a data record The editor allows you to edit data sets from the shopping-cart system, the news page or the guest book. The following example shows the change of a News page entry. To navigate to the news page, just click at Newspage. The news page with two data sets (data set 1 with red frame and data set 2 with green frame) and the respective edit buttons You can edit the content of a data set by clicking on the data set edit icon located at the top left corner. which is 13

14 After you have modified your data, for example you have changed the topic or an image, save the new content by clicking on the Save button. Confirm that the outcome displays correctly on your homepage. The icons New record and Delete recordt are used in a similar way. For further information regarding databases and dynamic sites please refer to the chapters Database, Dynamic sites and Basics about modules. Editing the menu Changing the navigation bar This example shows how to insert another menu item into the navigation bar. Dynamic menus that are in edit mode show the Edit menu icon in the top left corner. Clicking the Edit menu icon opens a menu editor. 14

15 To show the functionality of the editor let s create a new menu entry called Contact right below the News page entry. To insert a new menu entry, click onto News page and then on Insert menu item below icon. Enter a name for the menu item ( Contact ) in the blank field. Finally save your changes by clicking on Save. Default settings will automatically link the new navigation bar entry with the underlying web site. Therefore creating a new link manually is not required. After closing the menu editor you can double check the result on your homepage. A detailed description of creating and designing a menu can be found in the chapter Dynamic menus. Changing the layout using a layout template Depending on your subscription, a number of design templates are available. Find the Layout -> Design Templates icon in the main menu and click on it. 15

16 First select a design and confirm your choice by clicking on Load layout. Close the layout window and double-check the result by opening your homepage. A simple method to change a layout is provided by the Style Assistant Layout -> Style assistant. You can easily edit colours, images and the background of a layout. The bluetronix software includes a user friendly interface to create and design an individual layout. It is possible to fit different layouts within different sites, like the shopping-cart system s sites. Furthermore a CSS editor is part of the application and can be used without knowledge of the programming language. For further information about creating layouts please refer to the chapter Website layout. Displaced display screen resolution At a screen resolution of 120 dpi or different font size settings in the browser might shift the display of fonts within the page. In order to make optimal use of bluetronix software, you can adjust the font size within the main menu Extras -> Editor font size. Adjust the size of your fonts so that the text does not overlap the grid lines, as shown in the picture above. 16

17 Homepage editor The homepage editor (HTML editor) simplifies any work that needs to be done on your website. No programming skills are required. Basic functions These are the main menu icons: Open page, starts the file management Save page Save page as - saves the page under a different name Start page again Cut Copy Paste Undo last action Redo recent action Examples showing how to use cut, copy, paste To copy objects like text, images or tables, select the object and click on the Copy symbol. Now click onto the part of the page, where you want to paste the new object, and click on the Paste button. 17

18 Text design Following functions for text editing are available. Simply select the text and click on one of these icons. Bold letters Italic letters Underline Superscript Subscript Text colour Text background colour Remove text format Font type Font size, input box to type in the font size Text alignment Left-aligned text Centre-aligned text Right-aligned text Centre justification Remove format, deletes text alignment Consecutive numbering Doted list Indent more, increases paragraph indention Indent less, Less paragraph indention Web related functions Settings Templates Menu settings Position Relative, releases object HTML code view Search search text in website and code view Insert link Remove link Images - Image management Documents - Document management Insert table enables or disables the Table Menu bar FTP folder access via FTP 18

19 Insert divider bar line break Insert form - Creating forms Modules and Plug-ins - Special objects like Ticker, Counter, Time/Date, Slideshow, Mouseoverimage CSS settings Insert special character Creating links A link can be a text, part of text or an image. Select the text or image in the editor and click on Insert link. In the pop up window click on Select page. The following example shows how to create a link to the contact.html page: In the file management click on the page contact.html and confirm that you would like to open this page by clicking Apply. 19

20 Confirm again by clicking on Insert in the link window. Save the page, close the editor and double check the results. External links links to other websites External links are links referring to other websites but your own. Again select the text or image and click on Insert link. Now enter the web address (URL) you want to create a link from your page to, for example If you want the new website to pop up in a new browser window, you can configure this through the category target New_window. Confirm by clicking on Insert in the link window. Save the page, close the editor and doublecheck the results. Handling images to upload images With the help of the Image management you can transfer images from your local hard drive to your web space and use them in the editor. Select image folder Edit image, see Image editor Delete image Download image The following example shows how to upload an image and use it in the editor. 20

21 Start the image manager by clicking the Image management button. Click on Browse and select an image file from your local hard drive. Click on Open and then on Upload image. To add the image, simply select it and press Place image. An image file needs to have a.jpg,.jpe,.jpeg,.png or.gif file extension and must not be larger than 1 MB. To upload other files, please use FTP access. Image menu bar When you select an image loaded in the editor, the image menu bar will pop up immediately. Here you can change image size, image title, border colour and border width. The option Constrain Proportions fits the picture automatically within a selected image size. The option Smooth sharpens the image (smooth edges). The option Auto resizes the picture to a predefined image size. The following example shows how to insert an image into the editor. The file in use has a resolution of 640x480 and is of 95 KB small, it has been inserted into the image editor in different sizes. Image with 250x188 pixel, adjusted and 'Constrain proportions' switched on, file size 28 KB Image with 150 x 188 pixel, Adjust and Clip switched on, file size 18 KB Image with 250 x 100 pixel, Adjust and Clip switched on, file size 17 KB 21

22 An image can be used at different positions on the webpage with different resolutions. The images will be resized by the bluetronix software, therefore it is not necessary to edit the images beforehand. Changing the source picture in the image manager will result in a change of all versions of this image. Image editor The image editor allows you to edit a picture conveniently without the need of any additional software. Open image Save image Save as Zoom parameter Undo Redo Flip vertically Flip horizontally Contrast Brightness Clip and resize image, clip selection frame Unselect Width in pixel Height in pixel Constrain proportions to remain constant proportions when changing image size 22

23 Resize image Restore image properties to original Rotate (degree) Rotate clockwise Rotate anti-clockwise Inverted image, converts image to negative pattern image Grey-scale image, converts image to monochrome colours Image processing The following example shows how to edit an image by clipping it, flipping it and saving a new version with its contrast and brightness adjusted. Original Edited image Start the Image management, select an image and click on Edit image. To clip the picture click the left mouse button, hold it down and define the selection frame by moving the mouse pointer. Now press the symbol Clip and resize image. Finally, to flip the image press the Flip horizontally button. The next step is setting contrast and brightness of the picture. Use the respective fields and enter +2 at the contrast field and 1 at the brightness field. If any step does not produce the desired outcome, you can Undo the action. After finishing your modifications, save your changes by clicking on Save. Document Management Uploading documents The document manager enables you to upload documents like PDF, DOC, XLS, ZIP as well as media files like WAV, MP3, SWF, MOV etc. from your local hard drive onto your web space and use them in the editor. Depending on the file type, a document will be inserted so that it will be displayed automatically with the respective programme. This means that clicking on a PDF file, starts a PDF viewer. If the document is a ZIP file, a download popup window will appear or if it is a MOV or MP3 file, the media player will start. 23

24 Select folder Download preview file, Preview in new window Delete file Download file, saves file on your local hard disk Uploading a PDF file The following example shows how to upload a PDF document and use it in the editor. Start the document manager by clicking on the Document management symbol. Click on Browse, select a PDF file from your local hard disk, click on Open and then on Upload file. To insert the document, select it and press the Insert file button. Now close the document manager and save your website. Check the result by clicking onto the file name at your homepage and the PDF file should opened. Uploading a ZIP file The following example shows how to upload a ZIP file and use it in the editor. Start the document manager by clicking on the Document management symbol. Click on Browse, select a ZIP file from your local hard disk, click on Open and then on Upload file. To insert the document, select it and press the Insert file button. Now close the document manager and save your website. Check the result by clicking onto the file name at your homepage and a download dialog will appear. A document file must have one of the following file extensions: tif, fla, swf, wav, doc, wri, txt, xls, pdf, csv, zip, mpg, mov, mp3 or ppt and the file s size must not exceed 10 MB. If you want to upload a bigger file, please use FTP access. 24

25 Tables table menu bar Tables are an important design tool for websites, allowing a precise placement of elements within HTML pages. Inserting tables In the editor click on the button Insert table. To highlight a table you can change the settings for background colour, border colour and border width. Enter the number of rows and columns and confirm by clicking on Insert. When clicking on a table/table border in the editor the table menu bar will appear automatically. Insert row (below the selected row) Delete row Insert column (on the right side of the selected column) Delete column Table s total width in pixel or percent of the site s width Table s total height - in pixel or percent of the site s height Cell offset- defines the offset between text and table cell Border width Border colour Table s background colour Cell background image for each cell possible Remove a cell s background image Cell background colour define colours for the entire table or for each cell Cell s width - in pixel or percent of the table s total width Cell s height - in pixel or percent of the table s total height Vertical text alignment Invisible tables and transparent tables A table without border can be used for placing images and text precisely on your site. The following example shows how to place two images with subtitle next to each other. 25

26 In the editor, click on Insert table. Select two columns (two images next to each other) and one row. Because the table is used for defining the position of the images supposed to be invisible on the page, define the border width as zero. Confirm your selection by clicking on insert.the table border width zero is shown in the editor as dashed lines. Those lines will not be visible on your web page after you saved it. Finally, insert an image from the image manager into the left cell of the table and give it a subtitle. Do the same with the right cell. After saving your page you can check the result. Forms Visitors of your web page can fill out forms and you will be able to receive their feedback. An advantage is that your visitor will not need to have an address or an client to be able to fill out a web form. The editor allows you to create forms without the need for any programming skills. The bluetronix software adjusts fieldnames and form objects automatically. Previously sent forms get saved in a form archive Extras -> Form archive. Other features include form forwarding to an account and automatic sending of confirmation receipts to the customer. The data transfer is either in plain text or in HTML format. 26

27 The following example explains how to create the contact form as displayed above. A transparent table with border width 0 is used to arrange the form elements on the homepage. The editor displays forms with a purple coloured dashed border. Attention needs to be paid to the borders, when there is more than one form within the page. Inserting a drop down box First write Title in the left cell in the first row of the table, then go to the cell to the right and click the Form symbol. 27

28 Click on Drop-down to make the field a drop down list and give a descriptive name, e.g. Title. The Values field will show a list of possible selection, all separated by an underscore ( _ ). Insert a single line text field Change into the second row and type First Name as field name, then click into the right field and open the Form window. Enter First Name as field name and check the Required Field box. This field becomes mandatory to be filled out before the form can be send. It is possible to define default values for fields. In our example we leave it blank. Confirm your changes by clicking on Insert. In the editor you can adjust input field length and width. Just select the input field you would like to modify and drag it to the desired length. If you enter as a field name, the form sender will get a confirmation mail if they submitted their address. Submit button Let us now insert a submit button. A click on this button triggers the form sending process. Open the Form window again and select Button. Leave name and value fields blank and make sure the submit function is switched on. Click on Insert. Additional functions like Reset, Back, Print, Refresh and normal buttons can also be found at Form -> Button -> Functions. Form options Finally set the form options. In the editor s form window Form click Options. 28

29 Enter an address to receive any feedback from visitors of your homepage. Assign a form name for example Contact form, this will be shown as the subject line in an message as well as the form name in the form archive Extras -> Form archive. In the field Target page define a page that will be displayed to your visitor after submitting the form. A possible example would be Your details have been sent successfully this text is set as default. The archive type defines the way data will be sent: Text (send as plain text) or HTML ( recipient will receive form in HTML format). Testing a form Save the page, close the editor and test your form. Fill out all input fields and click the Submit button. If a required field is left empty, a warning message will pop up. Open the form in the form archive in editing mode Extras -> Form archive, forwarding address, you can check your s now. On ways how to install the form module, refer to the chapter form module. 29

30 Received form at HTML transfer mode in the form archive Received form at HTML transfer mode in the programme For further details see Form module. 30

31 Modules and plug-ins Depending on your subscription several modules and plug-ins are included into the application. Standard out-of-the box functions are ticker, date/time, slide show, mouse-over image and detailed image view. Modules and plug-ins like the slide show Inserting a ticker In the Editor click on Modules and plug-ins, select Ticker and enter the ticker text into the text field. Finally confirm by clicking on Insert. Inserting the date 30/06/2008 format In the Editor click on clicking on Insert. Modules and plug-ins, select Date in DDMMYYYY format and confirm by Inserting the date 30 June 2008 format In the Editor click on clicking on Insert. Modules and plug-ins, select Date in DDMMYYYY format and confirm by Displaying the current time In the Editor click on Insert. Modules and plug-ins, select Current time and confirm by clicking on Inserting a slide show In the Editor click on Modules and plug-ins, select Slide show. Open the Image management to the sequence of the images. Then set a time delay time and confirm by clicking on Insert. 31

32 Inserting a mouse-over image A mouse-over image is an image that changes when a mouse cursor moves over the image. In the Editor, click on Modules and plug-ins. In the following selection choose Mouse-over image. Use the Image management to insert a primary and secondary picture and confirm by clicking on Insert. Small size and full size image view Loading an image with its original resolution is not always practical, because of limited web space or considering loading times of web sites. To provide an image, that has more information than the thumbnail, a detailed image view can be used. The detailed image view consists of a thumbnail and the original picture. If a visitor clicks on the smaller preview image, the original image will pop up in a new browser window. In the Editor click on Modules and plug-ins. Choose Detailed image view. Use the Image management to upload the image in two different resolutions and confirm by clicking on Insert. 32

33 CSS editor stylesheets The CSS editor allows you to use CSS features without having to learn programming skills. It provides you with a wide range of design tools for tables, paragraphs and images. The application makes it easy to define colours, font properties, border, background, etc. and preview them. The top part of the CSS editor window shows a class drop down list, where you can select classes previously created by you. The field HTML tag shows the respective tags, for example P TD TR TABLE. The tabs refer to the corresponding settings for the object. To assign an option make sure that the desired option tag is active. The bottom part of the editor window shows a preview of the setting and the selection of element types available. Select the appropriate element type to optimise the preview Display. CSS example The following example shows how to use the CSS editor. The intention is to create a text design as seen in the picture below. Open a new page in the editor and enter your text. High-light the text and press CSS- Settings. Click the font tab and set a new font type, colour and as style, e. g. italic. Then go to the background tab, enable the background image option and select a background image 33

34 using the image manager. Now click on the border tab, activate the border option and set a border colour. The input field lets you define the border width in pixels, e.g. four pixels. On the right-hand side chose the line type, e.g. double. A review is available to check out your changes so far. Now go to the width/height tab to change the width and height of your text, e.g. 300px width and 200px height. Finally you define an offset between text and border, here this is 20, 40, 40 and 20 pixel. Confirm the settings by clicking on Apply and double-check the result. For further information about the CSS editor and the creation of classes, please refer to the chapter CSS editor and layout Special characters The editor allows you to insert some useful HTML. Special characters, which will be conform to 34

35 HTML code view The editor includes a so called HTML code view. Experienced web page designers can optimise their website by using HTML, Java and CSS programming languages. The code view is an additional feature for experienced users, it is not necessary to have any programming skills to use the general bluetronix software. The HTML code view displays different tags in different colours to create a convenient overview. The code view lets you change the whole HTML code including <HTML> <HEAD> and <BODY>. Code view example Open a new page in the Editor and swap to the Code view. HTML Tags are displayed in brackets: <... >. Search <BODY> and enter following line: <b>this is the -bold- tag</b> By clicking again on Code view again, you are back in normal editing view. Now the text is displayed in bold letters. Again go to the Code view and enter the following code: <a href="javascript:alert('hallo')">click here</a> Change back to normal view and Save your site. Close the editor and click on the string Click here on your homepage. This line of code <a href= >... Text... </a> creates a link. The target of the link is defined by href=.... This example uses a Java Script function called alert, which results in a popup window displaying Hello. 35

36 More details on how to use HTML, Javascript and CSS on web pages is available in various news groups and forums. Site settings The Settings icon allows you to enter a name and a title for your web site. Page Title The title will be shown in the top bar of a browser window. Search engines use titles as an important indicator and refer to your page via its title. By providing a descriptive and meaningful title, you help future customers in finding your web pages. Background and layout Here you can assign layout classes to a web site. For example if you want to show content in the left window of a web page, you would select the class Left window. The page layout can be defined the default setting here is Standard. If you want to have a page without any layout, select Single page. For further information about layouts, please refer to the chapter Creating layouts. Keywords, author search engine settings With the field Author, you can provide information about the author of the web page. By entering meaningful keywords describing the content of your page, you can make certain that search engines will find your pages on the web. For example, you want to describe the product multifunctional printer. Very few people will actually enter the exact phrase ( multifunctional printer ) as a keyword. It is therefore better to supply additional related keywords, like print, printer, fax, scan, copy machine and so on. Avoiding search engine entry of certain sites You can set options for search engines to not include your pages in their index. Default setting is Current page yes, linked page yes, if you do not want to have a page as a separate search engine entry, you can set the option Current page no, linked page no. 36

37 Editing PHP code in the text editor The bluetronix software allows you to edit PHP code of dynamic web pages like the shopping-cart system or the guest book or add code to any web page. PHP is executed on the server and does not rely on the client s browser. The following example shows how to use PHP code. Click on the Settings icon and then on PHP script. In the new window enter the following code: $P1 = $_GET['P1'];; if($p1 == "") { $P1 = "execute without parameter"; } else { $P1 = "the parameter is".$p1; } $LayoutHTML = ereg_replace(' PHP_Message ',$P1,$LayoutHTML); This piece of code reads in a parameter $P1, checks if it exists and displays the respective text. The last line means that the text marker PHP_Message gets replaced with text. Confirm by clicking on Apply. Now enter the text marker PHP_Message at any place in the editor. It is possible to set the marker in the editor mode as well as in the HTML view. Save the website and double-check the result. When you open your web page now, a text execute without parameter will appear instead of the above mentioned text marker. To open the page with a PHP parameter enter in the address bar of your browser. Now your PHP script will read in the parameter for the URL and display the text the parameter is Hallo. The PHP code editor is an additional feature for experienced web page designers, it is not necessary to have any programming skills to use the general bluetronix software. The user must have administrative rights to be able to use PHP script in the editor. 37

38 Templates for page structure Each layout provides a range of different templates to help you designing your website. These templates contain predefined tables that divide pages into different parts and create a consistent design. The function can be executed by clicking onto the Template icon. Select a template and click on Insert. The picture below shows an example template. It is very easy to customise a template. For example select the title and change the text. To change an image, highlight it and go to the Image management. This will keep the current image size unchanged. Elements that are not required can be selected and deleted. Customising templates with the CSS editor (advanced) Template customisation is particularly advantageous for web designer. To customise templates, please refer to Layout -> Style assistant or Layout -> Edit style types. Following classes are important within the CSS editor (edit style types): 38

39 Furthermore each template has an ID (TemplateA, B, C, D, E, F, G, H, TemplateI) to edit the respective template s class. For example, if you want to change the class TabCellTop of TemplateB to a different background colour, you must access the class TemplateB.TabCellTop. Open object offset Open object offset can be used to define the position of elements like tables, images, etc. independently. This enables you to move images over each other with the help of different layers. To experience how Open object offset works, insert two images (one underneath the other image) in the editor. Select the first image and click on the Release object button. Now you can move the image freely within your page. After repeating the same process with the second image you can move the two images until they overlap each other. The sequence of layers depends on the sequence of inserting the images. Here the image inserted last, forms the top most layer. 39

40 Dynamic menus drop down menus The bluetronix software provides five different types of drop down menus. Dynamic menus allow the creation of a complete navigation while still having a handy overview. Because only the current submenu will pop up, your homepage doesn t look overcrowded and the visitors are not overwhelmed and can easily navigate around your pages. The menu editor allows you to create an unlimited amount of menu items and submenus. It is possible to customise the design of each menu item and/or of each submenu with the help of the CSS editor. Button options like Mouse-over or On-click can be defined by a style class. It is also possible to have different types of menus on one homepage as seen below. Menu types The following screenshots display the five menu types. The horizontal menu has a drop-down submenu, while the third menu and all following submenus open to the right-hand side. The horizontal menu has a drop-down submenu, while the third menu and all following submenus open to the left-hand side. 40

41 The vertical menu opens all submenus to the right-hand side. The vertical menu opens all submenus to the left-hand side. The vertical menu opens each submenu below the respective menu item by clicking on it. If selecting another menu item, the respective submenu will open after all other menu layers have been closed. 41

42 Menu editor While in editing mode all dynamic menus show the Edit menu button in the upper left corner. This opens the menu editor directly. To open the menu editor while a page is edited in the HTML editor, first Load site, then select the dynamic menu that needs to be changed and then click Edit menu. Insert main menu item, always first layer Insert submenu item, one layer below current position Insert menu item above, same layer Insert menu item below, same layer Delete menu item Create link, using the site management or link to external home-page 42

43 Delete link Link preview, shows the current link target in a new window Create pages automatically, links the menu items without target to new sites automatically Menu type, select the menu type Button preview, preview of the layout Button settings, opens the CSS editor to customise the button Apply the button layout to all menu items of the current menu layer Apply the button layout to all menu items of the whole menu The default settings automatically create a web page linked to the new menu entry. Therefore creating a new page or a link is not necessary. 43

44 Site management - Page management The file manager can be found at the main menu s Site management. This window allows you to search your hard drive for suitable files and upload them onto the web server. Create file Create directory Delete file or directory Copy file Paste file Preview file Download file Password protected files and directories, see Secure areas Edit, opens the file in the respective editor for example the Image editor, if it is an image, the HTML editor if it is a HTML file or the Text editor if it is a text file. File type filter, show all files, just HTML files, just images or just documents Rename file or directory The small version of a file manager can be opened within the bluetronix software by clicking the File management symbol. Here files and directories can be created, copied and renamed. When creating a link, you can use the file manager straight away to create a new file and link to that page. 44

45 Text editor All text files with the file extensions.txt,.css,.php,.js,.pl etc. can be edited with the text editor. To open a file with the text editor, go to the Page management and open a text file in the Script directory. Open page Save page Save page as Start page again Cut Copy Insert Undo Redo Search To make text easier to read and check, set tabs in the text editor. 45

46 User system The bluetronix software distinguishes three types of users. They are administrators, staff members and registered users. Admins An admin has access to all functions of the software. They can create sites and directories, create staff member accounts and change their passwords. They have access to PHP code, to the site manager and to the FTP access. Staff members A staff member can actively participate in designing the website. They can be authorised to create web sites and directories in certain user directories. An address and certain software modules can be delegated to staff members. They can be promoted to an admin. Registered users and groups Normally these users do not have access to the editing mode, but access to certain password protected areas can be delegated to them. For example forum sites or internal sites are password protected. Changing the admin password In the main menu open the User management. Click on Administrator password / User password. Enter the previous password and a new password twice for confirmation. Then click onto Change password. After changing the password successfully, log out by pressing Logout and log in again with the new password. Staff member group management The following example shows the management of staff members. The aim is to create a staff member and to authorise them to edit pages in the News directory. First open User management -> Staff member log-in management. At New user enter a user name, for example editor and click on Create. The next step is to assign a password to the new staff member. Click on Password next to the user name. Enter a new password and to confirm the typing enter it again. Now click on Change password. To authorise this newly created user account, click on Change. 46

47 This opens the user settings window, where you can authorise a staff member to access pages, statistics and . It is possible to assign one or more addresses to a staff member. Just enter an address (separated by space if more than one) into the field. This allows the user to access these addresses, but not to create or delete addresses. addresses need to be created beforehand as shown in the chapter Create addresses. To authorise a staff member to manage all addresses, activate the module. The option assign full admin authorisation promotes the staff member to a full admin. This admin account can use all functions of the software, except for changing the password of another admin account. Within the user directory you can assign directories for images, documents and sites to a user. By leaving a field blank the user account has no right to upload files or to create sites and directories. In this example, the directory /img has been assigned as the location to save images. Take care not assigning the same directory to multiple users to avoid interference. Through the field user can edit the following directories certain sites and directories can be assigned to the staff member for editing only. This means they are only allowed to edit existent sites, but are not able to create or delete any pages or directories. In this example this is the /News directory. Finally Save your new settings. To check the new account, Log out and login again using the newly created staff member name. 47

48 Blocking an account Sometimes it makes more sense to block an account than to delete it. As an example a registered user violated forum rules. If their account is blocked, its settings will be saved in the account manager and a new attempt to register with the same address will fail. Furthermore a previously blocked account can be unblocked by an admin. This is not possible with a deleted account. To block an account open the User management ->Staff member log-in management or the Account manager -> Registered users and groups. Select the user account and click Block. The status symbol of the account will turn red. All attempts to log-in with this user account will be denied. Unblocking an account An administrator has the authority to change a user s password without knowing their current password. This is necessary if a user forgot their password. At User management ->Staff member log-in management or User management -> Registered users and groups select the user name and press Unblock. The status symbol will now be green. From now on the user has access to his account again. Assigning a new user password As admin you have the authority to change a user s password without knowing their current password. This is necessary if a user forgot his password. At User management ->Staff member log-in management or User management -> Registered users and groups click on Password next to the user name. Enter a new password and for confirmation re-enter it again, then click on Change password. Give the new password to the user. The function forgot my password is accessible for registered users in the module secure areas. Using this module, allows users to request a new password automatically. For more details see Secure areas. Registered users and groups For further information please refer to the chapter Secure areas. Sites/directories with password protection secure areas For further information please refer to the chapter Secure areas. 48

49 Website layout The bluetronix software creates layouts compatible with search engines and browsers by not using frames. It is possible to create an unlimited amount of different layouts and assign them to pages or whole directories. The server always automatically loads web sites in their layouts. It is easy to implement sites in multiple languages and layouts. You can adjust the design for every single detail. Everything is editable, making it possible to create completely individualised designs. Professionally designed template layouts can be loaded onto the server and can be customised individually. The extensive options give you free rein to your creativity. Depending on your subscription you find a range of template designs (the minimum is one template with the Basic subscription) bluetronix software layout conception The layout consists of a so called layout mask, a CSS class, that defines the layout in detail and a PHP script, that fills the layout with content and sends it to the browser. This process is implemented on the server and does not rely on the client browser s settings (like Java settings or cookies). A layout can be applied to a page or a whole directory including its subdirectories. The following flow diagram shows the processes of loading home.html. 49

50 The layout is created dynamically while the page is loaded, with the advantage that the implementation is handled by the server and therefore prevents any possible problems that might arise by using frames and framesets, like linking to sub-sites by search engines. Nevertheless each website is editable and can used in a frame-like manner, so that it is not necessary to re-create the page when it is displayed at different locations more than once. 50

51 Editing the layout Layout and areas In the main menu open Layout -> Edit layout. Within the layout settings you can define the window division, area names, area size and pages loaded into each area. Save current layout setting Save layout as Layout name New layout Delete layout, the standard layout a the single page layout is not deletable Apply layout to directory Area settings for each area, background settings Scroll bar, enable or disable a scroll bar in the active area Select Page - sets the source page for each area (each area has a starting page) Preview the current set page which will be loaded into the area The left third of the window the window division, which allows to activate/deactivate areas. The section to the right shows the active area s name, width, height, the optional scroll bar and which page to load. The area names correspond to a class name in the style.css file. The class BodyArea defines the background of a page (outside white area in the window division). The area size can be defined in pixels or percent. Not all areas need a web site applied. The design can be done by the CSS class as well. Only areas that have contents should have a site applied. 51