中国压缩机网行业论坛

标题: 与大家切磋网页的制作 [打印本页]

作者: hmc123 时间: 2004-11-6 13:56
标题: 与大家切磋网页的制作
<b><FONT color=#0000ff>与大家切磋网页的制作(一)</FONT></b>
<

>见到很多朋友能贴出非常漂亮的贴图,如果用作网页制作上,我想你们的网页一定会是精采的.愿与有兴趣的朋友一起来切磋.我来开路!</P>
<

> 1.请朋友们准备ProntPage软件 (office里的一组件,因我的是光盘安装的,无法提供下载的地址,找不到的朋友请购买office简装版的光盘,最多5元一张

</P>
<

>2.请朋友们申请一个免费的空间,用于上传html文件 (为便于一致,建议大家与我的空间格式一致,到此申请一下: <a href=".aofa.net/" target="_blank" ><FONT color=#000000>.aofa.net/</FONT></A></P>

作者: hmc123 时间: 2004-11-6 13:58
本课教你学会使用微软公司的Frontpage2000，学会干什么？当然是做你的个人主页啦。或许你认为制作主页是一门很深奥的工作，需要懂得大量的计算机知识。在这个流行图形操作系统的今天，制作主页不再需要你去学习复杂，烦躁的HTML语言了，你只需要知道一个概念：主页（也称网页，怎么样称呼都无所谓）就象一张白纸，你可以在上面写字，画画等等，通过自己的设计，那张白纸可以变成很漂亮。做主页时就是这个概念，只不过我们写字，画画是用笔和白纸，而做主页我们是用鼠标，键盘和Frontpage：）
  当然制作网页的工具不单只有Frontpage2000，还有许许多多好用的工具。但是对于初学者来说，Frontpage2000是最好不过了，因为它操作简单，方便使用，最适合初学者。或许你下了决心要做一个专业网页制作人员，要学会更多更专业的网页制作工具，但是我还是希望你先学习使用Frontpage2000，打好扎实的基础怎么样也好一点对吧。
  Frontpage2000可以从微软的Office2000里进行安装，Office2000哪里有？现在盗版之风吹遍大江南北，不用我介绍了吧：）
  第一课画面介绍<

>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/200472119381134.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/200472119381134.jpg"></A>
</P><

><DIV class=quote><B>以下是引用<I>冰峰</I>在2004-7-23 13:31:52的发言：</B>

<

>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004723132816879.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004723132816879.jpg"></A></P><

>对于初学者来说，一看到有那么多的菜单和那么多的按纽，不禁会吓一大跳：“太复杂了，我看我还是不行了。”哈哈，请你放心，你太抬举Frontpage2000了，其实它没什么，就那么一点，你完全可以“征服”它的，给自己一点信心：）
  我们来把Frontpage2000的界面划分成两半，你可以看见上图上面有一条红线，当然在你的Frontpage2000上面是没有的，这只是我自己画上去的，为了大家好区分。
  好的，那么我们看图，我们把红线以上的那部分叫控制窗，红线以下的叫制作窗。
  控制窗包括常见的那些“文件，编辑”菜单，虽然看上去挺多挺复杂，但是它大部分常用的命令都归到了下面一栏的按纽栏中去了。你看，在流行图形操作界面的今天，我们是多么地幸福啊：）下面一栏为属性栏，我们可以用这栏来定置文字和图片的属性等等。
  制作窗包括编辑区和切换按纽。我们就把编辑区当做是一张白纸吧，你可以在上面写字（用键盘打字）和画画（插入图片），具体操作我们将在下几面学习。编辑区左下角有三个按纽，我们把它们叫做切换按纽：点“普通”按纽，就会出现默认的编辑区。点“HTML”按纽，编辑区就会变成一个满是英文（？！）的窗口，我们可以在这里编辑HTML，但是对于初学者，笔者不建议你去乱动。做好了网页的时候，我们可以点一下“预览”按纽来观看自己做的网页，不满意可以再点“普通”按纽回到编辑区修改。
  另外当你第一次运行Frontpage2000的时候，你会看到编辑区左边会有另外的一栏，灰色的，上面有几个按纽，它叫“视图”栏。它可以让你更方便地查看网页的大小，连接等等。但是有时我们会觉得它妨碍了我们的工作，使编辑区看起来很窄很不舒服，为了不让它妨碍我们工作，我们可以点击控制窗菜单栏里的“编辑→视图”，使它消失，要使用的时候再重复点击一次使它出现，真方便：） </P></DIV>

作者: hmc123 时间: 2004-11-6 14:00
<

>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/20047241378938.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/20047241378938.jpg"></A></P><

>1.点击小箭头,选新的网页</P><

>2,在编辑区域点鼠标右键,点网页属性,此时出现对话框,在标题(T)内输上你所需要的标题,如:下载,学习,欢迎光临**网站,点确定</P><

>3,书写文字</P><

>4,用鼠标将所有文字"涂黑"(光标在第一个文字前,履盖划过所有文字)</P><

>5将光标放在"涂黑"的区域,点右键,点段落,在对齐方式(A)上选择你所所要的,点确定
</P>

作者: hmc123 时间: 2004-11-6 14:02
<

>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004724211128283.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004724211128283.jpg"></A></P><

>1.在编辑区输入文字</P><

>2,将文字划黑, 在黑字内点右键,点字体,出现如图所示的对话框</P><

>3,点对话框里的"应用,确定"</P><

>请大家多练习,改变对话框里的各种条件,然后看看效果 </P><

>至此文字输人告一段落,将文字划黑, 在黑字内点右键,外看里面的字体,段落内容,多应用,多比较.</P>

作者: hmc123 时间: 2004-11-6 14:03
<

><FONT color=#f70938 size=7>第三课段落的设定</FONT></P><

><FONT color=#f70938>(希望在学的朋友不要打退堂鼓,也许有的朋友翻了书,觉很复杂,其实比做贴还简单,课程完了,希望见到你们漂亮的个人主页)</FONT></P><

><FONT color=#000000>文字的段落就是对一组文字进行格式排列的方式.</FONT></P><

>一个新的传落一般采用默认的方式,如果要改变传落的样式,必须先把插入点移到该段落内或者选择该传落(用按鼠标左键,拖过文字,变黑)在黑包,再将光标置于黑色的区域内,点右键,点选段落,则出现对话框如图:</P><

>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004728212454988.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004728212454988.jpg"></A>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004728212454843.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004728212454843.jpg"></A>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004728212454308.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004728212454308.jpg"></A>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004728212454110.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004728212454110.jpg"></A>
</P>

作者: hmc123 时间: 2004-11-6 14:03
<

><FONT face=隶书 color=#ee1169 size=6>第四课表格的编修 </FONT></P><

>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004728214154967.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004728214154967.jpg"></A></P><

>
</P>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/200472822228343.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/200472822228343.jpg"></A>

作者: hmc123 时间: 2004-11-6 14:04
<

>手工制表格</P><

>(注意设置表格及单元格属性属性)</P><

>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/2004730312450.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/2004730312450.jpg"></A></P>

作者: hmc123 时间: 2004-11-6 14:05
<

><FONT face=隶书 color=#ff0066 size=6>第五课表格的使用范列</FONT></P><

>1</P>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/20047310842346.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/20047310842346.jpg"></A>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/200473104923289.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/200473104923289.jpg"></A>

作者: hmc123 时间: 2004-11-6 14:06
<

><FONT face=隶书 color=#f70968 size=6>第六课图形的处理 </FONT></P><

><FONT face=隶书 color=#f70968 size=3>一插入图片</FONT></P>点击箭头所示,出来两个对话框,1为插入电脑里的图片,2为插入别的网页里的图片,此时要叉掉对话框1 在箭头所示处粘贴所选图片地址.

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-7/20047311340447.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-7/20047311340447.jpg"></A>

作者: hmc123 时间: 2004-11-6 14:07
标题: 与大家切磋网页的制作
<

><FONT face=隶书 color=#f70938 size=5>(二)插入图片属性</FONT></P><

><FONT face=隶书 color=#f70938 size=4>1.常规</FONT></P><

>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-8/20048104127880.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-8/20048104127880.jpg"></A>
</P>

作者: hmc123 时间: 2004-11-6 14:08
<FONT color=#ff0066>二)图形的外观</FONT><

>
<FONT color=#ff0066><img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif"></FONT>此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-8/20048301647972.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-8/20048301647972.jpg"></A></P><

>大家在点击外观时,出现对话概,在对齐方式的情况下,有可能无法使图片居中(对小图片而言,大图片占据了整个页面,看不出来),在右侧的"水平"间距上输人数字即可使图片处在网页的任一水平位置上
</P>

作者: hmc123 时间: 2004-11-6 14:08
<

><FONT face=新宋体 color=#ee1169 size=6>第七课缩图的使用</FONT></P><

>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-8/20048423933360.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-8/20048423933360.jpg"></A>
</P><

><FONT color=#f70968>请大家注意,在预揽状态下,点下小图,看看,是否是正常大小的图了.没问题应该是的了,如要继续编辑其它图片请返回普通状态.这种效果大家在图片网站是常见到的,也就是常见到的"点击小图看大图"</FONT></P>

作者: hmc123 时间: 2004-11-6 14:09
<

><FONT face=新宋体 color=#f70938 size=6>第八课网页的连接 (暂往后调整)</FONT></P><

><FONT color=#f70938 size=6>第九课背景音乐</FONT></P>

<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-8/20048714918372.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-8/20048714918372.jpg"></A>

作者: hmc123 时间: 2004-11-6 14:10
<

><FONT color=#f70968 size=6>附:贴图语法在frontpage的体现及修改</FONT></P>

<

><FONT color=#f70968>以某朋友的贴子为例: 其代码为:</FONT></P><

><FONT color=#f70968><CENTER>
<TABLE align=center background=pugongyingw.51.net/image/xiantiao/d/14.gif border=0 cellPadding=0 cellSpacing=10 width=480>
<TBODY>
<TR>
<TD>
<TABLE background=pugongyingw.51.net/image/xiantiao/d/14.gif border=0 cellPadding=0 cellSpacing=10 width=480>
<TBODY>
<TR>
<TD>
<TABLE background=pugongyingw.51.net/image/xiantiao/d/14.gif border=0 cellPadding=0 cellSpacing=10 width=480>
<TBODY>
<TR>
<TD>
<CENTER><IMG src="photo.ayinfo.ha点cn/lingleijp/ggjj-0/images/pic032_jpg.jpg">
<CENTER><IMG src=".dabaoku点com/sucai/renwulei/shishangrenwu/0016.jpg">
<CENTER><IMG src=".dabaoku点com/sucai/renwulei/shishangrenwu/0022.jpg">
<CENTER><IMG src=".dabaoku点com/sucai/renwulei/shishangrenwu/0026.jpg"></CENTER></CENTER></CENTER></CENTER></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></FONT></P><

><FONT color=#f70968><FONT color=#000000>1.打开fontpage,点转换按钮(HTML) 在<body>与<body>之间粘贴上述代码

</FONT><HR></FONT>

<

align=right></P><

>
<img src=".itsqq点com/bbs/skins/default/filetype/jpg.gif">此主题相关图片如下：
<a href=".itsqq点com/bbs/UploadFile/2004-8/200481704135812.jpg" target="_blank" ><img src=".itsqq点com/bbs/UploadFile/2004-8/200481704135812.jpg"></A></P><

>2.修改图片:点击图片,出现菜单,选图片属性</P><

>a) 改用新图片:在图片属性点选常规项,将图片源地址栏里的地址删去,粘上你欲改变的图片地址即可</P><P>b)改变图片尺寸:在图片属性中点选外观,在大小中输人适当数值(建议450以下吧)一般选象素,保持图片纵横比</P>

