网页设计全部ppt课件.ppt

《网页设计全部ppt课件.ppt》由会员分享，可在线阅读，更多相关《网页设计全部ppt课件.ppt（69页珍藏版）》请在三一办公上搜索。

1、课程考试通知,考试形式：开卷，笔试时间：4月24日（下周日）下午2:305:00。地点：逸夫楼604、703、704注意：1、2:303:00为机器调试和拷贝课件时间，正式考试时间是： 3:005:00，请大家互相转告。2、大家把试卷写完后，可以在以下两个时间段交卷：（1）下周二上午十点到十点半拿到逸夫楼707交卷。（2）下周三上午十点到十点半拿到逸夫楼602交卷。,2022/12/9,网页制作,主讲教师：李永胜 数计学院Tel: 13768272980E-mail: ,课程与上机安排,总课时：20学时，5周，4节/周其中：2节理论课，2节上机课 课程性质：通识选修课考核方式：考查，笔试，开卷

2、（一般都能通过），安排在第五次课进行，地点：逸夫楼7、8楼。教材： 自编，即上课所使用的课件。推荐教材：甘登岱 编著 网页制作三剑客Dreamweaver 8 /Firewprks 8/flash 8(第五版)附光盘一张 北京：机械工业出版社 2006年10月第1版 价格32元 当当网（http:/ 买书可以打折，价格23.9元）,网页的基本知识,1、以学校网站和涂鸦轩网站为例说明网站的基本构成。2、网页制作常用知识简介。(1)HTML语言的知识：它是网页设计的主要语言，构成了网页的基本框架。(2)Dreamweaver软件：网页制作中构造框架的主要软件。(3)Flash软件：动画制作软件。(

3、4)FireWorks软件：动态图片的制作软件。,补充知识：HTML语言基础知识,1.创建一个记事本.2.在记事本中输入HTML语句.3.将记事本另存为.htm文件.(在保存类型中选择“所有文件“),用记事本编辑网页的方法：,html文件是标准的ASCII文件，它看起来象是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end

4、tag)，在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。 如：标题,二、Html文件简介,一般来讲，html的元素有下列三种表示方法，即HTML语句行有如下的形式： 1)文件或超文本 标题 2)文本成超文本 背景颜色 3) ,一般来说，一个html文件应具有下面最基本的结构：标题文件内容,一个html文件应具有下面最基本的结构：,和表示文件的开始与结束，被放置在整个文件的开始与结束之处。和用来标示文件头。在这组标记里我们可以加入和这组标记。和用来指定浏览器窗口的标题。和,在这组标记里我们可以加入文件内容。另，我们可以利用做

5、一些设定：【设定背景颜色】：其设定方法为。范例：现在的背景颜色是黄色哦！【设定背景图片】：其设定方法为范例：看看背景图案是否不一样了！注意：仅支持BMP跟gif格式的图片，且图片bg02.bmp必须跟网页在同一个路径下。,三、 构成网页的基本元素,1、分段元素与分行元素html的分段完全依赖于分段元素。回车不能形成分段，而分行则用2、居中链接签3、字体大小、颜色：文字4、横线：hr线长和线宽用指定，width是指线长， size 指线宽，单位是象素5、空格的表示方法：直接写 。6、插入图片：,四、 超文本链接,超文本链接指针是html最吸引人们优点之一。使用超文本链接指针可以使顺序存放

6、的文件具有一定程度上随机访问的能力，这更加符合人类的思维方式。人的思维是跳跃的、交叉的，而每一个链接指针正好代表了作者或者读者的思维跳跃。因而组织得好的链接指针不仅能使读者跳过他不感兴趣的章节(比如一些枯燥的数据)，而且有助于更好地理解作者的意图。,1、由文字链接到别处：格式：文字如： 广西民族大学2、由图片链接到别处：格式：,1.2 Dreamweaver 8的操作界面,1.2.1 标题栏1.2.2 菜单栏1.2.3 插入栏面板1.2.4 编辑窗口1.2.5 文档工具栏1.2.6 状态栏1.2.7 属性面板1.2.8 辅助设计工具,1.2 Dreamweaver 8的操作界面,1.2.1 标

