MATERIALS & INFO 'Anatomical Topics' page

Creating 'Anatomical Topics' pages-series

'Anatomical Topics' pages
This page contains the materials needed to create 'Anatomical Topics' page series. These are meant to be series of educative pages about an anatomical theme or topic. The topic can be an anatomical structure, system or region or a specific anatomical subject. Ideally, the different aspects - gross anatomy, histology, embryology and clinical applications- of the topic are dealt with over the pages of the series. Example.
 
The pages can be used independently, but they are also linked together by a table of contents and a certain order. Beginners will appreciate the guidance of the ordered series, whilst students who wish to study only specific sub topics can also do so and faculty wanting to create their own combination, or reuse specific parts, are also facilitated.

Contents

 

    Manual

    Back to top

    What do you need?
    You need three things:

    Back to top

    Why would I use these templates?

    • Anatomical Topics pages are web pages. Web pages have an extra complexity compared to, let's say, a Word page: web pages need to scale and reposition elements to display well on screens ranging from desktop size down to mobile phones. The code behind the scenes to achieve this, is not always easy. Therefore there are templates. If you use these, you won't need to touch code and your content will display well on all screen sizes. Therefore, it is highly recommended to use them. They were carefully designed to this aim.
    • Using the templates will also give the 'Anatomical Topics' pages a consistent and professional 'look and feel', an aspect that many users appreciate.

    Back to top

    Getting started

    1. Think of an anatomical subject you want to present. Collect and/or create video's and imagery to show your subject.
    2. Split your subject into separate smaller subjects, with a page for each. This allows students to efficiently study exactly the items they need, and other faculty to easier reuse your work- by hyperlinking or combining pages in an organisation of their liking. Also, it probably improves search engine (Google, etc.) findability of the subject.
    3. Sign in (you need a teacher level account to create content - you can request such authorisation from the administrator - presently only anatomists from Dutch and Flemish and invited other educational institutions are applicable)

    Back to top

    Create 'base' pages
    To work most efficiently, it is advised to create 'base' pages for your series. You will need a Table of Contents page and a base content page, that you can then clone manifold.

    1. Create a Table of Contents page. To do so, go to the template page to create a Table of Contents page. Click the tab 'Edit' at the top to switch to edit mode. Clone (button at far bottom) the page and give the clone an own title (e.g. 'TOC Anatomical Topics - The coronaries'), add a thumbnail, and fill out the required metadata. Preferably use one thumbnail for all pages of the series to make it clear that the pages belong together. This thumbnail will be displayed on the pages in the gallery.
    2. Create a base content page. To do so, go to the template page to create content pages. Click the tab 'Edit' at the top to switch to edit mode. Clone the page, give the clone an own title, (e.g. 'The coronaries - introduction'), add the thumbnail and fill out the required metadata.
    3. Insert* the URL of your Table of Contents page in the page you made in step 2:
      • Right-click on the box 'IFRAME' that is at the very bottom of the page> a menu appears> choose: 'IFrame Properties'
      • In the field 'URL', replace the present URL by the URL of YOUR Table of Contents page.
    *You will need to do this only once if thereafter you create further pages by cloning this 'base page' you made.

      

    Back to top

    Create content pages

    1. To create a new page: clone a (base) page you made previously, and give the clone an own title.
    2. In the newly created page: copy and paste to your liking one or more page-elements, from the templates below. 
            Important! Include the preceding and trailing stars (*) of an element when you copy it, to ensure the HTML code 'under water' is correctly copied!
    3. Insert your content into the copied page-elements.
    4. When your page is ready, delete the copied stars. It is advised to leave the empty lines. This makes it easier to add or change content later on.

    Back to top

    Finally link the created pages of your series together
    For each page, do:
    Warning! First save your page as it is now! This will prevent losing your edits if you accidentally click a hyperlink on the TOC page or in the buttons, which would refresh your page.

    1. On the Table of Contents page: Add an entry with hyperlink to this page. Note: preferably edit the TOC page on a separate browser tab to prevent accidentally refreshing your page and risking losing work.
    2. Connect the 'Previous' and 'Next' buttons to the pages in your desired order, do the following for both buttons:
      • Right-click a button> a menu appears> choose: 'Edit link'
      • In the field 'URL', replace the present URL by the URL of  the desired previous or next page.

    Back to top

    AnatomyTOOL is meant for open content

    • Content stored on AnatomyTOOL itself should be licensed under a Creative Commons license or released to the Public Domain.
    • Content that is linked to, should, at least, be open access, and preferably also Creative Commons licensed or Public Domain.

     
    Back to top
     


    TEMPLATE PAGE-ELEMENTS

    1. Copy and paste the below elements you need into your content page. Important! Include the preceding and trailing stars (*) of an element when you copy it, to ensure the HTML code 'under water' is correctly copied.!
    2. In the copied page-element, replace the placeholder text/content  by your own text/content
    3. When you have completely finished creating your page: Delete the stars between the page-elements, that you copied together with them. Preferably leave the empty lines. This will ease later editing.

     
    Basic page elements:

    Special page elements:

    Icons of licenses

    Back to top

    Separator/introduction text section
    *

    Separator/introduction text section
    Usage: Use this text section for introductory text preceding a content-item or as separator text between content-items.
    Properties: This text section has no border. It is centered on the page. Its width is maximized to enhance legibility. It will scale and wrap the text on smaller screen sizes.

    *
    Back to top

    Pure text - item
    *

    TITLE TITLE

    Text-item
    Usage: Put textual content without images in a text item such as this. Replace 'TITLE' by your own title.
    Properties: This text section has a grey border with rounded corners. It is centered on the page. Its width is maximized to enhance legibility. It will scale and wrap the text on smaller screen sizes.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    *
    Back to top

    'Text with image'-item, with text wrapping left or right of the image
    *

    Fig. 1 Compilation Brain-Mind-thinking by GDJ @ https://pixabay.com/en/brain-mind-thinking-a-i-ai-2789677/ by GDJ, combined with Vitruvian Man by Leonardo da Vinci

    TITLE TITLE

    Text-with-image-item
    Usage: Put text with images in an item such as this. Replace 'TITLE' by your own title.
    Properties: The image is shown at its natural size. On smaller screens (e.g. mobile) the image will shrink. The text wraps around the image. This section has a grey border with rounded corners. It is centered on the page. Its width is maximized to enhance legibility. It will scale and reflow the text on smaller screen sizes.

    Manual:
    To insert an image:

    • Right-click on the image> a menu appears> choose: 'Image Properties'
    • Click: 'Browse server'.
    • Click: 'Upload'.
    • Click: 'Browse'
    • Choose your image
    • Click: 'Upload'
    • Click: 'Insert file'
    • !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.
    • Click 'OK'.

    To position the image on the right:

    • Right-click in the box below the image, bordered by the blue dash line> a menu appears> choose: 'Edit Div'
    • In the field 'Stylesheet Classes' it reads 'figure left'. Replace the word 'left' by 'right'. (Note: leave a space between 'figure' and 'right'.)

    *
    Back to top

    'Text with Image'-item, with the image centered and the text below it
    *

    TITLE TITLE

    Text with Image centered
    Usage: Use this to have an image above your text. Replace 'TITLE' by your own title.
    Properties: on smaller screens the images will shrink.

    To insert an image:

    • Right-click on the image> a menu appears> choose: 'Image Properties'
    • Click: 'Browse server'.
    • Click: 'Upload'.
    • Click: 'Browse'
    • Choose your image
    • Click: 'Upload'
    • Click: 'Insert file'
    • !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.
    • Click 'OK'.

    *
    Back to top

    'Text with image'-item with 'Show more' area
    *

    Figure 'Thinking of Anatomy'

    TITLE TITLE

    Text-with-image-with-show-more
    Usage: Use this item if you have so much text that you initially want to hide it.
    Properties: There is a button 'Show more'. Clicking that will display additional, initially hidden, text.
    For the rest, this item is identical to Text-with-image-item

    Manual:
    To insert an image:

    • Right-click on the image> a menu appears> choose: 'Image Properties'
    • Click: 'Browse server'.
    • Click: 'Upload'.
    • Click: 'Browse'
    • Choose your image
    • Click: 'Upload'
    • Click: 'Insert file'
    • !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.
    • Click 'OK'.

    To position the image on the right:

    • Right-click in the box below the image, bordered by the blue dash line> a menu appears> choose: 'Edit Div'
    • In the field 'Stylesheet Classes' it reads 'figure left'. Replace the word 'left' by 'right'. (Note: leave a space between 'figure' and 'right'.)

    To insert text that will be initially hidden:
    Click the button 'Show more' > an extra area for text will appear. Insert the text that is to be initially hidden, there.

    This is 'showmore1' division. To make additional showmore areas, copy and paste them, but you will need to increment their id for the 'Show more' to work. You will need to edit the source (html) to do so.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    *
    Back to top

    Video - item
    *

    TITLE TITLE

    Usage: Use this box for video. Write a short description of this video here, in this text area. Replace 'TITLE' by your own title. Insert the duration of the video in the placeholder at the end.
    Properties: The video is shown at its natural size. On smaller screens (e.g. mobile) the video will shrink. The video can be viewed full screen by clicking the 'full screen' button.
    The text wraps around the video. This section has a grey border with rounded corners. It is centered on the page. Its width is maximized to enhance legibility. It will scale and reflow the text depending on the screen size.
    Note: In edit mode, only a box reading 'IFRAME' in red font is shown. The video will occupy the space indicated by the rectangle with the blue dashed border (only visible in 'edit' mode).

    Manual:
    To insert a video from YouTube:

    • Post your video on YouTube or use an existing video on YouTube.
    • In YouTube, below the video, click 'Share'
    • Click 'Embed'
    • From the embed code, copy only the URL. Example: the red highlighted text in:
    • <iframe width="560" height="315" src="https://www.youtube.com/embed/eB0tcf-mDH8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    • On this page in AnatomyTOOL, right-click on the box 'IFRAME' > a menu appears> choose: 'IFrame Properties'
    • In the field 'URL', paste the URL that you copied.

    Options:

    • To start a YouTube video at a certain moment: add '?start=xxx' (xxx should be number of seconds) to the end of the URL
    • To end a YouTube video at a certain moment: add '?end=xxx' (xxx should be number of seconds) to the end of the URL
    • To prevent another YouTube video from playing after your video: add '?rel=0' to the end of the URL
    • To combine such commands, concatenate them with '&'. Don't repeat the '?', only use one '?' at the beginning of the commands.
    • Example: https://www.youtube.com/embed/QNKKW6k6RSQ?rel=0&start=118&end=148

    To position the video on the right:

    • Right-click in the box surrounding the IFRAME box, bordered by the blue dash line> a menu appears> choose: 'Edit Div'
    • In the field 'Stylesheet Classes' it reads: 'videoContainer left'. Replace the word 'left' by 'right'. (Note: leave a space between 'videoContainer' and 'right'.)

    (XXmYYs) 

    *
    Back to top

    Question

    • Create a new question or select an existing question.
    • View the finished question and click on below the question> Copy the number from the embed code:
    • Right-click the IFRAME box> Choose 'IFrame Properties' >Replace the number in the URL field, at the end of the URL, by the number you have copied from the embed code:

    *

    *
    Back to top
    Two Images Side-by-side - item
    *

    TITLE TITLE

    Two Images Side-by-side - item
    Usage: You can use this item to show two images in conjunction. Replace 'TITLE' by your own title.
    Properties: on smaller screens the images will display smaller to retain the side-by-side placement. On the smallest screens (mobile) the images will be repositioned below each other, with their captions still shown directly below the respective images.

    To insert an image:

    • Right-click on the image> a menu appears> choose: 'Image Properties'
    • Click: 'Browse server'.
    • Click: 'Upload'.
    • Click: 'Browse'
    • Choose your image
    • Click: 'Upload'
    • Click: 'Insert file'
    • !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.
    • Click 'OK'.

    *
    Back to top

    Four Images Together - item
    *

    TITLE TITLE

    Fig. C. Brain regions of cerebral cortex  by Blausen.com staff (2014). "Medical gallery of Blausen Medical 2014". WikiJournal of Medicine 1 (2): 10. doi:10.15347/wjm/2014.010. ISSN 2002-4436.  https://en.wikiversity.org/wiki/WikiJournal_of_Medicine/Medical_gallery_... License: CC BY SA
    Fig. D. 'Thinking about Anatomy'
    Four Images Together - item
    Usage: You can use this item to show four images together. Replace 'TITLE' by your own title.
    Properties: on smaller screens the images will display smaller to retain the side-by-side placement. On the smallest screens (mobile) the images will be repositioned below each other, with their captions still shown directly below the respective images.

    To insert an image:

    • Right-click on the image> a menu appears> choose: 'Image Properties'
    • Click: 'Browse server'.
    • Click: 'Upload'.
    • Click: 'Browse'
    • Choose your image
    • Click: 'Upload'
    • Click: 'Insert file'
    • !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.
    • Click 'OK'.

    *
    Back to top

    Four Images Below each other - item
    *

    TITLE TITLE

    Fig. C. Brain regions of cerebral cortex  by Blausen.com staff (2014). "Medical gallery of Blausen Medical 2014". WikiJournal of Medicine 1 (2): 10. doi:10.15347/wjm/2014.010. ISSN 2002-4436.  https://en.wikiversity.org/wiki/WikiJournal_of_Medicine/Medical_gallery_... License: CC BY SA
    Fig. D. 'Thinking about Anatomy'
    Four Images Together - item
    Usage: You can use this item to show four images together. Replace 'TITLE' by your own title.
    Properties: on smaller screens the images will display smaller to retain the side-by-side placement. On the smallest screens (mobile) the images will be repositioned below each other, with their captions still shown directly below the respective images.

    To insert an image:

    • Right-click on the image> a menu appears> choose: 'Image Properties'
    • Click: 'Browse server'.
    • Click: 'Upload'.
    • Click: 'Browse'
    • Choose your image
    • Click: 'Upload'
    • Click: 'Insert file'
    • !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.
    • Click 'OK'.

    *
    Back to top

    Microscopy viewer-item

    *
    On a page, you can only have one microscopy viewer IFRAME. But you can show unlimited slides in it.
    To insert a link to a slide (on a certain place, with a certain annotation):

    1. Go to the slide in the microscopy slide viewer.
    2. Make one or more annotations.  . Click to get the URL.
    3. Click in the bar at top. Complete the URL, behind 'microscopy_viewer?id=' 

    Ileum with circular muscle layer (example link).

    *
    Back to top

    'Read more' - item
    *

    Read more...

    *

    Title title title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. (XXmYYs)

    *
    Back to top

     

    Icons of licenses

    You can cut and paste the below license icons.

    Open Access logo

       - Open Access

    Creative Commons licenses icons

    CC BY - Attribution

    Creative Commons Attribute ShareAlike license CC BY SA - Attribution  ShareAlike

    CC BY NC SA - Attribution  NonCommercial ShareAlike

    CC BY ND - Attribution  NoDerivatives

    CC BY NC ND - Attribution  NonCommercial NoDerivatives

    Public Domain

    Back to top

     


    FAQ

    Text

    Images

    Video

    Combining pages in a series

    Back to top

     

    Text
    How do I create a header?

    Select the text and select the desired header size in the field in the menu bar.

    How do I enlarge or decrease the font-size?

    Select the text and select the desired header size in the field  in the menu bar. The standard text size is 16.

    How do I create a hyperlink?

    Select the text that you want to make a hyperlink, click in the menu bar. Enter the URL to link to.
    Important!:

    • to let the linked page open on a new browser-tab, click tab 'Target' and select 'New Window (_blank)'.
    • for links in the Table of Contents page, click tab 'Target' and select 'Topmost Window (_top)'.
    How do I get a new bullet or number when I add an entry in a bulleted or numbered list?

    Hold the SHIFT-key when you press the ENTER-key for the new line. Note that this is exactly reverse to the method in Word. There, holding the SHIFT key will prevent getting a bullet or number.

    Why can't I place the cursor in text below a video, by clicking there?

    In a video with text wrapping around it, you cannot place the cursor in the text directly below the video. This is caused by a technical solution that is necessary to let the video scale (for moblie etc) maintaining its aspect ratio. You can click in the text elsewhere and move the cursor to the wanted place with the arrow keys.

    Back to top
     

    Images
    How do I insert an image from my computer?

    Click  in the menu bar > Click > Click > Click . Select your image. Click . With the image selected, click .
    !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.

    How do I replace a image placeholder in a template page-element by my own image?

    Right-click on the template image> Click > Click > Click . Select your image. Click . With the image selected, click .
    !Important: remove the automatically pre-filled in width and height of the image. Else the image will not scale on mobile.

    Back to top
     

    Video
     How do I replace a video placeholder in a template page-element by my own video?

    Right-click on the box IFRAME that will contain the video > Choose 'IFRAME Properties'. Enter the embed-URL of the video.

    Back to top
     

    Combining pages in a series
     How do I reuse existing pages in a series of my own, i.e. with an order and table of contents that fits my own needs?

    Clone the pages and table of contents. Then adapt the clones to your own needs.

    Back to top

     

    opgobee, Other Institution
    MATERIALS & INFO 'Anatomical Topics' page
    Institution: Other Institution
    Review
    • Status: to be reviewed
    Template for the 'Anatomical Topics' pages
    User comments
    Language
    EN
    Educational level
    + + +
    License:
    User comments

    Comments

    Anatomical structures in item
    None (Anatomical structure not applicable)
    Topics
    Introductions