网站开发基础

1、本章目标本章目标 了解网页设计的基本过程了解网页设计的基本过程 会使用会使用HTML的基本结构创建网页的基本结构创建网页 会使用文本相关标签实现文字修饰和布局会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转会使用超链接相关标签实现页面间的跳转 会使用表格的基本结构实现简单表格会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关标签实现跨行、跨列的复杂表格 会使用表格相关设置进行美化修饰会使用表格相关设置进行美化修饰 1.1 网站开发概述网站开发概述 网站开发

2、就是使用网页设计软件，经过平面设计、网络动 画设计、网页排版等步骤，设计出多个页面。这些网页通 过一定逻辑关系的超级链接，构成一个网站。 1.1.1什么是网站什么是网站 1.1.2网站的类型及定位网站的类型及定位 1.1.3认识网页认识网页 1.1.1 什么是网站什么是网站 网站（Website）是指在因特网上，根据一定的规则，使用HTML等工 具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一 种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公 开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页 浏览器来访问网站，获取自己需要的资讯或者享受网络服务。 网站由域名

3、（domain name），网站空间、网页3部分组成。网站域 名就是在访问网站时在浏览器地址栏中输入的网址，比如： （课件吧网站的一级域名）、（课件吧 网站的二级域名）。网页是通过Dreamweaver等软件制作出来的，多 个网页由超级链接联系起来。网站空间由专门的独立服务器或租用的 虚拟主机承担，网页需要上传到网站空间中，才能供浏览者访问网站 中的内容。 1.1.2 网站的类型及定位网站的类型及定位 网站是一种新型媒体，在日常生活、商业活动、娱乐游戏、 新闻资讯等方面有着广泛的应用。在网站开发之前，需要 认识各种网站的主要功能和特点，对网站进行定位。下面 介绍几种常见的网站类型。 综合门户网

4、站综合门户网站 综合门户网站具有受众群体范围广泛，访问量高、信息容量大等特点， 包含了时尚生活、时事新闻、运动娱乐等众多栏目。综合门户网站定 位明确，首先以文字链接为主要内容、版式和色彩较为直观、简洁， 以便浏览者在最短的时间内连接到下一级页面。 现在国内综合门户网站的代表是新浪 （http:/）、 搜狐（http:/）、网易（http:/）和腾讯 （http:/）等。 1.1.2 网站的类型及定位网站的类型及定位 电子商务网站电子商务网站 电子商务网站是目前最具发展潜力的网站类型。电子商务网站可提供电子商务网站是目前最具发展潜力的网站类型。电子商务网站可提供 网上交易和管理等全过程的服务，因

5、为它具有广告宣传、咨询洽谈、网上交易和管理等全过程的服务，因为它具有广告宣传、咨询洽谈、 网上订购、网上支付、电子账户、服务传递、意见征询、交易管理等网上订购、网上支付、电子账户、服务传递、意见征询、交易管理等 各种功能。各种功能。 现在国内的电子商务网站的代表是淘宝（现在国内的电子商务网站的代表是淘宝（http:/）、）、 易趣（易趣（http:/）、拍拍（）、拍拍（http:/） 等。等。 视频分享网站视频分享网站 视频分享网站通常为用户提供视频播客、视频分享、视频搜索及所有视频分享网站通常为用户提供视频播客、视频分享、视频搜索及所有 数字视频内容的存储和传输服务。可供用户在线观看最新、最

6、热的电数字视频内容的存储和传输服务。可供用户在线观看最新、最热的电 视、电影和视频资讯等。视、电影和视频资讯等。 现在国内的视频分享网站的代表是优酷网现在国内的视频分享网站的代表是优酷网 （http:/）、土豆网（）、土豆网（http:/）、）、 酷酷6（http:/）等。）等。 1.1.2 网站的类型及定位网站的类型及定位 企业宣传网站企业宣传网站 企业宣传网站是开发工作中最常见的网站类型。企业借助网站推广企企业宣传网站是开发工作中最常见的网站类型。企业借助网站推广企 业形象、树立企业品牌、发布企业产品。在这类网站的设计中，既要业形象、树立企业品牌、发布企业产品。在这类网站的设计中，既要 考

7、虑商业性，又考虑到艺术性，企业宣传网站是商业性和艺术性的结考虑商业性，又考虑到艺术性，企业宣传网站是商业性和艺术性的结 合。好的网站设计，有助于企业树立好的社会形象，更好更直观地展合。好的网站设计，有助于企业树立好的社会形象，更好更直观地展 示企业的产品和服务。示企业的产品和服务。 下载网站下载网站 下载网站可以方便地为用户提供各种资料的下载。这类网站可以为用下载网站可以方便地为用户提供各种资料的下载。这类网站可以为用 户提供软件、歌曲、影视、图书等内容的下载服务。下载网站的开发户提供软件、歌曲、影视、图书等内容的下载服务。下载网站的开发 重点是资料的管理和分类。重点是资料的管理和分类。 现在

8、国内的下载网站代表是天空软件（现在国内的下载网站代表是天空软件（http:/）、）、 霏凡软件（霏凡软件（http:/）、太平洋下载）、太平洋下载 （http:/）等。）等。 1.1.2 网站的类型及定位网站的类型及定位 搜索引擎网站搜索引擎网站 搜索引擎网站是为用户提供内容搜索功能的网站。一般为用户提供新搜索引擎网站是为用户提供内容搜索功能的网站。一般为用户提供新 闻、网页、图片、视频、闻、网页、图片、视频、MP3等内容的快速搜索服务。如图等内容的快速搜索服务。如图1-6所示所示 是最大的中文搜索引擎网站：百度（是最大的中文搜索引擎网站：百度（http:/）。搜）。搜 索引擎网站的页面色彩和

