网页制作(FrontPage)案例.ppt_第1页
网页制作(FrontPage)案例.ppt_第2页
网页制作(FrontPage)案例.ppt_第3页
网页制作(FrontPage)案例.ppt_第4页
网页制作(FrontPage)案例.ppt_第5页
已阅读5页,还剩8页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

网页基础知识,网页实质上就是一个用HTML(XHTML)书写的文本文件文本文件是以ASCII编码方式存储的一种文件,可在目前主流的任何操作系统使用。在windows中,我们可以用附件提供的“记事本”程序来打开、查看或修改HTML是超文本标记语言(HyperTextMrakupLanguage)的缩写XHTML是可扩展超文本标记语言,网页基础知识-Html,HTML关心的是网页元素的展现形式(如文字的大小颜色位置等),只能使用浏览器认识的标记。XML关心的是数据本身以及数据的结构(如一条天气预报包含的城市、温度、风向、晴雨等信息),可以自己定义标记及格式。XHTML是网页从关心显示向关心数据的转变的一种过渡语言,基于HTML,但比HTML要求严格。在用XHTML制作网页的实战中,HTML仅用来组织数据,网页元素的外观形式信息不再由HTML负责,交由CSS(层叠样式表)处理。这是现在主流的网页制作方式。,网页基础知识-浏览器,我们浏览网页,实质上是浏览器先把该网页的文本内容以及相关的图片动画等资源文件下载下来,然后浏览器根据网页的HTML文本内容,对相应的标记做出相应的显示,最后呈现在我们面前的是一个丰富华丽的页面。所以我们做网页实质上是用浏览器认识的语言对浏览器说话。目前主流的浏览器有以下四种:IE系列(Internetexplorer)6.0-9.0火狐(MozillaFireFox)谷歌(GoogleChrome)苹果(MACsafari)以上四种浏览器各自有自己的内核,虽然基本差不多,但细节可能会有细微差别,尤其是针对XHTML方面,同一个网页在不同版本的IE下都可能有巨大差别,这是需要引起我们注意的方面。其他的如360、遨游等国产浏览器事实上都是基于IE,不过换了下皮肤加了点功能而已。,网页基础知识-网站,网站事实上就是多个网页通过超级链接组成的。一个网站一般包含一个主页(也称默认页,索引页),用户访问网站先到达主页,通过主页上提供的超链接点击到其他页面。(静态)网页的扩展名一般是.htm或.html。主页命名一般用default或index。,网页基础知识-网页元素,网页上一般包含以下元素,他们对应的标记如下: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优点:修改网页非常方便,可在任何平台修改。缺点:制作复杂网页麻烦,需要非常熟练HTML。所见即所得型FrontpageDreamweaver优点:制作复杂网页简单,不懂Html也可制作。缺点:修改网页需要安装大型软件,一般远程服务器不支持,FrontPage,FrontPage是MircrosoftOffice办公软件系列的一种,但默认不安装,需要单独安装。FrontPage是一款非常简单方便的网页制作软件,不仅可以用来制作网页,还可以用来建设和管理一个站点(不推荐使用站点功能,因FrontPage站点需要使用Frontpage扩展,大多数服务器不支持该功能,可能会导致网页无法正常浏览或使用),教学案例一,用FrontPage制作一个表格布局的页面素材在“表格布局的页面”文件夹内本页面用到了绝大部分常用的HTML元素,并融入了一些表格制作网页的技巧,有兴趣的同学可在课下仔细研究。,案例一步骤,打开Frontpage,先将新建的网页保存,同时将素材文件夹放在和网页同目录下。然后空白处按右键,点击“网页属性”菜单,会弹出“网页属性”对话框。在该对话框中点“高级”选项卡,设定上边距和左边距为0,按“确定”。(切换到代码视图,观察HTML变化。我们发现原来的body标记后增加了两个属性,网页制作工具就是这个原理,我们只需要点来点去,工具帮我们写代码),案例一步骤,点击“表格插入表格”菜单,在弹出的对话框中设置需要插入的表格属性,在此我们如下图设置。,案例一步骤,新建的表格因为边框粗细为0,在设计视图下会以虚线显示,在表格内按右键,点“表格属性”,在使用背景图片的“浏览”按钮,选择素材文件夹中的“banner_bj.jpg”,确定。在左边单元格内按右键,点“单元格属性”,设定单元格宽度770像素,再使用背景图片的“浏览”按钮,选择素材文件夹中的“banner.jpg”,确定。在表格内点“插入图片Flash影片”菜单,选择素材文件夹内的“top.swf”,确定。在新加入的flash影片上按右键,勾选“透明”,设定宽度为770。采用如上类似步骤制作导航部分。在浏览器中预览,发现页面头部已经按预想完成。,案例一步骤,再次插入表格,1行5列,宽度100%,高度不设置。将第1,2,4,5列分别设置宽度为193,14,16,193,中间列不设置。将5个单元格全部选中,垂直对齐方式设为“顶端对齐”。将第2列设置背景图片bg3.gif,在该单元格内插入图片tr3.gif,将第4列设置背景图片bg4.gif,在该单元格内插

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论