大学计算机基础网页设计与制作课件_第1页
大学计算机基础网页设计与制作课件_第2页
大学计算机基础网页设计与制作课件_第3页
大学计算机基础网页设计与制作课件_第4页
大学计算机基础网页设计与制作课件_第5页
已阅读5页，还剩64页未读， 继续免费阅读

下载本文档

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

文档简介

1第9章网页设计与制作9.1网站的建设与规划9.2使用FrontPage2003制作网站9.3网站的发布和管理2本章重点网页基本知识网站建设的基本过程常用的网页制作工具使用FrontPage2003建立网站使用FrontPage2003编辑网页级联样式表CSS网页布局的方法应用表单实现网页交互的方法网站的发布与管理39.1网站的建设与规划9.1.1网页基本知识9.1.2HTML语言简介9.1.3常用的网页制作工具49.1.1网页基本知识WWW(WorldWideWeb)WWW是Internet上多媒体信息查询的工具。WEB由互相链接在一起的网页构成，这些网页是由普通文本、超文本Hypertext，以及图表、图片等构成。URL（UniformResourceLocator）URL（统一资源定位器）是指向网络服务器中某个资源的地址，用字符串来表示。其中包括协议、主机域名（或IP地址）、文件名等等。

超级链接（Hyperlink）超级链接是包含在网页中指向其他网页的指针。超文本包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超链接。5网页基本知识超媒体当超文本网页中包含声音、动画、视频等其它媒体时，网页被称为是超媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。浏览器用户通过称为浏览器的软件来观看网页，浏览器取回所请求的网页，解释其中所含的文本和格式命令，并正确的显示出来。网页与网站网页由超文本标记语言（HTML，HyperTextMarkupLanguage）写成，网页之间通过超链接相互组织成为反映某个主题的网站。6Web工作模式HTTP协议用HTML编写httprequesthttpresponsehttprequesthttpresponseHTTP协议WebserverHomepage主页网页网页第一步：WEB浏览器向一个特定的服务器发送WEB页面请求。第二步：在每个WEB服务器上有一个服务进程在TCP的80端口上监听由浏览器发来的建立连接请求；在连接建立之后，寻找所请求的WEB页面，并将所请求的网页传送给浏览器。浏览器和服务器之间进行信息传输使用超文本传输协议HTTP协议。第三步：WEB浏览器接收到所请求的网页，并按照预定的格式显示出来。7网站建设的基本过程申请域名

有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的，需要向网络信息中心申请。

建立服务器主机

服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资金、网络维护能力等不同可以选择不同的服务方式。自己建立服务器主机大的企业、学校、政府部门等，有专门的技术人员维护。主机托管模式将服务器主机交给专门的网络运营部门管理。虚拟主机模式租用网络运营商服务器主机的部分存储空间。设计网站

设计网站首先要确定网站的主题，围绕主题就可以确定网站的内容和网页的风格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网页。制作网页

网页是用HTML语言写出来的文档，是纯文本文档。8网页设计确定网站主题主题确定网站主要传播哪些内容和提供哪些服务。确定网页风格(选择视觉外观)网页风格决定了网页的表现形式，决定于网站的主题和内容，以达到内容和形式的统一。设计有效的页面布局合理的网页布局可以使浏览者更加方便地浏览网页。组织素材确定了主题和风格后就需要组织文字、图片、声音等网页素材来表现主题。制作网页将各种网页素材组织到网页中9网页设计遵循的一般原则主题鲜明一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂烩式的网站更加吸引人。形式与內容统一网页的排版、布局、色彩、图形的运用要与网页中欲向网友传达的有效信息相统一。风格要统一风格的选用要尽量突出自己的个性，让浏览者有一个独特的印象。栏目设计要合理倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信息。导航清晰易懂一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，便于转到其他的页面。时常更新內容经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。10利用制作工具编写HTML源代码使用所见即所得的可视化工具软件。网页制作网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成HTML文档。119.1.2HTML语言简介HTML是一种简单的标记语言，它主要用于描述Web文档的结构，HTML代码描述超文本文档的格式。格式由浏览器解释和执行。标记的一般格式为：<tag>对象</tag><tag属性=参数>对象</tag><tag>例如：<h1>我的主页</h1><ahref=jianjie.htm>简介</a>12超文本文档的结构例：<html>

