dw网页设计基础.ppt

第1章网页基础知识 网页构成要素和组成元素网页相关知识简介网页的设计理念和配色方案网站建设流程典型网站分析 1 1网页构成要素和组成元素1 1 1网页构成要素 网页的构成要素主要有站标 导航条 广告条 标题栏和按钮等 站标 广告条 导航条 按钮 标题栏 1 站标 站标也叫Logo 是网站的标志 其作用是使人看见它就能够联想到企业 因此 网站Logo通常采用企业的Logo Logo一般采用带有企业特色和思想的图案 或是与企业相关的字符或符号及其变形 当然也有很多是图文组合 如下图所示 2 导航条 导航条是网站内多个页面的超链接组合 它可以引导浏览者轻松找到网站中的各个页面 导航条 导航条 3 广告条 广告条又称Banner 其功能是宣传网站或替其他企业做广告 Banner的尺寸可以根据版面需要来安排 一般大型商务网站都有自己的标准尺寸和摆放位置 4 标题栏 此处的标题栏不是指整个网页的标题栏 而是网页内部各版块的标题栏 是各版块内容的概括 标题栏可以是文字加单元格背景 也可以是图片 一般大型网站都采用前者 一些内容少的小网站常采用后者 5 按钮 在现实生活中 按钮通常是启动某些装置或机关的开关 网页中的按钮也沿用了这个概念 网页中的按钮被点击之后 网页会实现相应的操作 比如页面跳转 或数据的传输等 1 1 2组成元素 网页的组成元素有文字 图片 动画 gif flash 表单 交互功能 音频 视频 超链接 表格 框架 导航等 1 2网页相关知识简介 1 2 1互联网 互联网 Internet 又叫因特网 它是目前世界上最大的计算机网络 将无数广域网 局域网及单机按照一定的通讯协议组织在一起 方便了计算机之间的信息传递 1 2 2网页的本质 一个网页由多个文件组成 网页文件是 根 图像文件都是 枝叶 图像和动画都以链接的形式插入到网页中 打开网站 搜狐网 在浏览器中选择 文件 另存为 菜单 将网页保存到磁盘中 然后看看网页及其组成素材 1 2 3网站 网页和主页 网站是多个网页的集合 各个网页通过超级链接构成一个网站整体 网页就是以html语言为基础编写的 能够通过网络传输 并被浏览器翻译成可以显示出来的包含文字 图片 声音 动画等媒体形式的页面文件 网页由主页和其它链接页组成 主页也叫首页 是网站的入口 即浏览者登录网站时看见的第一个网页 根据网页能够在服务器端运行 把网页分为动态网页和静态网页 静态网页 纯粹用html语言编写的网页 不能在服务器端运行 没有数据库支持 交互性相对较差 每个网页都有一个固定的url 且以htm html shtml xml等常见形式为后缀 发布在服务器上的静态网页是事先保存在服务器上的文件 每个网页都是一个独立的文件 内容相对稳定 容易被搜索引擎检索 动态网页 即采用动态网站技术动态生成的网页 以数据库为基础 能在服务器端运行 可以实现的功能较多 如用户注册 登陆 在线调查 用户管理 订单管理 站内搜索 歌曲下载 软件下载 即时更新新闻 可以留言或书写评论等 不是独立存于服务器上的网页文件 只有当用户请求服务器时才返回一个完整的网页 1 2 4IP地址与域名 IP地址用来标识每台主机在互联网上的地址 具有唯一性 它由4个小于256的数字组成 数字之间用点间隔 例如 61 135 150 126 就是一个IP地址 但是IP地址难以书写和记忆 域名是用字符来表示主机地址的另一种方法 与IP地址对应 在使用过程中易于记忆和书写 域名也是独一无二的 如 和都是域名 1 2 5网址 网址又叫URL 它是一种网络上通用的地址格式 用于标识网页文件在网络中的位置 一个完整的网址由通信协议名称 域名或IP地址 网页在服务器中的路径和文件名4部分组成 1 2 6网页的布局类型1 网站的类型 门户网站 政府部门形象类网站 企业网站 医院网站 科技网站 教育网站 综合网站等 2 布局相关概念版面指的是浏览器看到的完整的一个页面 因为每个人的显示器分辨率不同 所以同一个页面的分辨率可能出现800 600像素 1024 768像素等 看到的版面效果也不尽相同 布局就是以最适合浏览的方式将图片和文字摆放在页面的不同位置 网页版面布局是指定网页内容在浏览器中的显示方式 例如徽标的位置 导航栏的显示 主要内容的排版等 图1 形结构 3 常见的布局样式 1 形结构 如图1所示 2 口 同 国 字形结构 总体分为上 中 下3部分 中间部分又分为3栏 中间是网页的主内容区 如图2所示 图2口字形结构 3 T 厂 形结构 顶部通常为标志 横幅广告和站内导航菜单 顶部下面分为左 右2栏结构 通常左右不对称 栏宽的是页面的主题内容 如图3所示 图3T形结构 4 上下形结构 页面划分为上下2部分 可以对称 也可以不对称 如图4所示 图4上下形结构 5 左右形结构 页面划分为左右2部分 可以对称 也可以不对称 如图5所示 图5左右形结构 1 2 7网站管理与网页制作相关软件 Fireworks 主要用于制作网页图像 网站标志 GIF动画 图像按钮与导航栏等 Flash 主要用于制作矢量动画 如广告条 网站片头动画 动画短片 MTV等 Photoshop Adobe公司出品的一个优秀而且强大的图形图像处理软件 起初它的应用领域主要是平面设计而不是网页设计 但是它所具有的强大功能完全涵盖了网页设计的需要 除了多媒体 在进行网页制作时 除需要Dreamweaver外 还会用到Fireworks Flash Photoshop等辅助软件 DW FW Flash称作网页三剑客 1 2 8HTML基础 1 HTML语言 HTML是网页的主要组成部分 要想精通网页制作 必须对HTML语言有所了解 HTML语言是利用标记 tag 来描述网页的字体 大小 颜色及页面布局的语言 是一种早期的用于网页制作的主要语言 它也是纯文本类型的语言 可以使用任何的文本编辑器对它进行编辑 使用HTML编写的网页文件是标准的纯文本文件 可以用任何文本编辑器打开它 其后缀名为 html或 htm 2 HTML文档的基本结构标题正文 3 主要标记简介开始和结束标记 在它们中间 包含网页里的所有内容 主体 页面内容 主体部分包含文本和图像等网页里所有可见部分 头部 头部的内容head是除文档标题外的不可见部分 文档标题出现在浏览器的窗口标题栏中 还可以包括META信息 关键字 说明 描述 刷新 基础网页 首页 申请的域名空间或网址 链接等 若不需头部信息则可省略此标记 刷新就是在网址发生变化或网页经常更新时 规定在几秒钟内更新当前网页的内容 标题 标题 呈现出网页的标题 文档标题出现在浏览器的窗口标题栏中 包含在 标签内部 以下内容 4 6 为选学内容 4 网页中的其他常用标记 分段标记 换行标记 是空格标记空的标签区块字体标签表格标签文字标签文本缩进的标签可以使用这些标记在记事本中完成网页的设计 HEAD部分包含的主要元素标签描述title文档标题meta描述HTML元信息link描述当前文档与其它文档之间的链接关系script脚本程序内容style指定当前文档的CSS层叠样式表 5 Html的重要标签和属性头部标签 HEAD部分包含的主要元素标签描述title文档标题meta描述HTML元信息link描述当前文档与其它文档之间的链接关系script脚本程序内容style指定当前文档的CSS层叠样式表 HEAD部分包含的主要元素标签描述title文档标题meta描述HTML元信息link描述当前文档与其它文档之间的链接关系script脚本程序内容style指定当前文档的CSS层叠样式表 HEAD部分包含的主要元素标签描述title文档标题meta描述HTML元信息link描述当前文档与其它文档之间的链接关系script脚本程序内容style指定当前文档的CSS层叠样式表 HEAD部分包含的主要元素标签描述title文档标题meta描述HTML元信息link描述当前文档与其它文档之间的链接关系script脚本程序内容style指定当前文档的CSS层叠样式表 meta元素描述HTML文档的元信息 即关于文档自身的信息 定义搜索关键字 字符编码 作者 版权信息以及文档描述 这些标签可以向服务器提供信息 如页面的失效日期 刷新间隔和PICC等级 PICC是internet内容选择平台 它提供了向网页分配等级的方法 格式例 定义语言格式例 script元素语法格式 属性 languagestyle元素语法格式 样式语句 主体标签BODY部分包含的主要元素属性描述text设置页面文字的颜色Bgcolor设置页面的背景颜色Background设置页面的背景图像Link设置页面默认的连接颜色alink设置鼠标单击时的连接颜色Vlink设置访问后的连接颜色Script设置网页中的程序脚本内容 图片标签 字体标签 表格标签 常见的列表标签 6 在编写代码时的注意事项 在书写标签属性值的时候尽量将属性值用引号 英文标点符号 括起来 在书写html语言的时候不区分大小写 代码优化 清理html xhtml和清理word生成的html代码 可以使用代码片段面板插入dw中预定义的代码片段 javascript 内容表 导航 文本 表单元素 页眉和页脚等 课堂实例 创建和测试第一个html网页 在 记事本 窗口或者Dreamweaver网页中输入以下内容 欢迎光临我的第一个网页这是第一个简单网页 选择 文件 保存 命令 在弹出的 另存为 对话框中选择要保存的路径 在 文件名 文本框中输入文件名myweb001 html 1 2 10XHTML语言简介 XHTML是ExtensibleHyperTextMarkupLanguage 可扩展超文本标记语言 的英文缩写 它的前身是HTML 由于HTML代码烦琐 结构松散 所以推出了XHTML 也可以说 XHTML是HTML的一个升级版本 1 2 11脚本语言简介 脚本语言是基于对象的编程语言 网页中常用的有VBScript JScript和JavaScript VBScript和JScript是微软的产品 IE都支持 JavaScript是Netscape的产品 不仅适用于Netscape 同时和IE也有很好的兼容性 可以说是一种通用的脚本语言 课堂练习2无缝滚动效果的实现 本例通过研究无缝滚动效果的实现 来认识一下XHTML和脚本语言在网页制作中的作用 XHTML JavaScript 1 3 网页的设计理念和配色方案1 3 1设计理念 1 3 2网页中的色彩搭配 色彩的三要素色相 色彩的相貌 是区分色彩种类的名称 表示色彩相貌的差异 这种差异由光波的波长决定 明度 色彩的强度 只色彩的明暗度 纯度 色彩的饱和度 即颜色的深浅程度或浓淡程度 色彩心理与网页表现 不同的颜色有着不同的含义 给人各种丰富的感觉和联想 记住常用纯色的十六进制代码 红色 热情 奔放 喜悦 庄严 浪漫 火焰 暴力 侵略 具有刺激效果 容易使人产生冲动 是一种雄壮的精神体现 有愤怒 热情 活力的感觉红色在很多文化中代表的是停止的讯号 用于警告或禁止一些动作 黄色 亮度最高 有温暖感 具有快乐 高贵 富有 灿烂 活泼 明亮 光辉 疾病 懦弱 希望 智慧和轻快的个性 让人感觉灿烂辉煌 黑色 给人深沉 神秘 寂静 悲哀 精致 现代感 死亡 病态 邪恶 压抑的感觉 白色 纯洁 天真 洁净 简单 真理 和平 冷淡 贫乏 白色在中华文化中也代表着死亡的颜色 紫色 浪漫 富贵 创造 谜 忠诚 神秘 稀有 紫色在某些文化中与死亡有关 灰色 庄重 沉稳绿色 介于冷暖色中间 显得和睦 宁静 给人健康 安全的感觉 与金黄 淡白搭配 产生优雅 舒适的气氛 植物 生命 生机 自然 稳定 成长 忌妒 在北美文化中 绿色代表的是 行 与环保意识有关 也经常被连结到有关财政方面的事物 蓝色 天空 清爽 科技 忠诚 安全 保守 宁静 冷漠 悲伤 棕色 大地 厚朴 忠诚 安全 保守橙色 也是一种激奋的色彩 有轻快 欢欣 热烈 温馨 时尚的效果 在网页中运用色彩一般应遵循下列几个原则 1 一个页面中切忌采用过多的颜色 否则会给人一种繁杂的感觉 也烘托不了网页的主题 因此一种风格的网页选用颜色一般不要超过三四种 2 背景的颜色不要太深 显得过于厚重 因为这样会影响整个页面的显示效果 但也有例外 黑色的背景衬托出亮丽的文本和图像 会给人一种另类的感觉 3 要保持整个网页的色调统一 4 要围绕网页的主题选择颜色 色彩要能烘托出主题 1 4网站建设流程 网站需求分析创建站点 设计制作各级页面空间和域名申请测试和发布网站网站推广 1 4 1网站需求分析 1 确定网站的功能和主要内容 2 规划网站主要栏目 确定网站的风格 主题 色调 以及网页的大体布局 并绘制设计草图 3 收集网页所用素材 教学进程 网站的风格设计 设计草图根据实际需要 画出网站的设计草图 如下 教学进程 1 4 2设计制作网站页面 该过程主要包括设计和制作页面 所谓设计 就是用图像处理软件设计好网页的效果图 并将设计好的效果图进行切割导出 将切割好的图片进行导出后 就可以在Dreamweaver中组织网站内容了 包括输入文本 插入图片 动画等 1 4 3空间和域名申请 申请虚拟空间 所谓虚拟空间 就是互联网上的一台功能相当于服务器级的电脑或虚拟主机 该电脑要用专线或其他形式24小时与因特网相连 申请域名 域名的申请方法与虚拟空间相同 凡提供虚拟空间服务的网站一般都提供域名服务 1 4 4测试和发布网站 有了空间和域名后 就可以测试并发布网站了 网站测试一般包括服务器稳定和安全测试 程序和数据库测试 网页兼容性测试