网页设计与网站建设课件.ppt

上传人(卖家):三亚风情 文档编号:2878871 上传时间:2022-06-07 格式:PPT 页数:140 大小:351KB
下载 相关 举报
网页设计与网站建设课件.ppt_第1页
第1页 / 共140页
网页设计与网站建设课件.ppt_第2页
第2页 / 共140页
网页设计与网站建设课件.ppt_第3页
第3页 / 共140页
网页设计与网站建设课件.ppt_第4页
第4页 / 共140页
网页设计与网站建设课件.ppt_第5页
第5页 / 共140页
点击查看更多>>
资源描述

1、网页设计与网站建设目 录1网页设计基础知识 1.1 Internet基础知识 1.1.1 Internet概述 1.1.2 IP地址和域名 1.1.3 WWW和浏览器 1.2 HTML语言 1.2.1 HTML语言简介 1.2.2 脚本语言简介 小结1 习题12 Fireworks MX图像处理 2.1 Fireworks MX的工作环境 2.1.1 面板 2.1.2 操作图像 2.2 绘制形状 2.2.1 线段和绘图 2.2.2 路径 2.3 选择形状 2.3.1 选择对象 2.3.2 选择选区 2.4 编辑形状 2.4.1 变换对象 2.4.2 取色、填充和擦除 2.4.3 橡皮图章、切片

2、和热点区域 2.5 Fireworks MX面板应用 2.5.1 “优化”面板 2.5.2 面板 2.6 导入文件 2.6.1 导入的概念 2.6.2 拖放操作和复制粘贴 2.6.3 导入文本 2.7 导出文件 2.7.1 导出文件的过程 2.7.2 使用导出向导 2.8 批处理 2.9 应用实例 2.9.1 制作特效字 2.9.2 制作心形图案 2.9.3 制作透明按钮 2.9.4 制作一个锈迹斑斑的铁链 2.9.5 制作简单的GIF动画 2.9.6 制作扇形效果 小结2 习题23 Flash MX制作网页动画 3.1 Flash MX基础知识 3.1.1 Flash MX的特点 3.1.2

3、 Flash MX的窗口简介 3.2 用Flash MX制作简单图形 3.2.1 设置文档属性 3.2.2 绘制简单图形 3.2.3 制作复杂图形 3.3 用Flash MX创建简单动画 3.3.1 Flash MX动画的类型和逐帧动画的制作 3.3.2 制作补间形状 3.3.3 制作补间运动动画 3.4 认识图层 3.4.1 图层的基本知识 3.4.2 制作文字动画 3.4.3 制作遮罩动画 3.4.4 制作沿固定曲线运动的动画 3.4.5 影片剪辑的应用 3.4.6 综合应用 3.5 用Flash MX创建复杂动画 3.5.1 场景切换动画 3.5.2 制作多场景动画 3.5.3 制作按钮

4、动画 3.6 输出动画 3.7 Flash MX中的声音 3.7.1 在动画中添加声音 3.7.2 制作Flash MV 3.7.3 制作播放控制按钮 3.8 综合实例 3.8.1 Action Script简介 3.8.2 制作下拉菜单 3.8.3 制作小型游戏动画软件 小结3 习题34 Dreamweaver MX编辑网页 4.1 Dreamweaver MX基础知识 4.1.1 Dreamweaver MX的特点 4.1.2 Dreamweaver MX窗口简介 4.2 搭建站点 4.3 创建网页文档 4.3.1 创建网页 4.3.2 设置页面属性 4.3.3 制作纯文字网页 4.3.4

5、 在网页中插入图像 4.3.5 插入Flash对象 4.3.6 插入Fireworks对象 4.4 网页定位技术 4.4.1 使用表格定位内容 4.4.2 框架的使用 4.4.3 层的使用 4.5 使用超链接 4.5.1 文本链接 4.5.2 图片链接 4.5.3 书签链接 4.5.4 电子邮件链接 4.6 使用样式 4.6.1 使用HTML样式 4.6.2 使用CSS样式 4.7 行为技术的应用 4.7.1 变换图像 4.7.2 自动跳转页面 4.7.3 显示消息 4.7.4 制作弹出式菜单 4.8 站点的维护和管理 4.8.1 设计合理的网站文件结构 4.8.2 管理站点内的链接 4.8.

