计算机：网页设计基础及DWCS5基础

第1课网页设计基础知识及DWCS5基础,：理解网页与网站的区别；了解网页的基本元素；熟悉并掌握HTML语言基础知识；理解并熟悉网页设计的基本流程；掌握通过输入HTML代码和DreamweaverCS5制作简单的网页。：超文本标记语言（HTML）基础；简单的网页制作。（上机实验）：网页与网站的区别；HTML语言基础知识。,一、认识网页与网站,（1）静态网页，也就是HTML静态页面，它是物理存在的文件，这类网页可以由网页浏览器（如：IE、傲游）直接浏览。（2）动态网页，它不能由浏览器直接浏览，而必须经过Web服务器软件解释或编译后，以HTML格式将结果输出到客户端浏览器上。,1、网页,一、认识网页与网站,网站是一个复杂的系统，它不仅包括网页、Web应用程序，还包括与之相关的数据库及各类媒体文件，甚至还包括操作系统、Web服务器软件以及承载网站运行的各类硬件设备等。,2、网站,图1-1奥迪A8网站首页,二、网页的基本元素,文本是网页中运用最为广泛的元素之一，是网页存在的基础。在网页设计中，我们可以通过设置字体、字号、颜色、背景等属性来改变文本的视觉效果。,1、文本,图1-2以文本为主体的网页,二、网页的基本元素,目前，网页支持的图像格式主要有3种：JPEG（JPG）、GIF和PNG。其中，GIF和PNG图像支持透明背景。,2、图像,图1-3以图像为主的网页,二、网页的基本元素,目前，在网页设计过程中所使用的动画主要是Flash动画（*.swf）和GIF动画。Flash动画运用最为广泛，而GIF动画则主要用于站标、广告条等组件。,3、动画,图1-4使用Flash制作的网页,二、网页的基本元素,目前，网页上使用最为广泛的音频格式主要有MP3、MIDI和WAV。MP3文件最大的优点就是能以较小的比特率以及较大的压缩比达到近乎完美的CD音质。MIDI文件的音质较好，浏览器不需要安装任何插件就可以播放。WAV文件也具有较好的音质，但是，由于文件较大，在加载过程中会增加系统资源的开销，不适合用来作为背景音乐。,4、音频,二、网页的基本元素,随着网络带宽的不断增加，在网页中使用的视频也越来越多。在网页中添加视频文件可以大大增加站点的可读性，视频的直观性可以给访问者带来很大的视觉冲击。视频和音频一样，都是由与文件类型相适应的插件来进行播放的。目前，网页上使用最为广泛的视频格式包括WMV、RM、ASF、MPEG和AVI。,5、视频,三、超文本标记语言（HTML）基础,超级文本（Hypertext）简称超文本，它是一种使用户与计算机之间能够更加密切交流的文本显示技术，它通过对相关词汇进行索引链接，可以使带链接的词汇或语句指向文本中的其他段落、注解或文本。,超文本标记语言（HTML）是一种用来制作网络中超文本的简单标记语言。它在文本文件的基础上加上一系列的标签，用以描述其颜色、字体、文字大小和格式，再加上声音、图像、动画、音频、视频等形成精彩的页面。,三、超文本标记语言（HTML）基础,HTML文档由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素名称不区分大小写，一个元素可以包含多个属性，各个属性用空格分开。元素又是由标签构成，除了极个别标签是单独存在的标签以外，大多数标签是成对出现的，由一个开始标签“”和一个结束标签“”组成。,1、HTML文档,三、超文本标记语言（HTML）基础,（1）单标签语法结构如下：例如：,1、HTML文档,（2）双标签语法结构如下：内容例如：,三、超文本标记语言（HTML）基础,简单的HTML网页制作欢迎大家来学习网页设计基础!,1、HTML文档,三、超文本标记语言（HTML）基础,（1）文本标签：包括标题标签、文字控制标签和换行标签。,2、常用的HTML标签,a、标题标签：用于设置网页中的标题文字，被设置的文字将以黑体或粗体显示在网页中。其语法结构如下：标题内容例如：,标题标签标题标签范例！一级标题二级标题三级标题四级标题五级标题六级标题,三、超文本标记语言（HTML）基础,（1）文本标签：包括标题标签、文字控制标签和换行标签。,2、常用的HTML标签,b、文字控制标签：用于控制文字的字体、大小和颜色。其语法结构如下：文字例如：,文字控制标签文字控制标签范例！默认字体上海世博会欢迎您！上海世博会欢迎您！上海世博会欢迎您！上海世博会欢迎您！,三、超文本标记语言（HTML）基础,（1）文本标签：包括标题标签、文字控制标签和换行标签。,2、常用的HTML标签,c、换行标签：是一个单标签，也称空标签，不包含任何内容。在HTML文档中的任何位置只要使用了标签，当用户通过浏览器浏览该文档时，标签后面的内容将显示在下一行。例如：,换行标签换行标签范例！新的起航，新的希望！没有使用换行标签！新的起航，新的希望！使用了换行标签！,三、超文本标记语言（HTML）基础,（2）图像标签：通过使用图像标签可以将图像文件插入到页面中。图像标签的语法结构如下：,2、常用的HTML标签,例如：,图像标签图像标签范例！黄鹤楼送孟浩然之广陵李白故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧空尽，唯见长江天际流。,三、超文本标记语言（HTML）基础,（3）表格标签：表格标签在网页的设计过程中主要用来排版，以便使页面变得更加美观。,2、常用的HTML标签,创建表格时，通常需要用到表格标签、表格标题标签、表格行标签、以及表格单元格标签和。例如：,表格标签表格标签范例！员工信息表工号姓名性别出生年月所属部门0001张三男1990年1月人事部0002李四女1992年11月财务部,三、超文本标记语言（HTML）基础,（1）每一个HTML文档都不太大，它能够尽可能快地通过网络传输和显示，不需要加入字体或格式等其他控制信息。,3、HTML的优点,（2）HTML文档是独立于平台的，它对多平台兼容。,（3）虽然HTML是一个标识性的语言，但是它比任何一种计算机语言都简单易学。而且制作时并不需要特殊的软件，只要一个字符编辑器就可以完成。,四、网页设计的基本流程,网页设计的基本流程包括前期策划、CI形象设计、栏目与版块规划、确定网站的目录结构、确定网站的整体风格、版面布局及首页设计、网页模板制作、网站测试和发布网站等。,（1）前期策划：主要是为了确定网站的主题和名称。主题要明确、精要，名称要切题、有特色且易记住。,四、网页设计的基本流程,（2）CI形象设计：包括LOGO、色彩、广告语等可以作为标志性的东西。尽量做到以得体的颜色和图案体现网站的形象。,（3）栏目与版块规划：栏目设置应体现网站的主题。版块安排应尽量做到井井有条，避免产生混乱，坚持适度的原则。,（4）确定网站的目录结构：尽量要简洁，分支页面内容相对独立，而且要求导航功能完善，能使用户快速到达目的页面。,四、网页设计的基本流程,（5）确定网站的整体风格：网站风格的确定主要针对浏览者以及网站的主题。,（6）版面布局及首页设计：页面布局的原则是将一定的内容放在特定的可视块上。首页应该切题精练、重点突出，能让网页浏览者快速地了解该网站的大概内容。,（7）网页模板制作：网页模板包括所有网页的公共元素，如LOGO、广告语、导航栏、返回首页、站点地图、E-mail地址、版权信息等。,四、网页设计的基本流程,（8）网站测试：最方便的测试方法就是在本机上使用Internet浏览器进行浏览测试，包括链接、外观、速度、脚本和程序等内容，同时根据结果及时进行相应的修改。,（9）发布网站：可以使用DreamweaverCS5中的“发布站点”功能或者FTP软件，将页面文件上传到指定的网络服务器上。如果自己没有服务器，则需要在网络上申请一个空间来存放网页，同时还必须申请一个域名来指定站点在网络上的位置。,五、通过输入HTML代码制作简单的网页,实验前先在“D:”目录下新建一文件夹，并且将该文件夹重命名为“mysite”；打开mysite，再新建一个文件夹，将该文件夹重命名为“images”，把上机实践文件夹第1课文件夹里面的图片“孔子”复制到刚刚新建的“images”文件夹里。,步骤单击【开始】|【所有程序】|【附件】|【记事本】命令，打开记事本。,步骤2在记事本中输入以下内容：,思学苑-欢迎您！论语孔子学而第一子曰：“学而时习之，不亦悦乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？”注释原词释义,时以时、及时习温习、复习悦高兴、愉快愠怨恨、恼怒,五、通过输入HTML代码制作简单的网页,步骤3单击【文件】|【保存】命令，弹出【另保为】对话框，在【保存在（I）】窗口中选择文件保存的路径为“D:mysite”，在“文件名”窗口中输入“index”，点击【保存】按钮保存文本。,步骤4单击【开始】|【控制面板】命令，打开控制面板，双击“文件夹选项”图标，弹出【文件夹选项】对话框，单击【查看】选项卡，将【高级设置】下面的【隐藏已知文件类型的扩展名】前面的勾去掉，点击【确定】按钮完成设置。,五、通过输入HTML代码制作简单的网页,步骤5重命名文件：打开“index”文件所在的目录，右击“index.txt”，再单击【重命名】选项，将原文件重命名为“index.html”，弹出【重命名】提示对话框，单击【是】按钮确定重命名操作。,步骤6网页测试：双击打开“index.html”文件，浏览我们刚刚制作的简单网页。,六、DreamweaverCS5的基本功能,DreamweaverCS5可以通过拖拉的方式来创建页面元素，然后以图形界面的形式去编辑页面元素的属性。,1、创建和编辑页面元素,DreamweaverCS5是Adobe公司新推出的一款专业的Web网页、Web站点以及Web应用程序设计编码的开发与管理软件。它具有可视化效果，还可以通过鼠标拖、拉图形界面设置属性来快速地创建网页而无需手工编写代码。,六、DreamweaverCS5的基本功能,DreamweaverCS5可以进行Web站点的创建以及管理，能方便地管理我们的网站以及预览网站中的网页以及调试Web应用程序。,3、站点管理,DreamweaverCS5的代码视图工作区提供了编辑html代码的功能，此外在拆分视图中上半个工作区也可以进行html代码的编辑。,2、编辑HTML,六、DreamweaverCS5的基本功能,DreamweaverCS5还可以插入媒体文件，如声音、SWF格式视频、FLV格式视频，可以非常方便的编辑这些媒体文件。,5、插入和编辑媒体,DreamweaverCS5作为网页设计三剑客工具之一，可以非常方便的插入FireworksCS5文件和FlashCS5动画。,4、插入Fireworks文件和Flash动画,七、DreamweaverCS5的工作界面,图1-4DreamweaverCS5工作区的构成,八、通过DWCS5来制作简单的网页,实验前先在D盘目录下创建“D:mysiteweb1”的文件夹，再在该文件夹中创建别名为“images”的子文件夹，把上机实践文件夹第1课文件夹里面的图片“kongzi”复制到刚刚新建的“images”文件夹里。,步骤单击“文档工具栏”中的【设计】按钮，在“文档窗口”中输入“论语孔子”,按回车键将光标移到下一行。,步骤2在菜单栏中选择【文件】|【保存】命令，将当前的网页名为“index.htm”，并保存到“web1”文件夹中。,八、通过DWCS5来制作简单的网页,步骤4在“文档”窗口中选中“孔子”图片，在菜单栏选中【格式】|【对齐】|【居中对齐】命令，按回车键将光标移到下一行，并输入文字“学而第一”。,步骤3在“插入面板”中下拉滚动条，找到并单击“图像”元素，弹出【选择图像源文件】对话框，单击“images”文件夹，选中其中的“kongzi.jpg”文件，单击【确定】按钮，弹出【图像标签辅助功能属性】对话框，按照默认单击【确定】按钮即可。,八、通过DWCS5来制作简单的网页,步骤6单击“插入”面板中的【表格】元素，弹出【表格】对话框，将行数改为5，列数改为2，标题为注释，单击“确定”按钮，完成表格的创建。,步骤5单击“文档工具栏”中的【拆分】按钮，在“文档窗口”中选中“学而第一”，在代码窗口中其所在行代码中的前后两个p都改成h1。然后返回设计视图，在“学而第一”下面输入：子曰：“学而时习之，不亦悦乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？”，并使其居中对齐。,八、通过DWCS5来制作