7、题栏,1.2.2 菜单栏,1.2.3 插入栏面板,插入栏提供了把特定对象插入到网页中的一种简易的方法。只要单击面板上的按钮就能把所需的对象插入到指定的位置，,1.2.4 编辑窗口,1.2.5 文档工具栏,文档工具栏包含了对该网页文件的常用操作,1.2.6 状态栏,位于文档窗口底部的是状态栏。状态栏由标签选择器、窗口操作区、窗口大小设定区、文档网络属性区4个区间组成。,1.2.7 属性面板,属性面板会根据对象的不同来显示相应的对象属性。,1.2.8 辅助设计工具,标尺,1.2.8 辅助设计工具,辅助线用来辅助定位。,1.2.8 辅助设计工具,网格是一个有用的定位参考工具。,1.3 调整布局,1.

8、3.1 显示和隐藏面板1.3.2 调整面板布局,1.3.1 显示和隐藏面板,通过选择“窗口”菜单，可以显示/关闭各个面板。菜单中面板名称前的“”表示该面板已经显示在页面上。,1.3.2 调整面板布局,面板布局同样可以改变。用户可以收藏面板，使页面编辑区扩大。,1.4 第一个站,1.4.1 设置本地站点位置1.4.2 建立Dreamweaver 8本地站点1.4.3 网站框架和站点文件夹1.4.4 建立网页文件,1.4.1 设置本地站点位置,首先应该先在硬盘内创建文件夹作为将要建立站点的存储位置 。,1.4.2 建立Dreamweaver 8本地站点,在Dreamweaver中建立本地站点的方法

9、很多，其中一个是使用它提供的“新建站点向导”。,1.4.2 建立Dreamweaver 8本地站点,新建站点 ：(1)在D盘新建一个文件夹“Myweb+学号”作为站点文件夹。(2)在文件夹“Myweb+学号”中再创建Images文件夹作为存放图片的地方。(3)单击“站点”新建站点，输入站点名称，如：web1，单击“下一步”。(4)选择“不使用服务器技术”，单击“下一步”。(5)选择网页的存储位置为“D: Myweb+学号”，单击“下一步”。(6)在“如何连接远程服务器”中选择“无”，单击“下一步”“完成”，即可在右边的文件管理器中看见Web1站点。(7)右键单击“站点Web1“，选择”新建”文

10、件，即可建立网站的第一个网页文件，通常命名为index.html，并作为主页。(8)保存网页，并按F12预览即可看到效果。,1.4.3 网站框架和站点文件夹,建立站内文件夹框架。新建立的站点可以进行文件夹的移动、修改和删除。,Dreamweaver的文字插入,网页各元素的设计1、文字：直接输入，通过属性设置其大小、颜色、字体、加粗等。（与Word类似）如果字体列表中没有想要的字体，则需添加，方法：单击“字体”“编辑字体列表”在“可用字体”中将需要的字体添加到右边的“选择字体”框中，单击确定，再次单击“字体”，选择刚添加进来的字体即可。,Dreamweaver的图片插入,图片2、图片(1)为使站

11、点图片管理更规范，初学者最好将要插入的图片先复制到网站的文件夹images中。，然后再单击“插入”图形，选择图形的来源，单击确定即可。（2）使用图像属性面板调整图形的各种属性。（3）单击“图像对象”鼠标经过图像，确定“源图像”和“鼠标经过图像”，可以插入动态的翻转图像。,Dreamweaver的超级链接的使用,网页各元素的设计3、超级链接(1)设置链接：选定文本或图像等对象后，在属性面板的【链接】文本框直接中输入网址。,表格的使用,网页各元素的设计4、表格(1)单击“插入”表格，明确表格的行数、列数、宽度和边框等，“确定”即可。(2) 使用图像属性面板调整表格的各种属性（如表格的宽度、边框、单

