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

下载本文档

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

文档简介

计算机信息中心授课教师：邵熹雯jsjsxw@第一章网页设计与制作基础1.1Internet基础1.2网页图像基础1.3网页制作软件的主要功能和特点1.4本章小结本章内容1.1Internet基础什么是Internet?Internet概念的由来计算机网络，简单的说，就是用通信线路把若干计算机连起来，再配以适当的软件和硬件，以达到计算机之间的资源共享和信息交换。Internet的中文名称是因特网或国际互联网，是一个几乎覆盖了全世界的计算机网络。Internet提供的服务万维网WWW服务：(超文本传输服务) http协议。客户端软件：IE浏览器等

http的主要作用就是请求由超级连接引用的页面FTP服务：(文件传输服务)

ftp协议。客户端软件：IE浏览器、flashfxp等Telnet服务：(远程登陆服务)

telnet协议。客户端软件：Pcanywhere等Email服务：(电子邮件服务)

pop3和smtp协议。 客户端软件：IE浏览器、outlook等WWW服务简介超文本的思想的应用从孤立封闭的单个计算机中扩展到由无数计算机汇接而成的网络海洋。（表现成网页中的超级链接。）最终形成了今天的www万维网：WordWideWeb网页能存放在全球任何计算机上。Internet上链接在一起的网页构成了庞大的信息网。图1-1网页的超文本结构客户机与服务器Internet连接着难以计数的计算机，按照功能它们大致可分为服务器和客户机两类。服务器是提供资源和服务的计算机。客户机是供用户使用资源和享受服务的计算机。图1-2客户机和服务器WWW服务中的客户机与服务器WWW服务器上的主要内容静态网页文件交互式网页文件与网页相连接的各种媒体文件支持交互式网页的数据文件客户机的工作请求网页上传数据显示结果IP地址和域名IP地址 一种地址格式。是Internet上的每一个网络和每一台主机的唯一标识。XXX.XXX.XXX.XXX0~255全球IP地址分配表根据IP地址查出主机所处位置（具体到区、县）域名 IP地址是一个32位二进制数，不便于记忆，于是提出采用域名代表IP地址。 域名采用分层次结构，入网的每台主机都可以有一个类似下面的域名：主机名.单位名.机构名.国家名提供万维网

主页服务的

服务器

新浪

公司

商业类中国

域名管理机构CNNIC是“中国互联网络信息中心”（ChinaInternetNetworkInformationCenter）

http:///中文域名280/年ICANN:国际互联网名称和地址分配组织WWW.ICANN.ORG（TheInternetCorporationforAssignedNamesandNumbers）

域名管理机构URL和超链接统一资源定位器 （UniformResourceLocator简称URL）。URL是全球WWW网服务器资源的标准寻址定位编码，它被用来确定资源的相应位置。URL结构 资源类型、存放资源的主机域名和资源文件路径及名称

http:///lx/index.htm

资源类型主机域名/IP网页文件URL是WEB资源的唯一标识！超级链接链接源:网页中各种元素对象链接目标:通过相对路径方式指定,反映成URLHTML语言网页实际上就是一个用超文本标记语言HTML（hypertextmarkuplanguage）编写的文本文件，从而把文字、表格、图像、动画、声音和视频等各种媒体有机地组合在一起。任何文字编辑器都可以编辑HTML语言，只要能将文件另存成ASCII纯文字格式即可，当然以专业的网页编辑软件为佳。学习HTML语言的目的观察网页源代码的重要性观察网页源代码的方法 IE浏览器〉编辑〉源文件HTML标记的写法任何标记皆由“<”及“>”所围住，如<P>

标记名与小于号之间不能留有空白字符。参数只可加于起始标记中,多个参数以空格分隔 如<fontsize=“+2”>Hello</font>

。标记名前加上“/”便是其终结标记，如</font>标记字母大小写皆可。HTML标记的分类围堵标记：成对出现

它以起始标记及终结标记将文字围住，令其达到预期显示效果。 <b>CreationofWebpage</b>ismyfavourite.空标记：单独出现

只有起始标记没有终结标记。 IloveCreationofWebpage.<br>It'sawonderfulplace.

其中换行标记<br>便属空标记。HTML页面文件标记<HTML>；<HEAD>；<TITLE>；<BODY>HTML文件的基本架构<HTML><HEAD><TITLE>

网页的标题

</TITLE>

</HEAD>

<BODY>

网页的内容，很多标记都作用于此

</BODY></HTML>整份文件处于标记<HTML>与</HTML>之间<HTML>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。文件分两部分，由<HEAD>至</HEAD>称为开头 <BODY>至</BODY>称本文。 开头部分用以存载重要资讯，只有本文部分会被显示。 所以大部分标记会运用于本文部分。<TITLE>所标示的是文件的标题。 会出现于浏览器顶部，所以每页有不同而明确的标题。上述标记中只有<BODY>具参数设定标记<BODY>的参数设定例子：<BODY

text="#000000”link="#0000FF"

alink="#FF0000”vlink="#0000FF“background="bg1.gif"bgcolor="#FFFFFF"

leftmargin=2topmargin=2>HTML基本元素-字体标记描述：<font>具体文字