作者: hmc123 时间: 2004-11-6 14:11
<TABLE fixed; WORD-BREAK: break-all" width="90%" border=0><TR><TD 12pt; LINE-HEIGHT: 15pt" width="100%"><img src=".itsqq点com/bbs/Skins/Default/topicface/face1.gif"> <B></B>
原贴
<CENTER><TABLE cellSpacing=10 cellPadding=0 width=480 align=center background=pugongyingw.51.net/image/xiantiao/d/14.gif border=0><TR><TD><TABLE cellSpacing=10 cellPadding=0 width=480 background=pugongyingw.51.net/image/xiantiao/d/14.gif border=0><TR><TD><TABLE cellSpacing=10 cellPadding=0 width=480 background=pugongyingw.51.net/image/xiantiao/d/14.gif border=0><TR><TD><CENTER><img src="photo.ayinfo.ha点cn/lingleijp/ggjj-0/images/pic032_jpg.jpg">
<CENTER><img src=".dabaoku点com/sucai/renwulei/shishangrenwu/0016.jpg">
<CENTER><img src=".dabaoku点com/sucai/renwulei/shishangrenwu/0022.jpg">
<CENTER><img src=".dabaoku点com/sucai/renwulei/shishangrenwu/0026.jpg"></CENTER></CENTER></CENTER></CENTER></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></CENTER>
</TD></TR></TABLE>

欢迎光临中国压缩机网行业论坛 (http://bbs.compressor.cn/)