6、3 检查目标浏览器 4.8.4 站点报告 4.8.5 站点上传 4.9 Dreamweaver MX综合实例 4.9.1 编辑网页 4.9.2 较复杂的层、表格排版 4.9.3 插入其他基本元素 5 网页设计中的数据库管理 5.1 数据库系统基本概念 5.2 Access 2002数据库系统概述 5.2.1 Access 2002数据库系统简介 5.2.2 Access 2002的基本元素 5.2.3 熟悉Access 2002的工作环境 5.2.4 创建一个Access数据库 5.3 ASP简介 5.3.1 ASP内建对象 5.3.2 用ASP连接数据库 5.4 建立和连接数据库 5.4.1

7、 建立Access数据库 5.4.2 连接数据库 小结5 习题5 6 网站建设 6.1 网站的规划 6.2 创建和设计站点 6.3 建立数据库和连接数据库 6.3.1 创建数据库 6.3.2 建立数据库连接 6.4 网页素材准备 6.4.1 制作Logo 6.4.2 制作Banner 6.5 制作网页 6.5.1 制作网站的首页 6.5.2 制作图书搜索系统的网页 6.5.3 制作站点留言系统的网页 6.5.4 制作静态网页 6.6 网站的发布 6.6.1 测试网站 6.6.2 发布站点 6.7 网站的宣传和推广 6.8 足不出户轻松购书网上购物实例 小结6 习题61网页设计基础知识 1.1

8、Internet基础知识 1.1.1 Internet概述 Internet(即互联网,也称为因特网)是将许多不同功能的计算机和网络通过线路连接起来的全球性网络,使Internet运行起来的协议是TCP/IP协议。 1.1.2 IP地址和域名 1)IP地址 任何连上Internet的计算机都称为主机,每台主机都被指定了一个唯一的主机号,就像每部电话都有一个电话号码一样,这便是IP地址。 2)域名 域名一般由若干个英文字母、数字或者两者的混合字符串组成,字符间用圆点“.”符号隔开。 1.1.3 WWW和浏览器 (1)WWW (2)浏览器 (3)超链接 (4)网站 (5)网页与主页 网页是WWW系

9、统中信息的基本单位,Web服务器就是以网页为单位处理信息的,客户端的信息请求也是以网页为基本单位的。网页的本身是一个纯文本文件,其扩展名是.htm或.html等,网页文件中包含的内容可以是文字、图片、超链接、影片、声音等。 主页(homepage)就是进入WWW网站的第一个网页,也称为首页。 (6)统一资源定位器 统一资源定位器(uniform resource locator,URL)是Internet上信息资源的定位方法,一个完整的URL地址由通信协议名、Web服务器地址、文件在服务器中的路径和文件名4部分组成。 URL通常有2种类型:绝对URL和相对URL。绝对URL用来表示网络信息资源

10、的绝对位置;相对URL也称部分URL,用来表示网络信息资源所在网络服务器的相对位置。 1.2 HTML语言 1.2.1 HTML语言简介 HTML语言是英文“Hypertext Markup Language”的缩写,即超文本标记语言的简称。 一个HTML文件应具有下面的结构: . HTML文件开始 .文件头开始 文件头 .文件头结束 .文件体开始 文件体 .文件体结束 . HTML文件结束 1.2.2 脚本语言简介 1)Java语言 (1)Java语言的特点 简单。 面向对象。 分布式。 跨平台。 安全性。 多线程。 2)Script脚本语言 (1)什么是脚本语言? (2)JavaScrip

11、t脚本语言 (3)VBScript脚本语言 3)服务器端嵌入语言 (1)ASP (2)JSP (3)PHP小结1 本章介绍了一些与网页设计相关的基础知识,如Internet,WWW、网页、主页、IP地址和域名、浏览器、超链接和统一资源定位器等概念,并简单介绍了HTML语言的基本标记和几种制作动态网页的编程语言。通过本章的学习,不仅加深了对Internet的了解,也为后续章节的学习打下一定的基础2Fireworks MX图像处理 2.1 Fireworks MX的工作环境 Fireworks MX的用户界面由标题栏、菜单栏、工具面板、文档窗口、属性面板、画布、状态栏及面板组组成。 2.1.1 面

12、板 1)“工具”面板 工具面板被组织成6个类别:选择、位图、矢量、网页、颜色和视图。所选择的工具决定了所创建的对象是矢量对象还是位图对象。 2)“属性”面板 “属性”面板,它显示当前选区的属性、当前工具选项或文档属性。 2.1.2 操作图像 1)视域控制栏 视域控制栏包括文档显示比例和页面的分辨率状态。 2)查看图像 当图像放大到窗口无法全部显示时,徒手工具( )可以移动窗口中图像的位置,就好像用手进行推动一样。 在页面内单击放大镜工具( ),可以对图像放大显示比例,按下Alt键会变成缩小键,缩放范围在66 400。 4)全图及草图显示 6)设置图像大小 选择“修改”菜单的“画布”子菜单下的“

