250 likes | 456 Views
用 FrontPage 制作个人主页. 用 FrontPage 制作个人主页的基本流程. 新建个人网站 设计主页功能模块 表格或框架规划主页 设计普通网页 添加网页元素 插入活动元素 设计超链接 美化页面 运用表单 管理网站. 创建和编辑网站 使用向导创建各种站点. 用 FrontPage 制作个人主页的基本流程. 新建个人网站 设计主页功能模块 表格或框架规划主页 设计普通网页 添加网页元素 插入活动元素 设计超链接 美化页面 运用表单 管理网站. 用 FrontPage 制作个人主页的基本流程.
E N D
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 创建和编辑网站 • 使用向导创建各种站点
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 创建表格 • 插入一个规则的表格 • 自绘表格 • 把文本转换成表格、把表格转换成文本 • 在表格中插入表格 • 在表格中选择和移动插入点 • 移动、复制、删除单元格中的内容 • 编辑表格 • 增加行或列 • 拆分和合并单元 • 改变单元格和表格的尺寸 • 单元格的属性 • 背景图像、颜色 • 表格的属性 • 背景图像、颜色、边框 • 给表格加上标题 • “表格”→“插入”→“标题”
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 框架的作用 • 创建框架网页 • 使用菜单“文件” →“新建” →“网页” →“框架网页” • 在每个框架中指定一个初始网页或新建网页 • 在框架页中设置超级链接:注意每个窗格都有一个名字,要保证目标框架的正确 • 保存框架网页 • 常常需要一次保存多个相关的网页文件 • 注意查看框架页的HTML文件
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 普通网页的设计步骤 1)新建网页,选择不同版式的网页或用表格规划网页 2)引入相关网页元素 3)修饰主题、网页属性、段落等,保存页面
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 文字/图片/项目列表
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 悬停按钮 横幅广告 • 字幕 搜索表单 • 计数器 视频剪辑 • 时间日期 建立目录 • 插入注释 • 包含其它网页 • 配置变量 • 定时显示图像 • 定时包含网页 • 插入HTML命令
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 什么是超级链接 • 怎样建立超级链接 • 超级链接的目标: • 从WWW上查找一个网页作为目标 • 指定一个e-mail地址作为目标 • 从本地磁盘中指定一个网页作为目标 (相对路径) • 书签(同一文件或不同文件) • 实际上任何一个文件都可以作为超级链接的目标。文件的类型不同,浏览点击时打开的方式不同。有些由浏览器直接打开,有些由机器上的其他程序打开,有些则直接下载保存到磁盘。
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 用图像作为超级链接 • 映像地图(Image Map)(热点,热区) • 改变超级链接的外观 • “网页属性”→背景 • 怎样编辑超级链接的属性 • 右键,“超级链接属性”→目标框架
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 设置网页的常规属性 • “文件→属性”或右键快捷菜单“网页属性” • 设置网页的背景属性 • 设置网页的页边距 • 选择和应用主题 • 去掉或改变网页所应用的主题
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 表单的特点 • 创建表单 • 意见反馈表模板 • 用户注册表单模板 • 表单向导 • 表单处理 • 隐藏表单域 • 指定表单处理程序 • 自定义表单处理程序 • 自定义默认的表单处理程序 • 自定义ISAPI、NSAPI、CGI或ASP程序 • 确认表单和确认表单域
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 表单域的种类 • 单行文本输入框 • 滚动文本框 • 复选框 • 单选按钮 • 下拉菜单 • 按钮 • 用图像作为按钮 • 使表单域的标签具有可击性
用FrontPage制作个人主页的基本流程 • 新建个人网站 • 设计主页功能模块 • 表格或框架规划主页 • 设计普通网页 • 添加网页元素 • 插入活动元素 • 设计超链接 • 美化页面 • 运用表单 • 管理网站 • 发布网站 • 在网站中导入文件 • 删除和关闭网站 • 对网站进行设置 • 【参数】选项卡 • 【常规】选项卡 • 【高级】选项卡 • 【语言】选项卡 • 【导航】选项卡
用FrontPage制作个人主页的一些技巧 • Java是一种高级语言,主要用于网络应用的开发。它由Sun公司开发。 • 两种应用方式: • Java应用程序:是独立的程序,直接在操作系统下运行 • Java Applet:不能独立运行,必须嵌入到HTML文件中,并由浏览器来打开运行。Java Applet在设置网页的动态效果,交互式应用以及动态数据显示等方面有“特色”。 • 如何加入Java Applet? • 经过编译后的applet的扩展名为class,最简单的方式: • <applet code=“HelloWorld.class” width=200,height=50> • </applet> • 也可从FrontPage中“插入”→“高级” →“Java小程序”
用FrontPage制作个人主页的一些技巧 DHTML • Dynamic HTML 动态HTML • 它并不是一个新的标记语言。DHTML的三个组成元素是:浏览器的各项对象、Script语言和各项HTML标记。 • 含义:将浏览器及在浏览器上显示的网页对象化,利用Script语言来处理各项对象的动作与数据,并做出反应,达到互动的效果。
用FrontPage制作个人主页的一些技巧 ASP • 在服务器端执行的程序:CGI程序(Common Gateway Interface) • 缺点:通用性差,限制较多,有关数据库操作不方便 • ASP(Active Server Pages),也是在服务器端执行。 • 使用它可以创建和运行动态、交互的 Web 服务器应用程序。使用 ASP 可以组合 HTML 页、脚本命令和 ActiveX 组件以创建交互的 Web 页和基于 Web 的功能强大的应用程序。ASP 应用程序很容易开发和修改。 • 浏览器从 Web 服务器上请求 .asp 文件时,ASP 脚本开始运行。然后 Web 服务器调用 ASP,ASP 全面读取请求的文件,执行所有脚本命令,并将 Web 页传送给浏览器。 • ASP主要是基于Windows NT + IIS
用FrontPage制作个人主页的一些技巧 • 如何实现主页定时跳转? • 在<head>区加入: • <meta http-equiv="refresh" content="3;url=http://www.fosu.edu.cn"> • 3是时间单位是秒,http://是你想跳转到的url地址。 • 如何将我的个人网页在各大搜索引擎登记? • 各大网站上有指南! • 关于图片的处理 • 图片大小的改变、格式改变、特殊效果设置等,都要通过图象处理软件进行。最常用的有:Windows“附件”中的“画图”程序;Microsoft的“照片编辑器”,Adobe PhotoShop等
加入Flash • 如何加入下载的Flash? (扩展名swf) • 以下是将一个Shockwave Flash电影嵌入到网页中所需要的最起码的编码: • <OBJECT WIDTH=”200" HEIGHT=”60"> • <PARAM NAME="MOVIE" VALUE="tutorial.swf"> • <EMBED SRC="tutorial.swf" WIDTH=”200" HEIGHT=”60"> • </EMBED> • </OBJECT> • 这其中的swf的height和width都可以按照你自己的要求做出改动
超级链接的颜色 • 做网页时如何去掉超级链接下面的下画线? • 用css进行设置,放置在<head>区 • <style type="text/css"> • <!-- • a:link { color: #3333FF; text-decoration: none} • a:visited { color: #3333FF; text-decoration: none} • a:active { color: #3333FF; text-decoration: none} • a:hover { color: #FF3333; text-decoration: underline} • --> • </style>
确定设置文字大小 • 如何才能让网页上的文字不随浏览器的字体大小而改变? • 在css里设定font-size,不过是要以pt、px等为单位。 • 在<style>中定义 • p {font-size:16px} 作用于所有<p> </p>之间的内容 • .fixed16 {font-size:16pt} 作用于 <span> ,<div>包围的文字,如:I am a <span class=“fixed16”>student</span>,则文字“student”的大小一直都是16pt。 • 也可单独定义一段文字的大小: • <P style=“font-size:16px”>Hello,World!</P>,仅作用于该段。
背景色和背景图片 • 怎样对一段文字或一段中的部分文字设置背景颜色和背景图片? • 一段文字: • <P style=“background-color:blue”> Hello,World! </P> • <P style=“background-image:url(bak3.gif)”> Hello,World! </P> • 部分文字:用<span style=“background-color:silver”> Hello </span> World ,则仅仅Hello有背景色 • 可以先在<style>中定义: • .blue {background-color:blue} • .bkimg {background:url(bak3.gif)} • 然后<span class=“blue”>Kiss me goodbye</span>I will try not to cry.
自动弹出新窗口 • 怎样实现一进入页面就会有欢迎的页面出现,退出又有再见的画面? • 用到了JavaScript,在<body>中加入:<body onload=alert(“Welcome”) onunload=alert(“Goob Bye”)> • 比较复杂的情形:可以自己控制窗口的大小、形状 • 下面的JavaScript函数newWin 中的参数newpage为要弹出的窗口中显示的网页文件名,也可直接给一个URL。 • 这个函数要放在<head>区
自动弹出新窗口 • <script language="JavaScript"> • <!-- • function newWin(newpage) • { msgwindow=window.open • (newpage,"Hello","menubar=0,toolbar=0,scrollbars=1,resizeable=1, status=0,height=300,width=400") • msgwindow.focus() } • status=“欢迎访问我的小窝" • --> • </script> • 然后再在<body>中加:<body onload=newWin(“ad.htm”) onunload=window.open(“http://www.fosu.edu.cn”)> • status给出的是状态行的信息
部分文字的动态效果 • 对部分文字实现动态效果 • FrontPage中的设置是对一段文字产生作用 • 用CSS:如Try it! Here<span onmouseover=“this.style.fontSize=‘40’; this.style.color=‘red’”onmouseout=“this.style.fontSize=‘’; this.style.color=‘’>变大变色</span> • 注意用英文状态的单、双引号,fontSize的S要大写 • 同样可以改变backgroundColor,backgroundImage等