网页设计与制作_第1页
网页设计与制作_第2页
网页设计与制作_第3页
网页设计与制作_第4页
网页设计与制作_第5页
已阅读5页，还剩75页未读， 继续免费阅读

下载本文档

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

文档简介

单位：计算机教学实验中心办公室：新主楼F114

82317623

主讲课程：大学计算机基础全校计算机基础操作计算机学院计算机网络实验及设计计算机学院计算机网络通讯实验计算机学院教师--焦福菊1网页设计与制作2网页设计与制作WWW基本知识网站的建设与规划使用FrontPage2003制作网站网站的发布和管理本章重点WWW基本知识网站建设的基本过程常用的网页制作工具网页编辑级联样式表CSS网页布局的方法应用表单实现网页交互的方法网站的发布与管理作业要求作业参考3主题1WWW基本知识WideWeb)WWW是Internet上多媒体信息查询的工具。WEB由互相链接的网页构成，这些网页由普通文本、超文本Hypertext，以及图表、图片等等构成。URL（UniformResourceLocator）

URL（统一资源定位符）是指向网络服务器中某个资源的地址，用字符串来表示。其中包括协议、主机域名（或IP地址）、端口号、文件名等等。dxjsj//4主题1WWW基本知识超级链接（Hyperlink）超级链接是包含在网页中指向其他网页的指针。超文本包含超链接的文本称为超文本。图像或图像的某部分也可以包含超链接。超媒体当网页中包含声音、动画、视频等其它媒体时，网页被称为是超媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。5主题1WWW基本知识服务器WWW服务器用来放置网页，始终循环等待客户端的服务请求，并把网页作为回答发送给客户端。浏览器用户通过浏览器来观看网页。浏览器发出服务请求，得到网页后，解释其中所含的网页内容和格式命令，并正确的显示出来。网页与网站网页由超文本标记语言（HTML，HyperTextMarkupLanguage）写成，网页之间通过超链接相互组织成为反映某一个或某几个主题的网站。6网页主页网页网页Web工作模式httprequesthttpresponsehttprequesthttpresponseHTTP协议HTTP协议browserWebserverbrowser7Web工作模式第一步：WEB浏览器向一个特定的服务器发送WEB页面请求。第二步：在每个WEB服务器上有一个服务进程在TCP的80端口上监听由浏览器发来的建立连接请求；在连接建立之后，寻找所请求的WEB页面，并将所请求的网页传送给浏览器。浏览器和服务器之间进行信息传输使用超文本传输协议HTTP协议。第三步：WEB浏览器接收到所请求的网页，并按照预定的格式显示出来。8主题2HTML语言简介HTML是一种简单的标记语言，它主要用于描述Web文档的结构。HTML代码描述超文本文档的格式。格式由浏览器解释和执行。标记的一般格式为：<tag>对象</tag><tag属性=参数>对象</tag><tag>例如：<h1>我的主页</h1><ahref=jianjie.htm>简介</a>9主题2HTML语言简介例：<html><head><title>我的第一个主页</title></head><body><h1>这是一个简单的例子</h1><imgsrc=”../abc.gif”alt=”text”><ahref=http://>北航<a></body></html>文档头部文档体超文本文档的结构文档头部定义网页的属性；文档体定义显示的文档内容和格式10主题3网站建设的基本过程申请域名有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的，需要向网络信息中心申请。建立服务器主机服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资金、网络维护能力等不同可以选择不同的服务方式。自己建立服务器主机大的企业、学校、政府部门等，有专门的技术人员维护。主机托管模式将服务器主机交给专门的网络运营部门管理。虚拟主机模式租用网络运营商服务器主机的部分存储空间。11主题3网站建设的基本过程设计网站设计网站首先要确定网站的主题，围绕主题就可以确定网站的内容和网页的风格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网页。

制作网页

网页是用HTML语言写出来的纯文本文档。网站的维护与更新制作好网页以后需要将网页及素材等文件复制到服务器中，并及时更新网页的内容。12主题4网页设计确定网站主题主题确定网站主要传播哪些内容和提供哪些服务。确定网页风格(选择视觉外观)网页风格决定了网页的表现形式，决定于网站的主题和内容，以达到内容和形式的统一。如：活泼欢快、严肃庄重、朴素简洁、典雅大方、充满神秘感等等风格。

13主题4网页设计设计有效的页面布局合理的网页布局可以使浏览者更加方便地浏览网页。要适合人们的阅读习惯，将重要的东西放在浏览者第一眼就能看到的地方。组织素材确定了主题和风格后就需要组织文字、图片、声音等网页素材来表现主题。制作网页将各种网页素材组织到网页中。14网页设计遵循的一般原则主题鲜明一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂烩式的网站更加吸引人。形式与內容统一网页的排版、布局、色彩、图像的运用要与网页中欲向网友传达的有效信息相统一。

风格要统一风格的选用要尽量突出自己的个性，让浏览者有一个独特的印象。

15网页设计遵循的一般原则栏目设计要合理倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信息。

