网页制作与网站建设初学者必看教程ppt课件.ppt

第1 2 知识技能要点 互联网 Web浏览器网页的类型网页设计的基本流程 3 1 1互联网技术 随着Internet Intranet的不断普及和发展 越来越多的公司 企业和个人正在开始建设自己的Web站点 编写Web网页 以一种新的方式向外界发布信息 供人们去浏览 阅读和应用 因此 网页制作已经受到越来越多的专业人员的重视 4 网页 网页是指通过Internet向全球提供信息的一些文档文件 包括个人信息 商业 娱乐等内容 5 6 7 网页是在浏览因特网时看到的一个个的画面 文字 图片和动画等网站则是指存放在网络服务器上的完整信息的集合体 它包含一个或多个网页 这些页以超链接方式连接在一起 形成一个整体 描述一组完整的信息 首页 主页 构成网站的第一页 8 网页是利用超文本标记语言HTML HyperTextMarkupLanguge 编写的 存放在Internet Intranet上的Web服务器中 供访问者使用浏览器来阅读 利用HTML语言编写出来的网页又称为超文本 即网页中包含有文本 图形 声音 图像和超链接 HyperLink 等多媒体信息 通常我们看到的网页 都是以htm或html后缀结尾的文件 称HTML文件 9 第26次中国互联网发展状况统计报告 2010 7 15 2006 12 2010 6中国网站规模变化 10 1 1 2互联网的应用技术 现在的网络资源及各种业务 应用日趋丰富 电子政务 远程教育 远程医疗 移动短信 在线数字内容等网上各类业务日新月异 电子商务交易额快速增长 信息交流更加便捷高效 11 Internet提供的服务 WWW服务 网上冲浪 电子邮件服务 Email 网上传呼 OICQ QQ 文件传输 FTP BBS 12 万维网 WWW WWW是WorldWideWeb 环球信息网 的缩写 简称为Web 中文名字为 万维网 通过万维网 人们可以使用很简单的方法 就可以很迅速方便地取得丰富的信息资料 是当前Internet上最受欢迎 最为流行 最新的信息检索服务系统 13 蒂姆 伯纳斯 李 TimBerners Lee 于1990年创建了WorldWideWeb WWW Web最初的构想和研发的目的是为了满足在世界各个大学 不同研究所工作的科学家信息共享的需求 WWW的基本概念是把所有个人计算机 计算机网络和超文本整合成一个功效强大并且易于使用的全球信息系统 14 互联网之父 15 1 2浏览器 16 浏览器 浏览器是获取WWW服务的基础 它的基本功能就是对网页进行显示 目前使用最广泛的浏览器是微软公司推出的InternetExplorer浏览器 还有火狐浏览器Firefox等等 17 18 浏览器之战 19 1 2 3网页制作工具 1 记事本 20 步骤如下 单击 开始 按钮 选择 程序 附件 记事本 在 记事本 的窗口中输入HTML代码 输入代码结束后 选择 文件 菜单中的 保存 或 另存为 命令 则弹出图1 1所示的另存为对话框 在 文件名 框中键入Web页的名称 注意文件名必须以 html或 htm为扩展名 如果需要 应在 保存在 列表框中定位到特定的目录 单击 保存 按钮 即创建了一个Web页 见图1 2 进入到你的文件架 单击 进行测试 你的HTML的网页就完成了 21 另存为 对话框 22 单击ie图标 进行测试 23 例 网站制作文本内容 24 运行效果如图 25 26 一个典型的HTML文本的基本结构形式如下 网页标题网页的主要内容 文件头 文件主体 28 HTML标签 HTMLTag 都是由一对 括起来的 成对出现 表示标记的开始和结束 例如 HTML语言正是通过这些标签来设置网页的结构 网页元素的位置和类别 网页元素的显示效果等 29 标记符属性 属性是用来描述对象特征的特性 例如 一个人的身高 体重就是人这个对象的属性 在HTML中 所有的属性都放置在开始标记符里 多个属性之间用空格分开 如 30 关于颜色 颜色值是一个关键字或一个RGB格式的数字 aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow 31 在HTML中对于颜色的定义可以用6位十六进制数 电脑屏幕的色彩是由rgb 红 绿 蓝 三种色光所合成的 通过调整这三个基色就可以调配出其它的颜色 每2位数代表一种颜色的浓度 三种颜色的顺序为红 绿 蓝 00代表颜色浓度最小 FF代表颜色浓度最大 000000代表纯黑 FFFFFF代表纯白 32 d 图中所示是部分颜色的RGB代码 例 为页面设置背景色 33 2 网页编辑器 用FrontPage或者Dreamweaver工具FrontPage和Dreamweaver是最著名的网页编辑工具 FrontPage是微软的Office中的一件组件 是入门时很容易掌握的工具 34 2 网页编辑器 Dreamweaver是Macromedia公司出品的网页三剑客其中的一个软件 是专业网页制作软件 35 Dreamweaver 36 美化网页的基本工具 PhotoshopPhotoshop是由Adobe公司开发的图形处理软件 它是目前公认的PC机上最好的通用平面美术设计软件 它功能完善 性能稳定 使用方便 所以在几乎所有的广告 出版 软件公司 Photoshop都是首选的平面制作工具 37 FireworksFireworks是由Macromedia公司开发的图形处理工具 第一套专门为制作网页图形而设计的软件 同时也是专业的网页图形设计及制作的解决方案 38 FlashFlash是美国Macromedia公司开发Flash是交互式矢量图和Web动画的标准 使用Flash可创作出既漂亮又可改变尺寸的导航界面以及其它奇特的效果 它易学 易用 可以做出有很多动画的网站 39 40 1 2 4网页的基本构成元素 一个构思奇妙 制作精美的网页会使整个网站形象地位得到提高 网页制作是一个可简单 可复杂的过程 制作一个优秀的网页不仅需要有艺术的修养 懂得必要的网络语言 还要对图形图像 音频 视频制作 传输技术等有很深刻的理解 41 设计页面时经常使用的一些元素 文字图形菜单按钮 链接 表单 数据交换 背景表格颜色多媒体元素页面布局 42 1 文字 标题 字号 字型 文字是网页发布信息所用的主要形式 在网页中可以通过字体 颜色 底纹 边框等来设置文本的属性 43 1 文字 标题 字号 字型 在网页制作中 文字都可以很方便地设置成各种字体和大小 文字不要太大 也不要使用过多的字体 中文文字使用宋体 9像素或者12像素左右即可 因为过大的字在显示器显示时 线条不够平滑 另外 颜色也不要使用太多 以免让人看起来眼花缭乱 Web本身对文本和字体的格式化能力并不强 在Web页面中 可以指定文本尺寸 如果需要使用某种特殊字体 可以把这些字画在图片上 然后将图片插入到页面中 44 45 2 图形 图形 网页上经常使用的图片格式 Jpg Gif 可以使用Photoshop Firework等图像处理工具制作完成 46 GIF在颜色数很少 256 的情况下 产生的文件很小 JPG最主要的优点是能支持上百万种颜色 从而可以用来表现照片PNG可移值网络图形 Macromedia公司的Fireworks的默认存盘格式就是PNG 它集合了GIF和JPG格式的优点 47 3 交互功能 交互功能 菜单按钮 链接 表单 数据交换 帮助浏览者在Web内导航 48 4 多媒体元素 多媒体元素 包括声音 动画 视频片断 背景音乐等 例如 动画可以使用flash等工具制作完成 49 1 3网站的设计 建设 50 1 3 2网站类型的划分 网站有很多种类型 如门户型网站 电子商务网站 个人网站等等 如果依据传达信息内容的特点来进行类型的划分 可以分为以下6种形式 51 1 信息查询类 像新浪 网易 搜狐等门户网站 这类站点将为访问者提供大量的信息 而且访问量较大 52 2 大众媒体类 具代表性的就属各大门户网站的新闻版块 传统媒体在网络空间的拓展 报刊杂志的电子版 53 3 宣传窗口类 宣传窗口类型的网页具有内容专一 形式多样的特点 尤其是企业的网页 具有企业形象传达的作用 可以看作CI设计的延伸 个人网站也成为这种类型的重要组成部分 因此格外受到重视 54 4 电子商务类 电子商务的出现使单向的信息传送变成了双向的交互服务 从真正意义上实现了网络的交互性 55 5 交流平台类 各种论坛 BBS 聊天室 56 6 网络社区类 即虚拟网上生活 从网上交流发展到网络社区 网络已成为人们生活 存在的新空间 在网络社区可以充分的消遣 放松 获得深入交往并享有充分自由的理想场所 57 1 3 3网站设计的基本流程 1 整体规划例如 网站主题 风格 页面元素 逻辑结构等 2 资料收集例如 收集与主题相关的文字图片资料 一些优秀的页面风格 下载一些你喜欢的交互页面 开放的源代码等 58 如 59 60 如 61 1 3 3网站设计的基本流程 3 页面设计根据事先规划的结构 利用平面图片的形式设计你想要的最终效果 62 4 网页测试5 网页上传6 网站推广与维护 63 1 4 1Web站点主页的基本成分 页面标题 说明网站的性质与内容 网站标识LOGO都是被精心设计的 Logo的作用很多 最重要的就是表达网站的理念 便于人们识别 广泛用于站点的连接 宣传等 一个绝妙的Logo不但会使首页蓦然生辉 而且会成为整个网站的形象大使 页眉 用来放置最希望浏览者看到的内容 导航栏 栏目索引 内容页脚 联系方式 版权信息等 64 d 站标 导航栏 标题 65 d 页脚信息区 66 d 67 1 4 2版式布局 整体布局合理化 有序化 整体化字体的大小 型号 字间距 行间距 以及配色等表现功能 网页的版式设计有创造性 艺术性将文字 图形图像 色彩 动画 视频图像等网页的传达要素 根据特定的内容和主题 在网页所限定的范围中 运用造型元素和形式原理进行视觉的关联与配置 从而将设计意图以视觉形式表现出来 68 69 70 用表格排版 71 72 73 由于人们习惯于将视线从左到右 从上到下移动 因而视区中的不同位置注目程度不同 74 网页中最常见的构图布局 75 层次分明 76 这个网站用了宽大的边框分隔内容和背景 在背景处布置了大面积的图案 页面的宽度符合阅读习惯 而扩展出来的背景又在视觉上饱满了屏幕尺寸 77 2020 3 23 78 2020 3 23 79 SGIsilicongraphics inc 2020 3 23 80 网站内不同页面的设计风格要有所统一 有些是色彩和布局都统一 有些则是布局统一 色彩跳跃 2020 3 23 81 色彩和布局都统一 2020 3 23 82 布局不同而色调一致 2020 3 23 83 布局相同 色彩跳跃 2020 3 23 84 2020 3 23 85 2020 3 23 86 87 推荐学习网站之网页素材 网页制作大宝库素材精品屋黑马网页素材遐思素材屋 88 推荐学习网站之网页特效 网页特效集网页特效七色风网页特效 89 推荐学习网站之技术文章 太平洋学院蓝色理想天极网 网页陶吧网页设计师联盟 90 本章重点内容小结 网页 网站万维网 浏览器网页制作工具 包括网页制作语言HTML 网页中的基本元素网页中颜色的定义网站建设流程网页版式布局 91 1 5练习题课本P15 1 接入Internet的计算机必须共同遵守 A CPI IP协议B PCT IP协议C PTC IP协议D TCP IP协议2 万维网的网