第1章 网页设计概述要点

LOGOName：刘佳Office：网络教研室C4-308Email:[e-mail]:2184431LOGO课程内容及教材运用AdobeDreamweaverCS5软件，来介绍设计与制作静态网站的方法和技巧，为后续课程《网络编程》打好基础。LOGO基本要求：认真听课、注意操作课上充分预习和复习、多练习课下请假制度、上机按学号入座纪律认真按时独立完成作业本课程的特点：应用性、实践性强。LOGO第1章网页设计概述网页基础知识网页构成元素网站建设的流程HTML基础DreamweaverCS5操作环境简介LOGO1.1网页基础知识在因特网上，根据一定规则，使用特定工具制作的用来展示特定内容的相关文件称为网页，这些网页的集合就是一个网站。什么是网页、网站、？：万维网，简称为Web，是Internet上最受欢迎、最为流行的信息检索服务系统，信息资源以web页的形式存储在服务器中，用户通过页内容。LOGO：应用协议类型://信息资源所在主机名（域名或IP地址）/路径名/…/文件名LOGO服务采用了客户机/服务器模式；服务的核心技术是：超文本标记语言（HTML）：制作网页的一种编程语言，HTML文档扩展名通常为.htm或.html。超文本传输协议（HTTP）：客户端与服务器之间相互通信的应用层协议，保证正确传输超文本文档。超链接（hyperlink）:实现了网页之间的跳转，以超文本及超媒体方式组织网络多媒体信息，用户可以访问文本、语音、图形和视频等信息。LOGO1.2网页构成元素网页是由哪些基本元素构成的呢？图像文本网页视频动画超链接音频表格、表单、导航、条、悬停按钮、Java特效、AxtiveX组件等LOGO1.2网页构成元素文本：是网页的信息主体，能准确的表达信息的内容和含义。占用的空间小，传输速率高。图像：占用的空间大，传输速率慢。如果使用恰当比文字更具有说服力，使网页更生动，更具表现力和吸引力。网页中常用的图象文件格式有：GIF、JPEG、PNG等。动画：占用的空间比图像还大，但是“动”比“静”更具生命力，更能打动人心。一般网站广告都以动画形式显示。LOGO超链接：是网页的灵魂，是网络超文本体系结构的经络。在网站内网页之间的跳转或网站之间的跳转等都是靠超链接实现的。音频：音频是多媒体网页重要组成部分。网页中常用的声音文件格式有：MIDI、WAV、MP3等，可使用音频文件作为网页的背景音乐，但会影响网页的下载速度。视频：在网页中用作视频交流或直播，使网页变得生动、真实。常用的视频文件格式有：RealPlayer、MPEG、AVI等。1.2网页构成元素LOGO表格：用来控制网页信息的布局方式。可以使用表格来精确控制各种网页元素在网页中的显示位置。表单：可以实现浏览者与站点之间的交互。网页中的表单通常用来接收用户在客户端的输入，然后将这些信息发送到服务器端。表单有不同功能的表单域组成。导航条：是一组超链接，用于在站点的首页及其他重要网页中进行跳转。一般情况下，导航条应放在网页的醒目位置。其他特殊元素：如悬停按钮、Java特效、AxtiveX组件等，可增强网页功能，使网页更有趣。1.2网页构成元素LOGO网站(WebSite)建设是个系统工程，其基本工作流程可分为5个阶段：1.3网站建设的流程网站策划网页制作网站测试与发布网站宣传与维护（1）（2）（3）（4）（5）网页设计LOGO网站策划是在制作网站前对网站进行周密的计划，明确制作网站的目的以及怎么做。其工作主要包括：1.3.1网站策划①确定网站的主题：网站的题材，即做一个什么类型的网站？②确定网站的用户群：以人为本LOGO1.3.1网站策划③确定网站的配色方案：根据网站的整体风格来选定网站的配色。红色：往往与吉祥、好运、喜庆相联系，自然就成为节日、庆祝活动的常用色蓝色：给人冷静、沉思、智慧、和征服自然的力量，在商业设计中，强调科技、效率的商品或企业形象，大多选用蓝色作为标准色。LOGO1.3.1网站策划④收集网站的素材和内容广泛收集、尽量全面，内容相关个人网站：个人资料、个人照片、个人作品和兴趣爱好等LOGO1.3.1网站策划⑤确定网站栏目及网站目录结构栏目划分要服从并体现网站主题：将准备好的“原材料”按一定方法分类，为其设立专门的栏目。规划网站栏目的过程实际上就是网站内容细化的过程，一个网站栏目有可能就是一个专栏网页。不要将所有文件都存放在根目录下，按栏目内容建立子目录。每个目录下都建立独立的Images目录：通常一个站点根目录下都默认有一个Images目录，用来存放站点中用到的图片。设计时应为每个主栏目建立一个独立的Images目录，以方便管理。文件的命名要合理：由于受Web服务器识别限制，目录文件在命名时要使用简短文件名，以英文形式为主，一律以小写形式处理。LOGO1.3.1网站策划⑥确定网页的版式设计与布局网页首页和其他页面的结构形式。为了达到统一、漂亮的视觉效果，网站中的所有页面都是围绕首页布局进行设计的。LOGO网页设计是实际设计网站的工作，包括如下几个步骤：1.3.2网页设计按照创意和设想绘制出网站首页与子页的草图，也可以加入一些设计的风格。框架和大体风格确定后，继续在图纸上标明栏目、内容和网站上的一些颜色符号等，以避免遗漏规划的内容，并进一步确定网站风格。①手绘草图LOGO网页设计是实际设计网站的工作，包括如下几个步骤：1.3.2网页设计将网站风格、创意设计和网站内容整合在一起的过程，就是根据草图在图像处理软件Photoshop或Fireworks中进行图像编辑处理②设计效果图：LOGO网页制作是实际的网站构建过程，是将设计的结果呈现给用户。选择一个网页编辑软件如Dreamweaver或FrontPage等，制作前面规划的网页内容。如果需要，用PhotoShop、Flash、Fireworks等图形软件设计网页的背景、标题和动画等。1.3.3网页制作LOGO1.3.4网站测试与发布网站测试：主要检测各个网页及组件能否正确运行。如网页的整体效果是否和你的想法一致，计数器能否正确显示，广告横幅、滚动字幕、动态按钮等是否符合要求，超链接是否链接正确等。网站发布：将自己的网站上传到指定的主机服务器上。申请网页空间：在提供网页服务的ISP服务商处（如网易）申请网页空间。上传网页：将网站上传到Internet。登录访问：登录到相应的站点即可访问。LOGO1.3.5网站宣传与维护网站宣传：采取注册搜索引擎、交换链接、发送邮件等方式进行网站宣传推广工作，以吸引更多的浏览者。网站维护：建立网站后必须负起维护与更新的责任，每天有新的内容才能留住访客的心。LOGO1.3网站建设的流程网站策划网页制作网站测试与发布网站宣传与维护（1）（2）（3）（4）（5）网页设计第（1）步和第（2）步是整个建站过程的关键，在这两步上多下功夫，多动脑子，会达到事半功倍的效果。LOGOHTML语言是Web开发的基础，任何一个Web页面都离不开HTML。像Dreamweaver、Frontpage等网页编辑工具具有所见即所得的功能，方便了用户的开发，但是作为Web程序的开发人员，必须看懂HTML代码，否则很难进行下一步的编程（如ASP等）。1.4HTML基础HTML代码结构HTML文档创建浏览所设计的网页LOGO1.4.1HTML代码结构HTML标记由一个开始标签和一个封闭标签组成。标签封闭在小于尖括号（）和大于尖括号（）内。通过重复输入原始标签并在开始尖括号后面输入一个斜杠（/）来创建封闭标签。HTMLHEADTITLE标题部分/TITLE/HEADBODYP你好,这是正文部分!/P/BODY/HTMLHTML和/HTML是HTML文件开头和结尾的标记符HEAD和/HEAD是标题部分标记符BODY/BODY是正文部分标记符LOGOhtml和/html标记该文档为Web文档，Web文档的所有内容都位于这两个标记之间。head和/head中包含一些与Web有关的特定信息，如网页的标题、样式定义（如CSS）及脚本等。常用的有标题标记符title和/title(定义网页的标题)。body和/body指定HTML文件的主体，文字、图形、图像、链接、动画、色彩和音效等元素都位于该标记符内。以上标记符都必须成对出现。几点说明：LOGO1.4.2HTML文档创建直接在文字编辑软件中编写html代码，如记事本、写字版、Word等，存为纯文档格式，扩展名为*.htm或*.html。利用网页制作工具如Dreamweaver或FrontPage等的所见即所得功能制作好网页，其html代码自动生成。这种方法对用户来讲较简单。还可以再对html代码进行修改，比较常用。LOGO1.4.3浏览所设计的网页双击HTML文档图标在浏览器中打开网页文件如要修改网页的程序，单击浏览器窗口中“查看”“源文件”命令，调出记事本，修改完程序后保存，并在浏览器中刷新该网页内容。LOGO1.4.4编写自己的HTML代码htmlbodyWelcometomyfirstwebpage/body/html（1）启动“记事本”（2）在空白文档窗口输入以下代码：（3）把文件保存到桌面，并把它命名为firstpage.html（4）启动IE浏览器，选择“文件”＞“打开”，导航到桌面并选择firstpage.html，然后单击“确定”/“打开”按钮。LOGO了解HMTL语法（5）切换回文本编辑器，或在浏览器中选择“查看”＞“源文件”（6）在文本“Welcometomyfirstpage”后插入光标，按下Enter键插入一个段落回车符。（7）输入“Makingwebpagesisfun”，然后按下空格键5次，插入5个空格。最后，在同一行上输入“andeasy！”。（8）保存文件（9）切换到浏览器，刷新窗口，加载更新过的页面。LOGO插入HTML语法（10）切换回文本编辑器，为文本添加加粗标签，如下：pMakingwebpagesisfunandeasy!/P（11）利用非间断空格替换文本中的5个空格，如下：pMakingwebpagesisfun     andeasy!/P（12）保存文件，切换到浏览器，刷新窗口，加载更新过的页面。LOGO利用HTML格式化文本（13）切换回文本编辑器，为文本添加加粗标签，如下：h1Welcometomyfirstwebpage/h1（14）保存文件，切换到浏览器，刷新窗口，加载更新过的页面。LOGO应用内联格式化上述使用的所有标签都是作为段落或独立的元素工作的，称为块元素。HTML还提供了对包含在另一个标签内的内容（或内联）应用格式化和结构的能力。（15）切换回文本编辑器，为文本添加加粗标签，如下：pMakingwebpagesisfun     strongemandeasy!/em/strong/P（16）保存文件，切换到浏览器，刷新窗口，加载更新过的页面。LOGO添加结构（17）切换回文本编辑器，为文本添加头部标签和内容，如下：headtitleHTMLBasicsforFunandProfit/title/head（18）保存文件，切换到浏览器，刷新窗口，加载更新过的页面。LOGO1.5DreamweaverCS5操作环境简介