12、元格的合并与拆分等）。,Dreamweaver的层,5、层：能够灵活地放置在页面内的任何一个位置，灵活方便，与表格配合使用能达到很好的版面布局效果，与Word中的文本框类似，层里面可以放置文字、图片等对象。(1)单击“插入”布局对象层。(2) 使层的属性面板调整层的各种属性。(3) 层还具有隐藏属性，单击“窗口”层，可以在层面板中设置层为隐藏或显示。,Dreamweaver中插入Flash,6、插入Flash影片：(1)为使站点图片管理更规范，初学者最好将要插入的Flash动画先复制到网站的文件夹Flash（可新建一个）中，然后再单击“插入”媒体Flash，选择Flash的来源，单击确定即可。

13、（2）使用Flash属性面板调整Flash影片的各种属性。（3）单击“插入”媒体Flash文本/Flash按钮，在弹出的对话框中设置即可创建动态的Flash文本和Flash按钮。,Dreamweaver的表单,7、表单：表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。 (

14、1)单击“插入”表单 （文本域/按钮/单选框等），即可创建表单对象。例：制作一个“友情连接”的跳转菜单。方法： (1)单击“插入”表单 跳转菜单。 (2)选中“跳转菜单”，单击其下方“属性”中的“列表值“，输入“广西大学”，输入跳转网址，单击“+”号，再输入其他网址名字和跳转网址，最后单击确定。,Dreamweaver的表单元素,7表单的实体元素介绍：,文本字段：接受任何字符的输入。隐藏域：页面中不可见，不接受任何用户的输入，主要用于存储并提交非用户输入的信息。文本区域：文本域中的一种，允许输入多行信息。复选框：允许用户从多个选项中选择一个或者多个。单选按钮：用户只能从一组选项中选择一个选项，

15、例如性别。一般配合标签一起使用。列表/菜单：列出一组可供用户选择的值（项目）。可以将其设置为弹出菜单或者列表框。跳转菜单：跳转菜单可建立 URL（网址等） 与菜单列表中的选项之间的链接按钮：用于执行提交表单到服务器或重置表单数据的命令，也可以与页面脚本语言配合实现自定义的功能。图像域：设置图像作为按钮的图标，此外它还可以配合脚本程序实现更多的交互功能。文件域：文件域使用户可以将本地计算机上的文件上传到服务器。,Dreamweaver的时间线,8、时间线(1)时间线：时间线代表层随时间变化的属性，通过在时间线上的不同时间在网页上放置不同的内容来实现动态效果。(2)时间线的建立。右键单击层，选择“

16、添加到时间轴”，即可将该层与时间轴建立联系。(3)利用时间轴和层实现网页的动感。时间线应用实例制作过程：1.在网页中插入一个图层，并在图层中插入一个鼠标经过图像。2.选择图层，单击右键添加到时间线。3.将时间线的最右端拖到第200帧,并分别在第50帧、100帧、150帧的地方右键单击，选择“增加关键帧(Keyframe)”,同时将图层拖到相应的位置（分别是正下方、右下方、右上方）。4.将“自动播放”和“循环”选项勾上。,Dreamweaver的行为,9、行为事件：它是由用户的操作动作或程序状态的变化所触发的。鼠标的单击、移动、图像的装载状态变化等都是事件。动作：它是由事件触发的，其实质是由浏览

17、器事件触发的脚本程序的运行。例如用户单击鼠标的事件可以触发一个JavaScript脚本程序来弹出一个对话框，图像下载完毕的事件可以触发一个脚本程序来改变网页的背景颜色或播放一段音乐。行为：它是事件和动作的结合。行为必须应用到网页对象才能产生效果，例如文本链接、图像或者按钮。Dreamweaver 8提供了常用的行为，可以方便地实现简单的互动效果。对象：它是应用行为的主体，大部分网页元素（HTML标签）都可以成为对象。但有一些行为只对某种具体的网页元素起作用,1、 弹出消息框,弹出消息框是很常见的一种，当浏览者单击一个按钮、链接，或者执行了某一段脚本程序后，可以设置弹出消息框，提示用户。,弹出消