9、布局非常简洁，但是具备强大的网站功能和索引擎网站的页面色彩和布局非常简洁，但是具备强大的网站功能和 丰富的网站内容。丰富的网站内容。 1.1.3 认识网页认识网页 网站是由若干网页构成的，这些网页按照一定的逻辑关系网站是由若干网页构成的，这些网页按照一定的逻辑关系 形成超级链接。下面介绍一下网页的基本知识。形成超级链接。下面介绍一下网页的基本知识。 网页基本元素网页基本元素 网站是一个整体，它是由网页及为用户提供的服务构成的，网站为浏网站是一个整体，它是由网页及为用户提供的服务构成的，网站为浏 览者提供的内容是通过网页展示出来的，使浏览者了解该网站为用户览者提供的内容是通过网页展示出来的，使浏

10、览者了解该网站为用户 提供的服务及展示的信息，浏览者浏览网站实际上就是浏览网页。提供的服务及展示的信息，浏览者浏览网站实际上就是浏览网页。 构成网页的基本元素主要包括文本、图片、水平线、表格、表单、超构成网页的基本元素主要包括文本、图片、水平线、表格、表单、超 链接及各种动态元素。链接及各种动态元素。 文本：文本是网页中最主要的信息载体，浏览者主要通过文字了解各文本：文本是网页中最主要的信息载体，浏览者主要通过文字了解各 种信息。种信息。 图片：图片可以使网页看上到更加美观。如果是新闻类或说明类网页，图片：图片可以使网页看上到更加美观。如果是新闻类或说明类网页， 插入图片后可以让浏览者更加快捷

11、的了解网页所要表达的内容。插入图片后可以让浏览者更加快捷的了解网页所要表达的内容。 水平线：在网页中主要起到分隔区域的功能，以上网页的结构更加美水平线：在网页中主要起到分隔区域的功能，以上网页的结构更加美 观合理。观合理。 1.1.3 认识网页认识网页 表格：表格是网页设计过程中使用最多的基本元素。首先表格可以显表格：表格是网页设计过程中使用最多的基本元素。首先表格可以显 示分类数据，其次使用表格进行网页排版可以达到更好的定位效果。示分类数据，其次使用表格进行网页排版可以达到更好的定位效果。 表单：访问者有时要查找一些信息或申请一些服务时需要向网页提交表单：访问者有时要查找一些信息或申请一些服

12、务时需要向网页提交 一些信息，这些信息就是通过表单的方式输入到一些信息，这些信息就是通过表单的方式输入到Web服务器，并根服务器，并根 据所设置的表单处理程序进行加工处理的。表单中包括输入文本、单据所设置的表单处理程序进行加工处理的。表单中包括输入文本、单 选按钮、复选框和下拉菜单等。选按钮、复选框和下拉菜单等。 超链接：超链接是实现网页按照一定逻辑关系进行跳转的元素。一般超链接：超链接是实现网页按照一定逻辑关系进行跳转的元素。一般 情况下在浏览网页时将鼠标指针指向具有超链接的文本或图片的时候，情况下在浏览网页时将鼠标指针指向具有超链接的文本或图片的时候， 鼠标指针就是变成小手的形状。鼠标指针

13、就是变成小手的形状。 动态元素：现在的网页中的动态元素可以说是丰富多彩，包括动态元素：现在的网页中的动态元素可以说是丰富多彩，包括GIF动动 画、画、Flash动画、滚动字幕、悬停按钮、广告横幅、网站计数器等。动画、滚动字幕、悬停按钮、广告横幅、网站计数器等。 这些动态元素使网页不再是一个静止的画面，可以说动态元素赋予了这些动态元素使网页不再是一个静止的画面，可以说动态元素赋予了 网页生命力，使网页活了起来。网页生命力，使网页活了起来。 1.1.3 认识网页认识网页 网站首页的基本结构网站首页的基本结构 网站首页是一个网站的门网站首页是一个网站的门 面，是构成网站的最重要面，是构成网站的最重要

14、 的网页。一般情况下，访的网页。一般情况下，访 问者在浏览器窗口的地址问者在浏览器窗口的地址 栏输入网站网址后，默认栏输入网站网址后，默认 打开的就是网站的首页。打开的就是网站的首页。 如图如图1-7所示，就是一个制所示，就是一个制 作完成的网站首页作完成的网站首页 （http:/），）， 其中包括了网站标志其中包括了网站标志 （Logo）、广告条）、广告条 （Banner）、导航栏、主）、导航栏、主 体内容和版权信息等内容。体内容和版权信息等内容。 Logo导航 栏 Bann er 横幅广 告 主体正 文 主体正 文 版权栏 友情链 接 图图1-7 1-7 网站首页网站首页 1.1.3 认识

15、网页认识网页 Logo：Logo（网站标志）的本意是标志、徽标。如果说一个网（网站标志）的本意是标志、徽标。如果说一个网 站是一个企业的网上家园，那么站是一个企业的网上家园，那么Logo就是企业的名片，是网站的就是企业的名片，是网站的 点睛之处。网站的点睛之处。网站的Logo有两种，一种是图有两种，一种是图1-7所示的网页左上角所示的网页左上角 标志标志Logo，另一种就是和其他网站交换链接时使用的链接，另一种就是和其他网站交换链接时使用的链接Logo。 Banner：Banner的本意是旗帜（横幅或标语）。网站上的广告的本意是旗帜（横幅或标语）。网站上的广告 有很多种，常见的有有很多种，常见

