[查看演示] 源码如下
----------------------------------------------------------
<html>
<head>
<title>Greeting Card Designer－www.51windows.Net</title>
<style type="text/css">
.title { font-family: Verdana;
font-size: 13pt; font-weight: bold;
color: #FFFFFF;}
.lpane { position:absolute;
width:144px; height:408px; z-index:1;
top: 34px; left: 6px;
background: #FFFFFF;
border-right:2px solid #99CCFF;
border-top:2px solid #333366;
border-left:2px solid #333366;
border-bottom:2px solid #99CCFF;}
.layout { position:absolute;
width:443px; height:408px; z-index:1;
top: 34px; left: 157px;
background-color: #999999;
border-right:2px solid #99CCFF;
border-top:2px solid #333366;
border-left:2px solid #333366;
border-bottom:2px solid #99CCFF;}
.card { position:absolute;
width:375px; height:225px; z-index:2;
left: 32px; top: 85px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px solid #000000; padding:15;
overflow:hidden;}
.cardshadow { position:absolute;
width:375px; height:225px; z-index:1;
left: 32px; top: 85px;
background: #000000; border: 1px solid #000000;
FILTER: progid:DXImageTransform.Microsoft.CrBlur(
PixelRadius=3,
MakeShadow=true,
ShadowOpacity=.30);}
.rpane { position:absolute;
width:144px; height:408px; z-index:1;
top: 34px; left: 608px;
background:#666666;
layer-background-color: #FFFFFF;
border-right:2px solid #99CCFF;
border-top:2px solid #333366;
border-left:2px solid #333366;
border-bottom:2px solid #99CCFF;
padding:5px;}
.bar { position:absolute;
width:746px; height:20px; z-index:2;
top: 446px; left: 6px; padding:5px;}
.bar A:link {text-decoration:none; color:white}
.bar A:visited {text-decoration:none; color:white}
.bar A:active {text-decoration:none; color:white}
.bar A:hover {text-decoration:none; color:yellow}
.wbox{ background-color: #FFFFFF;
border:1px solid #000000; z-index:2;}
.button1{ height:20px;
background:#666666;
font-family:verdana; color:white;
font-size:8pt; font-weight:bold;
padding:1px; padding-left:5px;
border-bottom:1px solid #999999;
cursor:hand; }
.textRegion{ height:20px;
background:#666666;
font-family:verdana; color:white;
font-size:8pt;
padding:1px; padding-left:5px;
border-bottom:1px solid #999999;}
.swatch{ height:20px; width:20px;
margin:5px; border:1px solid black;
cursor:hand;}
</style>
<SCRIPT language=javascript>
<!-- Identifies the current set of active right pane controls -->
var gsCurrentControlSet = null;
<!-- These variables are used to dynamically assign IDs to inserted content -->
var giLastImg = '1';
var giLastTxt = '1';
<!-- The fnInit function initializes the editable and non-editable regions -->
<!-- of the document -->
function fnInit(){
gsCurrentControlSet=oSizeControls;
<!-- Ensure the display interface is not selectable, by making all -->
<!-- elements UNSELECTABLE -->
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
<!-- Prepare the editable region -->
card.unselectable = "off";
card.contentEditable='true';
document.execCommand("2D-Position", true, true);
document.execCommand("MultipleSelection", true, true);
document.execCommand("LiveResize", true, true);
}
<!-- The fnToggleOptions function sets the type of controls available on -->
<!-- the right pane of the Card Designer. size/background/text/images -->
function fnToggleOptions(sControlSet){
if (gsCurrentControlSet != sControlSet){
gsCurrentControlSet.style.display = "none";
sControlSet.style.display = "block";
gsCurrentControlSet = sControlSet;
}
}
<!-- The fnChangeSize function sets the editable card region -->
<!-- to the user selected dimentions. -->
function fnChangeSize(oWidth, oHeight, oTop, oLeft) {
card.style.width=oWidth;
cardshadow.style.width=oWidth;
card.style.height=oHeight;
cardshadow.style.height=oHeight;
card.style.top=oTop;
cardshadow.style.top=oTop;
card.style.left=oLeft;
cardshadow.style.left=oLeft;
}
<!-- The fnChangeStyle function sets the background style for the card. -->
function fnChangeStyle() {
if (event.srcElement.className == "swatch") {
card.style.background=event.srcElement.style.background;
card.style.filter=event.srcElement.style.filter;
}
}
<!-- The fnInsertImage function inserts an image into the editable card -->
<!-- region. The new IMG has a unique ID. -->
function fnInsertImage(oImgId,oImgSrc)
{
var oNode=document.createElement("img");
card.insertBefore(oNode);
oNode.src=oImgSrc;
giLastImg++;
var iTempCount = oImgId + giLastImg;
oNode.id = iTempCount;
oNode.style.position='absolute';
<!-- Set the new image as control selected for resizing/repositioning -->
var oControlRange = document.body.createControlRange();
oControlRange.add(oNode);
oControlRange.select();
}
<!-- The fnInsertText function inserts an text DIV into the editable card -->
<!-- region. The new DIV has a unique ID. -->
function fnInsertText(oTxtId,oTxtFont) {
var oNode=document.createElement("div");
card.insertBefore(oNode);
oNode.style.fontFamily=oTxtFont;
oNode.innerText='Enter some text here';
giLastTxt++;
var iTempCount = "text" + giLastTxt;
oNode.id = iTempCount;
oNode.style.position='absolute';
<!-- Set the new text as the active element for editing. -->
oNode.setActive()
}
<!-- The fnChangeFontSize function sets the font-size for control selected -->
<!-- text regions. -->
function fnChangeFontSize(){
if (document.selection.type == "Control") {
var oControlRange = document.selection.createRange();
for (i = 0; i < oControlRange.length; i++)
if (oControlRange(i).tagName != "IMG")
oControlRange(i).style.fontSize=event.srcElement.style.fontSize;
}
}
<!-- The fnChangeFontFamily function sets the font-family for control -->
<!-- selected text regions. -->
function fnChangeFontFamily (){
if (document.selection.type == "Control"){
var oControlRange = document.selection.createRange();
for (i = 0; i < oControlRange.length; i++)
if (oControlRange(i).tagName != "IMG")
oControlRange(i).style.fontFamily=event.srcElement.style.fontFamily;
}
}
<!-- The fnChangeFontColor function sets the text color for control selected -->
<!-- text regions. -->
function fnChangeFontColor (){
if (document.selection.type == "Control") {
var oControlRange = document.selection.createRange();
for (i = 0; i < oControlRange.length; i++)
if (oControlRange(i).tagName != "IMG")
oControlRange(i).style.color=event.srcElement.style.backgroundColor;
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#006699" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0" onload="fnInit();">
<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->
<DIV ID="title" CLASS="title" STYLE="position:absolute; width:747px;
height:28px; z-index:2; top:5px; left:5px">Greeting Card Designer</DIV>
<!-- Option Control -->
<DIV ID="leftpane" CLASS="lpane">
<DIV CLASS="button1" onclick="fnToggleOptions(oSizeControls);">
Size</DIV>
<DIV CLASS="button1" onclick="fnToggleOptions(oBackgroundControls);">
Background Style</DIV>
<DIV CLASS="button1" onclick="fnToggleOptions(oTextControls);">
Text</DIV>
<DIV CLASS="button1" onclick="fnToggleOptions(oImageControls);">
Images</DIV>
</BR></BR></BR></BR>
<DIV CLASS="textRegion">
</BR></BR></BR></BR>Right-click <B>here</B> and select
<B>View Source</B> to see how it's done.</BR></BR></BR></BR></BR></DIV>
</DIV>
<!-- The Editing Container -->
<DIV ID="layoutbox" CLASS="layout">
<DIV ID="card" CLASS="card" onpaste="window.event.returnValue = false;" >
</DIV>
<DIV ID="cardshadow" CLASS="cardshadow">
</DIV>
</DIV>
<!-- Size Controls -->
<DIV ID="oSizeControls" CLASS="rpane" ALIGN="center" STYLE="display:block;">
<DIV ALIGN="left" STYLE="font-family:verdana; color:white;
font-size:10pt; padding:1px; font-weight:bold">Size:</DIV>
<DIV ALIGN="left" STYLE="font-family:verdana; color:white;
font-size:8pt; padding:5px">Choose the dimensions of your
card by clicking on a size below:</DIV>
<BR>
<DIV ID="cardsize1" CLASS="wbox" STYLE="width:100; height:65;
padding:5px; margin:10px; cursor:hand;"
onclick="fnChangeSize('375','225','85','32');" >4" x 6"</DIV>
<DIV ID="cardsize2" CLASS="wbox" STYLE="width:100; height: 100;
padding:5px; margin:10px; cursor:hand;"
onclick="fnChangeSize('375','375','5','32');">6" x 6"</DIV>
<DIV ID="cardsize3" CLASS="wbox" STYLE="width:70; height: 100;
padding:5px; margin:10px; cursor:hand;"
onclick="fnChangeSize('275','375','8','75');">6" x 4"</DIV>
</DIV>
<!-- Text Controls -->
<DIV ID="oTextControls" CLASS="rpane" ALIGN="left"
STYLE="display:none; padding:5px">
<DIV ALIGN="left" STYLE="font-family:verdana; color:white;
font-size:10pt; padding:1px; font-weight:bold">Text:</DIV>
<DIV ALIGN="left" STYLE="font-family:verdana; color:white;
font-size:8pt; padding:5px">Insert, edit, or reposition text regions.
</DIV><BR/>
<button onclick="fnInsertText('georgia')">Insert Text</button><BR/>
<!-- Text Size Controls -->
<SPAN onclick="fnChangeFontSize();">
<DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
font-size:22pt; font-weight:normal; color:white">Large</DIV>
<DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
font-size:15pt; font-weight:normal; color:white">Medium</DIV>
<DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
font-size:10pt; font-weight:normal; color:white">small</DIV>
</SPAN><BR/>
<!-- Text Font-Family Controls -->
<SPAN onclick="fnChangeFontFamily();">
<DIV STYLE="height: 25px; cursor:hand; font-family:times;
font-size:14pt; font-weight:normal; color:white">Times</DIV>
<DIV STYLE="height: 25px; cursor:hand; font-family:arial;
font-size:14pt; font-weight:normal; color:white">Arial</DIV>
<DIV STYLE="height: 25px; cursor:hand; font-family:georgia;
font-size:14pt; font-weight:normal; color:white">Georgia</DIV>
<DIV STYLE="height: 25px; cursor:hand; font-family:verdana;
font-size:14pt; font-weight:normal; color:white">Verdana</DIV>
</SPAN><BR/>
<!-- Text Color Controls -->
<SPAN onclick="fnChangeFontColor();">
<SPAN CLASS="swatch" STYLE="background:black">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:#666666">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:#cccccc">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:white">
</SPAN><BR/>
<SPAN CLASS="swatch" STYLE="background:tomato">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:palegreen">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:palegoldenrod">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:royalblue">
</SPAN>
</SPAN>
</DIV>
<!-- Image Controls -->
<DIV ID="oImageControls" CLASS="rpane" ALIGN="center"
STYLE="display:none; padding:5px; overflow:auto">
<DIV ALIGN="left" STYLE="font-family:verdana; color:white;
font-size:10pt; padding:1px; font-weight:bold">Images:</DIV>
<DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt;
padding:5px">Select image to insert, then position or re-size.</DIV>
<DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
padding:10px; cursor:hand"
onclick="fnInsertImage('heart','heart.gif');">
<IMG SRC="miniheart.gif" STYLE="position:absolute; left:50"
ondrag="window.event.returnValue = false;"/></DIV>
<DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
padding:10px; cursor:hand"
onclick="fnInsertImage('egg','egg.gif');">
<IMG SRC="miniegg.gif" STYLE="position:absolute; left:50"
ondrag="window.event.returnValue = false;"/></DIV>
<DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
padding:10px; cursor:hand"
onclick="fnInsertImage('flower','flower.gif');">
<IMG SRC="miniflower.gif" STYLE="position:absolute; left:50"
ondrag="window.event.returnValue = false;"/></DIV>
<DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
padding:10px; cursor:hand"
onclick="fnInsertImage('present','present.gif');">
<IMG SRC="minipresent.gif" STYLE="position:absolute; left:50"
ondrag="window.event.returnValue = false;"/></DIV>
<DIV STYLE="height:65px; width: 100px; border-bottom:1px solid #cccccc;
padding:10px; cursor:hand"
onclick="fnInsertImage('clover','clover.gif');">
<IMG SRC="miniclover.gif" STYLE="position:absolute; left:50"
ondrag="window.event.returnValue = false;"/></DIV>
</DIV>
<!-- Background Controls -->
<DIV ID="oBackgroundControls" CLASS="rpane" ALIGN="center" STYLE="display:none"
onclick="fnChangeStyle();">
<DIV ALIGN="left" STYLE="font-family:verdana; color:white;
font-size:10pt; padding:1px; font-weight:bold">Background:</DIV>
<DIV ALIGN="left" STYLE="font-family:verdana; color:white; font-size:8pt;
padding:5px">Choose a color or gradient from the styles below.</DIV>
<BR/>
<!-- Solid Swatches -->
<SPAN CLASS="swatch" STYLE="background:black" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:#666666" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:#cccccc" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:white" ></SPAN><BR/>
<SPAN CLASS="swatch" STYLE="background:tomato" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:palegreen" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:palegoldenrod" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:royalblue" ></SPAN><BR/>
<SPAN CLASS="swatch" STYLE="background:pink" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:cornflowerblue" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:blueviolet" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:Darkseagreen" ></SPAN><BR/>
<SPAN CLASS="swatch" STYLE="background:lightskyblue" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:navajowhite" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:yellowgreen" ></SPAN>
<SPAN CLASS="swatch" STYLE="background:palevioletred" ></SPAN><BR/>
<!-- The remaining swatches have a gradient filter applied. -->
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='#99CCFF', gradientType='0');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#99CCFF', startColorstr='#ffffff', gradientType='0');">
</SPAN><BR/>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='gold', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='gold', gradientType='0');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='gold', startColorstr='#ffffff', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='gold', startColorstr='#ffffff', gradientType='0');">
</SPAN><BR/>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='palegreen', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='palegreen', gradientType='0');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='palegreen', startColorstr='#ffffff', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='palegreen', startColorstr='#ffffff', gradientType='0');">
</SPAN><BR/>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='red', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='#ffffff', startColorstr='red', gradientType='0');" >
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='red', startColorstr='#ffffff', gradientType='1');">
</SPAN>
<SPAN CLASS="swatch" STYLE="background:lightskyblue;
filter:progid:DXImageTransform.Microsoft.Gradient(
endColorstr='red', startColorstr='#ffffff', gradientType='0');">
</SPAN><BR/>
</DIV>
</SPAN>
<DIV CLASS="bar" >
<A href="http://www.microsoft.com/misc/cpyright.htm" target=_top>
©2001 Microsoft Corporation. All rights reserved. Terms of use.</A>
</DIV>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> |