18、息框,设置弹出消息框的方法：（1）使用【窗口】/【行为】命令打开行为面板 。（2）选中对象，单击面板的添加行为按钮，选择【弹出信息】命令 ，然后输入提示文本。（3）单击【触发事件】按钮，打开下拉列表，在列表中选择合适的触发事件。,2 、播放音乐,可以为网页添加背景音乐，在网页下载完毕时或单击某个按钮时开始播放。为了加快下载速度，背景音乐一般选用rm或mp3等压缩格式的文件，如果对效果要求不高还可使用MIDI格式的音乐。设置方法如下： ：（1）选中对象，打开行为面板 。（2）单击面板的添加行为按钮，选择【播放声音 】命令 ，然后选择要播放的声音文件 。（3）单击【触发事件】按钮，打开下拉列表，在

19、列表中选择合适的触发事件。,3、时间线与行为综合应用实例制作过程：1.在网页中插入一个图层，并在图层中插入一个鼠标经过图像。2.选择图层，单击右键添加到时间线。3.将时间线的最右端拖到第200帧,并分别在第50帧、100帧、150帧的地方右键单击，选择“增加关键帧(Keyframe)”,同时将图层拖到相应的位置（分别是正下方、右下方、右上方）。4.给图层添加“播放时间线”动作和“停止时间线动作。5.分别给“播放时间线”动作和“停止时间线动作添加 onMouseOut和onMouseOver事件。6.将“自动播放”和“循环”选项勾上。7、保存网页，按F12预览网页即可看到效果。,补充技巧二：水中

20、倒影的制作。,技巧二：状态栏飞入文字的制作。步骤：1.在你的站点中新建一个网页。2.将图片lake1.jpeg复制到站点的images文件夹中,类lake.class复制到站点根目录下。3.插入一个1行1列的表格。4.在表格的与之间插入以下语句： ,补充技巧二：状态栏飞入文字的制作,步骤：1.在你的站点中新建一个网页。2.将文件“状态栏文字代码.txt”中的代码放到网页代码的与之间。3、修改代码第二行的Message文字为自己所需要的文字即可。,补充技巧三：利用图层制作上升文字,技巧三：利用图层制作上升文字。步骤：1、新建一个网页。2、打开网页，单击“插入一布局-层” 。3、将以下代码复制到欢

21、迎光临！请问几位？网页的与之间。4、保存并运行即可。,补充技巧四：制作单元格的细线边框,步骤：1、在单元格的标签后加入以下语句：style=border:1px solid #0066CC;“其中#0066CC表示单元格的细线边框的颜色代码。,三 、网页的布局,（一）设计草样。通常，创建 Web 站点并不是以打开 Dreamweaver 并立即对页面进行布局开始的。创建 Web 站点的初始工作从纸张或图形编辑应用程序(如 Macromedia Fireworks)开始。图形设计人员通常会画出 Web 站点综合图形的草图(也称为草样)，以便向客户展示并确保站点的初始构思能让客户满意。设计草样由客

22、户要求其 Web 站点具有的任意数目的页面元素组成。例如，客户可能会提出:页面顶端要有徽标，要有能链接到其它页面的导航功能，有用于联机存储的部分和可以插入视频剪辑的位置。根据这些讨论，设计人员开始对站点布局进行规划，并制作满足客户要求的示例页面草图。,三 、网页的布局,（二）布局Dreamweaver 8提供了“布局”模式以方便用户进行布局。1、进入布局模式：选择页面“左上角”的插入栏中的“布局”类别，在单击“布局”按钮即可进入布局模式。2、布局的工具：利用布局表格和布局单元格来实现。表格中可以放置多个单元格，单元格中不能放表格。,三 、网页的布局,3、布局的步骤：（1）单击“布局表格”按钮，