16、的有Banner广告、浮动广告、弹出窗口广告、文广告、浮动广告、弹出窗口广告、文 字广告、幻灯片广告等，由于一般都将字广告、幻灯片广告等，由于一般都将Banner广告条放置在网页广告条放置在网页 的最上面，所以的最上面，所以Banner广告条的广告效果可以说是最好的。广告条的广告效果可以说是最好的。 Fireworks、Photoshop、Flash等软件都可以用来制作等软件都可以用来制作Banner， 其中使用其中使用Flash制作出的广告效果最具冲击力，因为它能打造出酷制作出的广告效果最具冲击力，因为它能打造出酷 眩的动态视觉效果，大大激起访问者点击广告的欲望。眩的动态视觉效果，大大激起访

17、问者点击广告的欲望。 导航栏：导航栏就像是网站的提纲一样，它统领着整个网站的各导航栏：导航栏就像是网站的提纲一样，它统领着整个网站的各 个栏目或页面。它也是设计者最关心的问题之一，因为导航栏不个栏目或页面。它也是设计者最关心的问题之一，因为导航栏不 仅要美观大方，而且还要方便易用，这样才能让网站的访问者比仅要美观大方，而且还要方便易用，这样才能让网站的访问者比 较轻松地找到想要查看的网页内容。导航栏的设计方法有很多种。较轻松地找到想要查看的网页内容。导航栏的设计方法有很多种。 1.1.3 认识网页认识网页 横幅广告：横幅广告的作用和横幅广告：横幅广告的作用和Banner广告类似，只不过尺寸都比

18、广告类似，只不过尺寸都比 较大，适合在宣传网页重点内容和一些商业产品广告的时候使用。较大，适合在宣传网页重点内容和一些商业产品广告的时候使用。 主体正文：网页主体正文是展示网页内容最重要的部分，它将最主体正文：网页主体正文是展示网页内容最重要的部分，它将最 大限度呈现网页所包含的信息，以传达到访问者的眼中。这部分大限度呈现网页所包含的信息，以传达到访问者的眼中。这部分 也是访问者最关心的内容，所以它的设计风格要由网页内容来决也是访问者最关心的内容，所以它的设计风格要由网页内容来决 定，或沉稳大方，或轻松明快，都要考虑到访问者的阅读体验，定，或沉稳大方，或轻松明快，都要考虑到访问者的阅读体验，

19、尽量使浏览网页的过程是一个美好奇妙的旅程，这样才能吸引更尽量使浏览网页的过程是一个美好奇妙的旅程，这样才能吸引更 多访问者或多访问者或“回头客回头客”。 友情链接：友情链接是指互相在自己的网站上放对方网站的链接。友情链接：友情链接是指互相在自己的网站上放对方网站的链接。 必须要能在网页代码中找到网址和网站名称，而且浏览网页的时必须要能在网页代码中找到网址和网站名称，而且浏览网页的时 候能显示网站名称，这样才叫友情链接。友情链接是网站流量来候能显示网站名称，这样才叫友情链接。友情链接是网站流量来 源的根本。源的根本。 版权栏：这部分主要显示网站的版权信息，包括网站管理员的联版权栏：这部分主要显示

20、网站的版权信息，包括网站管理员的联 系地址或电话、系地址或电话、ICP备案信息等内容。备案信息等内容。 1.2 网站开发流程网站开发流程 建设网站是一个系统复杂的工程项目，本节介绍网站的开建设网站是一个系统复杂的工程项目，本节介绍网站的开 发流程，使大家对网站开发有一个概况的认识。发流程，使大家对网站开发有一个概况的认识。 1.2.1 网站总体策划网站总体策划 1.2.2 设计和制作素材设计和制作素材 1.2.3 建立站点建立站点 1.2.4 制作网页制作网页 1.2.5 测试和发布网站测试和发布网站 1.2.1 网站总体策划网站总体策划 1目标用户定位和网站的主题定位目标用户定位和网站的主题

21、定位 只有确定了网站的主题和浏览网页的对象，才能在网站的内容选取、美只有确定了网站的主题和浏览网页的对象，才能在网站的内容选取、美 工设计、划分栏目等方面尽力做到合理，并吸引住更多的眼球。按照访工设计、划分栏目等方面尽力做到合理，并吸引住更多的眼球。按照访 问对象的兴趣把网站内容收集起来，加以分类整理就可以大致上确定站问对象的兴趣把网站内容收集起来，加以分类整理就可以大致上确定站 点的主题和发展方向了。但切忌内容的面面俱到，太多太杂的内容反而点的主题和发展方向了。但切忌内容的面面俱到，太多太杂的内容反而 会给浏览者的信息查找带来很大的不便。会给浏览者的信息查找带来很大的不便。 2网站的整体风格

22、创意设计网站的整体风格创意设计 确定了网站的主题和浏览群，就可以来创意网站的风格了。一个好的创确定了网站的主题和浏览群，就可以来创意网站的风格了。一个好的创 意加上一定基础的美工，会使网站收到意想不到的效果，大大增加网站意加上一定基础的美工，会使网站收到意想不到的效果，大大增加网站 的回头率。风格（的回头率。风格（Style）是非常抽象的概念，往往要结合整个站点来看，）是非常抽象的概念，往往要结合整个站点来看， 而且不同的人的审美观都不同，对于风格的喜好也很不同。所以想使每而且不同的人的审美观都不同，对于风格的喜好也很不同。所以想使每 一个人都满意是不可能的，重要的是先让自己满意（当然自己的满

