网站建设-技术方案及静态页面制作

网站建设第六章

确定电子商务网站技术方案6.1网站技术方案认知6.2静态网站技术6.3动态网站技术6.1网站技术方案认知

复习：网站建设的基本流程6.1网站技术方案认知网站技术方案的确定：1、网站服务器部署2、网站服务器软件技术3、网站安全与兼容性措施6.1网站技术方案认知6.1.1网站服务器接入方式网站服务器接入有两种选择：①通过ISP接入专线，将网站部署在企业内部②使用IDC的服务方案，将服务器放在IDC机房6.1网站技术方案认知①专线接入，自建服务器

自建服务器可以自定相关配置，管理与维护很方便，但是企业需要自己购买机房，投入大量资金购买服务器、路由器、交换机等网络设备，还要向ISP申请相应速率的DDN专线将服务器连在互联网上。日常的维护还需要高水平的技术人员。优点：功能强大，适合大型企业缺点：成本高昂，进入市场时间长6.1网站技术方案认知②利用IDC提供的服务方案 IDC（InternetDataCenter）即互联网数据中心，是基于互联网为集中式收集、存储、处理和发送数据的设备提供运行维护的设施基地，并提供相关的各项增值服务。

主要业务：主机托管、资源出租、系统维护、管理服务等6.1网站技术方案认知（1）主机托管

主机托管，即服务器托管，指用户自卑服务器硬件，自己安装软件，放置到ISP的机房接入网络，并委托ISP进行管理。

这种方法较经济、快捷而且使用。一般的电信公司都会提供相关的主机托管服务。6.1网站技术方案认知（2）主机租用

该方法与主机托管区别不大，主要区别在于租用的主机产权归于IDC，只是租给用户使用

优点：成本较低，对网络技术要求不高

适用范围：规模较小的电子商务应用6.1网站技术方案认知（3）虚拟主机

虚拟主机是一种技术，使用特殊的软硬件技术，把一台运行在互联网上的服务器主机分为多台“虚拟”的主机，每个虚拟主机都具有独立的域名和IP地址，具有完整的互联网服务功能，主机之间也是相互独立的。

优点：成本低，进入市场及时

缺点：灵活性差

适用范围：适合中小型的网站采用6.1网站技术方案认知三种接入方式的比较P1106.1网站技术方案认知评测数据中心的性能：（1）收集资料，了解数据中心的出口带宽（2）服务器部署在接近目标用户的IDC机房（3）通过显示路由和测试速度的软件比较优劣

①Ping命令

②使用路由测试系统和速度测试系统6.1网站技术方案认知6.1.2网站服务器软件技术决策

网站服务器软件技术决策主要包括操作系统、WEB服务器软件、网站开发语言、数据库系统的选用与确定

1、网络操作系统

网络操作系统主要有：Unix、Linux、Windows。是选用Unix、Linux还是Windows，要分析开发习惯、稳定性、安全性和投入成本等因素来决定需要用到的操作系统。6.1网站技术方案认知Windows系统优点：操作简便、配置和管理服务器容易上手缺点：正版费用高昂，硬件配置要求高Linux系统优点：开源、全免费、安全性能好、免费软件丰富缺点：操作复杂，需要专门的技术人员进行维护如果有专门的技术人员维护，可以考虑使用Linux系统，配合PHP或JSP和Mysql数据库。对于一般的企业，用Windows即可，可以降低维护成本和更新难度6.1网站技术方案认知2、网站服务器软件