23、按照“草样”中的模型拖动鼠标，创建布局表格。（2）单击“绘制布局单元格”按钮，按照“草样”中的模型拖动鼠标，在布局表格内绘制布局单元格。（注意单元格尺寸）（3）返回“标准”模式，插入图片，输入文字即可。,模拟建立广西民族大学网站,（1）在D盘新建一个文件夹，命名为Gxun+学号，将下载的WYZZ3文件夹中的images文件夹复制到其中。（2）新建一个站点，命名为Gxun，并以D:Gxun+学号文件夹为站点文件夹。（3）在站点中新建一个网页index.html，并双击打开。（4）选择页面“左上角”的插入栏中的“布局”类别，在单击“布局”按钮进入布局模式。（5）单击“布局表格”按钮，按照“草样”中

24、的模型拖动鼠标，创建整体布局表格，并在属性面板中将其宽和高分别设置成761和801，并将其设置为居中对齐。（6）单击“绘制布局单元格”按钮，按照“草样”中的模型拖动鼠标，在整体布局表格内绘制顶端布局单元格，并将其宽和高分别设置成761和143。（7）单击“绘制布局单元格”按钮，按照广西民族大学草样拖动鼠标，在左边创建12个布局单元格。,（8）单击“绘制布局单元格”按钮，按照广西民族大学“草样”中的模型拖动鼠标，在中间创建一个布局单元格,其下方再创建一个稍小的单元格 ，接着在下方再创建一个稍高的布局单元格。（9）同样的方法在右边创建单元格，其大小和位置仿照文件夹WYZZ3中的“gxun10822

25、2”文件夹中的index.html文件。（10）返回“标准”模式，插入图片，输入文字，为文字和图片加链接。（11）在右边的“公告通知”下方的单元格中制作动态文字：将以下代码拷贝到改单元格的与之间： （11）保存网页并按F12 预览。,上周上机存在问题,1、部分机房安装的是DW MX 2004，进入布局的操作稍有不同，但后边的操作基本一样。2、表格中可以放置表格或单元格，但单元格不能放表格或单元格。3、制作“公告栏”时，代码的放置位置问题，中英文符号的问题。,Fireworks8,一、简介。Fireworks 8是用来设计网页图形的应用软件。二、位图与矢量图位图：又称光栅图，一般用于照片品质的图

26、像处理，是由许多像小方块一样的“像素”组 成的图形。由其位置与颜色值表示，能表现出颜色阴影的变化。在PHOTOSHOP主要 用于处理位图。位图放大后会失真 ，出现码赛克 。矢量图：也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接 的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它 具有颜色、形状、轮廓、大小和屏幕位置等属性。放大后不失真。,Fireworks8,一、简介。Fireworks 8是用来设计网页图形的应用软件。二、工具: Fireworks Mx中的工具箱分六个部分：选择、位图、矢量、网页、颜色、视图，其中大部分工具的使用方法跟PhotoShop类似

27、。几乎所有的工具都是结合其属性来使用，且可在属性中设置线条颜色、羽化、纹理、填充图案等。使用位图工具绘制得到位图，使用矢量图工具绘制则得到矢量图。,几个实用的操作,一、图像裁剪。1、导入需裁剪的图像。2、选中需要的图像部分并复制。3、新建一个Fireworks文档并粘贴。4、使用橡皮擦和魔术棒等工具对其进行处理。5、将画布设置跟图像一样大小，另存为.jpg或gif文件即可。例如：截取广西民族大学的徽标。,几个实用的操作,二、图像羽化。1、导入需羽化的图像。2、选择位图的“椭圆选框”工具，并在属性中选择边缘“羽化”，设置羽化值的大小，如：30。3、选中图像的边缘一小部分，按delete键即可羽化

