商务网页设计与制作.pptVIP

学习目标1．熟悉Dreamweaver站点的设置方法2．掌握Dreamweaver的使用3．掌握使用表格工具布局网页的方法4．掌握常见网页元素中基本样式的设定5．掌握子页面链接的创建方法6．掌握常见的HTML标记语言的使用方法项目概述

小张承接了长沙市碧雅园花卉苗木基地网站建设项目后，经过前期需求分析，网页美工小王已经绘制出网站首页效果图（如图4-1长沙市碧雅园花卉苗木基地网站首页）。经理要求网页设计师小张依据效果图，使用表格制作该苗木基地网站静态首页，以便于编写脚本代码，进而制作出一个完整的动态网站。最终网站首页效果图将本项目的实施分解为以下几个子任务：任务一：本地站点配置任务二：使用表格制作网页任务1：本地站点配置

1、Dreamweaver安装Dreamweaver是Macromedia公司早期推出的“网页三剑客”之一。“网页三剑客”指Dreamweaver、Flash、Fireworks这三个软件，它们集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它是集网页制作、网站管理功能于一体、提供所见即所得界面的网页编辑器，也是第一套为专业网页设计师特别开发的可视化网页开发工具。2010年前后，Macromedia公司被Adobe公司收购，DreamweaverCS5是目前最新的版本。启动DreamweaverCS5，新建一个HTML网页，工作界面如下图所示。左边窗口中的代码是HTML，即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页最基础的语言，它可以直接由浏览器执行。任务1：本地站点配置

空白页面的代码如下：!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENHTML!--HTML文件开始HEAD!--HTML文件头开始!--头部信息BODY!--HTML文件体开始文档主体,正文部分/BODY!--HTML文件体结束/HTML任务1：本地站点配置

网站的首页文档一般命名为index.html或者index.htm，也可以是default.html或default.htm。在不特别指定的情况下，打开一个网站时，看到的第一个页面就是该文档对应的页面。网页文件的命名规则：所有的文件名一律使用英文小写，这样就不会因为服务器系统不同而混淆。不可以使用中文。任务1：本地站点配置

2、Dreamweaver站点的设置本地站点创建完成后，在【文件】面板的【本地文件】窗格中，会显示该站点的根目录，如下图所示。新建站点可以有效解决绝对路径与相对路径的问题。任务1：本地站点配置

HTML指超文本标记语言。超文本是指一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。它是超级文本的简称。

Web服务器(WebServer)

Web服务器可以解析(handles)HTTP协议。当Web服务器接收到一个HTTP请求(request)，会返回一个HTTP响应(response)，例如送回一个HTML页面。在Internet上，每台计算机都有一个唯一的IP地址，计算机之间也只能通过IP地址来通讯，IP地址通常是由4个字节来表示，例如：94，用户不可能记住这么长的IP地址。为了方便人们的记忆，Internet采用域名来标识计算机，通过DNS（域名系统）将域名翻译成IP地址，每一级的域名都有对应的DNS域名服务器。

文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。在网页设计中通过路径可以表示链接，插入图像、Flash、CSS文件的位置。绝对路径：即物理路径，就是硬盘上文件的路径，比如下面的文件：d:\dreamdu\exe\1.html相对路径：是从当前路径开始的路径，假如当前路径为d:\dreamdu\exe要描述上述路径，只需输入1.html3、网站文件夹管理按栏目内容分别建立子文件夹。资源按类存放在不同的文件夹中。文件夹的层次不要太深,以免系统维护时查找麻烦。避免用中文命名文件或文件夹。避免使用过长的文件名。命名应尽量有明确的意义。任务1：本地站点配置

任务2：使用表格布局配置网页

1、网页表格的规划通过分析，网页可以分成几个大的区域，如下图所示：整个网页