网站服务器即Web服务器，也称为HTTP服务器，指网络上安装HTTP服务器软件开启了HTTP服务的计算机。HTTP协议（HyperTextTransferProtocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。6.1网站技术方案认知常用的HTTP服务器软件：IIS、Apache、Tomcat等IIS：互联网信息服务，是微软公司提供的文件和应用程序服务器，在Windows平台上建立互联网服务器的基本组建，但只能在Windows系统下运行Apache：ApacheHTTPServer，是一个开源的网站服务器软件系统，可以在大多数操作系统中运行，是最流行的Web服务器端软件之一Tomact：免费开源的轻量级Web应用服务器，是开发和调试JSP程序的首选6.1网站技术方案认知3、网站开发语言的选择常用的开发语言：ASP、ASP.NET、PHP、JSP等①ASP-简单易用的过气应用 ASP即ActiveServerPages，是微软开发的类似HTML、Script（脚本）与CGI（公用网关接口）的结合体，它没有提供专门的编程语言，而是允许用户使用已有的脚本语言编写ASP应用程序。6.1网站技术方案认知优点：包含HTML标签，可以直接存取数据库，可以使用无线扩充的ActiveX控件缺点：局限于Windows+IIS操作平台，无法实现跨平台；没有独立的存放位置，容易受到外部攻击，安全性很低TIPS：ActiveX是一个开放的集成平台，为开发人员、用户和Web生产商提供了一个快速而简便的在Internet和Intranet创建程序集成和内容的方法。使用ActiveX,可轻松方便的在Web页中插入多媒体效果、交互式对象、以及复杂程序，创建用户体验相当的高质量多媒体CD-ROM。6.1网站技术方案认知②ASP.NET-易学难精的优秀语言 ASP.NET是.NET技术的一部分，是ASP的升级版，采用VB或C#作为基础语言。语法上很大程度与ASP兼容，但语言架构和特点有很大区别优点：可生成伸缩和稳定性高的应用程序；提供很好的安全保护；设计简洁；语言灵活；支持面向对象缺点：易学难精；连接数据库有些复杂典型案例：京东商城、当当商城、CSDN社区6.1网站技术方案认知③JSP-大有前途的语言

JSP即JavaServerPages，由SunMicrosystems公司倡导的一种动态网页技术标准

优点：

1）效率和安全性高

2）组件方式方便，实现了模块化

3）JSP的适应平台更广

缺点：开发速度慢；学习比较困难；开发成本昂贵6.1网站技术方案认知④PHP-开源流行的实用语言

PHP即HypertextPreprocessor（超文本预处理器），是一种跨平台的服务器内嵌式的脚本语言，这种语言混合了C、Java、PERL等语言和PHP自身独特的语法，只需要很少的编程知识就可以创建一个网站站点

优点：

1）与HTML有很好的兼容性

2）提供了标准的数据库接口

3）兼容性强，扩展性强，可进行面向对象编程6.1网站技术方案认知缺点：1）函数名无法统一，移植很麻烦2）安装复杂3）缺少正规的商业支持，无法实现商业品化应用的开发6.1网站技术方案认知

这四种技术各有特色，在选择那种技术取决于网络服务器所采用的系统。使用微软的系统，那么选择ASP或ASP.NET较为合适

选用Linux系统，运用PHP或者JSP更好一些尽量选择熟悉的语言和操作系统，不要使用自己不熟悉的技术6.1网站技术方案认知

四种开发环境的比较P1166.1网站技术方案认知一些固定的服务器软件搭配组合模式：Windows+IIS+access+aspWindows+IIS+sqlserver+Linux+Tomcat+Mysql+JspLinux+Apache+Mysql+PHP6.1网站技术方案认知4、网站数据库系统的选用网站数据库系统主要有：Microsoftsqlserver、IBMDB2.oracle、Access、mysql等。小型网站可选用Access或mysql数据库，中型网站用SQLServer或Mysql，大型网站则使用DB2或oracle6.1网站技术方案认知5、动态域名解析服务

该技术是将一个特定的域名和上网电脑当前的IP对应，当电脑上网时就定时刷新域名所对应的IP，是用户能转向该电脑使用的IP。

这种技术主要用于使用动态IP宽带上网的电脑作为服务器的企业，可以非常大的降低服务器成本。6.1网站技术方案认知6.1.3网站安全问题（一）网站安全威胁的来源

1、服务器重要信息泄露 2、服务器软件或硬件受到破坏

3、浏览器与服务器之间的会话信息被窃听和伪造

4、服务器的安全漏洞

①操作系统的漏洞

②服务器软件的安全隐患

③服务器脚本程序的漏洞6.1网站技术方案认知（二）网站安全防范

1、防止SQL注入

（1）查询语言使用数据库提供的参数化查询接口

（2）对进入数据库的特殊字符进行转义处理，或编码转换

（3）确认每种数据的类型，比如数字型的数据必须是数字，数据库中存储字段必须是int

（4）数据长度严格规定，防止比较长的SQL注入语句无法正确执行

