Page Design, Layout, & Module Explanation:

Transcription

1 Page Design, Layout, & Module Explanation: Page Overview: Navigate to your assigned page on the website. Once on your page click login At the login screen enter user USERNAME & PASSWORD and CLICK Login See IMAGE on next page for what your BLANK PAGE will look like 29 P age

2 ABOVE is your blank page to work with The page is sectioned off in a grid style layout to aid in module placement To add a MODULE click on the Module dropdown located in the CONTROL PANEL at the top of the screen After you choose a MODULE you need to choose a placement on your page. To pick a placement CLICK on the Pane dropdown located in the CONTROL PANEL at the top of the screen Once your MODULE and PANE placement is decided you can determine whether you want to place the module at the top or bottom of the pane and to the left, right or center of the pane by using the dropdowns located under the PANE dropdown To INSERT you MODULE into the page CLICK on the Green + Symbol Add button See IMAGE on next page for what your MODULE looks like after being insert into the PAGE 30 P age

3 Above is what your PAGE looks like with a MODULE inserted into it NOTES: You can add more than one MODULE to a PANE You can move MODULES to different locations of a PAGE by changing the PANE location 31 P age

4 Module Explanation: Text / HTML Module The most popular module is the TEXT/HTML module: USE: You can use the text/html module for a variety of purposes including but not limited to: Inserting PICTURES with your content Adding HYPERLINKS to different pages or websites CUT & PASTE content from existing documents There are two ways you can edit the TEXT/HTML module 1. Clicking on the dropdown: this gives you all of the editing functions 2. Clicking on the quick links: this give you the 2 main editing functions NOTE: Publishing your MODULE content to the web: There are three options associated with pushing your content up to the web: UPDATE: Clicking update will publish your content to the web CANCEL: Cancels your changes and will not publish your content to the web PREVIEW: Allows you to view you module content in a preview state before publishing the content to the web Drop Down Functions: 1. Edit Text: Microsoft Word like control panel to add or edit information to the module There are two views in the Edit Text Module: RICH TEXT EDITOR: Works like Microsoft Word BASIC TEXT BOX: Allows you to copy and paste HTML code into the editor 32 P age

5 The most common buttons used in the TEXT BOX are: IMAGE & LINK commands See the next graphic for how to UPLOAD and INSERT an image into the text box 33 P age

6 To INSERT an image into the text box CLICK on the image icon. The icon is a mountain and sun A new widow will pop up called Image Properties 34 P age

7 To UPLOAD a picture from your desktop CLICK the BROWSE SERVER button 35 P age

8 A new widow will open called IMAGE GALLERY. This will contain all of the images associated with the site. FIND your assigned folder by one of two ways. Your USERNAME or your DEPARTMENT name CLICK on your folder to open a new UPLOAD screen 36 P age

9 This is what the UPLOAD window looks like. To browse your desktop for a file to UPLOAD CLICK on the BROWSE button This will connect to your DESKTOP and allow you to pick your image file 37 P age

10 BROWSE your desktop for your image like you would for any other type of attachment (i.e attaching an image in outlook or uploading a photo to Flickr, Facebook, etc.. ) After you choose your image you are ready to UPLOAD it to the server 38 P age

11 In the above image you can see the PATH to your image and the UPLOAD NEW FILE link CLICK the UPLOAD NEW FILE link to post your image into your folder Your IMAGE is now it your folder to be linked to CLICK on the RED X in the upper right corner of the window to close the screen This will take you back to the IMAGE PROPERTIES window so you can insert the IMAGE you uploaded 39 P age

12 CLICK on BROWSE SERVER Navigate to your assigned FOLDER Choose the IMAGE you would like to insert Your IMAGE will then show in the PREVIEW WINDOW of the IMAGE PROPERTIES window See next graphic 40 P age

13 The TOP red arrow shows you the PATH to your IMAGE The MIDDLE red arrow allows you to resize your image. The sizes are directly related to one another so if you change the width it will automatically adjust the height for you The BOTTOM red arrow shows the IMAGE in a preview screen so you know you have the right image selected CLICK OK to insert your IMAGE Using the LINK command: 41 P age

14 To INSERT a LINK into the text box HIGHLIGHT the word, phrase or image you would like linked and CLICK on the link icon. It is the chain link icon. This will open a LINK PROPERTIES BOX Inside the LINK PROPERTIES BOX you can select how you want to link to another page on the site or to another page out on the internet. The most widely used way is to link to a page out on the internet. 42 P age

