网页制作(FrontPage)案例.ppt

《网页制作(FrontPage)案例.ppt》由会员分享，可在线阅读，更多相关《网页制作(FrontPage)案例.ppt（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页基础知识网页实质上就是一个用HTML(XHTML)书写的文本文件文本文件是以ASCII编码方式存储的一种文件，可在目前主流的任何操作系统使用。在windows中，我们可以用附件提供的“记事本”程序来打开、查看或修改HTML是超文本标记语言(Hyper Text Mrakup Language)的缩写XHTML是可扩展超文本标记语言网页基础知识-HtmlHTML关心的是网页元素的展现形式（如文字的大小颜色位置等），只能使用浏览器认识的标记。XML关心的是数据本身以及数据的结构（如一条天气预报包含的城市、温度、风向、晴雨等信息），可以自己定义标记及格式。XHTML是网页从关心显示向关心数据的转

2、变的一种过渡语言，基于HTML，但比HTML要求严格。在用XHTML制作网页的实战中，HTML仅用来组织数据，网页元素的外观形式信息不再由HTML负责，交由CSS（层叠样式表）处理。这是现在主流的网页制作方式。网页基础知识-浏览器我们浏览网页，实质上是浏览器先把该网页的文本内容以及相关的图片动画等资源文件下载下来，然后浏览器根据网页的HTML文本内容，对相应的标记做出相应的显示，最后呈现在我们面前的是一个丰富华丽的页面。所以我们做网页实质上是用浏览器认识的语言对浏览器说话。目前主流的浏览器有以下四种：IE系列（Internet explorer）6.0-9.0火狐（Mozilla FireFo

3、x）谷歌（Google Chrome）苹果（MAC safari）以上四种浏览器各自有自己的内核，虽然基本差不多，但细节可能会有细微差别，尤其是针对XHTML方面，同一个网页在不同版本的IE下都可能有巨大差别，这是需要引起我们注意的方面。其他的如360、遨游等国产浏览器事实上都是基于IE，不过换了下皮肤加了点功能而已。网页基础知识-网站网站事实上就是多个网页通过超级链接组成的。一个网站一般包含一个主页（也称默认页，索引页），用户访问网站先到达主页，通过主页上提供的超链接点击到其他页面。(静态)网页的扩展名一般是.htm 或.html。主页命名一般用default或index。网页基础知识-网页

4、元素网页上一般包含以下元素，他们对应的标记如下：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等网页制作工具文本型NotpadHotdogEditplus优点：修改网页非常方便，可在任

5、何平台修改。缺点：制作复杂网页麻烦，需要非常熟练HTML。所见即所得型FrontpageDreamweaver优点：制作复杂网页简单，不懂Html也可制作。缺点：修改网页需要安装大型软件，一般远程服务器不支持FrontPageFrontPage是Mircrosoft Office办公软件系列的一种，但默认不安装，需要单独安装。FrontPage是一款非常简单方便的网页制作软件，不仅可以用来制作网页，还可以用来建设和管理一个站点（不推荐使用站点功能，因FrontPage站点需要使用Frontpage扩展，大多数服务器不支持该功能，可能会导致网页无法正常浏览或使用）教学案例一用FrontPage制

6、作一个表格布局的页面素材在“表格布局的页面”文件夹内本页面用到了绝大部分常用的HTML元素，并融入了一些表格制作网页的技巧，有兴趣的同学可在课下仔细研究。案例一步骤1.打开Frontpage，先将新建的网页保存，同时将素材文件夹放在和网页同目录下。然后空白处按右键，点击“网页属性”菜单，会弹出“网页属性”对话框。在该对话框中点“高级”选项卡，设定上边距和 左边距为0，按“确定”。（切换到代码视图，观察HTML变化。我们发现原来的body标记后增加了两个属性，网页制作工具就是这个原理，我们只需要点来点去，工具帮我们写代码）案例一步骤2.点击“表格插入表格”菜单，在弹出的对话框中设置需要插入的表格

7、属性，在此我们如下图设置。案例一步骤3.新建的表格因为边框粗细为0，在设计视图下会以虚线显示，在表格内按右键，点“表格属性”，在使用背景图片的“浏览”按钮，选择素材文件夹中的“banner_bj.jpg”，确定。4.在左边单元格内按右键，点“单元格属性”，设定单元格宽度770像素，再使用背景图片的“浏览”按钮，选择素材文件夹中的“banner.jpg”，确定。5.在表格内点“插入图片Flash影片”菜单，选择素材文件夹内的“top.swf”，确定。在新加入的flash影片上按右键，勾选“透明”，设定宽度为770。6.采用如上类似步骤制作导航部分。在浏览器中预览，发现页面头部已经按预想完成。案例一步骤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，表格布局方式制作如“CSS布局的页面”文件夹下的网页。备注：“CSS布局的页面”例子通过记事本完成，超出教学内容，仅提供给学生参考。