13、图像大小”命令即可打开对话框,在该对话框中可以改变文档的大小、打印尺寸和分辨率。 2.2 绘制形状 2.2.1 线段和绘图 1)线段 线段工具分为直线工具 和钢笔工具 ,钢笔工具可以绘制曲线。 (1)直线工具 在工具箱中选择直线工具后,用户可利用“属性”面板设置线条颜色、笔尖大小、描边种类(喷枪、水彩及油画效果等)、边缘柔化程度、纹理(垂直线、水平线及网格线等)、不透明度及混合模式(变亮、变暗及色相等)。 (2)钢笔工具 钢笔工具可以绘制特殊形状。 选中“钢笔”工具后,在不同位置单击可绘制连续线段路径。如在某点单击并拖动, 则可绘制曲线路径,此时将在节点位置出现调整杆,如图2.12所示。 若要

14、结束路径绘制并使其成为断开路径,可双击最后一个点;若要封闭路径,则可单击所绘制的第一个点。 Fireworks MX的绘图工具主要有矩形工具 、圆角矩形工具 、椭圆形工具 和多边形工 具。 2.2.2 路径 1)路径工具 (1)铅笔工具 (2)画刷工具 (3)自由变换工具 2)修改路径 修改路径的工具包括:自由变形工具项式、区域变形工具 、路径洗刷工具(+) 和路径洗刷工具(-) 。 2.3 选择形状 2.3.1 选择对象 选择工具包括箭头工具 、选择被遮罩对象工具及次选择工具 。 设置选择工具,再选择“编辑”菜单下的“参数选择”命令弹出的对话框中的“编辑”选项卡中的“指针工具选项”。 2.3

15、.2 选择选区 在工具箱中有下面几种设置图像选区的工具,分别为矩形选择工具 、椭圆形选择工具 、裁切工具 、套索工具 、多边形套索工具 和魔棒工具 。 选区有如下“样式”: 正常 可以通过拖动设置选区的设置。 固定比例 限制高和宽的比例。 固定大小 设置固定的宽度和高度。 在“边缘”下拉列表中,可以设置硬边、消除锯齿边及羽化3种形式。 2.4 编辑形状 2.4.1 变换对象 变换工具主要是比例变换工具 、倾斜工具 和扭曲工具 。 1)比例变换工具 比例变换工具可以控制对象的旋转和大小的变换。 也可以使用“数值变形”,选择“修改”菜单下的“变形”子菜单下的“数值变形”命令可弹出对话框,如图2.3

16、6所示。 2)倾斜工具 倾斜工具可以将图形或者图像进行倾斜变形。 扭曲工具可以对选中后的每一个点进行调整,从而达到变形的效果。 2.4.2 取色、填充和擦除 吸管工具 可以选取样本颜色应用于当前线段纹理、填充和效果的工具。 2)填充 油漆桶工具 是用颜色或图案填充对象的工具,油漆桶工具与吸管工具相似,吸管工具针对纹理,油漆桶工具则应用于填充效果,吸管工具只能点取颜色,而油漆桶工具却可以从一个图像上取得想要的任何式样。油漆桶工具只应用于封闭的路径,吸管工具则可以应用于一段不封闭的路径。 3)擦除 橡皮擦工具 可以用来移去或替代图像的某一部分或剪切路径。 2.4.3 橡皮图章、切片和热点区域 1)

17、橡皮图章 橡皮图章工具 是用来复制图像或图像的一部分的工具。 2)切片 切片工具 可以在文档中生成矩形的切片对象,多边形切片工具 可以生成各种形状的切片对象,将1幅大的图片用切片工具分割成小图片后,可以进行导出。 3)热点区域 创建热点区域的工具有3种:矩形热点区域工具 、圆形热点区域工具 和多边形热点区域工具 。 2.5 Fireworks MX面板应用 Fireworks MX面板是浮动的,可以移动到屏幕的任何一个地方。面板可通过“窗口”菜单显示或隐藏。 2.5.1 “优化”面板 此面板可用来优化图形和文档。 1)优化图形 2)优化文档 同一文档中包含不同种类的图形时,最好为每一种图形都选

18、择适合的文件格式和压缩设置。 在“优化”面板中,从“设置”下拉列表中选择“JPEG -较小文件”。 2.5.2 面板 1)帧和“历史记录”面板 “帧”面板是创建和组织帧的地方。可以命名、重新组织帧,手动设置动画的运行时间以及将对象从一个帧移到另一个帧。每个帧都有若干相关的属性,通过设置帧延时或隐藏帧,可以在制作和编辑过程中使动画达到自己想要的效果。 使用“历史记录”面板,可以查看、修改和重复创建文档所采取的动作。 单击“帧”面板中的“洋葱皮”按钮后将弹出一个下拉菜单。 选择显示选项: 无洋葱皮 关闭洋葱皮,只显示当前帧的内容。 显示下一帧 显示当前帧和下一帧的内容。 之前和之后 显示当前帧和与

