Annotation of loncom/html/adm/help/tex/Docs_Web_Page.tex, revision 1.4
1.1 lira 1: \label{Docs_Web_Page}
2: \index{web page}
1.2 raeburn 3: Although web pages used in a course may always be uploaded to Authoring Space, published,
4: and then imported into a course (and that certainly would be the favored approach for web
5: page content that is suitable for re-use in multiple contexts), there may be content
6: which is better suited to upload directly to a single course.
7:
8: For example, some content may logically really only belong in a single course.
9: It may also be the case that some users may be granted privileges to edit course content,
10: but not have an author or co-author role, which would allow them to publish content.
11:
12: There are four ways to upload a web page (and any embedded dependencies, e.g., images etc.)
13: directly to a course:
14:
15: \begin{itemize}
16: \item Upload an existing HTML file, see: \ref{Docs_Uploading_From_Harddrive}
17: \item Upload an existing zip file containing a web page and any dependencies, see:
18: \ref{Docs_Uploading_From_Harddrive}
19: \item Add a blank Web Page
20: \item Add a Simple Course Page, as explained in the section \ref{Docs_About_Simple_Page}
21: \end{itemize}
22:
23: For the first three of these, the web page may contain multiple dependencies, e.g.,
24: images, applets, movies etc. By contrast, only one optional image file dependency
1.4 ! raeburn 25: is supported for the template-based ``Simple Web Page'',
1.2 raeburn 26:
27: When working with web pages uploaded directly to a course, you will find that the procedure
28: for adding images and other embedded objects to a web page is different to that
29: encountered when managing web pages in Authoring Space. LON-CAPA Web Page documents are stored
30: differently than they might appear on a typical server.
31:
32: Within LON-CAPA the Web Page and supporting image/multimedia are composed/uploaded
33: via a single link on the course contents, instead of creating folders for the
34: dependencies. Within LON-CAPA any subfolders are `virtual', in the sense that
35: any subfolders will be created automatically, based on the specified path
36: (e.g., for images, based on the subfolders in the src attribute of the img tag).
37:
38: The following procedure can be used to compose a web page online:
1.1 lira 39:
40: \begin{itemize}
1.2 raeburn 41: \item\textbf{Course Editor -$>$ Other -$>$ Blank Web Page}
1.1 lira 42: \item\fbox{Re-initialize} the course.
1.2 raeburn 43: \item Click the \textbf{Edit} link (Actions column) in the row containing the new page.
1.1 lira 44: \item The main editor window will have a subsidiary menu containing:
45: \textbf{Math Rendering/Change View, Edit,} and \textbf{Manage Dependencies}.
46: \item The \textbf{Math Rendering/Change View} \index{math rendering}
47: selector changes the rendering
1.2 raeburn 48: engine used to display mathematics, included within the web page inside $<$m$>$ $<$/m$>$.
49: This tool permits you to view the web page
1.1 lira 50: using various settings. Unless you have configured a setting for the
51: course, each student's settings are used when they view the page. See
52: the section \ref{Course_Prefs_Display} for more information.\index{math rendering}.
53: \item Clicking \textbf{Manage Dependencies} launches a pop-up window which will check
54: the web page for links and embedded objects (e.g., images) and prompt for upload,
55: if missing, or possible replacement, if found. This is helpful for changing dependent
56: files for an existing page.
57: \item Clicking the \textbf{Edit} button will display a textarea which can be used to
58: edit the source HTML, or the ``Rich Format'' link can be clicked to switch to
59: the WYSIWYG editor\index{WYSIWYG editor}. The WYSIWYG editor includes an image button which
1.2 raeburn 60: creates an $<$img$>$ tag and pops up a modal window in which you can
1.1 lira 61: specify a path for the image. You can use a link to external resources, or to
62: published resources. The link to a resource in your published space
63: looks like \\
1.2 raeburn 64: \texttt{/res/$<$domain$>$/$<$username$>$/$<$path$>$/photo.jpg}
1.1 lira 65: where \\
1.2 raeburn 66: \texttt{$<$domain$>$/$<$username$>$/$<$path$>$/photo.jpg} are replaced with the actual names.
1.1 lira 67:
68: If you create an image link for a file used only for this web page, the path is
69: virtual in the sense that you create a virtual folder structure and
70: it will not be a folder structure that students browse. You should
71: use a relative path, e.g.
1.2 raeburn 72: $<$img alt=``my photo'' src=``images/photo.jpg'' /$>$
1.1 lira 73: as if ``photo.jpg'' is in a subfolder ``images''. For this type
1.2 raeburn 74: of image, you create the path in the $<$img$>$ tag before uploading
1.1 lira 75: the image using the \textbf{Manage Dependencies} button described next.
76:
77: The editing window also includes a \textbf{Manage Dependencies}\index{manage dependencies}
78: \index{dependencies, manage}\index{image} button. After
1.2 raeburn 79: adding an $<$img$>$ tag with the src attribute pointing to a relative URL,
1.1 lira 80: click \textbf{Save and Edit}. In WYSIWYG mode a broken image icon will be
1.4 ! raeburn 81: displayed. Click ``Manage dependencies'' and you will be prompted to
1.1 lira 82: upload an appropriate file from your computer.
83:
1.2 raeburn 84: Note that an \textbf{Edit} link provided in the Functions menu when viewing the page
1.3 raeburn 85: in course context (if your current role has course editing rights) is a shortcut
1.2 raeburn 86: to the editor for this page.
1.1 lira 87: \end{itemize}
88:
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>