PAGEPAGE13《網(wǎng)頁設計與制作基礎》課程教學大綱一、課程基本信息課程代碼：16021102課程名稱：網(wǎng)頁設計與制作基礎英文名稱：FundamentalsofWebDesignandProduction課程類別：通識課學時：32(其中實驗學時16學時)學分：2適用對象:部分專業(yè)本科學生考核方式：考查先修課程：計算機應用基礎二、課程簡介本課程是部分專業(yè)本科學生必修的一門通識課程，屬于高等學校計算機基礎教育第二層次課程。本課程以網(wǎng)頁設計軟件作為技術(shù)支持，由淺入深系統(tǒng)地介紹了網(wǎng)頁的構(gòu)思、規(guī)劃、制作和網(wǎng)站建設的全過程，旨在讓學生掌握HTML語言及常用網(wǎng)頁設計工具的使用，并能親手設計出自己喜愛的網(wǎng)頁。本課程內(nèi)容主要包括：網(wǎng)頁設計基礎、HTML基礎、Dreamweaver基本操作、Dreamweaver網(wǎng)頁布局設計以及Dreamweaver高級應用等。Thiscourseisacompulsorygeneralcourseforsomeundergraduatestudents.ItbelongstothesecondlevelcurriculumofcomputerbasiceducationinUniversities.Thiscoursebythehomepagedesignsoftwaretookthetechnicalsupport,systematicallyintroducedfromtheshallowtothedeepthehomepageidea,theplan,themanufactureandthewebsiteconstructionentireprocess,isforthepurposeofenablingthestudenttograsptheHTMLlanguageandthecommonlyusedhomepagedesignsthetooltheuse,andcanpersonallydesignthehomepagewhichownlike.Thecontentofthiscoursemainlyincludes:webdesignbasis,HTMLfoundation,Dreamweaverbasicoperation,DreamweaverwebpagelayoutdesignandDreamweaveradvancedapplicationetc.三、課程性質(zhì)與教學目的本課程是一門實用性極強，面向網(wǎng)頁設計以及制作的通識必修課，主要使學生了解網(wǎng)站的建設流程，要求學生掌握網(wǎng)頁設計與制作的基本知識，熟悉常用的網(wǎng)頁制作軟件，并且具備利用這些軟件設計與制作網(wǎng)頁的能力，使之能夠理論和實踐相結(jié)合，并為學生今后進一步學習動態(tài)網(wǎng)站設計課程打下堅實的基礎。此外，以課程學習為契機，增強學生對傳統(tǒng)藝術(shù)的了解，深化學生對中國傳統(tǒng)文化的認知，內(nèi)化學生對社會主義核心價值觀的理解，進一步強化了大學生對主流價值的感性認識，從而增強了大學生的文化自信。四、教學內(nèi)容及要求網(wǎng)頁設計基礎目的與要求了解網(wǎng)站與網(wǎng)頁的基本概念、網(wǎng)站創(chuàng)建流程。熟悉搜集網(wǎng)頁素材的方法。掌握網(wǎng)頁文檔結(jié)構(gòu)。教學內(nèi)容基本概念主要內(nèi)容WWW基礎網(wǎng)頁網(wǎng)站Internet服務器本地計算機本地站點與遠端站點Internet服務程序HTML語言腳本語言基本概念和知識點WWW及其特點、網(wǎng)頁、網(wǎng)站以及HTML語言。問題與應用（能力要求）問題：什么是網(wǎng)頁文檔規(guī)范？要求學生完成本節(jié)學習后，對網(wǎng)頁和網(wǎng)站設計與制作的基礎知識有個初步的了解。網(wǎng)站創(chuàng)建流程主要內(nèi)容站點規(guī)劃與設計素材準備建立網(wǎng)站與網(wǎng)頁制作網(wǎng)站測試網(wǎng)站發(fā)布維護更新基本概念和知識點了解各流程的具體工作部署。問題與應用（能力要求）問題：網(wǎng)頁設計常用工具有哪些？其主要的功能分別是什么？要求學生完成本節(jié)學習后，對網(wǎng)頁的發(fā)布流程有個粗略的了解。特別是在網(wǎng)站主題選擇方面要求學生盡量從以下幾方面進行考慮：從當今社會熱點、難點出發(fā)；從專業(yè)角度出發(fā)，將學生德育教育及專業(yè)知識有機地融合到教學任務中，貫徹思政導向。HTML文檔的基本結(jié)構(gòu)主要內(nèi)容HTML的基本語法HTML文檔的基本結(jié)構(gòu)HTML文檔的編輯基本概念和知識點標記、標記屬性。文檔標記、文檔頭標記、文檔標題標記、文檔主體標記。利用記事本編輯HTML文檔。問題與應用（能力要求）問題：標記屬性有哪些語法規(guī)則？要求學生完成本節(jié)學習后，熟練掌握HTML的基本語法、HTML文檔的基本結(jié)構(gòu)和HTML文檔的編輯。思考與實踐讓學生課后通過瀏覽一些網(wǎng)頁來了解網(wǎng)頁和網(wǎng)站設計與制作的基礎知識；并掌握網(wǎng)頁文檔結(jié)構(gòu)，以及能用文本編輯軟件制作簡單的網(wǎng)頁文檔。完成實驗項目一（網(wǎng)頁的認識）。教學方法與手段本章教學主要借助多媒體課件采用課堂講授的方式進行。HTML基礎目的與要求熟練掌握常用網(wǎng)頁基本元素的HTML標記。善于利用這些標記制作網(wǎng)頁文檔。教學內(nèi)容文本格式應用主要內(nèi)容文本段落格式文字的顯示效果列表格式基本概念和知識點文本段落格式（注釋標記、分段標記、換行/不換行標記、標題標記、分節(jié)標記、水平線標記、文本居中標記）。文字的顯示效果（字體標記、字符樣式標記、轉(zhuǎn)義字符）。列表格式（無序列表標記、有序列表標記）問題與應用（能力要求）問題：常用的轉(zhuǎn)義字符有哪些呢？要求學生完成本節(jié)學習后，熟練掌握網(wǎng)頁中最基本的元素文本的各種HTML標記。超鏈接主要內(nèi)容錨點標記頁面跳轉(zhuǎn)鏈接書簽超鏈接下載文件鏈接電子郵件鏈接基本概念和知識點錨點標記、頁面跳轉(zhuǎn)鏈接、書簽超鏈接、下載文件鏈接、電子郵件鏈接。問題與應用（能力要求）問題：什么是書簽超鏈接？要求學生完成本節(jié)學習后，熟練掌握網(wǎng)頁基本元素超鏈接的HTML標記。多媒體元素應用主要內(nèi)容圖片音頻和視頻動態(tài)元素基本概念和知識點圖片標記、圖片超鏈接、網(wǎng)頁背景。鏈接音頻或視頻文件、網(wǎng)頁背景音樂、內(nèi)嵌音頻或視頻播放插件動態(tài)元素。問題與應用（能力要求）問題：作為網(wǎng)頁背景的圖片文件格式有哪些？要求學生完成本節(jié)學習后，熟練掌握網(wǎng)頁基本元素多媒體元素（包括圖片、網(wǎng)頁背景、音頻和視頻、動態(tài)元素）的HTML標記。表格主要內(nèi)容表格基本結(jié)構(gòu)表格內(nèi)容的對齊表格在頁面中的對齊不規(guī)則表格表格顏色與背景基本概念和知識點表格基本結(jié)構(gòu)。表格內(nèi)容的對齊（水平方向?qū)R方式、垂直方向?qū)R方式）。表格在頁面中的對齊。不規(guī)則表格表格顏色和背景。問題與應用（能力要求）問題：網(wǎng)頁中不規(guī)則表格如何實現(xiàn)？要求學生完成本節(jié)學習后，熟練掌握網(wǎng)頁基本元素表格的有關(guān)HTML標記。表單主要內(nèi)容表單基本概念單行文本框和密碼框按鈕復選框和單選按鈕選擇欄多行文本框表單綜合示例基本概念和知識點表單的基本概念。單行文本框和密碼框。按鈕（提交按鈕、重置按鈕、自定義按鈕）。復選框和單選按鈕。選擇欄。多行文本框。問題與應用（能力要求）問題：表單中常用的表單項有哪些？要求學生完成本節(jié)學習后，熟練掌握網(wǎng)頁基本元素表單的有關(guān)HTML標記。思考與實踐思考題：如何使用表格來布局表單？讓學生熟練掌握常用網(wǎng)頁基本元素的HTML標記。完成實驗項目二（HTML標記的使用）。教學方法與手段本章教學主要借助多媒體課件采用課堂講授的方式進行。Dreamweaver基本操作目的與要求了解Dreamweaver軟件。熟悉Dreamweaver環(huán)境下文檔的基本操作。熟練掌握利用Dreamweaver軟件實現(xiàn)各種網(wǎng)頁基本元素的插入和設置。教學內(nèi)容Dreamweaver操作界面主要內(nèi)容Dreamweaver簡介Dreamweaver功能Dreamweaver界面基本概念和知識點了解Dreamweaver的歷史以及功能；熟悉Dreamweaver的界面。問題與應用（能力要求）問題：如何打開一個屏幕上不可見的面板？要求學生完成本節(jié)學習后，對網(wǎng)頁制作軟件Dreamweaver有個初步的認識并熟悉其操作界面。網(wǎng)站建立主要內(nèi)容規(guī)劃站點使用Dreamweaver創(chuàng)建本地站點基本概念和知識點站點結(jié)構(gòu)的規(guī)劃、站點導航機制的規(guī)劃。問題與應用（能力要求）問題：站點結(jié)構(gòu)的規(guī)劃要注意什么細節(jié)？要求學生完成本節(jié)學習后，熟悉使用Dreamweaver創(chuàng)建本地站點。Dreamweaver文檔操作主要內(nèi)容創(chuàng)建網(wǎng)頁保存網(wǎng)頁打開現(xiàn)有網(wǎng)頁瀏覽網(wǎng)頁基本概念和知識點文檔操作（網(wǎng)頁文件的新建、保存、關(guān)閉、打開和預覽以及設置頁面屬性等）；問題與應用（能力要求）問題：如何設置站點首頁？要求學生完成本節(jié)學習后，熟悉Dreamweaver環(huán)境下網(wǎng)頁文件的基本操作。網(wǎng)頁基本元素（一）主要內(nèi)容文字圖像超鏈接基本概念和知識點文本的輸入及設置；圖像的基本格式、圖像的插入及設置；相對路徑及絕對路徑的使用方法，超鏈接的創(chuàng)建。問題與應用（能力要求）問題：網(wǎng)頁中常用的圖片格式有哪些？要求學生完成本節(jié)學習后，熟練掌握網(wǎng)頁基本元素（包括文字、圖像及超鏈接等）的插入及設置。網(wǎng)頁基本元素（二）主要內(nèi)容多媒體對象表格表單基本概念和知識點在網(wǎng)頁中插入和播放各種多媒體對象；表格的創(chuàng)建及設置；表單及表單對象的創(chuàng)建，利用表格歸整表單。問題與應用（能力要求）問題：如何利用普通表格歸整表單？要求學生完成本節(jié)學習后，熟練掌握網(wǎng)頁基本元素（包括多媒體對象、表格及表單等）的插入及設置。思考與實踐思考題：理解各種鏈接路徑的含義。讓學生通過實踐掌握使用Dreamweaver軟件來規(guī)劃和創(chuàng)建本地站點的方法；熟悉Dreamweaver的基本文檔操作，熟練掌握各種網(wǎng)頁基本元素的插入和設置。完成實驗項目三（Dreamweaver基本操作（一））及實驗項目四（Dreamweaver基本操作（二））。在這兩個實驗項目中均是以中國古詩詞為網(wǎng)站主題，通過任務驅(qū)動的方式，讓學生在完成任務的過程中去領(lǐng)略古詩詞中蘊含的人生哲理、審美價值以及藝術(shù)感染力。教學方法與手段本章教學主要借助多媒體課件采用課堂講授的方式進行。