19、当前帧相邻的帧的内容。 显示所有帧 显示所有帧的内容。 自定义 设置自定义帧数并控制洋葱皮的不透明度。 多帧编辑 可以选择和编辑所有可见对象。如果取消选择此选项,则只选择和编辑当前帧中的对象。 “对齐”面板 “对齐”面板提供了大量对象对齐的功能。 “信息”面板 4)“颜色”面板 “颜色”面板包括“混色器”和“颜色”样本选项卡2部分,通过混色器可以创建颜色。 5)“属性”面板 “属性”面板用来控制选中的对象。 6)“层”面板 “层”面板可看成是多个文档的叠加,就像一叠透明纸,每张纸上都可以进行图案的绘制,纸张又有一定的透明度,这样可以看到各种图案的交叠。 (1)图层的缩略图 (2)选中图层 (3

20、)图层的可视性 (4)图层的锁定 (5)不透明度的选择 (6)图层的模式 7)“行为”面板 8)“资源”面板 “资源”面板包括:“样式”、URL和“库”面板。 2.6 导入文件 导入图形的步骤如下: 单击“文件”菜单下的“导入”命令或使用Ctrl+R快捷键。 2.6.2 拖放操作和复制粘贴 1)拖放操作 2)复制粘贴 2.6.3 导入文件 1)导入文本 Fireworks MX可以导入2种文本格式:RTF文本格式和ASCII(纯文本)格式。 单击“文件”菜单下的“打开”命令或者单击“文件”菜单下的“导入”命令都可以导入RTF文本。 2)导入GIF动画文件 当导入GIF动画文件时,Firewor

21、ks MX会将GIF动画的每一帧都放置在Fireworks MX文档的单独帧中,还可以基于所有导入帧中的共同像素创建背景层。 3)从扫描仪或数字相机导入 2.7 导出文件 弹出“文件”菜单下的“导出预览”命令。 在弹出的“导出预览”对话框中选择所需的设置。 使用“文件”面板可以设置导出文档的缩放比例或指定导出的区域,如图2.88所示。 2.9 应用实例 2.9.1 制作特效字 1)应用样式 2)制作弧形字 3)制作环形文字 2.9.2 制作心形图案 2.9.3 制作透明按钮 2.9.4 制作一个锈迹斑斑的铁链 2.9.5 制作简单的GIF动画 1)使用Fireworks创建动画的一般步骤 创建

22、新文档。 创建简单的帧帧动画,或利用系统提供的辅助手段创建过渡动画。 设置帧延迟。 观察动画播放效果。 优化和输出文档为动画GIF。 2)创建帧帧动画 小结2 本章详细介绍了Fireworks MX的界面及操作界面的命令,列出了各种形状绘制工具以及形状编辑工具的使用方法;重点介绍了Fireworks MX中各种面板的使用方法及技巧,以及导入、导出文件的方法和怎样应用批处理操作大量的文件。3Flash MX制作网页动画 3.1 Flash MX基础知识 3.1.1 Flash MX的特点 Flash软件具有以下特点: 它是矢量图形的动画创作软件,动画制作方法简单。 它以时间轴和帧为基础进行动画编

23、辑和播放。 它具有独特的动画变形效果,能在动画中引入交互。 它支持Alpha通道、遮蔽层和引导层编辑。 Flash MX新增功能: 矢量制图功能得到加强,可直接制作一些特效,如投影、虚化、轮廓线及颜色渐变等。 曲线绘制功能增强,可以像Illustrator,FreeHand等绘图软件那样随意绘制曲线。铅笔工具功能强,可支持点到点的绘制功能,这样可以提高绘制的精度。 对象的处理工具更明确化。 动画方面,Real Flash和Real Player G2支持Timeline改为类似Director的样子,可 以自己定义某一段的颜色。文本动画功能加强,可以在某一轨迹上做各种操作。 支持外挂的(公用的

24、)对象库程序及外挂的文本编辑器。 网站建设方面有完整的FTP功能。查找一个指定网站,可以修改SWF里面的错误链接,直接通过XML读取数据库。支持一些固定的TAG,如ColdFusion,ASP,JSP和Generator等。 增加脚本纠错功能(Debug)。 支持JavaScript语法,自动升级播放器、插件,高质量打印功能。 支持搜索引擎,让搜索引擎可以找到影片中的关键字。 在Flash中可以直接调用Fireworks和FreeHand中制作的对象。 3.1.2 Flash MX的窗口简介 菜单栏 工具 主要工具栏 图层 时间轴是实现动画过程的一个主要区域,它安排动画的各种元素按照时间顺序依