</font>

参数描述： <font

size=#>...</font>：字体大小 <fontcolor=#>...</font>：字体颜色

rrggbb16进制数码，或者是下列预定义色彩：

Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,

Fuchsia,White,Green,Purple,Silver,Yellow,Aqua

HTML基本元素-文字布局标记描述： <p>：段(Paragraph)(可以看作是空行) <br>：换行

<div

align=left>...</div>：文字的分区显示参数描述： <p

align=#>...</p>（#=left,center,right）： 文字的对齐HTML基本元素-图片标记&参数描述： <img

src=#>#=图象的URL <imgalt=#>#=在浏览器尚未完全读入图象时，在图象位置显示的文字。注意： 图象URL的地址描述方法： 相对路径描述方法对齐

图片位于网页文件当前文件夹下<img

src=图片文件名>图片位于网页文件下一级文件夹下<img

src=文件夹名/图片文件名>图片位于网页文件上一级文件夹下<img

src=../文件夹名/图片文件名>HTML基本元素-超级链接标记&参数描述： <ahref=…

target=

…>链接文字</a>:

href=链接地址 target=

target=_blank>新窗口 target=_self>本窗口target=_parent>父窗口思考：将一个图片作为链接HTML基本元素-表格标记描述： <table>...</table>：定义表格 <tr>：定义表行 <td>：定义单元

<table><tr><td>a11</td><td>a12</td></tr><tr><td>a21</td><td>a22</td></tr></table>参数描述： border=

边框宽度

bordercolor

=

边框颜色 width=#height=#表格尺寸设置

cellspacing=10表元间隙设置

bgcolor=背景颜色HTML基本元素-表单标记描述： <form>…</form>表示其它表单标记需要在它的包围中才有效 <input>

以设定各种输入资料的方法。它是一个空标记。<form>参数描述： <form

action=…method=…>...</form> <inputtype=..

name=..

value=..

src=..

checked=..><input>参数描述： type=……..可选值为：Text,Radio,Checkbox,Submit/Reset,

Image,Hidden,Button。 name=表单对象的名称 value=表单对象默认值

src=按钮对象图片 checked=当前选中项网页图像基础-位图和矢量图位图是由分配了特定位置和颜色值的点(象素)的排列组成。位图的色彩和色调变化丰富，但占用空间较多。矢量图用一组绘图指令来描述图像的内容，这些指令根据图形的几何特性定义图形的轮廓，并用颜色进行描边和填充。矢量图主要用于表示线框型的图画、工程制图、艺术字等。矢量图文件的容量较小。将位图和矢量图像放大前后的实际效果常用图像格式及其特点BMP格式：Windows最早的图像格式GIF格式：透明背景，动画，256色JPEG格式：文件大小和效果的完美平衡PNG格式：gif的拓展，28到232种颜色PSD格式：PhotoShop，非位图。PCW格式：不压缩的位图。专业摄影。色彩的属性各种色彩都具有明度、色相和纯度三种属性。明度是指色彩的明暗程度，任何色彩都有自己的明暗特征。色彩明度值由高到低的明度变化过程色相是指色彩的相貌，用来区别色彩种类。红、黄、蓝等色族便就是色相，它们之间的差别属于色相差别。纯度是指色彩的鲜艳度、饱和度。RGB色彩模式和Web安全色网页制作中使用最广泛的是RGB色彩模式的十六进制显示模式。即用3个00~FF的十六进制数来表示组成颜色的红、绿、蓝色的数值。例如：000000表示黑色，FFFFFF表示白色，00FF00表示红色，0000FF表示蓝色，总共有224种颜色。我们把在不同的操作系统和浏览器中显示效果一致的216种颜色称为网络安全色。颜色拾取框中可以直接选取的颜色都是 Web安全色图像元素在网页中的应用LOGO(标志)标题照片和插图广告横幅（Banner）背景导航栏补充:网站设计要点网页要有可读性网页需要有结构，尤其是长篇的网页，可以考虑把长篇的网页分开成多幅，或者提供网页之内的捷径链接，使用户可以很快地跳跃过部分篇幅有节制地使用网页上的动感画面和动感标题。留意网页的下载速度。网站网页要有好的检索设计为了利用检索功能，让检索出来的结果真切地反映网页内容的相关性，应该用简洁明了的文字来撰写网页的题目和标题；同时注意用好网页最前面的二三十个文字，以期最精华地反映网页的内容。应定义好网页的关键词，以增人被检索到的概率。提高网站的交互性 最起码的要提供电子邮件、BBS、聊天室等应用，在网站上设立反馈信箱网站内容要做到目标明确、定位正确主题鲜明、富有特色网站的整体风格和特色做出定位对于一些行业标志和公司的标志应充分加以利用版式编排布局合理文字图形的空间组合页面间和页面内的秩序与内容的关系设计简单有序，主次关系分明良好的标题与文字设计色彩和谐重点突出按照色彩的记忆性原则色彩还具有联想与象征的特质不同人群对色彩喜恶程度的差异形式内容和谐统一通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。使用点、线、

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

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

最新文档

评论

0/150

提交评论