第一章 网页设计基础要点

网页设计——任课教师：何映虹Email：[e-mail]优秀网站赏析万维网使得浏览Internet变得非常简单，只要用鼠标单击，就可以显示图文并茂的网页，网页中可以包含声音、视频、动画等，这也是万维网在Internet中最受欢迎、使用最多的原因。在学习创建网站、制作网页之前，我们先浏览几个优秀的网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。课程引导知识技能目标（1）欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣。（2）分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习制作网页奠定基础。（3）对网页的组成元素有一个初步印象。让我们欣赏“凤凰古城旅游网”，让网站的网址是：，其首页如图。旅游类网站赏析该首页给人的视觉效果是一种古朴的气息迎面扑来，整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。导航栏的文字颇具特色。首页的模块划分采用的是左右两大模块，内容划分清晰。接下来让我们欣赏新东方教育网站，该网站的网址是：。该网站的首页主要列出了导航菜单，简洁明了、排列整齐，便于浏览者查找自己所需的信息。不同频道风格各异，独具特色。教育培训类网站赏析新东方教育网的考试频道新东方教育网的校园频道第1章网页设计基础知识开始新内容前的预备知识学习Dreamweaver8界面的介绍网页文件的基本操作建立和管理本地站点什么是网页网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。网页及其源文件打开网页后，选择浏览器菜单命令“查看|源文件”什么是网站网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面。门户网站职能网站专业网站个人网站网页的分类1、按所处位置分类2、按表现形式分类按网页在网站中所处的位置可将网页分为主页和子页两类。按网页的表现形式可将网页分为静态网页和动态网页。我们是怎么上网的？打开浏览器，输入网址，访问远端服务器的特定页面;服务器接受请求后找到该页面,并将它传送回浏览器，我们就可以浏览我们想看的内容了。网页中的常用术语万维网（）浏览器统一资源定位符（URL）IP地址域名超级链接超级文本标记语言（HTML）万维网（）万维网（）是WorldWideWeb的中文简称，也称为3W网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是Internet提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。浏览器浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。InternetExplorer（IE）NetscapeNavigator（NE）统一资源定位符（URL）URL（UniformResourceLocator）就是通常所说的网址，是指信息资源在Internet上的唯一地址，它提供在Web上访问资源的唯一方式和路径。主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。URL由协议类型、存放资源的主机域名和资源文件三部分组成。实例：新浪网址访问的主页的路径和文件名主机名传输协议IP地址IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如202.96.191.67。域名域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。超级链接超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。超级文本标记语言（HTML）HTML（HyperTextMarkupLanguage）是一种用户与电脑之间进行交流的文本技术，各种网页均是用HTML语言来描述的，用HTML语言编写的网页文件的扩展名一般为“*.htm”或“*.html”。网页设计的相关知识网页设计的一般步骤网页制作的常用工具网页设计的一般步骤规划网站收集整理资源配置站点，创建页面测试站点发布站点维护、更新站点返回站点规划鲜明的主题、易记的网站名称确立网站的CI形象，logo标志整体规划确定网站的风格和创意设计（善用图像、动画）返回网页制作的常用工具网页设计软件Dreamweaver是目前使用最多的网页设计软件。图像处理软件制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。动画制作软件网页动画制作中最常用的软件非Flash莫属。Dreamweaver8简介Dreamweaver是Macromedia公司的专业的HTML编辑器产品，与其旗下的Flash,Fireworks一起统称为“网页三剑客”，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。使用Dreamweaver8制作网页之前，需先将该软件安装到电脑中，其方法与安装其他软件相似，用户可根据提示操作。Dreamweaver8的基本操作启动Dreamweaver8新建空白HTML网页保存网页文档预览网页效果退出Dreamweaver8创建网站启动Dreamweaver8选择[开始][所有程序][Macromedia][MacromediaDreamweaver8菜单命令新建空白HTML网页选择[文件][新建]菜单命令，打开“新建文档”对话框，在“分类”栏中选择“基本页”选项，在“基本页”栏中选择“HTML”选项，单击“创建”按钮。保存网页文档选择[文件][保存]菜单命令，打开的“另存为”对话框，在“保存在”下拉列表框中选择文件的保存路径，在“文件名”文本框中输入保存的文件名，单击“保存”按钮。预览网页效果选择[文件][在浏览器中预览][IExplore6.0]菜单命令在IE浏览器中预览网页文档的效果。退出Dreamweaver8单击Dreamweaver8窗口右上角的“关闭”按钮。单击Dreamweaver8窗口左上角的图标，在弹出的下拉菜单中选择“关闭”命令。在Dreamweaver8窗口中选择[文件][退出]菜单命令。在当前窗口为Dreamweaver8工作界面时，按【Alt+F4】键退出Dreamweaver8。上一页下一页上一页下一页Dreamweaver的工作界面菜单栏插入栏文档窗口属性面板面板组标签选择器文件面板菜单栏：包含了Dreamweaver8中所用的各种菜单，可以在这里选择各种功能菜单命令，Dreamweaver8中所有的功能都可以通过这里的菜单命令来完成。插入栏：包含了在网页中插入网页元素时使用的面板。单击图标则可插入相应的网页元素到网页中。文档窗口：它与浏览器的界面相同，是网页设计和制作者进行实际操作的地方。标签选择器：显示网页文档中使用的标签，并且单击时相应标签的部分被选中。属性面板：可以在这里仔细地调整【文档窗口】中插入各种元素的属性。面板组：通过创建CSS、应用程序、标签检查器、文件等面板组，可以把关联功能聚集到一起。文件面板：用于管理组成站点的文件和文件夹。【文件面板】还可以访问本地磁盘上的全部文件，与Windows资源管理器非常类似。Dreamweaver工具栏Dreamweaver中，工具栏位于编辑窗口的上方，工具栏共有3行，分别是“插入工具栏”、“文档工具栏”和“标准工具栏”Dreamweaver属性面板当我们在编辑窗口里面选中网页元素的时候，在编辑窗口下方就会出现选中元素的属性面板。属性面板能显示出选中网页元素的各项属性值，我们可以对这些属性值进行修改。网页文件的基本操作在Dreamweaver8中网页文件的基本操作包括文档的新建、打开、关闭、保存等操作操作，另外指定网页文本的标题、背景图像、背景颜色以及网页文本和链接的颜色等操作也是不可缺少的。1、新建、打开网页2、设置页面属性3、保存网页4、关闭网页小结建立和管理本地站点要制作网页不是仅启动Dreamweaver8软件，就可以设计和制作网页了，其实第一项操作应该是定义所制作网站的站点，为什么要这么麻烦呢？具体原因有以下3点：1．将整个网站作为一个单位来定义，可以清楚整理出整个网站的结构，网页文件和网页素材，可以很清楚地掌握所有网页之间的链接关系。2．在同一个系统中可以创建多个不同的网站，用各自的站点来区分，并不影响各个网站的相互运行。3．便于网站的管理、维护以及网站的同步更新。定义本地站点，就是在自己计算机的硬盘上建立一个目录，然后将所有于制作网页相关的文件都存放进去。站点可以理解为：同属一个Web主题的所有文件的存储地点。建立本地站点注意事项：1、不要将所有文件存放在根目录下，应按文件类型建立不同的子目录；2、目录层次不能过深；3、目录命名要得当，尽量不用中文或过长的目录返回小结本章我们简单介绍了网页制作的基础知识，包括浏览器访问网页的过程，万维网、网站、主页、URL、Web浏览器和Web服务器的概念。静态网页的实质就是HTML文件。制作网页的工具主要有文本编辑工具和所见即所得的可视化编辑工具。Dreamweaver是一种比较优秀、专业的可视化网页设计工具。