25、次出现,共同完成一部完整的动画。 绘图区 右侧面板区和底部面板区 3.2 用Flash MX制作简单图形 3.2.1 设置文档属性 打开“属性”面板 设置背景颜色 调整舞台的大小 设置动画帧频 3.2.2 绘制简单图形 箭头工具 直线、椭圆和矩形工具 铅笔和画笔工具 “标准绘画”模式可以在同一层的线条和填充上涂色。 “颜料填充”模式可以对填充区域和空白区域涂色,不影响线条。 “后面绘画”模式可以在同层舞台的空白区域涂色,不影响线条和填充 “颜料选择”模式会将新的填充应用到选择区中(此选项就跟简单地选择一个填充区域并应用新填充一样)。 “内部绘画”模式可以对画笔笔触开始的填充进行涂色,但从不对线

26、条涂色。这种做法很像一本智能色彩书,不允许你在线条外面涂色。如果在空白区域开始涂色,该填充不会影响任何现有填充区域。 3.2.3 制作复杂图形 1)填充工具 2)填充变形工具 3)实例1:水晶球 4)钢笔工具 5)文字工具 6)变形工具 移动 旋转对象 倾斜 缩放 扭曲 7)位图的矢量化 3.3 用Flash MX创建简单动画 3.3.1 Flash MX动画的类型和逐帧动画的制作 1)Flash MX动画的类型 实现逐帧动画 补间动画,补间动画又分为以组件为动画元素的补间动画和以形状变化为主的补间形状。 2)制作逐帧动画 先来了解一下逐帧动画和Flash的一些基本概念。 帧 时间轴 3.3.

27、2 制作补间形状 1)关键帧 2)制作补间形状 3.3.3 制作补间运动动画 跳动的水晶球 3.4 认识图层 3.4.1 图层的基本知识 1)图层的3种状态 眼睛图标 锁定图标 轮廓线图标 2)编辑图层的4个图标 插入层 插入导线层 插入目录层 删除层 3.4.2 制作文字动画 3.4.3 制作遮罩动画 实例6:望远镜 实例7:波光粼粼 3.4.4 制作沿固定曲线运动的动画 实例8:飘落的花 3.4.5 影片剪辑的应用 实例9:鸟飞云彩间 3.4.6 综合应用 实例10:教师节贺卡 2)制作文字动画影片剪辑 3)制作闪烁的星星影片剪辑 3.5 用Flash MX创建复杂动画 3.5.1 场景切

28、换动画 3.5.2 制作多场景动画 3.5.3 制作按钮动画 Flash中,按钮实际上是4帧的交互影片剪辑。当为元件选择按钮行为时,Flash会创建一个4帧的时间轴。前3帧显示按钮的3种 可能状态;第4帧定义按钮的活动区域。时间轴实际上并不播放,它只是对指针运动和动作做出反应,跳到相应的帧。 按钮元件的时间轴上的每一帧都有一个特定的功能:第1帧是弹起状态,代表指针没有滑过按钮时该按钮的状态;第2帧是指针经过状态,代表当指针滑过按钮时该按钮的外观;第3帧是按下状态,代表单击按钮 时该按钮的外观;第4帧是点击状态,定义将响应鼠标单击的区域。该区域在影片中是不可见的。 实例12:简单的按钮 实例13

29、:带动画效果的按钮 实例14:有实际功能的按钮 3.6 输出动画 1)设置Flash发布参数 2)设置HTML发布参数 3.7 Flash MX中的声音 3.7.1 在动画中添加声音 实例15:为跳动的水晶球添加落地声音 实例16:为教师节贺卡添加音乐 实例17:为按钮添加声音 3.7.2 制作Flash MV 1)制作Flash MV的步骤 收集各种素材。 图片素材 声音素材 准备好歌曲的歌词。 将图片素材进行有机的组织,排列成一个合适的序列。 将这些素材导入到Flash中。 2)为Flash MV配歌词 充分利用Flash的2种动画方式,将歌词与歌词之间转换做得更加变幻无穷。 如何将文字的

