网页设计与制作
课程性质与目的
通过本课程的教学，让已学习了计算机基础知识，具有一定计算机操作技能的本科生进一步提高计算机应用能力。使学生通过本课程的教学，更深入了解计算机网络知识和WWW网上丰富多彩的信息是如何制作的，并掌握怎样在Internet上建立自己的网站，将信息发布到Internet上去的技能。
课程基本要求
熟悉计算机网络知识，WWW基本概念，网络浏览器的使用和网页设计基本方法。
能在国际互联网上浏览查询资料。了解计算机网络资源是如何以网页的形式发布在计算机网络上的。
掌握网络语言的用法，能够使用网语HTML制作网页。
能够使用可视化网页设计软件Dreamweaver等设计制作网页。
教学内容
www简介与网站建设概论
用HTML语言制作网页
用可视化软件制作网页
简单图片处理与简单动画制作
网站的发布与维护
课时、教材与参考资料
总学时为20学时
教材：《网页设计与制作教程》(第4版），刘瑞新 等，机械工业出版社
参考资料：
网页设计与制作，詹青龙 ，清华大学出版社
多媒体系列教程：网页设计制作（全集）
第一篇
1 Internet 和 WWW
Internet简介
WWW简介
2 网站建设概论
网站概论
网站可视化设计概论
网页制作工具概述
1 Internet 和 WWW
教学内容:
什么是Internet (自学)
Internet 起源 (自学)
Internet在中国 (自学)
Internet的功能与应用 (自学)
WWW的起源
Web的特点和结构
WWW的基本概念 (网页、网站、超文本
和超链接、 Web标准等）
WWW是“World Wide Web”的简称，也称为万维网或全球信息网。WWW是一种建立在Internet上的信息资源网络。WWW是一种软件，是Internet上支持WWW协议和超文本传输协议的客户机和服务器的集合。 WWW将Internet上所有的资源（包括文字、图片、声音、视频等）采用统一的资源定位方式（URL）串连起来,在Internet上形成庞大的信息网。
在客户端，访问者只需用浏览器（browser）便可轻松地访问任何角落的Internet资源。
WWW简介
构成WWW最基本的元素是网页，许许多多的网页链接在一起就组成了一个个WWW站点，而这个站点的首页被称为主页（homepage）。
WWW简介
服务器
网站1
服务器
网站2
浏览器
浏览器
浏览器
浏览器
万维网
WWW简介
Web服务器
浏览器
Netscape
IE浏览器
WWW服务器：称为Web site,是提供
www服务的一台计算机（服务器），
其中安装了WWW server软件，能够
响应用户浏览器的请求，传送网页。
统一资源定位器 URL
URL 称为统一资源定位器，是各网页在 Internet 上的地址，也称为网址，它表示 Internet 上各种数据资源的位置。
网络浏览器是阅读WWW上信息资源的一个软件
Netscape
IE
浏览器
Internet Explorer
Firefox
Chrome
Opera
其中使用最广泛的是Microsoft出品的Internet Explorer 。
IE的界面
标题栏
工具栏
菜单栏
地址栏
状态栏
浏览窗口
IE的使用
浏览网页
“停止”按钮
前进和后退
刷新页面
改变文字大小
选择编码
全屏幕显示
查看源文件
打开多个窗口
用菜单栏上的“文件”→“新建”→“窗口”，会打开一个新的浏览器窗口。
一般情况下，打开四、五个窗口可以充分利用系统资源，而且通过调整窗口的大小和位置还可以同时浏览。
主页、临时文件和历史记录
浏览器在打开时自动调入的网页称为“主页”，主页可以通过“工具”→“Internet选项”打开Internet选项对话框，在“常规”选项卡的“主页”栏设置.
收藏夹的使用
使用菜单“收藏”→“添加到收藏夹”打开添加到收藏夹对话框。
使用菜单“收藏”→“整理收藏夹”打开收藏夹整理对话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。
关闭图片显示
在网络速度较慢时，不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”→“Internet选项”打开Internet选项对话框，在“高级”选项卡中可以对浏览器的工作方式进行设置
关闭自动完成功能
通过工具→Internet选项，打开Internet选项对话框，在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框 。
搜索引擎的使用
1、使用浏览器的“搜索”按钮
2、使用专门的搜索引擎
(百度)
(Google)
(雅虎)
(搜狐)
网页
网页
网页（Web Page）实际上是一个文件，网页里可以有文字、图像、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。
平常我们所听说的“新浪”、“搜狐”、“网易”等，即是俗称的“网站”。而当我们访问这些网站的时候，最直接访问的就是“网页”了。这许许多多的网页则组成了整个站点，也就是网站。
网站
网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。
首页
首页(Home page)，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点。例如，当浏览者输入搜狐网站地址“”后出现在第一个页面，即sohu网站的首页。
问题：首页和主页有区别吗？
通常网站为方便浏览者查找和分类浏览网站的信息，会将信息分类，并建立一个网页以放置网站信息的目录，即网站的主页。
并非所有的网站都将主页设置为首页，有的网站喜欢在首页放置一段进入动画，并将主页的链接放置在首页上，浏览者需要单击首页的链接进入主页。
WWW属于“网”状结构，这种结构有一个中心，称为主页，这张主页上又伸出若干个链与其它的网页链接在一起。这就是WWW的核心技术——超文本技术。
绿扬小屋
心灵独白
艰难历程
艺术世界
学子生涯
文学天地
超文本文件中包含有许多指向其它文件和资源的指针，这些指针可以是文字、图象、声音或影像，这些称为“超链接”
网页的超文本和超媒体
网页的表现形式
静态网页：客户端与服务器端不发生交互
访问者只能被动地浏览网站建设者提供的网页内容。其特点：
网页内容不会发生变化，除非网页设计者修改了网页的内容。不能实现和浏览网页的用户之间的交互。信息流向是单向的。
动态网页：客户端与服务器端要发生交互
动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页，而不是加上了动画等效果的动感网页。动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息流向是双向的。
2 网站建设概论
教学内容:
网站的种类
网页的版块结构
网页的基本构成要素
网页制作主要相关技术
网站建设基本流程
网站制作工具
网站种类
1.门户网站
2.个人网站
3.专业网站
4.职能网站
1.门户网站
这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（）、网易（）等。
2.个人网站
个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。
3.专业网站
这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。
4.职能网站
职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（）、卓越网（）和当当网上书店（）等。
网页的版块结构
Internet中的网页由于涉及和制作的差别而千变万化，但通常由几大版块组成。
1 网站LOGO
2 导航条
3 Banner
4 内容版块
5 版尾或版权版块
1 网站LOGO
通常网站为体现其特色与内涵，涉及并制作一个LOGO图像放置在网站的左上角或其他醒目的位置。
企业网站常常使用企业的标志或者注册商标。
一个设计优秀的LOGO可以给浏览者留下深刻的印象，为网站和企业形象宣传起到十分重要的作用。
1 网站LOGO
2 导航条
导航条是网页的重要组成元素。设计的目的是将站点内的信息分类处理，然后放在网页中以帮助浏览者快速查找站内信息。
导航条的形式多种多样，包括文本导航条、图像导航条以及动画导航条等。
有些使用特殊技术（例如Flash、JavaScript、CSS）制作的导航条还可以具有下拉菜单的功能。
2 导航条
3 Banner
Banner的中文意思是横幅。Banner的内容通常为网页中的广告。
在网页布局中，大部分网页将Banner放置在与导航条相邻处，或者其他醒目的位置以吸引浏览者浏览。
3 Banner
4 内容版块
网页的内容版块是整个页面的组成部分。
设计人员可以通过该页面的栏目要求来设计不同版块，每个版块可以有一个标题内容，并且每个内容版块主要来显示不同文本信息。
5 版尾或版权版块
版尾，即页面最低端的版块。
这部分位置通常放置网页的版权信息，以及网页所有者、设计者的联系方式等。
有的网站也将网站的友情链接以及一些附属的导航条放置在这里。
网页的基本构成要素
虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，网页设计就是要将构成要素有机整合，表达出美与和谐。
1 文本 2 图片 3 超链接 4 动画
5 声音和视频 6 表格
7 表单 8 其他常见元素
1 文本
网页中的信息以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。
2 图片
用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。
3 超链接
超链接在本质上属于一个网页的一部分，是一种允许用户同其他网页或站点之间进行连接的元素。
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
4 动画
在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
网页中的动画主要有两种：GIF动画和Flash动画。其中GIF动画只能有256种颜色，主要用于简单动画和图标。
5 声音和视频
声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。
很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。
6 表格
在网页中表格用来控制网页中信息的布局方式。
包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。
7 表单
网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。
表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。
8 其他常见元素
包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。
网页制作主要相关技术
Html、CSS、JavaScript是制作网页的三大法宝。他们在网页设计中扮演了重要的角色。Html是基础架构，CSS用来美化页面，而JavaScript用来实现网页的动态性、交互性。
1 CSS
CSS即层叠样式表（Cascading Style Sheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
HTML=内容
CSS=表现
CSS带来的好处：
CSS使页面载入更快；
CSS可以降低网站的流量费用；
CSS使设计师在修改设计时更有效率，而代价更低；
CSS使整个站点保持视觉的一致性；
2 JavaScript
JavaScript是由 Netscape公司开发的一种脚本语言，可以被嵌入HTML文件中，它是一种基于对象和事件驱动，并具有安全性能的脚本语言。
在HTML基础上，使用JavaScript可以开发交互式Web网页，可以回应使用者的需求事件而不需要通过网络来回传输资料。
简单地说，当用户输入一项信息时，不需要先将信息传给服务器处理，再传回来，而是可以直接被客户端的程序处理。
网站建设基本流程
规范的网站建设应遵循一定的流程，合理的流程可以最大限度地提高工作效率。网站建设流程主要由规划设计阶段、实施发布阶段、评价阶段组成。
网站设计的目标、主题、创意、风格
网站面向的对象（提高点击率）
根据对象所需的信息确定网站的主题
有突出的主题风格和鲜明的个性
创意体现在网站的版面布局 、信息量、动静效果 、色彩搭配与页面图文编排 、整体链接效果等。
使用自己创作的多媒体特效
网站的规划与设计原则
网站的规划与设计一般应遵循以下三个原则：
最大限度地满足用户需要；
最有效地进行资源利用；
使用方便，界面友好，运行高效；
个人主页 / 欢迎页面
情况简介
经历 / 业绩
兴趣爱好
成长经历
学历与学位
主要业绩
个人主页 / 欢迎页面
情况简介
经历 / 业绩
兴趣爱好
成长经历
学历与学位
主要业绩
网站策划书应该尽可能地涵盖网站规划中的各个方面，写作要科学、认真、实事求是。以最常见的企业网站为例，介绍网站策划书的撰写要点。
1．前期调研分析
2．网站的功能定位
3．网站技术解决方案
4．网站内容规划
5．网页设计
6．网站维护
7．网站测试
8．网站发布与推广
9．网站设计日程表
10．费用明细
网站策划书撰写要点
常用网页制作软件
1 网页制作工具
网页制作工具分为“可视化”和“非可视化”两大类。“可视化”网页编辑器的优点是直观、使用方便、容易学习，在其中制作网页与在Word中编辑相似，缺点是难以精确达到与浏览器完全一致的显示效果。 “非可视化”的网页编辑器，因为是用HTML代码来设计的，所以控制精确，但是，工作效率太低。
1．Dreamweaver
2．FrontPage
3．Adobe GoLive
4．HomeSite
5．Visual Studio 2005/2008
2 网页图形图像处理工具
使用网页图形图像处理工具可以设计、处理适合网页的图形图像。
1．Fireworks
2．Photoshop
3．CorelDRAW
常用网页制作软件
3 网页动画制作与特效工具
随着网络速度的提高，越来越多的网页中使用了动画效果，这些动态显示的画面不仅吸引了浏览者的注意力，而且也给原本较呆板的画面增添了不少生机。
1．Flash
2．Ulead GIF Animator
常用网页制作软件
4 网页上传工具
制作好的网页要上传到提供主页空间的服务器后，才能让浏览者访问。上传工具选择合适与否将影响对网站更新维护的效率。
1．CuteFTP
2．FlashFXP
3．LeapFTP
4．其他上传工具
（1）UploadNow!上传工具
（2）WS-FTP上传工具
Dreamweaver软件自身也具有上传网页的功能。
常用网页制作软件
5 网页设计工具的发展动向
2005年4月18日，全球知名的应用软件公司Adobe以34亿美元的价格收购了Macromedia公司，这次收购代表着多媒体产业领域的融合。随着Adobe公司对Macromedia公司进行全新的整合，势必推出更加强大的图形网页应用软件，为图形处理与网页制作开创出新的空间。目前网页制作中的HTML代码与图片都是单独制作的，需要美工人员与网页制作人员共同完成，但是，随着两家公司的合并，极有可能推出新的软件，实现图片与网页的一体化操作，提高网页制作的效率。
另外，Fireworks和ImageReady在未来的地位，也很有可能被已经强势的Photoshop和Flash取代。
常用网页制作软件