CSS樣式表目的與要求了解CSS樣式表的基本知識；熟悉CSS樣式表的創(chuàng)建及應用。CSS簡介主要內(nèi)容CSS的概念及優(yōu)點CSS的分類CSS的語法結(jié)構(gòu)CSS的優(yōu)先級基本概念和知識點CSS樣式表的概念，優(yōu)點，分類，樣式優(yōu)先級順序，語法。問題與應用（能力要求）問題：HTML及CSS是如何分工合作的?要求學生完成本節(jié)學習后，熟練掌握CSS樣式表的相關(guān)知識并能運用其來設置網(wǎng)頁格式、定位網(wǎng)頁布局等。CSS樣式表的創(chuàng)建及應用主要內(nèi)容CSS樣式的創(chuàng)建與編輯修改CSS樣式的應用基本概念和知識點“CSS樣式”面板（功能，各選項）。“新建CSS規(guī)則”對話框中其他各選項的含義。CSS屬性設置（打開【CSS規(guī)則定義】對話框，創(chuàng)建8種CSS樣式類型）。應用CSS樣式（利用“CSS樣式”面板，利用“屬性”面板）。問題與應用（能力要求）問題：什么是CSS的濾鏡功能?要求學生完成本節(jié)學習后，熟練掌握CSS樣式表的相關(guān)知識并能運用其來設置網(wǎng)頁格式。思考與實踐思考題：理解各種選擇器的含義。讓學生理解CSS的含義，熟練掌握CSS樣式表的創(chuàng)建和應用。在講授“CSS選擇器如何美化網(wǎng)頁元素”的案例教學中引入一些能體現(xiàn)人文精神、仁愛之心的網(wǎng)頁例文素材，把價值觀培育有機地融入課程，潤物無聲，立德樹人。完成實驗項目五（CSS樣式表）。教學方法與手段本章教學主要借助多媒體課件采用課堂講授的方式進行。