30、歌词和音乐中的歌词同步,只需做到以下3点就可以了。 3)制作Flash卡拉OK动画 3.7.3 制作播放控制按钮 实例18:可以控制声音的播放器 3.8 综合实例 3.8.1 Action Script简介 Action Script语法概要: 点语法 数据类型 变量生命周期 书写规范 用户定义函数 XML支持 3.8.2 制作下拉菜单 实例19:下拉式菜单 3.8.3 制作小型游戏动画软件 实例20:拼图游戏小结3 本章介绍了使用Flash制作动画的基本技术和技巧,通过大量的实例来学习制作Flash动画的方法,从介绍绘图工具的使用到简单动画的制作,从讲解动画原理到各种较为复杂动画的制作,如:

31、补间动画制作、文字动画制作、按钮的制作、有声音动画 的制作和有交互功能动画的制作,通过各种实例体现了Flash动画制作的精髓。 Flash是网络时代的一个骄子,它所具备的能力超乎很多人的想象,因此Flash的潜力非常大,想要发挥它巨大潜力,就必须掌握它的基础知识。4Dreamweaver MX编辑网页 4.1 Dreamweaver MX基础知识 4.1.1 Dreamweaver MX的特点 1)Dreamweaver MX的特点 良好地支持简体中文,不会出现不兼容中文的现象。 可以在可视化界面制作出ASP,ASP.NET,JSP,PHP,ColdFusion站点。 自带大量模板,简化了网页

32、制作者的制作过程。 支持数量众多的第三方插件,大大增强了Dreamweaver MX的功能。 通过配置可生成符合XHTML的代码,确保用最新的HTML设计标准及时更新站点。 2)Dreamweaver MX的10大新功能 直观的新工作区。 更加强大的模板。 丰富的代码库。 新服务器技术支持。 帮助起步的示例内容。 XML和Web标准支持。 改进的级联样式表2(CSS2)支持。 高性能的新编码功能。 辅助功能。 ColdFusion MX开发优化。 4.1.2 Dreamweaver MX窗口简介 4.2 搭建站点 1)Dreamweaver站点的组成 站点由3部分组成 本地文件夹是工作目录,该

33、文件夹称为“本地站点”。 远程文件夹是存储文件的位置,该文件夹称为“远程站点”。 动态页文件夹是Dreamweaver处理动态页的文件夹。 2)设置Dreamweaver站点 (1)使用“站点定义向导”设置站点 (2)使用“站点定义”对话框的“高级”设置站点 4.3 创建网页文档 4.3.1 创建网页 1)创建新文档 2)创建以模板为基础的文档 3)打开并编辑已经存在的文档 4.3.2 设置页面属性 页面属性是一些影响网页的参数。 标题 背景图像 背景色 文本 链接 访问过的链接 活动链接 文档编码 跟踪图像 图像透明度 文件文件夹 站点文件夹 左边界、顶部边界 4.3.3 制作纯文字网页 4

34、.3.4 在网页中插入图像 4.3.5 插入Flash对象 1)插入Flash动画 在插入栏中选择“媒体”,然后单击“插入Flash”图标。 在插入栏中选择“媒体”,然后将“插入Flash”图标拖到文档窗口中。 选择“插入” “媒体” “Flash”。 2)插入Flash按钮 Flash按钮对象是基于Flash模板的可更新按钮。 3)插入Flash文本 Flash文本对象允许创建和插入只包含文本的Flash动画,这使读者可以使用自己选择的设计器字体和文本创建较小的矢量图形动画。 4.3.6 插入Fireworks对象 1)插入图像文件 执行以下2项操作中的一项即可。 选择“插入” “图像”。

35、在“插入”栏的“常用”类别中,单击“图像”按钮或将其拖到文档中。 2)插入Fireworks HTML文件 选择“插入” “交互式图像” “Fireworks HTML”。 在“插入”条的“常用”类别中,单击“插入Fireworks HTML”按钮。 4.4 网页定位技术 4.4.1 使用表格定位内容 1)插入表格 插入表格可使用“插入”菜单或工具栏的“插入”命令来创建一个新表格。 2)在表格中添加内容 3)插入单元格 4)删除单元格 5)合并和拆分单元格 4.4.2 框架的使用 使用框架的最常见的情况是:一个框架显示包含导航控件的文档,另一个框架显示含有内容的文档。 4.4.3 层的使用 1

36、)在页面上创建层 2)操作层 在对一个层进行移动、大小调整或对齐操作之前,必须先选择该层。 3)选择层 选择一个或多个层后即可对它们进行操作或更改它们的属性。 4)更改层可见性 5)更改层的层叠顺序 6)调整层大小 7)移动层 8)对齐层 9)将层靠齐到网格 10)向层添加内容 11)查看和设置层属性 4.5 使用超链接 4.5.1 文本链接 4.5.2 图片链接 4.5.3 书签链接 4.5.4 电子邮件链接 4.6 使用样式 4.6.1 使用HTML样式 1)使用HTML样式设置文本格式 执行以下3项操作之一,可显示“HTML样式”面板: 选择“窗口” “HTML样式”。 按Ctrl +

