网页制作PPT.ppt

网页制作 网页制作 教材及参考书 教材 网页设计与制作技术教程 2版 清华大学出版社 王传华参考书 网页设计与制作教程 第3版 机械工业出版社 刘瑞新 Dreamweaver8完美网页设计 白金案例篇 中国电力出版社 何海霞 第1章网页设计与制作基础第2章Dreamweaver基础第3章网页中的文本第4章网页元素定位第5章网页中的多媒体对象第6章模板与库第7章动态网页特效第8章动态网站 第1篇网页设计与编辑 上机时间 周日下午3 4节 计算机网络中心考核方式 做一个自己感兴趣的网站 要求图文并茂 上机作业作业命名方式 提交压缩包学号 姓名 班级 实验N学号 姓名 班级 网站 1 实验 教案等材料下载ftp 202 205 94 12 陈英义 文件夹 网页设计 文件夹无须用户名2 上传实验作业 ftp 10 2 210 170 22登录名 cyy密码 cyy 第1篇第1章网页设计与制作基础 1 1网络基础1 1 1网络与网页1 1 2HTML语言与XHTML语言1 2网站建设流程1 2 1分析阶段1 2 2设计阶段1 2 3制作阶段1 2 4测试阶段1 2 5发布与维护阶段思考题 1 1网络基础1 1 1网络与网页 Internet服务 www服务 网页浏览服务 电子邮件服务 网上传呼 ICQ传呼 文件传输 在线聊天 网上购物 网络炒股 联网游戏 虚拟空间等 Internet工作过程 用户连接到Internet 在浏览器窗口中输入Internet地址 按下回车键后 相当于要求显示Internet上的某个特定网页 这个 请求 被浏览器通过电话线等网络介质传送到页面所在的服务器端 然后服务器作出 响应 再通过网络介质把用户请求的特定网页传送到用户所在的计算机 最后由浏览器进行显示 WWW采用客户机 服务器系统 在客户机方面 用户 使用的程序叫做Web浏览器 服务器上则主要存放网页文件 通常称为Web网站 浏览器和Web服务器通过HTTP交换信息 网站主机 站点浏览 InternetWWW 网站开发与维护 1 1 1网络与网页 浏览器 是获取www服务的基础 它的基本功能就是显示网页 Dreamwaver内置ftp功能 建立自己的网站和ftp 统一资源定位符URL UniformResourceLocator 图1 2 1 1 2HTML语言与XHTML语言 网站是多个网页文件的集合 主页 HomePage首页 是整个网站的起始点和汇总点 是用户开始浏览网站的入口 Index htmlHTML HyperTextMarkupLanguage 即超文本标记语言 是通过标记符来标记要显示网页的各个部分 通过标记符告诉浏览器如何显示网页 浏览器按顺序阅读HTML文件 然后根据内容周围的HTML标记符解释和显示各种内容 XHTML ExtensibleHyperTextMarkupLanguage 为可扩展超文本标记语言 HTML是纯文本文件 ASCII码文件 可用文本编辑器编辑 如记事本 Word 扩展名为htm 或html 网页的本质 浏览者通过浏览器访问Web服务器上的网页 而网页的本质是HTML源代码 由此可以看出 网页的本质就是HTML代码 通过结合使用其他Web技术 就可以创建出功能更加强大的网页 超文本文档分文档头和文档体两部分 在文档头里 对这个文档进行了一些必要的定义 文档体中才是要显示的各种文档信息 1 1 2HTML语言与XHTML语言 文本标题文本内容 这两个标识符是HTML文档的标识符 处于文档的最前端 表示文档的开始 即浏览器从开始解释 而则位于文件的最后一行 这样的结果表示这一整份的文档都是HTML语法的文档 是HTML文件头标识符 用来描述HTML首部的内容 说明文档的整体信息 所有首部信息并不会出现在利用WWW浏览器所看到的窗体中 通常与某些标识符一起使用 如标记符 指的是一份文档的标题 通常来说 每一份文档都应该有一个标题来简述这一份文档的特色或是主题 对于WWW浏览器而言 标题所在的位置虽然依照浏览器的不同而不同 但是大部分都位于浏览器的最上方 文本标题文本内容 指的是定义出一个HTML文档的体部 位于首部下面 在标记符内的文字 所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中 标记HTML的开始 在文件结束处要有对应的符号 标识符格式在HTML文件中 重要的文字部分都由 标识符 括起来 这样文字就成了特别的文字 而标识符本身则以 号标识 标识符内的内容称为元素 它代表了标识符的意义 如 网页标题 属性是用来描述对象特征的特性 在HTML中 所有的属性都放置在开始标记符的尖括号里 通常也不区分大小写 1 双标签例如 受影响的内容 2 单标签 不需要成对标记 表示换行 例如 可以用字体标记符和字号属性指定文字的大小 本行字将以较小字体显示 添加注释不论是编写程序还是制作网页 为所做的工作添加注释都是一种良好的工作习惯 实际上 添加注释是任何开发工作必须遵循的规范之一 HTML的注释由开始标记符构成 这两个标记符之间的任何内容都将被浏览器解释为注释 而不在浏览器中显示 注意 网页代码中的符号都是英文的 不是中文的 例如 双引号 背景颜色在标识符中使用BGCOLOR属性可以为网页设置背景颜色 使用text属性可以设置网页上的默认字体颜色 在HTML中 除了使用颜色名称以外 还可以用格式 RRGGBB来表示颜色 例如 背景图案使用BODY标识符的BACKGROUND属性可以设置背景图案 HTML语句为 设置网页背景声音在HEAD中添加 注意 这是个单标签播放次数取 1或infinte时 声音将一直播放直到关闭该网页为止 注意 图片名必须写出后缀名 段落格式的设置 一 标题格式HTML提供六种标题格式 其所用的标记符为 标题n n 1 6 的字体最大 的字体最小 其属性如下 属性ALIGN LEFT CENTER RIGHT 文字左对齐 LEFT 居中 CENTER 或右对齐 RIGHT 例如 农大新闻 二 段落格式1 分段与换行符分段标记符用于将文档划分为段落 标识符为 要将文字强制换行 而不是另起段落 可以用换行标识符BR实现该功能 注意 BR仅单独使用 而非成对出现 2 添加水平线添加水平线的标识符为 与BR类似 HR也单独使用 不成对出现 文字格式的设置 在网页中为了增强页面的层次 其中的文字可以用不同的大小 字体 字型和颜色 通常用FONT标识符来完成 1 FONT标识符设置格式为 被设置的文字size属性是字号属性 face属性用来指定字体样式 color属性可用来控制文字的颜色 常用的设置物理字符样式的标记符有 黑体标记 斜体标记 下划线标记等 在网页中插入图片 一 插入图片用标识符在HTML文件中插入图片 标识符常用的属性见教材 二 图片布局可以使用HEIGHT WIDTH BORDER属性指定图片的高度 宽度以及是否具有框线 alt属性指定替代文件 在网页中插入flash动画 用和标识符在HTML文件中插入flash 可以使用HEIGHT WIDTH属性指定flash的高度 宽度 在网页中插入 移动的文字 用 标识符在HTML文件中插入 移动文字 属性direction为left right up down表示移动方向 属性behavior为scroll slide alternate分别表示 绕圈走 只走一次 来回走 属性loop表示次数 在网页中建立超链接 在网页中 超链接是用URL UniversalResourceLocator 统一资源定位器 来定位目标信息的 URL包括3部分 协议代码 计算机地址 或一个电子邮件地址等 以及具体的文件地址和文件名 超链接的分类根据超链接目标文件的不同 链接可分为 页面链接锚点超链接电子邮件超链根据超链接单击对象的不同 超链接可分为 文字超链接图像超链接图像映射 工学院工学院工学院信电学院信电学院邮箱文件下载 手工编写HTML代码最大的弊端就是在制作网页过程中不能以所见即所得的方式进行 所以现在大多都使用网页编辑软件来制作网页 最常用的网页开发环境有 DreamweaverFrontPage客户端动态网页 VBScript JavaScript脚本 服务器端交互式动态网页 ASP JSP等 制作一个完整的网页 还需要用其他软件制作出相关文件来完善网页 例如制作Flash动画 Shockwave电影等 就需要对这些素材进行一些处理 常用的素材处理工具有 PhotoshopFireworksFlash 1 1 2HTML语言与XHTML语言 例1 2 在Dreamweaver8环境下制作例1 1的界面 分析系统生成的XHTML代码 HTML与XHTML区别XHTML的主体部分比HTML简洁得多 文字内容和显示样式分离页面的首部有不同的文档类型说明 XHTML的标记和属性名称只能用小写 而HTML代码不区分大小写 XHTML代码所有的属性值都要用引号引起来 而HTML代码不要求 XHTML代码的单标签 如 等都要在后面加 斜杠前加空格 来结束 如 而HTML代码只需写单标签本身 XHTML文档的基本结构为 1 2网站建设流程1 2 1分析阶段 这一阶段的主要任务是收集 研究用户需求 讨论Web内容 制定计划 任务主题内容 1 2 2设计阶段 1 站点风格 信息式 新浪 画廊式 个人网站 2 网络技术 网络上的运行速度 网页下载时间不应超过 s 浏览器脚本兼容性 会影响某些网页效果不能正常显示 页面对屏幕分辨率的适应 网页页面的大小应尽量适应流行屏幕的分辨率 随着显示器分辨率的提高 网页设计标准也会提高 网页是否需要交互操作 在网页中加入JavaScript脚本 或在服务器端提供CGI ASP或PHP支持 安装插件 如果网页中使用了flash动画 Shockwave媒体对象 Real视频等 需要相应的插件 应考虑用户获取插件的途径 1 2 2设计阶段 3 规划站点结构及导航方式规划网站目录结构目录名及文件名不能过长 也不能用中文 文件名中可以包含数字或下划线 主页的文件名应为index htm或Default htm 系统默认的主页名称 主页文件放在站点根目录下 其余文件均应归类到相应的子目录下 1 2 2设计阶段 例1 3 规划 家畜生产学 教学网站的目录结构 养猪生产 养禽生产 养牛生产 养羊生产4个模块 可以建立目录结构如右图 1 2 2设计阶段 设计站点导航导航设计的原则是 通过最少的点击次数达到目的地 整个网络的导航风格应该一致 否则浏览者会误解为已离开本网站 导航系统应一目了然 又必须尽量少占用页面空间 1 2 2设计阶段 例1 4 家畜生产学 教学网站的导航系统 1 2 2设计阶段 设计各级页面的版式 原则一 统一 设计作品的整体性 一致性 同一级页面的版式应该相同 不同级页面的版式应有所区别 连贯 页面相互有关系 分割 将页面分成若干小块 小块之间有视觉上的不同 可以使用户一目了然 对比 通过矛盾和冲突 使设计更加富有生气 和谐 整个页面符合美的法则 浑然一体 1 2 2设计阶段 原则二 3C原则 Content 内容 主页简明 内容明确 Clarify 清晰性 文字不能太多 字体大小一致 统一设计风格 Color 色彩 具有一致性和可读性 一致性指色调一致 色彩不宜太多 可读性指色彩搭配恰当 文字与底图对比鲜明 1 2 2设计阶段 1 2 3制作阶段 网站建设的第三