1、苏州大学计算机科学与技术学院动态网页设计1第1章 网页设计初步周克兰动态网页设计2Internet的发展及组成n发展n1969年，美国国防部建成ARPANETn1972年，美国50余所大学和研究所参与联网n1982年，ARPANET与MILNET合并，构成Internet雏形n1985年，建立了基于TCP/IP协议的NSFNET网络，成为今天的Internet基础n组成n主干网n地区网n校园网、企业网或部门网动态网页设计3Internet的工作方式n采用客户机/服务器系统n服务器：提供服务资源的计算机n客户机：使用资源的计算机n体系结构B/SnBBrowsernSServerHTTP请求HTT
2、P响应BrowserServer动态网页设计4Internet的接入n硬件准备n计算机n网络接入设备n软件准备nTCP/IP协议n相关应用程序n其他n选择ISPn通讯线路动态网页设计5电话拨号上网动态网页设计6ADSL方式上网nADSL：非对称数字用户环线n下行带宽较宽（8Mbps）n上行带宽较窄（1Mbps）n电话线nADSL调制解调器n最大传输距离1500m动态网页设计7其他上网方式n网线直接上网（局域网接入）n校园网n有固定IPnCATV同轴线上网n需要Cable Modemn光纤到户n较理想n代价高n无线上网动态网页设计8IP地址n在Internet上的计算机都有唯一的IP地址nIP地
3、址的长度为32位(二进制)n两部分：网络部分+主机部分n五类：A、B、C（D、E类保留或另作特殊用途）nA类：0+7位（网络部分）+24位主机部分nB类：10+14位（网络部分）+16位主机部分nC类：110+21位（网络部分）+8位主机部分IP地址在实际表示时采用十进制形式，每部分不超过255动态网页设计9IP地址类别前列位NetworkHost使用范围申请网域A07位24位1.x.x.x-126.x.x.x国家级B1014位16位128.n.x.x-191.n.x.x跨国组织C11021位8位192.n.n.x-223.n.n.x企业组织D1110-224.-239.-特殊用途E1111-
4、240.-255.-未使用动态网页设计10域名系统n用以解决IP地址难记的困难，它定义了一套为机器取域名的规则，能把域名高效地转换成IP地址。n域名n分层法访问，每一层为一个子域名，用点号分隔，从右至左逐步具体化n主机名.机构名.网络名.顶级域名（202.195.128.11）动态网页设计11国家或地区代号（顶级域名）动态网页设计12网络名n美国作为Internet的创始者，在最高层域名的规定上享有特权，其最高层即为网络名。动态网页设计13URLnUniform Resource Locator，统一资源定位器nURL由三部分组成n资源类型（所用协议）n存放资源的服务器名n资源文件的全路径n如
5、：http:/ Wide Webn用超文本（超媒体）的方式组织信息，HTTP超文本传输协议nWWW是通过WWW服务器来提供服务的，以网页的形式供浏览者浏览n网页是用HTML写的纯文本文件n超文本以网状结构组织信息n常用浏览器有：Internet Explorer、Netscape Navigator等动态网页设计16Internet的服务-FTPnFTP文件传输协议，允许将一台计算机上的文件传到另一台上。1024以上的任何端口端口21端口20控制端口数据端口FTP客户端FTP服务器动态网页设计17Internet的服务-TelnetnTelnet提供对一台机器简单的终端访问，让用户可以直接登录
6、远方的计算机，并察看数据。n用户需要有一个帐户名和密码才能登录动态网页设计18Internet的其他服务和功能n其他服务nBBS电子公告板系统n用户可以在BBS上发布信息，讨论问题nUSENET网络新闻nIP电话n功能n共享资源n交流信息n发布和获取信息动态网页设计19Internet在中国的发展n第一阶段n19871993年，开展联网的科学研究和技术合作，通过拨号实现了电子邮件服务。n第二阶段n1994年开始，实现了TCP/IP连接中国的顶级域名为：.cn动态网页设计20Internet中国网的几大主流网络nNCFC中国国家计算机与网络设施n底层：中科院、清华大学、北京大学的校园网（中科院有
7、两个国际出口）n高层：国内其他科研与教育单位的院校网及连入国际Internet的NCFC主干网n后来演变为中国科学技术网CSTNetnCHINANET中国公用计算机互联网n邮电部组建，包括8个地区网络中心和31个省市网络分中心，其骨干网覆盖全国。目前在北京、上海分别有两条专线作为国际出口动态网页设计21Internet中国网的几大主流网络nCERNET中国教育与科研计算机网n1994年由国家投资建设，教育部负责管理n四级：全国网络中心、地区网络中心和主结点、省教育科研网、校园网n地区网络中心分别设在：北京、上海、南京、广州、武汉、成都、西安nCHINAGBNNET中国国家公用经济信息通信网n又
8、称金桥网，由吉通公司负责经营管理动态网页设计22Internet中国网的几大主流网络n中国联通UNINETn中国移动CMNETn中国网通CNCNETn中国卫通n中国铁通n军队资源组建的网络动态网页设计23网页设计基本知识nHTMLnHyper Text Markup Language，超文本标记语言，超文本以网状结构组织信息nHTML标记（Tag）n标记用一对“”中间包含若干字符表表示。n标记通常成对出现，格式如下：内容 动态网页设计24HTML文档的基本构成 动态网页设计25CSS层叠样式表n用于增加控制网页样式，并且允许样式信息与网页内容分离的一种标记语言。nCSS语法n选择器属性：值n选
9、择器可以是一个或多个HTML标记（逗号分隔开），也可以是类选择器、ID选择器等nP,TD font-size:9pt：将段落与单元格中的文字大小设置为9像素nCSS特性n分组，继承，层叠动态网页设计26在网页中使用样式表n链入外部样式表n多个网页共享，保存为.CSS文件n在网页中引用方法如下：nn嵌入样式表n在网页中用标记将若干样式声明集中定义成一个样式块n引入外部样式表n内联样式表动态网页设计27Dreamweaver MX简介nDreamweaver MX是Macromedia公司推出的一个专业的、直观的网页制作工具，支持DHTML和CSS标准。它是一个所见即所得的网页编辑器，并带有站点管
10、理功能，让你很方便地设计和管理多个站点。n与Flash、Fireworks并称为“网页制作三剑客”动态网页设计28Dreamweaver MX界面文档窗口站点窗口属性栏插入工具栏状态栏动态网页设计29创建新的站点n站点管理站点动态网页设计30站点编辑n站点编辑n站点管理站点n复制站点n删除站点删除站点并不删除存在磁盘上的文件动态网页设计31新建网页n首页n打开一个站点时首先打开的网页，文件名一般为index.htm或index.htmln从页n网站中其他的网页n编辑网页中的文字、图像，建立超链接n预览建立的网页（F12）动态网页设计32在网页中添加文本和图像n普通文字的输入n输入特殊符号n设置
11、文本的格式n在网页中插入图像n在网页中插入交互式图像(翻转图片)通常网页中的图片是GIF、JPG或PNG格式的。动态网页设计33超级链接(Hyperlink)n超级链接是WWW中最具魅力的东西。只要身处WWW就一定存在超级链接。n两要素n链接源n链接目标n三种路径方式n绝对路径n相对路径n根路径动态网页设计34创建超级链接n链接到锚(Anchor)页面中的某一位置n创建锚:InsertInvisible TagsNamed Anchorn链接到锚n链接到本地站点中的某个页面n链接到WWWn链接到其他类型的文件n链接到邮件动态网页设计35编辑超级链接n设置链接字体颜色ModifyPage Pro
12、pertiesn设置目标框架n为图像创建多点链接(Hotspot)动态网页设计36其他n设置文本标题n设置页面属性n文字项目列表n插入水平线动态网页设计37表格的作用n表格是HTML的重要元素。表格可以将数据、文本图片规范地显示在页面上。n表格的另一个常用的功能是将整个页面中的内容都放在表格中，用来规范他们的位置。-布局n在布局视图下可以画表格来进行版面的设置。动态网页设计38表格的HTML代码n n n n nn n表格标志n定义表格中的行n定义单元格n定义表格标题动态网页设计39表单(Form)n表单是设计交互网页的基础n使用表单可以收集用户的信息n表单正常工作的两要素n表单（H
13、TML代码）n处理信息的服务器端或客户端应用程序n表单是一个容器，在其中可以添加表单对象动态网页设计40表单的动作及提交方法nActions:提交表单后所执行的程序nMethod:提交方法nGET:把表单值添加给URL，并向服务器发送GET请求。因为URL被限定在8192个字符之内，所以不要对长表单使用GET方法。nPOST:在消息正文中发送表单值，并向服务器发送POST请求。动态网页设计41表单对象n文本框(Text Field)按钮(Button)n复选框(Checkbox)单选按钮(Radio Button)n列表/菜单按钮(List/Menu)文件域(File Field)n图像域(Image Field):可以用来替换Submit按钮 n隐藏域(Hidden Field)跳转菜单(Jump Menu)表单单行文本框 多行文本框复选框单选按钮 列表框/菜单单选按钮组跳转按钮隐藏域图像域文件域普通按钮标签