23、意有一个人都满意是不可能的，重要的是先让自己满意（当然自己的满意有 很大程度是建立在访问者满意上的），再照顾忠实的支持者。不管用什很大程度是建立在访问者满意上的），再照顾忠实的支持者。不管用什 么风格，风格永远是为主题服务的，也就是要让它做好衬托气氛的任务，么风格，风格永远是为主题服务的，也就是要让它做好衬托气氛的任务， 而不是单纯地照搬照抄别人的特色。而不是单纯地照搬照抄别人的特色。 整个网站应该使用统一的风格，包括背景颜色、字体颜色大小、导航栏、整个网站应该使用统一的风格，包括背景颜色、字体颜色大小、导航栏、 版权信息、标题、注脚、版面布局，甚至文字说明使用的语气这些方面版权信息、标题、注

24、脚、版面布局，甚至文字说明使用的语气这些方面 都要注意前后一致，或者说前后协调。都要注意前后一致，或者说前后协调。 1.2.1 网站总体策划网站总体策划 3网页的色彩搭配网页的色彩搭配 色彩在网站形象中具有重要地位，网站色彩总的应用原则应该是色彩在网站形象中具有重要地位，网站色彩总的应用原则应该是 “总体协调，局部对比总体协调，局部对比”。 下面介绍几种色彩选配方案。下面介绍几种色彩选配方案。 （1）暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色）暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色 调的运用，可使主页呈现温馨、和煦、热情的氛围。调的运用，可使主页呈现温馨、和煦、热情的氛

25、围。 （2）冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运）冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运 用，可使主页呈现宁静、清凉、高雅的氛围。用，可使主页呈现宁静、清凉、高雅的氛围。 （3）对比色调。即把色性完全相反的色彩搭配在同一个空间里。）对比色调。即把色性完全相反的色彩搭配在同一个空间里。 例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生 强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色 调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这

26、调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这 就要把握就要把握“大调和，小对比大调和，小对比”的重要原则，即总体的色调应该是的重要原则，即总体的色调应该是 统一和谐的，局部的地方可以有一些小的强烈对比。统一和谐的，局部的地方可以有一些小的强烈对比。 1.2.1 网站总体策划网站总体策划 4网站的层次结构和链接结构网站的层次结构和链接结构 建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题 明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸， 才能使楼房结构合理。

27、才能使楼房结构合理。 根据网站的主题需要和自己的实际能力来确定网站的栏目、导航根据网站的主题需要和自己的实际能力来确定网站的栏目、导航 层次及具体内容。在策划时还需要考虑的是技术的实现难易程度，层次及具体内容。在策划时还需要考虑的是技术的实现难易程度， 自己的时间和精力以及一些网站资料的来源等问题。自己的时间和精力以及一些网站资料的来源等问题。 确定具体栏目后就可以建立网站的文件目录。一个网站的内容会确定具体栏目后就可以建立网站的文件目录。一个网站的内容会 随着不断地更新而不断增多，如果把所有的文件都放在根目录中，随着不断地更新而不断增多，如果把所有的文件都放在根目录中， 会给日后的管理和更新

28、带来很多的不便。因此有必要在根目录中会给日后的管理和更新带来很多的不便。因此有必要在根目录中 建立多个子目录，来存放各栏目的相关文件。建立多个子目录，来存放各栏目的相关文件。 1.2.1 网站总体策划网站总体策划 5版面布局设计版面布局设计 网页的版面布局设计是一个网站成功与网页的版面布局设计是一个网站成功与 否的关键。特别是网站首页的版面布局否的关键。特别是网站首页的版面布局 就更为重要，访问者往往看到第一页就就更为重要，访问者往往看到第一页就 已经对网站有一个整体的感觉。首页是已经对网站有一个整体的感觉。首页是 全站内容的目录，是一个索引。一般首全站内容的目录，是一个索引。一般首 页上可放

29、置以下模块：网站名称页上可放置以下模块：网站名称 （Logo）、广告条（）、广告条（Banner）、主菜）、主菜 单（单（Menu）、搜索（）、搜索（Search）、友情）、友情 链接（链接（Links）、计数器（）、计数器（Count）、）、 版权（版权（Copyright）等。）等。 可以根据具体需要先确定在首页上放置可以根据具体需要先确定在首页上放置 的内容模块，然后拿起笔在纸上画出首的内容模块，然后拿起笔在纸上画出首 页布局的草图。设计完后还可以根据实页布局的草图。设计完后还可以根据实 际情况进行调整并最后定案。如图际情况进行调整并最后定案。如图1-8 所示，是一个网站的首页布局规划效

30、果所示，是一个网站的首页布局规划效果 图。图。 LogoBanner 导航栏 公告栏精彩内容推荐 横幅广告位 图文教程视频教程 课件下载远程网校 友情链接 版权栏 图1-8一个网站首页的布局规划 1.2.2 设计和制作素材设计和制作素材 设计和制作素材设计和制作素材 当网站策划好以后，下面的工作就是搜集和制作网页中所需要的素材，当网站策划好以后，下面的工作就是搜集和制作网页中所需要的素材， 包括网站包括网站Logo、Banner的制作，网页内容的相关资料，还有页面中所的制作，网页内容的相关资料，还有页面中所 需的特效代码的准备等。把素材放置在相应的文件夹，方便制作和日后需的特效代码的准备等。把

