第2章 网页制作快速入门

《第2章 网页制作快速入门》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第第第第2222章章章章网页制作快速入门网页制作快速入门网页制作快速入门网页制作快速入门网页设计如果没有CSS，现代的Web设计师将无立足之地。第2章【前章回顾前章回顾】�基本概念：网页、浏览器、HTML、域名�网站建设流程网页设计如果没有CSS，现代的Web设计师将无立足之地。2【本章内容本章内容】�DWCS5的界面�DWCS5的核心功能�编辑代码�创建和管理站点�创建和管理文件�规划站点时应注意的原则�制作一个简单网页�网站布局欣赏网页设计如果没有CSS，现代的Web设计师将无立足之地。32.12.12.12.1DWCS5DWCS5DWCS5DWCS5

2、的界面的界面网页设计如果没有CSS，现代的Web设计师将无立足之地。42.1DWCS52.1DWCS52.1DWCS52.1DWCS5的界面的界面DreamweaverCS5的工作区�应用程序栏�文档工具栏�文档窗口�工作区切换器�面板组�标签检查器�属性检查器�文件面板网页设计如果没有CSS，现代的Web设计师将无立足之地。52.22.22.22.2DWCS5DWCS5DWCS5DWCS5的核心功能的核心功能�可视化制作网页�完美与Adobe其他软件结合�CSS预置功能，方便版面布局�支持Div元素控制�利用插件扩展基本功能�内置站点发布管理工具网页设计

3、如果没有CSS，现代的Web设计师将无立足之地。62.32.32.32.3编辑代码编辑代码�使用代码视图：代码提示功能�使用快速标签编辑器�使用“代码片断”面板�使用标签选择器和标签编辑器网页设计如果没有CSS，现代的Web设计师将无立足之地。72.42.42.42.4创建和管理站点创建和管理站点�所谓站点，可以看作是一系列文档的组合，这些文档之间通过各种链接关联起来。站点实际对应的是一个文件夹，我们设计的所有网页就保存在这个站点（文件夹）中，存储在本地机器中的站点（文件夹）称为本地站点，发布到WEB服务器上的站点（文件夹），则称为远程站点。�创建站点�管

4、理站点网页设计如果没有CSS，现代的Web设计师将无立足之地。82.52.52.52.5创建和管理文件创建和管理文件�创建新文件�文件的移动、复制和删除�页面属性设置：外观、链接、标题和编码、跟踪图像（见示例1）�页面head部分设置：自动刷新（后续介绍）网页设计如果没有CSS，现代的Web设计师将无立足之地。92.62.62.62.6规划站点时应注意的原则规划站点时应注意的原则�不要将全部文件都放在根目录下�子目录可以根据主导航栏目建立�通常站点根目录下都会有一个images目录，用于存放图片�文件和文件夹要使用英文或拼音命名�文件和文件夹不要包含空格等

5、�文件和文件夹的命名应有一定规律网页设计如果没有CSS，现代的Web设计师将无立足之地。102.72.72.72.7制作一个简单网页制作一个简单网页示例1介绍:�实例中只用到最简单的几个页面元素，主要有表格、文本和图片。�页面主色调为绿色，表现健康、积极向上的生活态度，取名“我的地盘”意在表现一种自信，内容上可展现个人风采。网页设计如果没有CSS，现代的Web设计师将无立足之地。112.82.82.82.8网站布局欣赏网站布局欣赏�北京大学（http://www.pku.edu.cn/）�“沃尔玛”中国（http://www.wal-martchina.c

6、om）�Apple(http://www.apple.com/)�Adobe（http://www.adobe.com/）观赏其页面布局、导航设计、色彩搭配、动感效果等，给出鉴赏报告。�以“网站欣赏”为关键字，在互联网上进行搜索，对比分析在设计风格上，国内与国外网站的不同。网页设计如果没有CSS，现代的Web设计师将无立足之地。12本章需要进行的上机实践本章需要进行的上机实践�实践1：站点设置及文件设置�实践2：表格布局、嵌入图片、输入文字、设置链接�实践3：页面属性�实践4：设置head内容网页设计如果没有CSS，现代的Web设计师将无立足之地。13小结

7、小结�本章以“我的地盘”主页的制作为例，介绍了使用DreamweaverCS5创建和管理站点的方法，以及在网页中插入基本的页面元素和设置页面属性的操作过程，达到快速了解DreamweaverCS5制作网页的过程。网页设计如果没有CSS，现代的Web设计师将无立足之地。14练习题练习题�参考本章内容制作一个包含以下知识点的简单网页：�1、在D盘根目录下新建目录myweb2，启动DreamweaverCS5，定义该目录为本地站点根目录。�2、在站点根目录下创建5个网页文件，分别命名为index.html、1.html、2.html、3.html、4.html。

8、�3、打开主页文件index.html，在该页面中设置合适的网页标