Dreamweaver網(wǎng)頁布局設計目的與要求熟練掌握表格的網(wǎng)頁定位技術(shù)。熟練掌握框架的網(wǎng)頁定位技術(shù)。使用層來布局頁面。熟練掌握基于CSS的網(wǎng)頁布局設計。教學內(nèi)容布局表格主要內(nèi)容標準模式與布局模式切換繪制布局表格與布局單元格修改布局表格與布局單元格在布局單元格中添加網(wǎng)頁元素表格規(guī)劃主頁布局實例基本概念和知識點布局表格（布局視圖模式，布局表格以及布局單元格的繪制、屬性設置以及基本操作）。利用布局表格來規(guī)劃主頁。中華民族有著五千年的歷史,飲食文化作為其中的重要組成部分,不僅折射了朝代更迭的繁榮與落寞,而且也演變成為了一個民族生生不息的靈魂與支柱。在講授“利用布局表格布局網(wǎng)頁”時以中國八大美食為主題，讓學生在掌握網(wǎng)頁布局知識的同時能更加了解中國的傳統(tǒng)文化，增強民族自豪感和自信心。問題與應用（能力要求）問題：Dreamweaver中的表格可分為哪兩種？要求學生完成本節(jié)學習后，熟練掌握表格用于在HTML頁面上顯示格式化數(shù)據(jù)以及對網(wǎng)頁元素進行布局?？蚣苤饕獌?nèi)容框架與框架集創(chuàng)建框架集編輯框架集及框架利用框架設計主頁基本概念和知識點框架與框架集（概念，缺點，組成）。創(chuàng)建框架集（創(chuàng)建預定義框架集，自定義框架集）。編輯框架集及框架（選取框架集或框架，設置框架大小，刪除框架，拆分框架，設置框架集或框架屬性，設置超鏈接目標框架，保存框架集及框架）。利用框架設計主頁。問題與應用（能力要求）問題：如何保存框架集及框架？要求學生完成本節(jié)學習后，熟練掌握框架的基本操作并能制作使用框架排版的網(wǎng)頁。層主要內(nèi)容層的定位與插入改變層順序與可見性設置層的屬性通過層對網(wǎng)頁元素進行頁面布局基本概念和知識點層（概念，特點，局限性及適用范圍）。層的基本操作（創(chuàng)建層，激活和選中層，調(diào)整、移動和對齊層，設置層的屬性，層面板的使用）。利用層設計主頁。問題與應用（能力要求）問題：層的特點是什么？要求學生完成本節(jié)學習后，熟練掌握層的概念，熟悉層的基本操作以及利用層來布局頁面。基于CSS的網(wǎng)頁布局設計主要內(nèi)容CSS盒子模式CSS盒子的浮動CSS盒子的定位基本概念和知識點理解Div元素；理解CSS的盒子模式；掌握利用DIV+CSS來定位的技術(shù)；問題與應用（能力要求）問題：CSS的盒子模式是怎么樣的？要求學生完成本節(jié)學習后，熟練掌握DIV+CSS的定位技術(shù)。長城是中華民族精神的象征，紅色基因的重要傳承者之一。在案例教學中以長城的城墻為例，讓學生熟練掌握盒子的定位知識的同時更能知長城，愛長城，鑄長城魂魄。模板主要內(nèi)容模板的基本知識創(chuàng)建模板編輯模板應用模板基本概念和知識點模板（概念，特點，組成）。創(chuàng)建模板（新建模板，生成模板）。編輯模板（定義可編輯區(qū)域，刪除可編輯區(qū)域）。應用模板（創(chuàng)建基于模板的文檔，更新模板）。問題與應用（能力要求）問題：模板由哪兩部分組成？要求學生完成本節(jié)學習后，了解模板的特點與用途，掌握模板的制作與使用方法以及學習如何管理模板及如何通過模板批量創(chuàng)建與修改網(wǎng)頁。會使用模板來減少重復工作。思考與實踐思考題：四種網(wǎng)頁定位技術(shù)的優(yōu)缺點是什么？讓學生熟悉Dreamweaver的表格、框架以及層、CSS的定位技術(shù)等各種布局工具，并能熟練掌握這些工具的融合使用。完成實驗項目六（Dreamweaver網(wǎng)頁布局設計（一））及實驗項目七（Dreamweaver網(wǎng)頁布局設計（二））。教學方法與手段本章教學主要借助多媒體課件采用課堂講授的方式進行。網(wǎng)站發(fā)布目的與要求熟練掌握本地站點的建設流程。熟悉網(wǎng)站發(fā)布的各項工作程序。教學內(nèi)容創(chuàng)建本地網(wǎng)站流程主要內(nèi)容創(chuàng)建本地網(wǎng)站流程基本概念和知識點確立主題（新穎、實用、貼切）。進行布局設計（選擇最恰當?shù)牟季衷O計工具如表格、框架、層、DIV+CSS或它們的混合）。收集相關(guān)素材(包括文字、圖片、音頻和視頻等）。創(chuàng)建站點和建立網(wǎng)頁文件。問題與應用（能力要求）問題：簡述利用Dreamweaver軟件創(chuàng)建站點和建立網(wǎng)頁文件的過程。要求學生完成本節(jié)學習后，能夠?qū)Ρ镜鼐W(wǎng)站建設流程有個更為清晰的了解。網(wǎng)站發(fā)布主要內(nèi)容網(wǎng)站整理建立上傳網(wǎng)站空間上傳網(wǎng)站文件基本