Getting started: MAGIX Website Maker

Transcription

1 Getting started: MAGIX Website Maker 1 Getting started: MAGIX Website Maker Copyright MAGIX is a registered trademark of MAGIX AG. This documentation is protected by copyright law. All rights, especially the rights of duplication, circulation, and translation are reserved. No part of this publication may be reproduced in form of copies, microfilms or other processes, or transmitted into a language used for machines, especially data processing machines, without the express written consent of the publisher. All rights of reproduction are reserved. Errors in and changes to the contents as well as program modifications reserved. Other mentioned product names may be registered trademarks of the respective manufacturer. This product uses MAGIX patent pending technology. Copyright MAGIX AG, All rights reserved.

2 2 CONTENTS CONTENTS Getting started: MAGIX Website Maker 1 Copyright Fehler! Textmarke nicht definiert. MAGIX Website Maker 3 Introduction 3 Editing pages - Website Maker in action 5 Integration of multimedia components 11 Go live! - Publication of the website 15 The export function and its options 16

3 MAGIX Website Maker 3 MAGIX Website Maker Introduction About MAGIX Website Maker MAGIX Website Maker is a program used for the creation of websites and works with a so-called WYSIWYG editor ("What you see is what you get"). This means that what the designer sees in front of him when creating the website, is what he or she will see online. Changes are therefore visible straight away when the site is published. This way you can concentrate fully on the content and appearance of your website and don't have to deal with any complicated programming languages. The user interface 1. Menu: The "Menu" button opens the main menu. 2. General tools: Undo and reset of the last changes made. Copy, paste and delete the currently selected object. 3. Preview: Opens the website in a browser window for preview. The last saved state will be shown. This, however, is just a temporary preview. The website is not actually live yet. 4. The three buttons for opening the manager panel: A page manager for selecting the pages and objects you wish to edit. An object manager which serves as a source for design elements, text fields and media. Furthermore, you also get access to media from your Online Album and the option of directly uploading media. A properties manager, which provides editing functions for the object selected on the workspace.

4 4 MAGIX Website Maker 5. Clicking on the corresponding manager panel opens its content here. Page lists, object index trees and options palettes. 6. The workspace is the "screen" on which you create your website. The workspace shows the page corresponding to your selection from the page manager. From the object manager objects can be placed onto the workspace and edited from there directly with the help of the properties manager. On the homepage of the Website Service you'll find the option of immediately starting a demo of the Website Maker. MAGIX Website Service The main menu the "Menu" button. You can open the website management area via New: Creates a new website project consisting of multiple pages. You can select from a number of templates, which can all be freely modified. Load: MAGIX Website Maker lets you manage multiple website projects. Use this function to load one of your existing website projects. Save as: Saves the currently loaded website project. Delete: Irrevocably deletes the currently loaded website. Publish: Here you can publish the currently loaded website project to the Internet. Your pages can then be opened via your web address. Export: Exports the entire website with the option of integrating it elsewhere. This happens via the generation of the HTML code with which the website project can be integrated into another website. Complete export for re-use (for FTP transfers for example) is not possible.

5 MAGIX Website Maker 5 Settings: With settings you can set your website's page title, page size, positioning, background color, and much more. Consider saving your website on a regular basis as the individual pages of your project are not saved automatically. Editing pages - Website Maker in action A new Website Step 1: Select layout As a first step, select your layout from several, professional designs templates. Each layout already contains matching subpages. Click on the ticks to remove the page templates that you don't want on your website. You can also give your web design project a name.

6 6 MAGIX Website Maker Step 2: Edit pages The easiest way to insert objects is with "drag & drop". Open the manager panel "Objects". Select an object type (shapes, animations, decoration, etc.) Select the object you wish to insert into your site from the list below the object types. Click on this object and drag it onto the workspace. Alternately, you can use the "Insert" button to place your selected object onto the workspace. Alongside this you will see that "Text field" in the object tree is selected. In the list below (gray "Abc" rectangle), you'll find various types of fonts. Clicking on a rectangle and dragging it into the workspace moves the object to there. A new text field will be created. If you want to create other objects like pictures, frames, shapes or navigation elements, proceed in exactly the same fashion.

