项目一 网页设计与制作基础

3.5 声音和视频
• 声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格 式非常多，常用的有MIDI、WAV、MP3和AIF等。
• 很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而 MP3和RM格式的声音文件则需要专门的浏览器播放。
3.6 表格
• 在网页中表格用来控制网页中信息的布局方式。
4.3 Photoshop图像处理软件
• Photoshop是Adobe公司推出的功能强大的平面图像处理软件， Photoshop在图像编辑、桌面出版、网页图像编辑、广告设计、婚 纱摄影等各行各业的广泛应用，它已成为许多涉及图像处理的行业 的事实标准。
4.4 Flash动画设计软件
• Flash是Macromedia公司开发的一款优秀的网页动画开发软件，从 简单的动画到复杂的交互式Web应用程序，它使用户可以创建任何 作品。通过添加图片、声音和视频，可以使Flash应用程序媒体丰 富多彩。
2.网页的版块结构
Internet中的网页由于涉及和制作的 差别而千变万化，但通常由几大版块 组成。
2.1 网站LOGO
• 通常网站为体现其特色与内涵，涉及并制作一个LOGO图像放置在 网站的左上角或其他醒目的位置。
• 企业网站常常使用企业的标志或者注册商标。 • 一个设计优秀的LOGO可以给浏览者留下深刻的印象，为网站和企
• 超链接是指从一个网页指向一个目标的连接关系，这个目标可以是 另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、 一个电子邮件地址、一个文件，甚至是一个应用程序。
3.4 动画
• 在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成 了动画形式。
• 网页中的动画主要有两种：GIF动画和Flash动画。其中GIF动画只 能有256种颜色，主要用于简单动画和图标。
3.1 文本
• 网页中的信息以文本为主。与图片相比，文字虽然不如图片那样能 够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。
3.2 图片
• 用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中 使用最广泛的是GIF和JPEG两种格式。
3.3 超链接
• 超链接在本质上属于一个网页的一部分，是一种允许用户同其他网 页或站点之间进行连接的元素。
• 包括两个方面：一是使用行和列的形式来布局文本和图像以及其他 的列表化数据；二是可以使用表格来精确控制各种网页元素在网页 中出现的位置。
3.7 表单
• 网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信 息发送到网页设计者设置的目标端。这个目标可以是文本文件、 Web页、电子邮件，也可以是服务器端的应用程序。
首页
热门旅游
精彩游记
旅游攻略
在路上
美图展示
国
国
内
外
游
游
2、 如何设计网页
网页设计的流程 网页设计的流程可以分为两部分： 第一是站点的规划及草图的绘制。 第二是网页的设计与制作，其中设计网页的第一步是设计版面布局， 接着就是通过软件的操作，将设计的蓝图变为现实。
1.1 网站
• 网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它 包含一个或多个网页，这些网页以一定的方式链接在一起，成为一 个整体，用来描述一组完整的信息或达到某种期望的宣传效果。有 的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页 面，如个人网站。
1.2 网页
• 网页（Web Page）实际上是一个文件，网页里可以有文字、图像、 声音及视频信息等。网页可以看成是一个单一体，是网站的一个元 素。
1、网站规划
网站需求分析
明确设计开发网站的目的和用户需求，从而做出切实可行的设计计划。要弄清开 发的网站有哪些类型的用户使用，各个用户又有哪些不同的需求，网站的功能是 什么等等，为网站设计提供可靠的依据。
确定网站主题和内容
• 主题是网站所要表达的主要内容。 • 主题是网站的灵魂，它决定了网站的内容和风格，内容要为主题服务，尽量选 用与主题相关的内容。 • 主题定位时一般要选择自己最擅长的题材，主题要小而精，切忌兼容并包，主 题贵在创新。例如，旅游、娱乐休闲、体育、新闻、教育、医疗、时尚等。要求 网站的主题鲜明突出，要点明确
• Flash被称为“最灵活的前台”，其独特的编译方式和跨平台的能 力，广泛的应用（软件、游戏、Web应用程序、多媒体娱乐等多方 面），使之越来越成为一种重要的工具。
4.5 Fireworks网页图像处理软件
• Fireworks是Macromedia公司发布的一款专为网络图形设计的图形 编辑软件，使用Fireworks都不仅可以轻松地制作出尺寸较小的图 形、GIF动画。
• 问题：首页和主页有区别吗？ • 通常网站为方便浏览者查找和分类浏览网站的信息，会将信息分类，
并建立一个网页以放置网站信息的目录，即网站的主页。 • 并非所有的网站都将主页设置为首页，有的网站喜欢在首页放置一
段进入动画，并将主页的链接放置在首页上，浏览者需要单击首页 的链接进入主页。
1.4 网页的表现形式
业形象宣传起到十分重要的作用。
2.1 网站LOGO
2.2 导航条
• 导航条是网页的重要组成元素。设计的目的是将站点内的信息分类 处理，然后放在网页中以帮助浏览者快速查找站内信息。
• 导航条的形式多种多样，包括文本导航条、图像导航条以及动画导 航条等。
• 有些使用特殊技术（例如Flash、JavaScript、CSS）制作的导航 条还可以具有下拉菜单的功能。
• 如果将Photoshop比作全能的图像处理大师的话，Fireworks就是 精于网页图像处理的专家。它在矢量图形的处理方面有其独特之处。
• 在Web应用方面，Fireworks是最早提供切片功能的图像处理软件。 Fireworks支持在图像中绘制热区并直接生成网页文档，并且具备 简单的GIF动画制作能力，同时支持将动画转换为Flash文件并嵌入 到网络中播放。
熟练使用各种网页设计以及图像、动画处理 制作软件，是一个网页设计师必须掌握的技 能。
4.1 文本编辑器
• 不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写 HTML。比如写字板、word等，但保存的时候必须保存为.html 或.htm格式。
• 有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能， 支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、 JavaScript、VBScript等多种语法的着色显示。
2.5 版尾或版权版块
• 版尾，即页面最低端的版块。
• 这部分位置通常放置网页的版权信息，以及网页所有者、设计者的 联系方式等。
• 有的网站也将网站的友情链接以及一些附属的导航条放置在这里。
3.网页的基本构成要素
虽然网页种类繁多，形式内容各有不同。但网页 的基本构成要素大体相同，网页设计就是要将构 成要素有机整合，表达出美与和谐。
项目一 夯实基础----网页设计与制 作基础
掌握网页设计基本概念 了解网页的基本版块结构与网页的基本元素
了解网页制作工具以及相关技术 了解网站制作步骤
掌握网页设计内容与方法
任务1：了解网页相关基础知识
什么是网页、网站？网页的板块 结构？网页包含哪些基本构成要 素？
1、网站与网页概述
什么是网页、网站？什么是首页， 什么是主页？
• 平常我们所听说的“新浪”、“搜狐”、“网易Hale Waihona Puke Baidu等，即是俗称的 “网站”。而当我们访问这些网站的时候，最直接访问的就是“网 页”了。这许许多多的网页则组成了整个站点，也就是网站。
1.2 网页
1.3 首页
• 首页(Home page)，它是一个单独的网页，和一般网页一样，可以 存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点 和汇总点。例如，当浏览者输入搜狐网站地址“www.sohu.com”后 出现在第一个页面，即sohu网站的首页。
• 表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置 来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。
3.8 其他常见元素
• 包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀 网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有 着不可忽视的作用。
4.网页设计软件
规划网站的整体风格
• 网站的整体风格是网站整体给浏览者的综合感受。它应该是网站与 众不同的特色，包括网站页面字里行间透露出作者或企业的文化品 味和行事风格。整体风格应与网站的主题相匹配。
• 网站风格通过各个页面体现，包括页面的版式结构、色彩搭配、图 像动画等。在各页面中最主要的是主页。
规划网站结构
5.网页制作主要相关技术
Html、CSS、JavaScript是制作网页的三大 法宝。他们在网页设计中扮演了重要的角色。 Html是基础架构，CSS用来美化页面，而 JavaScript用来实现网页的动态性、交互性。
5.1 CSS
– CSS即层叠样式表（Cascading Style Sheet）。在主页制作时采 用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它 效果实现更加精确的控制。
HTML=内容 CSS=表现
– CSS带来的好处： • CSS使页面载入更快； • CSS可以降低网站的流量费用； • CSS使设计师在修改设计时更有效率，而代价更低； • CSS使整个站点保持视觉的一致性；
5.2 JavaScript
– JavaScript是由 Netscape公司开发的一种脚本语言，可以被嵌入 HTML文件中，它是一种基于对象和事件驱动，并具有安全性能的 脚本语言。
• 制作网站之前最好先对各个页面文件的存放位置、各关键网页之间 的关联。
• 在存放位置上，尽量不要将所有的文件都存放在根目录下，可根据 网站中各个文件的性质决定是否分类存放到不同的文件夹中，如图 片文件、动画文件、脚本文件、某一栏目的文件、公共文件等。目 录的层次也不宜过深，最好不要超过四层。
驴行天下网站
2.2 导航条
2.3 Banner
• Banner的中文意思是横幅。Banner的内容通常为网页中的广告。 • 在网页布局中，大部分网页将Banner放置在与导航条相邻处，或者
其他醒目的位置以吸引浏览者浏览。
2.3 Banner
2.4 内容版块
• 网页的内容版块是整个页面的组成部分。
• 设计人员可以通过该页面的栏目要求来设计不同版块，每个版块可 以有一个标题内容，并且每个内容版块主要来显示不同文本信息。
– 在HTML基础上，使用JavaScript可以开发交互式Web网页，可 以回应使用者的需求事件而不需要通过网络来回传输资料。
– 简单地说，当用户输入一项信息时，不需要先将信息传给服务器 处理，再传回来，而是可以直接被客户端的程序处理。
任务2：网站建设基本流程
规范的网站建设应遵循一定的流程，合理的流程可 以最大限度地提高工作效率。网站建设流程主要由 规划设计阶段、实施发布阶段、评价阶段组成。
• 例如：EmEditor、EditPlus、UltraEdit
4.2 Dreamweaver网页设计软件
• 这是现在使用最广泛的网页编辑工具之一。 • Dreamweaver是Macromedia公司推出的网页编辑工具。 • 它是一个所见即所得网页编辑器，支持最新的DHTML（Dynamic
HTML，动态HTML）和CSS标准。采用了多种先进技术，能够快 速高效地创建极具表现力和动感效果的网页，使网页创作过程变得 非常简单。 • 另外还有Microsoft公司开发的FrontPage也是设计网页和管理网站 的软件。除了所见即所得的编辑功能之外，也可以直接编辑HTML 标记，让设计者可以轻松的编辑网页。
• 静态网页：客户端与服务器端不发生交互 访问者只能被动地浏览网站建设者提供的网页内容。其特点：
网页内容不会发生变化，除非网页设计者修改了网页的内容。不能 实现和浏览网页的用户之间的交互。信息流向是单向的。 • 动态网页：客户端与服务器端要发生交互
动态网页是指浏览器可以和服务器数据库进行实时数据交流的 交互网页，而不是加上了动画等效果的动感网页。动态网页技术的 网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用 户管理、订单管理等。信息流向是双向的。