网页制作技术教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案合集最新课件汇编

1、网页制作技术（第二版） 网页制作技术任务一 设计网页 学习目标了解网页设计的有关知识和术语，理解相关概念熟悉网页构成的基本元素掌握网页制作的基本原则和布局思想了解网站开发的基本流程和制作步骤上网浏览总结各种不同类型网页布局的特点任务一 设计网页 目录：知识1网页的有关术语知识2网页的基本构成元素知识3网页设计的基本原则知识4网页设计的美学法则知识5网页的布局原则知识6网页的布局结构任务1设计网站的标志（ Logo ）任务2设计网站的宣传标语任务3设计网站的标准色彩任务4设计网站的标准字体任务5设计网页任务一 设计网页知识1 网页的有关术语1.网页（Web） 网页，也称为Web页，是万维网中的基

2、本文档，它是用HTML（超文本标识语言）或者其他语言（如javaScript、VBScript、ASP、PHP、XML等）编写而成的。知识2 网页的有关术语2.网站（Site） 网站是指存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些网页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。知识1 网页的有关术语3.超文本（Hypertext） 超文本是一种使用用户 计算机之间进行交流的文本显示技术，通过对关键词或图片的索引链接，可以使这些带有链接的词语或图片指向相关的文件或者文本中的相关段落。知识1 网页的有关术语4.浏览器 浏览器是安装在电脑中（客户端）用来查看万维网中

3、超级文本的一种工具软件。5. FTP（文件传输协议） FTP是文件传输协议的英文缩写，是快速、高效、可靠的信息传输方式。知识1 网页的有关术语6.静态网页 静态网页是指浏览器与服务器端不发生交互的网页7.动态网页 动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。 。知识2 网页的基本构成元素1.文字2.图像3.超链接4.表格5.表单6.事件与行为7.动画8.框架9.音频10.视频11.交互知识3 网页设计的基本原则1.主题鲜明2.结构合理3.形式与内容统一4.技术与艺术统一5.整体与局部统一

4、 知识4 网页设计的美学法则1.统一与变化2.对比与调和3.对称与均衡4.节奏与旋律5.单纯与秩序 知识4 网页设计的美学法则1.统一与变化2.对比与调和3.对称与均衡4.节奏与旋律5.单纯与秩序 知识5 网页的布局原则1.平衡2.对比3.疏密度4.比例5.凝视6.空白7.图片说明 知识6 网页的布局结构1. “同”字型结构布局(型结构布局) 所谓同字型结构就是指页面顶部为“网站标志广告条主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。知识6 网页的布局结构2. “国”字型布局 国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加

5、一横条状的菜单或广告，是一些大型网站所喜欢的类型。3. T型布局 页面的顶部是“网站标志广告条”，左面是主菜单，右面是主要内容。知识6 网页的布局结构4. “三”型布局 这种布局多用于国外站点，国内用得不多。特点是在页面上由横向两条色块，将页面整体分割为 3 部分，色块中大多放广告条、更新和版权提示知识6 网页的布局结构5.对比布局 采取左右或者上下对比的布局.6. POP布局 页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。知识6 网页的布局结构7. Flash 布局 整个或大部分幅面的网页本身就是一个 Flash 动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布

6、局方式。任务1 设计网站的标志（ Logo ）任务2 设计网站的宣传标语任务3 设计网站的标准色彩 网站给人的第一印象来自视觉冲击，确定网站的色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。一般来说，适合于网页标准色的颜色有蓝色、黄橙色、黑灰白色 3 大系。任务4 设计网站的标准字体 文字是网页的主要组成部分，是信息的重要载体，正确选择字体不仅关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响，字体同标准色彩一样，标准字体一般指用于标志、标题和主菜单的特有字体。默认的网页字体一般是宋体。为了体现网页的特有风格，也可以根据需要选择一些特别字体，如飘逸的华文

7、行楷、返朴归真的隶书和亲切随意的手写体等。总之，要根据自己网页所要表达的内涵，选择与主题相符合的字体。目前，常见的中文字体有近 30 种，常见的英文字体有近百种，网络上还有许多专用英文艺术字体供下载，所以要寻找一款满意的字体并不是很困难。网页中通常使用的字体为宋体，黑体，楷体，仿宋体，常用的字号有9pt，11pt。任务5 设计网页1.草案2.粗略布局3.定案本章结束网页制作技术（第二版） 网页设计与制作任务二 创建和编辑站点学习目标了解Dreamweaver CS4的功能和特点掌握Dreamweaver CS4的工具面板及属性面板的使用了解网站目录管理规范掌握创建和编辑站点的方法任务二 创建和

8、编辑站点目录：知识1 Dreamweaver CS4的功能和特点知识2 Dreamweaver CS4的工作界面知识3 站点任务1 创建本地站点任务2 管理站点 任务3 创建站点内容 任务二 创建和编辑站点知识1 Dreamweaver CS4的功能和特点1.插入表格实时视图新增功能2.针对 Ajax 和 JavaScript 框架的代码提示3.全新用户界面4.相关文件和代码导航器5.HTML 数据集6.Adobe InContext Editing (预发布版)7.Adobe Photoshop 智能对象8.更全面的 CSS 支持9.Subversion 集成10.Adobe AIR 创作支

