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

下载本文档

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

文档简介

计算机实践管理与经济学院网页设计与制作1图形图像处理2Office办公软件3课程组成星期（第1—2周）一二三四五一二三四五日期（8月22—9月4日）222324252629303112上午1节（8:00-8:50）--上课上课上课上课上课上课上课

2节（9:00-9:50）

3节（10:10-11:00）上课上课上机上机上机上机上机

4节（11:10-12:00）

下午5节（14:00-14:50）上机上机

上机上机

6节（15:00-15:50）

7节（16:10-17:00）

8节（17:10-18:00）

课程日历

网页设计与制作

图形图像处理

Office办公软件网页设计与制作吴彬计算机实践——网页设计与制作网页设计制作根底网页设计工具Dreamweaver网页动画制作工具Flash一、网页设计制作根底网页：WebPage构成网站的根本元素，是网站中的一“页〞，也就是在浏览器中看到的一幅画面；网页是什么？一、网页设计制作根底每个网页通常对应着一个文件，文件名常以htm或html后缀结尾，俗称HTML文件。不同的文件名后缀，代表不同类型的网页，除htm或html后缀外，其它如：cgi、asp、jsp、php等；网页是什么？一、网页设计制作根底构成网页的根本元素文字：承载信息和交流的工具图片和动画：修饰网页、提供信息声音和视频：多媒体信息超链接：实现网页间快速跳转表格：列表化数据、精确定位网页元素的位置表单：输入数据，提交效劳器处理导航栏：引导浏览者访问其它：ActiveX控件、Java小程序、滚动字幕等互联网一、网页设计制作根底网页工作原理输入网址〔URL〕HTTP请求HTTP响应客户端服务器网页文件网页HTTP协议一、网页设计制作根底网页文件〔HTML〕存放在与互联网相连的某台计算机〔效劳器〕中，经由网址〔URL〕来识别与存取，当用户在浏览器中输入网址后，浏览器通过HTTP协议从效劳器上获取网页文件，并经过分析、解释后显示在计算机屏幕上。网页工作原理一、网页设计制作根底网页关键性技术标准统一资源定位器〔URL〕超文本标记语言〔HTML〕超文本传送协议〔HTTP〕一、网页设计制作根底统一资源定位器〔URL〕URL：UniversalResourceLocator，用于完整地描述Internet上网页及其它资源地址的一种标识方法，俗称为“网址〞。URL的根本结构：通信协议://域名或IP[:端口号]/路径/文件名？查询参数＃信息片段例：://abc/read.asp?id=999#top网页关键性技术标准一、网页设计制作根底超文本标记语言〔HTML〕HTML：HypertextMarkupLanguage；HTML是一种标准，一种标准，它通过标记符号标记网页中的各个局部〔如：文字、图片、视频、动画等〕，并告诉浏览器如何显示；之所以称为“超文本〞，是因为文本中包含了被称为“超级链接〞的热点，通过点击超链接可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。网页关键性技术标准一、网页设计制作根底超文本传送协议〔HTTP〕HTTP：HypertextTransferProtocol是客户端与效劳器端之间进行请求和应答的一种标准，它采用请求/响应模型；客户端向效劳器发送一个请求，称之为消息，消息的内容包括请求的方法、URL、协议版本等。效劳器根据请求作出响应，响应的内容包括协议版本、成功或错误代码、效劳器信息、实体信息等。网页关键性技术标准一、网页设计制作根底超文本传送协议〔HTTP〕GET://download.microtool.de:80/somedata.exe

Host:download.microtool.de

