|
How to create Web pages
|
1. Login
|
Log in from › [Login]
If you have no account yet, get one from › [User Registration] at the top of the screen (Toll).
|
You can create a layout and copy HTML data to the clipboard (on black region of the screen) even if you do not log in / without any account. However, you can not save or publish the page in sphered.info.
(It is necessary to save HTML to a file with a text editor etc. and upload it separately to your own web server)
|
|
2. Layout
|
1) Create a cell (rough block of the layout) by dragging in the black area as shown below.
|
|
2) First decide a layout roughly, then create more detailed parts of it separately in the hierarchy.
|
|
Arrange without a gap and overlap. The cell size is irrelevant to the actual size.
|
|
|
3) Click [Content]
In the example below, Text / Image / List is set for each of the lower three cells.
|
|
→
|
|
In case of a simple Text or Image cell like this, write the contents directly.
On the other hand, in the following cases, create a child hierarchy board as will be explained.
|
- Part consisting of multiple components
- When you want to specify the style such as width and border more freely
- When using the locale identifier (display switching per language)
- When you want to use the same contents in several places (Board can have multiple parents in the same workspace)
|
|
|
4) Specify the child hierarchy board in the same way. Click [Content] to select [Board].
Click [Create] to create a child hierarchy board. Then a link to it appears in the Tree and inside of the cell.
|
|
→
|
|
|
5) Click on the link to the child hierarchy and lay out new Board as in 1) to 4).
(In the figure below [Content] is not specified for the leftmost cell.
background-color / width have been specified by › [Style details] for them.)
|
|
→
|
|
|
6) The original Board (top level) is now as follows.
|
|
→
|
|
We'd like to adjust width, color, border, margin, etc. yet. In sphered.info they are all specified as "Styles".
|
3. Style
|
Style is a mechanism for realizing all appearances and styles of display, which is an essential concept together with the Layout / Content seen above. Frequently used style sets can be defined as "Classes".
We all follow the specification called "Style sheet (CSS)", please search on the web for details.
|
- Text
- Font
- Background
- Size (width / height)
- Margin / Padding
- Border
- Display
- Table
- List
- Print
- Content
- Outline
|
In sphered.info, Styles are subject to the following four stages (in order of small to large). You can not get expected effect if the target is wrong. So please check the Style sheet (CSS) specifications carefully at first.
|
- [Content] of a Cell itself
- Cell menu › [Style details]
- Table menu › [Table style]
- Board menu › [body style]
|
The following items of Cell menu are also for easy setting of Style.
|
- [Font size]
- [Color]
- [Border]
- [Background color]
|
|
4. Select mode (Cell mode / Table mode)
|
We call the chunk of cells without gaps "Table". The initial mode is " Cell mode" which makes various settings for the Cell. To set Styles etc. for the Table, switch to " Table mode".
|
|
Cell mode
|
→
|
Table mode
|
|
|
|
For example, let's set Styles ( Table menu › [Table style] ) on a Table.
|
- width:100%;
- background-color:lavender;
|
|
→
|
|
5. Page setting
|
"Page" displayed in the browser corresponds to "Board" on Edit screen in sphered.info. Any Board on the Tree can be a page (Set Public / Private to "Workspace").
|
The display in the Web page format is accessed at the following URL.
|
- https://sphered.info/sites/view/<User name>/<Workspace name>/<Board name>
|
You can confirm / copy this at "URL for external link:" from [HTML output] after selecting the target Board on the Tree.
|
- If you add ... /<Locale identifier> , the contents corresponding to the specified locale are displayed regardless of the language setting of the browser.
- If you omit <Board name> , the Board checked in [Default page] as shown below will be displayed.
|
|
|
|
1) Board menu › [Page title]
Page title appears, for example, on title bar of the browser when shown as a Web page. In sphered.info, only boards with one are the targets of [Global Search]. So usually specify to the top board.
|
|
2) Board menu › [body style]
Sets the Style for the entire page when the Board is displayed in Web page format (as the Top).
|
|
You can also display Board menu by right-clicking the margin (black background part) of the Board.
|
|
6. Workspace
|
"Workspace" is a unit that bundles "Boards" and regulates the range that can be referred to. After logging in, you can set locale candidates, public / private, etc. from › [Edit] at the top of the screen.
|
|
7. Locale
|
When displaying a Board with a locale specification at the end of its name ( such as "... :en-US" ) as a Web page, only the contents that match the browser language setting will be displayed.
( i.e. when accessing to the URL of [HTML output] › "URL for external link:" )
ex. en-US, ja, fr-CH
|