31、素材放置在相应的文件夹，方便制作和日后 的管理。的管理。 搜集的素材一般包括：搜集的素材一般包括： 跟主题相关的文字图片资料。跟主题相关的文字图片资料。 一些优秀的页面风格。一些优秀的页面风格。 开放的源代码。开放的源代码。 还有一些素材是需要自己设计和制作的，包括网站的还有一些素材是需要自己设计和制作的，包括网站的Logo、Banner、背景、背景 图片、列表图标、横幅广告等。这些素材的制作通常会采用以下软件来完成：图片、列表图标、横幅广告等。这些素材的制作通常会采用以下软件来完成： Photoshop Fireworks Flash 网站所需要的素材制作完成以后，还需要分门别类的把它们组织

32、起来，存储网站所需要的素材制作完成以后，还需要分门别类的把它们组织起来，存储 在各个类别的文件夹中。这样便于今后制作网站时应用和管理。在各个类别的文件夹中。这样便于今后制作网站时应用和管理。 1.2.3 建立站点建立站点 1安装和配置安装和配置IIS 2在在Dreamweaver中创建站点中创建站点 1.2.4 制作网页制作网页 1创建创建CSS样式样式 2制作网站首页制作网站首页 （1）对首页进行布局。）对首页进行布局。 （2）添加网页内容。）添加网页内容。 3制作网站的其他页面制作网站的其他页面 4制作超级链接制作超级链接 1.2.5 测试和发布网站测试和发布网站 网站创建好以后，只有发布

33、到网站创建好以后，只有发布到Internet上才能够让更多的上才能够让更多的 人浏览。在发布网站之前，还必须要做一个工作，就是测人浏览。在发布网站之前，还必须要做一个工作，就是测 试网站。如测试网页内容、链接的正确性和在不同浏览器试网站。如测试网页内容、链接的正确性和在不同浏览器 中的兼容性等。以免上传后出现这样或那样的错误，给修中的兼容性等。以免上传后出现这样或那样的错误，给修 改带来不必要的麻烦。改带来不必要的麻烦。 经过详细地测试，并完成最后的站点编辑工作后就可以发经过详细地测试，并完成最后的站点编辑工作后就可以发 布站点了。首先需要申请站点的国际域名和租用服务器空布站点了。首先需要申请

34、站点的国际域名和租用服务器空 间，然后通过间，然后通过FTP工具把网站上传到服务器上，这样就可工具把网站上传到服务器上，这样就可 以让世界上每一个角落的访问者浏览到站点的内容了。以让世界上每一个角落的访问者浏览到站点的内容了。 1.3 常用网页设计软件常用网页设计软件 制作网页需要专业的网页设计工具，最常用的工具是制作网页需要专业的网页设计工具，最常用的工具是 Dreamweaver，借助这个软件可以方便地对网页进行设，借助这个软件可以方便地对网页进行设 计和排版。网页中的图片需要使用计和排版。网页中的图片需要使用Photoshop或或 Fireworks进行设计和编辑，网络动画需要用动画制作

35、软进行设计和编辑，网络动画需要用动画制作软 件件Flash进行设计和制作。进行设计和制作。 1.3.1 网页制作与网站管理软件网页制作与网站管理软件Dreamweaver 1.3.2 平面设计软件平面设计软件Photoshop 1.3.3 网页图片设计与切图软件网页图片设计与切图软件Fireworks 1.3.4 网页动画设计软件网页动画设计软件Flash 1.3.1 网页制作与网站管理软件网页制作与网站管理软件 Dreamweaver Dreamweaver是一个是一个“所见即所得所见即所得”的网页制作和网站的网页制作和网站 管理开发工具，利用管理开发工具，利用Dreamweaver可以设计

36、、开发并维可以设计、开发并维 护符合护符合Web标准的网站和应用程序。无论网站开发者是喜标准的网站和应用程序。无论网站开发者是喜 欢直接编写欢直接编写HTML代码的驾驭感还是偏爱在可视化编辑环代码的驾驭感还是偏爱在可视化编辑环 境中工作，境中工作，Dreamweaver都会提供帮助良多的工具，丰都会提供帮助良多的工具，丰 富富Web创作体验。创作体验。 1.3.2 平面设计软件平面设计软件 Photoshop Photoshop是一款用于图像处理和平面设计的专业处理是一款用于图像处理和平面设计的专业处理 软件，它功能强大，实用性强。它不仅具备能编辑矢量图软件，它功能强大，实用性强。它不仅具备能

37、编辑矢量图 像与位图图像的灵活性，还能够与像与位图图像的灵活性，还能够与Dreamweaver和和Flash 软件高度集成，成为设计网页图像的最佳选择。软件高度集成，成为设计网页图像的最佳选择。 1.3.3 网页图片设计与切图软件网页图片设计与切图软件 Fireworks Fireworks以处理网页图像为特长，并可以轻松创作以处理网页图像为特长，并可以轻松创作GIF 动画。利用动画。利用Fireworks可以设计制作专业的网页图像和其可以设计制作专业的网页图像和其 他网页元素（比如导航条、网页按钮、他网页元素（比如导航条、网页按钮、GIF动画等），并动画等），并 且且Dreamweaver可

