网页制作基础教程(补充)(dreamweaver cs3

《网页制作基础教程(补充)(dreamweaver cs3》由会员分享，可在线阅读，更多相关《网页制作基础教程(补充)(dreamweaver cs3（75页珍藏版）》请在金锄头文库上搜索。

1、网页制作基础教程（ Dreamweaver CS3）预备知识学习的主要内容网页文件网页一般又称HTML文件；通常看到的网页，大都以HTM或HTML后缀结 尾的文件；另外还有以CGI、ASP、PHP和JSP后缀结尾的 。学习的主要内容网页分类根据生成方式，网页大致可以分为静态网页和动态网 页两种。静态网页是网站建设初期经常采用的一种形式；网站建设者把内容设计成静态页面，访问者只能被动 地浏览网站建设者提供的网页内容。学习的主要内容静态网页的特点网页内容不会发生变化，除非网页设计者修改了网页的内容。不能实现和浏览网页的用户之间的交互。学习的主要内容动态网页网络技术日新月异，许多网页文件的扩展名不再

2、是.htm，还有.php 、.asp等，这些都是采用动态页技术制作出来的。特点动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户 登录、搜索查询、用户管理、订单管理等。学习的主要内容1、html标记语言2、制作网页的工具Microsoft FrontPage Netscape编辑器Dreamweaver网络与网站设计基础知识1、Internet概述2、网页设计概述3、网站设计概述1、Internet概述Internet即国际计算机互联网，在中国也称“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互 联网。它是目

3、前全世界最大的网络，包含着丰富多彩的信 息，并提供方便快捷的服务。它缩短了人们之间的距 离。1、Internet概述通过Internet，用户可以与接入Internet 的任何一台计算机进行交流，如发邮件、聊天 、通话等。在这一节中，主要介绍Internet的工作原 理、Internet发展简史及其提供的主要服务等 基础知识，让用户对Internet有个大致的了解 。1、Internet概述Internet的工作原理Internet是一种全球范围的基于分组交换原理和 TCP/IP的计算机网络。它将信息进行分组（分割为许 多小数据包）后以数据包为单位进行传输。Internet在进行信息传输时要完

4、成的任务主要有 两项：一是正确分割源文件，以及在目的地将同一源 文件的数据包准确地重组起来；二是将数据包准确地 送往目的地。1、Internet概述Internet发展简史Internet起源于20世纪60年代。1968年，基于分组交换原理的计算机网络ARPANET。1983年 ，TCP/IP协议的建立，使计算机通信有了统一的标准 。这是计算机网络发展史上的一个里程碑，网络从此 进入高速发展的时代。1、Internet概述 Internet提供的主要服务1电子邮件2文件的下载和上传3信息查询4文件传输5网上聊天6BBS电子公告栏7网上游戏8个人主页空间9电子商务1、Internet概述IP地址

5、和域名 1、IP地址在Internet上，每一个节点都依靠唯一的IP地址 互相区分和相互联系。IP地址共占用32位，一般以4个 十进制数字表示，每个数字之间用小圆点（.）隔开， 例如，“201.112.10.105”，这种记录方法称为“点 数”记号法。通常用IP地址标识一个网络和与网络 连接的一台主机。1、Internet概述IP地址和域名 2、域名与网络上的数字型IP地址相对应的字符型地址，就被称为域名。 TCP/IP中包含着一个域名服务（Domain Name Service，DNS）。 DNS通过一个名为“解析”的过程将域名转换为IP地址，或者将IP地 址转换为域名。名字比用点分隔的十进

6、制数IP地址更好记些。既然计 算机仍然使用IP地址，那么就必须有一种方法在二者之间进行转换。 DNS使用查找表格的方法来将二者的值关联起来。1、Internet概述IP地址和域名 2、域名下表1-1中说明了部分组织的域命名约定，和部分国家的域命名约定。1、Internet概述组 织 类 型域命名约定国 家域命名约定国 家域命名约定商业业com澳大利亚亚au莫桑比克mz教育edu加拿大ca尼日利亚亚ng政府gov中国cn波兰兰po国际际条约组织约组织int芬兰兰fi卡塔尔qa网络络提供商net法国fr萨萨摩亚亚群岛岛ws非营营利性组织组织org匈牙利hu瑞典se意大利it阿拉伯联联合酋长长国ae

7、日本jp英国uk约约旦jo美国us1、Internet概述万维网WWWWWW和浏览器的基本概念WWW是World Wide Web的缩写，又称3W或 Web，中文译名为“万维网”。浏览器实际上就是用于网上浏览的应用程序，其 主要作用是显示网页和解释脚本。1、Internet概述万维网WWWWWW和浏览器的基本概念浏览器种类很多，目前常用的有Internet Explorer（简称IE ）和Netscape两种。下图1-2所示的是IE浏览器的工作界面。1、Internet概述1、上网了解Internet提供的服务，并进 行具体实现。2、浏览熟悉网站，根据域名区分网站属于 的类型。2、网页的设计网

8、页的基本元素常见的网页元素包括文本、图片、超链接、表格、导航栏、动画和交互表单。2、网页的设计网页的基本元素1文本2图片和动画3声音和视频4超链接5导航栏6表格7表单8其他常见元素2、网页的设计网页布局网页是否精彩，能否吸引浏览者，除了色 彩的搭配、文字的变化、图片的处理等因素外 ，还有一个非常重要的因素网页的布局。2、网页的设计网页布局的基本概念对于初学者，最好应先了解网页布局的基本概念。页面尺寸分辨率为800600：页面的显示尺寸为：780428个象素；分辨率为1024768：页面的显示尺寸为：1007600个象素。 2、网页的设计网页布局整体造型这里是指页面的整体形象，这种形象应该是一个

9、整体，图形 与文本的结合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，设计 者可以充分运用自然界中的各种形状及它们的组合，如矩形、圆 形、三角形、菱形等。2、网页的设计网页布局的一般步骤（1）构思根据网站内容的整体风格，设计版面布局。不要讲究细节，只要有一个轮廓。（2）初步填充内容这一步就要把一些主要的内容放到网页中，例如，网站的标志、广告条、菜单、 导航条、计数器等。 （3）细化在这一步，设计者可以利用网页编辑工具把草案做成一个简略的网页，当然，对 每一种元素所占的比例也要有一个详细的数字，以便以后修改。2、网页的设计网页布局的原则在构思和设计的过程中，设计者还必须要掌握

10、以下几 项原则。（1）平衡性（2）对称性（3）疏密度2、网页的设计网页布局类型网页布局大致可分为“国”字型、拐角 型、标题正文型、左右框架型、上下框 架型、综合框架型、封面型、Flash型、 变化型等。2、网页的设计 “国”字型布局“国”字型也可以称为“同”字型，是一些大型网站经常使用的类型。最上面：网站的标题及横幅广告条，接下来就是网站的主要内容左右：分列一些小条内容，中间：主要部分，与左右一起罗列到底，最下面：网站的一些基本信息、联系方式、版权声明等。这种布局是网上最常见的一种布局类型。http:/ 等内容，右面是很宽的正文，最下面也有一些网站的辅助信息。在这种布局中，左侧一般是导航链接。

11、http:/ 部分大型论坛和网页教程都使用这种布局，有一些个人网站和企 业网站也喜欢采用这种布局。2、网页的设计上下框架型布局上下框架型布局与左右框架型布局类似，区别仅仅在于这种布局分为上、下两部分。综合框架型布局综合框架型布局是左右框架型布局与上下框架型布局的结合，相对较复杂，类似于拐 角型布局，只是采用了框架结构。封面型布局封面型布局一般出现在一些网站的首页，由一些精美的平面设计结合一些小的动画组 成，在页面中放上几个简单的链接或者仅仅是一个“进入”的链接，甚至直接在图片上加 上链接而没有任何提示。这种布局需要精心设计，能给人带来赏心悦目的感觉。2、网页的设计配色原则网站给人的第一印象来自

12、于视觉，因此，确定网站的色彩相当重要。不同的色彩搭配产 生不同的效果，从而使网站给人以不同的视觉 效果，吸引访问者的注意力。2、网页的设计1色彩的形成简单地说，色彩是一种视觉，是光作用于 眼睛的结果。红、绿、蓝色的光被称为三原色 光。 2色彩的特征色彩的基本特征主要有色调、亮度和饱和 度三个。色调表现色彩的种类，亮度表现色彩 的明亮程度，饱和度表现色彩的鲜艳程度。2、网页的设计配色原则3色彩的心理感觉自然界的各种色彩会在人的心中留下不同 的印象，产生不同的心理感觉，例如：红色是一种激奋的色彩，具有刺激 效果，能使人产生冲动、愤怒、热情、活力的 感觉；2、网页的设计 配色原则4色彩的分类按照色彩

13、对人们心理的影响可以进行以下分类。暖色系：红、橙、橙黄、黄等色彩让人觉得温馨、和煦 、热情。中性系：黄绿、绿等色彩让人觉得舒适、和谐。冷色系：青绿、蓝绿、蓝等色彩让人觉得宁静、清凉、 高雅。2、网页的设计例子设计出售冷食的虚拟店面，应使用消极而沉静的颜色 ，使人从心理上感觉凉爽一些。如果要制作一个休闲主题的个人站点，不妨将网站色 彩设计为天蓝色，如以海水为背景，再搭配一些鱼儿的效 果会更好。2、网页的设计配色原则5色彩的选择和搭配在制作网站的时候，色彩的选择和搭配非常重要。一个网站格调的确定，往往取决于色 彩的选择与搭配是否适当。2、网页的设计网页布局的常用技术（1）CSS（层叠样式表）布局C

14、SS对于初学者来说显得有点复杂，但它的确是一种好的布局方法。（2）表格布局优势：能对不同对象加以处理，而又不用担心不同对象之间的影响。缺点：当设计者使用了过多的表格时，会影响页面的下载速度。2、网页的设计（3）框架布局由于框架技术的兼容性问题，框架结构的页 面不太受欢迎。但从布局上考虑，框架结构不 失为一个好的布局方法。（4）div+css布局div+css 是进阶段的，分布模式很随意。 2、网页的设计1、上网查看不同的网页，分析其网页的组 成元素有哪些。2、打开一些您熟悉的网站，浏览网页，分 析其属于哪种布局和色彩搭配。3、根据自己的经验和体会，谈谈对网页配 色的看法。3、网站设计网站设计的

15、主要任务网站架构设计；以浏览器为客户端的Web应用程序开发；系统测试及网站发布。3、网站设计确定网站的类型门户网站门户网站（Portal Site）集合了众多内容，提供多 样服务。 比较知名的中文门户网站有三类：一类是像新浪、搜 狐、网易这样完全由国内网络公司经营的网站，网站内 容除了搜索引擎外，还包括新闻、娱乐、游戏、文化、 体育、健康、科技、财经、教育等若干版块，以及网上 短信、个人主页空间、免费邮箱等服务项目；3、网站设计门户网站第二类是境外投资的网站，如中文雅虎、美国在线 等，网站内容以新闻和娱乐为主；第三类是国内传统媒体办的网站，以人民网、新华 网、央视国际为代表，以提供新闻和时事评论为主。3、网站设计普及型网站此类网站包括企业网站、大学网站、政府网站及数量众多的个人网站。 3、网站设计电子商务类网站电子商务类网站分为B2B（商家对商家） 和B2C（商家对个人客户）两种，按照交易过 程可分为商品检索、商品采购、订单支付三个 阶段。3、网站设计电子商务类网站具有如下功能：商品发布；商品选购；购物车；在线交易功能；商