课题网页设计概述 教学目标1、了解网页设计原则:2、了解网页设计制作工具;3、了解站点规划基本流程。 教学重点冂、网页设计及布局原则:2、站点规划基本流程。 教学难点1、网页设计及布局原则:2、站点规划基本流程
课 题 网页设计概述 教学目标 1、了解网页设计原则；2、了解网页设计制作工具；3、了解站点规划基本流程。 教学重点 1、网页设计及布局原则；2、站点规划基本流程。 教学难点 1、网页设计及布局原则；2、站点规划基本流程
、基础概念 1、网页:网站中供用户阅读的一个个页面,又称为WEB页。是通过超级链接将各种文档 连接起来的一个大规模信息集合。网页(Web页)一般指文件扩展名为htm(或htm1) 结尾的文档。这些文档是用文本标记语言HTM表示出来的,故通常也称之为HTML文 档。这种语言要通过IE浏览器“翻译”过来我们才能直接访问 2、主页( Homepage):是各个网站向用户提供的最初起始页面。通常包括通向其它相关页 面的超级链接。 3、万维网:( World wide Web)简称WWW,或3W,是目前 INTERNET网上最流行的 种基于超文本形式资源组强形式 4、浏览器:网络中资源要通过浏览器来访问(IE、 Netscape、腾讯)。 5、统一资源定位器( universal resource locator,URL):用来指出某一项信息所在位置及 存取方式,也就是我们经常所说的网址 教/信协议 HTP:超文本传输协议 FTP:文件传输协议 网页包括的主要元素 1、文本:信息载体和交流工具,网页的主体以文本为主。文本格式有(字体、字号、颜 2、图像:在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像 可以用作标题、网站标志(Logo)、网页背景、链接按钮、导航栏、网页主图等。图像在 过网页中可以使用多种文件格式,但使用最多的还是PEG和GTF两种格式,因为这两种图 像格式占用空间最少。网页中使用图像不宜太多,每张图像也不宜太大,图像过多传会让 人觉得累赘,过大会影响网页的传输速度。 3、超级链接:它是 Internet上最受欢迎的基于超文本方式的多媒体信息查询系统。它 是从一个网页指向另一个目的端的链接。该链接可以指向该网站的另一个网页,也可以指 向世界各地的其他网页。文字或图像都可以设置超级链接。链接一般包括两种类型:站内 和站外链接 4、导航栏:是网站设计者规划好网站结构后必须考虑的一个问题。为了让访问者顺利浏 览,避免访问者迷失方向,可以在网页上设置导航栏;它能使访问者方便地返回主页或者 继续进一步访问。导航栏可以是按钮、文本超级链接或者图像,可以在站点的每一网页上 殳置导航栏,一般情况下导航栏应放在网页中比较显眼的位置。 5、表格:在网页中的表格主要是一种用来控制网页中页面布局的有效方式。为了达到较 理想的视觉效果,通常都有不显示边框 6、表单:是一种特殊的网页元素,它通常用来收集信息或实现一些交互式效果。其主要 功能是接收用户在浏览器端的输入,然后将这些信息发送到用户设置的目标端
教 学 过 一、基础概念 1、网页：网站中供用户阅读的一个个页面，又称为 WEB 页。是通过超级链接将各种文档 连接起来的一个大规模信息集合。网页（Web 页）一般指文件扩展名为 htm（或 html） 结尾的文档。这些文档是用文本标记语言 HTML 表示出来的，故通常也称之为 HTML 文 档。这种语言要通过 IE 浏览器“翻译”过来我们才能直接访问。 2、主页（Homepage）：是各个网站向用户提供的最初起始页面。通常包括通向其它相关页 面的超级链接。 3、万维网：（World Wide Web）简称 WWW，或 3W，是目前 INTERNET 网上最流行的一 种基于超文本形式资源组强形式。 4、 浏览器：网络中资源要通过浏览器来访问（IE、Netscape、腾讯）。 5、 统一资源定位器（universal resource locator，URL）：用来指出某一项信息所在位置及 存取方式，也就是我们经常所说的网址。 6、 通信协议 HTTP：超文本传输协议 FTP：文件传输协议 二、 网页包括的主要元素 1、 文本：信息载体和交流工具，网页的主体以文本为主。文本格式有（字体、字号、颜 色等） 2、 图像：在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像 可以用作标题、网站标志（Logo）、网页背景、链接按钮、导航栏、网页主图等。图像在 网页中可以使用多种文件格式，但使用最多的还是 JPEG 和 GIF 两种格式，因为这两种图 像格式占用空间最少。网页中使用图像不宜太多，每张图像也不宜太大，图像过多传会让 人觉得累赘，过大会影响网页的传输速度。 3、 超级链接：它是 Internet 上最受欢迎的基于超文本方式的多媒体信息查询系统。它 是从一个网页指向另一个目的端的链接。该链接可以指向该网站的另一个网页，也可以指 向世界各地的其他网页。文字或图像都可以设置超级链接。链接一般包括两种类型：站内 和站外链接。 4、 导航栏：是网站设计者规划好网站结构后必须考虑的一个问题。为了让访问者顺利浏 览，避免访问者迷失方向，可以在网页上设置导航栏；它能使访问者方便地返回主页或者 继续进一步访问。导航栏可以是按钮、文本超级链接或者图像，可以在站点的每一网页上 设置导航栏，一般情况下导航栏应放在网页中比较显眼的位置。 5、 表格：在网页中的表格主要是一种用来控制网页中页面布局的有效方式。为了达到较 理想的视觉效果，通常都有不显示边框。 6、表单：是一种特殊的网页元素，它通常用来收集信息或实现一些交互式效果。其主要 功能是接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。 7、 多媒体及特殊效果：有些网页为了吸引浏览者，可级还会有声音、动画、视频等多媒 体元素以及悬停按钮，Java、ActiveX 控件等特殊效果
、网页设计原则 1、正确分析网页用户需要 2、网页命名要简洁「在助于管理网页 方便用户搜索 3、确保页面导览性好 4、网页下载时间不宜过长 5、网页设计做到不同环境均能浏览 6、网页中的图形设计(gif和 jpg/jpeg) 7、站点内容搭配(图文并茂、美观大方) 8、尽量使用相对链接 9、页面色彩(页面色彩是树立网页(站)形象的关键因素之一,在搭配网页色彩时,要注 意色彩的鲜明性、独特性、合适性和联想性) 10、网页的文字(四大原则) 原则一:不要使用超过3种字体的文字类型,否则网页看起来将显得杂乱,没有主题。 教|原则二:不要用太大的字,因为版面空间非常宝贵和有限 原则三:最好不要使用不停闪烁的文字 原则四:标题文字字体应比正文稍大,颜色有所区别。 四、网站规划流程 主页面」 学|1、确定网站规划主题 2、搜集资料 3、规划网站 次页面11htm 次页面23htm 次页面33htm 过/4、选择合适制作工具 5、制作网页 上传测试 次页面44htm 次页面56htm 次页面66htm 7、推广宣传 程 例如:设计一个学习型的网站其模块(结构可以设计如下) 首页、图像处理( FIREWORKS、 PHOTOSHOP)、动画( FLASH MX2004、COOL3D、3DS MAX)、网页设计( FRONTPAGE、 DREAMWEAVER、 PHOTOSHOP)、程序设计(VB、C PASCAL、 DELPH)、教程下载、学习园地、联系我们 五、网站分类 1、门户网站:如www.sinacomcn 职能网站:如www.alibaba.com.cn 3、专业网站:如www.cctv.com 4、个人网站:如www.wu.com 课堂小结、作业 网页设计原则2、网站规划流程3、常用工具 教学反思:本堂课主要学习了网页的主要制作和设计流程的知识简介。在介绍的过程中,结 合机房的各种设备,来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中 也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题,就是学生对网页制作 软件的认识还是很基础的,这需要在以后的教学过程中更加注意这个方面的锻炼
教 学 过 程 三、网页设计原则 1、 正确分析网页用户需要； 2、 网页命名要简洁 在助于管理网页 方便用户搜索 3、 确保页面导览性好 4、 网页下载时间不宜过长 5、 网页设计做到不同环境均能浏览 6、 网页中的图形设计（.gif 和.jpg/jpeg） 7、 站点内容搭配（图文并茂、美观大方） 8、 尽量使用相对链接 9、 页面色彩（页面色彩是树立网页（站）形象的关键因素之一，在搭配网页色彩时，要注 意色彩的鲜明性、独特性、合适性和联想性） 10、网页的文字（四大原则） 原则一：不要使用超过 3 种字体的文字类型，否则网页看起来将显得杂乱，没有主题。 原则二：不要用太大的字，因为版面空间非常宝贵和有限。 原则三：最好不要使用不停闪烁的文字。 原则四：标题文字字体应比正文稍大，颜色有所区别。 四、网站规划流程 1、 确定网站规划主题 2、 搜集资料 3、 规划网站 4、 选择合适制作工具 5、 制作网页 上传测试 7、推广宣传 例如：设计一个学习型的网站其模块（结构可以设计如下） 首页、图像处理（FIREWORKS、PHOTOSHOP）、动画（FLASH MX2004、COOL 3D、3DS MAX）、网页设计（FRONTPAGE、DREAMWEAVER、PHOTOSHOP）、程序设计（VB、C、 PASCAL、DELPHI）、教程下载、学习园地、联系我们 五、网站分类 1、 门户网站：如 www.sina.com.cn 2、 职能网站：如 www.alibaba.com.cn 3、 专业网站：如 www.cctv.com 4、 个人网站：如 www.wu.com 六、课堂小结、作业 网页设计原则 2、网站规划流程 3、常用工具 教学反思：本堂课主要学习了网页的主要制作和设计流程的知识简介。在介绍的过程中，结 合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的注意力。在实际的教学当中 也确实产生了较好的教学效果。同时在教学的过程也出现了一些问题，就是学生对网页制作 软件的认识还是很基础的，这需要在以后的教学过程中更加注意这个方面的锻炼。 主页面 index.htm 次页面1 1.htm 次页面2 3.htm 次页面3 3.htm 次页面4 4.htm 次页面5 6.htm 次页面6 6.htm
Dreamweaver MX2004教案 第一周星期三第5,6节 Dreamweaver mX2004教案 第二周星期一 网站制作流程 课题教标教点教点 教学目1、掌握网站制作的基本流程;2、掌握网站初期规划;3掌握网站整体布局。 学重网点制作的初期规划 教学难网点制作的初期规划
Dreamweaver MX2004 教案 第一周 星期三 第 5，6 节 Dreamweaver MX2004 教案 第二周 星期一 第 3、4 节 课 题 网站制作流程 教学目 标 1、掌握网站制作的基本流程；2、掌握网站初期规划；3 掌握网站整体布局。 教学重 点 网点制作的初期规划 教学难 点 网点制作的初期规划
制作网站的流程 建立一个网站上一个系统工程,有自己特定的工作流程,只有遵循这个步骤,才 能设计出一个令人满意的网站。下面我们就来谈一谈网站设计的基本流程。网站设计 主要分三个阶段。初期规划、中期实际制作、后期维护 (一)初期规划: 1、确定网站的主题、名称:主题鲜明、小而精、体现个性 2、搜集材料:可以从各类媒介中收集,但就注意要有特色(自己的东西) 3、规划网站:包括要栏目的设置、目录结构、风站的风格等。网站风格主要体现 在: ①颜色的搭配: ②网站的标志(Logo) ③版面的布局:突出重点、平衡和谐,网站标志、主菜单等重要模块应放在最显 眼、最突出的位置,然后再安排次要模块(如搜索、友情链接、计数器、版权信息、 E-mail地址等) 教 ④图像的运用:整个页面不要太花,暄宾夺主主,图像大小(字节数)尽可能缩 小,单张图像不要超过30KB,每页图像总量不要超过60KB。最好采用JPG和GIF两种 图像格式。 (二)、实际制作 学 1、制作网站主要包括以步骤 ①建立一个用于容纳首页及相关网页和网站中用到的其他文件的本地站点 ②在站点根目录下创建子目录(为了使文件安排比较清晰,将页面文件和图像 文件分开放置) 过 ③向该站点中添加所需的空网页。注意:文件名和目录都不能使用中文,且用小 写。 ④设计网页尺寸:目前大都采用的是15寸显示器,页面大都设为800×600规格, 网页应选择760×420模式 程 ⑤设置网页的属性:包括页面标题、背景图像、背景颜色、链接颜色、文字颜色 ⑥向网页中插入文本、图形图像、动画等对象,并将图像合理布局 ⑦建立所需的超级链接。 ⑧预览和保存网页。 2、上传测试网页制作完毕后一般要进行测试。主要包括上传前兼容性测试、链接 测试和上传后实地测试。完成上传前所需的测试后,利用FTP工具把网页发布到自己 申请的主页存放服务器上。网站上传达室后要在浏览器中打开自己的网站,进行实地 测试,发现问题及时修改,然后再上传测试。全部测试完毕后就可以把网址告诉给朋 友,让他们不浏览 (三)、后期维护 1、推销网站:网页做好后,要不断地进行宣传,提高网站的访问率和知名度。 推广网站的方法很多,如E-mail、新闻组、与别的网站交换链接、到搜索引 擎上注册、加入交换广告等。 2、维护更新:网站要注意定期维护、扩充内容,不要长期不变,只有不断补充新
教 学 过 程 一 制作网站的流程 建立一个网站上一个系统工程，有自己特定的工作流程，只有遵循这个步骤，才 能设计出一个令人满意的网站。下面我们就来谈一谈网站设计的基本流程。网站设计 主要分三个阶段。初期规划、中期实际制作、后期维护。 （一）初期规划： 1、确定网站的主题、名称：主题鲜明、小而精、体现个性。 2、搜集材料：可以从各类媒介中收集，但就注意要有特色（自己的东西）。 3、规划网站：包括要栏目的设置、目录结构、风站的风格等。网站风格主要体现 在： ①颜色的搭配： ②网站的标志（Logo） ③版面的布局：突出重点、平衡和谐，网站标志、主菜单等重要模块应放在最显 眼、最突出的位置，然后再安排次要模块（如搜索、友情链接、计数器、版权信息、 E-mail 地址等）。 ④图像的运用：整个页面不要太花，暄宾夺主主，图像大小（字节数）尽可能缩 小，单张图像不要超过 30KB，每页图像总量不要超过 60KB。最好采用 JPG 和 GIF 两种 图像格式。 （二）、实际制作 1、制作网站主要包括以步骤： ① 建立一个用于容纳首页及相关网页和网站中用到的其他文件的本地站点。 ② 在站点根目录下创建子目录 （为了使文件安排比较清晰，将页面文件和图像 文件分开放置）。 ③ 向该站点中添加所需的空网页。注意：文件名和目录都不能使用中文，且用小 写。 ④ 设计网页尺寸：目前大都采用的是 15 寸显示器，页面大都设为 800╳600 规格， 网页应选择 760╳420 模式。 ⑤ 设置网页的属性；包括页面标题、背景图像、背景颜色、链接颜色、文字颜色 等。 ⑥ 向网页中插入文本、图形图像、动画等对象，并将图像合理布局。 ⑦ 建立所需的超级链接。 ⑧ 预览和保存网页。 2、上传测试网页制作完毕后一般要进行测试。主要包括上传前兼容性测试、链接 测试和上传后实地测试。完成上传前所需的测试后，利用 FTP 工具把网页发布到自己 申请的主页存放服务器上。网站上传达室后要在浏览器中打开自己的网站，进行实地 测试，发现问题及时修改，然后再上传测试。全部测试完毕后就可以把网址告诉给朋 友，让他们不浏览。 （三）、后期维护 1、 推销网站：网页做好后，要不断地进行宣传，提高网站的访问率和知名度。 推广网站的方法很多，如 E-mail、新闻组、与别的网站交换链接、到搜索引 擎上注册、加入交换广告等。 2、维护更新：网站要注意定期维护、扩充内容，不要长期不变，只有不断补充新 的内容。才能吸引住浏览者。同时，随着软硬件的进步，网页设计也应由文字向多媒 体、由平面向立体动画或影片、由单项传播向交互式发展。 二、复习与思考: 1、网页文件的扩展名 2、网页包括的主要元素 3、网页图像格式使用最多的两种格 三、教学反思：学生通过本节课的学习后，大多数同学已经掌握了网页制作的基本流 程。在教学过程中取得了较好的效果，对于基础较差的学生单独辅导。应该应用较多 的实例来调动学习积极性