（5）网站每个数据层的编码统一，推荐UTF-8编码6.1网站技术方案认知（6）严格限制网站用户的数据库操作权限，只需提供能够满足工作的权限即可（7）避免网站显示SQL错误信息，防止攻击者利用信息进行判断（8）在发布之前建议使用专业SQL注入检测工具进行检测6.1网站技术方案认知2、防止挂马攻击

挂马：挂马就是黑客利用网站漏洞修改网页内容，使访问者在进入网站时自动跳转到指定的网站或下载木马病毒（1）数据库挂马：攻击者利用SQL注入漏洞将挂马代码注入数据库某些字段中，因此需要及时清理数据库，包括恢复数据库或利用挂马代码搜索数据库（2）文件挂马：攻击者直接将挂码代码批量写入服务端文件达到整站挂马的目的，使用工具或命令遍历网站的文本文件来清除挂码代码6.1网站技术方案认知（3）ARP挂马：在同一局域网的情况下，攻击者可以通过ARP欺骗，将挂码代码注入用户请求的响应页面。需要及时查找出ARP病毒，并将相应计算机进行安全加固（4）服务端配置文件挂马：使用IIS里的文件重定向、启用文档页脚、修改IIS映射等行为挂马，该技巧比较常用，因此需要随时注意配置文件是否异常6.1网站技术方案认知3、防止敏感信息泄露

企业内部有很多重要的信息，为了防止这类敏感信息泄露，需要确认

①网站上的文档是否符合公司的安全策略

②是否对公司规定的信息安全等级相对应

③网站上的文档确实是可以访问和阅读的

④使用安全删除软件将包含敏感信息的文档彻底删除6.2静态网站技术6.2.1静态网站认知HTML（HyperText

MarkupLanguage）即超文本标记语言，是万维网（WWW）的描述语言。他不是编程语言，而是用于描述或标记网页元素以及页面的连结信息。纯粹用HTML编写的网页称为静态网页，文件通常以htm、html、shtml、xml为后缀。当然，HTML网页上也可以出现动态效果，如gif动画，flash动画，滚动字符等。6.2静态网站技术静态网站特点：（1）存取速度比动态网页快（2）内容相对稳定，容易被搜索引擎检索（3）独立于各种操作系统平台（4）没有数据库的支持，难以对信息数据进行管理（5）信息单向传播，缺少交互性6.2静态网站技术静态网站访问机制：

用户通过浏览器向网站服务器请求网页时，网站服务器通过HTTP协议直接将纯粹的HTML文档传送给客户端服务器，HTML文件中的网页元素及程序、插件等在服务器端解释和执行。6.2静态网站技术6.2.2静态网站技术方案

静态网站相对稳定，更受搜索引擎青睐。因此企业常使用静态网站技术来使网站排名靠前，主要的实现途径有：

①编写纯静态页面

②静态化

③伪静态6.2静态网站技术①编写纯静态页面获得纯静态页面的途径是使用网页制作工具手工编写，生成HTML文档，也可以利用格式转换工具，将word或excel等文档转换为HTML文档网页制作工具主要是各种文本编辑器或其他html编辑工具。一类是HTML源代码编辑软件，如notepad++、editplus等，这类软件只要掌握HTML的语法就能制作网页另一类是即刻产生效果的软件，如FrontPage和Dreamweaver，这类软件不一定要了解语法，可以由软件自行生成代码6.2静态网站技术②静态化由于搜索引擎的需要，常常把动态网页转换为静态网页。在处理方法上，有静态化和伪静态之分静态化：将网站的动态信息和彼此之间的关系存入数据库，根据特定的规则和模板生成网站的静态页面，以静态形式发布原来的动态信息6.2静态网站技术③伪静态（Url静态化）伪静态不是真正意义上的静态化，它只是利用某种方法将访问的路径也就是url地址转换为html后缀。常用的方法有两个：利用错误处理机制利用URL重写技术6.2静态网站技术错误处理机制

