02-第2章 网页设计基础入门.ppt

《02-第2章 网页设计基础入门.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第二章　网页设计基础入门第一节网站设计总规划确定网页的整体风格网页色彩的搭配设计草图1．确定网页的整体风格风格是指站点整体形象给访问者的综合感受。这个整体形象包含很多因素网站标志的设计色彩版面布局浏览方式交互性文字价值等1．确定网页的整体风格网站欣赏1．确定网页的整体风格网站欣赏1．确定网页的整体风格网站欣赏1．确定网页的整体风格确定网站风格要注意的问题：网站标志要放在醒目位置，如左上角，而且要保持不变。最好能够有一句反映网站精髓的标语，并能动态显示。导航部分应该放在每一张网页的相同位置，便于访问者浏览网站的全部内容。1．确定网页的整

2、体风格确定主体颜色，并注意颜色搭配要让人感觉舒服，不要太刺眼，也不能不突出需要强调的内容。页面的布局是风格的一个重要标志。不要忘记考虑主页的可扩充性，以方便将来再添加栏目。内容结构越简单越好，分类要简而精。一切都为访问者能够最快地找到访问的资料而考虑。2．网页色彩的搭配各种颜色给我们带来的不同感觉：红色：有力量、喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，有愤怒、热情、活力的感觉。橙色：也是一种激奋的色彩，有轻快、欢欣、热烈、温馨、时尚的效果。黄色：亮度最高，有温暖感，具有快乐、希望、智慧和轻快的个性，让人感觉灿

3、烂辉煌。黑色：给人深沉、神秘、寂静、悲哀、压抑的感觉。2．网页色彩的搭配绿色：介于冷暖色中间，显得和睦、宁静，给人健康、安全的感觉。与金黄、淡白搭配，产生优雅、舒适的气氛。蓝色：代表永恒、博大，最具凉爽、清新、专业的色彩。与白色混合，能体现柔顺、淡雅、浪漫的气氛，给人感觉平静、理智。紫色：给人神秘、压迫的感觉。白色：具有洁白、明快、纯真、清洁的个性。灰色：具有中庸、平凡、温和、谦让、中立和高雅的个性。2．网页色彩的搭配2．网页色彩的搭配一般白色和黑色的背景网页最好制作。亮色和暗色搭配，容易突出画面。近似颜色的搭配，能给人柔和的感觉。通

4、过不同颜色的对比，达到更好的效果。2．网页色彩的搭配执行【修改】

5、【页面属性】命令，弹出【页面属性】对话框，可以修改颜色。3．设计草图在制作网站前，先绘制网站的设计草图第二节站点的建立Dreamweaver8有站点管理功能。通过它来轻松创建页面以及文件夹等。例：站点的建立执行【管理站点】命令新建站点输入站点的名称根据提示建立站点创建“images”文件夹新建网页文件“index.htm”第三节页面的构架视图方式表格的简单应用图像的基本操作文本的编辑与基本操作插入水平线和更新日期图片和背景音乐1．视图方式代码视图可以直接编辑网页的源代码

6、。设计视图能更好地美化网页，更合理地布局网页。同时显示代码视图和设计视图让我们能够更好地理解源代码，提高编程能力。1．文本的编辑与基本操作插入网页的标题：在【文档】工具栏的【标题】文本框中输入网页的标题即可。4．文本的编辑与基本操作插入特殊文本字符：方法一：在【插入】工具栏中选择【文本】项，打开【文本】工具栏。单击此按钮，还可以插入更多的符号4．文本的编辑与基本操作插入特殊文本字符：方法二：执行【插入】

7、【HTML】

8、【特殊字符】

9、【其他字符】命令。方法三：选择一种中文输入法，在输入法面板的小键盘图标上右击鼠标，在弹出的菜单中选择【特

10、殊符号】。4．文本的编辑与基本操作文本的简单排版：常见问题一：使用回车换行时，段落间距太大时，可以使用换行符来代替回车，方法有以下两种。执行【插入】

11、【HTML】

12、【特殊字符】

13、【换行符】命令来完成使用快捷键Shift+Enter4．文本的编辑与基本操作文本的简单排版：常见问题二：文章开头无法按空格键空出两格。解决方法：单击【字符】按钮右边的小三角按钮，在弹出的菜单中选择【不换行空格】命令执行【插入】

14、【HTML】

15、【特殊字符】

16、【不换行空格】命令来完成例：文字简单排版4．文本的编辑与基本操作设置字体、颜色、大小、对齐方式和样式：选中

17、文字，可以通过调整【属性】面板中各个参数来改变文字的字体、颜色、大小和对齐方式。例：改变标题的格式字体变大例：设置标题文字的各种属性改变文字的字体改变文字的大小设置文字的颜色设置文字居中4．文本的编辑与基本操作页面属性：执行【修改】

18、【页面属性】命令，或者单击【属性】面板上的【页面属性】按钮。例：设置段落文字的属性打开“页面属性”对话框文字大小为16像素文本颜色为蓝色左、右边距为20像素上、下边距为0像素5．插入水平线执行【插入】

19、【HTML】

20、【水平线】命令，可以在编辑页面中插入一条水平线。例：插入水平线插入水平线设置宽为600设置

21、高为1对齐方式为居中6．插入更新日期执行【插入】

22、【日期】命令或者单击【常用】工具栏中的【日期】按钮。例：插入更新日期插入日期选择日期格式7．背景图片打开【页面属性】对话框。在【外观】分类中，单击【背景图像】后面的【浏览