《网页设计与制作》第一章：网页制作基础PPT课件

第1章网页制作基础 网页设计与制作 南海学院计算机系制作 24 04 2020 2 第1章网页制作基础 Web和浏览器WebWeb的特点和结构Web最大的特点是使用了超文本 Hypertext WWW采用C S 客户机 服务器 工作模式在浏览器和服务器之间应用HTTP HyperTextTransferProtocol 超文本传输协议 作为网络应用层通信协议 24 04 2020 3 URL Internet上所有的资源都有一个唯一的URL地址 一般将URL地址称为网址 URL的完整格式如下 协议 主机名 或IP地址 端口号 路径名 文件名 24 04 2020 4 例 几个URL的例子 1 用http协议和缺省端口号 80 访问微软公司服务器 这里没有指定路径和文件名 所以访问的结果是把一个缺省主页送给浏览器 2 ftp 24 04 2020 5 3 http gnacademy org 8001 uu gna index html 从运行在端口号8001的gnacademy org服务器上访问index html主页 4 http www w3 org Addressing URL 5 BNF html httpaddress 访问www w3 org服务器上Addressing URL目录下的5 BNF html网页文件中锚点标识为httpaddress的地方 24 04 2020 6 浏览器 概述分类InternetExplorerNetscapeNavigatorMosaic等专业浏览器以及一些以上述浏览器为内核的专用浏览器 其中使用最广泛的是Microsoft出品的InternetExplorer6 0 简称IE6 24 04 2020 7 IE6的界面 24 04 2020 8 IE6 0的使用 浏览网页 停止 按钮前进和后退刷新页面改变文字大小选择编码全屏幕显示查看源文件 24 04 2020 9 打开多个窗口 用菜单栏上的 文件 新建 窗口 会打开一个新的浏览器窗口 一般情况下 打开四 五个窗口可以充分利用系统资源 而且通过调整窗口的大小和位置还可以同时浏览 24 04 2020 10 主页 临时文件和历史记录 浏览器在打开时自动调入的网页称为 主页 主页可以通过 工具 Internet选项 打开Internet选项对话框 在 常规 选项卡的 主页 栏设置 24 04 2020 11 收藏夹的使用 使用菜单 收藏 添加到收藏夹 打开添加到收藏夹对话框 24 04 2020 12 使用菜单 收藏 整理收藏夹 打开收藏夹整理对话框 进行收藏夹中网页的移动 删除 改名及创建新文件夹等操作 24 04 2020 13 关闭图片显示 在网络速度较慢时 不观看网页中的图片和其它多媒体内容可以得到更快的下载速度 通过 工具 Internet选项 打开Internet选项对话框 在 高级 选项卡中可以对浏览器的工作方式进行设置 24 04 2020 14 关闭自动完成功能 通过工具 Internet选项 打开Internet选项对话框 在 内容 选项卡的 个人信息 部分单击 自动完成 按钮打开自动完成设置对话框 24 04 2020 15 搜索引擎的使用 1 使用浏览器的 搜索 按钮2 使用专门的搜索引擎 Google 摆渡 雅虎 搜狐 24 04 2020 16 认识网站 1 门户网站2 个人网站3 专业网站4 职能网站 24 04 2020 17 1 门户网站 这类网站是一种综合性网站 涉及领域非常广泛 包含文学 音乐 影视 体育 新闻和娱乐等方方面面的内容 具有论坛 搜索和短信等功能 现在国内较著名的门户网站有搜狐 网易 等 24 04 2020 18 2 个人网站 个人网站具有较强个性化 是以个人名义开发创建的网站 其内容 样式 风格等都是非常有个性的 24 04 2020 19 3 专业网站 这类网站具有很强的专业性 通常只涉及某一个领域 内容专业 如榕树下网站 即是一个专业文学网站 24 04 2020 20 4 职能网站 职能网站具有专门的功能 如政府职能网站等 目前逐渐兴起的电子商务网站也属于这类网站 较有名的电子商务网站有阿里巴巴 卓越网 和当当网上书店 等 24 04 2020 21 认识网页 24 04 2020 22 网页中的元素 1 文字2 图像3 表单4 Flash动画5 表格6 超级链接7 视频 音频8 POP窗口9 标题栏和状态栏文字 24 04 2020 23 1 2网页制作的相关知识 HTML语言概述是一种超文本标记语言 作为一种网页编辑语言 易学易懂 24 04 2020 24 1 HTML网页 HTML网页通常是由三部分内容组成的 版本信息 网页标题 HEAD 和文档主体 BODY 下面就是网页结构的总体框架 24 04 2020 25 1 版本信息版本信息位于HTML网页文件的第一行 2 HTML文件标记大部分网页文件都是以标记开始的 在文件的结尾处又以结束 3 头部信息HEAD标记之间是HTML文档的头部 用来标明当前文档的有关信息 在HEAD标记之间 使用频率最高的标记就是TITLE 它用于定义显示在浏览器标题栏的文档标题 24 04 2020 26 例 给网页设置 励志学社 的文档标题 可在头部输入以下代码 励志学社 24 04 2020 27 4 主体标记网页的主体是 标记对作用的范围 标记用于定义HTML文档主体的开始 它能够设置网页的背景图像 背景颜色 链接颜色和网页边距等属性 其基本用法如下所示 Bgcolor为背景颜色 关于颜色的值后面会详细介绍 Text为不包含超级链接的文字颜色 Link为超级链接文字的颜色 Alink为正被点击的超级链接文字的颜色 24 04 2020 28 Leftmargin Topmargin用于设置网页的左边距和上边框 它们是以像素为单位 例1 将网页的上边距和左边距分别设置为40和30个像素的宽度 使用黑色文本 白色背景 未访问的链接源采用蓝色 已访问的链接源标记为暗红色 Vlink为已经点击过的超级链接文字的颜色 Background设置 如果设置了背景图片 图片会覆盖已经设置的颜色 24 04 2020 29 2 XML语言 XML eXtensibleMarkupLanguage 被称作是下一代的网页标记语言 也是采用各种标记来形成网页的源代码 XML中包括可扩展格式语言XSL ExtensibleStyleLanguage 和可扩展链接语言XLL ExtensibleLinkingLanguage 24 04 2020 30 1 22静态网页和动态网页 静态网页指基本上全部使用HTML语言制作的网页 页面的内容是固定不变的 动态网页 DynamicHTML DHTML 利用JavaScript CSS 层叠样式表 及其它类似的语言如VBScript等与HTML进行有机的结合来使静态的HTML网页变成动态 24 04 2020 31 1 23Web服务器端程序 专业的网站都是建立在使用数据库的基础上的 要将这些数据库变成可以通过浏览器显示和操作的Web页面 就需要编写服务器端的程序 用户向服务器传送提交的表单 个人信息 选择结果等 需要在服务器端进行记录 筛选等处理 大量的数据库查询 修改处理也需要服务器端程序的支持 目前常用的服务器端编程技术主要有CGI ASP PHP JSP等 不同的技术需要不同的系统环境支持 24 04 2020 32 1 3网页制作的基本方法 制作网页的基本步骤 1 确定网页的内容 2 设计网页的组织结构 3 资料的收集与整理 4 选择网页的设计方法 常用的网页制作工具有Frontpage Dreamweaver等 服务器端的ASP程序可以使用VisualInterdev UltraDEV等编辑 24 04 2020 33 开始网页制作 构建页面框架创建导航条填充内容创建返回主页连接 24 04 2020 34 网页制作的原则 站点要有创意整体规划动画不能过多导航要明朗制作通用网页主题鲜明优化图象定时更新 24 04 2020 35 制作网页时要注意的问题 1 网页的标题要简洁 明确 2 在文本中要使用水平线 以分割不同部分 3 对重点段落要强调显示 4 网页中插入的图片要尽量的小 5 图形要附加文字说明 以便关闭图像时查看 6 网页中引用的资料及商标 或图标 不能侵犯版权 24 04 2020 36 1 4MacromediaStudioMX2004 MacromediaStudioMX2004是目前应用最广泛的网页制作工具组件 使用方便 功能齐全 Dreamweaver Flash Fireworks被称作 网页三剑客 在Dreamweaver里用丰富的层叠样式表制作耐看 专业的网站 MacromediaFlash工具可较快的制作SW