7 MAGIX Website Maker 7 Step 3: Edit contents In the second step you can customize your websites to meet your exact requirements and enhance it all with multimedia content, for example, photos, videos, music, text, effects, animations, and much more. The chapter Multimedia describes which types of media can be added and how to do it. To do so, select the page you wish to edit from the Page Manager on the left-hand side. By double-clicking on the page name, you can rename each page. To the right of the workspace, all page contents can be customized individually. You can edit text by clicking on the text field, deleting the old text, and entering the new text. In the properties manager you'll find options, with which you may already be familiar, for editing text. You can, for example, customize fonts, sizes and position or set links. Delete objects by selecting them from the object list below and clicking on the red "X" (delete). Every object can be moved simply by clicking on it and dragging it into position. Use the handles (arrows) on the corners of objects to change the size of each object. By clicking on the "Shift" key when changing the size, you can lock the object's proportions in order to keep the aspect ratio. Objects you inserted into the page can be edited there: All objects have handles. These appear when you click on an object. They can be used to scale, position and rotate objects.

8 8 MAGIX Website Maker Texts can be changed by selecting the text and then applying the corresponding modification from the Properties Manager below. The functions are ordered like in an office program. Step 4: Global settings on the page With settings you can set your website's page title, page size, positioning, background color, and much more. A closer look at the website settings: 1. Website title: This text can be seen in the title bar of the browser when previewing and on publication. 2. Page size: The horizontal and vertical dimensions of the website. 3. Position: Specifies where exactly your page will be placed in your browser. Top left, top center, left center or generally in the center. 4. Website background: The color behind your website or behind your menu and content. 5. Browser background: To the side of your website the space of the browser background can usually be seen. You can define its color here. Step 5: Publish Your website can now be published. So-called "Going live" actually means putting the website online so that everyone can see it. The chapter Go live! explains exactly how it works.

9 MAGIX Website Maker 9 The managerpanel Page Manager The Page Manager lets you easily manage and edit your pages and objects. Pages: In the page selection you can easily access your pages, with "New page" you can create pages and with the red "X" symbol you can delete pages you don't need from your website project. Tip: By double-clicking on an entry, you can rename a page. Objects on the page: To the bottom you can see a list of all of the objects on the currently selected page. Move the objects with drag & drop up and down in the list to move them into the foreground or background. The red "X" symbol serves to delete objects from the object list or entire pages from the page selection. If you wish to hide individual objects to make the overview a bit clearer, you can do this by clicking on the "Eye" symbol.

10 10 MAGIX Website Maker Object Manager The Object Manager contains the Object Library (sorted according to category) and the object selection. In the Object Library you'll find various objects that can be integrated into your websites. Click on the category in the upper section and select your object from the object selection below. Use drag & drop to easily move each desired object from the object list to the right onto the work area. Properties manager In the "Properties" men u you can customize the settings of each object. Select the object in the work area and click on the "Properties" button to the left. Now you can set all object-specific parameters. Tip: You can open the properties of each and every object on your work space by double-clicking on the object.

11 MAGIX Website Maker 11 Integration of multimedia components Life on the page MAGIX Website Maker provides you with lots of ways to put your multimedia files online. You can integrate your photos, videos, and music as well as amazing effects from templates into your personal website - this way, you can transform your website into a multimedia experience for your visitors. For example, you can add indigenous music from the country you visited to your travel reports or enhance them with short video clips from your last holiday. Media material How can I add photos, music, or videos to my website? You can add your own media to your website using the Object manager. In the Page Manager, select the page to which you wish to add your picture, music or video. Then start the Object Manager by pressing the "Objects" button. In the "My Media" category you can either insert the media from your Online Album into the workspace or from your computer into MAGIX Website Maker. To do so press the "Upload" button. Then select "Normal" if you merely wish to upload one or two pictures or select "Express" if you wish to upload lots of media or an entire folder. In the window that opens select individual or multiple files and entire folders from your hard drive. Files you don't need can be easily deleted from the upload list using the "Delete file" button. Once all files have been uploaded, you will be able to find them again in the Object Manager under "My Media" > "Uploads" > "Pictures"/"Music"/"Video". Now select the desired file and add it to the workspace via drag & drop. Alternately, you can use the "Insert " button.