38、以和可以和Fireworks结合在一起进行网站结合在一起进行网站 开发。开发。 1.3.4 网页动画设计软件网页动画设计软件 Flash Flash是网页三剑客之中的是网页三剑客之中的“闪电闪电”，其以制作网页动画，其以制作网页动画 为特长，它做出的动画效果是其他软件无法比拟的。利用为特长，它做出的动画效果是其他软件无法比拟的。利用 Flash可以制作简单的网页动画、交互式动画、包含声音可以制作简单的网页动画、交互式动画、包含声音 效果的动画，甚至可以制作包含视频内容、复杂演示文稿效果的动画，甚至可以制作包含视频内容、复杂演示文稿 和应用程序以及介于它们之间的任何内容。和应用程序以及介于它们之

39、间的任何内容。 1.4 HTML入门入门 HTML是英文是英文Hypertext Marked Language的缩写，中文的缩写，中文 意思是超文本标记语言，是一种用来制作超文本文档的简意思是超文本标记语言，是一种用来制作超文本文档的简 单标记语言。所谓超文本，是指用单标记语言。所谓超文本，是指用HTML创建的文档可以创建的文档可以 加入图片、声音、动画、影视等内容，并且可以实现从一加入图片、声音、动画、影视等内容，并且可以实现从一 个文件跳转到另一个文件，与世界各地主机的文件连接。个文件跳转到另一个文件，与世界各地主机的文件连接。 HTML文件的基本结构文件的基本结构 HTML文档的结构文

40、档的结构 我的第一个网页我的第一个网页 Hello World! HTML 网页网页 头部部分头部部分 主体部分主体部分 标签标记标签标记 HTML 文档的开始和结束文档的开始和结束 网页标题网页标题 网页内容，可以是网页内容，可以是 文本、图像等文本、图像等 这部分包含文本、图像和链接。它包括在这部分包含文本、图像和链接。它包括在 标签内标签内 查看源代码查看源代码 这部分包括标题和其他说明信息。包括在这部分包括标题和其他说明信息。包括在 标签内标签内 使用记事本创建网页使用记事本创建网页 演示示例演示示例2 2：如何在记事本里创建网页如何在记事本里创建网页 使用记事本创建网页的步骤：使用记

41、事本创建网页的步骤： 1、打开记事本、打开记事本 2、输入、输入HTML代码代码 3、保存为、保存为*.html或或*.htm文件，注意格式问题文件，注意格式问题 4、打开网页预览效果、打开网页预览效果 使用记事本创建网页使用记事本创建网页 标签标签 网页标题网页标题 网页页面中出现乱码，那如何消除乱码使其正常显示？网页页面中出现乱码，那如何消除乱码使其正常显示？ 使用使用标签标签 简体中文：简体中文：gb2312 繁体中文：繁体中文：big5 纯英文网页：纯英文网页：iso-8859-1 可以避免页面可以避免页面 中的乱码中的乱码 页面背景色或背景图像页面背景色或背景图像 Hello Wor

42、ld！ 为了使页面美丽大方，网页背景要尽量地浅为了使页面美丽大方，网页背景要尽量地浅 Hello World! 查看源代码查看源代码 网页背景色彩网页背景色彩 网页背景图像网页背景图像 文本相关标签文本相关标签 字体、字号字体、字号 标题标签标题标签 标签标签 特殊符号特殊符号 行的控制行的控制 段落标签段落标签 换行标签换行标签 使用了使用了 换段了换段了 设置了字体的设置了字体的 大小和颜色大小和颜色 换行了换行了 特殊符号特殊符号 字体、字号相关标签字体、字号相关标签 标题标签标题标签 . #=1, 2, 3, 4, 5, 6 说明：说明：到到 字体大小依字体大小依 次递减次递减 一级标

43、题一级标题 二级标题二级标题 三级标题三级标题 四级标题四级标题 五级标题五级标题 六级标题六级标题 H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题 查看源代码查看源代码 . 字体、字号相关标签字体、字号相关标签 标签标签 特殊符号特殊符号 特殊字符特殊字符转义码转义码 空格空格 引号引号(“”“”) 小于小于() 版权号版权号( ) 字体的字体的 大小值大小值 字体的字体的 颜色颜色 字体的字体的 类型类型 字体、字号相关标签字体、字号相关标签 查看源代码查看源代码 . 手机充值、手机充值、IP卡卡/电话卡电话卡 移动移动| 100 | 联通联通 | 50 Copyr

44、ight 2007 淘宝网淘宝网 All rights. 空格效果空格效果 . 淘宝集市欢迎您！淘宝集市欢迎您！ 淘宝网首届翠友会！淘宝网首届翠友会！ 行的控制相关标签行的控制相关标签 段落标签段落标签 段段(Paragraph) (可以看作是空行可以看作是空行) 换行标签换行标签 换行换行 查看源代码查看源代码 换段了换段了 换行了换行了 图像标签图像标签 常见的图片格式介绍常见的图片格式介绍 图像类型图像类型优点优点缺点缺点适用场合适用场合制作工具制作工具 *.jpg体积小，比较清晰体积小，比较清晰有损压缩有损压缩 、 画面失真画面失真 网页图片网页图片Photoshop *.gif支持支

45、持 Internet 标准标准 , 支持无损耗压缩和支持无损耗压缩和 透明度，很流行透明度，很流行 支持有限的支持有限的 透明度透明度,效果效果 不如别的图不如别的图 像像 网页图片网页图片Photoshop *.swf体积小体积小,便于网络传便于网络传 输输 制作麻烦制作麻烦网页动画网页动画 Flash *.bmp支持支持 24 位颜色深度，位颜色深度， 兼容性好兼容性好 不支持压缩不支持压缩 容量大容量大 桌面墙纸桌面墙纸photoshop 图像标签图像标签 图像的基本语法图像的基本语法 查看源代码查看源代码 鼠标移到图像上，出鼠标移到图像上，出 现的提示性文字现的提示性文字 图像的图像的