用IIS的404错误处理机制来实现伪静态要不rewrite灵活的的多，原理就是输入不存在的网页，触发404错误页，浏览器就会转向首页或错误处理页面，在错误处理页面中设置了页面显示信息然后输出在页面中就完成了伪静态化6.2静态网站技术伪静态化的缺点：①CPU占用量大②网页打开慢③大量的重复页面④部分服务器不支持伪静态化⑤造成真正的静态网页无法访问6.2静态网站技术网站技术方案的选择（1）静态网站主要是为了搜索引擎的引用，静态和伪静态都可以被搜索引擎引用，但是纯静态性能更好，减少CPU和内存的压力，所以能用静态就不要用伪静态（2）使用伪静态会增加CPU占有率，因此不要大量食用，只需在专门提供给搜索引擎引用的页面中使用即可（3）不适合纯静态发布数据信息的时候使用伪静态。纯静态只适合图片文字等信息的发布，需要动态页面的时候就可以使用伪静态6.3动态网站技术6.3.1动态网站的认知

1、动态网站概述网页文档中的程序在服务器端运行是动态网页的重要标志。动态网页是插入了脚本程序的网页，这些程序。组件在服务器端运行，根据不同的用户、不同的时间返回不同的页面。常见的动态页面后缀为asp、aspx、php、jsp等。动态网站的网页不是所有都是动态网页，大多数都是静态与动态的混合网页6.3动态网站技术2、动态网站的特点：（1）交互性（2）自动更新（3）因事因人而变（4）常常有数据库的支持（5）动态信息容易管理动态网页和静态网页各有特点，选择哪种主要看功能需求和网站内容的多少6.3动态网站技术3、动态网页访问机制动态网页文件放在服务器上，用户访问时，在浏览器地址栏中输入网址，服务器接收到请求先将页面内的脚本程序在服务器端运行之后，再生成相应的html页面传给浏览器，浏览器接收到页面之后将html内容显示出来6.3动态网站技术4、动态网站建站方案（1）定制建站，根据客户需求来定制化开发网站（2）采用CMS建站。使用网站半成品提高建站速度（3）自助建站。网站功能模块已经做成模板，只需要简单的设置就可以完成建站（4）使用网站成品，即购买网站6.3动态网站技术6.3.2定制建站方案1、定制建站的含义定制建站就是传统建站，即企业找到技术人员或者专业公司按照企业的要求通过编写代码来制作网站，包括网站策划、网页设计、程序开发、注册域名、租用主机、上传网站、发布网站等建站全过程。需要一定的开发周期，成本较高，需要各种技术人员定制建站一般有两种方案：自主开发建造和委托专业公司开发建站6.3动态网站技术2、采用定制建站方案的考虑因素

（1）有网站的定制需求

定制建站可以根据企业的要去进行定制，网页也可以任意修改直到满意，因此有定制需求是定制建站的前提

（2）有网站建设的技术人才

自助开发建站的企业必须有网站策划、网站美工和程序员来配合完成网站建设工作，后期维护也需要相关技术人才

（3）愿意承担网站建设和维护成本

除了域名、主机空间等方面的费用外，定制建站主要的成本来自技术人才，即使委托建站公司建站可以降低相关费用，但后续的更新于推广仍然需要费用6.3动态网站技术3、如何选择定制建站公司

基于成本和技术人员的考虑，很多企业会选择委托专业公司建站。因此选择专业的公司就很重要，需要考虑几点因素：①公司历史

网站设计和开发是技术活，没有一定的经验年限是很难表现出专业的水准的6.3动态网站技术②公司业务专业方向

每个公司所精通的业务不一样，几乎每个网络公司都在开展网站建设业务，只是网站业务占公司总业务比重不同。有搞网站建设的，有做百度、谷歌搜索引擎营销的，有卖域名空间的，现在相对正规做网站建设的公司主要有下面几种：

1）主营域名注册/网站空间/企业邮箱的网络公司，网站建设是企业的一小块业务

2）主营平面广告/多媒体广告的广告公司，主要是做平面广告设计的，网站建设也是一小块业务6.3动态网站技术

