动态网站设计制作与维护
动态网页设计与制作实用教程电子教案
设置完毕点击右上角的“确定”按钮。 3.编辑网页元素
在网页上添加文本、图片、表格等网页元素。 4.在网页中加注释 （1）选中插入注释的位置。 （2）选择“插入/文本对象 / 注释”菜单，在窗口中输入注释内容。 （3）编辑注释：双击页面中的注释图标即可进入编辑界面。 5．保存网页 选择“文件/保存”菜单，给网页命名并存入相应文件夹。
8.1 位图的编辑
8.1.1 位图编辑工具 8.1.2 位图编辑实例
8.2 在Fireworks MX中建立动画实例
8.2.1 建立动画对象 8.2.2 动画的设定 8.2.3 动画预览 8.2.4 动画的编辑 8.2.5. 编辑运动路径 8.2.6 输出gif动画
9.1 图像的优化
9.1.1 优化图像应考虑的因素 9.1.2 图像优化的途径
4.1.1 场景 4.1.2 时间轴 4.1.3 帧 4.1.4 元件
4.2 三种基本动画形式
4.2.1 逐帧动画的制作 4.2.2 位移动画的制作 4.2.3 变形动画
5.1 洋葱皮效果的应用
Flash MX 中有种专门的多帧编辑与对齐模式，叫作"洋葱皮效 果"(Onion Skin)，它们位于时间轴下面。把"洋葱皮"视图模式打 开，点按时间轴下面的图标，时间轴会变成时间轴上出现了两个圆 圈，它们分别代表洋葱皮的起始帧与终止帧，凡是在这个范围内的 帧都可在同时间进行显示。现在我们把右边的圆圈拉到第30 帧 工作区中的内容也会有所变化，从第1帧到第30帧的内容全显示出来 了。洋葱皮模式的作用主要是用来进行多帧编辑，在进行起始帧与 终止帧的元素精确定位时，它常常是必不可少的工具。
动态网页设计与实现论文
动态网页的设计与实现论文2014年03月16日动态网页的设计与实现摘要随着网络技术的发展，通过互联网实现棋类的人机博弈成为了当前计算机博弈领域迫切需要的一项关键技术，就此，项目拟研究棋类人机博弈的动态网页技术，并开发实现一个可通过互联网登陆进行人机博弈的动态网站。
项目将使用HTML5来编写前台，JSP为主要语言编写后台，结合Photoshop、Flash、JavaScript等技术完善网页设计。
为实现人机博弈技术而采用C/S结构来增强交互性，提高软件效率，并采用多线程技术从而满足多用户共同安全使用的需求。
最终实现一款人机博弈动态网站，即中央民族大学博弈网站。
本网站页面主要由Dreamweaver软件设计的静态html页面和利用JSP技术制作的动态页面构成。
其中详细介绍了关于用户注册、用户登录、信息发布、留言板的设计与实现。
关键词: Dreamweaver JSP技术MYSQL数据库The design and implementation of a dynamic WebpageABSTRACTWith the development of network technology, through the Internet to achieve human-computer game chess has become a key technology, the urgent need for the current computer game field thereon, dynamic Webpage technology study chess computer game project, and development to achieve a dynamic web site through the Internet on human-computer game. The project will use HTML5 to write the front, JSP as the main language background, combined with Photoshop, Flash, JavaScript and other technology to improve Webpage design. In order to realize the man-machine game technology and using C/S structure to enhance interaction, improve the efficiency of software, and the use of multi threading technology to satisfy multi-user common security usage requirements. The realization of a man machine game dynamic website finally, namely Minzu University of China game website.This web page is mainly composed of a dynamic page and make use of JSP technology of Dreamweaver software to design the static HTML pages. The detailed introduction on the user registration, user login, information publication, the design and Realization of the message board.Key words:Dreamweaver JSP' s technique MYSQL database目录引言 (2)1.开发工具及编程环境 (2)1.1.开发工具 (2)1.2.编程环境 (2)2.动态网站的工作原理 (3)2.1.WEB工作原理 (3)2.2.动态页面工作原理 (4)3.JSP简介及JSP技术工作原理 (6)3.1.JSP简介 (6)3．1．1.JSP页面的结构 (6)3．1．2.JSP的运行环境 (6)3.1.2.1.JSP对硬件的要求 (6)3.1.2.2.JSP对操作系统的要求 (7)3.1.2.3.JSP对软件环境的要求 (7)3．1．3.JSP的内置组件 (7)3.2.JSP技术工作原理 (8)3.3.JSP访问数据库 (8)4.需求分析 (9)4.1.系统功能分析 (9)4.2.各个模块具体功能 (10)4.2.1.会员注册与登录模块 (10)4.2.2.留言模块 (10)4.2.3.信息发布模块 (11)5.数据库设计 (11)5.1.数据库需求分析 (11)5.2.数据表的设计 (11)6.动态网站系统实现 (13)6.1.系统编码原则 (13)6.1.1.编码实现原则 (13)6.1.2.代码编写规范 (13)6.2.系统实现 (13)6.2.1.网站首页 (13)6.2.2.用户注册页 (14)6.2.3.信息发布页面 (15)6.2.4.留言板页面 (16)6.2.5.后台管理页面 (16)结束语 (16)引言最早互联网出现时，站点内容都是以HTML静态页面形式存放在服务器上，访问者浏览到的页面都是这些实际存在的静态页面。
网站动态信息维护子系统的设计与实现
静态页面进行描述 ； 在线解答、 过客留言为变化信息 ，
需动态完成 。本 网站具有 以下特殊 需求 ：
网站信 息动态维护子系统 的服务需要后端 数据库
的支持 ， 为用户提供登 录 、 等服务 。网站 的数据库 查询
Ａｂ ｔ ａ ｔＤｙ ａ ｃ ｍａｎｅ ａ ｃ ｆ ｗｅ ｓｔ ｓ ｔ ｅ ｋ ｙ ｆｃｏ ｆ ｗｅ ｓ ｅ ｄ ｓ ｎ Ｏ ｄ ｓｇ ａ ｄ ｄ ｖ ｌｐ ｉｆｒ ｔ ｎ ｄ ｎ ｍｉ ｓｒ ｃ ： ｎ ｍｉ ｉ ｔｎ ｎ ｅ ｏ ｂ ｉ ｉ ｈ ｅ ａ ｔｒ ｏ ｂ ｉ ｅ ｉ ，Ｓ ｅ ｉｎ ｎ ｅ ｅｏ ｎｏ ｍａｉ ｙ ａ ｃ ｅ ｔ ｇ ｏ ｍ ｉｔ ｎ ｎ ｅ ｓ ｂ ｓ ｓ ｍ ｈ ｅ ｅ ｓ ｒ ｉ ｃｉｎ ｏ ｎ ｅ ｓ ｅ ． ｈ ｒｉｌ ｗ ｌ ｄ ｓｕ ｓｔ ｅｒ ｑ ｉ ｍｅ ｔ ｒ ｌｖ ｔｔ ｈ ｏｏ ｙ ａ ｎｅ ａ ｃ ｕ — ｙ ｔ ｉ ｔ ｅ ｎ ｃ ｓａ ｙｄ ｒ ｔ ｆｍａ ｙ ｗ ｂ ｉ ｓ Ｔ ｅ ａｔ ｅ ｉ ｉｃ ｓ ｈ ｅ ｕｒ ｅ ｓ ｅ ｏ ｔ ｃ ｌ ｅ ｎ， ｅｅ ａ ｅ ｎ ｌｇ ｎ ｃ ｎ ｏｕ ｉ ｆｔ ｅ ｄ ｎ ｃ ａ ｄ ｒｓ ｌｔ ｎ ｏ ｈ ｙ ａ ｉ ｍａｎｅ ａ ｃ ｕ ｓ ｓ ｍ ｆ ｔ ｅ ｗ ｂ ｉ ｎｏ ｍａｉｎ ｉ ｅａｌ ｎ ｎ ｌｚ ｈ ｅ ｕ ｒｍｅ ｔ ｏ ｅ ｏ ｍ ｉ ｔｎ ｅ ｓ ｂ— ｙ ｔ ｎ ｅ ｏ ｈ ｅ ｓ ｅ ｉ ｒ ｔ ｎ ｄ ｔｉ ｔ ｆ ｏ ，ａ ｄ ａ ａｙ ｅ ｔｅ ｒ ｑ ｉ ｅ ｎ ｆ ｉ ｏｍａｉｎｄ ａ ｉ ｉｎｅ ａ ｃ ｆｔｅｗｅ ｓ ｅ ａ ｄｇｖ ｈ ｅ ｉｎ ｐａ ． ｆ ｎ ｒ ｔ ｙ ｍ ｃ ｍａ ｔｎ ｅ ｏ ｂ ｉ ｉｅ ｔｅ ｄ ｓ ｌｎ ｏ ｎ ｎ ｈ ｔｎ ｇ Ｋｅ ｒ ｓ Ｗ ｅ ｓ ｅ ｃ ｎ ｔ ｃｉｎ Ｉ ｏ ａｉｎ ｍａｎｅ ａ ｃ ； ｎ ｉ ｕ — ｙ ｔｍ ； Ｓ ＡＤＯ ｙ ｗｏ ｄ ： ｂ ｌ ｏ ｓｒ ｔ ； ｒ ｔ ｉ ｔ ｎ ｅ Ｄｙ ａ ｃｓ ｂ ｓ ｓｅ Ａ Ｐ； ｔ ｕ ｏ ｎ ｍ ｆ ｏ ｎ ｍ
Asp动态网站制作流程详细步骤
Asp动态网站制作流程详细步骤ASP（Active Server Pages）是一种动态网站开发技术，可以通过在HTML代码中嵌入ASP代码来实现动态数据的生成、更新和存储。
本文将分享ASP动态网站制作的详细步骤，供有需要的读者参考。
环境搭建ASP动态网站需要一些必要的软件环境支持，如IIS、ASP组件等。
一般情况下可以通过以下步骤进行搭建：1.安装IIS：前往官网下载IIS，按照提示步骤完成基础服务安装。
2.启用ASP支持：在IIS管理器的“应用程序池”中启用对ASP的支持。
3.安装ASP组件：ASP组件需要在Windows安装盘的“服务”目录中寻找ASP文件夹，使用cmd进入文件夹，输入以下代码进行安装：regsvr32.exe asp.dll安装完毕后重启IIS即可。
技术应用ASP动态网站制作需要掌握一些基础技术，如HTML，CSS，JavaScript，以及ASP语言本身的语法和基本操作。
以下是ASP动态网站制作的主要技术点：数据库操作ASP动态网站的关键之一是实现对数据库的操作。
数据应该被组织成相关的表，并通过SQL查询语句进行操作，以实现数据的存储和检索。
服务器端控件ASP提供了各种服务器端控件，以便对网站进行更强大的编程控制。
控件主要有文本框、按钮、表格等，使网站具有更好的交互和用户体验。
会话状态ASP提供了内置对象Session，可以使网站访问者在不同页面之间保持数据的传递和状态的保持。
利用会话状态，可以保存用户的登录状态、送货地址等信息。
文件操作ASP的文件对象提供了读写和编辑文件的方法，如果需要在网站上发布或操作文件，使用ASP文件对象会是非常有利的。
网站制作流程ASP动态网站制作需要遵循以下流程：设计页面首先，设计页面的布局和风格，这样可以确保网站具有更好的用户体验。
HTML、CSS和JavaScript等技术需要娴熟掌握，才能更好地进行网站设计。
页面绑定将页面和服务器端脚本进行绑定，将ASP代码定义在HTML文件中，这样可以调用相关的数据和方法。
动态网站设计制作与维护
动态网站设计制作与维护作者：王琦来源：《科教导刊·电子版》2015年第04期摘要随着信息技术的发展以及网络的普及，企业日益重视通过网站来宣传企业形象，展示企业经营理念，从而进一步开拓市场。
与此同时，各种新技术在网站制作当中得到广泛应用，动态网站设计制作日益成熟，并为企业网站甚至个人网站设计制作以及维护带来的便利。
本文首先介绍动态网站设计制作的原则，然后具体分析动态网站设计制作维护的具体内容。
关键词动态网站设计原则维护中图分类号：TP393.092 文献标识码：A随着网络技术的发展，设计制作网站的目的不只局限于发布信息，而是需要搭建功能强大并且易于维护，可以提供丰富内容的动态网站。
同时动态网站的制作技术也不断更新发展，制作工具日益增多，设计方法日趋成熟，为动态网站的设计制作以及维护奠定了基础。
1动态网站设计制作的原则第一，导航清晰并且界面清爽。
动态网站的布局要合理，要做到层次分明，页面链接层次避免过于太深，尽可能保证用户在最短时间内就可以找到想要的信息。
在动态网站的界面设计方面，要吸引访客并且保证访客停留在网站上，首先要避免让用户产生压抑的感觉。
大量文字的内容需要使用舒适背景色，并且前景文字以及背景间的对比要比较鲜明，保证访客在浏览的时候眼睛不会疲劳，同时适当留白能够让网站的界面显得更加清爽。
第二，保证风格统一。
动态网站保持风格的统一，可以加深访客的印象。
要想保证动态网站的风格统一，并非将各个栏目都做得高度雷同，不同栏目可以使用不同色彩搭配，这样在保证风格统一的前提下让网站更加丰富生动。
在网站的设计风格方面，需要从网站给访客的整体形象以及感受这一角度入手加以综合考量。
网站的整体形象主要包括网站的版面布局、视觉效果以及浏览方式等。
网站的风格独特，可以体现出网站同其它网站的区别，设计人员可以借助网站的内容、外表、文字还有交互方式，来展现一个动态网站的风格与个性。
第三，色彩要和谐突出。
在动态网站的设计过程当中，需要本着均衡、和谐以及突出重点的原则，来实现不同色彩的组合以及搭配，从而设计出美观的网站以及页面。
动态网页设计课程标准(核心课程标准)
图形图像专业核心课程标准课程名称：动态网页设计适用专业：图形图像专业1. 课程性质《动态网页设计》课程是图形图像专业的核心课。
通过本课程的学习使学生掌握使用动态网页知识进行数据库的调用，实现数据交互，毕业后可从事网页设计、网页美工等工作，为学生的职业生涯做铺垫。
本课程以ASP的Web开发技术为背景，利用ASP技术将网页设计与SQL Server 2000后台数据库结合起来创建高效、健壮的网上系统。
通过本课程的学习，使学生掌握ASP动态网页设计的基础知识，并得到必要的实践技能训练。
为学生以后从事网页编辑、网站管理员打下坚实基础。
动态网页设计课程是实践性很强且面向实际应用的重要专业课，和其他课程有着重要的关联作用，它的先修课程是三大构成、网页设计技术、Div + Css、数据库管理技术，JavaScript脚本语言，后续课程为图形图像综合应用。
2. 课程设计本课程是依据图形图像专业的人才培养目标需求而设置的。
ASP动态网页设计是当今流行的web应用技术开发技术之一，它将HTML语言、脚本代码和服务器组件有机地结合在一起，可以用来创建交互式的动态网页和具有数据库访问功能的web应用程序，具有成本低，实用性强的优点。
为此而设置这门课。
课程内容的编排和组织是以适应高职高专人才培养为目标，以职业技术能力为主线，构建起课程的知识、能力、素质结构，重点突出实践技能。
(1)课程知识结构体系从网络的实际应用出发，介绍网站的作用，以实际应用作为教学的切入点和核心，将基本理论和概念融入各个实例，并不断辅以相关新知识，以适应网络不断发展的新需要。
(2)课程能力结构强调实际制作网站的能力，要通过网站实际设计将各知识点吸收巩固，以上升为应用能力。
因此，通过网站的需求分析、数据库设计、页面完成、功能实现、项目测试验收的整个实训流程，达到能够熟练进行动态网站设计的能力水平。
(3)网站的综合设计是一项复杂工程，需要有坚韧不拔的精神，勇于前进，不轻言放弃，可培养学生刻苦钻研、勇于开拓的创新精神。
动态网页设计与制作实用教程电子教案
动态网页设计与制作实用教程第一章：动态网页设计基础1.1 动态网页概述1.1.1 动态网页与静态网页的区别1.1.2 动态网页的优势与应用场景1.2 服务器端编程语言1.2.1 PHP1.2.2 1.2.3 JSP1.3 数据库技术1.3.1 数据库基本概念1.3.2 常用数据库介绍1.3.3 SQL语言第二章：HTML与CSS基础2.1 HTML基本结构2.1.1 网页结构标签2.1.2 网页布局标签2.1.3 表单标签2.2 CSS样式设计2.2.1 CSS基本语法2.2.2 选择器与属性2.2.3 布局与样式技巧2.3 响应式设计与移动端适配2.3.1 媒体查询2.3.2 移动端布局策略第三章：JavaScript与jQuery编程3.1 JavaScript基础3.1.1 语法与基本概念3.1.2 函数与事件处理3.1.3 DOM操作3.2 jQuery库介绍3.2.1 jQuery基本语法3.2.2 选择器与事件处理3.2.3 动画与效果3.3 前后端数据交互3.3.1 AJAX技术3.3.2 Fetch API第四章：前端框架与库4.1 Bootstrap框架4.1.1 布局组件4.1.2 表单与按钮4.1.3 响应式设计4.2 React.js框架4.2.1 基本概念与组件4.2.2 状态管理4.2.3 路由与导航4.3 Vue.js框架4.3.1 基本概念与指令4.3.2 计算属性与监听器4.3.3 组件与路由第五章：动态网页项目实践5.1 项目需求分析与规划5.1.1 功能需求5.1.2 技术选型5.1.3 项目结构设计5.2 数据库设计与实现5.2.1 数据库表结构设计5.2.2 数据库连接与操作5.3 服务器端编程与实现5.3.1 用户认证与权限管理5.3.2 业务逻辑处理5.3.3 数据持久化5.4 前端设计与实现5.4.1 页面布局与样式设计5.4.2 交互逻辑与功能实现5.4.3 前后端数据交互与处理5.5 项目部署与优化5.5.1 服务器配置与部署5.5.2 网站性能优化5.5.3 安全防护与维护第六章：图形与多媒体处理6.1 图形处理技术6.1.1 HTML5 Canvas6.1.2 SVG概述6.1.3 图形库介绍（如fabric.js）6.2 多媒体处理6.2.1 音频与视频标签6.2.2 HTML5 API与多媒体交互6.2.3 常用多媒体库介绍（如Video.js）第七章：交互式表单与组件7.1 表单验证与交互7.1.1 表单基本属性与事件7.1.2 客户端验证技术7.1.3 表单提交与后端处理7.2 交互式组件设计与实现7.2.1 对话框与模态框7.2.2 选项卡与标签页7.2.3 进度条与轮播图第八章：前端性能优化与调试8.1 页面加载优化8.1.1 图片优化与懒加载8.1.2 代码压缩与合并8.1.3 CDN加速与服务器配置8.2 页面性能检测与分析8.2.1 性能检测工具介绍（如Chrome DevTools）8.2.2 性能瓶颈分析与解决方法8.2.3 网络优化与缓存策略第九章：网络安全与防护9.1 常见网络安全威胁9.1.1 XSS攻击9.1.2 CSRF攻击9.1.3 SQL注入9.2 安全防护措施与最佳实践9.2.1 输入验证与过滤9.2.2 输出编码与转义9.2.3 使用S与身份验证第十章：项目实战与案例分析10.1 项目一：个人博客网站10.1.1 项目需求与技术选型10.1.2 数据库设计与实现10.1.3 前端设计与实现10.2 项目二：在线购物平台10.2.1 项目需求与技术选型10.2.2 数据库设计与实现10.2.3 前端设计与实现10.3 项目三：移动端APP10.3.1 项目需求与技术选型10.3.2 数据库设计与实现10.3.3 前端设计与实现重点解析本文档涵盖了动态网页设计与制作实用教程的十个章节，主要重点和难点如下：一、动态网页设计基础：理解动态网页与静态网页的区别，熟悉服务器端编程语言（如PHP、、JSP）和数据库技术（如MySQL、SQL Server、Oracle）。
动态网页制作方法
一般的用网页dreamwaver一般必用，比较好上手的，html是要懂的，css+div 的标注设计也是要学习的。
如果是做前台页面设计会用到的工具：firework、flash、ps、coreldraw如果是做后台的程序设计会用到：asp、PHP等一些语言，环境调试好后，dreamwear都支持的与ASP的区别1、开发语言不同•ASP仅局限于使用脚本语言来开发，容易导致代码杂乱。
而允许用户选择并使用功能完善的编程语言，也允许使用潜力巨大的.NET Framework。
2、运行机制不同•ASP是解释运行的编程框架，所以执行效率较低。
而是编译执行，程序效率得到提高。
3、开发方式•ASP把界面设计和程序设计混在一起，维护困难。
而把界面设计和程序设计以不同的文件分离开，复用性和维护性得到了提高。
的工作原理浏览器向WEB服务器发送HTTP请求；WEB服务器分析HTTP请求，如果所请求的网页文件名的后缀是aspx，则说明客户端请求执行程序；如果以前没有执行过该程序，则进行编译，然后执行该程序；否则直接执行已编译好的该程序。
得到HTML结果；WEB服务器将HTML结果传回用户浏览器，作为HTTP响应；客户机浏览器收到这个响应后，将HTML结果显示成WEB网页。
WINDOWS操作系统下建立的运行环境需要安装如下软件：IISMDAC.NET Framework静态页面和动态页面1、静态网页（1）概况：纯粹HTML格式的网页，也就是以.htm、.html、.shtml、.xml等为后缀的。
在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字幕等，这些“动态效果”只是视觉上的，存在这些“动态效果”的HTML页面，仍然是静态网页。
（2）特点：①静态网页是事先编写好的。
每个静态网页的内容都是保存在网站服务器上不变的；②静态网页的内容相对稳定，因此容易被搜索引擎检索；③静态网页没有数据库的支持，在网站制作和维护方面工作量较大；④静态网页的交互性较差，在功能方面有较大的限制。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
文、数字组合进行命名 ➢ 在每个子目录下都建立独立的images目录 ➢ 目录的层次不要太深 ，建议不要超过3层 ➢ 模板（Library）和库(Templates)文件夹一定要位于站
任务一课堂实践
1．浏览以下站点，对所浏览网站首页的特色和不足进行赏析说 明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、 图片效果、动画效果、音频效果等。 （1）狮子林网站：/ （2）清华大学网站：/ （3）太平洋电脑网： 2．通过上述站点中页面的欣赏，请说出网页的基本构成元素有 哪些？
任务一：欣赏优秀网站
虎丘主页
任务一：欣赏优秀网站
虎丘主页特色
各类边框体现了古典的特色 题头的图片和文字的动画效果展示了虎丘景点的级别及 多角度的美景展示 主页的整体布局为“上、中、下”三个版块，中间的主 体内容又分为“左、右”二个版块，布局清晰
任务一：欣赏优秀网站
三、体育类网站欣赏
欣赏“中国大众体育网”的网站： 启动IE浏览器，输入网址：
工作任务列表
任务一：欣赏优秀网站 任务二：规划班级网站，书写网站建设方案
任务一：欣赏优秀网站
一、公司类网站欣赏
欣赏海尔集团的网站： 启动IE浏览器，输入网址：
任务一：欣赏优秀网站
海尔网站首页特色
该首页给人以清体内容又分为“左、右”二个版块。 颜色上主要采用玫瑰红色为主，玫瑰红给人温馨、浪漫的感受， 并与网站的logo标志颜色达到和谐统一的效果。 首页题头的动化效果为Haier公司的产品广告,既达到了产品 宣传的目的，又达到了美化的效果。 导航栏的颜色鲜明，文字仍采用玫瑰红色，文字与背景色对 比强烈，引人注目。二级导航采用横式排列，占据了中间主体 部分。
任务一：欣赏优秀网站
二、旅游类网站欣赏
欣赏“虎丘旅游网”的网站： 启动IE浏览器，输入网址：
网站带有引导页：
任务一：欣赏优秀网站
虎丘引导页特色
将虎丘的名景点以动画的形式显示在页面的右方 苏轼的题词以动画的形式缓慢展示出来 蝴蝶的翩翩起舞与金鱼的自由自在的畅游结合在一起，给人一 种清闲之感 各种语言（简体中文、繁体中文、日本语、英语等）的引导 框显示在右下方 当欣赏完引导页的优美意境后，默认进入简体中文主页面。
四、新闻类网站欣赏
欣赏“新浪网站新闻页” ： 启动IE浏览器，输入网址：/
任务一：欣赏优秀网站
新浪网站新闻页特色
各类新闻用标题栏加以划分，简洁明了、排列整齐， 使得较大的信息量显示有条有理。 颜色的搭配上主要采用蓝色，左右两侧版块的字体大 小相同，字体颜色为蓝色，给人以清新、和谐的视觉美感。 该网页给人的视觉感受是和谐美观，在模块的划分上比 较明显，采用“左、中、右”三个版块，内容充实。
任务一：欣赏优秀网站
中国大众体育网主页特色
背景、字体为红色，给人以阳光、活力向上的感觉。 在字体的运用上有大有小，有长有短，显得有对比， 庄重。 图片的动态效果突出主题，产生运动的视觉感受。 该网站的首页整体视觉感受清晰、和谐。 整体颜色采用红色，既统一又有变化，主体突出。
任务一：欣赏优秀网站
➢ 页面标准在1024*768像素分辨率下，网页宽度保持在 980-1003像素以内，一般按1003像素制作，就不会出现 水平滚动条，高度则视版面和内容决定。
➢ 页面高度原则上不超过3屏，宽度不超过1屏。 ➢ 每个标准页面为A4幅面大小，即8.5*11英寸。
任务二：规划班级网站，书写网站建设方案
（2）网站目录结构规范
3、对自己的班级网站进行规划，并书写网站建设方案
任务二：规划班级网站，书写网站建设方案
表 XXXX网络有限公司《客户需求说明书》
企业（单位）名称
所属 行业
步骤2：环境的搭建与调试 步骤3：网站主页的设计与制作
任务二：规划班级网站，书写网站建设方案
步骤4：分支页面的设计与制作、后台的建设及测试 步骤5：设置链接、测试、发布、推广、维护网站
2、网站建设遵循的规范
（1）尺寸规范
➢ 页面标准在800*600像素分辨率下，网页宽度保持在 760-780像素以内，就不会出现水平滚动条，高度则视版 面和内容决定。
任务二：规划班级网站，书写网站建设方案
1、熟悉网站建设的流程
建立一个网站就像盖一幢大楼一样，它是一个系统工程， 有自己特定的工作流程，你只有遵循这个步骤，按部就班 地一步步来，才能设计出一个满意的网站。
设计与制作网站的五大步骤： 步骤1：规划站点
需求分析－ 总体设计,书写建设方案－确定网站的目录结构－规划 和收集资料 －选择网页制作工具
点根目录之下并不能被更名，否则在使用模板和库就会出 错
任务二：规划班级网站，书写网站建设方案
（3）主页文件命名规范
主页文件的命名，一般用index.htm（index.html index.asp index.jsp index.php等），或 default.htm(html、asp、jsp、php)，放在站点的 根目录下。 用index作为主文件名，index表示“索引”（指首页 放满了去网站其他地方的链接），一般网站发布时服务 器默认识别index，所以采用index作为主页文件主名。
课程主要内容
主要内容
项目一 规划网站 项目二 环境的搭建与调试 项目三 主页的设计与制作 项目四 分支页的设计与制作 项目五 网站的测试、发布与维护
知识技能目标
1、欣赏优秀网页，学习他人之长； 2、分析优秀网页的布局结构、颜色搭配、视觉效果； 3、清楚网页的组成元素及网站的建设流程； 4、会规划网站，会书写网站建设方案；