46、 位置位置 图像的图像的 宽度宽度 图像的图像的 高度高度 为图像添加的提示性文字为图像添加的提示性文字 图像标签图像标签 图像与文本的对齐方式图像与文本的对齐方式 图像与文本居中对图像与文本居中对 齐齐,还可以取还可以取 top, bottom 值值 . 请点击广告进入明星专区请点击广告进入明星专区 查看源代码查看源代码 图像和文本居图像和文本居 中对齐中对齐 小结小结1 1 字号大小为字号大小为3 练习答案练习答案练习代码练习代码 编写如下图所示效果对应的编写如下图所示效果对应的html代码代码 文字布局文字布局 内容分隔内容分隔标签标签 项目列表和编号项目列表和编号 有序列表有序列表 无

47、序列表无序列表 预格式文本预格式文本标签标签 水平分隔线水平分隔线 有序列表有序列表 无序列表无序列表 用了预先定义用了预先定义 好的格式好的格式 如何使用内容分隔如何使用内容分隔标签标签 线的厚度值线的厚度值线的宽度线的宽度 查看源代码查看源代码 标签用于在页面上绘制水平线标签用于在页面上绘制水平线 线的颜色线的颜色 如何使用列表如何使用列表 无序列表语法无序列表语法 列表项内容列表项内容 有序列表语法有序列表语法 列表项内容列表项内容 查看源代码查看源代码 注册步骤：注册步骤： 填写信息填写信息 收电子邮件收电子邮件 注册成功注册成功 新人上路指南新人上路指南 如何激活会员名？如何激活会员

48、名？ 如何注册淘宝会员？如何注册淘宝会员？ 注册时密码设置有什么要求注册时密码设置有什么要求？ 支付宝认证支付宝认证 预格式文本预格式文本标签标签 如何实现如下图所示的页面中的文字效果？如何实现如下图所示的页面中的文字效果？ 使用使用 标签可以实现标签可以实现 如何使用预格式文本如何使用预格式文本标签标签 腾讯腾讯-QQ币币/QQ幻想幻想-30元卡元卡 一一 口口 价：价：26.45元元 运费：卖家承担运费运费：卖家承担运费 剩余时间：剩余时间：5天天 宝贝类型：宝贝类型： 全新全新 卖主声明：货到付款，可试用卖主声明：货到付款，可试用10天！天！ 查看源代码查看源代码 HTML中代码格式与浏

49、中代码格式与浏 览器中显示效果一样览器中显示效果一样 页面链接页面链接标签标签 链接到其他页面链接到其他页面 免费注册免费注册 链接内容链接内容 链接的地址链接的地址 链接到其他页面链接到其他页面 免费注册免费注册 登录登录 单击单击”免费注册免费注册” 之后链接到的页面之后链接到的页面 查看源代码查看源代码 页面链接页面链接标签标签 链接到其他页面链接到其他页面 相对路径相对路径 指定从根目录到文件的完整路径。指定从根目录到文件的完整路径。 绝对路径绝对路径 指定相对于当前文件的文件位置。指定相对于当前文件的文件位置。 在同一个文件夹下有两个在同一个文件夹下有两个html文件，从一个文件超文

50、件，从一个文件超 链接到另一个文件的路径有几种方式？链接到另一个文件的路径有几种方式？ 两种方式：相对路径和绝对路径两种方式：相对路径和绝对路径 页面链接页面链接标签标签 要链接到同一目录要链接到同一目录 (C:HTML) 下的页面，可编写下的页面，可编写 或或 相对路径名相对路径名 绝对路径名绝对路径名 页面链接页面链接标签标签 要实现如下图所示的超链接效果，怎么办？要实现如下图所示的超链接效果，怎么办？ 演示示例演示示例3 3：演示锚链接的例子演示锚链接的例子 使用锚记标签使用锚记标签 页面链接页面链接标签标签 链接到本页面链接到本页面 锚记标签用于使用户锚记标签用于使用户“跳跳”到文档的

51、某个部分到文档的某个部分 HTML 的的 NAME 属性用于创建锚标记属性用于创建锚标记 主题名称主题名称 为达到这种跳转效果，请在为达到这种跳转效果，请在 HREF 参数中使用该标记参数中使用该标记 主题名称主题名称 演示示例演示示例4 4：演示锚链接的例子演示锚链接的例子 链接到其他页面链接到其他页面 新人上路新人上路 新人上路指南新人上路指南 1、定义锚标记、定义锚标记 2、链接到锚标记所在位置、链接到锚标记所在位置 页面链接页面链接标签标签 电子邮件链接电子邮件链接 要链接电子邮件，可在链接标签中插入要链接电子邮件，可在链接标签中插入”mailto:邮箱地址邮箱地址” 站长信箱站长信箱

52、 演示示例演示示例5 5：演示电子邮件链接演示电子邮件链接 电子邮件链接电子邮件链接 站长信箱站长信箱 单击单击”站长信箱站长信箱” 链接后的输出结果链接后的输出结果 任何正确的电子邮任何正确的电子邮 箱地址均可箱地址均可 滚动滚动标签标签 滚动文字或图像滚动文字或图像 滚动延迟滚动延迟 时间时间 滚动对象的滚动对象的 方向方向 说明：说明： scrolldelay：表示滚动延迟时间，默认值为表示滚动延迟时间，默认值为90。 direction：表示滚动的方向，默认为从右向左。表示滚动的方向，默认为从右向左。 查看源代码查看源代码 滚动滚动标签标签 水平滚动水平滚动 垂直滚动垂直滚动 Avon