<head><title>我的第一个主页</title>

</head>

<body><h1>这是一个简单的例子</h1>

</body>

</html>文档头部文档体13图像的使用网页上的图像用<img>标记表示，src属性是必须的，其值说明图像的位置。例如：<imgsrc=”../abc.gif”alt=”text”>使用图像要考虑网络传输速度，大的图像文件需要相对长的网络传输时间。不同格式的图像文件压缩比不同，图像质量也不同，文件大小也不同。一般静态图像使用jpg格式，动态图像使用gif格式。149.1.3常用网页制作工具网页编写软件Frontpage、Dreamwaver图形/图像处理软件Photoshop、Fireworks网页动画制作软件Flash常用网页脚本语言Javascript、VbscriptJavaapplet小程序动态网页开发工具Asp、Jsp、Php159.2使用FrontPage2003制作网站9.2.1建立网站9.2.2编辑网页9.2.3编排网页格式9.2.4使用图像9.2.5保持网站的一致性外观9.2.6网页的布局9.2.7网页的动态效果9.2.8应用表单实现交互功能16FrontPage2003界面自动生成的HTML语句预览网页效果基本内容区文本图像表格背景声音超级链接文件夹列表179.2.1建立网站FrontPage2003的网站管理功能强大，建立网站后，其中的文件被统一管理。使用模板建立网站

FrontPage2003提供了多种网页模板和网站模板，用户可以很方便地建立自己的网站。

自己设计网站

可以先建立一个空白网站或只有一个网页的网站，然后在网站中添加其他网页的方法自己设计。18使用模板模板中预定义了网站的大致内容和布局，并使用某一种主题创建风格一致的网页。主题包含了采用某种配色方案的统一设计元素，包括字体、图形、背景、导航栏、水平线及其他网页元素。19自己设计网页如果从一个空白的网页开始设计，需要进行以下一项或多项操作：使用框架、表格布局或绝对定位工具来精确定位网页上的文本和图形。添加文本、图形、网页横幅、表格、表单、超链接等网页元素。添加Flash内容、视频、声音或GIF动画等动态元素。添加可以变化的内容或功能，如字幕、计数器、时间戳、网页过渡、交互式按钮以及使用动态HTML（DHTML）的表现方式。应用样式或使用样式表来设置文本格式。使用颜色或图像来设置网页背景。20向网站中添加网页21FrontPage2003的视图设计、拆分、代码和浏览等网页视图。文件夹、远程网站、报表、导航、超链接和任务等网站视图。22网页视图网页编辑的视图，负责网站内个别网页的编辑，它提供了4种显示方式。网页设计视图拆分视图代码视图预览视图23网站视图以不同的视角来设计和观察网站并方便进行管理。文件夹视图导航视图超链接视图报表视图249.2.2编辑网页插入网页元素网页元素包括文本、图形、声音、视频、动画，常用的网页元素还有水平线、书签、日期、艺术字、自选图形等等。设置网页属性包括网页保存位置、标题、背景音乐/颜色/图案、默认显示格式、语言、边距等等。建立超链接超链接可以是文本，也可以是图像或图像的一部分。25设置网页属性使用背景音乐背景颜色或图形26常用的网页元素

换行符用于将网页中的一段文本断开并且是分开的两个部分保持在同一个段落中。换行符<br>符号和注释特殊符号和注释。注释是网页制作者在网页中的附加文字说明，只在Frontpage中编辑时作者和合作者才看到。

水平线用来把网页分成几个部分.

水平线<hr>日期和时间在网页中插入上次编辑此页的日期，也可以插入上次自动更新此页的日期。这些日期和时间是动态变化的。插入书签书签用于为文档中的某个位置或所选文本命名，以便快速定位和用于超链接的锚点。27建立超链接

超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（URL）联系在一起。<AHREF=“网页地址/网页文件名.html”>我的童年时代</A><AHREF=“网页地址/网页文件名.html”><IMGSRC=“图像文件存放位置/图像文件名.扩展名”

