网页设计暑期培训.ppt

网页设计与制作,青岛大学师范学院教育技术系安国成,1.网页设计基础知识1.1 互联网与网站,基本概念:网页：在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为Web页。网站：网页的集合；网页信息分类存放在文件夹内；远程站点，本地站点；浏览器：(对应编辑器)访问网络资源的工具，那就是浏览器，否则无法访问到网络中丰富的资源。目前常用的浏览器有:IE,netscape，firefox和腾讯TT，opera等；,超文本标记语言,简称HTML，它是WWW创建超媒体文本的语言，它也是网页创建中最基本的语言，制作的任何一个网页都是基于HTML文本标识的。（HTML语言下载对比自学）表单:表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、QQ号码等的申请页面，以及论坛、聊天室、留言簿等。,超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。内部链接，外部链接；,1.2网站分类门户网站广义解释：网络的一个应用框架，它将各种应用系统、数据资源和互联网资源集成到一个信息管理平台上。狭义解释：是网络世界的“百货商场”或“网络超市”。提供有关信息服务的应用系统，提供搜索引擎、目录服务，新闻、网络接入、聊天室、公告牌、免费邮箱、影音资讯、电子商务、网络社区、网络游戏、免费网页空间，等等。如：www、www.,职能网站 如中国政府网：商业网站：专业网站 如：CCTV 花卉网、农业网、证券网 企业,单位,个人网站：www.,1归类站点内容 对网站的内容整理分类，把相关的网页放在同一文件夹中使网站层次一目了然这一步网站规模越大就越重要2项目放置的位置 图象、动画、音乐、模板的分门别类的存放；,1.3 网页布局网页设计和布局原则（1）简洁 页面设计属于设计的一种，同样要求简练，准确，天地呼应；限制字体数目和字体颜色；不要用无关的图片把页面装点起来。页面上所有的元素都应当有明确的含义和用途，不要用太大的字，因为版面空间非常宝贵有限；不要用闪烁的文字。,2.一致性 一致性是表现站点风格的重要手段之一。页面排版的一致性：各页面标题、正文字形，字号的一致性；各页面相同的页边距；文本，图形间保持相同的间距；图形旁边留下相同的空白；各个页面应当使用相同的图标。页面中的每个元素与整个页面色彩和风格上的一致性。比如全部使用写实的照片等；一个站点通常只使用一到两种主题色；,3、对比度 使用对比是强调突出某些内容的最有效的办法之一。好的对比度使内容更易于辨认和接受。实现对比的方法很多，最常用的是使用颜色的对比；使用对比的关键是强调突出关键内容，以吸引浏览者，鼓励他去发掘更深层次的内容。例如：调色：95%黑色+5%白色 对比：不要 大片大红+大片大绿,4、页面设计要点 页面内容包罗万象，版式丰富多彩，但无论怎样的变化，好的站点总是有许多共同之处，例如：精心组织的内容；格式美观的正文；和谐的色彩搭配；使得文字具有较强的可读性；生动背景图案；页面元素大小适中，布局匀称，使得文字具有较强的可读性；不同元素之间留有足够空白，给人视觉上休息的机会；各元素之间保持平衡；文字准确无误，无错别字、无拼写错误；,5、内容组织方式 页面所发布的材料必须精心组织：按逻辑组织 按时间顺序组织 按地理位置组织 人们阅读材料习惯于从左到右，从上到下进行，因此眼睛首先看到的是页面的左上角。根据这一习惯。在组织内容时把希望浏览者最先看到的内容放在页面的左上角和页面顶部；,6、网站命名和标志 网站命名应遵循以下的原则：合法、合情并合理，字少，好记上口。体现网站的主题，概括性强。字数不要太多，一般控制在6个字以内。有个性，体现一定的内涵，可给浏览者更多的视觉冲击力和空间想像力 网站标志:logo,banner,菜单,标题,版权等模块设计,1.4 网页开发语言,1.4.1 HTML语言超文本标记语言1.4.2 动态网站开发语言1ASP-ASP（Active Server Pages，活动服务器网页）可以创建和运行动态、交互、高效的Web服务器应用程序。2JSP-（Java Server Pages，Java服务器页面）是Sun公司推出的网站开发技术，是将纯Java代码嵌入HTML中实现动态功能的一项技术。3PHP-（Hypertext Preprocessor，超文本预处理器）是一种HTML内嵌式的语言（类似于ASP）。,1.5 网站规划1.5.1 网站制作流程1确定网站主题 一个网站必须要有一个明确的主题。不可能像综合网站那样做得内容大而全，包罗万象。所以必须要找准一个主题，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是感兴趣的，任何内容都可以，但主题要鲜明，在主题范围内做到大而全、精而深。,2搜集制作素材资料 文字，图像，图形，flash,视频等编辑处理。明确了网站的主题以后，就要围绕主题列出所需资料清单。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，搜集得材料越多，以后制作网站就越容易。材料有条件尽可能自己制作原始素材,也可以从图书、报纸、光盘、多媒体上得来，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。(注意版权),3规划网站 制定详细的计划和方案，可以极大地节省后面开发的时间。规划要包括下面几个必须要考虑的因素：站点的需要、目标浏览者、网站要实现的目标。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用。同时还应该考虑一些技术性的问题，比如需要哪些类型的页面、什么样的动态效果、是否需要下载等。,4选择合适的制作工具网页制作工具:Dreamweaver;FrontPage等；图片编辑工具：Photoshop、fireworks等；动画制作工具：如Flash、Gif音频软件：cooledit，音频编辑大师，GoldWave；视频软件：Windows Movie Maker，会声会影 超级解霸等,5网页制作制作网页是一个复杂而细致的过程，要求：先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板、库、插件等可以大大提高制作效率。,6推广宣传 网页做好之后，还要不断地进行宣传，提高网站的访问率和知名度。推广的方法很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。7、维护更新 站要经常维护更新，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地补充新的内容，才能够吸引住浏览者。,1.5.2 网站策划书（网站建设方案）1网站建设目的及功能定位2网站内容模块规划3网站头文件设置4网站设计风格,5网站架设描述客户提出要求双方制定建设方案签署协议,支付预付款完成初稿网站测试验收网站维护,153站点评测 1美工设计 2栏目内容 3浏览速度4技术含量 5用户兴趣 6.网站测评方法,2.FrontPage2003,FrontPage2003的特点：1.更容易建立专业、精确的网站。2.FrontPage2003不仅可以用来制作网页，用户可以使用它来建设和维护整个网站，更简单的检测、更新你的网站。工作组用户可以通过FrontPage2003使分布在世界各地的子公司一起工作。,一、FrontPage2003介绍,FrontPage2003是Office2003组件之一，运行与启动Office其他软件相同。启动成功后，出现的初始画面可能因机器使用情况的不同而不同；,图8-1 FrontPage2003启动后显示页面,二、视图,1网页。编辑网页需在“网页”视图中进行。在“网页”视图中，有“设计”、“拆分”、“代码”和“预览”4张选项卡。2远程网站视图。同步此网站和远程网站之间的文件。3文件夹视图。用于管理站点中的文件和文件夹。4报表视图。分析网站并管理其内容。5导航视图。显示站点的导航结构，用于对站点结构的管理。6超链接视图。用于显示站点中每一页的超链接。7任务视图。用于创建和管理站点中的任务。,2.2.2 站点的创建,站点，就是多个相关网页通过各种链接关联起来的集合。在使用FrontPage 2003设计网页之前，应建立一个本地站点，用来管理创建的网页。用户可以选择以下三种方式创建一个新的站点：（1）站点向导。包括“导入网站向导”、“公司展示向导”、“数据库界面向导”、“讨论网站向导”。（2）站点模板。包括“个人网站”、“客户支持网站”、“项目网站”。（3）自定义站点。包括“只有一个网页的站点”、“空白网站”、“SharePoint工作组网站”。,使用“只有一个网页的站点”创建网站。FrontPage2003主窗口 菜单栏“文件”新建 其他网站模板 站点 只有一个网页的网站 指定新网站的位置 输入新站点的名称。如图8-4“网站模板”对话框。,图8-4“网站模板”对话框,2.2.3网页的基本编辑 一、新建一个网页,FrontPage2003的主窗口中:使当前处于网页视图模式下:单击菜单栏上的“文件”，“新建”，在窗口的右边出现“新建”面板，在新建网页项中选择“其他网页模板”。打开“网站模板”对话框。单击“常规”选项卡，在列表框中显示了FrontPage2003提供的创建网页的11种模板，包括有普通网页、表单网页向导、常见问题、目录、确认表单等。,二、保存网页,单击“常用”工具栏中的“保存”按钮，在弹出的“另存为”对话框中找到并双击要保存网页的文件夹，然后在“文件名”下拉列表框中输入网页的文件名“index.htm”，再单击“保存”按钮即可。如果当前网页是从当前网站打开的，则单击“常用”工具栏中的“保存”按钮即可。如果当前网页是从当前网站之外的位置打开的，则单击“文件”|“另存为”命令;,三、网页属性设置,网页的属性包括网页的背景颜色、图片、网页的标题、关键字、网页说明和网页的页边距等“文件”“属性”“页面属性”或者在没有选中任何对象的情形下，选菜单“格式”“背景”，直接进行背景颜色图片的设置。,图8-5网页属性对话框,2.2.4表格排版和布局,一、插入表格 在“表格”菜单“插入”级联式菜单中选择“表格”命令，出现如图8-6所示。单击“确定”就可以网页中插入表格。,图8-6插入表格属性对话框,二、设置表格属性,表格属性设置若想设置表格的边框粗细、颜色以及表格的背景可指向表格;用鼠标右键单击表格，在弹出快捷菜单中选择“表格属性”命令；,三、编辑表格,1.选定表格对象 选定单元格，执行“表格”“选定”“单元格”命令；选定行、列或整个表格，在“表格”“选定”中选择相应的命令即可。2.插入、删除表格对象 插入行或列 删除行或列3.合并、拆分单元格 4.设置表格或单元格属性 将打开“表格属性”或“单元格属性”对话框，或右击鼠标弹出快捷菜单。,2.2.5文本设置,一、输入文本 可选择两种方式：第一种是和在Word一样，可以直接在FrontPage2003的普通视图中输入文字，文字的编辑修改和Word基本一样；第二种是可以通过复制和粘贴从其他地方复制文字。二、设置文字及段落格式 文字格式，包括“字体”、“字型”、“大小”、“颜色”、“效果”以及字符间距的设置，以直接在格式工具栏中进行，也可以选择菜单“格式”“字体”命令，也可以选择字符后右键单击选择“字体”命令。,图8-7文字格式对话框,2.2.6网页元素的插入,一、插入换行符（1）插入“隔行换行”。直接在插入点按Enter键。（2）插入“紧凑换行”。先定位插入点，选择“插入”菜单“换行符”命令，或按Shift+Enter组合键。,二、插入水平线,方法：光标定位于表格第二行，单击“插入”菜单“水平线”命令，就可以在第二行中插入水平线。单击刚插入的水平线，右键单击在快捷菜单中选择“水平线属性”。,图8-8水平线属性对话框,三、插入图片和背景图片,1插入图片 将插入点定位欲插入图片位置，选择“插入”菜单上的“图片”命令。从“图片”子菜单中选择“来自文件”命令，在对话框寻找需要的图片文件，单击“确定”按钮插入图片。在图片上右键单击，在快捷菜单中选择“图片属性”，在图片属性对话框中可以设置图片属性。,2设置背景,背景可由“背景图片”和“背景颜色”构成:（1）背影图片的设置：在“背景”选项卡中，选中“背景图片”复选框，然后在与之相关的文本框中指定图片文件的位置。单击“浏览”按钮可以快速定位图像文件。（2）背景颜色的设置：在“背景”框中可以设置网页的背景颜色。如果同时使用背景颜色和背景图片，则背景图片将覆盖背景颜色。（3）文字和超链接的颜色：在“文本”、“超链接”等框架中可以设置普通文本、超链接文本的颜色。,四、层操作1插入层方法是：“插入”菜单“层”命令。然后鼠标在1行2列上拖动即可。2选择层可以单击层的选择手柄、单击层边界等方法，选择多层时候可以使用shift键来配合使用。3调整层大小选中层，然后在属性面板中输入宽度和高度值。或直接用鼠标的在层的八个控点上拖动调整大小。4移动层无论是移动一个或多个层，先选中层，用鼠标拖住最后一个选中层的手柄随意移动。,五、插入插件步骤：鼠标在层中单击，选择“插入”菜单上的“Web组件”，在“插入Web组件”对话框中“组件类型”选择“高级控件”。选择“一个控件”中选择“插件”，弹出“插件属性”对话框。六、插入背景音乐步骤：在网页视图模式下，单击“文件”菜单“属性”命令或“格式”菜单“背景”命令或右键单击网页快捷菜单中选择“页面属性命令”。选择“常规”选项卡，在“背景音乐”栏下“位置”框中输入播放的声音文件的位置，若选中“不限次数”复选框，表示在浏览器中该音频文件将持续地播放。,2.2.7超链接,超链接概念：超链接是指站点内不同网页之间、站点与站点之间的一种链接关系，它不仅使站点内的每一个网页有机地联系在一起上，而且使不同的站点之间建立了联系。使用超链接，浏览者可以从一个网页转到另一个网页，从一个站点转到其他的站点。除了指向网页和和站点，超链接还可以指向图片、电子邮件地址、多媒体文件，甚至可以指向一个程序。,一、为文本创建超链接,1链接到网页首先选定要建立超链接的文本，单击“插入”“超链接”命令，或右键单击选定的文本在快捷菜单中选择“超链接”，打开如图8-10所示的“插入超链接”对话框。根据超链接的目标，用户可以从列表框中选定某个网页文件，也可以直接在“地址”文本框（URL）中输入要链接的目标地址，还可以单击图标，从弹出的“选择文件”对话框中选定链接的目标文件。选定的目标文件地址均会出现在地址文本框（URL）中。,图8-10插入超链接对话框,2链接到其他网站的网页,方法如下：（1）首先选定要建立超链接的文本，单击“插入”“超链接”命令，或右键单击选定的文本在快捷菜单中选择“超链接”，打开如图8-10所示的“插入超链接”对话框。（2）在“编辑超链接”对话框中的地址文本框中输入所需要链接的其他网站的网页如“http:/单击“确定”按钮即可完成超链接的设置。,3链接到电子邮件,（1）选中要电子邮件链接的文本，单击工具栏中的“插入超链接”按钮，打开“插入超链接”对话框；（2）单击“电子邮件地址”选项，对话框变成图8-10所示；（3）在“要显示的文字”文本框中输入要显示的文字，在“电子邮件地址”文本框中输入邮件地址，在“主题”文本框中输入主题；4.下载链接:需要下载的文件放在站点内,指向当前文件夹;,二、为图像创建超链接,1图像的默认超链接 先选中图片，单击鼠标右键，在弹出的快捷菜单中选择“超链接”菜单项，会弹出一个“编辑超链接”对话框或者单击“插入”菜单上的“超链接”。（1）如果要链接的是当前站点中的文件或计算机中某个目录下的文件，则从列表框中选择网页文件，查找该文件，单击“确定”按钮。（2）如果要链接的网页或文件夹来自Web，在“插入超链接”对话框中的地址文本框中输入所需要链接的网站,单击“确定”按钮。（3）如果要链接的是电子邮件，打开“插入超链接”对话框，单击左边的电子邮件地址，在“电子邮件地址”文本框中输入邮件地址，单击“确定”按钮。,2图像的热点链接,热点是图像上具有超链接的区域，一幅图片上可以包含若干个热点，单击图片中的这些热点可以跳转到不同的目标。热点形状可以是矩形、圆形或多边形，热点位置可自行确定。设置热点的方法如下：（1）选定图片后，在编辑区的底部会自动弹出如图8-11所示的图片工具栏。（2）单击图片工具栏的热点形状按钮（例如长方形按钮），这时鼠标变成铅笔形状，将光标定位到需创建热点区域的左上角或右下角，然后拖动鼠标形成一个热点区域，松开鼠标后会自动弹出“创建超链接”对话框。（3）在“创建超链接”对话框中设定链接目标。,图8-11图片工具栏,三、书签的设置和使用,利用书签实现网页内部跳转。（1）选定要插入书签的位置。（2）单击“插入”“书签”命令，弹出“书签”对话框。在对话框内输入书签名后单击“确定”按钮，即可创建一个书签。（3）建立书签后，就可以创建链接到该书签的超链接。创建的方法和建立超链接的方法相同，只是选择书签作为超链接的目标。,2.2.8表单,表单是用来收集浏览者的用户名、密码、E-mail地址、个人爱好和联系地址等用户信息的输入区域集合。图8-12公司概况表单。FrontPage2003提供了文本框、文本区、单选按钮、复选框、下拉框、提交按钮和重置按钮等丰富的表单域。,图8-12公司概况表单,一、插入表单单击“插入”“表单”“表单”命令，在网页上插入一个表单。在表单内输入所需的文本，例如“姓名”、“性别”等，然后在对应的位置插入表单对象。,图8-13表单域类型,二、表单域的类型 1文本框 2下拉菜单 3复选框 4选项按钮 5文本区6按钮,2.2.9动态效果,二、特殊效果FrontPage 2003 的组件功能可以为网页加入动态效果，设计出生动活泼的Web网页。1字幕2站点计数器3交互式按钮4设置网页过渡方式 5.行为,2.2.10站点的发布,一、测试网页 网页制作完成后还需要对网页进行测试，以检查每个网页的功能是否实现，超链接是否正确等。1拼写检查 拼写检查是网页测试时最基本的一项检查，可以使用FrontPage 2000自带的拼写检查功能，它可以检查并修改整个站点所有页面的英文拼写及语法错误。,2检查网站的超链接检查网站中每一处超链接是否正确，其步骤如下：（1）启动FrontPage 2000，打开站点，单击视图栏的“超链接”按钮，切换到超链接视图。双击其主页图标打开主页。（2）单击工具栏中的“在浏览器中预览”按钮，并把浏览器窗口最大化。依次点击网页中的超链接，检查它们的指向是否正确。（3）使用“工具”栏中的“重新计算超链接”选项，将所有超链接状态视图变成激活状态，能同时进行超链接验证。若发现某个超链接出现问题，应做好记录并到相应网页中修改。,二、发布站点 网页制作完成并经过测试后，就可以把站点网页发布到Internet的某个Web服务器上，使Internet上的每个用户都能访问到该站点。,