第1章-网页设计概述

1、深圳大学 计算机与软件学院1网页与网站基础知识李俊杰 博士深圳大学 计算机与软件学院深圳大学 计算机与软件学院2大纲网页与网站的概念Dreamweaver CS5简述Dreamweaver CS5的工作界面和基本操作Dreamweaver站点的建立和规划文件的基本操作制作第一个网站深圳大学 计算机与软件学院3 1.1 网页与网站的概念Internet的概述WWW网页与网站域名与IP地址深圳大学 计算机与软件学院41.1.1 Internet的概述 InternetInternet是由成千上万个网络、上亿台计算机是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网通过特定

2、的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。大的信息资源平台。深圳大学 计算机与软件学院5 InternetInternet所提供的服务主要是所提供的服务主要是WWWWWW、E-mailE-mail、FTPFTP、网上传呼、在线聊天、网上购物、旅行预订等、网上传呼、在线聊天、网上购物、旅行预订等等，而其中等，而其中WWWWWW和和E-mailE-mail是最常用的服务。是最常用的服务。深圳大学 计算机与软件学院6从国内从国内InternetInternet的发展现状来看，的发展现状来看，19941

3、994年年4 4月，月，中科院计算机网络信息中心正式接入中科院计算机网络信息中心正式接入InternetInternet，在，在1010多年的时间里，中国多年的时间里，中国InternetInternet发生了飞速的发展，发生了飞速的发展，截至截至20112011年年0707月月2020日，我国网民人数达到了日，我国网民人数达到了4.854.85亿。亿。 据新华社电据新华社电, ,国家互联网信息办公室日前披露国家互联网信息办公室日前披露的数据表明，的数据表明，20122012年，中国将正式迈入年，中国将正式迈入“5 5亿网民亿网民”时代。时代。 深圳大学 计算机与软件学院7Internet的概

4、述http:/ 计算机与软件学院8据国家互联网信息办公室统计数据，中国手机据国家互联网信息办公室统计数据，中国手机上网用户约上网用户约3.53.5亿人，微博注册用户已超亿人，微博注册用户已超3 3亿人。而亿人。而行业机构易观国际的分析报告则指出，去年中国移行业机构易观国际的分析报告则指出，去年中国移动互联网用户规模已达动互联网用户规模已达4.34.3亿，环比增长近亿，环比增长近50%50%；今；今年，移动互联网用户数将有可能突破年，移动互联网用户数将有可能突破6 6亿，超过互联亿，超过互联网用户数量网用户数量; ;网购用户近网购用户近2 2亿亿 。深圳大学 计算机与软件学院91.1.2WWWW

5、WW(World Wide Web)WWW(World Wide Web)简称为简称为WebWeb或万维网，客户端只要或万维网，客户端只要通过通过“浏览器浏览器”（BrowserBrowser）就可以非常方便地访问）就可以非常方便地访问InternetInternet上的服务器端，迅速地获得所需的信息。如图上的服务器端，迅速地获得所需的信息。如图所示。所示。 Internet浏览器浏览器WEB服务器服务器HTTP网络协议网络协议深圳大学 计算机与软件学院10深圳大学 计算机与软件学院11 用户通过浏览器访问用户通过浏览器访问WEBWEB服务器的网页，那么如何查找这些服务器的网页，那么如何查找这

6、些网页呢？通过在浏览器的地址栏中输入网址，即网页呢？通过在浏览器的地址栏中输入网址，即URLURL，统一，统一资源定位器资源定位器。 URLURL的一般格式如下：的一般格式如下： 通信协议通信协议：/主机域名主机域名/ /路径路径/ /文件名文件名 其中，其中，通信协议通信协议指提供该文件的服务器所使用的通指提供该文件的服务器所使用的通信协议；信协议；主机域名主机域名指上述服务器所在主机的域名；指上述服务器所在主机的域名；路路径径指该文件在主机上的路径；指该文件在主机上的路径；文件名文件名指文件的名称。指文件的名称。 例如例如http:/ 其中，其中，httphttp是是WWWWWW服务器与服

7、务器与WWWWWW客户之间遵循的通信协议。客户之间遵循的通信协议。用来标识该文件存储在山西大学的用来标识该文件存储在山西大学的WWWWWW服务服务器上，第二部分是文件所在的路径，最后一部分器上，第二部分是文件所在的路径，最后一部分sxuc1.htmsxuc1.htm这个文件的名称。这个文件的名称。深圳大学 计算机与软件学院12深圳大学 计算机与软件学院13伯纳斯-李于1989年在欧洲粒子物理研究所提出了建立一个全球超文本项目万维网，以此使人们都能顺利地从网上获取并共享信息。 深圳大学 计算机与软件学院141.1.3 网页与网站n构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定