37、F11键。 单击启动器中的“HTML样式”图标。 (2)HTML样式的类型 HTML样式有2种类型:“段落样式”和“所选样式”。 2)查看或修改现有HTML样式 3)编辑HTML样式 4)在其他站点中使用你的HTML样式 4.6.2 使用CSS样式 1)关于层叠样式表 (1)CSS样式规则组成 (2)CSS样式表的类型 2)使用“CSS样式”面板 (1)“应用样式”和“编辑样式” (2)位于“CSS样式”面板底部的按钮 3)创建新的CSS样式 (1)创建新的CSS样式 (2)定义要创建的CSS样式的类型 (3)选择定义样式的位置 4)应用自定义(Class)CSS样式 (1)将自定义样式应用于

38、文本 (2)将自定义样式从选定内容中删除 5)创建和链接到外部CSS样式表 6)编辑CSS样式 (1)编辑CSS样式 (2)修改CSS样式 7)编辑CSS样式表 (1)编辑CSS样式表 (2)修改CSS样式表 8)导出样式以创建CSS样式表 9)关于冲突的样式 4.7 行为技术的应用 4.7.1 交换图像 “交换图像”动作通过更改img标签的src属性将一个图像和另一个图像进行交换。 4.7.2 自动跳转页面 这个动作可以使浏览器装载新页面,而不必等访问者单击链接时才跳转。 4.7.3 显示消息 在网页中常见的显示消息方式有2种:一种是访问者一进入首页就看到一些最新消息,可以弹出一个消息框,或

39、显示一些文本;另一种是与鼠标经过事件配合,在状态栏显示文本。 4.7.4 制作弹出式菜单 1)显示弹出式菜单 2)添加、删除和更改弹出式菜单项的顺序 3)设置弹出式菜单的外观 4)设置高级外观选项 5)设置弹出式菜单在文档中的位置 6)修改弹出式菜单 4.8 站点的维护和管理 4.8.1 设计合理的网站文件结构 4.8.2 管理站点内的链接 1)管理链接 2)在站点地图中创建和修改链接 3)在整个站点范围内更改链接 4)查找和修复断开的链接 4.8.3 检查目标浏览器 4.8.4 站点报告 4.8.5 站点上传 4.9 Dreamweaver MX综合实例 4.9.1 编辑网页 1)编辑最简单

40、的网页 2)编辑含多媒体的网页 3)编辑含图形的网页 4.9.2 较复杂的层、表格排版 4.9.3 插入其他基本元素 (1)插入水平线 (2)插入日期 (3)插入特殊字符5网页设计中的数据库管理 5.1 数据库系统基本概念 1)数据库 数据库就是存储数据的“仓库”,是“有组织”的数据集合。 2)数据库管理系统 使用数据库的目的就是存储和管理使用信息,而完成这个工作的系统就称为“数据库管理系统(DataBase Management System,DBMS)”。 5.2 Access 2002数据库系统概述 5.2.1 Access 2002数据库系统简介 Access 2002的主要功能如下所

41、述: 定义表 定义表之间的联系 强大的数据处理能力 创建Web页 开发应用程序 5.2.2 Access 2002的基本元素 1)表(Table) 2)查询(Query) 3)窗体(Form) 4)报表(Report) 5)数据访问页(Data Access Page) 6)宏 7)模块 8)组 5.2.3 熟悉Access 2002的工作环境 1)启动和退出Access 2002 (1)启动Access 2002 单击Windows任务栏上的“开始”“程序”“Microsoft Access”命令,如图5.6所示,即可启动Access 2002数据库系统。 (2)退出Access 2002

42、在Access 2002主窗口的菜单栏上选择“文件”“退出”命令,或者单击Access 2002窗口右上角的 (“关闭”按钮)图标即可。 2)Access 2002界面的构成 数据库窗口包括3个部分:工具栏、对象栏和对象列表栏。 (1)工具栏 (2)对象栏 (3)对象列表栏 5.2.4 创建一个Access数据库 1)建立一个数据库 2)字段及数据类型 (1)字段名称 (2)数据类型 3)建立表 表设计视图。 字义字段。 设定字段的属性。 设定主键。 作为主键的字段必须具备以下条件: a.字段中每个值都必须唯一,不能重复,如自动编号类型。 b.在意义上具有代表性。 保存设计。 5.3 ASP简