12 12 MAGIX Website Maker Insert photos with drag & drop As usual, photos can be moved to the workspace using either drag & drop or the "Insert" button. Thereafter the picture can be place, rotated, and scaled using the handles. Attach picture frame In MAGIX Website Maker you'll find useful magnetic picture frames to enhance the appearance of your photos. Picture frames can be selected in the Object Manager from the "Picture frames" category in portrait or landscape format. Move the matching picture frames onto the workspace using drag & drop. Now go to your picture folder, for example, "My pictures" > "Uploads" > "Pictures". From here, select the photo to which you wish to add a picture frame and then drag it onto a picture frame. The picture snaps automatically into the frame. Size and position can be customized using the arrows. Insert slideshows Slideshows can be created simply by dragging an entire folder from the object tree from the symbol "Online Album" > "My Albums" onto the workspace.

13 MAGIX Website Maker 13 Audio player and jukebox You can use the object list to insert individual audio files which you uploaded as described above. If you don't want to insert individual audio files into the website, but rather a whole folder containing several files, there is a jukebox where there are lots of playback options. Simply drag an audio folder from the object tree from the symbol "Online Album" > "My Albums" onto the workspace. Video player Videos can be inserted just like photos via the "Object manager" as well. As usual, the video can either be added to the page using the "Insert" button or via drag & drop from the list. Multiple movies don't all have to be inserted as their own individual player, but can be set up as videoshows. Slideshows can be created simply by dragging an entire movie folder from the object tree from the symbol "Online Album" > "My Albums" onto the workspace. The "Videoshow" button starts a player which has an additional feature. Keep an eye on the red circle in the picture One of your website's visitors can open one of the videos from your videoshow and can freely fast forward or back to whichever video he or she wants to watch. Audio, video and slideshow player can be exported as individual objects from the page. Read more on this in the chapter Export.

14 14 MAGIX Website Maker Skins and playback options Player skins "Skins" change the appearance of your player. You can use them to customize your player to your the style of your website. Click on the object in the workspace you wish to change and open the properties manager. Afterwards you only have to click on the desired design from the "Player Skin" list to assign it to the object. Playback "The playback options" set how the player should work on the finished page. "Play automatically" starts the player as soon as the website opens. "Show playlist" shows a list of all photos/video/music tracks in the player. "Random order" selects a random file from the playlist on startup of the player and subsequently plays files in random order throughout. "Loop" plays the files repeatedly. A player with playlist will then be generated when the player is created as a slideshow, videoshows or jukebox. What this means is that media files from the "Online Album" folder will have to be inserted from the object manager. Volume sets how loud the respective player will be. Opacity lets you adjust the transparency of the player. This way objects that are located behind the player can be seen. Tint With this function you can change the color of a player.

15 MAGIX Website Maker 15 Go live! - Publication of the website What does "publish" mean? "Publish" doesn't mean that the website will be saved, but rather that it will be made accessible to the public. You will be asked to save your website before publishing. The term "to go live" is in common use nowadays as well when people mean "publishing". Just "saving" enables the halting of work on an incomplete page. The website will still not be available online. The Storage space status display to the bottom right always supplies you with information on the current amount of online memory being used. How is it done and what happens? Once all customizations have been made, you can preview your website via the "Preview" button. Some objects, for example, animations, text effects, slideshows, or videos, are not shown on the workspace, but rather only in the preview. We also recommend having another look at the Global Page Settings. Once you are happy will the results, click on the "Menu" button in the main menu and then on "Publish". One click is all it takes to publish your website. Your website is now online and can be opened anytime, anywhere by typing in the web address: " Now all you have to do is spread the word. Tell your friends and family, because your website is just half the fun without visitors.

