《DreamWeaverCS5学习笔记之：网页设计基础讲解》由会员分享，可在线阅读，更多相关《DreamWeaverCS5学习笔记之：网页设计基础讲解（20页珍藏版）》请在金锄头文库上搜索。
1、第一课网页设计基础一、学做网页的基础知识1、学好做网页 （在互联网上基于 http 协议传播信息的页面）要做到三个方面:一是多看；二是多想；三是多做。2、好的网站（反应同一主题的多个网页的集合）颜色搭配：儿童网站:橙色 ,粉红色 ,紫色；时装网站 :黑、白色；高科技网站：蓝色3、做网站时的三大原则： 1 建立网页前 需要新建一个网站； 2 文件名，对象 ID 名 ，尽量使用英文，拼音，数字 尽量避免使用中文，首页一般命名为： index.htm（ l）或 default.htm（ l）（注：主页必须放在网站的根目录下面，同时名称也有特殊的要求） ；3 尽量要存盘。4、网页内容的组成：（1）文字
2、；（2）图片（ jpg， gif，png）；（3）动画（ swf，gif）；（4）多媒体；（ 5 超链接；（6）表单；（ 7）网页特效；（ 8）其它元素；（ 9）网页标题；（ 10）LOGO；（ 11）导航栏。5、网页的制作方法；（ 1）代码法： html；（2）软件制作： Dreamweaver 、frontpage（所见即所得）。6、DW cs6 的界面：、设置工作区：在 DS6 界面的“工作区菜单”的下拉箭头进行选择，默认是设计器，然后有经典等 16 种样式进行选择。8、调整工具栏：从菜单 查看 工具 的下级菜单中选择文档、样式呈现、标准三种工具输入法；编码工具栏（只在代码和拆分视图时窗
3、口左边垂直显示，也可在菜单 查看 工具 的下级菜单中选择）、浏览器导航工具栏只在实时视图中显示。9、保存自定义工作区：设计好各种面板、工具栏等工作区后则可从菜单 工作区 新建工作区 ，在弹出菜单中输入名称后确定则可。10、创建自定义的快捷键 （是独立于自定义工作区加载和保存的） ：从菜单 编辑 快捷键 ，弹出“快捷键”窗口；单击“复制副本”按钮，在弹出的“复制副本”窗口中的“复制副本名称”框中输入名称后点击“确定”按钮；从“命令”框中选择“菜单命令” ，从“文件”命令列表中选择“保存全部（ L）”（此命令还没有快捷键，经常使用） ，在“按键”框中插入光标，同时按下“ Ctrl+Alt+S ”组
4、合键（则会提示此组合键已分配给“拆分单元格（ P）且与QQ 的消息窗口快捷键相同） ，我们可选择“ Ctrl+Alt+Shift+S ”；单击“更改”，“确定”，则会保存好，在之后就可以使用了。11、使用属性检查器（是上下文驱动的，随所选元素类型而变）：使用 HTML 选项卡：将光标停在任何文本内容中， “属性”检查器将提供快速分配一些基本的 HTML 代码和格式化效果的方式。当选择“ HTML ”按钮时，可以在“格式”框中应用标题和段落标签，还可设置字体的粗体、斜体；项目列表、编号列表、缩进等。使用 CSS 选择卡：单击 CSS(层叠样式表 )按钮，可以快速访问用于分配或编辑 CSS 格式化
5、效果的命令。图像属性：选择一幅图像，可以访问“属性检查器”中的基于图像的属性和格式化控制。二,创建站点 （流程：规划网站类型及主题搜集资料素材使用软件进行网页制作测试及发布）1、规划站点（用来存放网站中所有元素的文件夹，但在Windows 资源管理器中看不到站点名称，为了制作方便需要将这个文件夹和制作软件相链接，分为：（ 1）本地站点；（2）远程站点）：（ 1）决定站点的目标 ,如希望通过网站获得什么 ?(要干什么 ?)（ 2）选择站点面对的对象 ?希望吸引哪些人 ?（ 3）创建具有浏览器兼容性的站点 .（ 4）组织站点的结构 ,在本地磁盘上建立站点 ,修改结束后再公布于众 .（ 5）收集资源
6、 .2、规划本地站点目录结构： （1）images（图片）；（2）swf（动画）；（ 3） css（CSS 样式）；（4）script（存放网页特效） JS；（5）other（其它）3,创建站点的方法有 ：1）站点新建站点； 2）文件面板右上角的下拉箭头； 3）应用程序栏（窗口应用程序栏）的图标； 4)欢迎窗口处4、创建 (链接 )站点的基本结构1),选择 站点 下面的 新建站点 2), 输入站点的名称 (该名称出现在站点窗口中F8 即文件窗口 )3), 指定网站文件存放的位置4), 在 站点 对话框中选择 高级设置 5), 默认图像文件夹 ,通常输入 images6),还可“选择站点范围媒体
7、查询文件”后的选择文件夹路径按钮。7),Web URL 中输入网站的URL,如果没有则留为空 ,8),缓存如不选则打不开资源面。 （还可设置遮盖、设计备注、文件视图列、 contribute、模板、 Spry、 Web 字体。）(? 9),选择 站点地图布局 ,在主页中输入 index.htm 或 default.html（主页只能放在网站的根目录下） ?)10),确定5、在文件面板中可创建子页面，文件夹：右击站点根目录 ,在弹出菜单中进行。6、编辑页面 ：双击文件名；将文件拖入，如果已经打开了文件，只要拖入不是该文档的区域则可。？ 8、打开己做好网站窗口的方法:站点 - 新建站点 ,输入站点
8、名称 (随意 ),再指定网站源文件位置 ,确定 .三、自定义工作区1、浏览工作区： 、代码视图（编码员习惯用） ；、拆分视图（开发人员，从菜单 查看 垂直拆分 可进行垂直与水平拆分的切换） ；、设计视图（设计人员） ；、实时视图（节省在浏览器中预览页面的时间） 、2、处理面板（可随意显示、隐藏、排列、停靠） ：、菜单 窗口 列出了所有可用的面板；、通过双击、单击、拖动实现各类操作（但是，停靠则要拖动时出现蓝色释放区才可）四、 HTML （ Hypertext Markup Language超文本标记语言） 基础1、代码视图 的行数、自动换行、自动缩进、语法着色、信息栏中的语法错误警告的设置：菜
9、单“查看代码视图选项” 下的级联菜单中选择。 CSS 样式面板中出现的规则与代码视图中的顺序一样，可以自动拖动调整顺序。可右击其一规则（后选择“转到代码” ）则将光标停在该规则的代码。2、正确结构化或平衡的 HTML 标记由一个开始标签和一个封闭标签组成。标签封闭在“ ” 括号内。封闭标签有一个斜杠。2、网页基本代码2、网页基本代码5、HTML 常用字符实体6、常用的 HTML 默认设置：五、 CSS 格式化1、可以用以下 3 种方式应用 CSS（Cascading Style Sheet，可译为 “层叠样式表 ”或“级联样式表 ” 是一组格式设置规则，用于控制 Web 页面的外观；是用于控制
10、网页样式并允许将样式信息与网页内容分离的一种标记性语言）格式化：内联、嵌入在内部的样式表、通过自问样式表。2、CSS 格式化指令 称为规则（ rule） ,规则由两部分组成：选择器和一个或多个声明。选择器指定要格式化什么元素或者哪些元素的组合， 而声明则包含格式化规范。 CSS 规则可以重新定义任何现有的 HTML 元素以及定义两个自定义的选择器修饰符， 它们分别名为 “class”和“id”（规则名称不能以数字或者标点符号字符开头，只有两个例外，即句点“.”指示类和磅符号“ #”指示 id）。如果功能还不够强大灵活，也可以使用一个规则组合选择器，对元素以独特方式出现的页面内的特定实例进行格式
11、化， 比如当一个元素嵌套在另一个元素内时。 注意：在大多数情况下，当启用“实时视图”时，将不能创建新的CSS 规则或者格式化文档中的元素。3、CSS 规则执行工作的四种理论：、层叠理论 描述了规则在样式表中或者页面上的顺序和位置如何影响样式的应用。接近度是决定如何应用 CSS 的一选择器声明声明HTML 元素多重后代p font-family: Verdana; color: blue; 类ID th,tdfont-weight:bold;padding:4px;属性值属性值个强大因素。当尝div pfont-size:95%;margin-top:5px;试确定将选用哪个CSS 规则时，记住
12、浏览器通常使用以下层级顺序，其中级是最高的层级：浏览器默认设置；外部样式表；内部样式表（在头部区域中） ；内联样式（在 HTML 元素内）。、继承理论 描述了一个规则怎样被一个或多个以前声明的规则所影响。继承可以影响同名的规则，以及格式化父元素或者彼此嵌套原元素的规则。、后代理论 描述了怎样基于特定元素相对于其他元素的位置对其进行格式化。通过构建多个元素的选择器，以及id 和 class 属性，可以针对Web 页面肉摊文本的特定实例进行格式化。、特征理论描述了当规则相冲突时浏览器怎样确定应用什么格式化效果的概念。内联样式用过任何其他的格式化。6、格式化对象： 格式化对象就是用于修改元素的定位、
13、大小、边框和阴影以及边距和填充的规范。尽管常用于 元素，实质上可以应用于任何标签。、定位： CSS 可以将元素旋转在任何位置及另一元素的上面或下面。、大小： CSS 可以指定元素的方框的宽度和高度。、边框和阴影：每个元素都有4 条单独格式化的边框。、边距和填充： 边距在元素外面创建空间在一个元素与另一个元素之间；填充在元素的内容与其边框之间增加间距，而不管边框可见。7、多重、类和 ID、多重 ：就是同时对多个元素应用格式化。、创建类选择器 ：类可以应用于页面上任意数量的元素，而id 只可能在每个页面上出现一次。对于印刷物设计师，类与 Sdobe InDesign的段落、字符和对象样式的组合相似。类和 id 名称可以是字母和数字、 单个单词、科室以及几乎任何内容的任意组合， 但是不能以数字开头，也不能包含空格。也应该避免使用HTML 标签和