3）主营软件开发的软件公司，主要业务是软件开发，有部分软件公司精通Web的软件开发业务，因此在选择的时候需要注意主营方向 4）以网站建设为主营业务的建站公司。6.3动态网站技术③公司案例可以通过公司过去设计开发的网站案例来判断该公司的技术水平④公司团队一个优秀的网站建设公司，需要一个优秀的有经验的网站制作团队，新手是无法完成一个优秀的网站建设任务的⑤搜索引擎上用户的投诉历史记录类似于淘宝的评价系统，在搜索引擎上可以搜索到客户的一些反馈信息，⑥价格因素6.3动态网站技术4、定制建站的一般流程（1）客户提出需求（2）提供建设方案（3）查询申办域名（4）签订合同（5）组建项目小组（6）页面设计（7）技术合成（8）上传测试6.3动态网站技术（9）网站开通（10）网站推广（11）培训和维护（12）售后服务6.3动态网站技术6.3.3CMS建站方案1、CMS建站概述（1）CMS含义 CMS即内容管理系统，是一种位于网站前端和网站后端的应用系统、办公系统或流程之间的软件系统。通常指门户或商业网站发布和管理系统，也可以指新闻发布网站、维基百科、个人网站系统和博客6.3动态网站技术CMS主要有三大应用领域：1、政府和企业的内部信息门户和知识系统2、网站内容管理3、全文搜索6.3动态网站技术CMS本质是一种建站工具，提供了建站的网页模板、功能模板、建站导航等功能，用户可使用它来搭建自己的网站。CMS只能算是一个建站的半成品，它将框架和后台系统搭建好，然而仍然需要填充内容6.3动态网站技术CMS的类型：①框架型：只提供底层框架，不包含应用实现，需要二次开发②应用型：本身已是一个已实现功能的应用系统，企业和用户只需要根据需要增删或修改模板即可构建一个自己的网站6.3动态网站技术6.3.4自助建站方案1、自助建站概述（1）自助建站的意义自助建站一般是自助建站服务公司将已经做好的网站成品传到网络空间上，然后客户登录到服务器在线公用平台，选择满意的模板快速生成简单的动态网站。6.3动态网站技术（2）自助建站的特点①使用成品网站模板②即买即开通，操作简便③建站周期大大缩短④成本大大降低6.3动态网站技术（3）自助建站的劣势①缺乏个性，功能简单②不能自由地移植③不能灵活的扩展功能④不能随意的编辑模板6.3动态网站技术2、自助建站的流程（1）注册会员（2）生成网站（3）后台管理6.3动态网站技术6.3.5成品网站建站方案1、成品网站建站方案概述成品网站是通过对网站的细分研究，由专业人员经过精心策划、设计和制作，做好大量现成的网站，在网站超时打包出售。用户可以直接将成品网站安装到服务器上6.3动态网站技术2、成品网站的建站流程（1）购买成品网站安装程序（2）软件授权：提供要绑定的域名给商家来授权（3）安装：可自行安装也可由商家帮助安装。自行安装则由商家发送授权码给用户，商家安装则需要提供网站空间的账号密码等由他们安装第七章