9、持新增功能11.跨产品集成12.跨平台支持知识2 Dreamweaver CS4的工作界面首次开启Dreamweaver CS4时，会出现一个欢迎界面，知识2 Dreamweaver CS4的工作界面在Dreamweaver CS4菜单右上部分有一个工作区选项菜单，可根据格局需要选择不同样式的工作界面。知识2 Dreamweaver CS4的工作界面应用程序开发人员布局：知识2 Dreamweaver CS4的工作界面设计人员紧凑布局：知识2 Dreamweaver CS4的工作界面Dreamweaver CS4工作界面：知识2 Dreamweaver CS4的工作界面1.菜单栏2.插入栏3.

10、文档工具栏4.编辑窗口5.状态栏6.网页标签7.面板组知识3 站点1.本地站点本地站点实际上存放网页的本地文件夹，即本地工作目录。它可以放在本地计算机上，也可以放在网络服务器上。2.远程站点远程站点是存储用于测试、生产、协调文件的地方，具体是哪些文件取决于开发环境。一般远程文件夹位于运行Web服务器的计算机上。3.测试服务器文件夹测试服务器文件夹是Dreamweaver处理动态页面的文件夹。Dreamweaver使用此文件夹生成动态内容并在工作时连接到数据库。主要在对动态页面进行测试时使用。任务1 创建本地站点创建站点名为“网页制作学习站点”的本地站点，本地文件夹为“C:mysite”（本地文

11、件夹可事先在Windows 系统中创建，它将作为本站点的根目录。）任务2 管理站点1.编辑站点任务2 管理站点2.删除站点任务3 创建站点内容1.新建页面任务3 创建站点内容2.新建素材文件夹本章结束网页制作技术（第二版） 网页设计与制作任务四 制作网站链接学习目标理解相对路径和绝对路径的概念掌握内部链接和外部链接的创建方法掌握各种特殊链接的创建方法掌握图像链接的制作方法任务四 制作网站链接目录：知识1 绝对路经与相对路径知识2 内部链接与外部链接知识3 其它特殊链接任务1 制作网站链接任务2 制作锚点链接 任务3 制作图像链接任务三 制作多媒体页面知识1 绝对路经与相对路径3.站点根目录相对

12、路径 基于站点根目录的相对路径从站点的根目录开始，同源端点的位置无关。通常使用“/”表示根目录，所有基于站点根目录相对路径都以“/”开始， 。 站点根目录相对路径与绝对路径的源端点位置无关，解决了绝对路径在测试上的麻烦，在测试基于根目录的链接时，可以在本地站点中进行测试，而无须连接到 Internet 上。知识2 内部链接与外部链接1.内部链接 内部链接指网站内部页面之间的相互链接关系，创建内部链接一般采用“属性”面板设置和拖动指向链接页面的方法。2.外部链接 创建外部链接的方法比较简单，不论是图像还是文本，都可以创建链接到绝对地址的外部链接。知识3 其它特殊链接1.脚本链接 脚本链接是指执行

13、JavaScript代码或调用JavaScript函数。2.下载链接 链接到下载文件的方法，和链接到网页的方法完全一样。当被链接的文件是 exe 文件或 zip文件等浏览器不支持的类型时，这些文件会被下载，3.邮件链接 Email链接是一种特殊的链接，单击这种链接，将打开一个空白通信窗口。在Email通信窗口中，允许用户创建电子邮件，并发送到指定的地址。4.空链接 选中要制作空链接的对象（文本或图像），在属性面板的“链接”文本框中直接输入，就制作了一个空链接。任务1 制作网站链接任务2 制作锚点链接任务3 制作图像链接任务4 制作热点链接本章结束网页设计与制作任务十三 框架结构布局网页学习目标

14、理解框架及框架集的概念。掌握框架的创建方法掌握框架面板的使用方法掌握框架及框架集的属性设置掌握框架及框架集的各种操作利用框架制作网页任务十三 框架结构布局网页目录：知识1 框架和框架集知识2 预定义的框架集知识3 自定义框架集知识4 嵌套框架集知识5 保存框架任务1 利用框架制作网页任务2 制作内联式框架网页任务十三 框架结构布局网页知识1 框架和框架集框架可以将浏览器窗口划分为若干个区域，每个区域分别显示不同的网页（HTML文档）。框架集是HTML文件，它向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。框架集的功能是定义一组框架的布局和属性。注意：框架并不是文件。而是

15、存放文档的容器，任何一个框架都可以显示任意一个文档。知识2 预定义的框架集单击【文件】|【新建】命令，在弹出“新建文档”对话框中选择所需的框架集。 知识3 自定义框架集新建一个空白的HTML文档后，选择【查看】|【可视化助理】|【框架边框】菜单命令，即可在当前文档中显示出框架的边框。拖动文档窗口四周的边框即可创建新框架。知识4 嵌套框架集选择【窗口】|【框架】菜单命令或按【Shift+F2】键，打开“框架”面板。在下框架中单击鼠标，选择下部框架，拖动文档编辑窗口左边的边框，则可创建出上部固定左侧嵌套的框架。知识5 保存框架1.保存框架文档将光标定位到要保存的框架中，选择【文件】|【保存框架】命令。如将框架另存为新