网站设计案例

1目录第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环境配置与表单创建................................1522第14章注册登录...........................................................167第15章网上留言和信息显示.........................................181第16章后台管理系统架设和使用..................................190第17章网站测试完善及发布维护..................................1963第1章网站规划与网页设计【知识能力目标】1.了解网站开发流程、规划的要求、网页设计的原则2.了解常见网页制作软件特点和用处以及Dreamweaver的操作环境3.会规划网站、建立站点4.会操作Dreamweaver环境5.能制作简单网页并保存、打开、预览网页6.会进行本地站点的基本管理【任务描述】1．规划网站从网站的需求分析、主题和内容、名称、整体风格、结构等方面对电子系网站项目进行整体规划，同时设计出主要网页的版式和网站Logo。2．熟悉网站开发环境启动Dreamweaver后熟悉编辑界面上的标题栏、菜单栏、文档工具、文档窗口、功能面板及状态栏及其功能。3．站点管理创建电子系网站站点，并对本地站点进行管理和操作。图1-1本地站点效果图4．制作站长简介网页根据自身具体情况制作站长简介网页。4图1-2站长简介网页效果图【预备知识】1．1网站和网页概述1．与网站和网页有关的基本术语的简称，常称为3W或“TheWeb”或“万维网”。它是一种建立在Internet上的全球性的、交互的、动态、多平台、分布式的图形信息系统，遵循HTTP协议（HyperTextTransferProtocol），主要以“超文本”（Hypertext）或“超媒体”（Hypermedia）的形式提供信息。浏览网页是操作之一。URL：即UniformResourceLocator，它是Internet上信息资源的定位方法。Server与Browser：即服务器与浏览器。用户必须通过浏览器连接到Web服务器上，才能阅读Web服务器上的文件。网站（即站点）：是Internet上提供Internet服务的一个位置，该位置由独一无二的IP地址或域名描述。网页：是指站点中由文本、图像、超链接、动画、声音、视频等内容组成的文档。Hypertext（超文本）：是一种可以指向其它文件的文字或图像，这种功能称为超级链接（HyperLink）。5HTML语言：是用来描述组成网页的各个元素的语言。HTTP（HypertextTransferProtocol）：是一种网络上传输数据的协议，专门用于传输万维网中的信息资源。ASP页面：包含程序的网页。ASP现已发展成一门技术，该技术提供一个服务器端的脚本执行环境，可以执行包含程序（由ASP内置对象和编程语言编写）的页面。CSS（CascadingStyleSheet）：用于控制表格、图片、文本等元素的效果。2．网站建立方式建立网站时可使用自己的Web服务器，也可采用托管服务器。因接入互连网要租用国际信道和电话线，并需建立中转站、购置一系列计算机设备，费用昂贵，故它们由ISP代劳。然后，ISP再向本地用户提供接入服务，ISP是提供接入服务的中介。托管服务器只是其中的一项服务，如某单位将服务器放在ISP机房由ISP维护，单位则通过低速线路（64KB—155MB/S）进行网站的远程管理与维护，然后单位向ISP交纳计算机机架的空间租用费和分摊的接入费用。还可采用虚拟主机，即租用ISP硬盘空间，有独立的域名和共享或独立的IP地址。按空间大小和网络宽带资源收费。优点是费用低，缺点是不支持高访问量。它适用于小型网站，如企业网站。个人网站也采用虚拟主机或虚拟目录存放到收费或免费的空间中，也可以拥有独立的域名。3．中小型网站开发的一般流程中小型网站开发通常包括3个阶段：（1）网站规划与网页设计阶段网站需求分析确定网站主题和内容规划网站的整体风格规划网站结构设计页面版式（2）网页制作阶段页面布局页面内容排版处理（根据需要实现动态功能）各个网页相链接（3）测试发布与管理维护阶段网站测试与完善网站空间申请、发布、推广网站维护、更新1．2Dreamweaver概述61．常用工具简介常用的网页制作软件工具有：Frontpage、Homesite、Hotdog、HomePage（常用于制作包含多个分栏的页面）、Dreamweaver系列、Golive等，各有特点。常用的网页素材处理工具有：Photoshop、Fireworks、Flash、LiveMotion、FreeHand、CorelDraw、Illustrator、GIFAnimator、Cool3D、Anfy。2．Dreamweaver简介当今，动态网站是WordWideWorld上网站发展的必然趋势，如电子商务、虚拟社区等。而Dreamweaver是Macromedia公司开发的，其最新版本已到9.0，它代表了此领域最先进的设计理念与技术。它不仅可以进行专业网页编辑及版面设计，还可以轻松地与数据库（ODBC、ADO、JDBC）连接，几乎不用写一行代码就能以可视化的方式开发出功能完整的网站应用程序。（1）Dreamweaver的具体应用大型综合网站企业内部经营管理系统（如销售和库存、员工管理系统）电子商务网站（网上购买、销售）新闻和信息网站（用到信息库）交互式的网上教学网站（选择学习方式、讨论、测试等）企业网站、个人网站（2）Dreamweaver的特性新颖的操作界面2种不同风格的界面，分为Dreamweaver工作区（即设计者）、HomeSite代码风格（即代码编写者），切换方法：“编辑/首选参数”中“更改工作区”；伸缩自如的功能面板：单击小三角形或快捷菜单可动态地启动、隐藏、打开、关闭；多文档操作界面：编辑界面中整合了多个文档编辑窗口方便切换。插入面板功能丰富分若干个小类。拥有各种预定义页面布局执行“文件/新建”后，可看到各种预定义的页面布局和脚本。强大的模板功能强大的标签编辑功能内置了标签编辑器、标签检查器、代码片断。支持多种文件类型、强大的动态数据库开发功能支持ASP、JSP、ColdFusion、ASP.NET（VB）、ASP.NET（C#）、PHPMySQL、XML等，提供了全面的HTML、ASP、JSP、CFML等的开发环境，不需要掌握复杂的程序语言就可打造出专业的动态数据库网站，实现从页面设计师到网络程序7设计师的过渡。【任务实现】1．3规划网站从网站的需求分析、主题和内容、名称、整体风格、结构等方面对电子系网站项目进行整体规划，同时设计出主要网页的版式和网站Logo。说明：①如何规划网站？在创建网站之前，应合理地进行规划，包括进行必要的需求分析、策划网站的主题和内容、规划网站的整体风格、结构、设计页面版式等方面，以避免设计开发的盲目性：网站需求分析网站是用来向浏览者提供所需信息的，因此，创建网站首先必须要进行网站需求分析以便明确设计开发网站的目的和用户需求，从而做出切实可行的设计计划。要弄清开发的网站有哪些类型的用户使用，各个用户又有哪些不同的需求，网站的功能是什么等等，为网站设计提供可靠的依据。确定网站主题和内容主题是网站所要表达的主要内容。如摄影界大名鼎鼎的色影无忌网站的主题是关于摄影技术论坛和摄影月赛的，虽没有商业网站的奢华，却汇集了丰富的人气。同样的主题，可以有不同的立意、设计。主题是网站的灵魂，它决定了网站的内容和风格，内容要为主题服务，尽量选用与主题相关的内容。如旅游类网站主要介绍旅游景点、旅游线路、旅游价格、旅行社、土特产品等内容，公司网站应介绍公司的理念和特色、管理情况、产品情况、售后服务等内容。内容较多时应划分成几个板块，如生活、旅游、健康、IT等，既方便设计又方便浏览。主题定位时一般要选择自己最擅长的题材，主题要小而精，切忌兼容并包，主题贵在创新。主题的题材包括网上求职、网上聊天/即时信息/ICQ、网上社区/讨论/邮件列表、计算机技术、网页/网站开发、娱乐网站、旅行、参考/资讯、家庭/教育、生活/时尚等。而其中的每一类还可细分，如娱乐类可再分为体育/电影/音乐等，音乐又可分为MP3、VQF、Ra等。各个题材交叉结合又可产生新的题材，如旅游论坛（旅游+讨论）。故题材有成千上万种。网站的名称应与主题紧密相关，要能体现网站主题。响亮的名称能给站点的推广带来便利。，如“闪客帝国”、“色影无忌”、“电子邮局”。网站名称若能与域名配合，可方便浏览者记忆，有利于提高访问量，如“当当网上书店”、“8848商城”。8当选择网站名称时要注意做到易记、健康、特色。除非特别需要，应尽量使用中文名称以符合中文网站浏览者的特点。规划网站的整体风格网站的整体风格是网站整体给浏览者的综合感受。它应该是网站与众不同的特色，包括网站页面字里行间透露出作者或企业的文化品味和行事风格。整体风格应与网站的主题相匹配。如新浪是很快速的，迪尼斯是生动活泼的，IBM是专业严肃的，学术机构和政府团体的网站体现出严谨、科学和庄重的气氛，商业网站体现奢华，班级网站的风格应有一种轻松愉快、生动活泼的气息、不能太严肃。体育类网站体现运动，个人网站体现个性化。网站的整体创意是网站生存的关键，它是一种灵感、思考的结果、传达信息的特殊方式、对现有要素的重新组合。如将网络虚拟环境和现实结合起来往往会有奇思妙想产生，比如在线书店、电子邮局、电子社区、在线拍卖、电子贺卡等类似主题的网站。网站风格通过各个页面体现，包括页面的版式结构、色彩搭配、图像动画等。在各页面中最主要的是主页。规划网站结构制作网站之前最好先对各个页面文件的存放位置、各关键网页之间的关联（尤其是主页与次页）、导航机制做一个大致的规划，这种规划应和网站的内容紧密结合。只有当结构和内容成