第一讲 网页设计与制作基础.ppt

1、网页设计与制作,河北北方学院网络中心,课程简介,随着计算机、网络与通讯技术的发展，Internet已经开始改变人们的生活、学习和工作方式，网站成为宣传信息、推广产品等活动的流行方式。掌握Web技术、学会Web网页制作和Web站点管理等知识 ，已经成为现代人必备的一种技能。,学习目的,工作需要 个人爱好 投资方向 学习网页设计课程，了解WEB技术，对我们将来的学习、工作大有裨益。,课程内容,1. 网页设计基础知识 2. HTML语言 3. Dreamweaver 网页设计 4. ASP动态网页设计初步 5. 网页设计艺术 6. 网站制作实例,课程目标,1. 熟练掌握网页设计工具的操作方 法（HT

2、ML语言、网页三剑客） 2. 掌握在Internet中建立一个站点 的全过程（网站应用软件） 3. 了解动态网页设计技术，为后续 的网络编程奠定基础。 4. 培养提高造型、配色能力，训练 对形式和色彩规律的掌握和应用。,前导课程与后续课程,前导课程： 信息技术基础、计算机导论 后续课程： ASP与网络数据库技术 动态网页与电子商务,课时分配,总课时:36课时 理论课时:36课时 上机课时:36课时,参考教材,网络基础知识： Html:HTML4.0从入门到精通，邱仲潘译，电子工业出版社 网页制作工具： Dreamweaver 中文版入门与提高，张永宝等著，清华大学出版社,第一讲 网页设计基础（

3、一）,Internet的基础知识 WWW与网页 网页制作软件和相关工具 Dreamweaver8 应用基础,Internet的基础知识,1.网络的形成和发展 2.网络的分类 3.网络的构成 4.IP地址和域名 4.什么是internet,1.网络的形成和发展,什么是计算机网络？ 分散在不同地点的多台计算机、终端和外部设备 通过通信线路互联在一起 实现资源共享（包括软件、 硬件、数据等）,计算机网络的发展,第一代计算机网络 20世纪50年代中后期 地理上分散的多个终端 通过通信线路 连接到一台中心计算机上 以传输信息为目的而连接起来，以实现远程信息处理或进一步达到资源共享的计算机系统,主机,通信

4、装置,通信装置,终端,通信线路,计算机网络的发展,第二代计算机网络 20世纪60年代后期 实现远程资源共享 以通信子网为中心 分组交换网络 分层的网络协议 1969年出现的ARPAnet是第一个现代意义上的计算机网络 以能够相互共享资源为目的，互连起来具有独立功能的计算机的集合体,互联设备,工作站,NOS 服务器,打印机,传输介质,计算机网络的发展,第三代计算机网络 网络应用越来越广泛、网络规模越来越大、通信更加复杂 各大计算机公司纷纷制定了自己的网络技术标准 1977年，ISO开始制定开放系统互联参考模型 具有统一网络体系结构，并遵循国际标准的开放式和标准化的网络,计算机网络的发展,第四代计

5、算机网络 20世纪80年代末到现在 以互联网为代表 以太网的高速发展 下一代计算机网络 多种业务的融合 统一协议、统一网络平台、统一管理,网络体系的演变过程,40年代 中期,60年代 初期,70年代 初期,80年代 初期,90年代 初期,90年代 末期,21世纪,网络概念萌芽阶段,提出分组交换概念,稳步发展与应用,提出OSI参考模型,体系结构成熟发展,Internet广泛应用,后TCP/IP模型时代,2.计算机网络的分类,依据网络的传输介质 有线网络 无线网络 依据网络的作用范围 局域网LAN 城域网MAN 广域网WAN,网络传输介质,双绞线,非屏蔽双绞线,屏蔽双绞线,网络传输介质,同轴电缆,