28、。4、将画布设置跟图像一样大小，另存为.jpg或gif文件即可。,几个实用的操作三：修补图像。,修补图像所用的工具一般为位图中的“橡皮图章”工具，其属性有：大小：在文本框中或者在弹出的滑块列表中通过拖动滑块来设置大小。边缘：确定笔触的柔和度，100%为硬，0%为软。 按源对齐：当勾选该复选框时，取样指针会垂直和水平移动以与第二个指针对齐。当取消勾选该复选框时，不管将第2个指针移到任何位置或在任何位置上单击，取样区域都是固定的。使用整个文档：当勾选该复选框时，使用该工具进行绘图复制的图像包括所有图层；当取消该复选框时，则只复制当前图层中的图像 不透明度：设置图像的不透明度，可以直接输入要使用的不

29、透明度的数值，或通过单击滑块按钮，在弹出的滑块列表中设置对象的不透明度。 混合模式：在下拉列表中可以设置不同的混合模式选项，应用到【橡皮图章】工具的图像上。,三、修补图像的具体步骤：1、导入需修补的图像。2、选择位图的“橡皮图章”工具，在属性面板中设置相关属性值。3、将光标移动到要复制图像的位置，单击鼠标，该位置就被指定为图像源区域，将光标移动到图像的其他位置，然后按下鼠标左键不要释放，并拖动鼠标，这样就可以看到随着鼠标的移动，在鼠标经过的位置，出现了源区域的图像 4、如果对指定的复制点不满意，希望指定另一个要复制的图像区域，可以按住Alt键，然后单击另一个像素区域，这样就把这个新的位置指定为

30、图像源区域了。 5、修补图像常用的快捷键：Ctrl+加号（减号）：放大、缩小图像按住空格键可以拖动图片。,三、利用Fireworks制作网页图片,步骤：1、将Fireworks中画布的大小设置为网页中要放置图片的表格或单元格的大小。(可适当调整）2、在其中制作图形或将图片导入，并对其进行相应设置操作，如设置边缘的“羽化”属性等。3、将其以Gif格式导出。4、将Gif图片作为表格的背景图片或前景图片导入到网页中。,Fireworks中的动画制作,一、基础知识。1、Fireworks中的动画制作原理跟Flash中的类似，都是利用“帧”来实现。通过不同的帧显示不同的物体或改变其位置、大小等来实现动画

31、效果。利用Fireworks可制作动感的广告横幅、徽标、卡通形象等。2、Fireworks可以将动画作为GIF格式或SWF文件导出，也可以直接将动画导入Flash中进一步编辑。,Fireworks中的动画制作,二、帧使用。1、单击“窗口”“帧”即可将帧面板调出。2、复制帧：直接将要复制的帧拖动到“帧”面板底部的“新建/复制帧”按钮上。3、设置“帧”延时：帧延时决定当前帧的显示事件长度，它以0.01秒为单位,双击“帧延时”即可对齐进行设置。,Fireworks中的动画制作,三、动画的导出。1、单击“文件”“图象预览”，在“格式”中选择“GIF动画”，选择“导出”，输入文件名，确定保存的路径即可。

32、,Fireworks中的动画制作,四、铁路工人的制作。1、新建一画布大小为81*50的Fireworks文件。2、复制两次第一帧，共得到三帧。3、单击第一帧，导入图片Work1,并将其延时设为14。4、单击第二帧，导入work2，并将其延时设为9。5、单击第三帧，导入work3，并将其延时设为14。6、导出Gif动画即可。,考试要注意的知识点,1、网页的各种标签代码及其含义。2、超文本链接 。3、Dreamweaver的层 4、Dreamweaver的表单 。5、Dreamweaver布局中的设计草样 6、Dreamweaver的行为中的事件和动作7、Dreamweaver的时间线 8、用记事本编辑网页的方法。 9、一个html文件应具有的最基本结构 。10、在Dreamweaver8中新建站点的步骤 。11、网页的布局步骤 。12、建立广西民族大学网站的步骤。,