8、义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。n通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。深圳大学 计算机与软件学院15深圳大学 计算机与软件学院161.1.4 域名与IP地址在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔。 比如：00深圳大学 计算机与软件学院17IP地址知识 为了识别通信系统上的计算机，需要建立一种普通接受

9、的标识方法。这就如同通过邮局寄信，信封上必须有收件人的地址，包括国家、城市、街道、门牌号以及邮政编码。在Internet上定义了两种方法来标识网上的计算机，分别是Internet的IP地址和域名。深圳大学 计算机与软件学院18 Internet上的数据能够发送到目的端的原因是：任何一个连接到Internet上的计算机都有一个惟一的网络地址。为了确保Internet上的每一个网络地址始终是惟一的，国际网络信息中心组织（InterNIC）根据公司网络的大小给他们分配了一系列IP地址（又称为Internet地址）。深圳大学 计算机与软件学院19 IPv6简介 当前在当前在InternetIntern

10、et上使用的上使用的IPIP地址是在地址是在19781978年确年确定的协议，它由定的协议，它由4 4段段8 8位二进制数构成。由于位二进制数构成。由于InternetInternet协议的当时版本号为协议的当时版本号为4 4，因而称为，因而称为“IPv4IPv4”。IPv4IPv4的地址长度是的地址长度是3232位（位（bitbit），理论上可以支持多），理论上可以支持多达达16001600万个网络，容纳四十多亿台主机万个网络，容纳四十多亿台主机（2 23232=4,294,967,296=4,294,967,296），但由于），但由于IPIP对地址进行了分对地址进行了分类，分成类，分成A

11、A、B B、C C等类地址，实际可用的网络数和主等类地址，实际可用的网络数和主机数远小于上述数目机数远小于上述数目 。深圳大学 计算机与软件学院20IPv6的格式：的格式：地址长度是地址长度是128位（位（bit） ， 8段的段的16位十六进制数表示，位十六进制数表示， 中间用中间用“：”来隔开。来隔开。比如：比如：60A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A260A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A2山西大学商务学院的山西大学商务学院的IP地址是地址是30，表示，表示成成IPv6地址格式是怎样的呢？

12、地址格式是怎样的呢？0：0：0：0：0：0：30深圳大学 计算机与软件学院21006530深圳大学 计算机与软件学院22Internet的域名管理 DNS域名系统是一种帮助人们在Internet上用字符来惟一识别自己的计算机，并保证主机名（域名）和IP地址一一对应的网络服务。DNS简介深圳大学 计算机与软件学院23域名空间 Internet域名具有层次结构。整个Internet网被划分成几个顶级域。InterNIC采

13、用两种方法进行分类：一种方法是按组织模式进行划分；另一种方法是按地理模式进行划分。深圳大学 计算机与软件学院24按组织模式进行划分顶级域名 域名类型com 商业机构edu 教育机构gov 政府内容int 国际组织mil 军事部门net 网络支持中心org 各种非赢利性组织http:/ 计算机与软件学院25国家代码国家代码 各个国家各个国家比如：比如：cncn代表中国代表中国,us,us代表美国，代表美国， caca代表加拿大，代表加拿大，jpjp代表日本代表日本按地理模式进行划分按地理模式进行划分深圳大学 计算机与软件学院26 为了适应Internet的迅速发展，我国成立了“中国互联网络信息中

14、心”，并颁布了中国互联网络域名规定。 中国互联网的域名规定深圳大学 计算机与软件学院27我国我国二级域名分配二级域名分配（组织模式组织模式）二级域名二级域名 分配情况分配情况com 商业机构商业机构edu 教育机构教育机构gov 政府内容政府内容net 网络支持中心网络支持中心org 各种非赢利性组织各种非赢利性组织net 网络支持中心网络支持中心ac 科研机构科研机构深圳大学 计算机与软件学院28我国我国二级域名分配二级域名分配（地理模式地理模式）二级域名二级域名 分配情况分配情况bj 北京北京sh 上海上海tj 天津天津jx 江西江西gd 广东广东sx 山西山西tw 台湾台湾.深圳大学 计

