1 / 78

厦门理工学院教师发展中心网页设计培训

厦门理工学院教师发展中心网页设计培训. 主 讲 人：信息中心 周杰 时 间： 2013.04. www.xmut.edu.cn. 01 02 03 04 05. 网页设计基础知识 DreamWare 使用技巧 HTML 常用代码 常见编辑器 Flash 技术处理. 网页设计与基础知识. 网页的基本概念及构成要素 网页制作开发工具 网站建设的基本流程 网页版式与风格设计. 3. 网页的基本概念及构成要素.

rianne
Download Presentation

厦门理工学院教师发展中心网页设计培训

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 厦门理工学院教师发展中心网页设计培训 主 讲 人：信息中心 周杰 时 间：2013.04 www.xmut.edu.cn

  2. 01 02 03 04 05 网页设计基础知识 DreamWare使用技巧 HTML常用代码 常见编辑器 Flash技术处理

  3. 网页设计与基础知识 • 网页的基本概念及构成要素 • 网页制作开发工具 • 网站建设的基本流程 • 网页版式与风格设计 3

  4. 网页的基本概念及构成要素 • Internet：一个全球性的计算机互联网络，中文名称为“因特网”或“国际互联网”，它集现代通信技术和现代计算机技术于一体，是计算机之间进行国际信息交流和实现资源共享的良好平台。 • 由于互联网具备同时传送文字、动画、图形、声音、视频等多媒体的能力，使之成为当今最流行的媒体。而形式各异、内容繁杂的网页是这些信息的载体。 • 那么什么是网页？什么是网站？网页与网站究竟有哪些异同？网页包含哪些基本构成要素？ 带着几个问题来回顾 一些基础知识 4

  5. WWW（World Wide Web，全球信息网，俗称万维网）是Internet上基于客户/服务器体系结构的分布式多平台的超文本超媒体信息服务系统，它是是一个基于超文本（Hypertext）方式的信息检索服务工具，将Internet上各种类型的信息（文本、声音、图形、动画、视频等）集合在一起，用户通过“超级链接”可以快速访问。 • WWW系统已在教育、科学技术、商业广告、公共关系、大众媒体和娱乐等多方面起着愈来愈重要的作用 。 • WWW的应用成为Internet上最受欢迎的应用之一，它的出现极大的推动了Internet的推广。 • WWW获得成功的秘诀在于它制定了一套标准的、 易于人们掌握的超文本开发语言HTML、信息资源的统一定位格式URL和超文本传送通信协议HTTP，用户掌握后可以很容易地建立自己的网站。

  6. HTML：是Hypertext Markup Language的英文缩写，即超文本标记语言，由很多标记组成的一种文本文件，它是构成Web页面（Page）的主要工具，HTML标记可以说明文字、图形、动画、声音、表格、链接等 。 • 使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。 • HTTP： Hyper text Transfer Protocol，超文本传输协议 • URL：统一资源定位器(Uniform Resource Locator，URL)用于描述Internet上资源的位置和访问方式。 如：http://news.163.com/special/00012Q9L/baogaojiedu100306.html http://img9.tianya.cn/Photo/2011/3/2/35107760_26257400.jpg

  7. 网页网站与首页 • 网站 • 网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。有的网站内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个人网站。 • 网页 • 网页（Web Page）是按照网页文档规范编写的一个或多个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，由浏览器翻译并显示出来的就是一个网页。 • 网页(Web pages)是网站的组成部分，制作者可以将需要公布的信息按照一定的方式分类，放在每个网页上，网页里可以有文字、图象、声音及视频信息等。 7

  8. 网页的基本构成要素 • 虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，包括标志（Logo）、导航、广告、按钮、文本、图片、动画、超链接、表单、音视频等，如下图所示，网页设计就是要将上述构成要素有机整合，表达出美与和谐。 8

  9. 1. 文本 网页中的信息也以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。文本的属性包括：字体、颜色、样式、大小及特效等。 2. 图片 用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。 3. 超级链接 超级链接技术是WWW流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。

  10. 4. 动画 在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。网页中的动画主要有两种：GIF动画和Flash动画。其中GIF动画只能有256种颜色，主要用于简单动画和图标。 5. 声音和视频 声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。 视频文件的采用使网页变得精彩而富有动感。视频文件的格式也非常多，常见的格式有RM、MPEG、AVI和DivX等。 6. 导航栏 导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。

  11. 7. 表格 在网页中表格用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。 8. 表单 网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。 9. 其他常见元素 包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。

  12. 网页制作的常用软件 1. Dreamweaver 这是现在使用最广泛的网页编辑工具之一。Dreamweaver是Adobe公司的网页编辑工具，它是一个所见即所得网页编辑器，支持最新的DHTML（Dynamic HTML，动态HTML）和CSS标准。采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。 2. FrontPage FrontPage是Microsoft公司开发的设计网页和管理网站的软件，除了所见即所得的编辑功能之外，也可以直接编辑HTML标记，让设计者可以轻松的编辑网页。FrontPage 2000/2002/2003版本支持最新的网页标准，比如XML，CSS2等等。 12

  13. 常用网页图形制作软件 1. Fireworks Fireworks是Adobe公司发布的一款专为网络图形设计的图形编辑软件，使用Fireworks都不仅可以轻松地制作出尺寸较小的图形、GIF动画。 2. Photoshop Photoshop是Adobe公司推出的功能强大的平面图像处理软件，Photoshop在图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等各行各业的广泛应用，它已成为许多涉及图像处理的行业的事实标准。 3. CorelDRAW CorelDraw是加拿大Corel公司开发的著名绘图软件包，它既是一个大型的矢量图形制作工具软件，也是一个大型的工具软件包。 13

  14. 常用网页动画制作软件 1. Flash Flash是Adobe公司开发的一款优秀的网页动画开发软件，从简单的动画到复杂的交互式Web应用程序，它使用户可以创建任何作品。通过添加图片、声音和视频，可以使Flash应用程序媒体丰富多彩。 2. Ulead Gif Animator Ulead GIF Animator是Ulead（友立）公司发布的一个动画GIF制作的工具，网页设计者可以快速地轻松创建和编辑网页动画文件。 3. Swish 虽然网上的动画早已是flash的天下，但Flash的设计太过繁琐，Swish是一款非常方便的Flash制作工具，可以实现简单地在网页中加入Flash动画。 14

  15. 导航设计 • 导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。 • 导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式。 • 导航设计应遵循以下原则： • 让用户了解当前所处的位置； • 让用户能根据走过的路径，确定下一步的前进方向和路径； • 不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以最佳的路径到达这些信息； • 让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径； • 让用户清楚地了解整个网站的结构概况，产生整体性感知； • 对使用频率不同的信息作有序处理。

  16. 网页导航 16

  17. 网页风格设计 • 同样的版式设计，标志不同，配色不同，文字样式不同，也可以呈现出多种不同的网页风格。 • 风格设计涉及到：标志内容，网页配色、文字艺术等方面

  18. 实例分析 1．网站描述 这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉，这与公司的风格相一致。导航设计简洁利落，很值得学习借鉴。 2．布局 网页布局采用的是比较常见的分栏式结构，A为网站的Logo所在的区域；B为网站主菜单所在的区域；C为搜索与其他公共功能所在的区域；D为网站的内容区域，主要由文字和图片组成；E为版权信息所在的区域。 3．配色 网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD” 。除此之外，网页文字的配色主要以白色和蓝色为主。

  19. 19

  20. 01 02 03 04 05 网页设计基础知识 DreamWare使用技巧 HTML常用代码 常见编辑器 Flash技术处理

  21. 工具地址 • FTP://210.34.213.24/ • Username:webuser • Password:webuser123

  22. Dreamweaver8工作界面 1)、Dreamweaver的窗口构成 a.初始界面 b.工作界面 2)菜单栏和工具栏 a.插入工具栏 有“菜单”形式和“制表符”形式的两种 b.文档工具栏 3)、视图方式 HTML代码视图、拆分视图、设计视图 4)、属性面板 5)、面板组 注意：面板组的打开和隐藏

  23. 窗口界面组成（设计界面） 菜单栏 插入面板 工具栏 文档窗口 面板组 属性面板

  24. 窗口组成（代码界面） 代码窗口

  25. 插入工具栏 菜单形式的插入面板 制表符形式的插入面板

  26. 文档工具栏 文档工具栏 标准工具栏

  27. 属性面板

  28. 面板组和相应的下拉菜单 面板组 下拉菜单

  29. 3. Dreamweaver 8的基本操作 1)新建网页 2)网页浏览 3)网页的保存 4)网页文档的打开 5)设置页面属性

  30. 1) 新建网页 a.创建新文档 方法1：在初始界面中单击“创建新项目”下边的“HTML” 方法2：“文件”→“新建”命令 方法3：双击文件面板中的文档名 b.根据模板创建文档 模板是已经布局设计好的网页结构，你只需在适当的位置上填入实际页面元素

  31. 2)网页的浏览 • 方法1：单击“浏览”按钮 • 方法2：按F12功能键 • 方法3：文件→在浏览器预览→ IExplore6.0 • 方法4：在相应的文档上双击网页文档

  32. 3)网页的保存 • 方法1：文件→保存 • 方法2：文件→另存为

  33. 4)、网页文档的打开 • 方法1：文件→打开 • 方法2：在文件面板中，双击指定的文档

  34. 5)设置页面属性 步骤如下 • 新建或打开一网页 • 单击修改→页面属性（单击属性面板中“页面属性按钮） • 在“页面属性”对话框中设置 分为以下几类： • 外观 • 链接 • 标题 • 标题/编码 • 跟踪图像

  35. 01 02 03 04 05 网页设计基础知识 DreamWare使用技巧 HTML常用代码 常见编辑器 Flash技术处理

  36. 常用的几个HTML标签 • <table><tr><td></td></tr></table> • Border: width: height: font-size: • Font-family: • Margin: • Line-height: • <p></p><br/><span></span> • <b></b><strong></strong> • <p align=“center”></p>

  37. 01 02 03 04 05 网页设计基础知识 DreamWare使用技巧 HTML常用代码 常见编辑器 Flash技术处理

  38. DreamWare常用技巧 • 一、如何插入图文混排 • 二、如何插入表格 • 三、如何插入超链接、热点、锚 • 四、如果从WORD拷文章发布 • 五、如何插入音频、FLASH动画 • 六、如何快速的生成自己的精品课程网 • 七、一些好的素材网

  39. 常见编辑器 • FCKEditor • EwebEditor

  40. 一、图文混排

  41. 二、插入表格

More Related