16 16 MAGIX Website Maker The export function and its options Using the export function You may have noticed that video or even pictures appear on certain websites whose origin actually comes from somewhere else. So you end up asking yourself, "How do they get videos into blogs or a MySpace profile so easily?". The trick is that the actual video itself isn't uploaded, but rather a "peephole" to the original video is created. Basically, all you need is the HTML code. This tells the target page how big the "peephole" should be, what medium it's on, and where this medium is stored exactly on the Internet. MAGIX Website Maker provides you with the option of generating this code completely. And that's what happens when you press the "Export" button. But first of all: There are two different types of "Export" in the MAGIX Website Maker. The entire website can be exported or just parts of it, like, for example, videoshows. The export function doesn't allow the complete extraction of a website from a server as the synchronization of the guest book, counter and online album require that the site be located on the MAGIX server. Therefore, an FTP upload to a different server is not possible. The export function solves this problem by integrating the generated code into a HTML page so that your page can be run at any time over the domain of a different provider. Option 1: Export the entire website The complete website, including menus, all subpages, and media should be re-used. Select "Export" from the main menu. A window in which you can find the code for your website as a complete object opens and you can copy it here for use elsewhere.

17 MAGIX Website Maker 17 Option 2: Export of individual elements Video objects, slideshows, and audio players which were loaded from the Online Album, can be exported as individual objects. Click on the object you wish to export in the workspace. Open the Properties Manager. If required, scroll to the bottom border of the properties list to make the "Export object" button visible and activate it. A new window now opens where the HTML code of the object can be found. Export Example: Exporting and inserting into the MAGIX Blog Service 1. Activate one of the export functions. 2. Select the HTML code and copy it into the clipboard. (Keyboard shortcut: Ctrl + C) 3. Log into your Blog Service account. 4. Start the text editor by creating a new post. 5. In the editor's menu, press the "html" button. 6. Insert the code from the clipboard into the text field. (Keyboard shortcut: Ctrl + V) 7. Save your post - that's it!

18 18 MAGIX Website Maker Example: Integrating into MySpace Using the community platform MySpace.com, we describe in the following how to insert an exported object into your MySpace profile. Other platforms are usually set up in the same way. MAGIX cannot be held liable in any way for possible changes to the MySpace profile management or any resulting discrepancies in this example. Log into your MySpace account. Open your "Home" page. Beside your profile picture you'll find the "Edit profile" option. Now all you have to do is decide where you wish to integrate the object. For example, open the "About me" section via the "Edit" link. Insert the code from the export function here. Save it, and you're done! Example: Integrating objects into posts Take, for example, you want to integrate a video into a blog or profile comment, the code is simply inserted into the text as normal. If you compose a comment or post for such a community platform, an input field usually appears into which you can write your comment. Copy the code generated by the export function into this field. Save/Send the text - and you're done! The platform you insert your code into must support HTML programming language. If your post just spits out the copied code instead of the audio or video player, this will confirm that this community doesn't support HTML. If you plan to add videos, photos or music to comments on other people's blogs, it may be the case that the owner of that blog or profile has set his or her settings to not allow this. Not everyone wants to have videos and pictures of all kinds on his or her profile. Example: Integrating objects into Ebay

19 MAGIX Website Maker 19 Your sales chances will increase considerably if you create a slideshow or integrate a whole website into the sale description instead of a single photo. Create a new offer in your Ebay account. Once you have assigned categories, you'll get to a page that allows you to edit pictures, titles and descriptions. Activate the HTML tab of the "Description" editor. Copy the code generated by the export function into this HTML text field. Save the description and make sure that your entry is correct by using the "Preview" function of the editor and that's it, done!