计算机基础之网页设计课件_第1页
计算机基础之网页设计课件_第2页
计算机基础之网页设计课件_第3页
计算机基础之网页设计课件_第4页
计算机基础之网页设计课件_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

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

文档简介

第十一章网页制作初识11.1概述11.2超文本链接标识语言11.3frontpage应用11.4frontpage高级应用11.5网站发布与管理11.1概述网页的基本要素(1)文字

文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，但纯文字网页，又会给人带来死板不活泼的感觉，所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。标题字号字型(2)图形菜单按钮背景图形链接标志交互功能

一、网页制作工具1．超文本标识语言（HTML）

HTML（HypertextMarkupLanguage）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。2．FrontPage

FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。3．Dreamweaver

Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。

11.1.3网页制作和美化工具二、网页美化工具1．Photoshop

Photoshop是由Adobe公司开发的图形处理软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。2．Fireworks

Fireworks是由Macromedia公司开发的图形处理工具，是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。3．Flash

Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。

一、准备工作1．收集整理资料2．准备素材3．内容规划二、整体规划进行网站的整体规划也就是组织网站的内容和设计其结构。以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护性与可扩展性增强。11.1.4网页制作的基本步骤主页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题层状结构①层状结构

层状结构类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。

②线性结构线性结构（如图1.9所示）类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理性、规范性，又可同时满足设计者和浏览者的要求。主页页面1页面2页面3线性结构③Web结构

Web结构（如图1.10所示）类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。主页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题图1.10Web结构页面6三、网页设计与制作1．静态网页的设计与制作

在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。（1）应根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。（3）切勿以800×600以上的分辨率设计网页，常用的分辨率是640×480及800×600。现在国内的站点基本上都是800×600，但是如果主要是面向国外访问者的站点，建议使用640×480。（4）不应在每页中插入太多的广告。（5）不要每页都采用不同的墙纸，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。（6）底色或墙纸必须与文字对比强烈，以易于阅读。（7）不要把图片白色当作透明，外，最好还是用图片编辑工具将图片设为透明颜色。2．为网页的添加动态效果

静态网页制作完成后，接下来的工作就是为网页添加动态效果，包括一些脚本语言程序和数据库程序的设计，以及加入动画效果等。四、测试网页

当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。

五、网页上传发布

网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的。

11.2超文本链接语言1.名词网页:是WWW的基本文档，它是用HTML(HypertextMarkupLaguage即超文本标识语言）编写的。当网页中包含正常文本和HTML语言标记时，浏览器会“翻译”由这些HTML语言标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来，而不是显示一堆奇怪的标记。

超文本:Hypertext,是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。首页或主页（HomePage）:进入网站首先看到的那一页称首页。2.html文件的生成：.htm,.html3.html文件基本语法：

<HTML><HEAD><TITLE>HTML编写举例</TITLE></HEAD><BODY><P>欢迎使用HTML语言编写网页！</P></BODY></HTML>3.基本元素（1）TITLE元素（2）Hn元素（n为1～6的自然数）（3）P元素（4）List元素①无序列表（ul）②有序列表（ol）（5）Center元素4.网页风格的设置6.html（1）字体大小<fontsize=字号><fontsize=±n>（2）字体风格字体风格包括如下几种类型。①<b>黑体。②<i>斜体。③<u>下划线。④<tt>打字机体。（3）字体颜色8.html指定字体的颜色可以使用如下格式<fontcolor="#xxxxxx">text</font>（4）标尺线（hr）标尺线可用于分隔网页的不同部分。指定标尺线的格式如下。

<hrsize=nwidth=malign=x><fontcolor="#xxxxxx">text</font>5.表格10.html（1）表格的基本形式一个表格由<table>开始，</table>结束，表的内容由<tr>、<th>和<td>定义。·<tr>表示表格的行。·<td>表示表格的列。·<th>表示表格的列的名称，通常情况下可以使用<td>代替<th>。Border属性说明表格是否有分隔线，通常在使用表格进行网页区域划分时将border属性设为零或者不使用border属性。①宽度和高度表格的宽度可以使用width属性表示，表格的高度可以使用height属性表示，其格式如下。

<tableborderwidth=#height=#>②表格边框宽度表格的边框宽度由border属性表示，其格式如下。

<tableborder=#>③格间线宽度格与格之间的线为格间线，它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是：

<tablecellspacing=#>

#表示要取用的像素值①文本和边框的距离文本与边框的距离使用cellpadding=#说明，其格式如下。

<tablebordercellpadding=#>②文本在表格中的位置文本在表格中的横向位置使用align=#说明，align属性可修饰<tr>，<th>和<td>元素，其格式如下。

<tralign=#><thalign=#><tdalign=#>6.超链接标记超文本链接（HypertextLink）通常称为超链接（Hyperlink）或者简称为链接（Link）<ahref＝”URL”>…</a>7.多媒体标记(1)插入图像<IMGSRC="图形文件地址">7．图像作为网页的背景使用图像作为网页背景的语句如下：<bodybackground="ImageName">8．在文档中链接声音或视频文件<ahref="sound1.wav">链接声音文件</a></p>

11.3FrontPage2003基本操作一、FrontPage2003的界面四种视图:“设计”、“拆分”、“代码”和“预览”新建网页打开网页保存网页网页框架：容器框架和其他框架（1）框架网页的建立（2）框架网页的编辑（3）框架网页的保存二、网页框架

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论