6、网络传输介质,光纤,包层,纤芯,入射角,折射角,折射角大于入射角,光波在纤芯中传播,网络传输介质,无线传输,卫星,蝶形天线,计算机,LAN、MAN、WAN,LAN （局域网） 传输速度通常在10Mb/s1000Mb/s之间 通常是针对于一座建筑物内 MAN （城域网） 一个较大的地理范围内 传输速度相对要慢的多 WLAN（广域网） IEEE 802.11标准,Internet的基础知识,3.网络的构成,计算机网络的硬件与软件组成 网络的主体设备,大多数时候服务器是网络的核心 386以上档次的电脑都可作为组网的工作站。,网络适配器(网卡) 网卡通过总线与计算机设备接口相连，另一方面又通过电缆接口

7、与网络传输媒介相连。,在PC机中主要使用PCI总线结构的网卡和 USB接口的网卡 安装网卡后，还要进行协议的配置。例如，TCP/IP协议。,网络的连接设备,网络传输媒介的中间节点，具有信号再生转发功能。,集线器（HUB）,网络操作系统,网络操作系统：具有网络功能的操作系统,网络操作系统,对等网 网络中的所有计算机都具有同等地位，没有主次之分。任何一个节点机所拥有的资源都作为网络资源，可被其他节点机上的用户共享。 客户机/服务器模式 网络中有几台计算机专门充当服务器，为整个网络提供共享资源和服务。,Novell Netware,什么是协议,什么是协议？ 为了使数据可以在网络上从源传递到目的地，网

8、络上所有设备需要“讲”相同的“语言” 描述网络通信中“语言”规范的一组规则就是协议 例如：两个人交谈，必须使用相同的语 言，如果你说汉语，他说阿拉伯语 数据通信协议的定义 决定数据的格式和传输的一组规则或者一组惯例,协议分层21,网络通信的过程很复杂 数据以电子信号的形式穿越介质到达正确的计算机，然后转换成最初的形式，以便接收者能够阅读 为了降低网络设计的复杂性，将协议进行了分层设计,TCP（Transmission Control Protocol）传输控制协议用于保证被传送信息的完整性。 IP（Internet Protocol）网际互连协议负责将消息从一个地方传送到另一个地方。,TCP/