53、化妆品化妆品 雅诗兰黛雅诗兰黛 水平向水平向 左移动左移动 垂直向垂直向 上移动上移动 图片和文字同时图片和文字同时 垂直向上移动垂直向上移动 声明滚动声明滚动 文字结束文字结束 声明滚动文字声明滚动文字“水平滚水平滚 动动”开始，并且将会以开始，并且将会以 默认方式从右向左滚动默认方式从右向左滚动 小结小结2 2 有序列表有序列表OL 无序列表无序列表UL 练习答案练习答案练习代码练习代码 编写如下图所示效果对应的编写如下图所示效果对应的html代码代码 为什么使用表格为什么使用表格 表格应用场合表格应用场合 论坛论坛 门户网站门户网站 购物网站购物网站 论坛中应用论坛中应用 表格表格 门户

54、网站应门户网站应 用表格用表格 购物网站购物网站 应用表格应用表格 表格的基本结构表格的基本结构 行行 列列 单元格单元格 在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像 表格的基本语法表格的基本语法 单元格内容单元格内容 . 定义表格定义表格 定义列定义列 定义行定义行 border用来设置表用来设置表 格边框尺寸大小格边框尺寸大小 如何创建表格如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠普 华硕华硕 查看源代码查看源代码 什么是跨行跨列的表格什么是跨行跨列的表格 跨跨3列列 跨跨3行行 下图中的表格哪里用了跨行？哪里用

55、了跨列？下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列跨了几行几列? ? 跨多列的表格跨多列的表格 学生成绩表学生成绩表 英语英语 数学数学 语文语文 95 98 89 COLSPAN=“n” 属性表示跨多少列？属性表示跨多少列？ 查看源代码查看源代码 跨多行的表格跨多行的表格 早上菜谱早上菜谱 食物食物 鸡蛋鸡蛋 饮料饮料 牛奶牛奶 甜点甜点 开心粉开心粉 rowspan =“n” 属性表示跨多少行？属性表示跨多少行？ 查看源代码查看源代码 手机充值、手机充值、IP卡卡 办公设备、文具办公设备、文具 各种卡的总汇各种卡的总汇 铅笔铅笔 彩笔彩笔 打印打印 刻录刻录 如何创建跨行跨列的

56、表格如何创建跨行跨列的表格 查看源代码查看源代码 小结小结3 3 编写如下图所示效果对应的编写如下图所示效果对应的html代码代码 第一行第一个第一行第一个 格子跨了格子跨了2行行 此格子此格子 跨了跨了3列列 练习答案练习答案练习代码练习代码 什么是表格的美化修饰什么是表格的美化修饰 背景图片背景图片 背景色背景色 表格的高度表格的高度 表格的宽度表格的宽度 文字对文字对 齐方式齐方式 根据理解根据理解,下面表格应该从哪些方面进行美化修饰？下面表格应该从哪些方面进行美化修饰？ 如何设置表格的尺寸和边框如何设置表格的尺寸和边框 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设

57、备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 width用来设置表格的宽度用来设置表格的宽度 height用来设置表格的高度用来设置表格的高度 border用来设置表用来设置表 格边框尺寸大小格边框尺寸大小 bordercolor用来设用来设 置表格边框颜色置表格边框颜色 查看源代码查看源代码 如何设置背景如何设置背景 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 background属性用来设置表格的背景图片属性用来设置表格的背景图片 bgcolor属性用来设置表格、行、列属性用来设置表格、行、列 的背景色。的背景色。“#EBEFFF”是用是用RGB 表示

58、的一种颜色值，表示的一种颜色值，RGB指的是红指的是红 绿蓝绿蓝 ，下图就是，下图就是RGB颜色对照表颜色对照表 。 查看源代码查看源代码 如何设置对其方式如何设置对其方式 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表属性用来设置表 格、行、列的对齐方式格、行、列的对齐方式 查看源代码查看源代码 为什么要使用填充属性为什么要使用填充属性 单元格里的内容太靠近边线，怎么办？单元格里的内容太靠近边线，怎么办？ 未填充的效果，字与单元格边未填充的效果，字与单元格边 框之间的距离靠得太近框之间的距离靠得太近 什

59、么是填充属性和间距属性什么是填充属性和间距属性 border(边框的厚度边框的厚度) 内容内容 内容内容内容内容 内容内容 cellpadding (单元格填充单元格填充) cellspacing (单元格间距单元格间距) 如何使用填充、间距属性如何使用填充、间距属性 border(边框的厚度边框的厚度) cellpadding (单元格填充单元格填充) cellspacing (单元格间距单元格间距) 查看源代码查看源代码 如何设置表格的填充属性如何设置表格的填充属性 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 . cellspacing属性用来设属性用来设 置表格置表格

60、内框宽度内框宽度 cellpadding属性用来属性用来 设置表格内填充距离设置表格内填充距离 查看源代码查看源代码 填充之后填充之后 的效果的效果 小结小结4 4 表格的高度、宽表格的高度、宽 度、背景图像、度、背景图像、 边框和填充属性边框和填充属性 行的背景色行的背景色 单元格居单元格居 中对齐中对齐 练习答案练习答案练习代码练习代码 编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码 如何实现图文内如何实现图文内 容的布局，达到容的布局，达到 如左图所示页面如左图所示页面 的效果？的效果？ 分析上图所示页分析上图所示页 面，应该用什么面，应该用什么 进行布局？进行布局？