15 To link to a page on the internet type the URL (i.e. into the URL text box and CLICK OK To link to another page on the site CLICK on the BROSWE SERVER button This will open the LINK GALLERY window The LINK GALLERY gives you three choices of linking options. URL: Links to a page with a given URL PAGE: Links to a page within the site FILE: Links to a file stored within the site Below are examples of each screen shot for the three choices URL Screen Shot: Prompts you for the URL address in a text box 43 P age

16 Page Screen Shot: Prompts you for the PAGE to link to with a dropdown box of all the pages within the site 44 P age

17 File Screen Shot: Prompts you for the file location with a dropdown to all folders within the site Prompts you for the file with a dropdown to the images located within each folder 45 P age

18 LINKING NOTES: You can DISCONNECT a LINK by HIGHLIGHTING the word, phrase, or image selected and CLICK on the BROKEN LINK icon (broken chain link) which is to the right of the LINK icon. Drop Down Functions CONTINUED from PAGE 32: 2. Import Content: Only used if you have an existing page with modules on the site 3. Export Content: Only used if you have pages that you share information with on the site 4. Help: More of a FAQ help section 5. Online Help: Online support with access to the Dot Net Nuke forums 6. Print: Allows you to print the module 46 P age

19 7. Settings: Is where you can change the title of your page Once you change the title of your page you need to CLICK update to publish your change 8. Delete: Deletes the module from the page 9. Refresh: Works like refresh on an internet browser to refresh your page after updates 10. Move: Is how you change the placement of a module between panes on a page 47 P age

20 Documents Module The second most used module is the documents module. USE: You can use the documents modules for the following purposes: UPLOADING user manuals UPLOADING homework assignments UPLOADING any type of document that needs to be downloaded by an end user Above is what a freshly added DOCUMENTS module looks like There are two ways you can edit the DOCUMENTS module 1. Clicking on the dropdown: this gives you all of the editing functions 2. Clicking on the quick links: this give you the 2 main editing functions NOTE: Publishing your MODULE content to the web: There are three options associated with pushing your content up to the web: UPDATE: Clicking update will publish your content to the web CANCEL: Cancels your changes and will not publish your content to the web PREVIEW: Allows you to view you module content in a preview state before publishing the content to the web Drop Down Functions: 1. ADD A NEW DOCUMENT: Browse and choose a file from your desktop to upload to the module. 48 P age

21 Above is what your screen will look like when you select ADD a NEW DOCUMENT The TITLE text box is what will show on the web. This is where you will name the document you want users to be able to download DESCRIPTION is optional and will not show on the web. It is more like a note to you of what the document is about. CATEGORY is optional and will not show on the web. OWNER is the author or uploadee of the document LINK TYPE determines how to link to your document and where the document is located. URL will link to an external document housed somewhere out on the internet FILE will link to a document stored within your assigned folder (MOST POPULAR METHOD) FILE LOCATION you use the dropdowns to create the path to your document UPLOAD NEW FILE is what you will click to upload a file from your desktop to your folder. Its operation is similar to the image upload feature you learned about earlier. See the image on the next page. 49 P age

22 You will notice the screen looks similar to the last screen with one exception. You are given two choices (upload selected file & select an existing file) in place of the UPLOAD NEW FILE option and a BROWSE button. CLICK on the BROWSE button to open the desktop browsing window to select a document from your computer. See graphic below. 50 P age

23 BROWSE your desktop select a file and CLICK OPEN to insert it into the UPLOAD dialog box. See below graphic. 51 P age

24 After you CLICK OPEN your document and the path to its location are inserted into the UPLOAD dialog box. CLICK on the UPLOAD SELECTED FILE option to upload the document to your assigned folder Your screen will look like the above graphic once the file finishes the upload It will show you the FILE LOCATION and FILE NAME Once you are satisfied that the FILE LOCATION and FILE are correct CLICK on UPDATE to finish the upload to the documents module You will then be redirected to the main page screen with all of your modules. See graphic on the next page 52 P age

25 An end user can now visit the site and download the document by CLICKING on the TITLE of the document or on the DOWNLOAD option You will learn how to modify the layout and look of the documents module during the settings step a few page down Drop Down Functions CONTINUED from PAGE 48: 2. IMPORT CONTENT: Only used if you have an existing page with modules on the site 3. EXPORT CONTENT: Only used if you have pages that you share information with on the site 4. HELP: More of a FAQ help section 5. ONLINE HELP: Online support with access to the Dot Net Nuke forums 6. PRINT: Allows you to print the module 7. SETTINGS: Is where you can the title of your documents module and the layout of what details of the document you want displayed in the module. See graphic on the next page 53 P age

26 BASIC SETTINGS: Change the name of your module Set permissions on who can view the module and who can edit the module DO NOT FORGET to CLICK on UPDATE to initialize any changes. To change the documents details click on the + symbol next to DOCUMENTS MODULE SETTINGS. See graphic on next page 54 P age

27 USE the CHECK BOXES under the VISIBLE header to add or remove document details in the module USE the GREEN and ORANGE arrows to arrange the document details to an order of your preference DO NOT FORGET to CLICK on UPDATE to initialize any changes. When you CLICK UPDATE you will be redirected to your main page where all of your modules are located Drop Down Functions CONTINUED from PAGE 53: 8. DELETE: Deletes your module from your page 9. MOVE: Moves your module from one PANE to another PANE on the page 55 P age