43、介 5.3.1 ASP内建对象 1)Response对象 (1)Response对象属性 Buffer属性 ContentType属性 CharSet属性 ExpiresAbsolute属性 Status属性 IsClientConnected属性 (2)Response对象方法 Write方法 BinaryWrite方法 Redirect方法 End方法 Flush方法 Clear方法 AppendToLog (3)Response对象的Cookies集 2)Request对象 (1)Form集合 (2)Querystring集合 (3)Cookies集合 3)Server对象 (1)Ser

44、ver对象属性 (2)Server对象的方法 4)Session对象 5)Application对象 5.3.2 用ASP连接数据库 1) ADODB.Connection 2)ADODB.Recordset 3)结束数据库的访问 5.4 建立和连接数据库 5.4.1 建立Access数据库 5.4.2 连接数据库 1)创建数据源DSN (1)什么是DSN 每个数据源都有一个名称,称为数据源名(简称DSN)。 DSN有3种类型,分别是用户DSN、系统DSN和文件DSN。 (2)创建DSN 2)在网页中建立数据库连接 (1)使用DSN连接数据库 (2)使用连接字符串连接数据库 实例1:连接站点根

45、目录的site目录内的wwwlink.mdb数据库的连接字符串。 实例2:Gojira服务器上名为Mothra的SQL Server数据库的ODBC连接字符串。 3)创建记录集 所谓记录集,就是数据库中满足一定条件的数据集合。网页访问数据库,通过只是访问数据库的一个记录集,而不是数据库全部。访问数据库的网页中必须要创建记录集。小结5 本章主要介绍了Access 2002数据库系统的基本元素、工作环境和Access数据库的创建;ASP的6个内建对象和用ASP连接数据库;最后详细介绍了怎样在网站中创建和连接Access数据库。6网站建设 6.1 网站的规划 先对网站进行简要的规划。 (1)确定建设

46、网站的目标 (2)画出网站的结构图 6.2 创建和设计站点 按如下步骤创建站点。 启动Dreamweaver MX,选择“站点新建站点”命令,建立一个站点。 在“站点定义”对话框的“高级”选项卡的“分类”栏中选择“本地信息”,在“站点名称”的文本框内给网站起个名字。 在“高级”选项卡的“分类”栏中选择“测试服务器”。 设置测试服务器。 设置完毕,单击“确认”按钮,返回到“编辑站点”对话框。 在“编辑站点”对话框中,再单击“完成”按钮。 打开“站点”面板在站点中创建2个文件夹image和data,分别用来保存图片和数据库文档。 6.3 建立数据库和连接数据库 6.3.1 创建数据库 1)创建图书

47、搜索数据库 2)创建留言数据库 6.3.2 建立数据库连接 6.4 网页素材准备 6.4.1 制作Logo Logo意为标志、徽标,指企业或网站的标志,也是作友情链接的小图标。 6.4.2 制作Banner Banner(横幅广告)意为旗帜、标语,在网站里通常指放在页面顶部或底部的广告条。 6.5 制作网页 6.5.1 制作网站的首页 6.5.2 制作图书搜索系统的网页 1)制作图书搜索系统的表单页 2)制作图书搜索系统的查找页 6.5.3 制作站点留言系统的网页 1)制作网站留言系统首页 2)制作留言添加页 6.5.4 制作静态网页 1)制作“新书推荐”网页 2)制作“网站简介”网页 6.6

48、 网站的发布 6.6.1 测试网站 每一个网站在发布之前都要进行测试,看看网站的连接有没有问题和网页的框架有没有发生变形。 6.6.2 发布站点 使用Dreamweaver MX发布站点,需要做3个方面的工作。 1)申请服务器空间 2)设置远程站点 3)上传站点 6.7 网站的宣传和推广 (1)规范宣传内容 包括精心挑选标题、关键词、网页描述 (2)网络推广图6.42 网站推广 (3)网下推广 6.8 足不出户轻松购书网上购物实例 1)访问当当网上书店 2)选择购买商品 3)进入购物车 4)去结算中心结账小结6 本章通过“新时代网上书店”这一商务网站的建设实例,完整地介绍了网站的规划、设计和制作的过程。其中详细介绍了怎样设计并建立数据库的连接,网页制作的素材准备和制作,网站的发布、宣传和推广,最后以当当网上书店为例进行网上购物的亲身体验。 作为数据库设计,首要任务是确定创建数据库的目的;其次确定数据库中需要的表,确定表中的字段,精心设计好表的结构,以便数据的存放和应用程序的实现;向表中输入数据并创建其他数据库对象。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(网页设计与网站建设课件.ppt)为本站会员(三亚风情)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|