DreamWeaverCS5学习笔记之：网页设计基础.doc

第一课 网页设计基础 一、学做网页的基础知识 1、学好做网页（在互联网上基于http协议传播信息的页面）要做到三个方面:一是多看；二是多想；三是多做。 2、好的网站（反应同一主题的多个网页的集合）颜色搭配：儿童网站:橙色,粉红色,紫色；时装网站:黑、白色；高科技网站：蓝色 3、做网站时的三大原则：1建立网页前 需要新建一个网站；2文件名，对象ID名 ，尽量使用英文，拼音，数字 尽量避免使用中文，首页一般命名为：index.htm（l）或default.htm（l）（注：主页必须放在网站的根目录下面，同时名称也有特殊的要求）；3尽量要存盘。 4、网页内容的组成：（1）文字；（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、调整工具栏：从菜单[查看]－[工具]的下级菜单中选择文档、样式呈现、标准三种工具输入法；编码工具栏（只在代码和拆分视图时窗口左边垂直显示，也可在菜单[查看]－[工具]的下级菜单中选择）、浏览器导航工具栏只在实时视图中显示。 9、保存自定义工作区：设计好各种面板、工具栏等工作区后则可从菜单[工作区]－[新建工作区]，在弹出菜单中输入名称后确定则可。 10、创建自定义的快捷键（是独立于自定义工作区加载和保存的）：⑴从菜单[编辑]－[快捷键]，弹出“快捷键”窗口；⑵单击“复制副本”按钮，在弹出的“复制副本”窗口中的“复制副本名称”框中输入名称后点击“确定”按钮；⑶从“命令”框中选择“菜单命令”，从“文件”命令列表中选择“保存全部（L）”（此命令还没有快捷键，经常使用），在“按键”框中插入光标，同时按下“Ctrl+Alt+S”组合键（则会提示此组合键已分配给“拆分单元格（P）且与QQ的消息窗口快捷键相同），我们可选择“Ctrl+Alt+Shift+S”；⑷单击“更改”，“确定”，则会保存好，在之后就可以使用了。 11、使用属性检查器（是上下文驱动的，随所选元素类型而变）： ⑴使用HTML选项卡：将光标停在任何文本内容中，“属性”检查器将提供快速分配一些基本的HTML代码和格式化效果的方式。当选择“HTML”按钮时，可以在“格式”框中应用标题和段落标签，还可设置字体的粗体、斜体；项目列表、编号列表、缩进等。 ⑵使用CSS选择卡：单击CSS(层叠样式表)按钮，可以快速访问用于分配或编辑CSS格式化效果的命令。 ⑶图像属性：选择一幅图像，可以访问“属性检查器”中的基于图像的属性和格式化控制。 二,创建站点（流程：规划网站类型及主题(搜集资料素材(使用软件进行网页制作(测试及发布） 1、规划站点（用来存放网站中所有元素的文件夹，但在Windows资源管理器中看不到站点名称，为了制作方便需要将这个文件夹和制作软件相链接，分为：（1）本地站点；（2）远程站点）： （1）决定站点的目标,如希望通过网站获得什么?(要干什么?) （2）选择站点面对的对象?希望吸引哪些人? （3）创建具有浏览器兼容性的站点. （4）组织站点的结构,在本地磁盘上建立站点,修改结束后再公布于众. （5）收集资源. 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), 默认图像文件夹,通常输入images 6),还可“选择站点范围媒体查询文件”后的选择文件夹路径按钮。 7),Web URL中输入网站的URL,如果没有则留为空, 8),缓存如不选则打不开资源面。（还可设置遮盖、设计备注、文件视图列、contribute、模板、Spry、Web字体。） (? 9),选择站点地图布局,在主页中输入index.htm或default.html（主页只能放在网站的根目录下）?) 10),确定 5、在文件面板中可创建子页面，文件夹：右击站点根目录,在弹出菜单中进行。 6、编辑页