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

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