15、算机与软件学院29大纲网页与网站的概念Dreamweaver CS5简述Dreamweaver CS5的工作界面和基本操作Dreamweaver站点的建立和规划文件的基本操作制作第一个网站深圳大学 计算机与软件学院30Dreamweaver CS5概述概述Dreamweaver CS5是美国Adobe公司推出的集网页制作和站点管理于一身的网页制作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制作出跨越平台限制和浏览器限制的、充满丰富动感的网页。以前，网页设计者在制作网页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用 Dreamweaver CS5

16、就可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计过程简单明了。 Dreamweaver CS5在原来版本的功能基础之上进行了改进和升级，功能更强大。它不仅可以制作出任何结构复杂的静态网页，具有完美的操作界面、强大的模板功能、创建动态网页、强大的代码编辑功能，在Dreamweaver CS5中，CSS功能更加完整、站点管理更为简捷、高效。深圳大学 计算机与软件学院31大纲网页与网站的概念Dreamweaver CS5简述Dreamweaver CS5的工作界面和基本操作Dreamweaver站点的建立和规划文件的基本操作制作第一个网站深圳大学 计算机与软件学院323

17、.1.1Dreamweaver CS5的启动单击“开始”按钮，选择“程序”中的“Adobe Dreamweaver CS5”命令，就可以启动Dreamweaver CS5应用程序。启动Dreamweaver CS5后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等，如图所示。在此选择“新建”下的“HTML”选项，便可进入工作界面。深圳大学 计算机与软件学院333.1.1Dreamweaver CS5的启动 Dreamweaver CS5根据不同的需求设置了不同风格的工作界面有经典、编码器、编码人员（高级）、设计器、设计人员（紧凑）和双重屏幕几种布局模式，其中默认的是设计器

18、界面。如果在操作过程中想改变工作界面，可单击菜单“窗口”“工作区布局”命令，从中选择相应的工作区即可，如图所示。为便于与前面版本接轨，此处我们选择“经典”布局模式。深圳大学 计算机与软件学院343.1.2Dreamweaver CS5的工作界面深圳大学 计算机与软件学院353.1.2Dreamweaver CS5的工作界面1.“插入”面板组 “插入”面板组包含用于创建和插入对象所用到的所有按钮，它包括8个子面板，如图所示。2. “文档”工具栏 “文档”工具栏中主要包含了一些对文档进行常用操作的功能按钮，通过单击这些按钮可以在文档的不同视图间进行快速切换。并且可以设置文档的标题，如图所示。文档窗

19、口有3种视图显示，分别是“代码”、“拆分”和“设计”。深圳大学 计算机与软件学院363.1.2Dreamweaver CS5的工作界面3. 文档窗口文档窗口是设计网页的主窗口，在该窗口中，用户可以对各种网页元素进行编辑和排版。在文档窗口中右击，在弹出的快捷菜单中可以选择相应的命令进行操作。4. 状态栏状态栏位于文档窗口的底部，用于提供与用户当前编辑的文档有关的信息，如当前窗口大小、文档大小和估计下载时间等。5. “属性”面板 在Dreamweaver CS5中“属性”面板是经常使用的工具之一。当选中某一对象时，“属性”面板会自动地显示相关信息和参数，可以对其进行修改和设定，如图所示。深圳大学

20、计算机与软件学院37大纲网页与网站的概念Dreamweaver CS5简述Dreamweaver CS5的工作界面和基本操作Dreamweaver站点的建立和规划文件的基本操作制作第一个网站深圳大学 计算机与软件学院384.1实例1 “藏獒传说”网站的建立 单击菜单“站点” “新建站点”命令，可打开“站点设置对象”对话框。在站点名称右侧的文本框中输入网站的名称，这里输入“藏獒传说”，单击本地站点文件夹右侧的按钮，指定“藏獒传说”站点的文件夹，如图所示。深圳大学 计算机与软件学院394.2利用站点定义向导创建站点实例1 “藏獒传说”网站的建立 若需要进行更为复杂的设置，可以单击“高级设置”选项，在弹出的选项卡中根据需要设置站点，如图所示。深圳大学 计算机与软件学院404.3站点的管理站点的管理 站点建好以后，可根据需要对站点进行编辑管理，如新建、编辑、复制、删除、导入和导出等。可单击菜单“站点”“管理站点”命令，打开“管理站点”对话框，如图所示，选择要编辑的站点名称，可根据需要选择不同的按钮进行操