导航清晰易懂一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，便于转到其他的页面。时常更新內容经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。16网页设计遵循的一般原则若要网站能够吸引人：第一内容要不断更新第二多媒体素材的合理使用17利用制作工具编写HTML源代码使用记事本等字处理软件直接编写代码，保存为.htm或.html的纯文本文件使用所见即所得的可视化工具软件。如：frontpage、dreamwaver主题5网页制作网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成HTML文档。18常用网页制作工具网页编写软件Frontpage、Dreamwaver……图形/图像处理软件Photoshop、Fireworks……网页动画制作软件

Flash制作静态网页不是很难！19想知道浏览你网页的网友有什么意见或建议？想知道对你网站提供的内容感兴趣的是什么人？想知道客户有哪些服务需求？想知道客户对产品有什么意见？……动态交互网页编程

要使网站具有交互功能，就需要在网页中加入实现动态交互的程序代码。这就是基于WEB的应用程序开发！示例1示例2示例320动态交互网页编程常用网页脚本语言Javascript、VBScriptJavaapplet小程序动态网页开发工具Asp、Jsp、Php其它CGI程序21主题6FrontPage2003网站的建立与管理编辑网页网页的格式与CSS级联样式表使用图像网页的布局网页的动态效果应用表单实现交互网页保持网站一致性外观的方法22FrontPage2003界面设计网页自动生成的HTML语句预览网页效果基本内容区文本图像表格背景声音超级链接文件夹列表23建立网站的方法使用模板建立网站FrontPage2003提供了多种网页模板和网站模板，用户可以很方便地建立自己的网站。自己设计网站可以先建立一个空白网站或只有一个网页的网站，然后在网站中添加其他网页的方法自己设计。24使用模板模板中预定义了网站的大致内容和布局，并使用某一种主题创建风格一致的网页。主题包含了采用某种配色方案的统一设计元素，包括字体、图形、背景、导航栏、水平线及其他网页元素。25自己设计网站如果从一个空白的网页开始设计，需要进行以下一项或多项操作：使用框架、表格布局或绝对定位工具来精确定位网页上的文本和图像。使用颜色或图像来设置网页背景。应用样式或使用样式表来设置文本格式。添加文本、图像、网页横幅、表格、表单、超链接等网页元素。添加Flash内容、视频、声音或GIF动画等动态元素。如果需要，加入程序代码使网页具有交互功能。26向网站中添加网页27网站视图以不同的视角来设计和观察网站并方便进行管理。文件夹视图导航视图超链接视图报表视图28网页视图网页编辑的视图，负责网站内个别网页的编辑，它提供了4种显示方式。网页设计视图拆分视图代码视图预览视图29主题7编辑网页设置网页属性包括网页保存位置、标题、背景音乐/颜色/图案、默认显示格式、语言、边距等等。插入网页元素网页元素包括文本、图形、声音、视频、动画，常用的网页元素还有水平线、书签、日期、艺术字、自选图形等等。建立超链接超链接可以是文本，也可以是图像或图像的一部分。30设置网页属性使用背景音乐背景颜色或图形通过网页属性的常规标签，可以制定网页的标题。也可以给网页加上背景音乐，并指定音乐播放次数。通过网页属性的背景标签，可以设置网页的背景颜色或将图像作为网页的背景。31常用的网页元素

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

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

水平线<hr>日期和时间在网页中插入上次编辑此页的日期，也可以插入上次自动更新此页的日期。这些日期和时间是动态变化的。插入书签书签用于为文档中的某个位置或所选文本命名，以便快速定位和用于超链接的锚点。32建立超链接超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（URL）联系在一起。<AHREF=“网页地址/网页文件名.html”>超文本</A><AHREF=“网页地址/网页文件名.html”>

<IMGSRC=“图像文件存放位置/图像文件名.扩展名”></A>例：<Ahref=“tongnian.htm”>我的童年<A><Ahref=><imgsrc=“163.jpg”><A><Ahref=“mailto:”>联系人<A>33超链接到不同目标插入书签

<aname=‘targetname’></a>链接到同一文档中的某个位置

<ahref=#targetname>链接文本</a>链接到同一主机的另一文档

<ahref=\directoryname\>链接文本</a>链接到Internet资源

<ahref=URL>链接文本</a>链接到一个电子邮件地址

<ahref=mailto:E-mail地址>链接文本</a>链接到一个普通的文档<ahref=>会议通知<a>34主题8编排网页格式设置字符格式设置段落格式创建列表设置边框和阴影级联样式表

主题的使用35级联样式表CSS级联样式表使网页的内容与外观分别定义，方便网站外观的统一和更新。样式表可以设定：改变文本行间距，字间距和字符间距设置元素的左右上下边距设置元素的缩进改变元素中文本的字体大小、格式和其他属性设置元素边框，并指定边框的大小和各种属性设置元素的背景颜色和背景图案36应用样式表的方法嵌入样式表<head><style>样式表的定义内容</style></head>内联样式表

例1：单个元素应用样式

<h1style=“color:red”>Thisistheredtext</h1>

