06第4章 网站开发概述.ppt

网站开发概述 电子与控制工程学院 李 刚163.com 内容: 一、网站开发的基本模块 1、客户端开发（网页制作） 2、服务器端开发（程序实现） 3、数据库开发 二、客户端开发的相关问题 1、静态页面开发工具简介 2、Dreamweaver的工作环境 3、定义本地端网站 4、文字与网页属性设置 5、加入超级链接 6、加入图片及其它多媒体元素 三、Web服务器的安装与运行 一、网站建设的基本概念 网站存储在web服务器中 客户端通过浏览器下载并浏览网页 网站开发的综合技术 2.1 制作网页的基本工具 Firework（Web图像制作软件）.gif .jpg Photoshop/gif动画制作工具Ulead GIF Animator 5 Flash（矢量动画编辑软件）.swf Premiere（流媒体编辑，电视广告等） Dreamweaver（可视化的网页设计工具） FrontPage Dreamweaver MX 2004 简体中文版 Windows自带的文本编辑器 网站开发的流程 规划阶段拟定网站功能（与需求部门细致沟通） 建立网站的目的是什么？ 希望网站提供什么内容？ 数据搜集与整理 建立网站文件结构/搭建测试开发平台 采用的web服务器是什么？ASP/PHP/JSP？ 施工蓝图：（组织网站开发人员、确定分工） 制作网页元件（文本、图片、影像、音效、动画） 网页平面设计制作 – Dreamweaver MX 编写网络应用程序及数据库的建立 测试 2.2 认识Dreamweaver的工作环境 菜单栏 工具栏 编辑区 Objects（物件）面板 Properties（属性）面板 编辑／保存网页［Crtl＋S］ 预览网页－－F12或点击工具栏预览按钮 网站放在哪里呢？ 网站是由许多网页组成，网页中所包含的图形文件、声音文件、影像文件及数据库等也都是存在于网站中。要用专门的目录分别存储不同的媒体文件。 在设计阶段，放在本地硬盘文件夹中 当网站制作好后，就要上传到Web服务器的相应文件夹中 2.3 定义本地端网站 定义本地端网站的目的是让Dreamweaver知道网站文件在本地端电脑的存放处。 步骤如下： 用资源管理器在硬盘中新建一个文件夹用于存放网站文件 在Dreamweaver中执行［Site/New Site]命令 １、选择Local Info类 ２、在Site Name:中为网站取个名称 ３、在Local Root Folder:中输入存放网站文件的文件夹路径 2.4 文字与网页属性设置 输入文字 设置文字的大小、字体及样式等属性 网页全局属性设置 设置文字的样式属性 段落样式 字体 编辑字体列表／可用字体→选择的字体 文字大小 文字色彩 粗体、斜体及其它样式 对齐方式 项目符号 文字缩进 网页全局属性设置［为保持网页的整体统一］ 在属性面板中选择[页面属性] 设置网页标题［直接在工具栏修改］ 设置外观 设置网页背景颜色 设置网页背景图片(.jpg .gif) 左边距／右边距／上边距／下边距 设置链接属性 使用内建的网页颜色样式（命令/设定配色方案→背景／文本和链接) 获取方便的同时也失去了个性化网页的特点 2.5 加入超级链接 相对于我们自己开发的网站而言将超级链接分为内、外超级链接 加入内部超级链接 在文字上加超级链接 在图片上加超级链接 加入外部超级链接 在新网页中显示链接网页［目标／—blank] 加入Email超级链接 常用面板／email link 加入下载文件超级链接 2.6 加入图片及其它多媒体元素 首先还是提醒大家，要在网页中插入图片或任何元素之前， 该网页已经保存过了 并且已经定义了一个网站文件夹 加入图片时指定相对于文档／站点根目录 加入图片 网页上所使用的图片格式 .jpg .gif 加入图片 修改图片属性 加入随指针变换的图片 加入Rollover Image 加入Navigation Bar 加入Flash动画 Flash动画的优势： 文件小、向量格式不失真、可播放MP3音效、互动效果优异。 尤其在互动效果方面，Flash动画可以制作网页常见的超级链接、按钮、菜单、表单，甚至还能做出游戏。 如何加入？ 加入Flash按钮［常用工具栏］ 加入Flash文字 加入表格 在布局工具栏切换到标准模式 加入表格 设置表格的属性 表格边框颜色 表格背景颜色 边框宽度 设置某个单元格属性 套用表格样式 [命令/格式化表格] 使用布局设计模式 在布局工具栏切换到布局设计模式 绘制布局表格 宽度760，高度随意 切换到标准模式，在属性面板选择居中对齐 加入布局单元格 为了实现随意放置网页元素的目的 在单元格中加入文字或图片 行为的使