Accept:*/*

Pragma:no-cache

Cache-Control:no-cache

Referer:://download.microtool.de/

User-Agent:Mozilla/4.04[en](Win95;I;Nav)

Range:bytes=554554-典型的请求消息网页关键性技术标准请求的资源地址效劳器域名浏览器版本信息一、网页设计制作根底超文本传送协议〔HTTP〕HTTP/1.0

200OKDate:Mon,31Dec200104:25:57GMTServer:Apache/1.3.14(Unix)Content-type:text/htmlLast-modified:Tue,17Apr200106:46:28GMTEtag:"a030f020ac7c01:1e9f"Content-length:39725426Content-range:bytes554554-40279979/40279980典型的响应消息网页关键性技术标准协议及状态代码效劳器信息数据总长度〔字节数〕静态网页是实实在在保存在效劳器上的文件，每个网页都对应着一个独立的文件，都由一个固定的网址〔URL〕进行访问；动态网页实际上是能在效劳器上运行的程序，用户每次看到的网页并不对应效劳器上存放的某个文件。动态网页会根据用户每次请求提交的参数，相应地生成静态网页；一、网页设计制作根底静态网页vs动态网页编号1的文章文章2文章1一、网页设计制作根底静态网页vs动态网页文章2文章3文章1静态网站服务器我要看文章1我要看文章2编号作者内容…1xxxxxx…2xxxxxx……………数据库动态网站服务器读文章看编号1的文章编号1的文章表〔Table〕一、网页设计制作根底网站：Website，众多网页的集合提供某种网络效劳〔如：资讯、搜索、BBS等〕网站网站?a.htmb.htmc.htme.htmd.htm...…一、网页设计制作根底域名〔网址〕网络接入环境效劳器硬件平台网站效劳器操作系统信息发布效劳〔IIS、Apache〕网页

〔按照一定规那么组合在一起，具有某种逻辑结构的集合〕一、网页设计制作根底目标规划系统分析网站设计网站实现网站发布网站调试维护与管理建设网站的一般流程网站生命周期一、网页设计制作根底超文本标记语言HTML由万维网联盟〔W3C〕制定发布，最新版本4.01HTML文件：用HTML语言编写的代码文件，纯文本文件，后缀名：htm或html〔1〕表达信息的文字〔2〕称为“标记〞的特殊字符一、网页设计制作根底超文本标记语言HTML这是一行有下划线的文字读入HTML文档浏览器解释显示HTML标记本身〔<u></u>〕不显示在浏览器中<u></u>一、网页设计制作根底超文本标记语言HTML<html><head><title>我的第一个网页</title></head><body>

这是我的第一个网页！

</body></html>创立简单的HTML文件翻开记事本，输入右侧的代码，保存时输入含后缀htm的完整的文件名，如hello.htm，保存退出；在“我的电脑〞中找到hello.htm并双击。一、网页设计制作根底超文本标记语言HTML<html><head><title>我的第一个网页</title></head><body>

这是我的第一个网页！

</body></html>文档标记文档头文档标题文档主体根本文档结构一、网页设计制作根底超文本标记语言HTML1.标记HTML文档由标记和被标记的内容组成，标记用于定义信息的类型，也称作标签〔Tag〕，格式为：<标记名>被标记的内容</标记名>例如：<title>我的第一个网页</title>——语法规那么一、网页设计制作根底超文本标记语言HTML

双标记：成对出现的，例如：

<title>我的第一个网页</title>头标记尾标记

单标记：只有头标记的标记，

例如：<br>，表示换行。1.标记两种结构的标记——语法规那么一、网页设计制作根底超文本标记语言HTML1.标记

HTML是一种嵌套语言，一个标记的外面可以再嵌套另外一个标记。例如：

<head>

<title>我的第一个网页</title>

</head>——语法规那么一、网页设计制作根底超文本标记语言HTML2.属性标记规定了信息是什么，但怎样控制这些信息的显示，就需要使用属性。格式为：align属性的值为left，表示文字靠左对齐。例如：<h1align="left">欢送！</h1>——语法规那么<标记名属性名="属性值">被标记的内容</标记名>一、网页设计制作根底超文本标记语言HTML2.属性一个标记可以有多个属性，无先后顺序。例如：<hrsize="3"align="left"width="200">——语法规那么含义：粗细为3个像素，宽度为200像素，左对齐显示的水平线。一、网页设计制作根底超文本标记语言HTML——几个重要标记1.文档头标记<head>...</head>HTML文档头描述网页的根本信息，主要被浏览器所用，不会显示在网页里。另外，搜索引擎会查找网页中的文档头信息，提取文档标题等作为关键词进行收录。嵌套在<head>里常见的标记有：<title>、<link>、<style>、<meta>一、网页设计制作根底超文本标记语言HTML——几个重要标记1.文档头标记<head>...</head><title>：文档标题，显示在浏览器标题栏中<link>：链接资源文件，如样式表<style>：定义CSS样式<meta>：网页元数据，如：编码字符集<meta-equiv="content-type"content="text/html;charset=gb2312">一、网页设计制作根底超文本标记语言HTML——几个重要标记2.文档主体标记<body>...</body>文档主体中包含了所有要在浏览器中显示的文字、表格、图片等内容元素，网页中大局部标记都嵌套在<body>...</body>内。<body>标记的属性可对网页的整体显示效果进行控制。一、网页设计制作根底超文本标记语言HTML——几个重要标记2.文档主体标记<body>...</body>bgcolor：网页背景色background：网页背景图片text：文字颜色link：超级链接的颜色alink：当链接被点中时文字颜色vlink：访问过的链接的文字颜色leftmargin：网页的左边距，单位：像素topmargin：网页上边距，单位：像素属性一、网页设计制作根底超文本标记语言HTML——几个重要标记3.字体标记

<font>...</font>用于设定文字的大小，颜色和字体格式。face：字体格式，如：宋体，黑体color：文字颜色，如：red，#FF0000size：文字大小，1~7号属性例：红色黑体5号字<fontface="黑体"color="red"size="5">一、网页设计制作根底超文本标记语言HTML——几个重要标记3.字体标记

<font>...</font>在HTML里，颜色有两种表示方式：用颜色名称表示，比方blue表示蓝色，有16种可以表示颜色的名称(aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow)。用6位16进制的数值表示，从左至右每两位依次代表红、绿、蓝三原色值，颜色值范围：#000000—#FFFFFF

例如：#FF0000表示红色red一、网页设计制作根底超文本标记语言HTML——几个重要标记4.标题文字标记<hn>〔n=1、2、3……6〕用于将文字设置为标题格式。标题共分六级，n值越大级别越小,显示的字号也就越小。例：

<h1>1这是第1级标题</h1><h2>1.1这是第2级标题</h2><h3>1.1.1这是第3级标题</h3>……一、网页设计制作根底超文本标记语言HTML——几个重要标记4.标题文字标记<hn>〔n=1、2、3……6〕例：

<h1align="center">居中大标题</h1>属性align：left，左对齐，默认值

center，居中

right，右对齐一、网页设计制作根底超文本标记语言HTML——几个重要标记5.段落标记<p>...</p>用于将页面内容划分为一个一个的段落，段落间自动产生一个空行。属性align：left，左对齐，默认值

center，居中

right，右对齐一、网页设计制作根底超文本标记语言HTML——几个重要标记5.段落标记<p>...</p><palign="left"><palign=“center”><palign="right">一、网页设计制作根底超文本标记语言HTML——几个重要标记6.换行标记<br>〔单标记〕用于在一个段落中进行换行，行与行之间没有空行。<palign="left">

这是第一段，第一行<br>

这是第一段，第二行<br>

这是第一段，第三行</p><br><br>一、网页设计制作根底超文本标记语言HTML——几个重要标记7.锚点标记<a>...</a>href：需要跳转过去的新地址target：新地址要在哪个窗口翻开title：鼠标停留时显示的注释属性用途一：设置超级链接一、网页设计制作根底超文本标记语言HTML——几个重要标记7.锚点标记<a>...</a><ahref="://">北京理工大学</a><ahref="job/index.htm"target="_blank">校园招聘</a><ahref="../index.htm"title="返回网站首页">首页</a>在新窗口中打开鼠标停留时显示该信息绝对路径相对路径一、网页设计制作根底超文本标记语言HTML——几个重要标记7.锚点标记<a>...</a>要点：用name属性定义锚点名称。在创立超链接时使用“#锚点名称〞作为链接地址。用途二：设置命名锚点<aname="top">……</a>……<ahref="#top">返回顶部</a>一、网页设计制作根底超文本标记语言HTML——几个重要标记8.图片标记

<img>src：图片文件的路径alt：替代的文字说明width：图片宽度，单位：像素height：图片的高度，单位：像素border：边框粗细，单位：像素hspace：水平方向上的空白，单位：像素vspace：垂直方向上的空白，单位：像素align：设置图片的垂直、水平对齐方式属性一、网页设计制作根底超文本标记语言HTML——几个重要标记8.图片标记

<img>例2：用图片做超链接

<ahref="job/index.htm"><imgsrc="job.jpg"></a>例1：在网页中插入一张图片

<imgsrc="images/logo.gif">一、网页设计制作根底超文本标记语言HTML——几个重要标记9.表格标记<table>...</table>单元格行列表头一、网页设计制作根底超文本标记语言HTML——几个重要标记9.表格标记<table>...</table><table><tr><td>…</td></tr></table>创建表格画出一行画出一列<table>标记内通常嵌套有<tr>、<td>标记。单元格里要显示的内容一、网页设计制作根底超文本标记语言HTML——几个重要标记9.表格标记<table>...</table><table><tr><td>第1行第1列</td><td>第1行第2列</td></tr><tr><td>第2行第1列</td><td>第2行第2列</td></tr></table>一、网页设计制作根底超文本标记语言H

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

最新文档

评论

0/150

提交评论