></A>28超链接到不同目标插入书签<aname=‘targetname’></a>链接到同一文档中的某个位置<ahref=#targetname>链接文本</a>链接到同一主机的另一文档<ahref=\directoryname\filename.htm>链接文本</a>链接到网络中的另一个主机<ahref=URL>链接文本</a>链接到一个电子邮件地址<ahref=mailto:E-mail地址>链接文本</a>链接到一个普通的文档如：<ahref=filename.doc>会议通知<a>299.2.3编排网页格式设置字符格式设置段落格式创建列表设置边框和阴影级联样式单网页的特殊效果主题的使用30

在FrontPage中，可以像使用word的方式来设置文本格式，如更改字体、大小、样式、颜色、段落间距和文本的垂直位置，以及添加诸如下划线的效果。

段落的格式化方法与word类似。设置文本格式

段落的格式化文本及段落的格式化项目符号和编号是组织数据的工具，它可以使数据层次分明、重点突出。

使用项目符号和编号31级联样式表CSSFrontpage提供样式功能，用于对网页进行排版。为了将样式应用到站点的其他网页中，使网站的风格统一，需要创建级联样式单，定义应用到网页或网页元素的样式。样式单可以设定：改变文本行间距，字间距和字符间距设置元素的左右上下边距设置元素的缩进改变元素中文本的字体大小、格式和其他属性设置元素边框，并指定边框的大小和各种属性设置元素的背景颜色和背景图案32在HTML文档中应用样式表的方法链接到样式单文件

<linkhref=“mysheet.css”rel=“stylesheet”type=“text/css”>嵌入样式单<head><style>风格单的定义内容</style></head>内联样式单<h1style=“color:red”>Thisistheredtext</h1>

用<div>标记符定义一个HTML文档块的样式单

<divstyle=“color:green”><h2>cssexample</h2><p>Thisisaparagragh.Itwilllookgreeninthebrowser</p>

</div>33创建样式表基本格式

h1{color:red;font-size:12pt;text-line:center}标记符的组合定义

H2,P,LI{color:blue}在样式表中加注释

H1{color:blue;font-size:18}/*定义标题1字符的大小

body{margin-left:1cm}/*定义页面左边界*/

h2{font-size:15}/*定义标题2的字符大小*/349.2.4使用图像

GIFJPEGPNG（图形交换格式）（联合图像专家组）（可移植网络图形）可用颜色数1677721616777216 16777216每幅图像的颜色256 16777216 16777216压缩无损 有损 无损透明单色 否 Alpha通道半透明否 否 Alpha通道动画是 否 否FrontPage允许用户在网页中插入多种不同类型的图片对象，显示效果可以有动态和静态两种。常用图片文件格式如下表所列。考虑到网页下载速度问题，一般静态图片使用jpg格式，动态图片使用gif格式。35图片的插入

HTML并不能包含图像，它只是包含图像文件的名称和相应的格式代码。<IMGSRC=“图像文件存放位置/图像文件名.扩展名”ALT=“替代文字”>图片的插入直接拖拽来改变图片的大小使用图片属性对话框来设置图片的替代文字、图片边框使用图片工具栏编辑图片36图片文件的来源当前站点中的图片来自磁盘上文件的图片插入其他网页中的图片插入扫描图片插入剪贴画插入视频37图片的基本操作改变图片大小将图片转换成GIF、JPEG或PNG格式指定图片的低分辨率版本指定代替图片的显示文字设置图片的边框属性编辑图片在图片上添加文本图片的定位保存图片对象38图片的特殊效果创建图片的缩略图图片的翻转和旋转图片的亮度和对比度剪裁图片设置图片的透明色图片的颜色冲蚀图片的黑白模式添加凸凹边框效果重新取样图片39图像映射图像映射就是包含超链接的图像。通过单击图像或图片的某个部分，链接到相应内容。创建图像映射的最常用方法就是在图片上放入热点。热点是一个不可见的区域，单击后可以将站点访问者带到用户定义的URL中。设置图片的默认超链接创建热点创建文本热点编辑热点409.2.5保持网站的一致性外观41主题主题是一组可应用在网页上的设计元素和颜色方案，其中包括字体、图形、背景、导航栏、水平线和其他网页元素。类似于powerpoint中的模板。在站点或网页中应用某个主题后，可以影响到网页外观的多个方面：颜色：主题使用颜色方案设置正文、标题、超链接、网页横幅文本、导航览标签、表格边框以及网页背景的颜色。图形:

