第一章网页设计基础.ppt

网页设计与制作 合肥通用职业技术学院高传雨 第一章网页设计基础 了解互联网的相关概念理解网页与网站的基础知识及其关系HTML基础知识网站设计基本流程Web的起源与基本结构Web的常用术语网页制作工具 项目一 Internet基础和初识WWW 任务一 WEB和浏览器 图1 1网页浏览器及其中显示的网页 知识讲解 1 Web 是WorldWideWeb的简称 又称为WWW 万维网 本质是一个将信息检索与超文本技术结合起来的全球信息系统 2 超文本 采用HTML 超文本标记语言 组成 含有指向其他文档和资源的指针 超链接 3 网页 Web上的各个超文本文件称为网页 是客户可以在浏览器中看到的界面 是一种可以在万维网上传输 并被浏览器识别和翻译成页面显示出来的文件 4 网站 存放一群相关网页的Web服务器称为网站 相关网页一般是通过 超链接 连接在一起的 它可以放在世界上任何地方的一台与因特网相连的主机中 客户可以通过URL访问 5 主页 网站中用户浏览时首先看到的页面 也称为主页 一般名称为index或default 6 C S Web采用的是客户器 服务器工作模式 即客户端用户在需要浏览网页时必须通过浏览器向Web服务器发出浏览申请 服务器根据申请调用相应的页面 并向客户浏览器返回所申请的信息 7 浏览器 客户端用来定位和访问Web信息的一种工具软件 可以把各种从Web上接收的信息解释成人们容易识别和接受的屏幕显示方式呈现给用户 同时还可以进行网上会议 收发电子邮件 视频点播等 当前常用的浏览器主要有微软的IE浏览器 网景的Navigator浏览器 谷歌的Chome浏览器等 单击浏览器图标就可以直接进入浏览器界面 如上图所示 标题栏 显示当期浏览器名称和网页的标题 地址栏 用于输入将要浏览的文档的URL地址 浏览窗口 显示文档的区域 同时还可以通过鼠标进行各种超链接的操作 菜单栏 包含了浏览器中所有的命令 包括 文件 编辑 查看 收藏 工具 帮助 等6个菜单 状态栏 界面最下面的一行 显示链接的地址 工作状态 用户所打开的网页文件等 除以上所提到的之外 浏览器还包括浏览栏 工具栏 链接栏 媒体栏 其他网络软件安装的插件等等 8 URL 统一资源定位符 uniformresourcelocation 用来寻找 定位网络中的惟一的 固定的资源 URL格式如下 协议 主机名或IP地址 端口 路径 文件名和文件扩展名协议 在信息通信中 为了完成相互之间的信息传输 由信息发送方和信息接收方所制订的双方都需要遵守的 同一的规则 在Internet上 它表明客户与主机之间检索或信息传输时所使用的方式 它统一了人们在网上交流的方式 常用的协议有 HTTPFTPFile等 主机名或IP地址 用来寻找并定位存储Web网页的服务器在因特网上的具体位置 端口 又称端口号 即特定应用程序的广泛应用的一个协议端口 常用的默认端口有SMTP为25 POP3为110 HTTP为80 FTP为21 TELNET为23 一般情况下如果用户输入URL时省略了端口号 浏览器将使用所选协议的默认端口号 任务二 网页和网站中的常用概念 术语 图1 2 网页组成 图1 3网站管理后台 1 首页 主页 的组成 客户打开网页时所看到的第一个网页就是首页 或主页 要求通过网站的主页可以链接到网站中所有的页面 首页是用户第一眼看到的 一个网站能否被用户所接受 首页的设计特别重要 网站的首页一般有以下几个部分组成 导航栏 按内容的不同把网页分成不同的组 方便用户快速找到自己所需要的资源 导航栏可以是按钮 文本或图像 导航栏根据网站内容的具体情况设置 一般设置5 8个左右 版权声明 用来声明网站的制作方 提醒其他团体和个人不要侵权 保护自己的劳动成果 栏目 醒目的区分网站中不同类别内容网页的组别 方便用户寻找所需要的资源 内容 具体的网页 除以上几个组成部分之外 根据网站的需要还可以在首页设置公告区 用户登录区 搜索栏 友情链接区等等 LOGO图标 作为网站的标识 一般由文字和图像共同组成 好的LOGO图标可以极大的扩大网站的知名度 2 静态网页和动态网页 根据网页制作所使用的语言和网页的特点和功能的不同 可以将网页划分为静态网页和动态网页 需要注意的是具有动画效果的网页并不一定是动态网页 静态网页 是指基本上全部用HTML语言制作 在制作好之后每次浏览内容都是固定不变的网页 其主要特点如下 A 静态网页的扩展名都是以 htm html shtml为后缀 B 网页内容发布到网站服务器之后 无论有无用户访问 每个静态网页的内容都是保存在网站服务器上的 每个网页都是一个独立存在的文件 C 静态网页一般没有数据库支持 D 静态网页交互性差 功能上有很大的限制 E 静态网页的内容相对稳定 F 静态网页在网站制作和维护工作量比较大 H 静态网页的浏览速度一般比动态网页快 图1 4静态网页的执行过程 动态网页 是指网页文件不仅具有HTML标记 而且还需要可以Web服务器执行的动态语言代码 如数据库连接 数据库读取和更新等 A 动态网页能根据不同的时间和不同的用户 不同的选择显示不同的内容B 动态网页以数据库技术为基础 大多数信息都必须从数据库中读取 即每打开一个网页都要读取一次数据库 C 动态网页必须有只能在服务器端执行的动态语言代码 常用的服务器端编程技术有CGI ASP PHP JSP等 D 动态网页必须采用C S技术 且根据不同的服务器端编程技术服务器端必须具备相应的系统坏境支持 E 动态网页功能更丰富 交互性更好 F 动态网页维护量比较少 H 动态网页的内容很难被搜索引擎收集到 I 动态网页的浏览速度比静态网页速度要慢 动态网页上的信息必须从数据库中读取 即每打开一个网页都要读取一次数据库 如果在线访问的人数太多 则会影响网站运行速度 图1 5动态网页的执行过程 3 前台和后台 在制作网站时通常可以把网站分为前台和后台两个部分 但是这两个词有两个不同的解释 在网站制作中一般把用户看到的网页称为前台 把连接数据库的动态语言和数据库部分称为后台 在网站推广中一般把可以给普通用户看到的称为前台 可以对网站进行管理的 如添加新闻 删除栏目等等称为后台 如图1 3所示 4 网页制作的常用软件 网页编辑工具A FrontPageFrontPage是Microsoft公司出品的入门级网页编辑软件 B DreamweaverDreamweaver是Macromedia公司推出的网页制作产品 它是一个用于可视化设计与管理网页和网站的工具 它与Macromedia公司的Flash Fireworks Freehand配合使用 被称为 网页制作三剑客 C 记事本 WORD等等 网页图像与动画制作工具A FlashFlash是Macromedia公司专门为网页设计的一个交互性矢量动画设计软件 B FireworksFireworks是Macromedia公司专门设计的Web图形工具软件 它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像 C PhotoshopPhotoshop是由Adobe公司出品的著名的图形图像处理软件 D PhotoImpactPhotoImpact是友立 Ulead 咨讯股份有限公司推出的一款图像处理软件 它功能强大 易于使用 在商业广告和Web图像应用方面有着突出的优势 E COOL3D COOL3D是友立 Ulead 咨讯股份有限公司推出的一款优秀的三维立体文字特效工具 它广泛地应用于平面设计和网页制作领域 F UleadGIFAnimatorUleadGIFAnimator是友立 Ulead 公司发布的一个动画GIF制作工具 建设一个正常的网站是一个系统工程 可以根据需要把细节划分为若干个流程 要设计一个网站 首先要详细且准确地理解客户的需求 然后注册域名与申请空间 确定网站的主题与特色 提出网站建设方案 之后根据开发者的实际情况确定网站设计工具 最后上传网站内容到服务器上 正式运营网站和对网站进行科学合理的后期维护 大致的网站建设流程如下图所示 任务三 网站设计的工作流程 1 确定网站的主题与名称 确定网站主题应遵循以下原则 1 主题鲜明 一个网站必须要有一个明确的主题 在主题范围内做到内容全而精 2 明确设立网站的目的 3 体现自己的个性 把自己的兴趣 爱好尽情地发挥出来 突出自己的个性 办出自己的特色 2 搜集材料围绕主题搜集材料 作为自己制作网页的素材 3 规划网站 主题栏的设置突出主题 把主题栏放在最明显的地方 让浏览者更快 更明确的知道网站所表现的内容 设计一个 最近更新 栏目 让浏览者一目了然的知道更新内容 栏目不要设置太多 目录结构设计按栏目内容建立子目录 每个目录下分别为图像文件创建一个子目录image 图像较少时可不创建 目录的层次不要太深 主要栏目最好能直接从首页到达 尽量使用意义明确的非中文目录 颜色搭配网页选用的背景应和页面的色调相协调 色彩搭配要遵循和谐 均衡 重点突出的原则 4 版面布局版面布局一般应遵循的原则是 突出重点 平衡和谐 将网站标志 Logo 主菜单等最重要的模块放在突出的位置 5 图像的运用图像是为主页内容服务的 不能让图像喧宾夺主 图像要兼顾大小和美观 图片不仅要好看 还应在保证图片质量的情况下尽量缩小图片的大小 即字节数 图像过大将影响网页的传输速度 合理地采用JPEG和GIF图像格式 颜色较少的 256色以内 图像 可处理为GIF格式 色彩比较丰富的图像 最好处理为JPEG格式 6 上传与测试测试评估主要包括上传前的兼容性测试 链接测试和上传后的实地测试 利用FTP工具将网页发布到所申请的主页服务器上 网站上传之后 继续通过浏览器进行实地测试 发现问题 及时修改 然后再上传测试 7 后期维护A 推销网站B 维护更新 为了方便网站开发人员与网站所有人更好的沟通 通常需要把客户需求分析 网站建设方案 网站维护和更新方案等等形成文字性的文档 即网站开发方案书 如图1 7所示 任务一 HTML概述与文档基本结构 项目二 HTML的概念及基本语法 文件头 文件体 HTML文件 1 HTML 超文本标记语言 是制作网页的基础语言 它是一些列标记符号或希望显示在文件内的代码 这些标识能够高数浏览器应该如何显示文字和图形 是构成网页的主要工具 任何网页页面都是以HTML语言为核心和基础的 2 HTML语言的编写环境 HTML语言的编写可以通过记事本 DreamweaverCS4 写字板等等工具 3 编写好的HTML文档通过浏览器可以直接显示 也可以通过 查看 源文件 菜单命令查看已经编写好的文档的源文件 但是标记本身不再浏览器中显示 4 HTML文档的扩展名必须是 HTM或者 HTML 5 HTML的任何标记都有括起来 一般有开始和结束两部分组成 结束的标记用 表示 即双标记 也有少数的单标记例如和 6 HTML文档的基本结构包括文件头和文件体两个部分 如上图所示 7 HTML网页文件的命名规则A 只能使用英文字母 数字和下划线 不能包含空格与特殊符号 B 名称区分大小写 C 网站主页文件名为index htm或index html Default htm或default html8 书写HTML源代码时 字符不区分大小写 标记之间空格的多少不影响网页的显示 任务二 头部标记和Body标记的使用 1 Body标记是HTML文档的主体标记 每个网页中都必须包含 2 Body标记可以控制整个文档的显示效果 方式是通过 属性 属性值 的方式实现 3 Body标记的主要属性 1 设置背景颜色bgcolor属性用于设置HTML网页的背景颜色 例如 用于设置背景颜色为红色 2 插入背景图片background属性用于设置HTML网页的背景图片 例如 用于将图片l jpg设置为背景 在标记中添加 bgproperties fixed 可将背景图片设置为水印效果 并且图片不随滚动条滚动 例如 3 设置文字颜色与链接颜色text属性表示HTML网页文本颜色 text定义的颜色将用于整篇文档 例如 用于设置文本颜色为红色 使用link vlink alink属性可以分别控制普通的超级链接 访问过的超级链接 当前活动的超级链接文本的颜色 例如 4 设置页边距 topmargin和leftmargin属性用于设置网页主体内容与网页顶端 左端的距离 例如 4 标记标记出现在HTML网页的开头部分 与之间的内容不在浏览器窗口显示 5 标记用于定义HTML网页的标题 6 标记标记用于提供HTML网页的字符编码 关键字 描述 作者 自动刷新等多种信息 Name 定义一个数据的名称 一般是一个字符串 Content 定义一个数据的属性 http equiv 可用于代替name 一般是一个字符串 chartset 设置字符与汉字的编码 7 代码的注释可以在HTML文档中插入注释 注释内容不显示在浏览器窗口 HTML注释的格式如下 任务三 HTML的文本标记 1 标题设置属性用于设置标题的字号大小 其中 表示最大的标题 表示最小的标题 2 文本的不同修饰 常规字加粗常规字斜体常规字下划线常规字上标常规字下标常规字删除线常规字Strike实现的删除线常规字em标记 斜体常规字 strong标记 加粗常规字 code标记 等宽常规字 var标记变量或程序参数 斜体常规字 small标记 小字体显示常规字 big标记 大字体显示 3 文本的字体 字号和颜色设置 请为我唱一首出塞曲 用那遗忘了的古老言语 请用美丽的颤音轻轻呼唤 我心中的大好河山 那只有长城外才有的清香 谁说出塞歌的调子太悲凉 如果你不爱听那是因为 歌中没有你的渴望 而我们总是要一唱再唱 任务四 段落标记1 分段与分行HTML使用标记实现段落分段 使用标记实现换行 这种换行与浏览器的自动换行基本相同 元素不是成对出现的 我们都有一个家名字叫中国兄弟姐妹都很多景色也不错家里盘着两条龙是长江与黄河还有珠穆朗玛峰儿是最高山坡我们都有一个家名字叫中国兄弟姐妹都很多景色也不错看那一条长城万里在云中穿梭看那青藏高原比那天空还辽阔我们的大中国呀好大的一个家经过那个多少那个风吹和雨打我们的大中国呀好大的一个家永远那个永远那个我要伴随她中国祝福你你永远在我心里中国祝福你不用千言和万语 2 文本的对齐HTML使用align属性实现文本的对齐 标记作为文本的分区标记 使用方法与标记相似 此外 使用标记也可以完成文本的居中对齐 任务五 水平线在网页中 可以使用水平线分隔文本 设定线宽 设定线长 设定对齐方式 left right 设定线的颜色 使用HTML编写网页HTML是超文本标记语言 任务六 列表标记列表的作用相当于文字处理软件中的 项目符号与编号 列表分为无序列表和有序列表 1 无序列表无序列表是由和元素定义的 无序列表的默认符号是圆点 元素包含type属性 通过定义不同的type属性可以改变列表的项目符号 type属性包括 disc 圆 circle 圆圈 square 方块 2 有序列表有序列表是由和元素定义的 元素包含type属性 type属性值有l A a I i等 元素还可以定义列表的起始编号 如果希望列表的第一个编号为5 而不是1 则需要定义元素的start属性 1 无序列表 红楼歌曲词世人都晓神仙好唯有功名忘不了古今将相在何方荒冢一堆草没了世人都晓神仙好只有金银忘不了终朝只恨聚无多及到多时眼闭了2 有序列表红楼梦人名集思广益木兰飘香致富之道少壮不努力始皇统一六国 燕山教子俱成名严监生临终伸指零存整取科学致富新年献辞严冬过后花争发珍珠灯谜知识浅谈六一节欢 后 腥 姚 好珠 霞岁朝图 任务七 超级链接超级链接是整个WWW应用的核心和基础 如果没有超级链接 那么所有的WWW应用将不复存在 1 基本链接超级链接是由锚元素定义的 元素包含href属性与target属性 href属性的值是一个URL地址或E mail地址 target属性控制链接的网页在新的浏览器窗口打开 2 锚点链接锚点是指网页中的某个位置 单击该位置可实现同一个网页之内的链接 例如 常用的 返回页首 操作 在需要跳转的位置输入如下代码 设置锚点a1在制作链接的位置输入如下代码 链接本页锚点a1 链接新浪主页链接指定的网页文件链接指定的邮箱地址将链接的网页文件在新窗口打开 任务八 表格的使用1 表格的总体结构表格一般用于网页排版 设计一个完整表格 至少需要3个标记 1 元素 定义一个表格 每一表格只有一对和 一网页可包含多个表格 2 元素 定义表格的行 一个表格可以有多个行 因此不是惟一的 3 元素 定义一个表格单元 表格的每行可以有不同数量的单元格 在和之间 将出现表格中每一个单元格的具体内容 2 表格的属性 1 表头标记表示表头 表头的字体比一般字体特殊 2 表格的外观 width属性 指定表格或某一个单元格的宽度 单位可以是百分比或像素 height属性 指定表格或某一个单元格的高度 单位可以是百分比或像素 border属性 指定表格边线的粗细 bordercolor属性 指定表格或某单元格的边框颜色 Bordercolorlight属性 指定亮边框的颜色 Bordercolordark属性 指定暗边框的颜色 bgcolor属性 指定表格或某一个单元格的背景颜色 background属性 指定表格或某一个单元格的背景图片 其属性值是一个URL地址 3 表格的间距表格的间距包括如下属性 cellspacing属性 单元格间距 单元格间距是指单元格之间的距离 cellpadding属性 单元格边距 单元格边距是指单元格内部文字与边框之间的距离 4 表格的单元格合并表格中的某些单元格需要占据多行或多列 称为表格的跨行与跨列 包括如下属性 Colspan 表示当前单元格跨越几列 Rowspan 表示当前单元格跨越几行 3 表格示例1 表格总体结构带边框的表格A类B类C类346812 4 表格示例2 表格边距A类B类C类326812 5 表格示例3 表格间距A类B类C类326812 6 表格示例4 合并列单元格各类商品统计A类B类C类326812 7 表格示例5 合并行单元格 各类商品统计A类32B类68C类12 任务九 表单的设计1 表单的基本概念利用表单可以收集客户端提交的有关信息 2 表单标记表单是网页上的一个特定区域 语法如下 其中 action属性用于定义表单的处理程序 例如ASP CGI等程序 的位置 method属性用于定义将表单结果从浏览器传送到服务器的方法 一般有两种方法 即get post get方式的传输有数据量的限制 而post方式的传输没有数据量的限制 并以文件形式传输 2 按钮按钮分为提交按钮与重置按钮两种 例如 输入如下代码 其中 submit代表提交按钮 reset代表重置按钮 3 单选框和复选框单选框只能有一个被选中 复选框可以有一个或多个被选中 radio表示单选框 checkbox表示复选框 checked表示该项被默认选中 4 菜单和列表与标记表示菜单的开始与结束 每一个属性表示菜单中的一个选项 selected属性表示该选项被默认选中 而列表 还应以size属性定义列表的高度 以multiple属性设置允许用户多选 3 表单示例1 表单和按钮留言板姓名 网址 密码 留言 4 表单示例2 单选和多选请选择您的学历 博士硕士学士无请选择您喜欢的音乐 摇滚爵士流行 5 表单示例3 下拉菜单和列表菜单实例 博士硕士学士列表实例 博士硕士学士 任务10 图形和图像1 图像的标记引用图像必须使用标记 标记包含src属性 src的属性值是所引用图像的URL地址 该地址既可以是绝对地址 也可以是相对地址 例如 在网页中插入图像文件2 jpg 2 设置图像标记的属性 1 设置图像的替代文本图像的替代文本是指 当图像不能正常显示时 在图像的所在位置显示一段提示文本 或当鼠标移至图像时显示替代文本 操作实例 2 设置图像的显示大小例如 其中 width指定图像的宽度 height指定图像的高度 属性值的单位既可以是像素 也可以是百分比 3 设置图像的边框例如 其中 border属性值的单位是像素 4 设置图像的对齐方式 定义水平对齐方式 定义垂直对齐方式 5 定义图像的间距显示图像时 应与左右文本之间有一定的间距 定义图像间距的方法如下 其中 hspace定义水平间距 vspace定义垂直间距 单位是像素 3 图像映射所谓图像映射是指 一幅图像上的不同位置被设置了不同的超级链接 单击图像的不同位置