1、本章要点：网页设计基本理念 确定网页整体风格 网页色彩的搭配 绘制设计草图 建立站点表单视频动画表格图像文字网页中的主要元素不容忽视的下载速度不容忽视的下载速度 Basic ConceptBasic ConceptBasic Concept 能适应不同浏览器及分辨率能适应不同浏览器及分辨率 FrontPage是Microsoft公司推出的Web站点创建和管理工具，它是微软Office成员之一。FrontPage是一个所见即所得的“傻瓜”型网页制作软件，你可以在对HTML毫不了解的情况下轻松地制作出自己的网页来，你需要做的只是用鼠标以及键盘的简单操作。风格，是指站点的整体形象给访问者的综合感受，
2、比风格，是指站点的整体形象给访问者的综合感受，比较抽象。较抽象。网站的整体形象包含以下因素网站的整体形象包含以下因素 色彩色彩 版面布局版面布局 浏览方式浏览方式 网站标志的设计网站标志的设计 交互性交互性 文字文字 价值价值网站欣赏欣赏新浪网网站欣赏欣赏洪恩在线网站欣赏欣赏IBM的网站确定网站风格注意事项确定网站风格注意事项 确定网站风格注意事项确定网站风格注意事项红色：有力量、喜庆的色彩。具有刺激效果，容易使红色：有力量、喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，有愤怒、热情、人产生冲动，是一种雄壮的精神体现，有愤怒、热情、活力的感觉活力的感觉。橙色：也是一种激奋的
3、色彩，有轻快、欢欣、热烈、橙色：也是一种激奋的色彩，有轻快、欢欣、热烈、温馨、时尚的效果。温馨、时尚的效果。黄色：亮度最高，有温暖感，具有快乐、希望、智黄色：亮度最高，有温暖感，具有快乐、希望、智慧和轻快的个性，让人感觉灿烂辉煌。慧和轻快的个性，让人感觉灿烂辉煌。黑色：给人深沉、神秘、寂静、悲哀、压抑的感觉。黑色：给人深沉、神秘、寂静、悲哀、压抑的感觉。绿色：介于冷暖色中间，显得和睦、宁静，给人健康、绿色：介于冷暖色中间，显得和睦、宁静，给人健康、安全的感觉。与金黄、淡白搭配，产生优雅、舒适的安全的感觉。与金黄、淡白搭配，产生优雅、舒适的气氛。气氛。蓝色：代表永恒、博大，最具凉爽、清新、专蓝色
4、：代表永恒、博大，最具凉爽、清新、专业的色彩。与白色混合，能体现柔顺、淡雅、浪业的色彩。与白色混合，能体现柔顺、淡雅、浪漫的气氛，给人感觉平静、理智。漫的气氛，给人感觉平静、理智。紫色：给人神秘、压迫的感觉。紫色：给人神秘、压迫的感觉。白色：具有洁白、明快、纯真、清洁的个性。白色：具有洁白、明快、纯真、清洁的个性。灰色：具有中庸、平凡、温和、谦让、中立和灰色：具有中庸、平凡、温和、谦让、中立和高雅的个性。高雅的个性。根据实际需要，画出网站的设计草图根据实际需要，画出网站的设计草图 Dreamweaver 8 是一款专业的HTML编辑器用于对Web站点、Web页和Web应用程序进行设计、编码和开
5、发。可以查看所有的站点元素或资源，并且可以直接将它们从一个易用面板中拖动到文档。可以程序化开发流程。Dreamweaver 8中的可视化编辑功能可以为页面快速添加各种设计和功能。1.选择工具界面选择工具界面2.主窗口介绍主窗口介绍3.主菜单介绍主菜单介绍4.视图方式视图方式 1.选择工具界面选择工具界面2.主窗口介绍主窗口介绍3.主菜单介绍主菜单介绍4.视图方式视图方式 1.选择工具界面选择工具界面2.主窗口介绍主窗口介绍3.主菜单介绍主菜单介绍4.视图方式视图方式 1.选择工具界面选择工具界面2.主窗口介绍主窗口介绍3.主菜单介绍主菜单介绍4.视图方式视图方式【文本】菜单使你可以轻松地设置文
6、【文本】菜单使你可以轻松地设置文本的格式。本的格式。【命令】菜单提供对各种命【命令】菜单提供对各种命令的访问，包括设置代码格式的命令、令的访问，包括设置代码格式的命令、创建相册的命令等创建相册的命令等 【站点】菜单提供用于管理站点以及【站点】菜单提供用于管理站点以及上传和下载文件的菜单项。上传和下载文件的菜单项。【窗口】菜单提供对面板、检查器和【窗口】菜单提供对面板、检查器和窗口的访问。窗口的访问。【帮助】菜单提供帮助系统，还包括【帮助】菜单提供帮助系统，还包括各种语言的参考材料。各种语言的参考材料。1.选择工具界面选择工具界面2.主窗口介绍主窗口介绍3.主菜单介绍主菜单介绍4.视图方式视图方
7、式代码视图代码视图：可以直接编辑网页可以直接编辑网页的源代码的源代码。设计视图设计视图：能更好地美化网页，能更好地美化网页，更合理地布局网页更合理地布局网页。同时显示代码视图和设计视图同时显示代码视图和设计视图：让我们能够更好地理解源代码，让我们能够更好地理解源代码，提高编程能力。提高编程能力。执行执行【管理站点【管理站点】命令】命令新建站点新建站点输入站点的名称输入站点的名称根据提示建立站点根据提示建立站点创建创建“images”images”文件夹文件夹新建网页文件新建网页文件“index.htmindex.htm”（1）一般来说，网站设计所需遵循的理念有哪些。（）一般来说，网站设计所需遵
8、循的理念有哪些。（）（2）网页设计常用的工具有哪些。（）网页设计常用的工具有哪些。（）AFrontPage BDreamweaver CFlash DFrontPageA带宽问题带宽问题 B版面布局版面布局C色彩搭配色彩搭配 D网站内容网站内容（3）Dreamweaver中有三种视图方式，它们是哪些。（中有三种视图方式，它们是哪些。（）A显示代码视图显示代码视图 B显示设计视图显示设计视图C显示代码视图和设计视图显示代码视图和设计视图 D预览视图预览视图（1）在制作网页之前，先要确定网站的整体风格，这时需要注意）在制作网页之前，先要确定网站的整体风格，这时需要注意哪些问题？哪些问题？（3）访问
9、一些大型的网站，试着分析一下网站使用的网页元素有）访问一些大型的网站，试着分析一下网站使用的网页元素有哪些，它们分别有哪些特点。哪些，它们分别有哪些特点。（2）Dreamweaver有三种视图方式，分别叙述这三种视图的用途。有三种视图方式，分别叙述这三种视图的用途。（1）启动）启动Dreamweaver，并熟悉其工作界面的各个组成部分。，并熟悉其工作界面的各个组成部分。（3）在创建好的站点中创建以下一级目录：）在创建好的站点中创建以下一级目录：img，sound，flash。（2）在本地硬盘上创建一个名为）在本地硬盘上创建一个名为“myweb”文件夹，然后使用文件夹，然后使用Dreamweaver将其定义为一个本地站点。将其定义为一个本地站点。（4）将准备好的素材复制到硬盘站点中对应的目录中。）将准备好的素材复制到硬盘站点中对应的目录中。