主题使用图形作为网页元素，用户可以使用普通或动态图形集。样式:

主题使用本身指定的样式作为文本或标题的样式。42应用主题单击右侧选择主题窗格中的主题就可以应用选中的主题。43修改主题修改主题的样式44共享边框共享边框是站点上一个或多个网页共享的区域。共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类似于网页页脚）、左边或右边的区域。在共享边框中只需修改一次内容，就可以将相同的内容放入多个网页中。45应用共享边框设置共享边框后，用户可以添加如下内容：网页横幅公司徽标导航栏版权注意事项站点上一次修改或更新的日期和时间46链接栏链接栏是一组文本或按钮超链接，通过它们浏览者可以到达站点中的某一个网页。放到共享边框中以后，每个页面都会有同样的链接信息。链接栏47使用链接栏典型的导航栏具有指向站点主页和主要上层网页的按钮。当我们在网页中添加一个导航栏时，FrontPage将根据导航视图下设置的导航结构自动生成导航超链接。导航栏属性489.2.6网页的布局表格在网页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法。表格和框架是网页布局的常用工具。文字、图形、视频框架也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件。49两种常用布局方法表格框架50布局表格布局表格和单元格共同表示用户可添加到网页的水平与垂直区域，这些区域可以为内容提供复杂的可视结构。我们可以选择预定义的布局表格模板，也可以创建自己的布局表格。51设置布局表格和单元格的属性调整表格的大小对选中单元格的高度、宽度、背景颜色、边框、边距等项进行相应的设置。添加圆角图片、设置阴影来修饰网页。52框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架（子窗口）的内容。一个框架的超链接可以更改显示在另一个框架中的网页。框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。53框架的创建和保存新建框架网页框架组成在框架中加入网页

边框、滚动条、网页1）建立新网页2）指定已经存在的网页保存框架页【文件】|【另存为】【文件】|新建|【网页】，选择“框架网页”标签54框架属性设置框架/框架属性网页名称初始网页框架大小边距滚动条框架的可调整性间距30%70%80%20%相对大小：1和4相对大小：3和755框架之间的超链接在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。命名:<framesrc=“url”name=“main”>链接:<ahref=“main2.htmtarget=“main”>点击这里跳到main框架</a>56嵌入式框架在网页的内部也可以插入框架来显示单独的网页。57使用层来定位元素层是一个可以应用CSS来进行绝对定位的工具。利用层的绝对定位功能，也可以实现网页的布局。589.2.7网页的动态效果网页元素的动态效果可以将动态HTML(DHTML)的动画效果应用到网页上的任何相关组件;例如文本、段落、图片、按钮和字幕等等，并将这些效果链接到单击鼠标、鼠标悬停和加载网页等事件上。网页过渡的动态效果

网页过渡指进入网页或离开网页等触发事件发生时，网页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。触发事件包括进入网页、离开网页、进入网站、离开网站等。59网页元素的动态效果利用“DHTML”效果工具栏可以在网页的任何组件元素中添加动态效果，并将这些动态效果链接到鼠标的单击、双击、悬停或加载网页等事件上。DHTML动态效果工具栏60网页的过渡效果网页过渡指进入网页或离开网页等触发事件发生时，网页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。这就像幻灯片切换过程的过渡效果一样。619.2.8创建交互式网页创建网页不仅是为了在web服务器上向站点访问者提供各种服务、信息以及软件下载等，有时也需要收集站点访问者对站点的反馈意见。网页中插入表单来收集访问者信息，利用表单我们还可以创建讨论组。创建表单插入表单域讨论组的应用插入网页的高级内容62创建表单创建表单页面单行文本框text密码框password多行文本框textarea下拉列表框select复选框checkbox单选按钮radio按钮button表单的提交submit……63表单的处理一个表单必须有一个提交按钮。单击提交按钮后，表单的结果l可以送到一个文件、电子邮件地址、数据库、表单处理程序以及自定义（ISAPI、CGI、ASP等）

人人文库> 全部分类> 图纸下载 > 课程设计

温馨提示

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

最新文档

评论

0/150

提交评论