網站设计案例.doc

目 录 第1章 网站规划与网页设计 3 第2章 DIV+CSS布局 18 第3章 网页内容排版 36 第4章 表格布局 57 第5章 模板 68 第6章 布局表格布局 78 第7章 框架布局 84 第8章 浮动框架 91 第9章 图像制作与处理 98 第10章 JavaScript应用 111 第11章 行为应用 127 第12章 层和时间轴动画 139 第13章 ASP环境配置与表单创建 152 第14章 注册登录 167 第15章 网上留言和信息显示 181 第16章 后台管理系统架设和使用 190 第17章 网站测试完善及发布维护 196 第1章 网站规划与网页设计 【知识能力目标】 了解网站开发流程、规划的要求、网页设计的原则 了解常见网页制作软件特点和用处以及Dreamweaver的操作环境 会规划网站、建立站点 会操作Dreamweaver环境 能制作简单网页并保存、打开、预览网页 会进行本地站点的基本管理 【任务描述】 1．规划网站 从网站的需求分析、主题和内容、名称、整体风格、结构等方面对电子系网站项目进行整体规划，同时设计出主要网页的版式和网站Logo。 2．熟悉网站开发环境 启动Dreamweaver后熟悉编辑界面上的标题栏、菜单栏、文档工具、文档窗口、功能面板及状态栏及其功能。 3．站点管理 创建电子系网站站点，并对本地站点进行管理和操作。 图1-1 本地站点效果图 4．制作站长简介网页 根据自身具体情况制作站长简介网页。 图1-2 站长简介网页效果图 【预备知识】 1．1 网站和网页概述 1．与网站和网页有关的基本术语 WWW是World Wide Web的简称，常称为3W 或“The Web”或“万维网”。它是一种建立在Internet上的全球性的、交互的、动态、多平台、分布式的图形信息系统，遵循HTTP协议（HyperText Transfer Protocol），主要以“超文本”（Hypertext）或“超媒体”（Hypermedia）的形式提供信息。浏览网页是WWW操作之一。 URL：即Uniform Resource Locator，它是Internet上信息资源的定位方法。 Server与Browser：即服务器与浏览器。用户必须通过浏览器连接到Web服务器上，才能阅读Web服务器上的文件。 网站（即站点）：是Internet上提供Internet服务的一个位置，该位置由独一无二的IP地址或域名描述。 网页：是指站点中由文本、图像、超链接、动画、声音、视频等内容组成的文档。 Hypertext （超文本）：是一种可以指向其它文件的文字或图像，这种功能称为超级链接（HyperLink）。 HTML语言：是用来描述组成网页的各个元素的语言。 HTTP（ Hypertext Transfer Protocol ）：是一种网络上传输数据的协议，专门用于传输万维网中的信息资源。 ASP页面：包含程序的网页。ASP现已发展成一门技术，该技术提供一个服务器端的脚本执行环境，可以执行包含程序（由ASP内置对象和编程语言编写）的页面。 CSS（Cascading Style Sheet）：用于控制表格、图片、文本等元素的效果。 2．网站建立方式 建立网站时可使用自己的Web服务器，也可采用托管服务器。因接入互连网要租用国际信道和电话线，并需建立中转站、购置一系列计算机设备，费用昂贵，故它们由ISP代劳。然后，ISP再向本地用户提供接入服务，ISP是提供接入服务的中介。托管服务器只是其中的一项服务，如某单位将服务器放在ISP机房由ISP维护，单位则通过低速线路（64KB—155MB/S）进行网站的远程管理与维护，然后单位向ISP交纳计算机机架的空间租用费和分摊的接入费用。还可采用虚拟主机，即租用ISP硬盘空间，有独立的域名和共享或独立的IP地址。按空间大小和网络宽带资源收费。优点是费用低，缺点是不支持高访问量。它适用于小型网站，如企业网站。个人网站也采用虚拟主机或虚拟目录存放到收费或免费的空间中，也可以拥有独立的域名。 3．中小型网站开发的一般流程 中小型网站开发通常包括3个阶段： （1）网站规划与网页设计阶段 网站需求分析 确定网站主题和内容 规划网站的整体风格 规划网站结构 设计页面版式 （2）网页制作阶段 页面布局 页面内容排版处理（根据需要实现动态功能） 各个网页相链接 （3）测试发布与管理维护阶段 网站测试与完善 网站空间申请、发布、推广 网站维护、更新 1．2 Dreamweaver 概述 1．常用工具简介 常用的网页制作软件工具有：Frontpage、Homesite、Hotdog、HomePage（常用于制作包含多个分栏的页面）、Dreamweav