第1章-网页设计基础整理版本.ppt

网页制作基础教程 DreamweaverCC 电子课件 第1章网页设计基础 本章重点介绍网页设计者在制作网站之初所应具备基本知识和设计要领 从而为下一步开发网站做好准备 同时 通过本章的学习使读者熟悉DreamweaverCC界面及运行环境 第1章网页设计基础 1 1网站基础知识1 2网站的组成1 3网站的分类1 4常用建站技术 1 5网站建设流程1 6网页基本元素1 7Dreamweaver工作环境1 8Dreamweaver工作流程 1 1网站基础知识 1 1 1Internet与Web服务1 1 2网站1 1 3IP地址 域名及URL1 1 4服务器与客户机 1 1网站基础知识 1 1 1Internet与Web服务互联网就是借助通信线路将计算机和各种相关设备相连接 并按照统一的标准 在各种设备之间进行数据传输和交换 实现互联 互通 以达到计算机之间资源共享和信息交换的目的 Internet就是一种互联网 1 1网站基础知识 1 1 1Internet与Web服务Internet提供的主要服务包括万维网 WWW或Web 电子邮件 E mail 文件传输 FTP 和远程登录 Telnet 等 Web网采用超文本置标语言 HTML 可以存取包括文本 图像 动画 音频和视频等多媒体信息 还基于超链接 通过众多的网页和网站构成了一个全球范围内的庞大信息网络 1 1网站基础知识 1 1 2网站网站 Website 是指在因特网上 根据一定的规则使用HTML等工具制作的 用于展示特定内容的相关网页的集合 网站就是在互联网上一块固定的面向全世界发布消息的地方 人们可以通过网站来发布自己想要公开的资讯 或者利用网站来提供相关的网络服务 1 1网站基础知识 1 1 2网站网站包括一个首页和若干个分页 首页就是访问这个网站时第一个打开的网页 其他的网页即是分页 衡量一个网站的性能通常从网站空间大小 网站位置 网站连接速度 俗称 网速 网站软件配置 网站提供服务等几方面考虑 最直接的衡量标准是这个网站的真实流量 1 1网站基础知识 1 1 3IP地址 域名及URLIP地址IP地址 是接入因特网的主机被分配的唯一编号 用32位二进制数表示 每8位一组 每组数的十进制范围为0 255 各数之间用一个点号 分开 如 192 168 0 1 1 1网站基础知识 1 1 3IP地址 域名及URL域名域名 为了使用和记忆方便 也为了便于网络地址的分层管理和分配 因特网采用了一种字符型的命名机制 用字符串来代替数字 这就是网络域名系统 如搜狐网站服务器的IP地址为61 135 132 12 其域名为 平时上网时通常在地址栏中输入 也可输入 http 61 135 132 12 1 1网站基础知识 1 1 3IP地址 域名及URLURLURL 统一资源定位器 用于表示网络资源的地址 俗称网址 上网访问某一网站时在浏览器的地址栏中输入的就是URL URL的一般格式为 协议 主机地址 路径 文件名例如 1 1网站基础知识 1 1 4服务器与客户机互联网是由不计其数的计算机和相关设备相互连接而成的 根据计算机在互联网中的用途可将其分成两类 服务器和客户机1 服务器服务器是提供共享资源和服务的计算机 其作用是管理大量的信息资源 服务器的种类较多 Web服务器存储海量的实时信息 为用户提供浏览服务 电子邮件服务器为用户提供电子邮件信箱和收发电子邮件服务 FTP服务器为用户提供上传和下载文件的服务 1 1网站基础知识 1 1 4服务器与客户机互联网是由不计其数的计算机和相关设备相互连接而成的 根据计算机在互联网中的用途可将其分成两类 服务器和客户机2 客户机客户机是用户用来获取资源和服务的计算机 浏览器软件是客户机上的必备软件 常见的浏览器软件有IE浏览器 360浏览器 谷歌浏览器等 1 2网站的组成 1 2 1网站IP地址和域名1 2 2网站硬件平台1 2 3网站软件平台 1 2网站的组成 1 2 1网站IP地址和域名IP地址 每个接入因特网的主机在网络上都应该有唯一的标识 以便其他计算机能够访问 这就是IP地址 IP地址通常由因特网服务提供商 ISP 提供 当用户向ISP提出网站接入申请 同时缴纳一定的费用并得到批准后 ISP将提供用户一个接入因特网的IP地址 中国电信 网通等机构域名为ISP 1 2网站的组成 1 2 1网站IP地址和域名域名 每个IP地址都可以申请一个与其对应的 便于记忆的域名 域名 DomainName 是一个企业或机构在网上的永久性电子商标 它如同商标在市场上的作用一样 是一种无形资产 要建立网站 注册域名是一个重要的环节 用户不但可以申请国内域名 也可以申请国际域名 1 2网站的组成 1 2 2网站硬件平台网站硬件主要由两大部分组成 网络设备和服务器1 网络设备 网络设备主要用于网站局域网建设 网站与因特网的连接 路由器是一种连接多个网络或网段的设备 是将网站连入因特网的桥梁 交换机是局域网组网的重要设备 多台不同的计算机可以通过交换机组成网络 防火墙是一个由硬件和软件结合的系统 是网站内部和外部之间的一道屏障 可限制外界未经授权的用户访问内部网络 管理内部用户访问外部网络的权限 1 2网站的组成 1 2 2网站硬件平台2 服务器每个网站通常都应配置一台服务器 用于存放网页和数据库等文件服务器可由PC 专用服务器和小型机等计算机担任 选择服务器是网站建设的重要环节 必须选择一台性能好 成本低 可扩展 安全可靠的服务器 1 2网站的组成 1 2 2网站硬件平台2 服务器独立的服务器对于经济实力雄厚且业务量较大的企业 可以购置自己独立的服务器 但这需要很高的费用及大量的人力 物力投入 虚拟主机方式所谓虚拟主机是使用特殊的软硬件技术 将服务器分成若干个空间的方式 一般虚拟主机提供商都能向用户提供100MB 300MB 500MB直到一台服务器的虚拟主机空间 可根据网站的内容设置及其发展前景来选择 1 2网站的组成 1 2 3网站软件平台网站运行的软件平台包括 操作系统 Web服务器和数据库系统等1 操作系统可用于网站建设的操作系统有 Windows UNIX Linux等 Windows 最流行 技术先进 操作方便 软件兼容 提供IISUNIX 技术成熟 开放性好 可靠性高 网络功能强大 主要用于小型机Linux 属免费操作系统平台 与UNIX类似 中小企业及个人网站通常使用Windows操作系统 规模大 可靠性和安全性要求较高的网站 通常选择UNIX或Linux操作系统 1 2网站的组成 1 2 3网站软件平台网站运行的软件平台包括 操作系统 Web服务器和数据库系统等2 Web服务器网站的正常运转需要Web服务器的支持 各种操作系统下都有提供Web服务器功能的软件 有的在操作系统中集成 有的是第三方软件 Windows IIS组件 Win7已集成UNIX ApacheWebServerLinux Weblogic 1 2网站的组成 1 2 3网站软件平台网站运行的软件平台包括 操作系统 Web服务器和数据库系统等3 数据库建设动态 交互 管理类的网站离不开数据库 目前网站建设中常用的数据库产品有 MicrosoftAccess是最流行的桌面数据库 Access提供了一种易于使用的界面以便对数据库表进行操作 MySQL是最流行的开放源数据库系统 是快速 灵活 性价比良好的数据库软件 SQLServer最全面的数据库产品 提供强大的企业数据库管理功能 Oracle功能最强大 性能最全面的产品之一 但高价 1 3网站的分类 1 按覆盖范围分类网站既可以运行在企业内部的局域网 也可以运行在因特网 因此 网站可以分为内部网站和外部网站 内部网站 是只供企业局域网内的用户访问的网站外部网站 是通过因特网访问的网站 用户访问网站时 必须先登录因特网 然后借助浏览器通过URL访问网站 1 3网站的分类 2 按交互方式分类网站的另一种分类方法是按照交互性功能分类 可分为静态网站和动态网站静态网站 在网站设计中 纯粹HTML格式的网页通常被称为 静态网页 包含文字 图片 动画图片 声音 影片等等现在大家可以看到的丰富内容 动态网站 动态网站并不是指在网页上插入了动画元素的网站 而是指网站内容的更新和维护是通过基于数据库技术的内容管理系统完成 它将网站建设从静态页面制作延伸为对信息资源的组织和管理 1 3网站的分类 3 按网站的用途分类 门户网站 综合网站 行业网站 娱乐网站等 4 按网站的功能分类 单一网站 企业网站 多功能网站 网络商城 等等 5 据网站的持有者分类 个人网站 商业网站 政府网站 教育网站等 6 据网站的商业目的分类 营利型网站 行业网站 论坛 非营利性型网站 企业网站 政府网站 教育网站 1 3网站的分类 网站类型的不同决定了网站要按照不同的风格进行设计 设计出自身的特色来 网站才能长远运营发展 通过了解我们平时遇到的各种各样的网站类型 我们在做网站的时候 一定要根据自己的具体需求制作适合自己的网站 选择合适的网站类型 7 按资源性质分类信息门户型网站企业型网站交易类网站社区网站办公及政府机构网站互动游戏网站有偿资讯类网站功能性网站综合类网站 1 4常用建站技术 与开发其他应用程序相比 建设网站往往需要由多种语言和工具集成的集合开发平台 常用的语言有HTML VBScript ASP NET PHP JSP等 常用的工具有Dreamweaver Flash Photoshop或Fireworks等 建设与修改网站所使用的编程语言 换成源码就是一堆按一定格式书写的文字和符号 浏览器会帮我们翻译成眼前的模样 1 4常用建站技术 1 4 1常用语言HTML 是一种超文本标记语言 是WWW文档描述语言 它主要在原来文本文件的基础上 加上一系列的标记符号描述其格式 形成网络文件 当用户使用浏览器下载文件时 就把这此标记解释成应有的含义 按照一定的格式显示在屏幕上 1 4常用建站技术 1 4 1常用语言CSS 样式表 CSS的出现为实现HTML文档内容和显示样式的分离提供了有力的技术手段 利用CSS 开发者可以在HTML文档中只编写内容 而在另一份样式文档中设计这些内容的显示方式 比如字体 字形 字号 颜色 风格等 1 4常用建站技术 1 4 1常用语言ASP 是微软所开发的一种后台脚本语言 开发快 易上手 效率高是ASP的优点 但是在安全隐患上 ASP存在的隐患是四种语言里最大的 其次平台的局限性也限制了ASP的发展 1 4常用建站技术 1 4 1常用语言 NET相当于ASP的升级版本 提供了一种新的编程模型结构 可以生成伸缩性和稳定性更好的应用程序 并提供更好的安全保护 但是也由于是微软的产品 那么平台就有了限制 还有数据库的链接复杂 1 4常用建站技术 1 4 1常用语言PHP是当下主流网站开发语言之一 PHP源码是完全公开的 不断的有新函数库加入 以及不停地更新 使得PHP无论在UNIX或是WIN的平台都可以有更多新功能 它提供丰富的函数 使得在程序设计方面有着更好的资源 平台无关性以及安全就是PHP最大的优点 当然还有一些小小的缺点 但是作为应用最为广泛的一种后台语言 PHP的优点还是显于缺点 1 4常用建站技术 1 4 1常用语言JSP技术平台和服务器是互相独立 同PHP一样也是开放的源码 JSP出现至今已经是一门很成熟的程序语言 集成的数据源能力 易于维护 能有效的防止系统崩溃等这些优点 无疑JSP是四种语言里最好最强大的 但是由于它的强大就决定了其使用的技术性 所以不是一般企业网站做站语言的首选 1 4常用建站技术 1 4 2辅助工具1 Dreamweaver是一款专业的HTML编辑器 用于对Web站点 页面和应用程序进行设计 编码和开发 可视化编辑 快速创建页面而无须编写任何代码 可以查看所有站点元素或资源 并将它们从易于使用的面板直接拖到文档中 手工编码 提供了功能全面的编码环境 可方便地编写HTML CSS VBScript ASP NET等代码 并提供实时预览功能 1 4常用建站技术 1 4 2辅助工具2 FlashFlash与Fireworks Dreamweaver合称为 网页制作三剑客 是一款功能强大的矢量化交互式动画制作软件 用Flash制作的动画具有质量高 体积小的特点 并能跨越各种浏览器 操作系统和硬件平台 1 4常用建站技术 1 4 2辅助工具3 PhotoShop或FireworksPhotoShop或Fireworks是用来设计和制作专业化网页图形的应用软件 利用Fireworks可以同时创建和编辑位图和适量图两种图形 并且可以随时编辑 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 确定网站目标也就是网站的主题 是创建网站所要包含的主要内容 一个网站必须要有一个明确的主题 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 网站规划包含的内容很多 如网站的结构 栏目的设置 网站的风格 颜色搭配 版面布局 文字图片的运用等 规划站点内容规划站点的导航机制明确站点的风格 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 要想让自己的网站有血有肉 能够吸引住用户 就要尽量搜集材料 搜集得材料越多 以后制作网站就越容易 资料既可以从图书 报纸 光盘 多媒体上得来 也可以从互联网上搜集 然后把搜集的材料去粗取精 去伪存真 作为自己制作网页的素材 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 站点可以看作是一系列文档的组合 这些文档之间通过各种链接关联起来 在本地磁盘上创建一个包含站点所有文件的文件夹 然后在该文件夹中创建和编辑文档 当准备好发布站点时 再将这些文件复制到Web服务器上 网站的目录是指建立网站时创建的目录 如在建立网站时都默认建立了根目录和images子目录 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 网页制作涉及的工具比较多 网页制作工具Dreamweaver和Frontpage 图片编辑工具 如Photoshop Photoimpact等 动画制作工具 如Flash Cool3d GifAnimator等 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 建站主要分前台和后台 前台的就是网站的版式 根据网站类型 面向人群 来设计网站的版面 建设后台就较为复杂了 就要用程序整合前台 并且完成需要的功能 这个需要较为复杂的程序编写 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 网页制作工具本身就带有FTP功能 利用这些FTP工具 你可以很方便地把网站发布到自己申请的主页存放服务器上 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 推广的方法有很多 例如到搜索引擎上注册 与别的网站交换链接等 1 5网站建设基本流程 1 5 1确立目标1 5 2规划网站1 5 3搜集资料1 5 4组织站点结构1 5 5选择合适的制作工具1 5 6制作建设1 5 7上传测试1 5 8推广宣传1 5 9维护更新 网站要注意经常维护更新内容 保持内容的新鲜 不要一做好就放在那儿不变了 只有不断地给它补充新的内容 才能够吸引住浏览者 1 6网页基本元素 在每一个单独的网页中 又包括标题 网站LOGO 导航栏 Banner广告栏 文本 图像 动画 超链接 表单 版权信息等基本元素 1 6网页基本元素 网站 网页 网页 网页 网页 网页 标题 LOGO Banner 导航栏 文本 图像 动画 表单 版权信息 1 6网页基本元素 网站LOGO 网站Banner 导航栏 文本 图像 动画 表单 版权信息 1 6网页基本元素 1 6 1网站LOGOLogo的中文含义是标志 标识 作为独特的传媒符号 Logo一直是传播特殊信息的视觉文化语言 在网页设计中 Logo常作为公司或站点的标识出现 起着非常重要的作用 集中体现了这个网站的文化内涵和内容定位 网站Logo的设计要简单醒目 除了表达一定的形象和信息外 还必须兼顾与整个页面的美观与协调 1 6网页基本元素 1 6 2网站BannerBanner的中文含义是横幅 标语 通常被称为网络广告 Banner在互联网上有很多的自由和创意空间 但是仍然在一定程度上遵循媒体的要求 1 6网页基本元素 1 6 3导航栏导航栏实质上是一组超链接 通过这组超链接可以浏览到整个网站的其他页面 它应该放置在页面中较为醒目的位置 便于网站浏览者在第一时间看到它并作出判断 确定要进入哪个栏目去搜索他们需要的信息 导航大致可以分为横排导航 竖排导航 多排导航 图片式导航 框架快捷导航 下拉菜单导航 隐藏式导航和动态Flash导航等 1 6网页基本元素 1 6 4文本文本作为人类最重要的信息载体的交流工具 是最重要的网页元素之一 与图像 动画等其他网页元素相比 文本不易在第一时间吸引浏览者的注意 但文本能够更加准确详细地表达网页信息内容和含义 是对其他网页元素的补充 随着网页制作工具不断完善 功能不断增强 网页中的文本也可以按照不同的需求设置相应的字体 字号 颜色等属性 还可以添加一些文字特效 以突出显示重要的文本部分 打破文字的固有缺陷 1 6网页基本元素 1 6 5图像适当的图像能够为网页增添生动性和活泼性 不仅丰富网页内容 提供更多更直接的信息 还能给浏览者视觉上的美感 图像几乎不受计算机平台 地域和语种的限制 也使网页更多地显示出制作上的创造力 页面中的图像不易过多 造成主次不分 形式单调 且图像所占空间大 过多的图像会增加网页的下载时间 图像在网页中作用很多 如制作导航栏 插图 背景图像 按钮等 1 6网页基本元素 1 6 6动画动画能够形象生动地表现事物的变化发展过程 增加网页的动态效果 使网站更加生动有趣 因此 动画已经成为现代网站中不可缺少的元素之一 在网页中使用的动画通常有GIF动画 Flash动画 以及JAVA小程序等 1 6网页基本元素 1 6 7表单表单是网页中的一组数据输入区域 用户通过按钮提交表单后 输入的数据传送到服务器 网络上需要交互的留言板 在线论坛 订单等等都离不开表单 表单实质上是一个服务器程序 用户可以在网页上的表单域中输入文本或数据 提交表单 该表单程序在服务器上执行 并将执行结果反馈到相应的页面上 从而实现了用户与网站之间的交互 1 6网页基本元素 1 6 8版权信息加入伯尼尔公约的国家都必须遵从该公约关于版权声明的规定 简短的一段话透露出网站的专业性并提示浏览者需要注意对该网站的版权进行保护 不得侵犯 版权声明的最标准格式应该是 Copyright dates by author owner 通常可以代替Copyright 但是不可以用 c 1 7DREAMWEAVERCC工作环境 1 7 1DreamweaverCC的启动1 7 2DreamweaverCC的工作环境 菜单栏 文档工具栏 面板组 应用程序栏 属性面板 编辑窗口 1 7DREAMWEAVERCC工作环境 1 7 3调整工作界面改变工作视图Dreamweaver中提供了3种视图 设计视图 代码视图及代码和设计视图 当需要改变编辑视图时 只需点击对应视图按钮 即转换至目标视图模式下 1 7DREAMWEAVERCC工作环境 1 7 3调整工作界面显示 隐藏及改变面板的大小在 窗口 菜单中 勾选或取消相应面板 点击面板的标题或标签 点击面板标题栏右侧的控制菜单 从弹出菜单中选择 关闭面板组 1 7DREAMWEAVERCC工作环境 1 7 3调整工作界面标尺 网格与辅助线 查看 标尺 或网格 或辅助线 1 8DREAMWEAVER工作流程 1 8 1规划和设置站点确定将在哪里发布文件 检查站点要求 访问者情况以及站点目标 此外 还应考虑诸如用户访问以及浏览器 插件和下载限制等技术要求 在组织好信息并确定结构后 就可以开始创建站点 1 8DREAMWEAVER工作流程 1 8 2组织和管理站点文件在 文件 面板中 可以方便地添加 删除和重命名文件及文件夹 以便根据需要更改组织结构 在 文件 面板中还有许多工具 可使用它们管理站点 向 从远程服务器传输文件 设置 存回 取出 过程来防止文件被覆盖 以及同步本地和远程站点上的文件 使用 资源 面板可方便地组织站点中的资源 然后可以将大多数资源直接从 资源 面板拖到Dreamweaver文档中 1 8DREAMWEAVER工作流程 1 8 3设计网页布局选择要使用的布局技术 或将Dreamweaver布局选项与布局技术结合使用来创建站点外观 可以使用Dreamweaver流体网格布局或默认模板开始 可以创建基于Dreamweaver模板的新页 这样更新模板时就会自动更新这些页面的布局 如果希望同时在浏览器中显示多个元素 可以使用框架来设计文档的布局 1 8DREAMWEAVER工作流程 1 8 4向页面添加内容添加资源和设计元素 如文本 图像 鼠标经过图像 图像地图 颜色 影片 声音 HTML链接 跳转菜单等 可以对标题和背景等元素使用内置的页面创建功能 在页面中直接键入 或者从其它文档中导入内容 Dreamweaver还可提供多种工具 用于最大限度提高网站性能以及对网页进行检测以确保与其他Web浏览器兼容 1 8DREAMWEAVER工作流程 1 8 5通过手动编码创建页面手动编写网页面的代码是创建页面的另一种方法 Dreamweaver提供了易于使用的可视化编辑工具 但同时也提供了高级的编码环境 可以采用任一种方法 或同时采用这两种方法 来创建和编辑页面 1 8DREAMWEAVER工作流程 1 8 6针对动态内容设置Web应用程序许多Web站点都包含了动态页 动态页使访问者能够查看存储在数据库中的信息 并且一般会允许某些访问者在数据库中添加新信息或编辑信息 若要创建此类页面 则必须先设置Web服务器和应用程序服务器 创建或修改Dreamweaver站点 然后连接到数据库 1 8DREAMWEAVER工作流程 1 8 7创建动态页在Dreamweaver中 可以定义动态内容的多种来源 其中包括从数据库提取的记录集 表单参数和JavaBeans组件 要将动态内容添加到网页 仅将该动态内容拖放到网页即可 1 8DREAMWEAVER工作流程 1 8 8测试和发布测试页面是在整个开发周期中进行的一个持续的过程 在这一工作流程的最后 在服务器上发布该站点 许多开发人员还会安排定期的维护 以确保站点保持最新并且工作正常 HTML是一种结构化描述语言 格式非常简单 由文字及标签组合而成 其书写规则如下任何标签皆由 和文字组成 如为段落标签 某些起始标签可以加参数 如Hello 表示字体大小为12 大部分标签即有起始标签 又有终结标签 终结标签是在起始标签之前加上符号 构成的 如标签字母大小写均可 1 9HTML语言 1 9 1文件结构标签文件结构标签包括 网页文档都位于