总结：网页设计与制作流程.ppt

网页设计与制作流程 1、网站的主题定位 制作网站首先要考虑网站主题。好的网站不仅应该有美感 、个性、创意，更要有质量。网站的内容是最重要的因素 ，空洞的网站对人没有任何吸引力。 （1）网站的题材 目前网站的题材主要有：新闻、体育、聊天、即时信息、 ICQ、社区、邮件列表、计算机技术、网站开发、娱乐、 旅行、参考、资讯、求职、家庭、教育、生活、时尚、电 子商务以及一些体现个人特色和爱好的网站。 （2）定位题材的建议 v主题最好是你最擅长并且最有兴趣的东西； v主题要小而精； v题材不要太滥或者目标太高； v体现自己的个性。 （3）网站的名称 2、资料搜集 互联网的强大就是它丰富的资源，可以搜 集尽可能多的资料，并根据一定的规则进 行整理。还要精心设计一些别人没有的东 西，已体现自己的个性。 3、结构设计 （1）栏目和版块 v网站的结构设计其实也就是合理的设计网站的栏目和 版块。首先应突出主题；其次应该有个网站指南或更 新列表之类的栏目；接着要有一个与读者交流的栏目 ；最后最好有个说明性的栏目，以方便网友。 （2）目录的结构设计 目录的结构设计要注意以下几点： v按栏目内容建立子目录； v在每个主目录下都建立独立的images目录； v目录的层次不要太深； v避免使用中文目录； v尽量使用意义明确的目录。 4、形象设计 （1）网站的标志：即设计网站的Logo。 （2）网站的标准色彩 （3）网站的标准字体 （4）网站的宣传标语 5、主页设计 主页设计： v 页面属性设置； v 表格设计； v 填写内容； v 添加链接和交互； v 添加其它内容； 6、其他子页面设计 7、站点规划 站点规划 （1）用文件夹来保存文档 （2）使用合理的文件名称 （3）使用模板和库 8、定义站点 9、测试 10、申请域名和空间 11、站点文件上传（使用FTP上传软件） 12、站点的宣传 上传软件cuteftp 申请免费空间:以/为例:注 册成功激活后,注册邮箱会收到一封确认信件就表 明您的帐户已经注册成功了 ,信件内容如下: 您的帐户已经开通，您的账户信息如下： 您的FTP用户名： tanjunmaomao 您的FTP密码是： * 您的网址为： 您的FTP地址是： 79 服务器IP是： 79 8上传到WEB目录中，且首页文件名必须为index.htm。 请先安装 CuteFTP 7.0 Professional 原英文软件-运 行cuteftppro.exe文件. 解压缩汉化包后安装汉化-setup.exe 运行程序，选择菜单“Tools-Global Options-Display -Language” 然后选择 Chinese.lng，确定，然后退出程序再启动 ，就是中文了。 使用时，请在“工具”-“全局选项”-“常规”-“日志” 中更改字体选择为“宋体，9”，这样日志界面会美观 一些。 软件安装: Cuteftp使用说明:打开CuteFTP窗口后，您可 以看到，如图： 主界面分4个工作区： v 1. 本地目录窗口：默认显示的是整个磁盘目录， 您可以通过下拉菜单选择您已经完成的网站的本 地目录，以准备开始上传。 v 2. 服务器目录窗口：用于显示FTP服务器上的目 录信息，在列表中可以看到的包括文件名称、大 小、类型、最后更改日期等。窗口上面显示的是 当前所在位置路径。 v 3. 登录信息窗口：FTP命令行状态显示区，通过 登录信息您能够了解到您目前的操作进度，执行 情况等，诸如：登录、切换目录、文件传输大小 、是否成功等重要信息，以便确定下一步的具体 操作。 v 4. 列表窗口：显示“队列”的处理状态，您可以 查看到准备上传的目录或文件放到队列列表中， 此外配合“Schedule”（时间表）的使用还能达 到自动上传的目的。 站点设置： 运行后软件或按文件-新建-ftp站点后会自 动出现一个如图的站点管理画面。 v Label for site（标签）：填入你的站点名称，例 如“我的网站”； v FTP Host Address（主机地址）：填个人主页 FTP服务器地址，如： 79 v FTP site User Name（用户名）：填入你申请的 用户名，如* v FTP Site Password：* v 登陆方式：标准 v 其他一些设置可以使用默认值。 v 连接远程站点前先关闭防火墙 v 点击连接-便能连接到服务器，中途会出现如下 界面 上传下载： 此时你已经登录ftp服务器，可以进行软件的下载和上传了。 注意：左边窗口是本地磁盘目录，右边窗口是FTP服务器 的目录，正常登录以后自动进入系统默认的目录。 v上传：请确认FTP服务器的目录（即右边的窗口）是否是 您要上传文件的目标目录，之后，选中本地磁盘目录（左 边的窗口）里要上传的文件或目录，您可以直接把选中的 内容拖放到右边窗口进行上传，也可以点击工具栏中 “Upload”按扭（向上的箭头）进行上传。 v下载：和上传相同，先确认本地磁盘目录（左边的窗口） 是否是您要下载文件的目标目录，之后，选中FTP服务器 的目录（即右边的窗口）里要下载的文件或目录，您可以 直接把选中的内容拖放到左边窗口进行下载，也可以点击 工具栏“Download“按扭（向上的箭头）进行下载。 v 在上传和下载中，如果目标目录里有同名文件或 目录，会出现如下界面： v Overwrite: 覆盖，重新下载并覆盖原来的文件。 v Resume: 断点续传，从上次中断的地方继续下载 ，完成文件。 v Rename: 重命名，给将要下载的文件一个新的文 件名，另外存储一个文件。 v Skip: 跳过选择，取消下载。 作业：设计一个网站-设计要求 独立规划和设计一个网站，内容不限，要求有 一定的网页数目和内容。最少有3页。 设计流程： v 确定题目，设计出最初层次和划分每个页面的内 容与布局 v 创建一个本地站点，进行设计，并预先收集页面 素材和文字资料。 v 申请一个网上空间，自学FTP上传软件的使用 v 在本地站点调试通过，确保每个链接成功。 v 用FTP上传到网上空间 v 把站点的根文件夹 取名为班别学号姓名，并打包 成.RAR或.ZIP，发邮箱给老师，邮件主题注明班 别学号姓名； 评分标准 内容质量（10分）：主题鲜明，具有实用性，能清晰表达设 计意图； 网站结构（5分）：结构清楚合理，便于浏览查找； 视觉感受（10分）：色彩搭配协调合理，页面美观大方，具 有较高艺术品位； 网页创意（10分）：设计风格独特，创意新颖。 技术运用（65分）：考核浏览速度、导航效果； v包含一个框架集页面： v用布局表格布局页面： v原创设计logo一个： v包含一个轮替变换或飞动的广告牌： v包含行为和动作：隐藏显示层等 v用css伪类控制全站的超链接样式 v包含一个表单如个人信息调查表 v用fw优化图片，整个网站大小不能超过300KB（无用的素材要删除） 。 考试要求 以课本实验为基础，特别是某些综合性题目。 考试方式：机试，考试时间为105分钟 二、考试内容 网页与HTML语言的基础知识 v 【考试要求】 v 了解HTML文件的基本架构，单双标记的概念 ，掌握HTML常用标记。（几个常用标签P、 h1、h2、br） 规划和建设站点的基本知识 v 【考试要求】 v 利用Dreamweaver建立站点，使用文件视图 管理站点，在站点中建立、删除文件和文件夹 。 网页文本和图片的处理 v【考试要求】 v掌握在网页中添加文本，段落和换行的区别。在网页 中插入图片的操作，图片的对齐，图片的替换文本， 利用属性栏对图片进行简单编辑。利用dw插入鼠标经 过图像 网页中插入视音频FLASH等元素的基本操作 v【考试要求】 v掌握如何在页面中插入视频音频及视音频的常用参数 设置。如何在页面中插入FLASH按钮、FLASH文字、 FLASH动画。 多种超级链接的建立 v【考试要求】 v掌握多种超链接（文本链接、图片链接、文件下载链 接、锚点链接、邮件链接）的建立方法，及链接目标 参数的设定。利用属性栏修改、删除超链接。 表格、框架的使用 v【考试要求】 v掌握表格的三种视图的使用；对普通表格和嵌套表格的操作；格边距和 格间距的区别； v建立框架网页 CSS样式的创建和应用 v【考试要求】 8掌握CSS各种类型样式的创建：一般类、标签类、伪类和id类 8外部样式表的创建、链接与导入 8掌握CSS样式的属性设置：类型、背景、区块、方框、边框、定位、列表、扩 展等属性 8CSS样式的应用 行为和时间轴的使用 v【考试要求】 v掌握几种常用事件（鼠标触发事件）与动作的创建（以机房使用的DW CS的动作为准） v利用时间轴创建移动对象和交换图像 制作网页模板 v【考试要求】 v掌握利用表格制作包含网站导航栏的网页模板的方法，掌握利用模板套 用网页和将模板从页面分离的方法。 表单的制作 v【考试要求】 v掌握表单的制作方法。 站点的发布和上传 v【考试要求】 v掌握利用Dreamweaver进行站点本地测试的方法：测试内部超链接，测 试外部的超