电子商务的网站建设7.1静态网页制作7.2HTML语言7.3动态网页制作7.1静态网页制作7.1.1基础知识介绍1、工作环境 DreamweaverCS5是一款较新的静态网页制作软件，先从操作界面进行一些熟悉7.1静态网页制作这是Dreamweaver的启动画面7.1静态网页制作在圈中的区域单击即可创建相应类型的文件7.1静态网页制作7.1静态网页制作2、网站的创建与管理一般来说，制作网站的第一步是确定本地站点的目录结构，并准备好相应的素材文件，然后再Dreamweaver中定义站点并创建网页，具体操作步骤：7.1静态网页制作（1）确定站点的目录结构站点的目录结构对于以后网站的管理和维护是非常重要的，因此在创建网页之前，先要确定好站点的而目录结构，主要包含两个重要任务：①在本地磁盘上创建用来保存网站内容的文件夹，该文件夹称为站点文件夹②还要在站点文件夹中创建不同的子文件夹，以存放不同类型的文件，如：图片放在image文件夹，flash动画放在flash文件夹，样式文件放在css文件夹，名字都可以自己取，只要能区分开就行7.1静态网页制作7.1静态网页制作上图就是一个典型的站点文件夹内容，包括了css、image、flash、js四个子文件夹，还有若干个网页文件在开始制作网页前最好将所有的素材都放进相应的子文件夹中，特别是图片、flash动画等资源，方便之后的调用在创建网页之前，先要定义好站点，主要包括设置站点名称、站点性质以及站点对应的文件夹7.1静态网页制作具体案例：先在自己的磁盘上创建一个名为“恒威管业”的文件夹，作为站点的根文件夹，并且在文件夹的下面先准备好子文件夹，将用到的图片、flash动画等资源放入分好类的文件夹中7.1静态网页制作7.1静态网页制作站点创建步骤：第一步：选择新建站点7.1静态网页制作第二步：点击右侧的文件夹图标，选择创建的文件夹7.1静态网页制作第三步：将站点名字改为恒威管业7.1静态网页制作第四步：点击保存，可以看到站点出现在了左下角7.1静态网页制作如果出现需要新的文件夹或者文件时，很简单，直接在右下角点击右键，新建即可7.1静态网页制作可以看到，点击新建文件会自动新建一个html文件在根目录下，用户取名字即可7.1静态网页制作3、网页文档的基本操作（1）新建网页方法一：选择文件->新建7.1静态网页制作7.1静态网页制作7.1静态网页制作创建好之后点击保存7.1静态网页制作保存在站点目录下，取上适当的名字即可7.1静态网页制作方法二：直接在首页点击html即可7.1静态网页制作然后进行保存操作即可7.1静态网页制作方法三：前面提到的直接在站点文件点击右键新建即可7.1静态网页制作取名之后双击即可打开7.1静态网页制作（2）预览网页编辑网页之后可以进行网页的预览，第一种方法是直接在右侧进行预览，但是为了适合浏览器的兼容性，一般通过浏览器来预览，有两种方式：①单击工具栏的按钮，选择在不同的浏览器进行预览7.1静态网页制作7.1静态网页制作②直接按F12会自动使用默认浏览器打开当前网页7.1静态网页制作4、网页基本页面属性设置（1）选择修改->页面属性命令7.1静态网页制作也可以单击属性面板的页面属性按钮或者使用Ctrl+J的快捷键7.1静态网页制作在弹出的对话框中设置整个文档的信息，在“外观”选项中可以设置页面的一些基本属性，包括字体，大小，文本颜色，背景颜色等7.1静态网页制作（2）“链接”选项中可以设置与页面链接有关的属性7.1静态网页制作（3）标题选项中可以设置与标题相关的字体，颜色等7.1静态网页制作（4）标题/编码选项主要设置的是文字的编码7.1静态网页制作（5）跟踪图像可以设置跟踪图像的属性，跟踪图像是在网页已经由PS画好之后可以作为背景放在页面后面，然后制作网页的时候可以根据背景进行网页的排版7.1静态网页制作5、网页文件的命名规则（1）所有文件名使用英文小写，不要用大写字母（2）不要使用中文命名（3）不要再文件名中加空格，如果需要隔开可以使用下划线“_”（4）运算符符号不能用在文件名开头7.1静态网页制作7.1.2网页内容的编辑1、在网页中插入文本文本是网页中不可或缺的一部分，无论什么网页，都需要在网页中添加文本来传达信息。在Dreamweaver中输入文本的方法非常简单，只需要在光标定位的位置输入文字即可，也可以进行复制粘贴后设置各种格式和属性注：Dreamweaver中分段是按“Enter”键，换行是按“Shift+Enter”7.1静态网页制作7.1静态网页制作设置文本段落和字符格式：利用属性面板为文本和段落格式设置不同的样式，具体方法为：选中要设置的文本，打开属性面板，进行相关的设置，类似于word文档处理7.1静态网页制作7.1静态网页制作7.1静态网页制作用户也能在软件下方直接进入属性的设置7.1静态网页制作练习1：在网页中输入文本，设置字体为“Arial,Helvetica,sans-serif”，字体大小为18px，文本颜色为黄色7.1静态网页制作2、在网页中插入水平线网页中插入水平线可以很方便的对内容进行分块，区域进行分区插入水平线有两种方法7.1静态网页制作方法一：选择插入->HTML->水平线7.1静态网页制作方法二：在插入栏中选择水平线按钮即可7.1静态网页制作7.1静态网页制作修改水平线属性：如果对水平线的高度和宽度有要求，可以直接进行修改，在软件的下方7.1静态网页制作修改水平线颜色：如果需要对水平线颜色进行修改则不能直接进行设置，需要在左边的代码区进行代码的添加，即在水平线的标签中输入“color=”等号后面填上颜色代码7.1静态网页制作7.1静态网页制作填写完代码之后，预览中的水平线并不会改变颜色，必须打开浏览器才能看到变化7.1静态网页制作7.1静态网页制作除了上述的更改方法，还可以点击左下角的“快速标签编辑器”进行更改7.1静态网页制作7.1静态网页制作练习2：在段落中间加一条水平线，设置长度为700，宽度5，颜色为红色7.1静态网页制作知识补充：（1）标签：即HTML标签，是WWW的描述语言。一个标签由开始标签和结束标签搭配使用，中间放入内容和描述性用语例如：<p>这是一段话</p>这在浏览器中只会显示中间的中文，两边的是描述性语言，表示中间这句话是一个段落7.1静态网页制作在标签中也可以加入描述性用语，用来规定标签的显示状态，主要的描述性用语有：border=“”;调整边框的宽度color=“”;调整颜色width=“”;调整宽度height=“”;调整高度因此一般可以对显示的文字进行各种调整，如：<p><fontsize=“15px”color=“red”>这是一段话<font></p>7.1静态网页制作7.1静态网页制作常用的标签主要有：<html></html>:html文件必须要有的标签<body></body>:html文件的主体内容<head></head>:头文件内容，一般放入标题和一些说明<p></p>:表示一个段落<font></font>:对字体进行设置<table></table>:制作一个表格7.1静态网页制作（2）颜色代码当我们需要对字体或者背景以及其他设置颜色的时候需要对颜色的代码有个了解，因为需要相应的代码才能显示相应的颜色。每一种颜色都对应了相应的代码，一般人是无法记住的，在Dreamweaver中可以对代码进行一个查找7.1静态网页制作首先，打开页面属性7.1静态网页制作点开外观（HTML），点击背景，选择需要的颜色即可在上方显示颜色代码7.1静态网页制作将我们需要的颜色代码写入相应的属性中就行了，注意“#”也要写进去7.1静态网页制作在浏览器中打开后，就可以看到颜色的变化了7.1静态网页制作如果是使用我们常用的颜色，有些可以不需要代码，直接用英文即可：red-红色blue-蓝色gray-灰色yellow-黄色green-绿色white-白色black-黑色7.1静态网页制作7.1静态网页制作任务：1、创建“恒威管业”站点，包括“恒威管业”主目录，下设“image”“flash”“css”“js”“video”子目录，创建一个新的网页文件“index.html”2、在网页中插入文本，按照图片中的文本进行填写3、按照图片中的样子插入水平线并修改颜色为绿色，需要以填写颜色代码的形式插入4、设置字体为“Arial,Helvetica,sans-serif”，字体大小为18px，文本颜色为黄色，背景颜色为天蓝色7.1静态网页制作3、在网页中插入图像和动画图像和动画是网页中不可或缺的一部分，恰当的使用图像和动画可以使网页变得更加赏心悦目，便于阅读，从而使更多的访问者愿意访问网站（1）插入图片的方法很简单，在插入栏中点击图像按钮，选择要插入的图片确定即可7.1静态网页制作点击图像按钮7.1静态网页制作选择需要插入的图片点击确定7.1静态网页制作7.1静态网页制作注意：在插入图片时，如果所选图片不在站点文件夹内，系统会提示是否将其复制在站点文件夹中，一般选择“是”，否则会导致网站用到站点外的图片，用浏览器打开是不会显示图片的7.1静态网页制作练习3：在网页顶部插入LOGO图片7.1静态网页制作（2）插入Flash动画Flash动画是目前最为流行的矢量动画，它的文件小、变化丰富，很多网页都是用Flash动画来展示更多的内容插入方法：在插入栏中点击“媒体：SWF”按钮，在选项框中选择一个flash文件点击确定即可7.1静态网页制作点击媒体：SWF按钮7.1静态网页制作选择需要插入的Flash动画7.1静态网页制作点击确认即可7.1静态网页制作需要在浏览器中进行预览7.1静态网页制作练习4：在LOGO下面插入Flash动画7.1静态网页制作4、插入超级链接“链接”是网站中必备的部分，是通向其他网页文件以及其他网站的方法。通过链接我们可以跳转到不同的网页或进行其他的操作。设置链接的方法有很多种，最简单的就是在“属性”面板上的“链接”文本框中直接输入要链接的文件地址超链接一般分为三种：常规连接、图片链接和热点链接7.1静态网页制作（1）常规链接常规链接包括内部链接和外部链接内部链接指站点内部写好的页面外部链接则是跳转到其他网站内的网页7.1静态网页制作①内部链接内部链接的设置很方便，选中要设置链接的文本或图像后，可以在属性面板的“链接”文本框中直接输入要连接到的网址或网页名称；也可通过单击“属性”面板上“链接”文本框后的文件夹图标选择7.1静态网页制作方法一：选择需要变成链接的文字，在选项框中写入链接名称7.1静态网页制作方法二：点击链接框后面的文件夹按钮7.1静态网页制作选择需要的文件点击确定即可7.1静态网页制作方法三：直接将链接框后面的“指向文件”按钮拖拽到需要链接的文件即可7.1静态网页制作链接下方还有一个“目标”的下拉菜单，有五个选项：_blank:点击链接打开新的窗口，始终在另一个新窗口_new:点击链接打开新的窗口，始终在同一个新窗口_parent:在当前窗口显示被打开的窗口_self:在当前窗口显示被打开的窗口_top:在当前窗口显示被打开的窗口7.1静态网页制作练习5：在网页最下方插入一个超链接名为“内部链接”，指向新建的一个网页文件名为“news.html”7.1静态网页制作②外部链接外部链接只能在“链接”框中输入网址，注意要写全网址，包括http7.1静态网页制作练习6：在内部链接下一行创建一个名为“百度”的外部链接，指向百度首页，即7.1静态网页制作（2）图片链接图片链接的设置与普通链接一样，只是文本链接是框选文本，而图片链接是选择图片，其余操作是完全一致的7.1静态网页制作（3）热点链接之前说到图片链接，只能为图片设置一种链接，现在如果需要为一个图片设置多个链接的时候就需要用到热点链接具体步骤如下：7.1静态网页制作①选中需要设置的图片，在属性面板点击热点工具，一般选择矩形7.1静态网页制作②在图片上“首页”区域，绘制一个矩形区域7.1静态网页制作③在属性面板设置链接7.1静态网页制作④继续在下一个菜单框选,并重复上述操作7.1静态网页制作任务：1、创建两个新网页文件turn.html和news.html2、插入LOGO图片3、插入Flash图片4、设置LOGO图片的超链接为5、把菜单栏图片设置为热点链接，“首页”指向index.html，“关于我们”指向turn.html，新闻中心指向“news.html”，全部以打开新窗口的方式打开6、在turn.html中加入一句话：“这是一个内部链接跳转文件”7.1静态网页制作三、利用表格布局网页（一）创建表格表格是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（以<tr></tr>标签表示），垂直的称为列（以<td></td>标签表示）。表格的建立可以很好的将网页中的元素整齐地摆放在中间而不会出现凌乱的现象7.1静态网页制作1、创建表格Dreamweaver中提供了很方便的创建表格的方法，点击“插入”点击“表格”即可7.1静态网页制作也可以在快捷插入栏点击表格的快捷键7.1静态网页制作设置各项参数之后点击创建即可7.1静态网页制作下面对设置的属性进行说明：①行数和列数：即需要插入几行几列的表格，输入相应的数字即可②表格宽度：如果不设置表格宽度就会根据内容自行调整，输入则固定宽度。像素是显示器的显示基本单位，百分比则是相对于浏览器的，浏览器大小变化也会导致表格发生变化③边框粗细：表格边框的粗细，一般用于调整表格④单元格边距：也叫单元格填充，指内容与边框的距离⑤单元格间距：值单元格之间的距离7.1静态网页制作选择单元格：与Excel的操作类似，按住Ctrl加鼠标点击即可，或者使用鼠标拖拽7.1静态网页制作（二）表格和单元格属性设置选择表格后，在属性面板有很多属性可以进行设置7.1静态网页制作①水平：设置单元格内容水平摆放方法，有左对齐，居中和右对齐三种②垂直：设置单元格内容垂直摆放方法，有顶端、居中、底部、基线四种③宽、高：设置单元格的宽和高④背景颜色：设置单元格的背景颜色7.1