网页制作(FrontPage)案例
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页上一般包含以下元素，他们对应的标记如下： • HTML基本结构： HTML,HEAD,BODY,TITLE,META,STYLE • 页面排版:H1-H6,BR,HR,P, PRE,CENTER,FONT等 • 表格:TABLE,TR,TH,TD,CAPTIOND等 • 图片和多媒体:IMG,EMBED,OBJECT • 列表: UL,OL,LI,DL,DT,DD • 超级链接:A • 表单:FORM,INPUT,CHECKBOX,RADIO, SELECT,OPTION,TEXTAREA等 • 框架:FRAME,FRAMESET • 其他:DIV,SPAN等
作业
• 使用FrontPage，利用“作业素材”文件 夹下的素材，基于表格制作如下网页。
百度文库
网页基础知识-网站
• 网站事实上就是多个网页通过超级链接组 成的。 • 一个网站一般包含一个主页（也称默认页， 索引页），用户访问网站先到达主页，通 过主页上提供的超链接点击到其他页面。 • (静态)网页的扩展名一般是 .htm 或 .html。 • 主页命名一般用default或index。
网页基础知识-网页元素
案例一—步骤
2. 点击“表格—插入—表格”菜单，在弹出 的对话框中设置需要插入的表格属性，在 此我们如下图设置。
案例一—步骤
3. 新建的表格因为边框粗细为0，在设计视图下会以虚线 显示，在表格内按右键，点“表格属性”，在使用背景 图片的“浏览”按钮，选择素材文件夹中的 “banner_bj.jpg”，确定。 4. 在左边单元格内按右键，点“单元格属性”，设定单元 格宽度770像素，再使用背景图片的“浏览”按钮，选 择素材文件夹中的“banner.jpg”，确定。 5. 在表格内点“插入—图片—Flash影片”菜单，选择素 材文件夹内的“top.swf”，确定。在新加入的flash影 片上按右键，勾选“透明”，设定宽度为770。 6. 采用如上类似步骤制作导航部分。 在浏览器中预览，发现页面头部已经按预想完成。
教学案例一
• 用FrontPage制作一个表格布局的页面 素材在“课堂样例”文件夹内 本页面用到了绝大部分常用的HTML元素， 并融入了一些表格制作网页的技巧，有兴 趣的同学可在课下仔细研究。
案例一—步骤
1. 打开Frontpage，先将新建的网页保存，同时 将素材文件夹放在和网页同目录下。然后空白 处按右键，点击“网页属性”菜单，会弹出 “网页属性”对话框。在该对话框中点“高级” 选项卡，设定上边距和 左边距为0，按“确 定”。 （切换到代码视图，观察HTML变化。我们发现原 来的body标记后增加了两个属性，网页制作工 具就是这个原理，我们只需要点来点去，工具 帮我们写代码）
案例一—步骤
7. 再次插入表格，1行5列，宽度100%，高度不 设置。 8. 将第1,2,4,5列分别设置宽度为 193,14,16,193，中间列不设置。将5个单元 格全部选中，垂直对齐方式设为“顶端对齐”。 9. 将第2列设置背景图片bg3.gif,在该单元格内插 入图片tr3.gif，将第4列设置背景图片bg4.gif, 在该单元格内插入图片tr4.gif， 10.其他步骤不再赘述。
FrontPage
• FrontPage是Mircrosoft Office办公软件系列的 一种，但默认不安装，需要单独安装。 • FrontPage是一款非常简单方便的网页制作软件， 不仅可以用来制作网页，还可以用来建设和管理 一个站点（不推荐使用站点功能，因FrontPage 站点需要使用Frontpage扩展，大多数服务器不 支持该功能，可能会导致网页无法正常浏览或使 用）
网页基础知识
• 网页实质上就是一个用HTML(XHTML)书 写的文本文件 • 文本文件是以ASCII编码方式存储的一种文 件，可在目前主流的任何操作系统使用。 在windows中，我们可以用附件提供的 “记事本”程序来打开、查看或修改 • HTML是超文本标记语言(Hyper Text Markup Language)的缩写 • XHTML是可扩展超文本标记语言
网页制作工具
• 文本型 Notpad Hotdog Editplus 优点：修改网页非常方便，可在任何平台修改。 缺点：制作复杂网页麻烦，需要非常熟练HTML。 • 所见即所得型 Frontpage Dreamweaver 优点：制作复杂网页简单，不懂Html也可制作。 缺点：修改网页需要安装大型软件，一般远程服务器不支持
网页基础知识-浏览器
• 我们浏览网页，实质上是浏览器先把该网页的文本内容以及相关的图 片动画等资源文件下载下来，然后浏览器根据网页的HTML文本内容， 对相应的标记做出相应的显示，最后呈现在我们面前的是一个丰富华 丽的页面。所以我们做网页实质上是用浏览器认识的语言对浏览器说 话。 • 目前主流的浏览器有以下四种： IE系列（Internet explorer）6.0-9.0 火狐（Mozilla FireFox） 谷歌 （Google Chrome） 苹果 （MAC safari） 以上四种浏览器各自有自己的内核，虽然基本差不多，但细节可 能会有细微差别，尤其是针对XHTML方面，同一个网页在不同版本 的IE下都可能有巨大差别，这是需要引起我们注意的方面。 其他的如360、遨游等国产浏览器事实上都是基于IE，不过换了 下皮肤加了点功能而已。
网页基础知识-Html
• HTML关心的是网页元素的展现形式（如文字的 大小颜色位置等），只能使用浏览器认识的标记。 • XML关心的是数据本身以及数据的结构（如一条 天气预报包含的城市、温度、风向、晴雨等信 息），可以自己定义标记及格式。 • XHTML是网页从关心显示向关心数据的转变的一 种过渡语言，基于HTML，但比HTML要求严格。 在用XHTML制作网页的实战中，HTML仅用来组 织数据，网页元素的外观形式信息不再由HTML 负责，交由CSS（层叠样式表）处理。这是现在 主流的网页制作方式。
作业
• 使用FrontPage，利用“作业素材”文件 夹下的素材，基于表格制作如下网页。
百度文库
网页基础知识-网站
• 网站事实上就是多个网页通过超级链接组 成的。 • 一个网站一般包含一个主页（也称默认页， 索引页），用户访问网站先到达主页，通 过主页上提供的超链接点击到其他页面。 • (静态)网页的扩展名一般是 .htm 或 .html。 • 主页命名一般用default或index。
网页基础知识-网页元素
案例一—步骤
2. 点击“表格—插入—表格”菜单，在弹出 的对话框中设置需要插入的表格属性，在 此我们如下图设置。
案例一—步骤
3. 新建的表格因为边框粗细为0，在设计视图下会以虚线 显示，在表格内按右键，点“表格属性”，在使用背景 图片的“浏览”按钮，选择素材文件夹中的 “banner_bj.jpg”，确定。 4. 在左边单元格内按右键，点“单元格属性”，设定单元 格宽度770像素，再使用背景图片的“浏览”按钮，选 择素材文件夹中的“banner.jpg”，确定。 5. 在表格内点“插入—图片—Flash影片”菜单，选择素 材文件夹内的“top.swf”，确定。在新加入的flash影 片上按右键，勾选“透明”，设定宽度为770。 6. 采用如上类似步骤制作导航部分。 在浏览器中预览，发现页面头部已经按预想完成。
教学案例一
• 用FrontPage制作一个表格布局的页面 素材在“课堂样例”文件夹内 本页面用到了绝大部分常用的HTML元素， 并融入了一些表格制作网页的技巧，有兴 趣的同学可在课下仔细研究。
案例一—步骤
1. 打开Frontpage，先将新建的网页保存，同时 将素材文件夹放在和网页同目录下。然后空白 处按右键，点击“网页属性”菜单，会弹出 “网页属性”对话框。在该对话框中点“高级” 选项卡，设定上边距和 左边距为0，按“确 定”。 （切换到代码视图，观察HTML变化。我们发现原 来的body标记后增加了两个属性，网页制作工 具就是这个原理，我们只需要点来点去，工具 帮我们写代码）
案例一—步骤
7. 再次插入表格，1行5列，宽度100%，高度不 设置。 8. 将第1,2,4,5列分别设置宽度为 193,14,16,193，中间列不设置。将5个单元 格全部选中，垂直对齐方式设为“顶端对齐”。 9. 将第2列设置背景图片bg3.gif,在该单元格内插 入图片tr3.gif，将第4列设置背景图片bg4.gif, 在该单元格内插入图片tr4.gif， 10.其他步骤不再赘述。
FrontPage
• FrontPage是Mircrosoft Office办公软件系列的 一种，但默认不安装，需要单独安装。 • FrontPage是一款非常简单方便的网页制作软件， 不仅可以用来制作网页，还可以用来建设和管理 一个站点（不推荐使用站点功能，因FrontPage 站点需要使用Frontpage扩展，大多数服务器不 支持该功能，可能会导致网页无法正常浏览或使 用）
网页基础知识
• 网页实质上就是一个用HTML(XHTML)书 写的文本文件 • 文本文件是以ASCII编码方式存储的一种文 件，可在目前主流的任何操作系统使用。 在windows中，我们可以用附件提供的 “记事本”程序来打开、查看或修改 • HTML是超文本标记语言(Hyper Text Markup Language)的缩写 • XHTML是可扩展超文本标记语言
网页制作工具
• 文本型 Notpad Hotdog Editplus 优点：修改网页非常方便，可在任何平台修改。 缺点：制作复杂网页麻烦，需要非常熟练HTML。 • 所见即所得型 Frontpage Dreamweaver 优点：制作复杂网页简单，不懂Html也可制作。 缺点：修改网页需要安装大型软件，一般远程服务器不支持
网页基础知识-浏览器
• 我们浏览网页，实质上是浏览器先把该网页的文本内容以及相关的图 片动画等资源文件下载下来，然后浏览器根据网页的HTML文本内容， 对相应的标记做出相应的显示，最后呈现在我们面前的是一个丰富华 丽的页面。所以我们做网页实质上是用浏览器认识的语言对浏览器说 话。 • 目前主流的浏览器有以下四种： IE系列（Internet explorer）6.0-9.0 火狐（Mozilla FireFox） 谷歌 （Google Chrome） 苹果 （MAC safari） 以上四种浏览器各自有自己的内核，虽然基本差不多，但细节可 能会有细微差别，尤其是针对XHTML方面，同一个网页在不同版本 的IE下都可能有巨大差别，这是需要引起我们注意的方面。 其他的如360、遨游等国产浏览器事实上都是基于IE，不过换了 下皮肤加了点功能而已。
网页基础知识-Html
• HTML关心的是网页元素的展现形式（如文字的 大小颜色位置等），只能使用浏览器认识的标记。 • XML关心的是数据本身以及数据的结构（如一条 天气预报包含的城市、温度、风向、晴雨等信 息），可以自己定义标记及格式。 • XHTML是网页从关心显示向关心数据的转变的一 种过渡语言，基于HTML，但比HTML要求严格。 在用XHTML制作网页的实战中，HTML仅用来组 织数据，网页元素的外观形式信息不再由HTML 负责，交由CSS（层叠样式表）处理。这是现在 主流的网页制作方式。