例2：用<div>标记符定义一个HTML文档块，对多个元素应用样式表<divstyle=“color:green”><h2>cssexample</h2><p>Thisisaparagragh.Itwilllookgreeninthebrowser</p></div>37应用样式表的方法外联样式表<head

><linkhref=“mysheet.css”rel=“stylesheet”type=“text/css”></head>38创建样式表基本格式

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的字符大小*/39创建样式表40主题8使用图像

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

HTML并不能包含图像，它只是包含图像文件的名称和相应的格式代码。<IMGSRC=“图像文件存放位置/图像文件名.扩展名”ALT=“替代文字”>例：<imgsrc=”buaa.gif”alt=”北航标志”>图片的插入直接拖拽来改变图片的大小使用图片属性对话框来设置图片的替代文字、图片边框使用图片工具栏编辑图片42图片文件的来源当前站点中的图片来自磁盘上文件的图片插入其他网页中的图片插入扫描图片插入剪贴画插入视频43图片的基本操作改变图片大小将图片转换成GIF、JPEG或PNG格式指定图片的低分辨率版本指定代替图片的显示文字设置图片的边框属性编辑图片在图片上添加文本图片的定位保存图片对象44图片的特殊效果创建图片的缩略图图片的翻转和旋转图片的亮度和对比度剪裁图片设置图片的透明色图片的颜色冲蚀图片的黑白模式添加凸凹边框效果重新取样图片45图像映射图像映射就是包含超链接的图像。通过单击图像或图片的某个部分，链接到相应内容。创建图像映射的最常用方法就是在图片上放入热点。热点是一个不可见的区域，单击后可以将站点访问者带到用户定义的URL中。设置图片的默认超链接创建热点创建文本热点编辑热点创建热点46主题9网页的布局表格在网页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法。表格和框架是网页布局的常用工具。文字、图形、视频框架也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件。47两种常用布局方法表格框架48布局表格布局表格和单元格共同表示用户可添加到网页的水平与垂直区域，这些区域可以为内容提供复杂的可视结构。我们可以选择预定义的布局表格模板，也可以创建自己的布局表格。49布局表格和单元格的属性调整表格的大小对选中单元格的高度、宽度、背景颜色、边框、边距等项进行相应的设置。添加圆角图片、设置阴影来修饰网页。50框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架（子窗口）的内容。一个框架的超链接可以更改显示在另一个框架中的网页。框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。51框架的创建和保存新建框架网页框架组成在框架中加入网页

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

57网页元素的动态效果利用“DHTML”效果工具栏可以在网页的任何组件元素中添加动态效果，并将这些动态效果链接到鼠标的单击、双击、悬停或加载网页等事件上。当鼠标指向图片时，会更换另一张图片。DHTML动态效果工具栏58网页的过渡效果网页过渡指进入网页或离开网页等触发事件发生时，网页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。这就像幻灯片切换过程的过渡效果一样。59主题11设计交互式页面创建网页不仅是为了在web服务器上向站点访问者提供各种服务、信息以及软件下载等，有时也需要收集站点访问者对站点的反馈意见。网页中通过插入表单来收集访问者信息。每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域。表单中必须有一个元素作为“提交”按钮。60创建表单创建表单页面单行文本框text密码框password多行文本框textarea下拉列表框select复选框checkbox单选按钮radio按钮button表单的提交submit……61创建表单要掌握收集什么样的信息使用哪个表单域更合适。62表单的处理一个表单必须有一个提交按钮。单击提交按钮后，表单的结果l可以送到一个文件、电子邮件地址、数据库、表单处理程序以及自定义（ISAPI、CGI、ASP等）表单处理程序。63主题12网站的发布和管理发布一个站点就是要将站点上的网页及素材文件复制到一个公共的Web服务器。网站发布的步骤申请网页空间上传网页及素材文件更新网站宣传网站

64

网站发布之前站点分析指出未链接的文件找出慢速网页找出没有连接到任何网页的超链接检查断开的超链接检查网页元素错误检查未用主题的文件以及完成的任务网页测试测试超链接是否可用图片是否正常显示其他媒体素材是否正确播放65

申请主页空间站点制作好了，就需要把它放到互联网上，让全世界的网络浏览者能够看到它。对于某个企业来说，拥有自己的域名、自己的主页是非常必要的。商标和公司名称应成为域名的首选。确定域名之后就需要选择网页服务方式了。申请主页空间66

发布站点发布站点就是要把网页文件和所用到的素材文件拷贝到网络中的web服务器上。WEB管理方式登录服务商网站，根据提示选择本地网页上传到服务器主机。FTP上传方式服务商提供FTP功能，使用浏览器或专用FTP工具（如：Cuteftp等）上传网页。67

宣传主页与相关行业网站建立友情连接在报纸、电视和网络媒体上做广告在论坛上发贴子公告，给你的网友发邮件或在qq里发消息。注册到著名的搜索引擎，让用户找到你的网站在网站排行榜上登记

网站建立起来了，怎么才能让用户在茫茫的互联网络中访问到你的主页呢

人人文库> 全部分类> 行业资料 > 医学制药

温馨提示

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

最新文档

评论

0/150

提交评论