'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.
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.
Think of an anatomical subject you want to present. Collect and/or create video's and imagery to show your subject.
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.
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)
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.
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.
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.
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.
To create a new page: clone a (base) page you made previously, and give the clone an own title.
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!
Insert your content into the copied page-elements.
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.
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.
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.
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.
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.!
In the copied page-element, replace the placeholder text/content by your own text/content
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.
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.
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.
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'.)
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.
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.
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:
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'.)
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:
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.
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.
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.
*
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):
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)
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.
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.
below the question> Copy the number from the embed code:
. Click 
to get the URL.
in the bar at top. Complete the URL, behind 'microscopy_viewer?id=' 
CC BY - Attribution
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
in the menu bar.
in the menu bar. The standard text size is 16.
in the menu bar. Enter the URL to link to.
in the menu bar > Click 
> Click 
> Click . Select your image. Click 
. With the image selected, click 
.
View license
Comments