制作网站练习过程详解.docVIP

项目七 “宁月”网站制作 【知识目标】熟练掌握网制作流程熟练掌握Dreamweaver编辑网页的各种方法掌握网页界面设计中的色彩应用理论掌握网页界面设计中的布局与版式的应用掌握各种类型网站的开发方法初步掌握动态网站的制作思路掌握网站策划书的书写方法 【】收集、处理信息，准备、加工素材的能力颜色搭配版式开发网站的综合能力代码与界面融合强化学生的策划能力培养学生与社会交往的能力培养学生的责任感、承受能力Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。【】人民邮电出版社尼春雨李金莱Dreamweaver 8中文版网页制作基础与实例教程:职业版电子工业出版社王涛 [2]Dreamweaver 8学习教程 /articledw_3360.html [3]零基础网页设计 /index.asp [4]今日在线学习网 /rjkt/dreamweaver [5]设计在线 /do/dreamweaver 任务一 网站制作基础入门 【】【】在互联网上应用最广的功能应该是网页浏览。浏览器窗口中显示的一个页面被成为一个网页，网页中可以包括文字、图片、动画，还有视频和音频等内容。那网站呢？网站是众多网页的集合。不同的网页通过有组织的链接整合到一起，为浏览者提供更丰富的信息网站同时也是信息服务类企业的代名词。如果在网易或者在搜狐工作，那他可能会告诉你，他在一家网站工作。 第2类：网上聊天／即时信息 / ICQ 第3类：网上社区／讨论 / 邮件列表 第4类：计算机技术 第5类：网页 / 网站开发 第6类：娱乐网站 第7类：旅行 第8类：参考 / 资讯 第9类：家庭 / 教育 第10类：生活 / 时尚? 2.2 收集网页中所需要的图片和信息（注意对素材的分类） 在做网页之前，我们要尽可能多地收集与网站主题相关的素材（文字、图像、多媒体等素材），再去芜存菁，取其精华为我所用。 2.2.1 文字素材 文本内容可以让访问者明白网页要表达的内容。文字素材可以从用户那里获取，也可以通过网络、书本等途径收集，还可以由制作者自己编写相关文字材料，这些文字素材可以制作成Word文档或txt文档保存到站点下的相关子目录中。 2.2.2 图像、多媒体等素材 一个能够吸引访问者眼球的网站仅有文本内容是不个够的，还需要添加一些增加视觉效果的素材，比如图像（静态图像或动态图像）、动画、声音、视频等等，使网页充满动感和生机，从而吸引更多的访问者。这些素材可以由用户提供现成的，也可以由制作者自己拍摄制作，或通过其他途径获取。将收集整理好的素材存放到站点下的相关子目录中。 2.3 网页布局的构想 2.3.1 网站栏目结构 确定网站的栏目并绘制框架结构图：栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来，如图7.1.2所示。 图7.1.2 网站结构图 2.3.2 网站目录规范 树型目录：网站的目录是指你建立网站时创建的目录。目录结构的好坏，对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。 合理安排文件的目录，不要将所有文件都存放在根目录下 按栏目内容建立子目录 （3）在每个一级目录或二级目录下都建立独立的Images 目录 （4）目录的层次不要太多 （5）不要使用中文目录 （6）使用意义明确的目录文件名 2.3.3 网页版面布局样式及特点 图7.1.3 网页设计草图 用笔勾画网页的轮廓草图及布局安排。如图7.1.3所示为北京希望电子出版社BHP网站网页设计草图之一。 “T” 字型结构布局 所谓“T”字型结构，就是指页面顶部为一横条(主菜单、网站标志、广告条)，下方左侧为二级栏目条，右侧显示具体内容的布局，如图7.1.4所示。 图7.1.4 “T”字型 “同” 字型结构布局 在“T”字型结构的基础上，将右侧设为链接栏目条，屏幕中间显示具体内容的布局，如图7.1.5所示。 图7.1.5 “同”字型 “国”（“口”）字型布局 国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告。(还有一种四周空出，中间作窗口) ，如图7.1.6所示。 图7.1.6 “口”字型 自由式（“POP”）布局 自由式布局打破了“T”字型、同字型、国字型布局的菜单框架结构，页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由地摆放在页面