Site Content Editor™ (SCE)

Transcription

U
S
E
R
G
U
I
D
E
•
This document was produced by Voloper Creations Inc.
© 2001 – 2005 Voloper Creations Inc., All Rights Reserved
Site Content Editor™ (SCE) is a trademark of Voloper Creations Inc. Other brands or product
names are trademarks or registered trademarks of their respective holders.
The information contained herein is the property of Voloper Creations Inc. Except as specifically
authorized in writing by Voloper Creations Inc., the holder of this document shall: i) keep all
information contained herein confidential, and ii) protect the information, in whole or in part, from
disclosure and dissemination to all third parties except where otherwise authorized.
This document, as well as the software described in it, is furnished under license and may only be
used or copied in accordance with the terms of such license. The information in this document is
provided for informational purposes only, is subject to change without notice, and should not be
constructed as a commitment by Voloper Creations Inc.
Voloper Creations Inc., is an authorized supplier of products and services to the global WSI
Internet Consulting and Education e-Marketplace.
i
Site Content Editor™ 5.5 - User Guide
© 2001-2005 Voloper Creations Inc.
•
Table of Contents
!
Neeatw
u re
F
!
Neeatw
u re
F
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
Background
2
.........................................................................................
Getting Started with SCE is Easy!
SCE Download
..................................................................
3
.......................................................................................
4
Troubleshooting SCE
.................................................................................
Release 5.5 Notes for Microsoft® Users
6
.......................................................................................
6
..........................................................................................
7
General Notes
!
Neeatw
u re
F
What’s new
4
...........................................................
SCE Tool Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Learning SCE
..................................................................................
Unit 1: Getting Started
........................
11 Unit 6: Working with Tables
36
• inserting tables
• formatting rows, columns and cells
• the basics
• HTML Web page structure
Unit 2: Managing Web pages
...............
10
. . . . . . . . . . . . . . . . . . 13
Unit 7: Providing Navigation
...............
43
• creating an anchor to URL
• creating a Web page
• creating an anchor to E-mail
• saving a Web page
• creating an anchor to Bookmark
• opening an existing Web page
• creating the rollover-image effect
Unit 3: Editing Web pages . . . . . . . . . . . . . . . . . . . . 16 • creating the thumbnail - image effect
• using the word processing utilities
Unit 8: Inserting Images and Files . . . . . . . . 57
• extending commands
• inserting an image
Unit 4: Using Style Sheets . . . . . . . . . . . . . . . . . . . . 18 • inserting a file
•
•
•
•
•
working with a style sheet
editing an existing style
apply an existing style
deleting an existing style
uploading styles
Unit 9: Writing Scripts
......................
60
• inserting HTML Tag
• inserting DHTML script
Unit 10: Working with a Blank Template . . . 64
Unit 5: Formatting with HTML
•
•
•
•
•
•
•
................
formatting character styles
aligning text
controlling font selection
using colors
finding special characters
formatting paragraphs and lists
creating numbered and bulleted lists
27 • creating your own logo/banner graphics
and navigation menu
ii
!
Neeatw
u re
F
iii
•
Introduction
Site Content Editor™ (SCE) v 5.5 is a universal authoring tool and provides the best
possible HTML Web content-editing solution in a truly WYSIWYG (what you see is what
you get) fashion. It does not require technical expertise, HTML knowledge, and the use
of FTP or a database (Figure: 1-1).
Site Content Editor™ (SCE) v 5.5 is fast and robust. It offers a lot of powerful features
and context-sensitive buttons. Its intuitive and easy to use interface can simplify the
authoring process such as site management, design view editing, tag view scripting,
CSS editing, DHTML support, asset storage, and template creation.
Its HTML Viewer feels a lot like working with Microsoft® Word. If you are familiar with
the word document interface, you will feel right at home. Its Source Viewer can be
used for inserting scripts and tags, and is best suited for experienced authors.
SCE has a lot of capabilities. Beside formatting and styling content, SCE offers you the
flexibility to wirte scripts and you can also:
•
•
•
•
•
•
•
•
create hyperlinks, image/file downloads
extend commands with a right-mouse click
open and save Web page content files on your local computer
retain the formatting of Microsoft® Word documents
support special characters
support Cascading Styles Sheets (CSS) editing
support Dynamic HTML (DHTML) scripting
and more...
Figure: 1-1
1
•
Background
We Have Removed the Barriers of Content Editors
We are continually improving this great product as our development team has developed it
from the ground up. Our SCE was originally created in JavaScript and ASP and was converted
to C++ code during its second release. Utilizing Microsoft® ActiveX® technology, it is now
completely client-based and is a one-time download. It is also fully authenticated and secured
by VeriSign® .
We wish to provide our customers with the best possible Web content-editing solution without
sacrificing its flexibility.
• SCE anytime, anywhere! - SCE can be installed on a new website or it can be added to any
existing websites regardless of the site’s programming language or website hosting
environment! (some additional programming charge might apply depending on the site
language.) Can any other Web content editing tools do that? (Please note that Microsoft®
IE 5.5+ is required for SCE Client to function in the Update Mode.)
• Licensing Issue resolved! - There is no licensing issue with our SCE as the license is URLcontrolled. This has always been a problem with ”off-the-shelf” JavaScript and/or ASP
based Web-editing tools because often FTP access cannot be granted due to the licensing
policies that restrict the free distribution of source code.
• Automatic Upgrades are free - Any SCE upgrades are automatically distributed to all licensed
users at no additional cost. In contrast, upgrades to ”off-the-shelf” JavaScript and/or
ASP based Web-editing tools require chargeable programming time, as each Web site must
be updated manually. This is a common problem with sites which are supported by Web
content editors embedded in the site’s source code. Only a small percentage of them are
ever upgraded with new functionality, which might be offered over time with these tools, due
to high cost.
• File Size and Load Time have been decreased - Certain functionality available within our SCE
(e.g., invoke the selection menu with a right-mouse click) cannot be replicated due to the
limitations of JavaScript and ASP languages. Other functionality, when implemented in
JavaScript and/or ASP based Web-editing tools, would simply enlarge the file size thus
considerably increasing load time.
• It’s more Efficienct with greater Security - The execution time is much faster because our
SCE code is compiled. Unlike JavaScript and/or ASP languages which are interpreted and
embedded in the source files, the compiled code provides a smaller file size, increased
download efficiency, and greater security.
• You don’t have to do anything to always have the Latest and Greatest Features! - We can
easily upgrade the SCE : our “in-house developed” tool. For your benefit, you will always
have the “latest and greatest” features and will never miss out on any important, valuable,
and new additions. All of these are distributed to you at no additional cost. In our
experience, the best support is most likely to come from tool creators, not integrators.
2
•
Getting Started with SCE is Easy!
On the first use of SCE, you must initialize the client ActiveX controls and plug-ins on your
local computer. Any subsequent upgrade from an earlier SCE version is automatically
distributed to all licensed users at no additional cost.
Click Yes in order for the SCE to function.
To initialize SCE correctly on your local computer, verify the permissions which you can set
through your Internet browser security settings. Here, the question is “how do I check the
security settings in the Internet Explorer browser?”
Open up your Internet Explorer (IE) browser and you need to do the following:
1.
2.
3.
4.
5.
From the menu bar, select Tools.
From the drop-down menu, select Internet Options.
Click the Security tab.
Click Custom Level (Figure: 1-2).
Check the following radio buttons (Figure: 1-3):
•
•
•
•
•
Download signed ActiveX controls: Enable
Download unsigned ActiveX controls: Prompt
Initialize and script ActiveX controls not marked as safe: Disable
Run ActiveX controls and plug-ins: Enable
Script ActiveX controls marked safe for scripting: Enable
Then SCE is ready for use in your Admin Panel.
All the HTML Web pages are supported by the SCE. SCE follows the rules as specified in the
HTML DTD. In order to conform to the W3C standard and to ensure that your HTML Web
content pages use the tags correctly, SCE inserts the tags for you.
Figure: 1-2
Figure: 1-3
3
•
SCE Download
At any time, the current version of SCE is automatically distributed to all licensed users.
Provision of SCE upgrades is offered at no additional cost.
Once installed successfully, SCE saves the editor.cab file (in the aka zip file format) to
the Temp Directory on your local computer workstation. This cab file determines if you
have the current version of SCE. Any subsequent upgrade from an earlier SCE version
is automatically downloaded to you without human intervention.
Then, the editor.cab file is self-extracted to the following file formats.
• Editor.inf contains the instructions and sources for installing the editor.ocx.
• Editor.ocx is dependent on the following files below:
- mfc42.dll (Microsoft foundation class dynamic link library)
- atl.dll (active template link dynamic link library)
- Triedit.dll (located at c:\Program files\Common Files\Microsoft Shared\triedit)
- VBScript.dll (located at c:\windows\system32\)
!
Neeatw
u re
F
Troubleshooting SCE
In the event where problems arise, the following provides troubleshooting guidelines:
• Firewall prevents SCE from downloading
Contact us and we will E-mail to you the required files: mfc42.cab and atl.cab.
Once you have received these files, proceed to extract them on your local
computer workstation.
1. Right click on the files but one at a time.
2. From the dropdown menu, click "extract to...." and store the “.exe”
files in a folder of your choice.
3. Run mfc42.exe and alt.exe
4
•
• mfc42.dll and atl.dll may be missing
Follow these links to download the required cab files.
http://activex.microsoft.com/controls/vc/mfc42.cab
http://activex.microsoft.com/controls/vc/atl.cab
Once you have received these files, proceed to extract them on your local
1. Right click on the files but one at a time.
2. From the dropdown menu, click "extract to...." and store the “.exe” files
in a folder of your choice.
3. Run mfc42.exe and alt.exe
• Circles in the SCE
Search for the triedit.dll file. If you have more than one, delete them except
the one residing in c:\Program files\Common Files\Microsoft Shared\.
Then, perform the following at the command prompt:
1. Click Start on the Task Bar.
2. Click Run.
3. In the Open textbox, type cmd.
4. Change your directory to where triedit.dll resides:
CD c:\Program files\Common Files\Microsoft Shared\triedit
5. Run this if you have regsvr32 installed on your computer workstation:
regsvr32 c:\Program files\Common Files\Microsoft Shared\triedit
If successful, you will see this:
5
•
Release 5.5 Notes for Microsoft® Users
Our Site Content Editor™ (SCE) runs on Microsoft® Windows® 98, 2000, 2003, ME and XP.
Due to the fact that Microsoft® Office has a number of unwanted specific markup tags
embedded in Microsoft® Office 2000, you will need to save word documents using Edit ->
Copy as HTML. Also, use the Microsoft® ‘Office HTML Filter’ and Microsoft® ‘Office 2000’ plugins to safely remove them.
Please download them from the Microsoft® Office 2000 website Download Center at:
http://office.microsoft.com/downloads/2000/Msohtmf2.aspx
For more instructions please check out the following Microsoft® links:
http://office.microsoft.com/assistance/2000/htmlfilter.aspx
http://office.microsoft.com/assistance/2000/oRemoveMarkup.aspx
Microsoft® Office XP users must use its built-in HTML Filter. Please refer to the Microsoft®
Office XP documentation for more details.
After installation, you can utilize SCE v 5.5 features in a truly WYSIWYG fashion.
General Notes
• Our Site Content Editor™ (SCE) is based on an advanced technology, which is not supported
by Apple® or Netscape®. The back-end of your Web site - Admin Panel - will function with
Microsoft® Internet Explorer 5.5 and higher only. The front-end functionality is not
affected at all, as it is not browser or operating system dependent.
• For those who use a Microsoft® Office version earlier than version 2000, please follow the
following steps to remove Microsoft® Office specific tags:
1) Copy your Web page content from Microsoft® Word into Microsoft® Notepad
2) Transfer from Microsoft® Notepad to the SCE HTML Viewer
3) Format the Web page content inside SCE
6
•
!
Neeatw
u re
F
What’s New
Topics
Troubleshooting
SCE
Particulars
!
Neeatw
u re
F
In the event where problems arise, this provides
trouble shooting guidelines:
1) Firewall prevents SCE from downloading
2) mfc42.dll and atl.dll may be missing
3) Circles in the SCE
Insert Table
You can upload Background Image.
!
Neeatw
u re
F
!
ised
Revature
Fe
Hyperlink
1) Select an existing image file from the select menu.
2) Browse to upload a new image file from your computer
workstation.
You can select an anchor to Bookmark in the same
HTML Web page.
!
Neeatw
u re
F
!
ised
Revature
Fe
1) Name a Bookmark.
2) Select an anchor to Bookmark.
SCE adds a “#” symbol to the anchor (known as
the hyperlink reference).
Insert Rollover
You can enter and select URL, upload Original Image
and Rollover Image.
!
Neeatw
u re
F
!
ised
ReFevature
!
Neeatw
u re
F
!
ised
ReFevature
1) Select an existing URL or the relative path from the
select menu.
2) Enter a new URL or the relative path.
1) Select an existing Original Image from the select menu.
2) Browse to upload a new Original Image from your
!
Neeatw
u re
F
!
ised
Revature
Fe
1) Select an existing Rollover Image from the select menu.
2) Browse to upload a new Rollover Image from your
7
•
Insert Thumbnail
!
Neeatw
u re
F
!
ised
ReFevature
!
Neeatw
u re
F
!
ised
Revature
Fe
Template
!
Neeatw
u re
F
You can upload Thumbnail and Large Picture.
1) Select an existing Thumbnail from the select menu.
2) Browse to upload a new Thumbnail from your computer
workstation.
1) Select an existing Large Picture from the select menu.
2) Browse to upload a new Large Picture from your
You can create your own logo/banner graphic and
navigation menu.
1) If you have chosen a Blank Template (user-defined)
option with OpenSites™ or OpenSites™ MAX, OBS lite or
OBS pro, this becomes available.
2) For OBS users, please contact us to initiate startup
procedures before you begin.
8
•
SCE Tool Bar
Open File
Horizontal Line
Merge Cell
Save File
Special Character
Split Cell
Format
Cut
Style Sheet Manager
Font
Copy
Apply Style
Bold
Paste
Italic
Paste Text
Underline
Paste from Word
Color
Undo
Hyperlink
Align Left
Redo
Unlink
Align Center
Find Text
Select All
Align Right
Insert Table
Align Center
Show Invisible Borders
Show Details
Number List
Insert Row
Insert File
Bullet List
Delete Row
Insert Image
Decrease Indent
Insert Column
Insert Rollover
!
ised
ReFevature
Increase Indent
Delete Column
Insert Thumbnail
!
ised
ReFevature
Break
Insert Cell
Insert Script
Subscript
Delete Cell
Insert HTML Tag
!
ised
ReFevature
!
ised
ReFevature
Remove Format
Superscript
9
•
Learning SCE
This user guide provides a general orientation to our SCE v 5.5, the Tool bar, its HTML
Viewer and Source Viewer associated with formatting, styling and scripting elements.
To make SCE more user-friendly, we have added context-sensitive descriptions to all the
buttons in the Tool bar located at the top. Hold your cursor over each of them for a moment
and an Info box will appear revealing the button description.
This user guide gives you a foundation for using SCE's basic features, including formatting,
using styles and creating links, adding images and files, using text and working with layouts.
Your hands-on experience using additional features will enhance the design and usability of
your projects.
“Learning SCE” contains the following activities:
Unit 3: Editing Web pages
Unit 4: Using Style Sheets
Unit 6: Working with Tables
Unit 8: Inserting Images and Files
Unit10: Working with a Blank Template
10
•
the basics
HTML
Hypertext Markup Language is the language Web pages are written in. A simplified HTML
structure is provided on the next page.
HTML Documents
HTML documents are plain text files that can be created using any HTML or text editor,
including our Site Content Editor™ (SCE).
HTML Web Page Name
HTML Web Page Name is a document or file name based on the topic title that you created.
In the URL, you can see different document or file types. The type indicates the language the
file is written in; e.g. htm, html, asp, aspx, php etc.
SCE HTML Viewer
This is used for Design view editing. Its user-friendly interface can simplify the authoring
process.
SCE Source Viewer
This is used for Tag view editing. It displays HTML tag information and is best suited for
experienced authors.
Staging Server
A staging server is also referred to as a development server that manages your projects
during the development phase. You have access and authority to fill site content where required.
Web Server
For the public to view your Web site, it must be hosted on a special server called a Web server.
It is also referred to as a production server. You will be given individualized access privilege
to manage project files on the Web server after site launch.
URL
Uniform Resource Locator is the address of a Web page on a computer such as:
http://www.voloper.com/products/titles.htm
“http”
• Protocol
“www.voloper.com”
• Web server name; the three letter extension indicates its
top-level domain. A top-level domain groups the computers
on the Internet into categories; e.g. org, com, edu, net, gov,
mil, int.
“products”
• Folder name
“titles.htm”
• Web page name and filename extension
11
•
Unit 1: HTML Web page structure
<html>
HEAD: Contains information
on the HTML Web page (e.g.
description and keyword data
that a search engine may
use as well as file links and
scripts).
<head>
<TITLE>SCE HTML Web page</TITLE>
</head>
<body>
Body: Contains the content
of the Web page that you
see on the screen and the
attributes of the page (e.g.
background color).
<H1> SCE is very easy to Learn</H1>
<p>Site Content Editor TM (SCE) is fast
and robust. It offers a lot of features
and context-sensitive buttons. Its
intuitive and easy to use interface can
simplify the authoring process such as
site management, design view editing,
tag view scripting, CSS editing, DHTML
support, asset storage or libraries, and
template creation.</p>
</body>
<html>
You will create the body materials and interactions using SCE’s Design view (called “HTML
Viewer”) (Figure: 1-4) or its Tag view (called “Source Viewer”) (Figure: 1-5).
HTML Viewer
Figure: 1-4
12
Source Viewer
Figure: 1-5
•
creating a Web page
It is best to keep HTML Web pages brief so that users do not have to do a lot of scrolling and
can quickly find what they need.
An HTML Web page name is based on the “topic title” that you created. For a Web page name
separated with spaces, SCE automatically replaces each space with a dash “-”; e.g. about-us.
To work with a page:
1. From the
drop-down menu, select a page;
or
from the Main Menu of same site administration areas, select ‘Pages’ (Figure: 1-6).
The ‘Pages’ opens and displays a list of Web page names. Select a page (Figure: 1-7).
2. Complete (or copy and paste) the Web page content.
3. Click Post Change or Update Info.
To view a page:
• Click View Page;
Click ‘Back to Web site’ in the Main Menu; or
In the VGM, you click Web Site.
Figure: 1-6
Figure: 1-7
13
•
Unit 2: saving a Web page
It is a good idea to save your HTML Web page as you work. All files are saved automatically
on the Web server when you save them.
But, you can also easily save a “back-up” copy of your HTML Web page on your local computer.
Once you have a few HTML Web pages in your Web site project, you can organize them into
folders and so make it easy to maintain your files. These folders reside on your local computer.
To save a Web page on your local computer:
1. From the Tool bar, select
Save File.
The Save As dialog is displayed.
2. In Save In, browse to the directory where the project folder is kept in your hard drive;
e.g. C:\Program Files\Project_Folder\ (Figure: 1-8).
3. Make sure your project folder is expanded.
4. Click Save.
The HTML Web page is saved in the project folder; e.g. aboutUs.htm.
Figure: 1-8
14
•
Unit 2: opening a Web page
You can easily open an existing HTML Web page that is placed on your local computer. When
you open the file, it is loaded into the SCE.
To open an existing Web page:
The Open dialog is displayed.
Open File.
2. In Look In, browse to the directory where the project folder is kept in your hard drive;
e.g. C:\Program Files\Project_Folder\ (Figure: 1-9).
Select the HTML Web page; e.g. aboutUs.htm.
4. Click Open.
The HTML Web page is brought into the SCE HTML Viewer.
Figure: 1-9
15
•
Unit 3: Editing HTML Web Pages
using the word processing utilities
You can see how using the Tool bar is an easy way to perform editing tasks. Below is a list
of word processing utilities that you can use. All you do is “click”!
To familiarize you with using these features:
Open an HTML Web page in the SCE HTML Viewer. Then select or de-select text / images
where appropriate.
Cut
removes the selected content.
Copy
copies SCE content into the computer memory.
Find Text
opens the Find dialog.
1. In Find, type beside Find what and click Find Next.
Select “Match whole word” only and/or “Match case”. Navigate in
an up or down direction. The text is highlighted in the Web page.
2. Click Close to close the Find dialog.
Paste
transfers the copied SCE content from the computer memory into SCE.
Paste from text
transfers the copied text from a text editor into SCE.
Paste from Word transfers the copied content from a word document into SCE.
16
Redo
reverses change to its proposed state.
Remove Format
removes the selected content from HTML formatting.
Select All
highlights the SCE content in the selected HTML Web page.
•
Show Details
displays details with icons about HTML formatting.
Undo
reverses change to its previous state.
Zoom
zooms in and out the selected HTML Web page between 50% -200%
and each interval is 25%.
Unit 3: extending commands
In the Design view, you can easily find a quick way to edit the look and layout of some selected
content in the SCE HTML Viewer.
As an example, the following extends an option for a content-specific command (Figure: 110).
To edit a horizontal line:
1. Right mouse-click on the horizontal line that you created (Figure: 1-11).
This opens the extended menu. Click Properties to open the Horizontal Line property dialog.
2. From the Size drop-down menu, select size 1 to 10 (Figure: 1-12).
3. Click the Color icon. This opens the Color palette. Select a color; or define and add a custom
color (Figure: 1-13).
Figure: 1-11
Figure: 1-10
Figure: 1-12
Figure: 1-13
17
•
Unit 4: Using Style Sheets
working with a style sheet
By using a style sheet, you can streamline HTML Web pages formatting and layout. You can
control text color, typeface, point size, layout, text generation and other content and style
specific attributes. The style sheet is a cascading style sheet.
Using CSS, you do not have to manually change settings for separate tags every Web page.
It allows you to specify attributes for the properties of any Web page.
In SCE, all HTML Web pages in your project use the same style sheet (called “styles.css").
This style sheet (*.CSS file) is “external” and is attached to any number of Web pages.
The style sheet can be one that you define during the build phase of your project, one that
you are given, one that you re-define or one that you import into the project. (In some cases,
you may want to use more than one style sheet.)
In this section, you will first create “internal” styles in any HTML Web page. Then edit and
delete them where it is required. Lastly, you will upload and attach them to the “external”
style sheet.
To work with a style sheet:
1. Select a Web page.
Style Sheet Manager.
The Style Sheet dialog opens (Figure: 1-14).
3. Click in any of the following:
• Create a new style
• Edit an existing style
• Delete an existing style
• Upload styles
Figure: 1-14
18
•
Unit 4: creating new styles
CSS rule starts with a “class” or an HTML “element” selector, followed by formatting
instructions and a set of declarations. In CSS, you do something like this: Selector {Format:
Declaration;}. If more than one, each “Format: Declaration” pair is separated with a semicolon “;”.
You can add “class” or HTML “element” selectors internally in any SCE HTML Web page.
If you wish to attach these new styles to all of your project files, then you upload them (see
“Uploading Styles”) to the “styles.css”, one that you already defined, created or one that was
given in the project.
1. Click in ‘Create New Styles’.
2. Click Next.
The New Style dialog opens. This is where you create styles.
3. This leads to the following steps.
1) Click in Custom Style or Re-define HTML Tag.
2) Inside the drop-down menu, do one of the following (Figure: 1-15):
• create a “class” selector; e.g. .yourNewStyle
or
• select an HTML “element”; e.g. p, h2 or blockquote (Figure: 1-16).
3) From the Tool bar, click
Apply Style.
4. Click Finish.
The Style Property dialog opens.
Figure: 1-15
Figure: 1-16
19
•
5. Specify the following formatting properties and declare attributes.
Font - describes how text is displayed and how text blocks are situated (Figure: 1-17).
Background - specifies how an element’s background is rendered (Figure: 1-18).
Border - specifies a style and makes a border visible (Figure: 1-19).
Box - describes how a block of content is situated in terms of the margin-specific
formatting model (Figure: 1-20).
List - defines possible numbered / bulleted list item variations (Figure: 1-21).
6. Click OK to close the Style Property dialog.
7. Go to ‘Applying an Existing Styles’.
When you select the HTML style, it is applied to the text.
Figure: 1-17
Figure: 1-18
Figure: 1-20
20
Figure: 1-19
Figure: 1-21
•
To create a custom style:
As an example, you want to declare ”background color as green”.
In CSS, you do this: .yourNewStyle {background: green;}
In SCE HTML Viewer, you do this:
1. Select Custom Style.
This is where you create your own styles.
2. Inside the drop-down menu, type in a “class” name beginning with a single period (.);
e.g. .yourNewStyle.
The period (.) indicates a “class” selector that you can apply to multiple elements.
3. Click Finish.
4. Select the Background tab.
• Click the Color icon. From the Color palette, select a color.
Its hexadecimal value appears; e.g. #408080 (Figure: 1-22).
or
• Type in a color.
6. Go to ‘Applying an Existing Styles’.
Figure: 1-22
21
•
To re-define HTML Tag
As an example, you want to declare “p in 12 pt/Arial”, “h2 as blue/14pt/Arial” or “blockquote
with a left margin of 20em”.
In CSS, you do this:
• p {font-size: 12pt; font-family: Arial;}
• h2 {color: #0080FF; font-size: 14pt; font-family: Arial;}
• blockquote {margin-left: 20em;}
In SCE HTML Viewer, you repeat the following steps for each element:
1. Select Re-define HML Tag.
This is where you modify styles.
2. Click to open the drop-down menu.
From the drop-down menu, select an HTML tag:
The p symbol indicates an element selector that will affect the entire paragraph.
The h2 symbol indicates an element selector that will affect the entire heading level 2.
The blockquote symbol indicates an element selector that will affect the entire
quotation.
3. Click on Finish.
4. Select the Font tab for p and h2; then the Box tab for blockquote (Figure: 1-23)
(Figure: 1-24) (Figure: 1-25).
Figure: 1-24
Figure: 1-1
22
Figure: 1-25
•
Unit 4: editing an existing style
You can edit the content of each “class” or “element” selector in any SCE HTML Web page.
If you wish to attach these changes to all of your project files, then you upload these changes
(see “Uploading Styles”) to the “styles.css”, one that you already defined, created or one that
was given in the project.
To edit a new style:
1. Click in ‘Edit an existing style’.
2. Click Next.
The Current Style dialog opens. This is where you edit styles (Figure: 1-26).
3. In the left pane, select a selector that you want to edit; e.g. .yourNewStyle,
blockquote, h2, or p.
4. Click Finish.
5. Specify the following formatting properties and declare attributes.
Font - describes how text is displayed and how text blocks are situated.
Background - specifies how an element’s background is rendered.
Border - specifies a style and makes a border visible.
Box - describes how a block of content is situated in terms of the margin-specific
formatting model.
List - defines various possible values. The default is disc.
Figure: 1-26
23
•
Unit 4: applying an existing style
Now you can associate with any custom style that you created as you author.
To apply a custom style:
1. Select text.
2. From the Tool bar, click
Apply Style.
The Style dialog opens. This is where you apply a new style (Figure: 1-27).
3. From the Class drop-down menu, select a “class” selector; e.g. .yourNewStyle.
4. Click OK to confirm or Cancel to ignore.
When you select the re-defined HTML style, it is applied to the text.
Unit 4: deleting an existing style
You can delete “class” or HTML “element” selectors in any HTML Web page.
To delete an existing style sheet:
1. Click in ‘Delete an existing style’.
2. Click Next.
The Current Style dialog opens. This is where you delete styles.
3. In the left pane, select a selector that you want to delete; e.g. .yourNewStyle,
blockquote, h2, or p (Figure: 1-28).
4. Click Delete.
The Editor dialog opens.
5. Click Yes or No to confirm: “do you wish to delete this style?” (Figure: 1-29).
6. Click Finish.
Figure: 1-27
24
Figure: 1-28
Figure: 1-29
•
Unit 4: uploading styles
You can update and upload “class” or HTML “element” selectors from any SCE HTML Web
page. Also, you can upload a style sheet of your own creation from your local computer.
To upload an existing style:
1. Click in ‘Uploading Styles’.
2. Click Next. This is where you upload styles.
The Upload Style Sheet dialog opens (Figure: 1-30).
3. In the left pane, select a selector that you want to upload. Then it becomes an “external”
linked style.
4. From the Update the Stylesheet to drop-down menu, select a style sheet.
In doing so, you associate “CSS” updates with the same “external” style sheet (called
“styles.css") on the server.
Contact us in the event that you may already have more than one style sheet.
5. Click Finish.
Figure: 1-30
25
•
To upload an existing style sheet:
1. Click in ‘Uploading Styles’.
2. Click Next. This is where you upload styles.
The Upload Style Sheet dialog opens.
3. Click Browse.
The Open dialog is displayed (Figure: 1-31).
4. In Look In, browse to the directory where the project folder is kept; e.g. C:\Program
Files\Project_Folder\.
6. Select your style sheet; e.g. yourStyleSheet.css.
In doing so, you associate “CSS” updates with the same “external” style sheet (called
“styles.css") on the server.
Contact us in the event that you may already have more than one style sheet.
7. Click Open. The CSS file is brought into the Upload Style Sheet dialog.
8. Click Finish.
Figure: 1-31
26
•
You can influence the appearance of any HTML Web page by using HTML.
Using SCE HTML Viewer, you can see how using the Tool bar is an easy way to plan text
formatting for Lists, Character Styles, Fonts and Alignments. SCE follows the rules as
specified in the HTML DTD. SCE inserts the tags for you.
For your reference, below is a sample list of the HTML DTD top-level formatting elements.
You can match these elements in tag pairs using the SCE Source Viewer.
blockquote
div
dl
h1-h6
hr
ol
p
ul
table
<blockquote></blockquote>
<div></div>
<dl></dl>
<h1></h1>
<hr>
<ol></ol>
<p></p>
<ul></ul>
<table></table>
indented quotes/citations on both sides
alignment of blocks of text and images
definition list
6 levels of heading
horizontal rule
numbered list
paragraph
bulleted list
table
Note: You can view a copy of the HTML DTD at the W3C Web site.
- The applied HTML formats and styles are “inline” and override the “external” cascading
style sheet (called “styles.css”) in your project.
- The re-defined HTML that you originally set through the “internal” cascading style sheet is
in effect until they are removed from the Web page. Therefore, the re-defined HTML also
sets precedence over the “external” cascading style sheet (called “styles.css”) in your
project.
- Using “inline” CSS sets forth an option that over-rides “internal” re-defined HTML
elements. You can do this in the “Writing Scripts” section.
If you are not familiar with the CSS concept, simply skip “Unit 4: Using Style Sheets” and progress
through the rest of this User Guide.
Unit 5: formatting character styles
The following demonstrates to you an "inline" style in SCE. It includes several styling
features: Bold, Italics, Underline, Subscript and Superscript.
Open an HTML Web page in the SCE HTML Viewer.
• Select text. From the Tool bar, select
Bold.
The text is now bold.
27
•
Italics.
The text is now italicized.
Underline.
The text is now underlined.
Superscript.
The text is now superscripted .
Subscript.
The text is now subscripted .
Unit 5: aligning text
By default, text is aligned along the left edge of the browser window.
In SCE, you can
alternate alignments with these options: Align Left, Align Center, Align Right and Align
Full. In addition, you can have control over where text appears on the Web page using:
Break, Increase Indent, Decrease Indent, and Horizontal Line.
Align Left
aligns the selected content to the left edge.
Align Center
centers the selected content between the two edges.
Align Right
aligns the selected content to the right edge.
Align Full
justifies the selected content between the two edges.
Break
applies a line break.
The lines below use Break.
Line 1
Line 2
Line 3
If you press ENTER on the keyboard, it will add the extra space below.
The lines below use ENTER.
Line 1
Line 2
Line 3
28
•
Decrease Indent
decreases the indentation level and shifts text to the left.
Increase Indent
increases the indentation level and shifts text to the right.
Horizontal Line
creates a horizontal line and the alignment default is CENTER.
Unit 5: controlling font selection
In SCE, one tool for customizing the basic appearance of Web page text is the Font. You can
use several text-formatting features to change the characteristics of small selections of text.
To control a small selection of text:
Font.
The Font dialog opens (Figure: 1-32).
2. Complete the required font attributes:
•
•
•
•
•
Font – controls the font face of the selected text.
Font Style – displays text as Regular, Italic, Bold or Bold italic.
Size – displays text in a range between 8 to 72 pt.
Effect – draws a line across and/or underlines the selected text
Color – selects one of the following: black, maroon, green, olive, navy, purple, teal, gray,
silver , red or Lime.
3. Click OK.
Figure: 1-32
29
•
Unit 5: using colors
You can make full use of SCE’s color modes for colorizing, or display and layout
enhancements. A color mode determines the color model used to display images.
In SCE, there are two color types: Basic Colors and Custom Colors.
• SCE has its basic color modes on established models for describing color on the monitor.
• You can also set up custom colors. SCE’s color wheel includes common models HSL (hue,
saturation, lightness) and RGB (red, green, blue). H - Hue is color, S - saturation is purity
of the color and L - lightness is how much white or black is in the image. The RGB colored
light can be mixed in various proportions and intensities. The RGB colors combine to create
additive colors and to emit light for monitors.
To use Basic Colors:
Color. The Color palette opens.
2. Select text.
3. From the Basic colors in the Color Swatch, select a basic color (Figure: 1-33).
4. Then click OK to apply the color and to close the Color palette.
Figure: 1-33
30
•
To use Custom Colors:
Color. The Color palette opens.
2. From the Custom colors in the Color Swatch, select a Checkbox.
3. Click Define Custom Colors
The Color palette extends to the right and the Color Picker opens. Below is the Color
Wheel. By default, the H value is set at “160” (Figure: 1-34).
4. Click inside the Color Picker to pick a preferred color.
The H and S values are now changed corresponding to your preference.
5. Scroll the black triangle on the vertical scrolling bar until you find your match.
Notice that the RGB values begin to adjust with one another. The result is reflected in L.
6. Click Add Custom Colors to add to the Color Swatch.
7. From the Custom colors in the Color Swatch, select a custom color.
8. Then click OK to apply the color and to close the Color palette.
Figure: 1-34
31
•
Unit 5: formatting paragraphs and lists
In SCE, you can easily format any paragraphs and lists for displaying your online information.
However, lists can be embedded / nested within each other to display data in outline format;
but, use this feature sparingly because too many nested items can get difficult to follow.
To apply formatted text, headings, separators or lists.
1. Select text.
2. From the
Format on the Tool bar, select any of the following:
normal
returns text to its normal state.
formatted
retains the preformatted appearance of the text.
address
describes an address, authorship and so forth and is italic.
This is an address:
3100 Steeles Ave. West, Suite 400
Vaughan, ON L3R 1K1
Canada
heading
heading
heading
heading
heading
heading
32
1
2
3
4
5
6
defines
defines
defines
defines
defines
defines
level
level
level
level
level
level
1
2
3
4
5
6
text
text
text
text
text
text
size
size
size
size
size
size
–
–
–
–
–
–
the
the
the
the
the
the
largest heading.
larger heading.
large heading.
small heading.
smaller heading.
smallest heading.
•
numbered list
presents list items in an ordered fashion.
places a number at the beginning of each list item.
This is a numbered list:
1. List item 1
2. List item 2
bulleted list
presents list items in an unordered fashion.
places a bullet at the beginning of each list item.
This a bulleted list:
• list item one
• list item two
directory list
This is a directory list:
• List item one
• List item two
menu list
This is a menu list:
• List item one
• List item two
definition term
presents a term to be defined followed by the definition that
is indented on the next line.
Definition Term
This is its definition.
definition
presents a definition that is indented on the next line below
its definition term.
Definition Term
This is its definition.
paragraph
presents blocks of text.
A block of text. A block of text.
A block of text. A block of text.
Another block of text. Another block of text.
Another block of text. Another block of text.
33
•
Unit 5: finding special characters
SCE also provides you with options for special characters. These special characters are
arranged in rows and columns (14 x 16), for you to choose from, totaling 224.
To use a special character:
1. Place your cursor where you want to insert a special character of your choice.
Special Character.
The Special Character palette opens (Figure: 1-35).
3. With a type selected, click OK.
Unit 5: creating numbered and bulleted lists
You can format an ordered list in which the list items appear in sequential numbers. You can
also create an unordered list, where a bullet character appears in place of the number. The
most commonly used lists include Numbered List and Bulleted List.
Lists help you accomplish: (1) Itemize information in a concise format; (2) Simplify
information: and (3) Describe a step by step process.
Let’s familiarize you with using Find Text and Format that you can select from the Tool bar too.
Figure: 1-35
34
•
To create a numbered list:
1. Press Find Text
to display the Find dialog.
The text is highlighted in the Web page.
4. Select the text, even including several paragraphs from where it begins until it ends.
From the
Numbered List ; or
Format drop-down menu on the Tool bar, select Numbered List
(Figure: 1-36). When you select the HTML style, it is applied to the text.
To create a bulleted list:
1. Press Find Text to display the Find dialog.
The text is highlighted in the Web page.
4. Select the text, even including several paragraphs from where it begins until it ends.
from the
Bulleted List; or
Format drop-down menu on the Tool bar, select Bulleted List (Figure: 1-37).
Figure: 1-36
Figure: 1-37
35
•
Unit 6: Working with Tables
• inserting tables
A table consists of cells, columns, rows, and a caption. Cells are formed by the
intersection of rows and columns. By using tables for page layout, you can present
text, images, links or other elements in rows and columns in your Web page.
In SCE, you can control many aspects of a table’s appearance such as: structure and
border, alignment, background, dimension and positioning.
To insert a table:
1. Place your cursor where you want to use a table and press ENTER.
!
Neeatw
u re
F
Insert Table.
The Table Property dialog opens (Figure: 1-38).
If you want to insert a table with 5 rows and 3 columns:
In Number of rows, enter 5.
In Number of columns, leave the default as 3.
Figure: 1-38
36
•
3. Complete the required Table Attributes:
!
Neeatw
u re
F
- Width: sets a fixed size in pixels or a relative value in percentage.
- Background Color: sets shading to the entire table; e.g. orange.
- Background Image:
uploads a new or an existing image file for the
background. If used, this takes precedence over Background Color.
- Alignment: aligns the table to none, the left, the center or the right.
- Border Size: sets the boundaries between cells to zero and so the table
border is invisible. “1 to 4” represents the border thickness.
- Cell Padding: sets the amount of space on the inside of the border.
- Cell Spacing: sets the amount of space inside a cell.
- Class: inserts a “CSS” class selector.
Only if the Border Size has been set to zero, select
Border. The borders are now revealed in the table.
Show Invisible
You can upload Background Image like this.
!
Neeatw
u re
F
To upload an existing Background Image
1) Click on the list arrow to open the select menu.
2) Select a background image file.
The image file is brought into the Background Image select menu box.
37
•
!
ised
ReFevature
To upload a new Background Image
1) Click Browse.
2) In Look in, browse to the directory where the project folder is kept; e.g.
C:\Program Files\Project_Folder\.
3) Make sure your project folder is expanded. Select the image file; e.g.
icon_10.gif.
4) Click Open.
The image file is brought into the Background Image select menu box.
Figure: 1-39
4. Click OK.
The table is now inserted.
38
•
5. Place your cursor inside a cell and right click on the mouse. This immediately extends
an option for a content-specific command in the extended menu (Figure: 1-40).
6. Click Properties.
The Table Property dialog opens. Inside it contains 3 tabs: Table Property, Row
Property and Cell Property.
7. Format Alignments and complete the Attributes for the Row Property (Figure: 1-41):
-
Horizontal: aligns the row content to Left, Right, Center or Justify.
Vertical: aligns the row content to Middle, Top, Bottom or Baseline.
Width: sets a fixed size in pixels or a relative value in percentage.
Background Color: sets shading to the entire row; e.g. maroon.
Class: inserts a “CSS” class selector.
Figure: 1-40
Figure: 1-41
39
•
8.
Format Alignments and complete the Attributes for the Cell Property (Figure: 1-42):
-
9.
Horizontal: aligns the cell content to Left, Right, Center or Justify.
Vertical: aligns the cell content to Middle, Top, Bottom or Baseline.
Width: sets a fixed size in pixels or a relative value in percentage.
Background Color: sets shading to the entire cell; e.g. gray.
Class: inserts a “CSS” class selector.
Click OK.
10. If you want to combine more than one cell horizontally - known as “row span” highlight the selected content in the cells and click
Merge Cell.
11. If you want to split a cell horizontally - known as “row span” - place your cursor
inside a cell and click
Split Cell.
When you select the HTML style, it is applied to the table.
Figure: 1-42
40
•
Unit 6: formatting rows, columns and cells
You can apply changes to an entire table, or to different parts of a table such as rows,
columns, or cells. Use these features: Insert Row, Delete Row, Insert Column,
Delete Column, Insert Cell and Delete Cell.
For your convenience, you can also find the formatting features with a right click on the
mouse (Figure: 1-43).
To insert a row:
1. Place the cursor inside a cell.
Insert Row.
The number of rows increments by 1.
To delete a row
Delete Row.
The number of rows decrements by 1.
Figure: 1-43
41
•
To insert a column
Insert Column.
The number of columns increments by 1 to the left of the selected column.
The new column width is equivalent to 1 “row span” cell of the selected column.
The table is then adjusted in width.
To delete a column
Delete Column.
The number of columns decrements by 1 to the left of the selected column.
This removes 1 entire column including all the “row span” cells. The table is then
self-justified in width.
To insert a cell
Insert Cell.
This inserts 1 “row span” cell to the left of the selected cell.
The new cell size is equivalent to 1 “row span” cell of the selected column. The
table is then adjusted in width.
To delete a cell
Delete Cell.
This removes the selected cell. The table is then adjusted in width.
42
•
When you click a hyperlink (“source anchor”), it will take you to a destination (“destination
anchor”). A source or destination anchor can be a line of text, an image, an e-mail address,
or a URL (a domain name with or without the relative path - including the filename).
This section demonstrates how you can easily provide navigation to URLs, e-mail address,
multimedia, and HTML Web pages that are already in the project. Similarly, you can also link
to internal or external bookmarks.
To produce more hyperlink effects and interactive appearances, you can use two images and
there are 2 methods to do this : (1) the rollover-image effect and (2) use thumbnail-image effect.
From the Tool bar, select
Hyper Link. You can easily set up what is required in an
anchor when the Hyperlink dialog opens (Figure: 1-44):
• Type:
selects from the drop-down menu:
• Hyperlink: marks a source anchor.
• E-mail: opens user’s E-mail application at the desktop.
• Bookmark: marks a destination anchor.
• URL:
inserts a URL (a domain name with / without the relative path - including the
filename).
Note that in your project, you will enter its relative path.
• Target: creates a link so enabling users to read related information without leaving
the current HTML Web page.
Self: displays the destination Web page in the current window
top, blank or new: displays the destination page in a window that opens on
top of the current window.
• Class:
selects a cascading style sheet class selector.
If you want to remove an anchor, use the
Unlink feature
Figure: 1-44
43
•
Unit 7: creating an anchor to URL
To insert an anchor to URL:
As an example, you want to hyperlink to a URL.
1. Select a source anchor; e.g. your company name.
2. From the Tool bar, select Hyper Link.
The Hyperlink dialog opens (Figure: 1-45):
• Type: select Hyperlink.
• URL: insert a URL; e.g. http://www.voloper.com/aboutUs.aspx
Note: In your project, you will enter its relative path:
In OpenSites, you enter; e.g. Rates.aspx.
If the URL is a page in the VGM, you need to right-click on the link you want to go to, choose
copy shortcut and then paste the URL into this field but remove everything before the word
isapi. For example, if you currently copy shortcut for the home page link you will get
http://www.voloper.com/projects/yourwebsite/isapi/isapi.dll?page.home.
You need to remove everything before the word isapi so you will be left with
isapi/isapi.dll?page.home.
• Target: select self, top, blank or new.
3. Click OK.
Figure: 1-45
44
•
Unit 7: creating an anchor to E-mail
To insert an anchor to E-mail:
As an example, you want to select hyperlink that opens the user’s E-mail application at the
desktop.
1. Select a source anchor; e.g. your E-mail address.
2. From the Tool bar, select E-mail (Figure: 1-46).
The Hyperlink dialog opens:
• Type: select E-mail.
• URL: insert a recipient’s E-mail address; e.g. [email protected].
If you have more than one e-mail address, separate each with a semi-column.
3. Click OK.
Figure: 1-46
45
•
Unit 7: creating an anchor to bookmark
By default, links always jump to the beginning of the destination HTML Web page. In
this way, you will navigate through the content of lengthy HTML Web page before you
can find what you really want to see.
But, you can link to a bookmark and it takes you to the destination as desired.
You can bookmark an internal or external destination fragment in any HTML Web page.
This requires two-steps.
To create an anchor to an internal bookmark:
As an example, you want to create a jump to the bookmark in the same HTML Web page.
Step 1
1. Select a destination anchor (where the jump lands).
!
ised
ReFevature
2. From the Tool bar, select Hyper Link (Figure: 1-47).
• Type: select Bookmark.
• URL: insert an identifier e.g. aname.
Figure: 1-47
46
•
Step 2
1. Select a source anchor (where the jump starts).
• URL: select the same identifier, preceded by a “#” symbol with no space;
e.g. #aname.
!
Neeatw
u re
F
SCE adds a “#” symbol to the hyperlink reference.
Note: In your project, you will enter or select its relative path:
In OpenSites, you select #aname.
If this is a VGM, you need to enter the page in the VGM (as instructed
above in the hyperlink instructions) before the “#” symbol and the bookmark
identifier. An example of this bookmark link for a bookmark on the “home” page
would be isapi/isapi.dll?page.home#aname.
3. Click OK.
Figure: 1-48
47
•
!
ised
ReFevature
To create an anchor to an external bookmark:
As an example, you want to create a jump to the bookmark that is in a different HTML
Web page.
Step 1
1. Select a destination anchor (where the jump lands).
• Type:
• URL:
select Bookmark.
insert an identifier (e.g. aname).
Figure: 1-49
48
•
Step 2
1. Select a source anchor (where the jump starts).
• URL: insert the “destination” Web page name (including its relative path)
Note: In your project, you will enter its relative path:
In OpenSites, you enter; e.g. Rates.aspx#aname.
If this is a VGM, you need to enter the page in the VGM (as instructed above in
the hyperlink instructions) before the # symbol and the bookmark identifier. An
example of this bookmark link for a bookmark on the “about us” page (coming
from the “home” page) would be isapi/isapi.dll?page.about_us#aname.
Figure: 1-50
49
•
Unit 7: creating the rollover-image effect
You can produce interactive effects and appearances by using two images: one is an
original image while the other is a rollover image. When you place the cursor over the
original image, the rollover image appears and replaces the original image.
It allows you to use the rollover image as a hyperlink for navigation. When the rollover
image is clicked, it jumps off to the destination Web page. Image file formats such as
.gif and .jpg are widely supported by Web browsers.
To create a rollover-image hyperlink:
!
ised
ReFevature
Insert Rollover.
The Insert Rollover dialog opens (Figure: 1-51).
2. Identify the Image with a name.
If there is no name, SCE will name it image1, image2 and so forth.
!
Neeatw
u re
F
3. Select an existing URL or the relative path (including the file name).
e.g. default.aspx
or
!
ised
ReFevature
Enter a new URL or the relative path (including the file name).
e.g. http://www.Voloper.com/default.aspx
Figure: 1-51
50
•
Note: In your project, you will enter a new or select its existing relative path directly into
the select menu box:
In OpenSites, you enter or select Rates.aspx.
If the URL is a page in the VGM, you need to right-click on the link you want to go
to, choose copy shortcut and then paste the URL into this field but remove
everything before the word isapi. For example, if you currently copy shortcut for
the home page link you will get
http://www.voloper.com/projects/yourwebsite/isapi/isapi.dll?page.home.
You need to remove everything before the word isapi so you will be left with
isapi/isapi.dll?page.home.
4. You can upload an Original Image like this.
!
Neeatw
u re
F
To upload an existing Original Image
2) Select an Original Image file.
The image file is then brought into the Original Image select menu box.
51
•
!
ised
ReFevature
To upload a new Original Image
1) Click Browse.
2) In Look in, browse to the directory where the project folder is kept;
e.g. C:\Program Files\Project_Folder\.
3) Make sure your project folder is expanded. Select an original image
file; e.g.icon_1.gif.
4) Click Open.
The image file is brought into the Original Image select menu box.
Figure: 1-52
5. You can upload a Rollover Image like this.
!
Neeatw
u re
F
To upload an existing Rollover Image
2) Select a Rollover Image file.
The image file is then brought into the Rollover Image select menu box.
52
•
!
ised
ReFevature
To upload a new Rollover Image
1) Click Browse.
3) Make sure your project folder is expanded. Select a rollover image file; e.g.
icon_2.gif.
4) Click Open.
The image file is brought into the Rollover Image select menu box.
Figure: 1-53
6. Click Upload.
53
•
Unit 7: creating the thumbnail - image effect
You can enable users to read related information without leaving the current HTML Web
page. If so, you can use a thumbnail and when clicked, display a large picture in a
window that opens on top of the current window. Image file formats such as .gif and
.jpg are widely supported by Web browser.
To create a thumbnail – image pop-up:
!
ised
ReFevature
Insert Thumbnail.
The Insert Thumbnail dialog opens (Figure: 1-54).
2. You can upload a Thumbnail like this.
!
Neeatw
u re
F
To upload an existing Thumbnail
2) Select a Thumbnail image file.
The image file is then brought into the Thumbnail select menu box.
Figure: 1-54
54
•
!
ised
ReFevature
To upload a new Thumbnail
1) Click Browse.
3) Make sure your project folder is expanded. Select the image file; e.g. icon_3.gif.
4) Click Open.
The image file is brought into the Thumbnail select menu box.
Figure: 1-55
55
•
3. You can upload a Large Picture like this.
!
ised
ReFevature
To upload an existing Large Picture
2) Select a Large Picture image file.
The image file is brought into the Large Picture select menu box.
!
Neeatw
u re
F
To upload a new Large Picture
1) Click Browse.
3) Make sure your project folder is expanded.
icon_4.gif.
Select the image file; e.g.
4) Click Open.
The image file is brought into the Large Picture select menu box.
4. Click Upload.
Figure: 1-56
56
•
Unit 8: Inserting Images and Files
By using images, you can add interest and explanation to your HTML Web pages. By adding
files to your HTML Web pages, you can provide user accessibility to more online information.
This section demonstrates two quick and easy tasks:
• Insert an image (e.g. .gif and .jpg) with a screen tip.
A screen tip is text that appears when users mouse over the image. This text can be used
by Search Engines and so allows more site optimization options. You can determine layout
and spacing attributes of the image too.
• Insert a range of file types such as pdf, flash, video or audio.
You do not need any HTML or JavaScript coding.
Unit 8: inserting an image
1. Place the cursor inside SCE.
2. From the Tool Bar, select
Insert Image.
The Insert Image dialog opens (Figure: 1-57).
Figure: 1-57
57
•
3. If your image is in the left pane, skip to 4. If not, click Browse.
In Look in, browse to the directory where the project folder is kept; e.g.
C:\ProgramFiles\Project_Folder\
Make sure your project folder is expanded. Select the image file; e.g. icon_5.gif.
Click Open.
The image file is brought into the Upload a file text box.
Click Upload.
4. In the left pane select an image file or one that you uploaded e.g. icon_5.gif.
A thumbnail of the image is displayed in Preview in the right pane.
5. Complete the following Layout and Spacing attributes:
In the Alternate Text field, enter text (“your favorite image”) that will appear as a screen
tip when users pause their cursor over the image.
Alignment: selects a position such as no set, left, right, texttop, absmiddle or baseline.
Border Thickness: defines thickness of the border around the image.
Horizontal: allows horizontal space (in pixels) beside the image.
Vertical: allows vertical space (in pixels) beside the image.
6. Click Insert.
Figure: 1-58
58
•
Unit 8: inserting a file
Insert Files.
The Insert File dialog opens (Figure: 1-59).
2. If your image is in the left pane, skip to 4. If not, click Browse.
In Look in, browse to the directory where the project folder is kept; e.g. C:\Program
Files\Project_Folder\.
Make sure your project folder is expanded. Select the file; e.g. backgrounder.pdf.
Click Open.
The file is brought into the Upload a file text box.
Click Upload.
3. In the left pane select an file or one that you uploaded; e.g. backgrounder.pdf
4. Complete the following styling attributes:
File types: selects Document, Flash, Quick Time Movie, Audio, Media Player or iPIX.
Width: specifies a file size in width in pixels.
Height: specifies a file size in height in pixels
5. Click Insert.
Figure: 1-59
Figure: 1-60
59
•
Scripts are programs in a Web page that run on the viewer’s browser. Using scripts can
expand the number of features you can add to your HTML Web pages and can simplify some
HTML commands. However, recent innovations in Web page known as Dynamic HTML
(DHTML) have greatly increased interactivity in response to user actions.
If you are familiar with scripts, SCE’s value-added flexibility surely offers a fun and easy way
to insert HTML tags and DHTML scripts. Given these, SCE offers you a much more fulfilling
elaborate experience.
In this section, you can see that using Insert HTML Tag and Insert Script, you can enhance
the design and usability of your projects.
Unit 9: inserting HTML Tag
You can use HTML tags to modify the fonts and styles, and the alignment of text. Formatting
can improve the organization of information in your HTML Web page.
1. Position your cursor where you want to begin.
Insert HTML Tags.
The Insert HTML dialog opens (Figure: 1-61).
Figure: 1-60
60
•
3. Follow the rules as specified in the HTML DTD and insert the tags.
<FONT face=verdana font-size=10>
<H1>SCE is very easy to Learn</H1>
<P>Site Content Editor <SUP>TM</SUP> (SCE) is fast and robust. It offers a lot of
features and context-sensitive buttons. Its intuitive and easy to use interface can simplify
the authoring process such as:
<UL type="square">
<LI><FONT color=blue>site management</FONT>,</LI>
<LI><FONT color=blue>design view editing</FONT>,</LI>
<LI><FONT color=blue>tag view scripting</FONT>,</LI>
<LI><FONT color=blue>CSS editing,</FONT></LI>
<LI><FONT color=blue>DHTML support</FONT>,</LI>
<LI><FONT color=blue>asset storage or libraries</FONT>, and</LI>
<LI><FONT color=blue>template creation</FONT></LI>
</UL>
</FONT>
4. Click OK to close the Insert HTML dialog.
The HTML Web page appears in the SCE HTML Viewer (Figure: 1-62). You can see the
coding in the SCE Source Viewer (Figure: 1-63).
Figure: 1-62
Figure: 1-63
61
•
Unit 9: inserting DHML script
JavaScript is event-driven. An event is an action that occurs as a result of something the
user does. For example, clicking a button is an event, as is changing a text field or moving
the mouse over a link. For your script to react to an event, you define event handlers, such
as “onChange” and “onClick”.
You can also incorporate “inline” CSS.
As an example, you want to dynamically add the date and time to your HTML Web page; a
horizontal rule in orange and size 2; and an event handler (called “OnMouseOver”) including
a message in the window status bar.
1. Position your cursor where you want to begin.
Insert Script.
The Insert Script dialog opens (Figure: 1-64).
Figure: 1-64
62
•
3. Follow the rules as specified in Java Script and insert the tags.
<SCRIPT language=JavaScript>
temp_date=new Date();
document.write("<P>The date is " + temp_date + ".</P>");
</SCRIPT>
<HR size=”2” color="orange">
<P style="FONT-FAMILY: verdana; font-weight: bold;" >
Check out the status line… when you put your mouse over the link!!!
<BR>
<A onmouseover="window.status='Site Content Editor provides the best possible HTML
Web content-editing solution in a truly WYSIWYG fashion" href=
"http://www.voloper.com">http://www.voloper.com</A></P>
4. Click OK to close the Insert Script dialog.
As a result, when you position your mouse in and then away from the http://www.voloper.com
link, a message is displayed on the status bar: “Site Content Editor provides the best possible
HTML Web content-editing solution in a truly WYSIWYG fashion” (Figure: 1-65).
Figure: 1-65
63
•
!
Neeatw
u re
F
Unit 10: Working with a Blank Template
• Creating your own logo/banner graphic and navigation menu
Our Site Content Editor™ (SCE) can be a big bonus to experienced users. If you have
chosen a Blank Template (user-defined) option in OpenSites™ or OpenSites™ MAX,
OBS lite or OBS pro, this becomes available. OBS lite or OBS pro users can utilize a
Blank Template (user-defined) option in OpenSites™ MAX.
In this section, you can create your own logo/banner graphic and navigation menu.
Select the
‘Template’ link from the Main Menu in the Admin Panel.
• OpenSites™ (Figure:1-66)
• OpenSites™ MAX (Figure:1-67)
Open the OpenSites ‘Blank Template’ in the SCE HTML Viewer. Let its contextsensitive buttons guide you through every single task.
In convenience, you can easily step through the three segments in the SCE:
logo/banner, menu descriptors / [menu bar] and [body content].
1. You can replace the Logo/Banner and introduce your own graphic design.
2. You can incorporate your own Menu Descriptors, text or images, for the navigation
menu in OpenSites™.
You can replace the [MENU BAR] tag and introduce a navigation menu in
JavaScript in OpenSites™ MAX.
3. You must not remove the [BODY CONTENT] tag.
64
•
Figure: 1-66
Figure: 1-67
65
•
Here, you can perform the following tasks:
To insert a .psd file in OpenSites / in OpenSites™
Preparation:
- Slice your .psd file into smaller images in Photoshop. See #2.
- Incorporate your .html file, usually named "index.html” in Photoshop. See #3.
- Produce your navigation menu in JavaScript. See #3. (Optional)
1. Remove Logo/Banner, perhaps including:
- Menu Descriptors in OpenSites
- [MENU BAR] in OpenSitesTM
2. Click Insert Image.
For a detailed description, see Unit 8: Inserting Images and Files.
- line space
- alignment
Upload images usually in the .jpg format one at a time.
3. Incorporate its .html file, which references the many images and JavaScript.
For a detailed decription, see Unit 2: Opening a Web Page and
Unit 3: Editing HTML Web Page.
4. Click Post Change.
To insert a text descriptor (Vertical or Horizontal) in OpenSites
1. Remove the original textual descriptor; e.g. About Us.
2. Type in your textual descriptor; e.g. Gallery.
66
•
To insert an image descriptor (Vertical or Horizontal) in OpenSites
1. Remove the original textual descriptor.
2. Click Insert Image.
For a detailed description, see Unit 8: Inserting Images and Files.
To insert a rollover-image decriptor (Vertical or Horizontal) in OpenSites
1. Remove the original textual descriptor.
2. Click Insert Rollover.
For a detailed description, see Unit 7: creating the rollover-image effect.
67
•
All our products have been created with user-centered approach in mind. With respect, we will
welcome any comments and support you might have. With your help, we will constantly seek
opportunity for improvement and organization with an objective to achieve efficiency and
effectiveness.
Talk to Us
Your feedback is important to us. Whether you'd like to share your opinion about a product,
ask a question about one of our services, or comment on our website, we want to hear from
you. Please give us your feedback and valuable suggestions.
Enjoy!
68

Site Content Editor™ (SCE)

Transcription

Similar documents

iFanz v3.0 Tips Message | Media Editor 1. To insert an image, click

MySQL DB Editor Documentation

P-15.3 - Looking south at transmission line from Schabarum

Eastern Municipal Water District

Customize Your Profile - Division of Student Affairs

healing hut poster.indd - South West Counties Allotments Association

THE AVENGERS! WOLVERINE, IRON MAN

XMPlayer Express

Walkthrough: Publicaster`s New Free Templates

jnewUniversity