网页设计第1讲网页设计概述

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Dreamweaver CS5,第,1,讲,网页设计概述,1,1,网站的概述,初,识,Dreamweaver CS5,Dreamweaver,CS5,的用户界面,4,网页文件的基本操作,5,设置网页外观属性,第,1,讲,网页设计概述,Dreamweaver CS5,2,网站的概述,1,网页与网站,网页（,Web Page,）是网站中的一页，通常是,HTML,格式,网页可分,静态网页,和,动态网页,浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。,网页设计,第,1,讲,3,网站的概述,1,网站（,Web Site,）是网页的集合,按照内容划分，网站有以下几大类：,网页设计,第,1,讲,大型门户网站,搜索引擎网站,购物网站,专业网站,企业网站,个人网站,4,网站的概述,1,网页设计,第,1,讲,浏览网页的工具,-,浏览器,用于打开显示网页的软件，最常见的是,Windows,系统自带的,IE,浏览器，还有火狐,Firefox,、,360,安全浏览器、遨游、腾讯,TT,等,1,）网址：用于定位某个网站某个页面的一串字符,2,）主页：访问网站时，默认打开的第一个页面是主页也叫首页,5,网站的概述,1,认识网页的组成元素,网页标题,LOGO,视 频,文 本,导航栏,图 片,表单,超级链接,网页设计,第,1,讲,6,网站的概述,1,网页的尺寸,网页设计,第,1,讲,显示器屏幕的分辨率,浏览器软件,两个因素,一,由于浏览器的不同,对于一些效果的显示也不同,设计完之后在不同的浏览器之间进行测试,不同分辨率的显示器在显示同一个网页时可能出现不同效果，为了能在一般的显示器上都能正常显示网页，建议设定网页尺寸时要小于显示器分辨率，且不能只考虑自己显示器的分辨率,7,网站制作流程,规划阶段,设计阶段,实施阶段,网站策划,网页美工,网页制作,1,2,3,网页设计,第,1,讲,初始,Dreamweaver,CS5,2,8,网站制作流程中的注意事项,网页设计,第,1,讲,主题、结构、栏目设置、风格、颜色、版面,主题小而精 感兴趣,/,擅长的内容 搜集素材,逻辑清晰 布局合理 风格统一,颜色协调 版面简洁 动静结合,初始,Dreamweaver,CS5,2,9,初始,Dreamweaver,CS5,2,认识,Dreamweaver,CS5,D,ream,+,w,eaver,=,网页设计,第,1,讲,Dreamweaver,10,Dreamweaver CS5,的用户,界面,3,菜单栏,插入栏,文档工具栏,文档窗口,标签选择器,状态栏,属性面板,面板组,文件面板,网页设计,第,1,讲,设计器,文件保存位置,11,Dreamweaver CS5,的用户,界面,3,网页设计,第,1,讲,插入栏,包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称，如下图所示。,12,Dreamweaver CS5,的用户,界面,3,网页设计,第,1,讲,三种视图,在浏览器中预览,/,调试,可视化助理,刷新设计视图,文档标题,文档工具栏,13,网页文件的基本操作,4,基本网页的文件类型为,HTML,文档，保存的文件扩展名为,“,.html,”,创建网页文档（,HTML,文档）,文件,新建,新建文档,常规,类别,基本页,保存指定文件,文件,保存（或,Ctrl+S),、另存为、保存全部,*,网页文件用英文或数字命名，莫用中文,打开已建的,HTML,文档,关闭文件,还未保存的网页关闭时会提示你是否保存，文件名后有（*）号,其他操作,多个编辑文件的切换选择,预览编辑中的网页,(,快捷键,F12),网页设计,第,1,讲,14,设置网页外观属性,5,网页标题,页面默认字体,默认字体大小,背景颜色,边距,网页设计,第,1,讲,15,网页设计,第,1,讲,Dreamweaver CS5,归纳与小结,了解网站的基本概念,掌握网页设计与制作的基本流程熟悉网页设计工具界面,16,第,1,讲,作业,（步骤,1,）新建文件夹，命名为“姓名,+,学号”,（*作业都要保存到此文件夹）,（步骤,2,）搜索一张图片（与网页设计相关），重命名为“,ch1.jpg”,存到,”,姓名,+,学号”,下,（步骤,3,）新建一个网页，输入姓名、学号，换行（,Enter,）插入图片,（步骤,4,）保存到,“姓名,+,学号”,下，,ch1.html,（*不能使用中文）,要求：网页标题（我喜爱的网站）,作业要保存！下一堂课将用到今天的作业文件！,第,1,讲,网页设计概述,Dreamweaver CS5,17,第,1,讲,作业,18,THANKS !,19,