9、IP资料： ,TCP/IP协议,IP地址和域名系统,如何找到网络上的任何一台计算机？ IP地址 ： (身份证号码） 域名 ： （姓名） DNS系统： （公安机关查询系统）,IP地址的作用,,,,用来标识一个节点的网络地址,2进制,10进制逢10升位 包含数字0、1、2、3、4、5、6、7、8、9 2进制逢2升位 只包含数字0、1,210进制转换,10进制的8转换成2进制数是多少？ 因此，10进制的8转换成2进制为1000,8,2,4,2,2,2,1,0 0 0 1,余数,102进制转换,2进制的1001对应10进制数是多少？ 因

10、此，2进制的1001是10进制中的9,1 0 0 1,23 22 21 20,23 0 0 20 819,IP地址的组成,点分十进制,最大值,10101100,二进制,十进制例子,二进制例子,255,255,255,255,Network,Host,1286432168421,11111111,11111111,11111111,11111111,00010000,01111010,11001100,172,16,122,1,8,9,16,17,24,25,32,1286432168421,1286432168421,1286432168421,32bits,202,255,10101100,

11、IP地址的分类,DNS采用分层次结构，入网的每台主机都可以有一个类似下面的域名：,主机名.机构名.顶层域名,从左到右，域的范围变大。具有实际含义，比IP地址好记。 Internet上几乎在每一子域都设有域名服务器，服务器中包含有该子域的全体域名和地址信息。Internet每台主机上都有地址转换请求程序，负责域名与IP地址转换。, 中国教育部,域名系统DNS,分为类型名和区域名两类。类型名共14个，区域名用两个字母表示世界各国和地区。,顶级域名,可以直接使用中文命名域名。 中国互联网络信息中心网站：,中国互联网络的域名体系,IP地址和域名系统,IPV4 与 IPV6 现有的互联网是在IPv4协议

12、的基础上运行。IPv6是下一版本的互联网协议，它的提出最初是因为随着互联网的迅速发展，IPv4定义的有限地址空间将被耗尽，地址空间的不足必将影响互联网的进一步发展。为了扩大地址空间，拟通过IPv6重新定义地址空间。 IPv4采用32位地址长度，只有大约43亿个地址，估计在20052010年间将被分配完毕，而IPv6采用128位地址长度，几乎可以不受限制地提供地址。 按保守方法估算IPv6实际可分配的地址，整个地球每平方米面积上可分配1000多个地址。在IPv6的设计过程中除了一劳永逸地解决地址短缺问题以外，还考虑了在IPv4中解决不好的其它问题。,Internet的基础知识,3.Interne

13、t的功能： www（上网，下载MP3，Flash，图片，文字） E-mail（申请电子信箱，收发邮件） FTP（文件传输） Telnet（远程登陆） BBS（留言区）,友好的图形界面及简单的操作方法,可以浏览从文章、图像、到声音,乃至动画等各种不同形式的信息 新闻 搜索 下载 文学 图片 音乐 电影 聊天 邮件 资料 博客 论坛 电子商务 在线学习,WWW的主要功能,E-mail,1. 如何申请电子邮箱? 2. 电子邮箱的使用 举例: 帐号、密码,FTP,文件传输 / 下载资源,Telnet,远程登录 Telnet 瀚海星云 操作,论坛,天涯 猫扑 Chin

14、aRen,电子商务,淘宝网 当当网 拍拍网,即时通讯,QQ MSN RTX,博客和QQ空间,新浪 雅虎 搜狐,文件下载和影音播放,下载：华军软件 多特 视频：土豆 优酷 音乐：百度,WWW与网页,WWW的工作方式 WEB服务器 URL（域名和统一资源定位器） 网站与网页的基本构成元素 网页制作中应用到的一些技术,万维网www,WWW（world wide web，全球信息网,万维网）起源于CERN（欧洲粒子物理实验室），其设计思想是统一描述Internet上多种资源的位置（URL），采用超文本的方式，通过超链接链接Internet上的资源。 友好的图形界面及简单的操作方法,可以浏览从文章、图像

15、、到声音,乃至动画等各种不同形式的信息. 通过一个WAN将多个LAN组织起来，即把多个不同的网络相互连接起来的时候，就构成了一个互联网 Internet（因特网）：特定的、世界范围内的互联网 WWW软件主要是由服务器软件和浏览器软件两部分组成。存取WWW资源的软件叫做浏览器。,WEB服务,客户机、服务器、HTTP(超文本传输协议),B/S软件的体系结构,左：C/S结构的QQ客户端登录界面,右：B/S结构的客户端登录界面,客户端浏览器,IE,Netscape,Mozilla,Firefox,Safari,Opera,使用率在0.5%以上的浏览器在2009年第一季度比较,IE的使用,将当前网页收藏

16、：“收藏”“添加到收藏夹” 整理收藏的网页：“收藏”“整理收藏夹” 设置主页：通过“工具”菜单的“Internet选项”命令， 可进行设置。,HTTP协议,URL（UniformResourceLocator）统一资源定位符 超文本传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。 HTTP通信通常发生在TCP/IP连接之上，默认端口是80 HTTP只预示着一个可靠的传输。,URL,统一资源定位器 传输协议:/主机名端口标识/路径

17、/文件名 FTP:/7 (IP地址) (域名地址) :1688/index.htm (端口 文件名）,网站的基本构成元素,网站是为表现同一主题的网页、图片等文件的集合。网站既是一个抽象组织和思想的体现，也是一个物理的文件的集合。 如：搜虎网站 新浪网站 河北北方学院网站,什么是网页,网页实际是一个文件，存放在世界某个角落的的某一台联网的计算机中。网页经由网址（URL）来识别，当我们在浏览器输入网址后，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。 网页间通过超级链接形成网站。访问网站其实就是访问其中的网页。,网页整体结构分析,一般来说，

18、一个网站或者具有特定主题的一组网页应该包括3种类型，即主页、索引页和内容页，每一类型的网页都具有自己的特点。,什么是主页,访问网站的地址看到的第一个页面，主页的URL就是网站的URL。,新浪网首页,什么是索引页,索引页即网站中的导航页，为用户提供网站或者一组网页的索引，帮助用户较快地找到想要获取的信息，作用相当于一本书的目录。,什么是内容页,内容页是表达网站中相应主题具体内容的网页，相当于书的正文。,构成网页的元素,1.文本 2.图像 3.动画 4.表单 5.导航栏 6.表格和层 7.框架 8.其他页面元素,1. 文本 网页中的信息也以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览

19、者的注意，但却能准确地表达信息的内容和含义。 2. 图片 用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。 3. 超级链接 超级链接技术是WWW流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。 4. 动画 在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。网页中的动画主要有两种：GIF动画和Flash动画。其中GIF动画只能有256种颜色，主要用于简单动画和图标。,构成网页的基本元素,5. 声音和视频 声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和

20、AIF等。很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。 6. 导航栏 导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。 7. 表格 在网页中表格用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。,构成网页的基本元素,8. 表单 网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、We

21、b页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。 9. 其他常见元素 网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。,构成网页的基本元素,页面细节分析,Flash动画 导航栏 GIF动画 文字 表单 图片 超级链接,网页制作中使用的技术,HTML语言 层叠样式表 CSS 客户端脚本语言JavaScript / VBScript 服

22、务器端脚本语言 DHTML（ASP/JSP/PHP） 动态数据库技术 SQL SERVER 图形图像处理 动画处理,网页和网站的分类,网页现在可分为静态网页和动态网页两大类，由此，网站也可以相应被称为“静态网页网站”或“动态网页网站”,动态网站的效果演示,静态网页的效果演示,什么是静态网页、动态网页?,所谓静态网页，指的是网页从服务器传到客户端时，网页的内容是“固定不变”的，也就是说，服务器只是把所存储的网页的内容原封不动直接传递给客户端浏览器，这种网页一般是标准的HTML代码。,什么是静态网页、动态网页?,所谓动态网页，它在由服务器传递给客户端的时候必须由服务器把它转换成相应的HTML格式，

23、而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。 动态网页一般要用专门的脚本语言编写，如ASP、ASP.NET、PHP、JSP等等。,Web的工作原理,制作网页的步骤和方法,确定网页的内容 组织规划内容 收集整理素材和资源 选择制作网页的工具进行制作,网页制作的常用软件,1FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。 FrontPage界面与Word、PowerPoint等软件的界面极为相似， 为使用者带来了极大的方便， Microsoft 公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强

24、大。,网页制作的常用软件,2.Dreamweaver 是由Macromedia公司推出的一款在网页制作 方面大众化的软件。 具有可视化编辑界面，即使是初学者也能制 作出相当于专业水准的网页。 支持动态HTML，从而奠定了在网页高级设计 功能方面的领先地位。 因此，Dreamweaver是一种可以满足多层次需求、功能 强大的可视化专业级网页设计及制作工具。,3. Visual Studio.Net Microsoft Visual Studio.NET是一套完整的集成开发环境，Visual Studio.NET中包含了Visual Basic、Visual C+、Visual C#和Visual

25、 J#等程序设计语言。用于设计ASP Web应用程序、XML Web Services、桌面应用程序和移动应用程序。 4. EditPlus EditPlus是一款功能强大的文字处理软件，它可以充分的替换记事本，它也提供网页作编辑及程序设计许多有用的功能。支持HTML、CSS、PHP、ASP、Perl、C/C+、Java、JavaScript、VBScript等多种语法的着色显示。,网页制作的常用软件,常用网页图形制作软件,1. Fireworks Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，使用Fireworks都不仅可以轻松地制作出尺寸较小的图形、

26、GIF动画。 2. Photoshop Photoshop是Adobe公司推出的功能强大的平面图像处理软件，Photoshop在图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等各行各业的广泛应用，它已成为许多涉及图像处理的行业的事实标准。 3. CorelDRAW CorelDraw是加拿大Corel公司开发的著名绘图软件包，它既是一个大型的矢量图形制作工具软件，也是一个大型的工具软件包。,常用网页图形制作软件,图像,矢量图形,常用网页动画制作软件,1. Flash Flash是Macromedia公司开发的一款优秀的网页动画开发软件，从简单的动画到复杂的交互式Web应用程序，它使用户可以创建任何作品。通过添加图片、声音和视频，可以使Flash应用程序媒体丰富多彩。